/* ============================================================
   Jerusalem Unity Center — Header + Hero
   Values extracted from assets/full-mockup.png (864px render,
   scaled ×5/3 to a 1440px desktop reference)
   ============================================================ */

:root {
  /* Colors sampled from mockup */
  --navy: #0A0F23;            /* deep navy under header/nav */
  --navy-soft: #13162B;       /* hero far-left base */
  --gold: #C4923F;            /* dominant gold accent */
  --gold-hi: #CD9C4C;         /* gold gradient top */
  --gold-lo: #BC8C3E;         /* gold gradient bottom */
  --btn-gold-top: #A87836;    /* button gradient, measured profile */
  --btn-gold-bottom: #724E1D;
  --btn-text-cream: #F3EDDC;  /* cream text on gold, dark shadow under */
  --btn-bevel: rgba(226, 185, 115, 0.6);
  --white: #FFFFFF;
  --text-body: #E9E9EE;       /* hero paragraph */
  --text-nav: #E6E2E6;        /* nav links */
  --ghost-border: rgba(201, 155, 92, 0.55);

  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ============================================================
   HERO BACKGROUND
   herobg.png is taller than the mockup crop; 50% 23% vertical
   position reproduces the mockup framing (dome + skyline +
   building on the right), verified by image matching.
   ============================================================ */

.hero {
  position: relative;
  min-height: 578px;
  background-image: url("assets/herobg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 23%;
  background-color: var(--navy-soft);
  overflow: hidden;
}

/* Left-side dark overlay — alphas computed from mockup-vs-raw
   zone differences (~0.28 at left third fading to ~0.09 right) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 11, 26, 0.55) 0%,
    rgba(9, 11, 26, 0.30) 35%,
    rgba(9, 11, 26, 0.08) 100%
  );
  pointer-events: none;
}

/* ============================================================
   HEADER — transparent bar over the hero
   ============================================================ */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 28px;
}

.header-inner {
  display: flex;
  align-items: flex-start;
}

/* --- Brand ------------------------------------------------- */

.brand {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

/* PNG already carries its own gold circular emblem — no frame.
   The image content fills only ~60% of its frame, so scale it up
   visually (layout box stays 88px) to match the mockup emblem. */
.logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  transform: scale(1.66);
  transform-origin: center;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  margin-top: 3px;
}

.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white);
}

.brand-sub {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

.brand-tagline {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--text-nav);
  margin-top: 9px;
}

/* --- Nav ---------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 29px;
  margin-left: auto;
  margin-top: 10px;
  white-space: nowrap;
}

.site-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--text-nav);
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--gold-hi);
}

/* --- Header actions ----------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  margin-left: 26px;
  margin-top: 10px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  text-transform: uppercase;
  cursor: pointer;
}

.btn-support {
  height: 35px;
  padding: 0 19px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  transition: filter 0.2s ease;
}

.btn-support:hover {
  filter: brightness(1.12);
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-left: 16px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-nav);
  cursor: pointer;
  transition: color 0.2s ease;
}

.search-btn:hover {
  color: var(--gold-hi);
}

.search-btn svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */

/* Header is absolute over the hero and the scaled emblem reaches
   ~145px down, so the content must start well below that to leave
   a clear gap between the nav bar and the heading. */
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 200px;
  padding-bottom: 40px;
}

.hero-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(40px, 3.6vw, 52px);
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.hero-heading .gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 560px;
  margin-top: 14px;
  font-size: 17px;
  font-weight: 300;
  line-height: 29px;
  color: var(--text-body);
}

/* --- Scripture quote ------------------------------------------ */

.hero-quote {
  max-width: 560px;
  margin-top: 14px;
}

.hero-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: var(--gold);
}

.hero-quote-text .qmark {
  opacity: 0.55;
}

.hero-quote-cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 146, 63, 0.8);
}

/* --- CTAs ---------------------------------------------------- */

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 24px;
}

.hero-ctas .btn {
  height: 47px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

.btn-primary {
  padding: 0 22px;
  border: 1px solid var(--btn-bevel);
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  transition: filter 0.2s ease;
}

.btn-primary:hover {
  filter: brightness(1.12);
}

.icon-arrow {
  width: 22px;
  height: 11px;
  margin-left: 12px;
}

.btn-ghost {
  padding: 0 18px;
  border: 1px solid var(--ghost-border);
  background: rgba(7, 9, 24, 0.35);
  color: #E3E3E6;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.btn-ghost:hover {
  border-color: var(--gold-hi);
  background: rgba(7, 9, 24, 0.55);
}

.icon-play {
  width: 19px;
  height: 19px;
  margin-right: 12px;
}

/* ============================================================
   SECTION 2 — 7-PILLAR NAVY STRIP
   Values measured on assets/full-mockup.png (strip y347–515 in
   the 864px render, scaled ×5/3 to the 1440px reference).
   Background: gradient in the mockup spans the full range of
   section2-bg.png compressed into the strip → 100% 100% size.
   ============================================================ */

:root {
  --s2-hairline: #7E5C3D;     /* bronze line atop strip */
  --s2-title: #DEDCE3;        /* pillar titles */
  --s2-desc: #C8C4CC;         /* muted descriptions */
}

/* Navy overlay desaturates the raw bg toward the mockup's tone
   (render rgb(42,21,78) vs mockup rgb(26,21,52) at the bright zone) */
.pillars {
  border-top: 2px solid var(--s2-hairline);
  background:
    linear-gradient(rgba(12, 17, 36, 0.32), rgba(12, 17, 36, 0.32)),
    #150F31 url("assets/section2-bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 32px 20px 50px;
}

.pillars-row {
  display: flex;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
}

.pillar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The gold ring is baked into each icon PNG at a different scale
   within its 1254px frame (ring spans 892–1080px depending on the
   file). Per-icon widths normalize every ring to exactly 80px. */
.pillar-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pillar-icon img {
  height: auto;
}

.icon-learn      { width: 100px; }
.icon-library    { width: 106px; }
.icon-community  { width: 112px; }
.icon-event      { width: 93px; }
.icon-institutes { width: 93px; }
.icon-research   { width: 95px; }
.icon-global     { width: 96px; }

.pillar-title {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--s2-title);
}

.pillar-desc {
  max-width: 180px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  color: var(--s2-desc);
}

/* Events is the one pillar with a destination of its own, so it is
   the one rendered as a link; the lift on hover is the only thing
   marking it apart from its neighbours. */
.pillar-link {
  transition: transform 0.2s ease;
}

.pillar-link:hover {
  transform: translateY(-3px);
}

.pillar-link:hover .pillar-title {
  color: var(--gold-hi);
}

/* ============================================================
   SECTION 3 — DISCOVER OUR INSTITUTES
   Measured on assets/full-mockup.png (section y516–869 in the
   864px render, scaled ×5/3 to the 1440px reference).
   Cream: #EBDFD4 (section3-bg.png paper texture, avg #EEE0D3).
   Cards: #0A0E25, ~212×442px, radius 15px, gap 14px.
   Image block 193px fading into card navy; 100px icon ring
   centered 212px from card top (31px overlap into the image).
   ============================================================ */

:root {
  --s3-cream: #EBDFD4;
  --s3-heading: #262242;      /* section heading + view-all link */
  --s3-card-navy: #0A0E25;
  --s3-orn-gold: #BFA075;     /* heading side ornaments */
  --s3-title: #EEEDED;        /* card titles */
  --s3-desc: #CBC8D2;         /* card descriptions */
}

.institutes {
  background: var(--s3-cream) url("assets/section3-bg.png") center / cover no-repeat;
  padding: 30px 0 28px;
}

/* --- Heading with gold side ornaments ----------------------- */

.institutes-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s3-heading);
}

/* Thin gold line with a small diamond at the text-side end */
.heading-orn {
  position: relative;
  width: 96px;
  height: 1px;
  background: var(--s3-orn-gold);
  flex-shrink: 0;
}

.heading-orn::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--s3-orn-gold);
  transform: rotate(45deg);
}

.orn-left::after  { right: 0; }
.orn-right::after { left: 0; }

/* --- Card row ------------------------------------------------ */

.institutes-row {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.institute-card {
  flex: 1 1 0;
  min-width: 0;
  height: 442px;
  background: var(--s3-card-navy);
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
}

/* Photo fades into the card navy over its lower third */
.card-media {
  position: relative;
  height: 193px;
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 37, 0) 50%,
    rgba(10, 14, 37, 0.55) 80%,
    var(--s3-card-navy) 100%
  );
}

/* Gold ring is baked into each icon PNG; the emblem circle adds
   the mockup's translucent navy disc behind it. Per-icon widths
   normalize every ring to exactly 100px (ring bbox / 1254 frame). */
.card-emblem {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  margin: -31px auto 0;
  border-radius: 50%;
  background: rgba(10, 14, 37, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-emblem img {
  height: auto;
}

.emblem-consciousness { width: 120px; }
.emblem-spiritual     { width: 127px; }
.emblem-human         { width: 114px; }
.emblem-moral         { width: 118px; }
.emblem-global        { width: 126px; }
.emblem-science       { width: 115px; }

.card-title {
  margin-top: 13px;
  padding: 0 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--s3-title);
}

.card-desc {
  margin-top: 12px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 300;
  line-height: 23px;
  color: var(--s3-desc);
}

/* --- View all link -------------------------------------------
   Mockup renders this link dark navy (avg #2E294A), not gold. */

.institutes-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 22px auto 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s3-heading);
  transition: color 0.2s ease;
}

.institutes-viewall:hover {
  color: var(--gold);
}

.institutes-viewall .icon-arrow {
  width: 26px;
  height: 12px;
  margin-left: 14px;
}

/* ============================================================
   SECTION 4 — A FUTURE GATHERING PLACE FOR HUMANITY
   section4-bg.png (1672x941) already carries the flat navy
   field on its left half; cover-cropping at 50% 38% reproduces
   the mockup framing (campus terraces on the right), verified
   by template match against the mockup (offset 89/234). The
   mockup runs slightly darker on the left, so only a light
   navy wash fades out toward the image side.
   ============================================================ */

.future-banner {
  position: relative;
  height: 420px;
  background-image: url("assets/section4-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 38%;
  background-color: #150C31;
  overflow: hidden;
}

.future-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(13, 7, 35, 0.38) 0%,
    rgba(13, 7, 35, 0.20) 30%,
    rgba(13, 7, 35, 0) 48%
  );
  pointer-events: none;
}

.future-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 102px; /* text starts x61 in the 864px mockup */
}

.future-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 52px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
}

/* HUMANITY gold — brighter than the hero gold; interior glyph
   pixels measure rgb(251,229,149) top -> rgb(228,188,122) bottom */
.future-heading .gold-bright {
  background: linear-gradient(180deg, #F3DF93, #DDB874);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.future-sub {
  max-width: 388px;
  margin-top: 22px;
  font-size: 16px;
  font-weight: 300;
  line-height: 27.5px;
  color: #E5E2EA;
}

.future-cta {
  margin-top: 25px;
  height: 47px;
  padding: 0 26px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ============================================================
   SECTION 5 — FIVE PATHWAYS OF EXPLORATION
   Measured on assets/full-mockup.png (section y1122–1289 in the
   864px render, scaled ×5/3 to the 1440px reference).
   Cream matches the Institutes section; section5-bg.png texture.
   Heading identical to Institutes (29px / 0.12em / #262242) with
   the same diamond-tipped ornaments at 42px line length.
   Icons are plain gold outlines with NO circular frame; content
   bottoms align across the row (~57–65px art heights). Dividers:
   1px soft gold, 168px tall, between columns only.
   ============================================================ */

:root {
  --s5-title: #3A3552;        /* pathway titles */
  --s5-desc: #5C5566;         /* muted descriptions */
  --s5-divider: #D6BDA6;      /* thin vertical gold lines */
}

.pathways {
  background: var(--s3-cream) url("assets/section5-bg.png") center / cover no-repeat;
  padding: 28px 0 25px;
}

/* Same cap height as the Institutes heading but tighter tracking:
   mockup text width 478px = natural glyphs (463px) + ~0.02em */
.pathways-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s3-heading);
}

/* Same ornament as Institutes, shortened to the mockup's 42px */
.orn-short {
  width: 42px;
}

/* --- Column row ---------------------------------------------- */

.pathways-row {
  display: flex;
  align-items: flex-start;
  margin-top: 24px;
}

.pathway {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pathway-divider {
  flex-shrink: 0;
  width: 1px;
  height: 168px;
  margin-top: 10px;
  background: var(--s5-divider);
}

/* Icon art bottoms align across the row in the mockup; each PNG
   carries different transparent padding within its 2048px frame,
   so per-icon heights normalize the visible art to 57–65px. */
.pathway-icon {
  height: 66px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pathway-icon img {
  width: auto;
  object-fit: contain;
}

.pw-consciousness { height: 91px; margin-bottom: -13px; }
.pw-spiritual     { height: 102px; margin-bottom: -22px; }
.pw-human         { height: 92px; margin-bottom: -13px; }
.pw-dialogue      { height: 81px; margin-bottom: -10px; }
.pw-culture       { height: 85px; margin-bottom: -12px; }

.pathway-title {
  max-width: 165px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s5-title);
}

.pathway-desc {
  max-width: 195px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--s5-desc);
}

/* ============================================================
   SECTION 6 — JOIN A GLOBAL MOVEMENT
   Measured on assets/full-mockup.png (band y1290–1418 in the
   864px render, ×5/3 to the 1440px reference → 213px tall).
   section6-bg.png IS the banner background — base navy #150E30
   with the faint gold network clusters already baked in at the
   far left and right edges.
   Button fill/text measured identical to the header button
   (#AF7F35→#7F5721 fill, cream text over a dark shadow), so it
   reuses the shared --btn-gold-* / --btn-text-cream vars.
   The button is NOT flush right: its right edge sits 179px
   inside the shell, leaving textured space beyond it.
   ============================================================ */

:root {
  --s6-navy: #150E30;         /* banner base under the bg image */
  --s6-para: #DFE1E3;         /* paragraph grey-white */
}

/* section6-bg.png carries a bright radial glow at its center that
   the mockup suppresses to a flat dark navy; the horizontal overlay
   below reproduces the mockup's measured darkening (strongest at
   the band center, none at the outer edges where the gold network
   clusters sit). */
.join-banner {
  height: 213px;
  background:
    linear-gradient(90deg,
      rgba(7, 3, 26, 0)    2%,
      rgba(7, 3, 26, 0.75) 25%,
      rgba(7, 3, 26, 0.86) 50%,
      rgba(7, 3, 26, 0.55) 68%,
      rgba(7, 3, 26, 0.10) 95%),
    var(--s6-navy) url("assets/section6-bg.png") center / cover no-repeat;
}

.join-inner {
  display: flex;
  align-items: center;
  height: 100%;
}

/* bird-icon.png is a 1254px square canvas whose art occupies a
   1052×898 box inside it (transparent padding: 123L/79R/154T/202B).
   A 248px square at scale 0.198 puts the visible art at the
   mockup's 208×178, art left edge at x100, art center ~12px below
   the band center. The canvas overflows the 213px band top/bottom
   but only with transparent padding. */
.join-dove {
  width: 248px;
  height: 248px;
  margin-left: 28px;
  margin-top: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.join-copy {
  margin-left: 46px;
  flex-shrink: 0;
}

.join-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
}

.join-desc {
  max-width: 480px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: var(--s6-para);
}

.btn-member {
  width: 293px;
  height: 60px;
  margin-left: auto;
  margin-right: 179px;
  margin-bottom: 13px;
  flex-shrink: 0;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  /* measured #AA7932→#855B23 across the mockup button — a touch
     lighter than the shared header-button gradient */
  background: linear-gradient(180deg, #B28136, #7B5420);
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: filter 0.2s ease;
}

.btn-member:hover {
  filter: brightness(1.12);
}

/* ============================================================
   SECTION 7 — SUPPORT OUR MISSION
   Nonprofit / tax-deductibility statement. Reuses the cream
   band language of Sections 3 and 5 (same texture, same
   ornamented serif heading) so it reads as part of the same
   family between the navy Join banner and the navy footer.
   ============================================================ */

.support-mission {
  background: var(--s3-cream) url("assets/section5-bg.png") center / cover no-repeat;
  padding: 34px 0 42px;
}

/* Same treatment as .pathways-heading */
.support-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s3-heading);
}

.support-text {
  max-width: 780px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.01em;
  color: var(--s5-desc);
}

.support-text + .support-text {
  margin-top: 14px;
}

/* Organization names in the section's darker serif-navy */
.support-text strong {
  font-weight: 600;
  color: var(--s5-title);
}

.support-text-appeal {
  font-style: italic;
  color: var(--s5-title);
}

/* Donate CTA — the section's cream background calls for the
   inverse of the gold-fill buttons used on dark bands (header,
   hero, join banner): a navy fill with a gold bevel + gold text,
   still built on the same --btn-* / --gold-* palette so it reads
   as part of the same family rather than a new button system. */
.btn-donate {
  display: flex;
  width: max-content;
  margin: 28px auto 0;
  padding: 0 26px;
  height: 47px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--navy-soft), var(--navy));
  color: var(--gold-hi);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  transition: filter 0.2s ease, color 0.2s ease;
}

.btn-donate:hover {
  filter: brightness(1.5);
  color: var(--btn-text-cream);
}

/* ============================================================
   FOOTER
   Measured on assets/full-mockup.png (864px wide = 5/3 of the
   1440px reference; footer band y1551–1732 → 302px tall:
   220px top row + 1px divider + 81px bottom bar).
   footer-bg.png (1672×941) anchored 50% 100% — its bottom slice
   (#151139→#0C0E2D) matches the mockup navy (#161230→#100F2A).
   Faint 1px vertical dividers verified at mockup x271/379/473/
   619 → 452/632/788/1032 at 1440.
   ============================================================ */

:root {
  --footer-heading: #C0965C;    /* gold column headings */
  --footer-link: #C0BCC8;       /* muted lavender-white links */
  --footer-quote: #E7B559;      /* bright quote gold */
  --footer-qmark: #D9A445;      /* decorative quotation marks */
  --footer-attr: #C39C60;       /* attribution gold-tan */
  --footer-muted: #ACA9B8;      /* bottom-bar grey-lavender */
  --footer-line: rgba(255, 255, 255, 0.12);
}

.site-footer {
  background: #100F2A url("assets/footer-bg.png") 50% 100% / cover no-repeat;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  height: 220px;
  padding-top: 24px;
}

/* Zone widths = divider-to-divider spans at 1440 */
.fcol-brand    { width: 404px; flex-shrink: 0; }
.fcol-center   { width: 180px; flex-shrink: 0; }
.fcol-resources{ width: 156px; flex-shrink: 0; }
.fcol-involved { width: 244px; flex-shrink: 0; }
.fcol-quote    { flex: 1; min-width: 0; }

.footer-vline {
  width: 1px;
  height: 170px;
  background: var(--footer-line);
  flex-shrink: 0;
}

/* --- Column 1: brand + social ------------------------------- */

.footer-brand {
  display: flex;
  align-items: flex-start;
  padding-left: 34px;
}

/* Same treatment as the header .logo: the PNG's art fills only
   ~61% of its 1024px frame (alpha bbox 193–813), so the 88px
   layout box is scaled up visually to render the mockup's
   header-sized emblem. */
.footer-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  transform: scale(1.66);
  transform-origin: center;
  flex-shrink: 0;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  margin-left: 17px;
  margin-top: 4px;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 31px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-brand-sub {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

.footer-brand-tagline {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 17px;
  text-transform: uppercase;
  color: #D3D3DC;
  margin-top: 9px;
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 27px;
  padding-left: 30px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--footer-heading);
  border-radius: 50%;
  color: #DFB05C;
  transition: filter 0.2s ease;
}

.social-link:hover {
  filter: brightness(1.25);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

/* --- Columns 2–4: link lists -------------------------------- */

.fcol-links {
  padding-top: 8px;
}

.fcol-center    { padding-left: 41px; }
.fcol-resources { padding-left: 43px; }
.fcol-involved  { padding-left: 45px; }

.fcol-heading {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--footer-heading);
}

.fcol-list {
  list-style: none;
  margin-top: 14px;
}

/* 27px row pitch (18px line + 9px gap), measured 16px rows in
   the 864px mockup */
.fcol-list li {
  font-size: 14px;
  line-height: 18px;
}

.fcol-list li + li {
  margin-top: 9px;
}

.fcol-list a {
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--footer-link);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.fcol-list a:hover {
  color: var(--gold-hi);
}

/* Slight emphasis so "Donate Now" reads as the standout action
   at the top of Get Involved, without a new visual language. */
.fcol-list a.fcol-donate {
  color: var(--footer-heading);
  font-weight: 600;
}

.fcol-list a.fcol-donate:hover {
  color: var(--gold-hi);
}

/* --- Column 5: quote ----------------------------------------- */

.fcol-quote {
  padding-left: 48px;
  padding-top: 6px;
}

.footer-quote {
  position: relative;
  max-width: 300px; /* wraps as in mockup: within / path / for all. */
  padding-left: 38px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 29px;
  line-height: 42px;
  color: var(--footer-quote);
}

.qmark {
  font-style: normal;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: var(--footer-qmark);
}

.qmark-open {
  position: absolute;
  left: 0;
  top: -2px;
}

/* line-height 0 so the 46px mark doesn't inflate the last
   line's box; nudged down to sit just over "all." as in the
   mockup */
.qmark-close {
  line-height: 0;
  position: relative;
  top: 8px;
  margin-left: 8px;
}

.footer-quote-attr {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--footer-attr);
}

/* --- Bottom bar ---------------------------------------------- */

.footer-divider {
  max-width: 1344px;
  margin: 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Newsletter band ------------------------------------------
   Sits in its own rule between the column row and the bottom bar:
   copy on the left, a single-line form on the right. Field styling
   deliberately echoes the membership modal so the two forms read
   as one system.
   -------------------------------------------------------------- */

.footer-news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* Left edge lines up with the copyright below (x63); the button's
     right edge lines up with the divider (the shell's own 48px). */
  padding-left: 63px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.fnews-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--footer-heading);
}

.fnews-text {
  margin-top: 6px;
  max-width: 46ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  color: var(--footer-link);
}

.fnews-form {
  position: relative;
  flex-shrink: 0;
  width: 480px;
  max-width: 100%;
}

/* Honeypot: off-screen rather than display:none, so bots that
   skip hidden inputs still fill it in. */
.fnews-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fnews-row {
  display: flex;
  gap: 10px;
}

/* The label is for screen readers; the placeholder carries the
   visual cue, as everywhere else in this footer. */
.fnews-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fnews-input {
  flex: 1;
  min-width: 0;
  height: 47px;
  padding: 0 15px;
  border: 1px solid var(--ghost-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fnews-input::placeholder {
  color: rgba(233, 233, 238, 0.45);
}

.fnews-input:focus {
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(196, 146, 63, 0.18);
}

.fnews-input:disabled {
  opacity: 0.6;
}

.fnews-form.is-invalid .fnews-input {
  border-color: var(--mf-error);
}

.fnews-form.is-invalid .fnews-input:focus {
  box-shadow: 0 0 0 3px rgba(224, 169, 160, 0.18);
}

/* Same gradient/bevel as the membership submit button, sized to
   sit flush beside the field. */
.fnews-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;
  height: 47px;
  padding: 0 26px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.fnews-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}

.fnews-btn:disabled {
  cursor: default;
  opacity: 0.72;
}

.fnews-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(243, 237, 220, 0.35);
  border-top-color: var(--btn-text-cream);
  border-radius: 50%;
  animation: mf-spin 0.7s linear infinite;
}

.fnews-btn.is-sending .fnews-spinner {
  display: block;
}

.fnews-msg {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 19px;
}

.fnews-msg.is-ok {
  color: var(--gold-hi);
}

.fnews-msg.is-error {
  color: var(--mf-error);
}

/* Copyright starts at x63; legal links end ~107px inside the
   right edge (measured at 1440) */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 81px;
  padding: 0 107px 17px 63px;
}

.footer-copy {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--footer-muted);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 26px;
}

.footer-legal a {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--footer-muted);
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--footer-link);
}

.legal-sep {
  width: 1px;
  height: 14px;
  background: rgba(172, 169, 184, 0.5);
}

/* ============================================================
   MOBILE-ONLY ELEMENTS — base state
   These two rules exist solely to hide the NEW hamburger button
   and the NEW cloned Support link on desktop. They style no
   pre-existing element and change nothing in the approved
   desktop design.
   ============================================================ */

.nav-toggle {
  display: none;
}

.site-nav .nav-support {
  display: none;
}

/* ============================================================
   IN-PAGE NAVIGATION — smooth scrolling to section anchors.
   New behavior only; no visual change to approved elements.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* Breathing room above a scrolled-to section (header is not
   fixed, so a small comfort margin is enough). */
#hero,
#explore,
#institutes,
#vision,
#pathways,
#join,
#support,
#footer {
  scroll-margin-top: 24px;
}

/* ============================================================
   BECOME A MEMBER — membership enquiry modal

   Matches the site's navy/gold/serif language and 4px radius.
   The panel scrolls internally so the full form is reachable on
   short viewports without the page behind it moving.

   Error red (#E0A9A0) is a desaturated clay rather than a pure
   red — it reads as a warning against navy without breaking the
   warm palette.
   ============================================================ */

:root {
  --mf-field-bg: rgba(7, 9, 24, 0.55);
  --mf-error: #E0A9A0;
}

body.modal-open {
  overflow: hidden;
}

.member-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(7, 9, 24, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.member-overlay.is-open {
  display: flex;
  animation: mf-fade 0.22s ease both;
}

@keyframes mf-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.member-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;   /* the off-screen honeypot must not add a bar */
  padding: 44px 44px 38px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, #13162B, #0A0F23);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: mf-rise 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

@keyframes mf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.member-modal::-webkit-scrollbar {
  width: 8px;
}

.member-modal::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(196, 146, 63, 0.5);
}

.member-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  color: var(--gold);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.member-close:hover {
  color: var(--gold-hi);
}

.member-head {
  text-align: center;
}

.member-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.15;
  color: var(--white);
}

.member-sub {
  max-width: 44ch;
  margin: 10px auto 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--text-body);
}

/* Reservation mode only: a gold pill naming the event being booked,
   so the visitor can see the form knows which evening they clicked. */
.mf-event-note {
  display: inline-block;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 7px 15px;
  border: 1px solid var(--ghost-border);
  border-radius: 999px;
  background: rgba(196, 146, 63, 0.12);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: var(--gold-hi);
  text-wrap: balance;
}

/* An author display value beats the UA rule for [hidden], so the
   pill has to be told to disappear explicitly. */
.mf-event-note[hidden] {
  display: none;
}

/* ---- Form ---------------------------------------------------- */

.member-form {
  margin-top: 26px;
}

/* Honeypot: off-screen rather than display:none, so bots that
   skip hidden inputs still fill it in. */
.mf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

.mf-field-wide {
  grid-column: 1 / -1;
}

.mf-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.mf-req {
  color: var(--gold);
}

.mf-opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(233, 233, 238, 0.55);
}

.mf-input {
  display: block;
  width: 100%;
  height: 47px;
  padding: 0 15px;
  border: 1px solid var(--ghost-border);
  border-radius: 4px;
  background: var(--mf-field-bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mf-input::placeholder {
  color: rgba(233, 233, 238, 0.45);
}

.mf-input:focus {
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(196, 146, 63, 0.18);
}

.mf-textarea {
  height: auto;
  min-height: 104px;
  padding: 13px 15px;
  line-height: 22px;
  resize: vertical;
}

/* Native select arrows are grey on every platform; hide the
   control's own chevron and draw a gold one on the wrapper. */
.mf-select-wrap {
  position: relative;
}

.mf-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.mf-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}

.mf-select option {
  background: #13162B;
  color: var(--text-body);
}

/* ---- Errors and helpers -------------------------------------- */

.mf-field.is-invalid .mf-input {
  border-color: var(--mf-error);
}

.mf-field.is-invalid .mf-input:focus {
  box-shadow: 0 0 0 3px rgba(224, 169, 160, 0.18);
}

.mf-err {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 17px;
  color: var(--mf-error);
}

.mf-under {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mf-under .mf-err {
  flex: 1;
}

.mf-count {
  margin-top: 6px;
  margin-left: auto;
  font-size: 11px;
  color: rgba(233, 233, 238, 0.45);
  font-variant-numeric: tabular-nums;
}

.mf-formerr {
  margin-top: 18px;
  padding: 11px 14px;
  border: 1px solid rgba(224, 169, 160, 0.45);
  border-radius: 4px;
  background: rgba(224, 169, 160, 0.08);
  font-size: 12.5px;
  line-height: 19px;
  color: var(--mf-error);
}

.mf-note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  color: rgba(233, 233, 238, 0.5);
}

/* ---- Submit --------------------------------------------------- */

.member-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 49px;
  margin-top: 22px;
  border: 1px solid var(--btn-bevel);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
  text-shadow: 0 1px 2px rgba(61, 32, 6, 0.55);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.member-submit:hover:not(:disabled) {
  filter: brightness(1.12);
}

.member-submit:disabled {
  cursor: default;
  opacity: 0.72;
}

.mf-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(243, 237, 220, 0.35);
  border-top-color: var(--btn-text-cream);
  border-radius: 50%;
  animation: mf-spin 0.7s linear infinite;
}

.member-submit.is-sending .mf-spinner {
  display: block;
}

@keyframes mf-spin {
  to { transform: rotate(360deg); }
}

/* ---- Success panel -------------------------------------------- */

.member-done {
  text-align: center;
  padding: 12px 0 4px;
  animation: mf-rise 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.member-done-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ghost-border);
  border-radius: 50%;
  background: rgba(196, 146, 63, 0.12);
  color: var(--gold-hi);
}

.member-done-mark svg {
  width: 26px;
  height: 26px;
}

.member-done-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--white);
}

.member-done-text {
  max-width: 42ch;
  margin: 12px auto 0;
  font-size: 14px;
  line-height: 23px;
  color: var(--text-body);
}

/* .btn-ghost carries only colour; the hero supplies its metrics,
   so the modal has to state its own. */
.member-done-close {
  height: 47px;
  min-width: 170px;
  margin-top: 26px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

/* ============================================================
   WATCH OUR STORY — animated presentation lightbox

   No film exists yet, so the story is a timed sequence of motion
   slides. Everything here is deliberately video-shaped (chapter
   progress, transport controls, letterbox-dark ground) so a real
   <video class="story-video"> can take the stage later without
   touching the chrome.

   Sits at z-index 90, UNDER the membership modal (100), so
   "Become a Member" on the closing slide still opens above it.
   ============================================================ */

:root {
  --story-ink: #05070F;       /* letterbox ground, darker than --navy */
  --story-cream: #F0E6D2;     /* slide body copy on the dark ground */
  --story-gold-lt: #F0DCA8;   /* highlight end of the gold gradient */
}

.story-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--story-ink);
}

.story-overlay.is-open {
  display: block;
  animation: storyOpen 0.5s ease both;
}

.story-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Cinema vignette over every slide, under the chrome */
.story-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(115% 85% at 50% 45%, transparent 45%, rgba(3, 5, 12, 0.55) 100%);
}

/* --- Chapter progress ---------------------------------------- */

.story-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  gap: 6px;
  padding: 16px 26px 0;
}

.story-seg {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(240, 230, 210, 0.16);
}

.story-seg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--story-gold-lt));
  box-shadow: 0 0 8px rgba(205, 156, 76, 0.5);
}

/* Chapter names sit under the bar like a scrubber's markers */
.story-seg em {
  position: absolute;
  top: 9px;
  left: 0;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.42);
  white-space: nowrap;
  transition: color 0.4s ease;
}

.story-seg.is-current em {
  color: var(--gold-hi);
}

/* --- Top bar -------------------------------------------------- */

.story-topbar {
  position: absolute;
  top: 44px;          /* clears the progress bar and its chapter names */
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  pointer-events: none;
}

.story-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.5);
}

.story-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border: 1px solid rgba(201, 155, 92, 0.4);
  border-radius: 4px;
  background: rgba(10, 15, 35, 0.5);
  color: var(--story-cream);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.story-close:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.story-esc {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.story-close svg {
  width: 16px;
  height: 16px;
}

/* --- Stage & slides -------------------------------------------- */

.story-stage {
  position: absolute;
  inset: 0;
}

.story-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keeps slide content clear of the progress bar and the transport */
  padding: 84px 0 104px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s ease, visibility 0.85s;
}

.story-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.story-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.story-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-bg-navy {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(38, 30, 78, 0.75), transparent 70%),
    linear-gradient(180deg, #10132A, #05070F);
}

/* Slow-breathing gold halo used by the opening and closing slides */
.story-bg-glow {
  background:
    radial-gradient(46% 46% at 50% 50%, rgba(196, 146, 63, 0.20), transparent 72%),
    linear-gradient(180deg, #13162B, #05070F);
}

.story-slide.is-active .story-bg-glow {
  animation: storyBreathe 9s ease-in-out infinite;
}

/* Starfield: three layered dot patterns drifting upward */
.story-bg-stars {
  background:
    radial-gradient(1.6px 1.6px at 18% 32%, rgba(240, 220, 168, 0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 18%, rgba(240, 220, 168, 0.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 44% 74%, rgba(240, 220, 168, 0.40), transparent 60%),
    radial-gradient(1.3px 1.3px at 86% 62%, rgba(240, 220, 168, 0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 86%, rgba(240, 220, 168, 0.30), transparent 60%),
    radial-gradient(60% 60% at 50% 40%, rgba(30, 24, 66, 0.9), transparent 75%),
    linear-gradient(180deg, #0C1026, #05070F);
  background-size: 40% 40%, 40% 40%, 40% 40%, 40% 40%, 40% 40%, 100% 100%, 100% 100%;
}

.story-slide.is-active .story-bg-stars {
  animation: storyDrift 26s linear infinite;
}

/* Ken Burns on the two photographic chapters */
.story-slide.is-active .kb {
  animation: storyKenBurns 13s ease-out both;
}

.story-slide.is-active .kb-slow {
  animation: storyKenBurnsSlow 13s ease-out both;
}

.story-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 15, 0.92) 0%, rgba(5, 7, 15, 0.72) 42%, rgba(5, 7, 15, 0.15) 100%),
    linear-gradient(180deg, rgba(5, 7, 15, 0.55), transparent 35%);
}

/* --- Slide layout ---------------------------------------------- */

.story-center {
  position: relative;
  z-index: 2;
  width: min(1040px, 88vw);
  padding: 0 10px;
  text-align: center;
}

.story-copy {
  position: relative;
  z-index: 2;
  width: min(1120px, 88vw);
  padding: 0 10px;
  text-align: left;
}

.story-copy .story-p {
  max-width: 560px;
}

/* --- Slide typography ------------------------------------------- */

.story-eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
}

.story-h {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.story-h em {
  font-style: normal;
  background: linear-gradient(180deg, #F3DF93, #DDB874);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.story-h-sm {
  margin-top: 0;
  font-size: clamp(22px, 2.9vw, 38px);
}

.story-p {
  margin-top: 20px;
  font-weight: 300;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.75;
  color: var(--story-cream);
}

.story-p-mid {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- 1: opening emblem ------------------------------------------ */

.open-emblem {
  position: relative;
  width: clamp(120px, 15vw, 176px);
  height: clamp(120px, 15vw, 176px);
  margin: 0 auto;
}

.open-emblem img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-slide.is-active .open-emblem img {
  animation: storyEmblem 1.5s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.open-emblem .ring {
  position: absolute;
  inset: -14%;
  border: 1px solid rgba(196, 146, 63, 0.45);
  border-radius: 50%;
  opacity: 0;
}

.open-emblem .ring-2 {
  inset: -30%;
  border-color: rgba(196, 146, 63, 0.22);
}

.story-slide.is-active .ring-1 {
  animation: storyRing 3.4s ease-out 0.5s infinite;
}

.story-slide.is-active .ring-2 {
  animation: storyRing 3.4s ease-out 1.1s infinite;
}

.story-brand {
  margin-top: 30px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.story-brand span {
  display: block;
  margin-top: 6px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.story-tagline {
  margin-top: 18px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 300;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.8);
}

/* --- 2: scripture ------------------------------------------------ */

.story-quote {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 3.6vw, 50px);
  line-height: 1.42;
  color: var(--white);
}

.story-quote .qmark {
  color: var(--gold);
  opacity: 0.75;
}

.story-rule {
  display: block;
  width: 0;
  height: 1px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.story-slide.is-active .s-grow {
  animation: storyGrow 1.4s ease-out var(--d, 0s) both;
}

.story-cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.scripture-dove {
  position: absolute;
  top: 16%;
  left: 0;
  z-index: 1;
  width: clamp(90px, 11vw, 150px);
  opacity: 0;
}

.story-slide.is-active .scripture-dove {
  animation: storyDove 16s linear both;
}

/* --- 4 & 6: icon rows -------------------------------------------- */

.story-icons {
  display: grid;
  gap: 26px 18px;
  margin-top: 40px;
}

.story-icons-7 {
  grid-template-columns: repeat(7, 1fr);
}

.story-icons-5 {
  grid-template-columns: repeat(5, 1fr);
}

.story-icon img {
  width: clamp(40px, 4vw, 58px);
  height: clamp(40px, 4vw, 58px);
  object-fit: contain;
}

.story-icon span {
  display: block;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.88);
}

.story-slide.is-active .s-pop {
  animation: storyPop 0.85s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

/* --- 5: institute tiles ------------------------------------------- */

.story-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 38px;
}

.story-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196, 146, 63, 0.28);
  border-radius: 4px;
}

.story-tile img {
  display: block;
  width: 100%;
  height: clamp(150px, 21vh, 250px);
  object-fit: cover;
}

.story-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 8px 10px;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 15, 0.92));
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--story-cream);
}

.story-slide.is-active .s-tile {
  animation: storyTile 1s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

/* --- 8: closing --------------------------------------------------- */

.end-dove {
  width: clamp(96px, 11vw, 150px);
  height: auto;
}

.story-slide.is-active .s-dove {
  animation: storyDoveLand 1.6s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.slide-end .story-h {
  margin-top: 22px;
}

.story-end-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* Same button metrics as the hero CTAs (.hero-ctas .btn) */
.story-end-ctas .btn {
  height: 47px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

.story-end-ctas .btn-ghost {
  border-color: var(--ghost-border);
}

.story-end-ctas .btn-primary {
  border-color: var(--btn-bevel);
}

.story-replay-icon {
  width: 15px;
  height: 15px;
  margin-right: 8px;
}

/* --- Transport controls -------------------------------------------- */

.story-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 26px 30px;
}

.story-ctrl {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201, 155, 92, 0.45);
  border-radius: 50%;
  background: rgba(10, 15, 35, 0.55);
  color: var(--story-cream);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.story-ctrl svg {
  width: 20px;
  height: 20px;
}

.story-ctrl:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.story-play {
  width: 56px;
  height: 56px;
  border-color: var(--btn-bevel);
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
}

.story-play:hover {
  color: var(--btn-text-cream);
  border-color: var(--btn-bevel);
  filter: brightness(1.12);
}

.story-play .ico-play {
  display: none;
}

.story-frame.is-paused .story-play .ico-play {
  display: block;
}

.story-frame.is-paused .story-play .ico-pause {
  display: none;
}

.story-count {
  position: absolute;
  right: 26px;
  bottom: 42px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(240, 230, 210, 0.5);
}

.story-count b {
  font-weight: 600;
  color: var(--gold-hi);
}

.story-count i {
  font-style: normal;
}

/* Pause freezes the whole picture, like a paused film */
.story-frame.is-paused .story-stage *,
.story-frame.is-paused .story-bg-glow,
.story-frame.is-paused .story-bg-stars {
  animation-play-state: paused !important;
}

/* The closing chapter has its own CTAs — hide "next" there */
.story-frame.is-last .js-story-next {
  opacity: 0.3;
  pointer-events: none;
}

/* --- Real footage, when it arrives ----------------------------------- */

.story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--story-ink);
}

/* One continuous scrubber instead of chapter segments — and none of
   the chapter furniture, which belongs to the slide deck only */
.story-frame.has-video .story-seg + .story-seg {
  display: none;
}

.story-frame.has-video .story-seg em,
.story-frame.has-video .story-count {
  display: none;
}

/* --- Keyframes -------------------------------------------------------- */

@keyframes storyOpen {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes storyRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes storyPop {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

@keyframes storyTile {
  from { opacity: 0; transform: translateY(34px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes storyGrow {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; }
}

@keyframes storyEmblem {
  from { opacity: 0; transform: scale(0.72) rotate(-8deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes storyRing {
  0%   { opacity: 0; transform: scale(0.82); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes storyBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.82; transform: scale(1.06); }
}

@keyframes storyDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 -400px, 0 -520px, 0 -330px, 0 -600px, 0 -450px, 0 0, 0 0; }
}

@keyframes storyKenBurns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.20) translate3d(-2.5%, -1.5%, 0); }
}

@keyframes storyKenBurnsSlow {
  from { transform: scale(1.14) translate3d(2%, 0, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}

@keyframes storyDove {
  0%   { opacity: 0; transform: translate(-18vw, 0) scale(0.9); }
  12%  { opacity: 0.5; }
  85%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(112vw, -9vh) scale(1.05); }
}

@keyframes storyDoveLand {
  from { opacity: 0; transform: translateY(-40px) scale(0.86); }
  to   { opacity: 1; transform: none; }
}

/* Shared entrance hook — declared last so it wins over nothing but
   itself; elements start hidden and only animate once their slide
   is the active one. */
.story-slide .s-rise,
.story-slide .s-pop,
.story-slide .s-tile,
.story-slide .s-dove {
  opacity: 0;
}

.story-slide.is-active .s-rise {
  animation: storyRise 1s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

/* Reduced motion: no travel, no drift — chapters simply appear and
   the player still advances on its own. */
@media (prefers-reduced-motion: reduce) {

  /* The membership modal drops its entrance motion — but the submit
     spinner stays, since it is a status indicator, not decoration. */
  .member-overlay.is-open,
  .member-modal,
  .member-done {
    animation: none !important;
  }

  .story-slide *,
  .story-slide.is-active * {
    animation: none !important;
    transition: none !important;
  }

  .story-slide .s-rise,
  .story-slide .s-pop,
  .story-slide .s-tile,
  .story-slide .s-dove,
  .story-slide .s-grow {
    opacity: 1;
    transform: none;
  }

  .story-rule {
    width: 220px;
  }

  /* The dove no longer flies across — perch it instead of losing it */
  .scripture-dove {
    top: 14%;
    left: 6%;
    opacity: 0.45;
  }

  .story-slide.is-active .kb {
    transform: scale(1.06);
  }

}

/* ============================================================
   THE MASTER PLAN — vertical presentation reel

   The same player idea as "Watch Our Story", but portrait: a 9:16
   card floating on the dimmed page rather than a full-bleed
   cinema. It replaces the standalone master-plan.html document.

   Sits at z-index 95 — above the story lightbox (90), below the
   membership modal (100), so "Become a Member" on the closing
   chapter still opens over it.

   Sizing rule: the card is the smallest of 92vw, 420px, and the
   width a 9:16 box may have in the current viewport height. That
   one min() keeps it a phone-shaped reel on a desktop monitor and
   a near-full-bleed reel on an actual phone.
   ============================================================ */

.plan-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 95;
  place-items: center;
}

.plan-overlay.is-open {
  display: grid;
  animation: storyOpen 0.4s ease both;
}

.plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 14, 0.88);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.plan-frame {
  position: relative;
  width: min(92vw, 420px, calc((100vh - 36px) * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border: 1px solid rgba(201, 155, 92, 0.32);
  border-radius: 20px;
  background: var(--story-ink);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.65);
  animation: planLift 0.55s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

/* Vignette over every chapter, under the chrome */
.plan-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% 42%, transparent 48%, rgba(3, 5, 12, 0.6) 100%);
}

/* --- Chapter progress (reel-style pips) ------------------------ */

.plan-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  gap: 4px;
  padding: 14px 16px 0;
}

.plan-seg {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(240, 230, 210, 0.2);
  overflow: hidden;
}

/* Chapter names would not fit at this width — the topbar names the
   current chapter instead (see .plan-chapter). */
.plan-seg em {
  display: none;
}

.plan-seg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--story-gold-lt));
  box-shadow: 0 0 6px rgba(205, 156, 76, 0.5);
}

/* --- Top bar --------------------------------------------------- */

.plan-topbar {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  pointer-events: none;
}

.plan-kicker {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240, 230, 210, 0.86);
}

.plan-kicker span {
  color: var(--gold-hi);
}

/* Live chapter name, appended by the player */
.plan-chapter {
  display: block;
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.45);
}

.plan-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(201, 155, 92, 0.4);
  border-radius: 50%;
  background: rgba(10, 15, 35, 0.55);
  color: var(--story-cream);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.plan-close:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.plan-close svg {
  width: 15px;
  height: 15px;
}

/* --- Stage & chapters ------------------------------------------ */

.plan-stage {
  position: absolute;
  inset: 0;
}

.plan-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.plan-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

.plan-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.plan-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-bg-navy {
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(38, 48, 96, 0.6), transparent 70%),
    linear-gradient(180deg, #0B1130, #070A1B 70%);
}

.plan-bg-glow {
  background:
    radial-gradient(58% 40% at 50% 44%, rgba(196, 146, 63, 0.24), transparent 70%),
    linear-gradient(180deg, #0A0F23, #05070F);
}

.plan-slide.is-active .plan-bg-glow {
  animation: storyBreathe 9s ease-in-out infinite;
}

.plan-bg-stars {
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(240, 230, 210, 0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 16%, rgba(240, 230, 210, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 40% 62%, rgba(240, 230, 210, 0.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 84% 74%, rgba(240, 230, 210, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 88%, rgba(240, 230, 210, 0.45), transparent 60%),
    radial-gradient(70% 45% at 50% 30%, rgba(29, 39, 84, 0.75), transparent 75%),
    linear-gradient(180deg, #080C1E, #05070F);
}

.plan-slide.is-active .pkb {
  animation: storyKenBurns 12s ease-out both;
}

.plan-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0.55) 0%, rgba(5, 7, 15, 0.35) 45%, rgba(5, 7, 15, 0.85) 100%);
}

/* --- Chapter body ---------------------------------------------- */

.plan-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 76px 24px 92px;
}

.plan-body-center {
  align-items: center;
  text-align: center;
}

.plan-num {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--gold-hi);
}

.plan-eyebrow {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.plan-title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
  color: #FFFFFF;
}

.plan-title span {
  display: block;
  color: var(--gold-hi);
}

.plan-mark {
  width: 72px;
  height: auto;
  margin-bottom: 4px;
}

.plan-rule {
  display: block;
  width: 120px;
  height: 1px;
  margin: 16px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.plan-tagline {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.5;
  color: var(--story-cream);
}

.plan-h {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: #FFFFFF;
}

.plan-h-sm {
  font-size: 25px;
}

.plan-lead {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--story-cream);
}

.plan-p {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(240, 230, 210, 0.78);
}

.plan-p-mid {
  max-width: 300px;
}

.plan-cap {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(240, 230, 210, 0.55);
}

.plan-quote {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 1px solid rgba(201, 155, 92, 0.5);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(240, 230, 210, 0.9);
}

.plan-quote .qmark {
  color: var(--gold-hi);
}

.plan-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.45);
}

/* --- At a glance ------------------------------------------------ */

.plan-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 26px;
}

.plan-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}

.plan-stat b {
  min-width: 62px;
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  color: var(--gold-hi);
}

.plan-stat span {
  flex: 1;
  max-width: 150px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(240, 230, 210, 0.75);
}

/* --- Campus figure ---------------------------------------------- */

.plan-figure {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(201, 155, 92, 0.35);
  border-radius: 10px;
}

.plan-figure img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* --- Seven functions -------------------------------------------- */

.plan-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.plan-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.plan-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px;
  border: 1px solid rgba(201, 155, 92, 0.2);
  border-radius: 10px;
  background: rgba(10, 16, 40, 0.5);
}

.plan-cell-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}

.plan-cell img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.plan-cell b {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--story-cream);
}

/* --- Institute tiles --------------------------------------------- */

.plan-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.plan-tile {
  overflow: hidden;
  border: 1px solid rgba(201, 155, 92, 0.28);
  border-radius: 10px;
  background: rgba(8, 12, 30, 0.7);
}

.plan-tile img {
  display: block;
  width: 100%;
  height: 68px;
  object-fit: cover;
}

.plan-tile figcaption {
  padding: 7px 6px 8px;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--story-cream);
}

/* --- Pathway list ------------------------------------------------ */

.plan-list {
  list-style: none;
  margin-top: 18px;
}

.plan-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(201, 155, 92, 0.16);
}

.plan-list li:last-child {
  border-bottom: none;
}

.plan-list img {
  grid-row: 1 / 3;
  align-self: center;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.plan-list b {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}

.plan-list span {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 230, 210, 0.6);
}

/* --- Phases ------------------------------------------------------- */

.plan-phases {
  position: relative;
  list-style: none;
  margin-top: 18px;
  padding-left: 20px;
}

/* The spine draws itself down as the chapter plays */
.plan-phases::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 3px;
  width: 1px;
  transform-origin: top;
  background: linear-gradient(180deg, var(--gold), rgba(201, 155, 92, 0.15));
}

.plan-slide.is-active .plan-phases::before {
  animation: planLine 2.2s ease-out 0.35s both;
}

.plan-phases li {
  position: relative;
  padding-bottom: 16px;
}

.plan-phases li:last-child {
  padding-bottom: 0;
}

.plan-phases li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(196, 146, 63, 0.18);
}

.plan-phases em {
  display: block;
  font-size: 8.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.plan-phases b {
  display: block;
  margin-top: 3px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}

.plan-phases span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(240, 230, 210, 0.6);
}

/* --- Closing chapter ---------------------------------------------- */

.plan-dove {
  width: 66px;
  height: auto;
  margin-bottom: 14px;
}

.plan-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 250px;
  margin-top: 22px;
}

.plan-ctas .btn {
  height: 42px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.plan-replay-icon {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}

/* --- Tap zones ------------------------------------------------------ */

.plan-tap {
  position: absolute;
  top: 0;
  bottom: 84px;
  z-index: 5;
  width: 34%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.plan-tap-prev {
  left: 0;
}

.plan-tap-next {
  right: 0;
  width: 44%;
}

/* The closing chapter owns its whole surface — its CTAs must stay
   clickable, and there is nowhere left to advance to. */
.plan-frame.is-last .plan-tap-next {
  display: none;
}

.plan-frame.is-last .plan-tap-prev {
  bottom: 55%;
  width: 22%;
}

/* --- Transport controls ----------------------------------------------- */

.plan-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px 22px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 14, 0.55) 55%);
}

.plan-ctrl {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201, 155, 92, 0.45);
  border-radius: 50%;
  background: rgba(10, 15, 35, 0.55);
  color: var(--story-cream);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.plan-ctrl svg {
  width: 17px;
  height: 17px;
}

.plan-ctrl:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.plan-play {
  width: 46px;
  height: 46px;
  border-color: var(--btn-bevel);
  background: linear-gradient(180deg, var(--btn-gold-top), var(--btn-gold-bottom));
  color: var(--btn-text-cream);
}

.plan-play:hover {
  color: var(--btn-text-cream);
  border-color: var(--btn-bevel);
  filter: brightness(1.12);
}

.plan-play .ico-play {
  display: none;
}

.plan-frame.is-paused .plan-play .ico-play {
  display: block;
}

.plan-frame.is-paused .plan-play .ico-pause {
  display: none;
}

.plan-count {
  position: absolute;
  right: 16px;
  bottom: 33px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(240, 230, 210, 0.45);
}

.plan-count b {
  font-weight: 600;
  color: var(--gold-hi);
}

.plan-count i {
  font-style: normal;
}

/* Pause freezes the picture, like a paused film */
.plan-frame.is-paused .plan-stage *,
.plan-frame.is-paused .plan-bg-glow {
  animation-play-state: paused !important;
}

.plan-frame.is-last .plan-controls .js-plan-next {
  opacity: 0.3;
  pointer-events: none;
}

/* --- Real footage, when it arrives -------------------------------------- */

.plan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--story-ink);
}

.plan-frame.has-video .plan-seg + .plan-seg,
.plan-frame.has-video .plan-count,
.plan-frame.has-video .plan-chapter {
  display: none;
}

/* --- Entrance motion ------------------------------------------------------ */

.plan-slide .p-rise,
.plan-slide .p-pop,
.plan-slide .p-tile,
.plan-slide .p-slide,
.plan-slide .p-dove,
.plan-slide .p-grow {
  opacity: 0;
}

.plan-slide.is-active .p-rise {
  animation: storyRise 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-pop {
  animation: storyPop 0.8s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-tile {
  animation: storyTile 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-slide {
  animation: planSlide 0.85s cubic-bezier(0.16, 0.9, 0.3, 1) var(--d, 0s) both;
}

.plan-slide.is-active .p-dove {
  animation: storyDoveLand 1.5s cubic-bezier(0.16, 0.9, 0.3, 1) both;
}

.plan-slide.is-active .p-grow {
  animation: planGrow 1.2s ease-out var(--d, 0s) both;
}

@keyframes planLift {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes planSlide {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes planGrow {
  from { width: 0; opacity: 0; }
  to   { width: 120px; opacity: 1; }
}

@keyframes planLine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Reduced motion: chapters simply appear, and the player still
   advances on its own. */
@media (prefers-reduced-motion: reduce) {

  .plan-frame,
  .plan-slide *,
  .plan-slide.is-active * {
    animation: none !important;
  }

  .plan-slide .p-rise,
  .plan-slide .p-pop,
  .plan-slide .p-tile,
  .plan-slide .p-slide,
  .plan-slide .p-dove,
  .plan-slide .p-grow {
    opacity: 1;
    transform: none;
  }

  .plan-rule {
    width: 120px;
  }
}

/* Phones: a reel belongs edge to edge. The card drops its frame and
   fills the screen, which also gives the swipe gestures the whole
   surface to work with. */
@media (max-width: 600px) {

  .plan-frame {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .plan-frame::after {
    border-radius: 0;
  }

  .plan-progress {
    padding-top: 16px;
  }

  .plan-topbar {
    top: 30px;
  }

  .plan-body {
    padding: 88px 26px 104px;
  }

  .plan-controls {
    padding-bottom: 28px;
  }

  .plan-count {
    bottom: 39px;
  }
}

/* Short-but-wide viewports (a laptop in a small window, a phone in
   landscape): the card shrinks by height, so ease the padding and
   type back with it. */
@media (max-height: 640px) {

  .plan-body {
    padding: 62px 18px 76px;
  }

  .plan-title {
    font-size: 34px;
  }

  .plan-h {
    font-size: 24px;
  }

  .plan-h-sm {
    font-size: 21px;
  }

  .plan-lead {
    font-size: 15px;
  }

  .plan-mark {
    width: 54px;
  }

  .plan-dove {
    width: 52px;
  }

  .plan-stats {
    gap: 13px;
    margin-top: 16px;
  }

  .plan-stat b {
    font-size: 32px;
    min-width: 50px;
  }

  .plan-figure img {
    height: 130px;
  }

  .plan-tile img {
    height: 54px;
  }

  .plan-cell {
    padding: 8px 6px;
  }

  .plan-cell img {
    width: 30px;
    height: 30px;
  }

  .plan-list li {
    padding: 7px 0;
  }
}

/* ============================================================
   SECTION 7 — UPCOMING EVENTS
   A dark band on assets/events-section-bg.png, sitting directly
   under the Join banner (which uses the same artwork). The two
   are kept apart by a gold hairline, a different overlay ramp,
   and the fact that this one is a full content section rather
   than a 213px strip.
   All of the section's content is rendered by the events script
   in index.html from the JUC_EVENTS array.
   ============================================================ */

:root {
  --s7-navy: #100F2A;                       /* flat ground below the artwork —
                                               same navy as the site footer */
  --s7-panel: rgba(16, 15, 42, 0.62);       /* card / panel fill */
  --s7-panel-soft: rgba(196, 146, 63, 0.06);/* presenter + chip tint */
  --s7-line: rgba(196, 146, 63, 0.26);      /* gold hairline borders */
  --s7-title: #F2ECE0;                      /* headings on navy */
  --s7-body: #C7C4D2;                       /* paragraph text */
  --s7-label: #C0965C;                      /* small gold labels */
}

.events {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--s7-line);
  background-color: var(--s7-navy);
  padding: 56px 0 66px;
}

/* events-section-bg.png is 1672×941 (16:9) and the section is far
   taller than that, so `cover` would blow the artwork up several
   times over. Instead it is pinned full-width at the top at its
   own aspect ratio and dissolved into the flat navy underneath. */
.events::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1672 / 941;
  background:
    linear-gradient(180deg,
      rgba(16, 15, 42, 0.56) 0%,
      rgba(16, 15, 42, 0.72) 55%,
      var(--s7-navy) 100%),
    url("assets/events-section-bg.png") center / cover no-repeat;
}

/* Same treatment as .pathways-heading, re-inked for a dark ground */
.events-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s7-title);
}

.events-intro {
  max-width: 820px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.01em;
  color: var(--s7-body);
}

.events-intro + .events-intro {
  margin-top: 13px;
}

.events-body {
  margin-top: 38px;
}

/* No-JS / no-events fallback */
.ev-empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 30px 26px;
  border: 1px solid var(--s7-line);
  border-radius: 14px;
  background: var(--s7-panel);
  text-align: center;
  font-size: 15px;
  line-height: 26px;
  color: var(--s7-body);
}

.ev-empty a {
  color: var(--gold-hi);
  border-bottom: 1px solid var(--s7-line);
}

/* --- Three-column grid of event cards ------------------------- */

/* minmax(0, …) rather than 1fr so a long unbroken word shrinks the
   text instead of widening the column past the grid. */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  max-width: 1140px;
  margin: 0 auto;
}

/* Column flex so the CTA can be pinned to the bottom of every
   card, keeping the three buttons on one line across the row. */
.ev-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--s7-line);
  border-radius: 16px;
  background: var(--s7-panel);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.ev-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.ev-media-wrap {
  position: relative;
  flex-shrink: 0;
}

.ev-media {
  aspect-ratio: 16 / 9;
  background: var(--s7-navy);
}

/* Fills the 16:9 frame edge to edge; whatever the photo's own
   ratio, the overflow is trimmed evenly and the subject stays
   centred. */
.ev-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Stands in until the client supplies a photo for the event */
.ev-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--s7-line);
  background:
    repeating-linear-gradient(135deg,
      rgba(196, 146, 63, 0.05) 0 12px,
      rgba(196, 146, 63, 0) 12px 24px),
    #0A0E25;
}

.ev-media-empty span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s7-label);
}

/* Date chip overhangs the photo's lower-left corner. The fill is
   OPAQUE navy, not the 6% gold tint used elsewhere — over a photo
   a translucent chip leaves the numerals unreadable. */
.ev-datechip {
  position: absolute;
  left: 18px;
  bottom: -18px;
  width: 70px;
  padding: 10px 0 9px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(180deg, #131836 0%, #0A0E26 100%);
  box-shadow: 0 8px 20px rgba(3, 5, 20, 0.7);
  text-align: center;
}

.ev-datechip b {
  display: block;
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1;
  color: var(--gold-hi);
}

.ev-datechip span {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s7-title);
}

.ev-datechip i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  color: var(--s7-body);
}

.ev-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 32px 26px 28px;
}

/* Titles, blurbs and host names are held to a fixed number of
   lines so the divider, the blurb and the CTA start at the same
   height in all three cards. Anything longer is clipped rather
   than allowed to push one card's rows out of step — see the
   length note above JUC_EVENTS in index.html. */
.ev-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-title {
  -webkit-line-clamp: 2;
  min-height: 2.4em;          /* 2 lines at line-height 1.2 */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--s7-title);
}

.ev-subtitle {
  -webkit-line-clamp: 1;
  min-height: 1.3em;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  color: var(--gold-hi);
}

/* --- Date + location ----------------------------------------- */

/* Two lines of when + up to two of where = a 4-line well, so the
   rules above and below it sit level across the row. */
.ev-factlist {
  min-width: 0;
  min-height: 90px;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--s7-line);
  border-bottom: 1px solid var(--s7-line);
}

.ev-fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--s7-body);
}

.ev-fact + .ev-fact {
  margin-top: 8px;
}

/* Shared by every gold outline glyph in the section */
.ev-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gold);
}

.ev-fact .ev-icon {
  margin-top: 2px;
}

/* --- Blurb + host -------------------------------------------- */

.ev-desc {
  -webkit-line-clamp: 4;
  min-height: 96px;           /* 4 lines at line-height 24px */
  margin-top: 16px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--s7-body);
}

.ev-host {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--s7-title);
}

.ev-host-name {
  -webkit-line-clamp: 2;
  min-height: 2.7em;          /* 2 lines at line-height 1.35 */
}

.ev-host-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s7-label);
}

/* Absorbs the leftover height so the CTA sits at the foot of every
   card — three buttons on one line whatever the blurbs run to. */
.ev-gap {
  flex: 1;
  min-height: 26px;
}

.ev-cta {
  height: 45px;
  flex-shrink: 0;
  padding: 0 22px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
}

/* ============================================================
   SMALL LAPTOP / TABLET LANDSCAPE (max-width: 1024px)
   Only the events grid needs a stop here: below roughly 1050px
   three columns leave the cards too narrow for a two-line title.
   ============================================================ */

@media (max-width: 1024px) {

  .ev-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd card left alone on the last row is centred rather than
     left hanging in the first column. */
  .ev-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 13px);
    margin: 0 auto;
  }

}

/* ============================================================
   MOBILE — TABLET / PHONE (max-width: 768px)
   Bar the events grid stop above, all responsive overrides live
   inside this block and the 480px block below. Desktop rules
   are untouched.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Global safety ---------------------------------------- */

  html,
  body {
    overflow-x: hidden;
  }

  .shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ---- Header / nav ------------------------------------------ */

  .site-header {
    padding-top: 14px;
  }

  .header-inner {
    align-items: center;
  }

  .logo {
    width: 56px;
    height: 56px;
  }

  .brand-text {
    margin-left: 14px;
    margin-top: 0;
  }

  .brand-name {
    font-size: 20px;
  }

  .brand-sub {
    font-size: 13px;
    margin-top: 5px;
  }

  .brand-tagline {
    font-size: 9px;
    line-height: 14px;
    margin-top: 6px;
  }

  /* The nav collapse itself now lives in its own (wider) block
     below — see "HEADER NAV COLLAPSE (max-width: 1104px)". */

  /* ---- Hero --------------------------------------------------- */

  .hero {
    height: auto;
    min-height: 560px;
    background-position: 60% 25%;
  }

  /* Stronger, more even overlay so white text reads over the
     portrait crop */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(9, 11, 26, 0.55) 0%,
      rgba(9, 11, 26, 0.38) 55%,
      rgba(9, 11, 26, 0.55) 100%
    );
  }

  /* Scaled 56px emblem reaches ~88px down; keep a clear gap
     below it before the heading starts */
  .hero-content {
    padding-top: 140px;
    padding-bottom: 56px;
  }

  .hero-heading {
    font-size: 42px;
    line-height: 48px;
  }

  .hero-sub {
    max-width: 100%;
    font-size: 15px;
    line-height: 26px;
  }

  .hero-quote {
    max-width: 100%;
    margin-top: 22px;
    margin-bottom: 30px;
    text-align: center;
  }

  /* Scales with the viewport so the quote always lands as a clean
     1–2 line centered block; balance splits the two lines evenly
     instead of leaving a short widow line */
  .hero-quote-text {
    font-size: clamp(15px, 4.6vw, 18px);
    line-height: 1.5;
    text-wrap: balance;
  }

  /* The footer's decorative .qmark sizing (46px/38px, line-height 1)
     leaks onto the hero quote marks and makes them wrap onto their
     own lines on narrow screens; flow them inline with the text */
  .hero-quote-text .qmark {
    font-size: 1em;
    line-height: inherit;
    font-style: inherit;
    font-weight: inherit;
    vertical-align: baseline;
  }

  .hero-quote-cite {
    display: block;
    margin-top: 8px;
    text-align: center;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 26px;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  /* ---- Section 2: seven-icon strip ---------------------------- */

  .pillars {
    padding: 28px 20px 40px;
    background-size: cover;
  }

  .pillars-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }

  /* 7th item (Global Chapters) centers across both columns */
  .pillar:last-child {
    grid-column: 1 / -1;
  }

  .pillar-title {
    white-space: normal;
    font-size: 18px;
  }

  .pillar-desc {
    font-size: 13px;
    line-height: 20px;
  }

  /* ---- Section 3: institutes cards ----------------------------- */

  .institutes {
    padding: 34px 0 32px;
  }

  .institutes-heading {
    font-size: 22px;
    gap: 12px;
  }

  .heading-orn {
    width: 36px;
  }

  .institutes-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 14px;
    margin-top: 22px;
  }

  .institute-card {
    height: auto;
    padding-bottom: 22px;
  }

  .card-media {
    height: 160px;
  }

  .card-title {
    font-size: 19px;
  }

  .card-desc {
    font-size: 14px;
    line-height: 21px;
  }

  .institutes-viewall {
    margin-top: 26px;
    font-size: 16px;
  }

  /* ---- Section 4: future-gathering banner ---------------------- */

  .future-banner {
    height: auto;
    background-position: 66% 50%;
  }

  /* Full-bleed navy wash: portrait crop puts text over the campus
     image, so the overlay must cover the whole banner */
  .future-banner::before {
    background: linear-gradient(
      180deg,
      rgba(13, 7, 35, 0.66) 0%,
      rgba(13, 7, 35, 0.55) 100%
    );
  }

  .future-inner {
    padding: 52px 20px 56px;
  }

  .future-heading {
    font-size: 32px;
    line-height: 40px;
  }

  .future-sub {
    max-width: 100%;
    font-size: 15px;
    line-height: 25px;
    margin-top: 18px;
  }

  /* ---- Section 5: five pathways --------------------------------- */

  .pathways {
    padding: 32px 0 36px;
  }

  .pathways-heading {
    font-size: 22px;
    gap: 12px;
  }

  .pathways-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 16px;
    margin-top: 26px;
  }

  /* Vertical gold dividers make no sense in a stacked grid */
  .pathway-divider {
    display: none;
  }

  /* 5th item centers across both columns */
  .pathway:last-child {
    grid-column: 1 / -1;
  }

  /* ---- Section 6: join-a-movement dove banner ------------------- */

  .join-banner {
    height: auto;
    /* Even overlay keeps the gold-network texture subtly visible
       across the whole stacked banner */
    background:
      linear-gradient(rgba(7, 3, 26, 0.78), rgba(7, 3, 26, 0.78)),
      var(--s6-navy) url("assets/section6-bg.png") center / cover no-repeat;
  }

  .join-inner {
    flex-direction: column;
    height: auto;
    padding-top: 34px;
    padding-bottom: 42px;
    text-align: center;
  }

  .join-dove {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }

  .join-copy {
    margin-left: 0;
    margin-top: 4px;
    flex-shrink: 1;
  }

  .join-heading {
    white-space: normal;
    font-size: 27px;
    line-height: 1.2;
  }

  .join-desc {
    max-width: 440px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 24px;
  }

  .btn-member {
    width: 100%;
    max-width: 293px;
    height: 54px;
    margin: 26px auto 0;
  }

  /* ---- Section 7: upcoming events -------------------------------- */

  .events {
    padding: 40px 0 46px;
  }

  .events-heading {
    font-size: 22px;
    gap: 12px;
  }

  .events-intro {
    max-width: 100%;
    padding: 0 4px;
    font-size: 14px;
    line-height: 24px;
  }

  .events-body {
    margin-top: 28px;
  }

  .ev-card-body {
    padding: 30px 22px 26px;
  }

  .ev-title {
    font-size: 21px;
  }

  .ev-subtitle {
    font-size: 14.5px;
  }

  /* Columns are narrow enough here that a reserved line count would
     start clipping titles, so every card sizes to its own text from
     this width down. The cards stay level all the same: the grid
     equalises their height and .ev-gap keeps the CTAs on one line. */
  .ev-clamp {
    display: block;
    overflow: visible;
  }

  .ev-title,
  .ev-subtitle,
  .ev-desc,
  .ev-host-name,
  .ev-factlist {
    min-height: 0;
  }

  /* Full-width CTA, matching the mobile treatment of .btn-member */
  .ev-cta {
    display: flex;
    width: 100%;
  }

  /* ---- Section 8: support our mission --------------------------- */

  .support-mission {
    padding: 32px 0 38px;
  }

  .support-heading {
    font-size: 22px;
    gap: 12px;
  }

  .support-text {
    max-width: 100%;
    padding: 0 4px;
    font-size: 14px;
    line-height: 24px;
  }

  /* ---- Footer ---------------------------------------------------- */

  .footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 16px;
    height: auto;
    padding-top: 32px;
    padding-bottom: 12px;
  }

  .footer-vline {
    display: none;
  }

  .fcol-brand,
  .fcol-center,
  .fcol-resources,
  .fcol-involved {
    width: auto;
  }

  .fcol-brand {
    grid-column: 1 / -1;
  }

  .fcol-quote {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 6px;
    text-align: center;
  }

  .footer-brand {
    padding-left: 16px;
  }

  .footer-logo {
    width: 64px;
    height: 64px;
  }

  .footer-brand-text {
    margin-left: 14px;
    margin-top: 2px;
  }

  .footer-brand-name {
    font-size: 24px;
  }

  .footer-brand-sub {
    font-size: 15px;
  }

  .footer-brand-tagline {
    font-size: 10px;
    line-height: 15px;
  }

  .footer-social {
    padding-left: 0;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  .fcol-links {
    padding-top: 0;
  }

  .fcol-center,
  .fcol-resources,
  .fcol-involved {
    padding-left: 0;
  }

  /* Comfortable tap pitch on the link lists */
  .fcol-list li + li {
    margin-top: 12px;
  }

  .fcol-list a {
    white-space: normal;
  }

  /* Wide enough (and small enough) that the sentence wraps once at
     most; balance splits the two lines evenly */
  .footer-quote {
    max-width: 30ch;
    margin: 0 auto;
    padding-left: 0;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.5;
    text-wrap: balance;
  }

  .qmark {
    font-size: 34px;
  }

  /* Quote marks flow inline with the centered text; same
     line-height-0 + downward nudge the desktop close mark uses,
     so neither mark inflates or floats off its line */
  .qmark-open {
    position: relative;
    top: 7px;
    line-height: 0;
    margin-right: 6px;
  }

  .qmark-close {
    top: 7px;
    margin-left: 6px;
  }

  .footer-quote-attr {
    margin-top: 14px;
  }

  /* Newsletter: copy above, form below, both centered */
  .footer-news {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-left: 20px;   /* back to the shell's own gutter */
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
  }

  .fnews-heading {
    font-size: 21px;
  }

  .fnews-text {
    max-width: 40ch;
    margin: 6px auto 0;
    font-size: 13.5px;
    line-height: 21px;
  }

  .fnews-form {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Bottom bar: copyright above, legal links below */
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: auto;
    padding: 20px 20px 26px;
    text-align: center;
  }

  /* "Non-Discrimination Policy" is long enough to overflow a small
     phone beside "Privacy Policy", so the pair wraps and the
     divider between them drops out once they stack. */
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
  }

  /* ---- Membership enquiry modal -------------------------------- */

  .member-overlay {
    padding: 16px;
    align-items: flex-start;
  }

  .member-modal {
    padding: 38px 24px 30px;
    max-height: calc(100vh - 32px);
  }

  .member-title {
    font-size: 28px;
  }

  /* Single column: side-by-side 47px fields get too cramped to
     read their labels below this width. */
  .mf-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .member-done-title {
    font-size: 26px;
  }

  /* ---- Watch Our Story lightbox -------------------------------- */

  .story-progress {
    gap: 4px;
    padding: 12px 16px 0;
  }

  /* Chapter names don't fit next to a 3px segment on a phone */
  .story-seg em {
    display: none;
  }

  .story-topbar {
    top: 26px;
    padding: 0 16px;
    justify-content: flex-end;
  }

  .story-kicker {
    display: none;
  }

  .story-slide {
    padding: 68px 0 92px;
  }

  .story-center,
  .story-copy {
    width: 100%;
    padding: 0 20px;
  }

  /* Photo chapters read better centered once the copy column
     is as wide as the frame */
  .story-copy {
    text-align: center;
  }

  .story-copy .story-p {
    max-width: 100%;
  }

  .story-veil {
    background:
      linear-gradient(180deg, rgba(5, 7, 15, 0.75) 0%, rgba(5, 7, 15, 0.55) 45%, rgba(5, 7, 15, 0.9) 100%);
  }

  .story-brand {
    letter-spacing: 0.10em;
  }

  .story-icons {
    gap: 20px 10px;
    margin-top: 28px;
  }

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

  .story-icons-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .story-icon span {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .story-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 26px;
  }

  .story-tile img {
    height: 120px;
  }

  .story-tile figcaption {
    padding: 18px 4px 7px;
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .story-end-ctas {
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
  }

  .story-end-ctas .btn {
    width: 100%;
    max-width: 280px;
  }

  .story-controls {
    gap: 12px;
    padding: 0 16px 22px;
  }

  .story-count {
    right: 16px;
    bottom: 34px;
    font-size: 9.5px;
  }

}

/* ============================================================
   HEADER NAV COLLAPSE (max-width: 1104px)

   The desktop header — 88px emblem, eight nav items at a 29px
   gap, Donate pill and search — needs about 1305px of room. It
   used to stay on screen all the way down to 769px, which made
   every page scroll sideways on tablets and small laptops.

   These are the same rules that used to sit in the 768px block,
   moved up to the width where the header actually stops fitting.
   Phones are unaffected (768 is inside 1104); the 1105–1304px
   band is handled by the compact tier below.
   ============================================================ */

@media (max-width: 1104px) {

  /* Desktop pill button + search hidden; Support lives in the
     dropdown (cloned .nav-support) */
  .header-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: var(--text-nav);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .site-header.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Nav becomes a full-width dropdown under the header bar */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 12px 0 0;
    padding: 6px 0 18px;
    white-space: normal;
    background: rgba(9, 12, 30, 0.97);
    border-top: 1px solid rgba(196, 146, 63, 0.4);
    border-bottom: 1px solid rgba(196, 146, 63, 0.4);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }

  .site-header.nav-open .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 0 24px;
    font-size: 13px;
    line-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-header .site-nav .nav-support {
    display: inline-flex;
    align-self: flex-start;
    height: 44px;
    margin: 16px 24px 0;
    padding: 0 22px;
    font-size: 11.5px;
    line-height: 1;
    border-bottom: 1px solid var(--btn-bevel);
  }

}

/* ============================================================
   HEADER — COMPACT DESKTOP (1105px – 1304px)

   Wide enough to keep the full horizontal nav, too narrow for it
   at full size. Tightening the emblem, the tagline, the nav gap
   and the shell padding buys back the ~200px needed. At 1305px
   and up nothing here applies and the approved header is intact.
   ============================================================ */

@media (min-width: 1105px) and (max-width: 1304px) {

  .header-inner {
    padding-left: 28px;
    padding-right: 28px;
  }

  .logo {
    width: 68px;
    height: 68px;
  }

  .brand-text {
    margin-left: 14px;
  }

  /* The two-line tagline is the widest part of the brand block */
  .brand-tagline {
    display: none;
  }

  .site-nav {
    gap: 15px;
  }

  .site-nav a {
    font-size: 11.5px;
    letter-spacing: 0;
  }

  .header-actions {
    margin-left: 12px;
  }

}

/* ============================================================
   FOOTER — TABLET / SMALL LAPTOP (769px – 1248px)

   The desktop footer is a five-column flex row of fixed widths
   (404 + 180 + 156 + 244 + the quote) that bottoms out at about
   1249px. Below that it used to push past the viewport and give
   every page a horizontal scrollbar.

   Here it becomes the same stacked arrangement the phone layout
   uses — brand across the top, the three link lists in a row,
   the quote centred underneath — without inheriting any of the
   phone type sizes. At 1249px and up the original row returns.
   ============================================================ */

@media (min-width: 769px) and (max-width: 1248px) {

  .footer-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 24px;
    height: auto;
    padding-top: 32px;
    padding-bottom: 26px;
  }

  .footer-vline {
    display: none;
  }

  .fcol-brand {
    grid-column: 1 / -1;
    width: auto;
  }

  .fcol-center,
  .fcol-resources,
  .fcol-involved {
    width: auto;
    padding-left: 0;
  }

  .fcol-quote {
    grid-column: 1 / -1;
    width: auto;
    padding-left: 0;
    padding-top: 4px;
    text-align: center;
  }

  /* The quote keeps its 300px measure but now centres in the row
     instead of hanging off the left edge of a full-width column. */
  .footer-quote {
    margin: 0 auto;
    padding-left: 0;
  }

  /* The bottom bar's asymmetric desktop inset is tuned for 1440 */
  .footer-bottom {
    padding-left: 48px;
    padding-right: 48px;
  }

}

/* ============================================================
   MOBILE — SMALL PHONES (max-width: 480px)
   Refinements on top of the 768px block.
   ============================================================ */

@media (max-width: 480px) {

  /* ---- Header ------------------------------------------------- */

  .logo {
    width: 48px;
    height: 48px;
  }

  .brand-name {
    font-size: 17px;
  }

  .brand-sub {
    font-size: 11px;
  }

  .brand-tagline {
    display: none;
  }

  /* ---- Hero ---------------------------------------------------- */

  .hero {
    min-height: 520px;
  }

  /* Scaled 48px emblem reaches ~78px down; keep a clear gap
     below it before the heading starts */
  .hero-content {
    padding-top: 128px;
    padding-bottom: 48px;
  }

  .hero-heading {
    font-size: 34px;
    line-height: 40px;
  }

  .hero-quote-text {
    font-size: clamp(14px, 4.5vw, 17px);
    line-height: 1.5;
  }

  .hero-quote-cite {
    font-size: 11px;
  }

  /* ---- Section headings: drop ornaments, keep them clean ------- */

  .institutes-heading,
  .pathways-heading {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
  }

  .heading-orn {
    display: none;
  }

  /* ---- Section 2 ------------------------------------------------ */

  .pillars-row {
    gap: 28px 12px;
  }

  /* ---- Section 3: single column --------------------------------- */

  .institutes-row {
    grid-template-columns: 1fr;
  }

  .card-media {
    height: 190px;
  }

  /* ---- Section 4 ------------------------------------------------- */

  .future-heading {
    font-size: 28px;
    line-height: 36px;
  }

  /* ---- Section 5: single column ---------------------------------- */

  .pathways-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* ---- Section 7: upcoming events ---------------------------------- */

  .events-heading {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
  }

  /* One card per row on the phone */
  .ev-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .ev-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }

  .ev-card-body {
    padding: 28px 18px 22px;
  }

  .ev-title {
    font-size: 22px;
  }

  .ev-subtitle {
    font-size: 15px;
  }

  /* ---- Section 8: support our mission ----------------------------- */

  .support-heading {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
  }

  /* ---- Section 6 -------------------------------------------------- */

  .join-dove {
    width: 140px;
    height: 140px;
  }

  .join-heading {
    font-size: 24px;
  }

  /* ---- Footer ------------------------------------------------------ */

  .footer-brand {
    padding-left: 10px;
  }

  .footer-quote {
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.5;
  }

  /* Field and button stack — a 26px-padded button plus a usable
     field no longer fit side by side at this width */
  .fnews-row {
    flex-direction: column;
  }

  .fnews-btn {
    width: 100%;
  }

  .qmark {
    font-size: 28px;
  }

  .qmark-open,
  .qmark-close {
    top: 6px;
  }

  /* ---- Membership enquiry modal -------------------------------- */

  .member-modal {
    padding: 34px 18px 26px;
  }

  .member-title {
    font-size: 24px;
  }

  .member-sub {
    font-size: 12.5px;
  }

  .mf-event-note {
    padding: 6px 13px;
    font-size: 11.5px;
    line-height: 17px;
  }

  /* iOS zooms any input whose text is under 16px on focus, which
     leaves the modal off-centre; hold the fields at 16px. */
  .mf-input {
    font-size: 16px;
  }

  .member-done-title {
    font-size: 23px;
  }

  .member-done-close {
    width: 100%;
  }

  /* ---- Watch Our Story lightbox -------------------------------- */

  .story-icons-7 {
    grid-template-columns: repeat(3, 1fr);
  }

  .story-icons-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-tile img {
    height: 104px;
  }

  .story-quote {
    line-height: 1.5;
  }

  .story-p {
    margin-top: 14px;
    line-height: 1.65;
  }

}