/* ═══════════════════════════════════════════════════════════════════
   I.GURU — Shared Stylesheet  v2
   Pages: index.html · microdegree.html
   Grid:  11 equal columns across .page-grid
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ──────────────────────────────────────────────────── */
:root {
  --crimson:    #a61d36;
  --crimson-d:  #6e1522;
  --crimson-l:  #cf2443;
  --crimson-55: #8c182d;
  --white:      #ffffff;
  --white90:    rgba(255,255,255,0.90);
  --white70:    rgba(255,255,255,0.70);
  --off-white:  #f7f4f1;
  --light-gray: #e8e4e0;
  --mid-gray:   #666;
  --dark:       #1a1a1a;
  --tag-border: #999;
  --font-head:  'Roboto', sans-serif;
  --font-body:  'Roboto', sans-serif;
  --font-serif: 'Georgia', serif;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: #eee;
  line-height: 1.6;
}

h2 { font-size: 1.7rem; line-height: 1.1; margin-bottom: 0.5rem; }
img { max-width: 100%; display: block; }
a   { text-decoration: none; color: var(--crimson);  }
nobr { 
  display: inline; 
  white-space-collapse: collapse;
  text-wrap-mode: nowrap;
  white-space: nowrap;
}
smallcaps, .smallcaps { font-size: 96%; }

/* ——— Links ————————————— */
.standalone-link {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crimson); 
  transition: color .2s;
  line-height: 1;
}
.standalone-link:hover { color: var(--crimson-l); }

/* ── Centering wrapper ──────────────────────────────────────────────── */
.centering-container {
  background-color: #eee;
  text-align: center;
}

.main-container {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--white);
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════
   11-COLUMN SECTION GRID
   Usage: add class "page-grid" to any section wrapper.
   Col 1  = .sec-label  (black box + red bar)
   Cols 2–11 = .sec-content or named child selectors
   ══════════════════════════════════════════════════════════════════════ */

/* ── Standard Section Label  (col 2, square, horizontal text) ───────
 *
 *  Grid placement: grid-column: 2 on every interior section.
 *  Col 1 = left margin, col 11 = right margin (both always empty).
 *
 *  HTML:
 *   <div class="sec-label" aria-hidden="true">
 *     <div class="sec-label__box"><span>Why<br>Do It</span></div>
 *     <div class="sec-label__bar"></div>
 *   </div>
 * ─────────────────────────────────────────────────────────────────── */
.sec-label {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;          /* don't stretch to full row height */
  margin-top: 40px;           /* match content columns' padding-top so tops align */
}

.sec-label__box {
  background: var(--dark);
  color: var(--white);
  aspect-ratio: 1 / 1;       /* square */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.sec-label__box span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  writing-mode: horizontal-tb; /* normal horizontal text */
  transform: none;
  line-height: 1.35;
  text-align: center;
}

.sec-label__bar {
  height: 5px;
  background: var(--crimson);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════════════
   NAV  (11-col grid)
   Col 1   = .nav-col1-logo  (logo, interior pages only; links to home)
   Cols 2–10 = .nav-inner    (About at col 2 left; Log In at col 10 right)
   Col 11  = empty right margin (matches content margin on all other sections)
   ══════════════════════════════════════════════════════════════════════ */
.nav {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;         /* children fill full height for baseline trick */
  height: 56px;
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo cell — col 1, logo bottom aligns with nav text baseline */
.nav-col1-logo {
  grid-column: 1;
  display: flex;
  align-items: flex-end;        /* hang from bottom so GURU baseline ≈ text baseline */
  justify-content: center;
  padding-bottom: 10px;         /* nudge up from bottom to sit on the text baseline */
}

.nav-col1-logo a {
  display: flex;
  align-items: flex-end;
  line-height: 0;               /* kill inherited line-height gap below the image */
}

.nav-col1-logo img {
  height: 32px;
  width: auto;
  display: block;
}

/* Links + Log In — cols 2–10; col 11 = right margin */
.nav-inner {
  grid-column: 2 / 11;          /* ends at col 10 right edge */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;           /* anchor for mobile centred logo */
}

/* Mobile-only centred logo — hidden on desktop */
.nav-mobile-logo { display: none; }

.nav-links { display: flex; gap: 32px; list-style: none; }

.nav-links a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
  transition: color .2s;
}
.nav-links a:hover { color: var(--crimson-l); }

.nav-right {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
}
.nav-right a:hover { color: var(--crimson-l); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--dark); margin: 5px 0; transition: .3s; }

/* ══════════════════════════════════════════════════════════════════════
   HOME — HERO  (11-col outer grid; original auto/1fr layout in cols 2–10)
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  background: var(--crimson);
  color: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: center;
  padding-top: 48px;
  padding-bottom: 40px;
}
.hero.hero-subrow {
  /* border-top: 1px solid var(--white70); */
  background-color: var(--crimson); 
  padding: 20px 0 4px;
}
.hero.hero-subrow.new {
  background-color: var(--crimson-55);
}
.hero-inner {
  grid-column: 1 / 12;          /* cols 2–10 */
  display: grid;
  grid-template-columns: 2fr 3fr;  /* equal halves: logo left, content right */
  gap: 10px;
  align-items: start;
}
.hero-subrow .hero-inner {
  grid-template-columns: 1fr;
  text-align: center;
  font-size: 1.65rem;
  font-weight: 600;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
/* SVG logo block — fills its half and centres the image */
.logo-svg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 10px;
}

.heroLogo {
  width: 80%;
  max-width: 300px;
}

.hero-content { max-width: 660px; margin-right: 40px; }

.hero-eyebrow {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 4px;
  line-height: 1.2;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  font-variation-settings: "wdth" 90;
}

.hero-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.hero-list.new {
  border-bottom: 1px solid var(--white); 
  padding-bottom: 1.5rem;
}

.hero-list li {
  display: flex;
  gap: 12px;
  font-size: 1rem;
  align-items: flex-start;
}

.hero-list .num {
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.hero-cta-text {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}
.hero-cta-text br { display: none; }
.hero-ruled-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: 1.20rem;
  font-weight: 600;
  text-transform: uppercase;
}

.hero-ruled-heading::before,
.hero-ruled-heading::after {
  content: '';
  flex: 1;              /* each rule grows to fill remaining space equally */
  height: 1px;
  background: white;
}

/* ══════════════════════════════════════════════════════════════════════
   HOME — SUBTITLE BAND  (11-col grid: content spans cols 2–10)
   ══════════════════════════════════════════════════════════════════════ */
.subtitle-band {
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}

.subtitle-band .container-border {
  grid-column: 2 / 11;        /* cols 2–10, centred within the 11-col grid */
  text-align: center;
  padding: 2rem 0 2.75rem;
  border-bottom: 1px solid var(--dark);
  margin-bottom: 0;
}

.subtitle-band h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 600;
  color: var(--dark);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.subtitle-band p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--dark);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   HOME — CAROUSEL  (11-col grid: carousel content in cols 2–10)
   ══════════════════════════════════════════════════════════════════════ */
.carousel-section {
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding-top: 48px;
  padding-bottom: 40px;
}

.carousel-wrapper {
  grid-column: 2 / 11;        /* cols 2–10; col 11 = right margin */
  position: relative;
}

.carousel-dots {
  grid-column: 2 / 11;        /* match wrapper */
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 10px;
  position: relative; height: 36px;  /* anchor for absolute prev/next on desktop */
}

.carousel-track { overflow: hidden; }

.carousel-slides { display: flex; width: 100%; transition: transform .45s cubic-bezier(.4,0,.2,1); }

.carousel-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 5fr 3fr;  /* badge=col2 | content=cols3-7 | books=cols8-10 */
  gap: 0;
  align-items: start;
}

.slide-badge {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 36px;
  padding-right: 16px;
}
.partner-logos { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.partner-logo-image { width: 65%; margin-top: 1rem; display: none; }

.slide-content { padding: 36px 36px 8px 0; }

.slide-books {
  overflow: hidden;
  align-self: stretch;
}

.books-stack {
  width: 100%;
  height: 100%;
  min-height: 220px;
  padding: 24px 12px 0;
}

.books-stack img {
  width: 100%;
  height: auto;
  /* object-fit: cover; */
  object-position: center;
  display: block;
}

.slide-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid-gray); margin-bottom: 4px;
}

.slide-title {
  font-size: 1.7rem; font-weight: 800; 
  letter-spacing: -0.01em; margin-bottom: 14px; line-height: 1.1;
}

.slide-desc { font-size: 0.95rem; color: #333; line-height: 1.7; margin-bottom: 18px; }

.skills-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mid-gray); margin-bottom: 8px;
}

.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.5rem; list-style-type: none; }

.skill-tag {
  font-size: 0.72rem; padding: 4px 10px;
  border: 1px solid var(--tag-border); border-radius: 4px; color: var(--dark); white-space: nowrap;
}

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--crimson); background: var(--white); color: var(--crimson);
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 10; transition: background .2s; box-shadow: 0 2px 8px rgba(0,0,0,.2); padding-bottom: 2px;
}
.carousel-btn:hover { color: var(--white); background: var(--crimson-l); }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--light-gray); border: none; cursor: pointer; transition: background .2s; padding: 0;
}
.dot.active { background: var(--crimson); }

/* ══════════════════════════════════════════════════════════════════════
   HOME — VALUE PROPS  (11-col grid: content in cols 2–10)
   ══════════════════════════════════════════════════════════════════════ */
.value-band {
  background: var(--crimson);
  color: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding-top: 48px;
  padding-bottom: 48px;
}

.value-band-inner {
  grid-column: 2 / 11;        /* cols 2–10 */
}

.value-band h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600; font-variation-settings: "wdth" 90;
  line-height: 1.2; margin-bottom: 40px;
}

/* 9-col subgrid within cols 2–10:
   left items  = cols 1–5 of subgrid (matching body text cols 3–7 of page)
   right items = cols 6–9 of subgrid (matching sidebar cols 8–10 of page)
   Gap column  = aligns with sec-label boundary                          */
.value-grid {
  display: grid;
  grid-template-columns: 4.5fr 4.5fr;  /* symmetric 50/50 */
  gap: 36px 0;                     /* row gap only; column separation comes from padding */
}

.value-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  padding-right: 20px;             /* gutter between left and right columns */
}

.value-item:nth-child(even) { padding-right: 0; padding-left: 20px; }

.value-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.value-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.value-item p  { font-size: 0.9rem; line-height: 1.65; opacity: .88; }

/* ══════════════════════════════════════════════════════════════════════
   HOME — COMPARISON TABLE  (11-col grid: content in cols 2–10)
   ══════════════════════════════════════════════════════════════════════ */
.comparison-section {
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding-top: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--light-gray);
}

.comparison-inner {
  grid-column: 2 / 11;         /* cols 2–10, matching all other home sections */
}

/* Screen-reader-only caption */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--dark);
  border-top: 1px solid var(--dark);
  text-align: center;
}

/* ── Header row ── */
.comparison-table thead tr {
  background: var(--white);
  color: var(--dark);
}

.comparison-table thead th {
  padding: 16px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  border-bottom: 1px solid var(--light-gray);
}
.comparison-table thead th:last-child { border-right: none; }

/* I.GURU column header — crimson highlight */
.comparison-table thead th.col-iguru {
  background: var(--crimson);
  color: var(--white);
}
.noteLabel { color: var(--white70); font-size: 65%; text-transform: uppercase; }

/* ── Body rows ── */
.comparison-table tbody tr {
  border-bottom: 1px solid var(--light-gray);
}

/* Subtle alternating rows for readability */
.comparison-table tbody tr:nth-child(even) {
  background: var(--white);
}
.comparison-table tbody tr:nth-child(odd) {
  background: var(--white);
}
.comparison-table tbody tr:last-child {
  border-bottom: none;
}

.comparison-table tbody td {
  padding: 14px 20px;
  vertical-align: center;
  line-height: 1.55;
}
.comparison-table tbody td:last-child { border-right: none; }

/* I.GURU column body — subtle left border accent */
.comparison-table .col-iguru {
  border-left: none;
  background-color: var(--crimson);
  color: var(--white);
  font-weight: 500;
}
.comparison-table thead th.col-iguru { border-left: none; }

/* Equal column widths */
.comparison-table th,
.comparison-table td { width: 33.333%; }
.org-section {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}

.org-section img {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%; height: 460px;
  object-fit: cover; object-position: center top; display: block;
}

.org-overlay {
  grid-column: 1 / 6;           /* bleeds to left edge of the grid */
  grid-row: 1;
  align-self: end;
  background: var(--white90);
  /* Left padding = 1 col-width (calc 100%/11) to align text with col 2.
     Use a vw-based approximation anchored to the 1080px max container. */
  padding: 36px 32px 44px calc(100% / 5); /* 100%/5 of a 5-col span ≈ 1 col */
  border-top-right-radius: 8px;
}

.org-overlay h2 {
  font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 600;
  font-variation-settings: "wdth" 90; line-height: 1.15; margin-bottom: 14px;
}

.org-overlay p { font-size: 0.9rem; color: #333; line-height: 1.7; margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════════════════════
   SHARED BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.btn-learn, .btn-explore, .btn-enroll, .btn-contact {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0;
  padding: 8px 28px; border: none; cursor: pointer;
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  transition: background .2s, color .2s;
  background: var(--crimson); color: var(--white);
}
.btn-learn:hover, .btn-explore:hover, .btn-enroll:hover, .btn-contact:hover { background: var(--crimson-l); }

/* ══════════════════════════════════════════════════════════════════════
   SHARED FOOTER  (11-col grid: content in cols 2–10)
   ══════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--crimson); color: var(--white70);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 0.5rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}

.footer-inner {
  grid-column: 2 / 11;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-links { /* display: flex;*/display:none; list-style: none; }
.footer-links li { display: flex; align-items: center; }
.footer-links li + li::before { content: '|'; margin: 0 16px; opacity: .5; }
.footer-links a:hover { opacity: .7; }

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — HERO  (11-col: cols 1-5 crimson | cols 6-11 photo)
   ══════════════════════════════════════════════════════════════════════ */
.interior-hero {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;
  min-height: 280px;
}

.interior-hero-content {
  grid-column: 1 / 6;
  background: var(--crimson); color: var(--white);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}

.interior-hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.interior-hero-eyebrow img { width: auto; height: 90px; flex-shrink: 0; }
.interior-hero-eyebrow-text {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: .8;
}

.interior-hero-title {
  font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: 900;
  font-variation-settings: "wdth" 90; line-height: 1.05; margin-bottom: 4px;
}

.interior-hero-subtitle {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: .7; margin-bottom: 16px;
}

.interior-hero-partners { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.interior-hero-partners img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .8; }

.interior-hero-photo { grid-column: 6 / -1; position: relative; overflow: hidden; }
.interior-hero-photo .hero-bg-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.interior-hero-bg-word {
  position: absolute; top: 8px; right: -8px;
  font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; font-variation-settings: "wdth" 90;
  color: rgba(255,255,255,0.20); line-height: 1; white-space: nowrap;
  pointer-events: none; user-select: none; letter-spacing: -0.04em;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — SUB-NAV BAR
   11-col: col 1 dark block | cols 2-11 links
   ══════════════════════════════════════════════════════════════════════ */
.interior-nav-bar {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;
  background: var(--off-white);
  border-bottom: 1px solid var(--light-gray);
  height: 44px;
}

.interior-nav-bar__spacer {
  grid-column: 1;
  background: var(--dark);
}

.interior-nav-bar__links {
  grid-column: 2 / 11;        /* cols 2–10; col 11 = right margin */
  display: flex; align-items: center;
  padding: 0 16px;
  gap: 0;
}

.interior-nav-bar__links a {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crimson); line-height: 44px; white-space: nowrap;
  padding-right: 20px; margin-right: 20px;
  border-right: 1px solid var(--light-gray);
  transition: color .2s;
}
.interior-nav-bar__links a:hover { color: var(--crimson-l); }

.interior-nav-bar__links .nav-bar-enroll {
  margin-left: auto; border-right: none;
  padding-right: 0; margin-right: 0; line-height: normal;
}

.nav-bar-enroll.btn-enroll {
  font-size: 0.68rem; padding: 5px 16px; box-shadow: none; border-radius: 5px;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — PULL QUOTE BANDS  (11-col grid, content cols 2–10)
   ══════════════════════════════════════════════════════════════════════ */
.pull-quote-band {
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  margin-bottom: 1 rem;
}

.pull-quote-band__inner {
  grid-column: 2 / 11;
  text-align: center;
  padding: 2rem 40px;
  border-bottom: 1px solid var(--dark);
}

.pull-quote-band blockquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(0.9rem, 1.35vw, 1.15rem);
  line-height: 1.78; color: var(--dark); margin: 0 auto 14px;
}
.pull-quote-band blockquote::before { content: '\201C'; }
.pull-quote-band blockquote::after  { content: '\201D'; }

.pull-quote-attribution {
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0em;
  text-transform: uppercase; color: var(--mid-gray);
}

.pull-quote-band-alt {
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.pull-quote-band-alt__inner {
  grid-column: 2 / 11;
  text-align: center;
  padding: 44px 40px;
  border-top: 1px solid var(--dark);
  border-bottom: 1px solid var(--dark);
}

.pull-quote-band-alt blockquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(0.9rem, 1.35vw, 1.15rem);
  line-height: 1.78; color: var(--dark); max-width: 680px; margin: 0 auto 14px;
}
.pull-quote-band-alt blockquote::before { content: '\201C'; }
.pull-quote-band-alt blockquote::after  { content: '\201D'; }

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — OVERVIEW + SIDEBAR
   col1=margin | col2=label | cols3-8=body | cols9-10=sidebar | col11=margin
   ══════════════════════════════════════════════════════════════════════ */
.overview-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;
}

/* sec-label sits at col 2 (defined on .sec-label itself) */
.overview-section .sec-label { grid-column: 2; }

.overview-body {
  grid-column: 3 / 9;         /* cols 3–8 */
  padding: 36px 36px 36px 36px;
  background: var(--white);
}

.overview-body.landing {
  grid-column: 3 / 9;         /* cols 3–8 */
  padding: 36px 36px 36px 0;
  background: var(--white);
}

.overview-eyebrow {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--crimson); margin-bottom: 8px;
}

.overview-heading {
  font-size: clamp(1rem, 1.8vw, 1.8rem); font-weight: bold;
  font-variation-settings: "wdth" 90; line-height: 1.3; margin-bottom: 14px;
}

.overview-body-text {
  font-size: 1rem; line-height: 1.78; color: #333; margin-bottom: 0.75rem;
}

/* Red text links row — matches mockup exactly */
.overview-links {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 0;
  margin-top: 2px;
}

.overview-link {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crimson); display: inline-flex; align-items: center; gap: 3px;
  transition: color .2s;
  padding-right: 18px; margin-right: 18px;
  line-height: 1;
}
.overview-link:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.overview-link::after { content: '›'; font-size: 1em; margin-left: 2px; }
.overview-link:hover { color: var(--crimson-l); }

/* Sidebar */
.overview-sidebar {
  grid-column: 9 / 11;        /* cols 9–10; col 11 = right margin */
  background: var(--white);
  padding: 36px 24px;
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 2.5rem;
}

/* Home page variant overrides:
   col1=margin | cols2-7=body (no sec-label) | cols8-10=sidebar | col11=margin */
.overview-section--home .sec-label { display: none; }
.overview-section--home .overview-body { grid-column: 2 / 8; }
.overview-section--home .overview-sidebar {
  grid-column: 8 / 11;        /* cols 8–10; col 11 = right margin */
  padding-right: 28px;
}
.overview-section.landing { border-bottom: 1px solid var(--light-gray); }

.sidebar-label {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mid-gray); margin-bottom: 3px;
}

.sidebar-value {
  font-size: 0.88rem; font-weight: 500; color: var(--dark); line-height: 1.4;
}

.sidebar-value.condensedText {
  font-variation-settings: "wdth" 90;
  line-height: 1.8;
}

.sidebar-value.condensedText.textBlock {
  line-height: 1.4;
  margin-top: 0.25rem;
}

.sidebar-enroll {
  width: 100%; text-align: center; padding: 10px;
  font-size: 0.85rem; margin-top: 8px;
}
.sidebar-notes {
  font-size: 0.75rem;
  color: var(--mid-gray);
  margin-top: 3px;
  line-height: 1.25;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — PILLARS  (MINDSET / EMPATHY / ADVANTAGE)
   col1=margin | cols2-10=three separate black boxes | col11=margin
   No sec-label, no eyebrow. Each pillar is its own black box with a gap.
   ══════════════════════════════════════════════════════════════════════ */
.pillars-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  background: var(--white);   /* white shows in the gaps between boxes */
  padding-top: 24px;
  padding-bottom: 24px;
}

.pillars-content {
  grid-column: 2 / 11;        /* cols 2–10; cols 1 & 11 = margins */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;                  /* gap between the three black boxes */
}

.pillar {
  background: var(--dark);
  color: var(--white);
  padding: 24px 24px 30px;
  /* no border-right — gaps between boxes provide separation */
}

.pillar-title {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 300;            /* light weight as requested */
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.pillar-desc { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.78); }

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — THE READING
   col1=margin | col2=label (spans all rows) | cols3-10=books | col11=margin
   ══════════════════════════════════════════════════════════════════════ */
.reading-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;
}

.reading-section .sec-label {
  grid-column: 2;
  grid-row: 1 / span 20;      /* cover all book rows */
  margin-top: 28px;            /* match book-entry-body padding-top */
}

.reading-books {
  grid-column: 3 / 11;        /* cols 3–10; col 11 = right margin */
  display: flex; flex-direction: column;
  background: var(--white);
}

.book-entry {
  display: grid;
  grid-template-columns: 3fr 1fr;   /* cover = 1/4 of container = cols 9–10 of page grid */
}
.book-entry:last-child { border-bottom: none; }

.book-entry-body { padding: 28px 24px 20px 28px; }

h3,
.book-entry-title {
  font-size: 1.15rem; font-weight: 700; font-variation-settings: "wdth" 95;
  margin-bottom: 10px; line-height: 1.25;
}
.book-entry-title .byline {
  font-size: 0.75rem;
  font-weight: 500;
}
.book-entry-desc { font-size: 1rem; line-height: 1.75; color: #333; }

.book-entry-cover {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0;
  background: var(--white);
}

.book-entry-cover img {
  width: 100%; height: auto;
  box-shadow: 2px 4px 14px rgba(0,0,0,.18);
  margin-top: 1.88rem;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — WHO CAN BENEFIT
   col1=margin | col2=label | cols3-8=body | cols9-10=photo | col11=margin
   ══════════════════════════════════════════════════════════════════════ */
.who-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;
}

.who-section .sec-label { grid-column: 2; }

.who-body {
  grid-column: 3 / 9;         /* cols 3–8 */
  padding: 28px 28px 0 28px;
  background: var(--white);
}

.who-eyebrow {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mid-gray); margin-bottom: 6px;
}

.who-heading {
  font-size: clamp(0.95rem, 1.6vw, 1.25rem); font-weight: 300;
  font-variation-settings: "wdth" 90; margin-bottom: 14px; line-height: 1.3;
}

.who-desc { font-size: 1rem; line-height: 1.75; color: #333; margin-bottom: 18px; }

.who-photo-col {
  grid-column: 9 / 11;        /* cols 9–10; col 11 = right margin */
  background: var(--white);
  padding: 24px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.who-photo-col img { width: 100%; border-radius: 3px; object-fit: cover; }

.who-photo-caption {
  font-size: 0.68rem; color: var(--mid-gray);
  font-style: italic; line-height: 1.4; text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — FROM THE GURU
   col1=margin | col2=label | cols3-8=body text | cols9-10=guru photo | col11=margin
   Body has no eyebrow, no heading — just body text and attribution.
   ══════════════════════════════════════════════════════════════════════ */
.canon-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: stretch;
}

.canon-section .sec-label { grid-column: 2; }

.canon-body {
  grid-column: 3 / 9;         /* cols 3–8; cols 9–10 = guru photo */
  padding: 36px 28px 36px 28px;
  background: var(--white);
}

.canon-desc { font-size: 1rem; line-height: 1.75; color: #333; margin-bottom: 20px; }

.canon-attribution {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mid-gray); font-style: italic;
}

.canon-photo-col {
  grid-column: 9 / 11;        /* cols 9–10; col 11 = right margin */
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 18px;
  gap: 10px;
}

.canon-photo-col img {
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
  margin-top: 1rem;
}

.canon-photo-caption {
  font-size: 0.68rem; color: var(--mid-gray);
  font-style: italic; line-height: 1.4; text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — CTA ENROLL BAND
   ══════════════════════════════════════════════════════════════════════ */
.cta-band {
  background: var(--white); text-align: center;
  padding: 36px 40px 48px;
  border-top: 1px solid var(--dark);
  margin-top: 1rem;
}

.cta-band h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700;
  font-variation-settings: "wdth" 90; margin-bottom: 8px; line-height: 1.2;
}

.cta-band p { font-size: 0.92rem; color: var(--mid-gray); margin-bottom: 24px; }
.cta-band .btn-enroll { font-size: 0.95rem; padding: 12px 52px; display: inline-block; margin: 0 0.25rem; }

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — RELATED MICRODEGREES
   ══════════════════════════════════════════════════════════════════════ */
.related-section { padding: 36px 32px 48px; background: var(--white); border-top: 1px solid var(--dark); margin-top: 1rem; }

.related-heading {
  font-size: 1rem; font-weight: 700; font-variation-settings: "wdth" 90;
  text-align: center; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.1em;
}

.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.related-card {
  text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding: 20px 12px;
  border-radius: 4px; border: 1px solid var(--light-gray);
  transition: border-color .2s, background .2s;
}
.related-card:hover { background: var(--off-white); border-color: var(--crimson); }
.related-card img { width: 64px; height: 64px; object-fit: contain; }

.related-card-name {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dark); line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERIOR — BOTTOM LOGO BAND
   ══════════════════════════════════════════════════════════════════════ */
.bottom-logo-band {
  background: var(--crimson); padding: 18px 32px;
  display: flex; align-items: center; justify-content: center;
}
.bottom-logo-band img { height: 36px; width: auto; filter: brightness(0) invert(1); }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════

   Breakpoint strategy:
   ≤900px  — nav collapses to hamburger (navigation concern only)
   768–900px — tablet: multi-col layouts preserved, extra padding added
   ≤767px  — phone: all layouts collapse to single column
   ══════════════════════════════════════════════════════════════════════ */

/* ── Nav hamburger: kicks in at 900px ─────────────────────────────── */
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr; height: auto; }
  .nav-col1-logo { display: none; }
  .nav-inner { grid-column: 1; padding: 0 20px; height: 56px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute;
    top: 56px; left: 0; right: 0; background: var(--white);
    border-bottom: 2px solid var(--light-gray); padding: 20px; z-index: 99;
  }
  .nav-toggle { display: block; }
  .nav-mobile-logo {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    line-height: 0;
  }
  .nav-mobile-logo img { height: 30px; width: auto; display: block; }

  /* Interior sub-nav (not layout-critical, fine at 900px) */
  .interior-nav-bar { grid-template-columns: 1fr; height: auto; }
  .interior-nav-bar__spacer { display: none; }
  .interior-nav-bar__links {
    grid-column: 1; padding: 8px 16px; flex-wrap: wrap;
    height: auto; gap: 4px 12px;
  }
  .interior-nav-bar__links a { line-height: 32px; border-right: none; padding-right: 0; margin-right: 0; }
  
  /* hero */
  .hero-eyebrow { letter-spacing: 0.1rem; }
  .heroLogo { width: 90%; }
  .hero-subrow .hero-inner { font-size: 1.5rem; line-height: 1.2; }
}

/* ── Tablet (768–900px): multi-col preserved, breathing room added ── */
@media (min-width: 768px) and (max-width: 900px) {
  /* Home sections — add horizontal padding so content isn't tight */
  .hero { padding-left: 28px; padding-right: 28px; }
  .hero-title { font-size: 2.25rem; }
  .carousel-section { padding-left: 28px; padding-right: 28px; }
  .value-band {  }
  .comparison-section { padding-left: 28px; padding-right: 28px; }
  .org-section { padding-left: 0; padding-right: 0; }

  /* Interior sections */
  .pull-quote-band__inner,
  .pull-quote-band-alt__inner { padding-left: 28px; padding-right: 28px; }

  /* Footer */
  .footer-inner { padding-left: 28px; padding-right: 28px; }

  /* CTA band */
  .cta-band { padding-left: 40px; padding-right: 40px; }

  /* Related grid: 4 cols may be tight at tablet, drop to 3 */
  .related-grid { grid-template-columns: repeat(3, 1fr); }

  
}

/* ── Phone (≤767px): some down-sizing ──────────────────────────── */
@media (max-width: 767px) {
  .hero-ruled-heading { font-size: 1rem; gap: 6px; }
  .hero-title { font-size: 2.25rem; }
}
/* ── Phone (≤600px): everything collapses ──────────────────────────── */
@media (max-width: 600px) {
  /* Home hero */
  .hero { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; padding-top: 30px; }
  .hero-inner { grid-column: 1; grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }
  .logo-svg-wrap { display: block; width: 10%; }
  .hero-content { max-width: 100%; }

  /* Overview */
  .overview-body.landing { padding: 36px 20px; }

  /* Carousel */
  .carousel-section { grid-template-columns: 1fr; padding: 28px 20px 20px; }
  .carousel-wrapper {
    grid-column: 1;
    padding: 0;
    overflow: hidden;
  }
  .carousel-track { overflow: hidden; }
  .carousel-slides { width: 100%; }
  .carousel-slide {
    grid-template-columns: 1fr;
    gap: 4px;
    min-width: 100%;
    box-sizing: border-box;
    align-items: unset;
  }
  .slide-badge {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding-top: 0;
  }
  .slide-content { padding-top: 4px; }
  .slide-badge > img:first-child { width: 75px; height: auto; flex-shrink: 0; }
  .partner-logos { display: none; }
  .slide-books { display: block; }
  .slide-title { font-size: 1.5rem; margin-bottom: 10px; }
  .slide-desc  { font-size: 0.9rem; }
  .carousel-dots {
    grid-column: 1;
    height: auto;
    margin-top: 8px;
    gap: 12px;
  }
  .carousel-btn {
    position: static;
    transform: none;
    box-shadow: none;
    border-color: var(--light-gray);
  }
  .carousel-btn.prev,
  .carousel-btn.next { left: auto; right: auto; }

  /* Value props */
  .value-band { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .value-band-inner { grid-column: 1; padding: 0 20px; }
  .value-grid { grid-template-columns: 1fr; gap: 24px; }
  .value-item { padding-right: 0; }
  .value-item:nth-child(even) { padding-right: 0; padding-left: 0; }

  /* Org section */
  .org-section { grid-template-columns: 1fr; display: block; }
  .org-section img { height: 240px; }
  .org-overlay { position: relative; grid-column: 1; border-radius: 0; width: 100%; padding: 28px 20px 36px; }

  /* Footer */
  .footer { grid-template-columns: 1fr; padding-top: 14px; padding-bottom: 14px; }
  .footer-inner { grid-column: 1; flex-direction: column; gap: 10px; text-align: center; padding: 0 20px; }

  /* Comparison table */
  .comparison-section { grid-template-columns: 1fr; padding-top: 36px; padding-bottom: 36px; }
  .comparison-inner { grid-column: 1; padding: 0 20px; overflow-x: auto; }
  .comparison-table { font-size: 0.8rem; min-width: 520px; }
  .comparison-table thead th,
  .comparison-table tbody td { padding: 10px 12px; }

  /* Subtitle band */
  .subtitle-band { grid-template-columns: 1fr; }
  .subtitle-band .container-border { grid-column: 1; padding-left: 20px; padding-right: 20px; }

  /* Interior hero */
  .interior-hero { grid-template-columns: 1fr; }
  .interior-hero-content { grid-column: 1; }
  .interior-hero-photo { grid-column: 1; min-height: 160px; }

  /* Pull quotes */
  .pull-quote-band { grid-template-columns: 1fr; }
  .pull-quote-band__inner { grid-column: 1; padding: 32px 20px; }
  .pull-quote-band-alt { grid-template-columns: 1fr; }
  .pull-quote-band-alt__inner { grid-column: 1; padding: 32px 20px; }

  /* All interior 11-col sections collapse */
  .overview-section,
  .pillars-section,
  .reading-section,
  .who-section,
  .canon-section { grid-template-columns: 1fr; }

  .sec-label {
    grid-column: 1 !important; grid-row: auto !important;
    flex-direction: row; height: auto; align-self: auto;
  }
  .sec-label__box {
    aspect-ratio: auto;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 16px;
  }
  .sec-label__bar { width: 5px; height: auto; }

  .overview-body, .overview-sidebar,
  .overview-section--home .overview-body,
  .overview-section--home .overview-sidebar,
  .who-body, .who-photo-col,
  .canon-body, .canon-photo-col,
  .pillars-content,
  .reading-books { grid-column: 1 !important; }

  .overview-sidebar { 
    border-top: 1px solid var(--light-gray);
    margin-top: 0.25rem;
  }
  .pillars-content { grid-template-columns: 1fr; gap: 8px; }

  .book-entry { grid-template-columns: 1fr; }
  .book-entry-cover { border-top: 1px solid var(--light-gray); }
  .who-photo-col { border-top: 1px solid var(--light-gray); }
  .canon-photo-col { border-top: 1px solid var(--light-gray); }

  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 40px 20px; }

  /* Hero title size */
  .hero { padding-bottom: 20px; }
  .interior-nav-bar__links a:not(.nav-bar-enroll) { display: none; }
  .hero-eyebrow { letter-spacing: 0.1rem; }
  .hero-list { margin-bottom: 1.25rem; }
  .hero-list li { line-height: 1.25; }
  .hero-cta-text { font-size: 1.25rem; font-weight: 500; line-height: 1.6; }
  .hero-cta-text br { display: inline; }
  .hero-subrow .hero-inner { font-size: 1.4rem; font-weight: 300; }
  .hero-title { font-size: 2rem; margin-bottom: 1.25rem; }
  .hero-content { margin-right: 0; }
}
/* ── Bounce-peek animation ───────────────────────────────────────────
   Nudges the slides left to reveal a sliver of slide 2, then
   springs back. Triggered once per session via JS class addition.    */
@keyframes carousel-peek {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-22%); }
  58%  { transform: translateX(-4%); }
  78%  { transform: translateX(-10%); }
  92%  { transform: translateX(-1%); }
  100% { transform: translateX(0); }
}

.carousel-slides.peek {
  animation: carousel-peek 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── Swipe hint ──────────────────────────────────────────────────────
   Static on mobile — always visible until first swipe dismisses it.
   Positioned top-right inside .carousel-wrapper.                     */
.carousel-swipe-hint {
  position: absolute;
  top: 36px;
  right: 12px;
  background: rgba(26, 26, 26, 0.62);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 1;                  /* always visible — JS sets opacity:0 on dismiss */
  z-index: 10;
  white-space: nowrap;
}


@media (max-width: 600px) {
  /* Hide prev/next buttons — swipe replaces them */
  .carousel-btn { display: none; }

  /* Dots: keep visual size, expand tap area with min-width/height and padding */
  .dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    padding: 0;
    /* Transparent border expands the tap target without changing appearance */
    outline: 16px solid transparent;
    outline-offset: 0;
  }
  .dot.active {
    background: var(--crimson);
    outline-color: transparent;
  }

  /* Dots row: centred, comfortable gap for tapping */
  .carousel-dots {
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
  }
}

   These selectors are all prefixed .mission-* so they cannot
   conflict with any existing rules.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero: full-width crimson, tagline trio ─────────────────────────── */
.mission-hero {
  background: var(--crimson);
  color: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding-top: 80px;
  padding-bottom: 80px;
}

.mission-hero-inner {
  grid-column: 2 / 10;
}

.mission-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 36px;
}

.mission-taglines {
  list-style: none;
  margin-bottom: 36px;
}

.mission-taglines li {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.mission-taglines li:nth-child(2) { opacity: .78; }
.mission-taglines li:nth-child(3) { opacity: .56; }

.mission-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: .82;
  max-width: 520px;
  font-weight: 400;
}

/* ── Mission statement and Privacy page body ─────────────────────────────────────────── */
.mission-body,
.privacy-body {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  background: var(--white);
  padding-bottom: 80px;
}

.mission-body-inner,
.privacy-body-inner {
  grid-column: 3 / 10;
  padding-top: 64px;
  padding-right: 28px;
  text-align: center;
}

.privacy-body-inner { text-align: left; }

.mission-heading,
.privacy-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 600;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 2rem;
}
.privacy-body-inner p { margin-top: 0.5rem; margin-bottom: 1rem; }
.privacy-body-inner ul {
	list-style-type: square;
	list-style-position: inside;
}
.privacy-body-inner li { 
	text-indent: -1rem;
	margin-left: 1rem;
}

/* All stanzas — sans-serif, upright, centred */
.mission-verse {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: "wdth" 90;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.8;
  color: var(--dark);
  margin-bottom: 1.5rem;
}

.mission-verse:last-child { margin-bottom: 0; }

/* Closing stanza — same style as verses, no separator */
.mission-close {
  font-family: var(--font-head);
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 300;
  font-variation-settings: "wdth" 90;
  line-height: 1.8;
  color: var(--dark);
}

.mission-close strong {
  font-weight: 700;
  color: var(--crimson);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mission-body { grid-template-columns: 1fr; padding-bottom: 48px; }
  .mission-body-inner { grid-column: 1; padding: 40px 20px 0; }
}



/* ── About page overrides ───────────────────────────────────── */

/* Hero variant: full-width crimson, no photo split */
.hero-statement {
  background: var(--crimson);
  color: var(--white);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding-top: 64px;
  padding-bottom: 64px;
}
.hero-statement-inner {
  grid-column: 2 / 10;
}
.hero-statement-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 20px;
}
.hero-statement h1 {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 300;
  font-variation-settings: "wdth" 90;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.hero-statement h1 strong {
  font-weight: 800;
}
.hero-statement-body {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: .88;
  max-width: 640px;
}

/* Argument section: full-width text, cols 2–8, no sidebar */
.argument-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  background: var(--white);
}
.argument-section .sec-label { grid-column: 2; }
.argument-body {
  grid-column: 3 / 9;
  padding: 40px 28px 40px 28px;
}
.argument-body h2 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 300;
  font-variation-settings: "wdth" 90;
  line-height: 1.35;
  margin-bottom: 18px;
  color: var(--dark);
}
.argument-body p {
  font-size: 1rem;
  line-height: 1.78;
  color: #333;
  margin-bottom: 16px;
}
.argument-body p:last-child { margin-bottom: 0; }

/* How it works: step list */
.how-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  background: var(--white);
}
.how-section .sec-label { grid-column: 2; }
.how-body {
  grid-column: 3 / 11;
  padding: 40px 28px 40px 28px;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}
.how-step {}
.how-step .how-step-num {
  font-size: 0.75rem;
  font-weight: 300;
  text-transform: uppercase;
  font-variation-settings: "wdth" 90;
  color: var(--gray-light);
  line-height: 1;
  margin-bottom: 0px;
}
.how-step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.how-step p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #444;
}

/* Who It's For: 2×2 grid of light boxes, cols 3–10 */
.who-grid-section {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  background: var(--white);
  padding-top: 24px;
  padding-bottom: 24px;
}
.who-grid-section .sec-label { grid-column: 2; align-self: start; margin-top: 0; }
.who-grid {
  grid-column: 3 / 11;         /* cols 3–10; col 11 = right margin */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 28px 0 28px;      /* matches body text left/right inset in preceding sections */
}
.who-card {
  background: var(--off-white);
  color: var(--dark);
  padding: 28px 24px;
  border: 1px solid var(--light-gray);
}
.who-card-title {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: 300;
  font-variation-settings: "wdth" 90;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--dark);
}
.who-card-desc {
  font-size: 0.92rem;
  line-height: 1.72;
  color: #444;
}
@media (max-width: 900px) {
  .who-grid-section { grid-template-columns: 1fr; padding: 20px; }
  .who-grid-section .sec-label { grid-column: 1; }
  .who-grid { grid-column: 1; grid-template-columns: 1fr; padding: 0; }
}

/* Responsive */
@media (max-width: 900px) {
  .hero-statement { grid-template-columns: 1fr; padding: 40px 20px; }
  .hero-statement-inner { grid-column: 1; }
  .argument-section,
  .how-section { grid-template-columns: 1fr; }
  .argument-body,
  .how-body { grid-column: 1; padding: 28px 20px; }
  .how-steps { grid-template-columns: 1fr; gap: 24px; }
}
/* ══════════════════════════════════════════════════════════════════════
   CONTACT MODAL — shared lightbox
   Triggered by contact-modal.js on any <a href="contact.html"> or
   any element with data-contact attribute.
   ══════════════════════════════════════════════════════════════════════ */

iframe.contact-modal__form {
  width: 100%;
  min-height: 350px;
  border: none;
  background-color: var(--white);
}
select {
  appearance: base-select;
}
select::picker-icon {
  content: "▾";
}
.contact-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26, 26, 26, 0.72);
  align-items: flex-start; justify-content: center;
  padding: 20px;
  /* Allow the overlay itself to scroll on short viewports (landscape mobile) */
  overflow-y: auto;
  /* Prevent the page behind from scrolling when touching inside the overlay */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.contact-overlay.is-open {
  display: flex;
}
.contact-modal {
  background: var(--white);
  width: calc(100% - 20px); max-width: 600px;
  padding: 14px 40px 10px;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  /* Card must not exceed viewport; auto margin centres it when space allows */
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  margin: auto;
}
.contact-modal__close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; cursor: pointer;
  font-size: 1.4rem; color: var(--mid-gray); line-height: 1;
  transition: color .2s;
}
.contact-modal__close:hover { color: var(--dark); }
.contact-modal__eyebrow {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--crimson); margin-bottom: 8px;
}
.contact-modal__heading {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 300;
  font-variation-settings: "wdth" 90; line-height: 1.1;
  color: var(--dark); margin-bottom: 20px;
}
.contact-modal__form { display: flex; flex-direction: column; gap: 16px; }
.contact-modal__field {
  display: flex; flex-direction: column; gap: 5px;
}
.contact-modal__label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mid-gray);
}
.contact-modal__input,
.contact-modal__textarea,
.contact-modal__select {
  font-family: var(--font-body); font-size: 0.95rem;
  border: 1px solid var(--light-gray); padding: 10px 12px;
  color: var(--dark); background: var(--white);
  outline: none; transition: border-color .2s;
  width: 100%;
  border-radius: 3px;
}
#contactReason { min-height: 36px; }
.contact-modal__input:focus,
.contact-modal__textarea:focus,
.contact-modal__select:focus { border-color: var(--crimson); }
.contact-modal__textarea { resize: vertical; min-height: 100px; }
.contact-modal__submit {
  margin-top: 8px;
  background: var(--crimson); color: var(--white);
  border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 28px; align-self: flex-start;
  transition: background .2s;
}
.contact-modal__submit { 
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.contact-modal__submit:hover { background: var(--crimson-l); }
.contact-modal__success {
  display: none;
  text-align: center; padding: 20px 0;
  font-size: 1rem; color: var(--dark); line-height: 1.6;
}
.contact-modal__success strong { color: var(--crimson); }

@media (max-width: 600px) {
  .contact-modal { padding: 24px 24px 16px; }
  iframe.contact-modal__form { min-height: 420px; }
}

/*
 * Notify modal — narrower vertical footprint than the contact modal.
 * The iframe min-height is set inline by contact-modal.js (cfg.minHeight),
 * so this modifier only adjusts the card max-width.
 */
.contact-modal--notify {
  max-width: 700px;             /* slightly narrower than the contact modal's 600px */
}

@media (max-width: 600px) {
  .contact-modal--notify iframe.contact-modal__form { min-height: 570px; }
  .contact-modal__heading { font-size: 1.4rem; margin-bottom: 14px; }
}

* ══════════════════════════════════════════════════════════════════════
   FAQ PAGE — page-specific styles
   All selectors prefixed .faq-* — no conflict with existing rules.
   ══════════════════════════════════════════════════════════════════════ */

/* Reuses .privacy-body grid and .privacy-body-inner column placement */

.faq-body {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  background: var(--white);
  padding-bottom: 80px;
}

.faq-body-inner {
  grid-column: 3 / 10;
  padding-top: 64px;
  padding-left: 28px;
  padding-right: 28px;
  text-align: left;
}

.faq-heading {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 600;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.faq-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mid-gray);
  margin-bottom: 3rem;
}

/* FAQ item — <details>/<summary> accordion */
.faq-item {
  border-top: 1px solid var(--light-gray);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--light-gray);
}

.faq-item summary {
  list-style: none;              /* remove default triangle */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  font-variation-settings: "wdth" 90;
  color: var(--dark);
  line-height: 1.3;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* Plus / minus indicator */
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--crimson);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .2s;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item summary:hover { color: var(--crimson); }

.faq-answer {
  padding: 0 0 24px;
  font-size: 1rem;
  line-height: 1.78;
  color: #333;
}

.faq-answer p { margin-bottom: 0; }

/* Responsive */
@media (max-width: 900px) {
  .faq-body { grid-template-columns: 1fr; padding-bottom: 48px; }
  .faq-body-inner { grid-column: 1; padding: 36px 20px 0; }
}