/* =========================================================
   Crowd Funding Portal — name.com-inspired design system
   Clean white surfaces, single-orange accent, generous space,
   flat shadows, modern sans-serif. Mobile-first responsive.
   ========================================================= */

:root {
  /* Brand */
  --primary: #35405B;
  --primary-hover: #425072;
  --primary-light: #E6F5FB;

  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #f7f8fa;
  --surface: #ffffff;
  --border: #e5e7eb;
  --border-strong: #d1d5db;

  /* Text */
  --text: #1a1a1a;
  --text-muted: #5c6370;
  --text-faint: #9aa0a6;

  /* Semantic */
  --success: #00a859;
  --success-bg: #e6f7ee;
  --warning: #f59e0b;
  --warning-bg: #fff7e6;
  --danger: #d92626;
  --info: #0275A3;
  --info-bg: #e6f0ff;

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Geometry */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

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

/* ── Layout shells ─────────────────────────────────────── */

.shell,
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 48px 0;
}

.section-subtle {
  background: var(--bg-subtle);
}

/* ── Top navigation ────────────────────────────────────── */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.site-brand:hover { text-decoration: none; color: var(--text); }

.site-brand .dot { color: var(--primary); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}

.site-nav a {
  padding: 8px 14px;
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.site-nav a:hover {
  background: var(--bg-subtle);
  text-decoration: none;
  color: var(--text);
}

.site-nav a.active {
  color: var(--primary);
  font-weight: 600;
}

.site-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-chip {
  font-size: 14px;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
}

/* ── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn:hover {
  background: var(--bg-subtle);
  border-color: var(--text-muted);
  text-decoration: none;
  color: var(--text);
}

.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
}

.btn.ghost:hover {
  background: var(--primary-light);
  color: var(--primary-hover);
}

.btn.small { padding: 7px 14px; font-size: 14px; }
.btn.large { padding: 14px 28px; font-size: 17px; }
.btn.block { width: 100%; }

/* ── Hero ──────────────────────────────────────────────── */

.hero {
  padding: 64px 0 56px;
  background: var(--bg);
  text-align: center;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero .lead {
  margin: 0 auto 32px;
  max-width: 640px;
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.5;
}

.hero-search {
  max-width: 640px;
  margin: 0 auto 24px;
  display: flex;
  gap: 8px;
  background: var(--bg);
  padding: 6px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

.hero-search:focus-within {
  border-color: var(--primary);
}

.hero-search input {
  flex: 1;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  min-width: 0;
}

.hero-search input::placeholder { color: var(--text-faint); }

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ── Stats strip ───────────────────────────────────────── */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.stat {
  text-align: center;
  padding: 0 16px;
}

.stat .value {
  display: block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
}

.stat .label {
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Section headings ──────────────────────────────────── */

.section-head {
  text-align: center;
  margin-bottom: 40px;
}

.section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-head .lead {
  margin: 0 auto;
  max-width: 560px;
  font-size: 17px;
  color: var(--text-muted);
}

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.list-head h2,
.list-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Feature cards (How it works) ──────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow 0.15s, transform 0.15s;
}

.feature:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature .icon {
  width: 48px;
  height: 48px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

.feature h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.feature p {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Need cards (the heart of the portal) ──────────────── */

.need-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.need-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
}

.need-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.need-card .body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.need-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.need-card .org {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.need-card .badges {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.need-card .progress {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* ── Badges & pills ────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid var(--border);
}

.badge.urgent {
  background: var(--warning-bg);
  color: #92400e;
  border-color: #fde68a;
}

.badge.success {
  background: var(--success-bg);
  color: #065f46;
  border-color: #a7f3d0;
}

.badge.info {
  background: var(--info-bg);
  color: var(--info);
  border-color: #bfdbfe;
}

.badge.primary {
  background: var(--primary-light);
  color: var(--primary-hover);
  border-color: #fed7aa;
}

/* ── Trust banner ──────────────────────────────────────── */

.trust-banner {
  background: var(--primary-light);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #fed7aa;
}

.trust-banner .badge { background: var(--bg); border-color: var(--border); }
.trust-banner p { margin: 0; color: #7c3a00; font-size: 15px; line-height: 1.4; }
.trust-banner strong { color: var(--text); }

/* ── Forms ─────────────────────────────────────────────── */

.form {
  display: grid;
  gap: 16px;
}

.form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form input[type="tel"],
.form input[type="url"],
.form select,
.form textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form textarea { min-height: 100px; resize: vertical; }

.form .hint {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Tables ────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table th,
table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

table th {
  background: var(--bg-subtle);
  font-weight: 600;
  color: var(--text);
}

/* ── Footer ────────────────────────────────────────────── */

.site-footer {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  padding: 48px 0 24px;
  margin-top: 64px;
}

.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 32px;
}

.footer-col h4 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.footer-col a {
  color: var(--text-muted);
  font-size: 14px;
}

.footer-col a:hover {
  color: var(--primary);
  text-decoration: none;
}

.footer-col .brand-blurb {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 8px 0 0;
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-bottom .badges { display: flex; gap: 8px; }

/* ── Empty state ───────────────────────────────────────── */

.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}

.empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}

.empty p { margin: 0 0 16px; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 900px) {
  .feature-grid,
  .need-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .stats-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .stat { padding: 12px 0; }
}

@media (max-width: 640px) {
  .site-header-inner {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-nav {
    margin-left: 0;
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .site-actions { margin-left: auto; }
  .shell, .container, .site-footer-inner { padding: 0 16px; }
  .section { padding: 32px 0; }
  .hero { padding: 40px 0 32px; }
  .hero-search { flex-direction: column; padding: 8px; }
  .hero-search .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .feature-grid,
  .need-grid {
    grid-template-columns: 1fr;
  }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .form-card { padding: 24px 20px; }
}

/* ============================================================
   PHASE K — products, fundraising, donations
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 12px 0 8px;
}
.product-grid-public { gap: 24px; margin-top: 24px; }

.product-card {
  position: relative;
  display: block;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  background: #fff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.product-card input[type="radio"] {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.product-card:hover { border-color: var(--primary); }
.product-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 105, 0, 0.12);
}
.product-card.is-static { cursor: default; }
.product-card.is-static:hover { border-color: var(--border); }

.product-card-body h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.product-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.product-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}

.product-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.product-summary-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 15px;
}

.need-show-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
.need-show-side { position: sticky; top: 84px; }

@media (max-width: 900px) {
  .need-show-grid { grid-template-columns: 1fr; }
  .need-show-side { position: static; }
}

.raise-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 20px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.raise-amount { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.raise-amount .big {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.raise-bar {
  height: 8px;
  border-radius: 999px;
  background: #f3f4f6;
  overflow: hidden;
}
.raise-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 200ms ease;
}

.amount-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

/* Member list on group page */
.member-list {
  display: grid;
  gap: 8px;
}
.member-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}
.member-code {
  background: #fff7ed;
  color: var(--primary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.member-share {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  width: 100%;
}
@media (max-width: 720px) {
  .member-row { grid-template-columns: 1fr; }
}

/* Generic data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table thead th {
  background: #f9fafb;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   PHASE K-2 — image bands + hero illustration
   ============================================================ */

/* Hero with illustration: copy left, art right */
.hero-with-illustration {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero-art {
  display: flex;
  justify-content: center;
}
.hero-art img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .hero-with-illustration { grid-template-columns: 1fr; gap: 24px; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 360px; }
}
@media (max-width: 640px) {
  .hero-art img { max-width: 280px; }
}

/* Cover image strip on cards */
.need-card { overflow: hidden; }
.need-card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #fff7ed;
  border-bottom: 1px solid var(--border);
}
.need-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 240ms ease;
}
.need-card:hover .need-card-cover img { transform: scale(1.04); }

/* Product card with image at top */
.product-card { padding: 0; overflow: hidden; }
.product-image {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  background: #fff7ed;
  border-bottom: 1px solid var(--border);
}
.product-card-body { padding: 16px 20px 18px; }
.product-card input[type="radio"] { top: 12px; right: 12px; }

/* Product summary on need detail / donate */
.product-summary { padding: 0; overflow: hidden; }
.product-summary-image {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  background: #fff7ed;
  border-bottom: 1px solid var(--border);
}
.product-summary-body { padding: 18px 20px; }

/* Group hero strip on /fundraise/group.php */
.group-hero {
  width: 100%;
  aspect-ratio: 5 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff7ed;
  border: 1px solid var(--border);
}
.group-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Student dashboard group summary banner */
.group-summary-image {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: #fff7ed;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

/* ──────────────────────────────────────────────────────────
   School donation page — scoped to .school-page
   Brand palette (the good work): navy #35405B + teal #21BFE1
   ────────────────────────────────────────────────────────── */
.school-page {
  --tgw-navy: #35405B;
  --tgw-navy-2: #425072;
  --tgw-teal: #21BFE1;
}

.school-head { margin-bottom: 16px; }
.school-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tgw-navy);
}
.school-head .hint { margin: 4px 0 0; }

.school-hero {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.school-banner {
  background: var(--tgw-navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
}
.school-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.school-side {
  background: var(--tgw-navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.school-side .raise-amount .big { color: #fff; }
.school-side .hint { color: rgba(255,255,255,0.78); }
.school-side .raise-bar {
  background: rgba(255,255,255,0.18);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.school-side .raise-bar > span {
  display: block;
  height: 100%;
  background: var(--tgw-teal);
}
.side-title {
  margin: 8px 0 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.78);
}
.donor-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.donor-list li strong { display: block; }
.donor-list li .hint { color: rgba(255,255,255,0.7); font-size: 13px; }

.school-stats {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.school-stats li {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tgw-navy);
  display: inline-block;
  margin-bottom: 4px;
  position: relative;
}
.stat-icon::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--tgw-teal);
  opacity: 0.55;
}
.stat-value { font-weight: 700; color: var(--text); font-size: 16px; }
.stat-label { color: var(--text-muted); font-size: 12px; }

.school-video {
  background: var(--tgw-navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  aspect-ratio: 16 / 9;
}
.school-video.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  letter-spacing: 0.05em;
}
.school-video video { width: 100%; height: 100%; display: block; }

.school-about {
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.school-block { margin-bottom: 32px; }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.block-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tgw-navy);
}
.block-link { font-size: 13px; }

.req-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.req-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.req-thumb {
  background: var(--tgw-navy);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.req-thumb img { width: 100%; height: 100%; object-fit: cover; }
.req-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.req-body h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.req-body .hint { margin: 0; font-size: 12px; }
.req-body .btn { margin-top: auto; }

.doc-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.doc-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}
.doc-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tgw-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.doc-row a:hover .doc-icon { background: var(--tgw-navy-2); }

.school-contact {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 32px;
}
.school-contact p { margin: 4px 0; font-size: 14px; color: var(--text); }

.faq-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  padding: 6px 0;
}
.faq-list details[open] summary { color: var(--tgw-navy); }
.faq-list p { margin: 6px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .school-hero { grid-template-columns: 1fr; }
  .school-stats { grid-template-columns: repeat(3, 1fr); }
  .req-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .school-stats { grid-template-columns: repeat(2, 1fr); }
}



/* ───────────────────────── tgw-ui partials library ───────────────────────── */

/* sr-only utility (Tailwind has it; this is a safety net for non-utility contexts) */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Skip link — invisible until keyboard focus */
.tgw-skip-link {
  position: absolute;
  top: 0; left: 0;
  background: #35405B;
  color: #ffffff;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 8px 0;
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 150ms ease;
}
.tgw-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #A8916E;
  outline-offset: 2px;
}

/* KPI card */
.tgw-kpi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid rgba(15, 32, 61, 0.08);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15, 32, 61, 0.04);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.tgw-kpi--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.tgw-kpi--link:hover {
  box-shadow: 0 8px 20px rgba(15, 32, 61, 0.10);
  transform: translateY(-2px);
}
.tgw-kpi--link:focus-visible {
  outline: 3px solid #A8916E;
  outline-offset: 2px;
}
.tgw-kpi__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(33, 191, 225, 0.18);
  color: #0F766E;
  align-items: center;
  justify-content: center;
}
.tgw-kpi__icon .material-symbols-outlined { font-size: 22px; }

/* Progress bar */
.tgw-progress__fill {
  background: linear-gradient(90deg, #0F766E 0%, #A8916E 100%);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .tgw-progress__fill { transition: none; }
}

/* Modal (HTML5 <dialog>) */
dialog.tgw-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 560px);
  width: 100%;
}
dialog.tgw-modal::backdrop {
  background: rgba(53, 64, 91, 0.55);
  backdrop-filter: blur(2px);
  animation: tgw-modal-backdrop-in 180ms ease;
}
dialog.tgw-modal[open] {
  animation: tgw-modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tgw-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tgw-modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  dialog.tgw-modal[open], dialog.tgw-modal::backdrop { animation: none; }
}
.tgw-modal__icon {
  display: inline-flex;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  color: #B45309;
  align-items: center;
  justify-content: center;
}
.btn.btn-error {
  background: #EF4444;
  color: #ffffff;
  border: 1px solid #EF4444;
}
.btn.btn-error:hover { background: #DC2626; border-color: #DC2626; }
.btn.btn-error:focus-visible { outline: 3px solid rgba(239, 68, 68, 0.4); outline-offset: 2px; }

/* Empty state */
.tgw-empty__icon {
  display: inline-flex;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(33, 191, 225, 0.12);
  color: #0F766E;
  align-items: center;
  justify-content: center;
}

/* Data table — mobile cards */
@media (max-width: 640px) {
  .tgw-table--mobile-cards thead { display: none; }
  .tgw-table--mobile-cards tr {
    display: block;
    border: 1px solid rgba(15, 32, 61, 0.08);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 8px;
    background: #ffffff;
  }
  .tgw-table--mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(15, 32, 61, 0.06);
  }
  .tgw-table--mobile-cards td:last-child { border-bottom: none; }
  .tgw-table--mobile-cards td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    flex: 0 0 40%;
  }
}

/* Notification bell (extras beyond Tailwind) */
.tgw-bell__menu { animation: tgw-fade-in 140ms ease; }
@keyframes tgw-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tgw-bell__menu { animation: none; } }

/* Generic visible-on-focus fallback used by keyboard users */
:focus-visible {
  outline-offset: 2px;
}

/* ──────────────────── tgw dashboard shell (header/sidebar/main) ──────────── */

/* App header */
.tgw-app-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 32, 61, 0.08);
  height: 64px;
}
.tgw-app-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
}
.tgw-app-header__toggle {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(15, 32, 61, 0.12);
  background: #ffffff;
}
.tgw-app-header__toggle:hover { background: #f1f5f9; }
.tgw-app-header__brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: #35405B;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.tgw-app-header__brand-text { white-space: nowrap; }
.tgw-app-header__page-title {
  color: #475569; font-size: 14px; font-weight: 500;
}
.tgw-app-header__sep { margin-right: 8px; color: #cbd5e1; }
.tgw-app-header__spacer { flex: 1; }
.tgw-app-header__bell { margin-right: 4px; }

/* User menu */
.tgw-user-menu { position: relative; }
.tgw-user-menu__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.tgw-user-menu__btn:hover { background: #f1f5f9; }
.tgw-user-menu__btn:focus-visible { outline: 3px solid #A8916E; outline-offset: 2px; }
.tgw-user-menu__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #35405B; color: #ffffff;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.05em;
}
.tgw-user-menu__meta { flex-direction: column; align-items: flex-start; line-height: 1; }
.tgw-user-menu__name { font-weight: 600; font-size: 13px; color: #35405B; }
.tgw-user-menu__chip {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.tgw-user-menu__dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(15, 32, 61, 0.10);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 32, 61, 0.14);
  z-index: 60;
  animation: tgw-fade-in 140ms ease;
}
.tgw-user-menu__header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(15, 32, 61, 0.08);
}
.tgw-user-menu__item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  color: #35405B; text-decoration: none;
  background: transparent; border: 0;
  font-size: 14px; cursor: pointer;
}
.tgw-user-menu__item:hover { background: #f1f5f9; }

/* App shell — sidebar + main */
.tgw-app-shell {
  display: block; /* default; sidebar is overlay on mobile */
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .tgw-app-shell.has-sidebar { display: grid; grid-template-columns: 240px 1fr; }
}

/* Sidebar */
.tgw-sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(15, 32, 61, 0.08);
  min-height: calc(100vh - 64px);
  padding: 16px 8px;
  position: sticky; top: 64px;
  align-self: start;
  height: calc(100vh - 64px);
  overflow-y: auto;
}
@media (max-width: 767px) {
  .tgw-sidebar {
    position: fixed; left: -280px; top: 64px;
    width: 280px;
    transition: left 220ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 70;
    box-shadow: 8px 0 24px rgba(15, 32, 61, 0.10);
  }
  .tgw-sidebar.is-open { left: 0; }
  body.tgw-sidebar-open { overflow: hidden; }
}
.tgw-sidebar__nav { display: flex; flex-direction: column; height: 100%; }
.tgw-sidebar__nav ul { list-style: none; padding: 0; margin: 0; }
.tgw-sidebar__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #475569;
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  position: relative;
}
.tgw-sidebar__link:hover { background: #f1f5f9; color: #35405B; }
.tgw-sidebar__link:focus-visible { outline: 3px solid #A8916E; outline-offset: 2px; }
.tgw-sidebar__link.is-active {
  background: rgba(33, 191, 225, 0.18);
  color: #0F766E;
  font-weight: 700;
}
.tgw-sidebar__link.is-active::before {
  content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px;
  width: 4px; border-radius: 2px;
  background: #0F766E;
}
.tgw-sidebar__label { flex: 1; }
.tgw-sidebar__stub-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.15); color: #B45309;
}
.tgw-sidebar__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 32, 61, 0.08);
}
.tgw-sidebar__backdrop {
  position: fixed; inset: 64px 0 0 0;
  background: rgba(53, 64, 91, 0.45);
  z-index: 65;
  animation: tgw-fade-in 120ms ease;
}

/* Main content */
.tgw-app-main {
  min-height: calc(100vh - 64px - 80px);
}
.tgw-app-main:focus { outline: none; }
.tgw-app-main__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
@media (min-width: 768px) {
  .tgw-app-main__inner { padding: 32px 32px 64px; }
}

/* Slim app footer */
.tgw-app-footer {
  background: #ffffff;
  border-top: 1px solid rgba(15, 32, 61, 0.08);
  padding: 16px;
}
.tgw-app-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 12px;
}
.tgw-app-footer__links {
  display: flex; gap: 16px;
  list-style: none; padding: 0; margin: 0;
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .tgw-sidebar { transition: none; }
}

/* ───────────────────────── tgw chips & tabs (gold-standard dashboard) ────── */
.tgw-chip {
  display: inline-flex; align-items: center;
  min-height: 36px;            /* mobile-friendly tap target with padding */
  padding: 0 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 32, 61, 0.14);
  color: #475569;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tgw-chip:hover { background: #f1f5f9; color: #35405B; }
.tgw-chip:focus-visible { outline: 3px solid #A8916E; outline-offset: 2px; }
.tgw-chip--active {
  background: #35405B; color: #ffffff; border-color: #35405B;
}

.tgw-tab {
  display: inline-block;
  padding: 12px 16px;
  margin-bottom: -1px;
  color: #475569;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tgw-tab:hover { color: #35405B; }
.tgw-tab:focus-visible { outline: 3px solid #A8916E; outline-offset: 4px; border-radius: 4px; }
.tgw-tab--active { color: #35405B; border-bottom-color: #35405B; }

/* Mobile: chip + tab tap target boost */
@media (max-width: 640px) {
  .tgw-chip { min-height: 44px; padding: 0 18px; }
  .tgw-tab  { padding: 14px 16px; }
}

/* QA account switcher inside the user menu dropdown */
.tgw-user-menu__divider { height: 1px; background: rgba(15, 32, 61, 0.08); margin: 4px 0; }
.tgw-user-menu__section-label {
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.tgw-user-menu__qa-list { max-height: min(640px, 70vh); overflow-y: auto; }
.tgw-user-menu__qa-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  width: 100%;
  background: transparent; border: 0;
  color: #35405B;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.tgw-user-menu__qa-item:hover { background: #f1f5f9; }
.tgw-user-menu__qa-item:focus-visible { outline: 2px solid #A8916E; outline-offset: -2px; background: #f1f5f9; }
.tgw-user-menu__qa-item.is-current {
  background: rgba(33, 191, 225, 0.10);
  color: #0F766E;
  font-weight: 600;
  cursor: default;
}
.tgw-user-menu__qa-email {
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE UI POLISH — brand-tinted, designer pass
   ═══════════════════════════════════════════════════════════════ */

/* Brand tokens (homepage scope) */
:root {
  --gw-navy:        #35405B;
  --gw-navy-2:      #425072;
  --gw-navy-3:      #35405B;
  --gw-teal:        #21BFE1;
  --gw-mint:        #A8916E;
  --gw-text:        #425072;
  --gw-muted:       #7987a1;
  --gw-faint:       #97a3b9;
  --gw-card-border: #dee2ef;
}

/* ── HERO V2 ───────────────────────────────────────────────── */
.hero-v2 {
  position: relative;
  min-height: 660px;
  padding: 140px 24px 120px;
  /* Animated 4-stop brand gradient — smooth pan across hue/position over time.
     Larger-than-viewport background so we have room to translate. */
  background: linear-gradient(
    135deg,
    #35405B 0%,
    #35405B 22%,
    #425072 48%,
    #425072 72%,
    #425072 100%
  );
  background-size: 280% 280%;
  background-position: 0% 50%;
  animation: hero-gradient-pan 18s ease-in-out infinite alternate;
  overflow: hidden;
  color: #fff;
}
@keyframes hero-gradient-pan {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
/* Decorative shapes also drift very slowly for parallax-like depth */
.hero-shape--lg { animation: hero-shape-drift-a 28s ease-in-out infinite alternate; }
.hero-shape--sm { animation: hero-shape-drift-b 32s ease-in-out infinite alternate; }
.hero-shape--ring { animation: hero-shape-rotate 60s linear infinite; }
@keyframes hero-shape-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%  { transform: translate3d(-40px, 30px, 0) scale(1.08); opacity: .85; }
  100% { transform: translate3d(20px, -20px, 0) scale(.95); opacity: 1; }
}
@keyframes hero-shape-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(30px, -25px, 0) scale(1.1); }
  100% { transform: translate3d(-15px, 15px, 0) scale(.92); }
}
@keyframes hero-shape-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Respect prefers-reduced-motion — disable the pan + drift for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-v2 { animation: none; }
  .hero-shape--lg, .hero-shape--sm, .hero-shape--ring { animation: none; }
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
  mix-blend-mode: luminosity;
  z-index: 0;
}

/* Spotlight reveal — same image, full colour, revealed in a feathered circle around the cursor */
.hero-bg-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;                /* above .hero-bg-image (0), below shapes (1) and content (5) */
  pointer-events: none;
  /* Hidden by default; revealed via mask centred on cursor */
  --mx: -200px;
  --my: -200px;
  --reveal-r: 0px;           /* JS lerps this up on enter, down on leave */
  mask-image:
    radial-gradient(
      circle var(--reveal-r) at var(--mx) var(--my),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 55%,
      rgba(0, 0, 0, 0) 100%
    );
  -webkit-mask-image:
    radial-gradient(
      circle var(--reveal-r) at var(--mx) var(--my),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 55%,
      rgba(0, 0, 0, 0) 100%
    );
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  opacity: 1;
  transition: opacity .25s ease;
  will-change: mask-image, -webkit-mask-image;
}
/* Touch / non-hover devices — disable the spotlight entirely */
@media (hover: none) {
  .hero-bg-reveal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-reveal { display: none; }
}
/* Decorative shapes */
.hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}
.hero-shape--lg { width: 520px; height: 520px; top: -120px; right: -100px; background: rgba(94, 196, 214, .28); }
.hero-shape--sm { width: 320px; height: 320px; bottom: -100px; left: 8%; background: rgba(33, 191, 225, .22); }
.hero-shape--ring {
  width: 280px; height: 280px; top: 18%; left: 45%;
  border: 1px solid rgba(255, 255, 255, .08);
  background: transparent; filter: none;
}
.hero-grid-dots {
  position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}

.hero-v2-inner {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-v2-content { max-width: 760px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .14);
  border: 1px solid rgba(33, 191, 225, .26);
  color: var(--gw-mint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-eyebrow .material-symbols-outlined { font-size: 16px; }

.hero-h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -2.2px;
  line-height: 1.04;
  margin-bottom: 22px;
  color: #fff;
}
.hero-h1-accent {
  background: linear-gradient(120deg, var(--gw-mint), var(--gw-teal) 60%, #BCE7F4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  max-width: 600px;
  margin-bottom: 36px;
}
.hero-sub strong { color: var(--gw-mint); font-weight: 700; }

.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .15s, color .15s;
  cursor: pointer;
}
.btn-hero .material-symbols-outlined { font-size: 18px; }
.btn-hero-primary {
  background: linear-gradient(135deg, var(--gw-mint), var(--gw-teal));
  color: var(--gw-navy);
  box-shadow: 0 12px 30px rgba(33, 191, 225, .35), 0 0 0 0 rgba(33, 191, 225, 0);
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(33, 191, 225, .45), 0 0 0 6px rgba(33, 191, 225, .18);
  color: var(--gw-navy);
}
.btn-hero-ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
}
.btn-hero-ghost:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
  color: #fff;
}

/* Hero stats strip — glass cards along the bottom of the hero */
.hero-stats {
  margin-top: 68px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-stat { padding: 0 6px; }
.hero-stat + .hero-stat { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 22px; }
.hero-stat-val {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.hero-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  margin-top: 8px;
}

/* Wave divider between hero and next section */
.hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  width: 100%; height: 80px;
  z-index: 4;
  display: block;
}

@media (max-width: 768px) {
  .hero-v2 { padding: 110px 20px 96px; min-height: auto; }
  .hero-h1 { letter-spacing: -1.4px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); padding: 18px; gap: 12px; margin-top: 44px; }
  .hero-stat + .hero-stat { border-left: 0; padding-left: 6px; }
  .hero-stat:nth-child(3), .hero-stat:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; margin-top: 4px;
  }
  .hero-wave { height: 48px; }
}

/* ── Generic section helpers ─────────────────────────────── */
.section-v2 { padding: 96px 24px; }
.section-v2-inner { max-width: 1180px; margin: 0 auto; }
.section-h2 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--gw-navy);
  margin-bottom: 14px;
}
.section-h2-center {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.18;
  color: var(--gw-navy);
  margin: 14px auto 8px;
  text-align: center;
  max-width: 680px;
}
.section-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gw-text);
}
.section-lead-center {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gw-muted);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.eyebrow .material-symbols-outlined { font-size: 14px; }
.eyebrow-mint {
  background: rgba(33, 191, 225, .15);
  color: var(--gw-navy);
}
.eyebrow-mint-on-dark {
  background: rgba(33, 191, 225, .18);
  color: var(--gw-mint);
}

/* ── VIDEO SECTION ──────────────────────────────────────── */
.video-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 1024px) {
  .video-row { grid-template-columns: 1fr; gap: 28px; }
}
.video-frame-wrap { position: relative; }
.video-frame-glow {
  position: absolute;
  inset: -16px;
  border-radius: 28px;
  background: radial-gradient(60% 60% at 30% 50%, rgba(33, 191, 225, .35), transparent 70%),
              radial-gradient(60% 60% at 70% 60%, rgba(53, 64, 91, .25), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.video-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--gw-navy);
  box-shadow:
    0 30px 60px rgba(53, 64, 91, .25),
    0 4px 12px rgba(53, 64, 91, .12);
  border: 1px solid rgba(255, 255, 255, .8);
}
.video-copy { padding-left: 8px; }

/* ── KALAM / FOUNDATION SECTION ────────────────────────── */
.kalam-section {
  position: relative;
  padding: 96px 24px;
  background: linear-gradient(140deg, var(--gw-navy-3) 0%, var(--gw-navy) 60%, var(--gw-navy-2) 100%);
  overflow: hidden;
}
.kalam-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.kalam-bg-blob--top { width: 460px; height: 460px; top: -120px; right: -120px; background: rgba(33, 191, 225, .18); }
.kalam-bg-blob--bot { width: 380px; height: 380px; bottom: -120px; left: -100px; background: rgba(53, 64, 91, .35); }
.kalam-grid-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}

.kalam-inner {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: 0 auto;
}

.kalam-card {
  position: relative;
  padding: 48px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.kalam-card-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, transparent, rgba(33, 191, 225, .12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.kalam-card-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 42px;
  flex-wrap: wrap;
}

.kalam-portrait-wrap { position: relative; flex-shrink: 0; }
.kalam-portrait-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 30% 30%, rgba(33, 191, 225, .55), transparent 70%);
  filter: blur(20px);
}
.kalam-portrait {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.kalam-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kalam-portrait-badge {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gw-mint);
  display: grid; place-items: center;
  color: var(--gw-navy);
  border: 3px solid var(--gw-navy);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.kalam-portrait-badge .material-symbols-outlined { font-size: 18px; }

.kalam-body { flex: 1; min-width: 260px; }
.kalam-headline {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.18;
  color: #fff;
  margin: 12px 0 12px;
}
.kalam-body-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
  max-width: 640px;
}
.kalam-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 13px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gw-mint), var(--gw-teal));
  color: var(--gw-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(33, 191, 225, .35);
  transition: transform .15s, box-shadow .2s;
}
.kalam-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(33, 191, 225, .50); color: var(--gw-navy); }
.kalam-cta .material-symbols-outlined { font-size: 18px; }

/* ── PARTNERS SECTION ───────────────────────────────────── */
.partners-section {
  position: relative;
  padding: 80px 24px;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 60%, #fafbfc 100%);
}
.partners-section::before,
.partners-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gw-card-border), transparent);
}
.partners-section::before { top: 0; }
.partners-section::after  { bottom: 0; }

.partners-inner { max-width: 1280px; margin: 0 auto; }
.partners-header { text-align: center; margin-bottom: 44px; }

.partners-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track {
  display: flex;
  gap: 64px;
  align-items: center;
  width: max-content;
  animation: partners-scroll 42s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
@keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.partners-item {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  height: 64px; min-width: 160px;
  padding: 0 22px;
  position: relative;
  transition: transform .2s;
}
.partners-item:hover { transform: scale(1.08); }
.partners-item img {
  max-height: 100%; max-width: 100%; height: auto; width: auto;
  object-fit: contain;
  opacity: .60;
  filter: grayscale(100%) brightness(.5);
  transition: opacity .25s, filter .25s;
}
.partners-item:hover img { opacity: 1; filter: grayscale(0%) brightness(1); }
.partners-fallback {
  display: none; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 8px 14px;
  border: 1px solid var(--gw-card-border); border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--gw-navy);
  text-align: center; letter-spacing: -.1px;
}



/* ═══════════════════════════════════════════════════════════════
   PREMIUM POLISH BUNDLE — scroll-reveal, timeline, school cards, footer
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Scroll-reveal — universal helper ────────────────────── */
.tgw-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--step-delay, 0s);
  will-change: opacity, transform;
}
.tgw-reveal--in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .tgw-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 8. HOW IT WORKS — connected timeline (cleaner v2) ───────── */
.how-section {
  padding: 96px 24px 110px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.how-inner { max-width: 1180px; margin: 0 auto; }
.how-header { text-align: center; margin-bottom: 56px; }

.how-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding-top: 6px;
}

/* Horizontal rail behind the 5 nodes — centered vertically through the circles */
.how-rail-bg,
.how-rail-fill {
  position: absolute;
  top: 50px;             /* (node height 100px) / 2 = 50px from top-of-step */
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
.how-rail-bg   { background: var(--gw-card-border, #dee2ef); }
.how-rail-fill {
  width: 0%;
  background: linear-gradient(90deg, var(--gw-navy, #35405B), var(--gw-teal, #21BFE1) 60%, var(--gw-mint, #A8916E));
  box-shadow: 0 0 8px rgba(94, 196, 214, .45);
  transition: width 1.8s cubic-bezier(.16, 1, .3, 1);
}
.how-rail-fill.how-rail-fill--in { width: 100%; }

.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  z-index: 2;
}
.how-step-node {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--gw-card-border, #dee2ef);
  box-shadow: 0 12px 28px rgba(53, 64, 91, .08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.how-step:hover .how-step-node {
  border-color: var(--gw-teal, #21BFE1);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(53, 64, 91, .16), 0 0 0 4px rgba(94, 196, 214, .12);
}

/* Tiny numbered badge sits ABOVE the circle (no overlap clash with the icon) */
.how-step-num {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gw-navy, #35405B), var(--gw-teal, #21BFE1));
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(53, 64, 91, .25);
}
.how-step-ring {                 /* not used in cleaner v2 — kept hidden for safety */
  display: none;
}
.how-step-icon {
  font-size: 40px !important;
  line-height: 1;
  color: var(--gw-teal, #21BFE1);
  width: 40px !important;
  height: 40px !important;
  display: inline-block;
}
.how-step:hover .how-step-icon { color: var(--gw-navy, #35405B); }

.how-step-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.3px;
  margin-bottom: 8px;
  line-height: 1.3;
  max-width: 200px;
}
.how-step-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--gw-muted, #7987a1);
  max-width: 200px;
}

/* Mobile: rotate to a vertical timeline */
@media (max-width: 900px) {
  .how-timeline { grid-template-columns: 1fr; gap: 28px; padding-left: 12px; }
  .how-rail-bg, .how-rail-fill {
    top: 50px; bottom: 50px;
    left: 50px; right: auto;
    width: 2px; height: auto;
  }
  .how-rail-fill {
    height: 0%;
    width: 2px;
    background: linear-gradient(180deg, var(--gw-navy, #35405B), var(--gw-teal, #21BFE1) 60%, var(--gw-mint, #A8916E));
    transition: height 1.8s cubic-bezier(.16, 1, .3, 1);
  }
  .how-rail-fill.how-rail-fill--in { height: 100%; width: 2px; }
  .how-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 22px;
    padding: 0;
  }
  .how-step-node { flex-shrink: 0; width: 90px; height: 90px; margin-bottom: 0; margin-left: 4px; }
  .how-step-num { top: -8px; left: 30px; transform: none; }
  .how-step-icon { font-size: 34px !important; width: 34px !important; height: 34px !important; }
  .how-step-title, .how-step-body { max-width: 100%; }
}

/* ── TESTIMONIALS / STORIES STRIP — under "Empower your roots" ─ */
.stories-section {
  padding: 96px 24px 110px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}
.stories-inner { max-width: 1280px; margin: 0 auto; }
.stories-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 44px;
}
.stories-header .lead-col { max-width: 560px; }
.stories-view-all {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--gw-navy, #35405B);
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-decoration: none;
  transition: transform .15s, background .2s;
  box-shadow: 0 8px 20px rgba(53, 64, 91, .15);
}
.stories-view-all:hover { transform: translateY(-2px); background: var(--gw-navy-2, #425072); color: #fff; }
.stories-view-all .material-symbols-outlined { font-size: 14px; }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.story-tile-h {            /* "h" suffix to avoid clash with /testimonials.php .story-tile */
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--gw-navy, #35405B);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-tile-h:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(53, 64, 91, .22); }
.story-tile-h img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.story-tile-h:hover img { transform: scale(1.06); }
.story-tile-h .story-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(3,27,78,0) 40%, rgba(3,27,78,.85) 100%);
}
.story-tile-h .story-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(33, 191, 225, .92);
  color: var(--gw-navy, #35405B);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .2s ease;
}
.story-tile-h:hover .story-play { transform: translate(-50%, -50%) scale(1.08); }
.story-tile-h .story-play .material-symbols-outlined { font-size: 32px; }
.story-tile-h .story-meta {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  color: #fff;
}
.story-tile-h .story-quote {
  font-size: 13.5px; line-height: 1.5; font-weight: 500;
  color: rgba(255, 255, 255, .94);
  margin-bottom: 10px;
}
.story-tile-h .story-speaker {
  font-size: 13px; font-weight: 700; letter-spacing: -.1px;
}
.story-tile-h .story-role {
  font-size: 11px; font-weight: 500; opacity: .82;
  margin-top: 2px;
}

/* ── 5. SCHOOL CARDS — animated progress + tilt-on-hover ───── */
.schools-section {
  padding: 110px 24px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.schools-inner { max-width: 1280px; margin: 0 auto; }

.schools-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.schools-view-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--gw-navy, #35405B);
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 8px 20px rgba(53, 64, 91, .15);
}
.schools-view-all:hover {
  transform: translateY(-2px);
  background: var(--gw-navy-2, #425072);
  color: #fff;
  box-shadow: 0 12px 28px rgba(53, 64, 91, .28);
}
.schools-view-all .material-symbols-outlined { font-size: 14px; }

.schools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.school-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.school-card:hover {
  transform: translateY(-6px);
  border-color: var(--gw-teal, #21BFE1);
  box-shadow: 0 24px 50px rgba(53, 64, 91, .12), 0 4px 12px rgba(53, 64, 91, .06);
}

.school-card-link {
  display: block; text-decoration: none; color: inherit;
}

.school-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--gw-navy, #35405B);
  overflow: hidden;
}
.school-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.school-card:hover .school-card-cover img { transform: scale(1.06); }
.school-card-loc {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--gw-navy, #35405B);
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  backdrop-filter: blur(4px);
}
.school-card-loc .material-symbols-outlined { font-size: 13px; color: var(--gw-teal, #21BFE1); }
.school-card-cat {
  position: absolute;
  top: 14px; right: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(53, 64, 91, .85);
  color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .8px;
  backdrop-filter: blur(4px);
}

.school-card-body { padding: 22px; }
.school-card-name {
  font-size: 19px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.4px;
  line-height: 1.25;
  margin-bottom: 14px;
}
.school-card-meta {
  display: flex; flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 12px;
  color: var(--gw-muted, #7987a1);
  margin-bottom: 20px;
}
.school-card-meta > span {
  display: inline-flex; align-items: center; gap: 4px;
}
.school-card-meta .material-symbols-outlined {
  font-size: 14px; color: var(--gw-teal, #21BFE1);
}

.school-card-progress { margin-top: 4px; }
.school-card-prog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  color: var(--gw-text, #425072);
  margin-bottom: 6px;
}
.school-card-pct {
  font-size: 16px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.4px;
}
.school-card-prog-track {
  height: 8px;
  background: var(--gw-card-border, #dee2ef);
  border-radius: 999px;
  overflow: hidden;
}
.school-card-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gw-navy, #35405B), var(--gw-teal, #21BFE1), var(--gw-mint, #A8916E));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(33, 191, 225, .35);
  transition: width 1.6s cubic-bezier(.16, 1, .3, 1);
}
.school-card-prog-target {
  font-size: 11px; color: var(--gw-faint, #97a3b9);
  margin-top: 6px;
}

.school-card-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--gw-card-border, #dee2ef);
}
.school-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--gw-navy, #35405B);
  text-transform: uppercase;
  transition: gap .2s ease, color .2s ease;
}
.school-card:hover .school-card-cta {
  gap: 12px;
  color: var(--gw-teal, #21BFE1);
}
.school-card-cta .material-symbols-outlined { font-size: 16px; }

/* ── 14. FOOTER V2 — navy, branded ─────────────────────────── */
.tgw-footer-v2 {
  position: relative;
  margin-top: 120px;
  padding: 0 24px 32px;
  background: linear-gradient(180deg, var(--gw-navy-3, #35405B) 0%, var(--gw-navy, #35405B) 50%, #35405B 100%);
  color: #fff;
  overflow: hidden;
}
.tgw-footer-wave {
  position: absolute;
  top: -1px; left: 0; right: 0;
  width: 100%; height: 80px;
  display: block;
}
.tgw-footer-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.tgw-footer-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.tgw-footer-blob--a { width: 420px; height: 420px; top: 60px; right: -120px; background: rgba(33, 191, 225, .14); }
.tgw-footer-blob--b { width: 360px; height: 360px; bottom: -120px; left: -100px; background: rgba(53, 64, 91, .35); }
.tgw-footer-grid-dots {
  position: absolute; inset: 80px 0 0;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}

.tgw-footer-inner {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 96px;
}

/* Newsletter */
.tgw-footer-newsletter {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: end;
  padding: 36px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  margin-bottom: 56px;
}
@media (max-width: 820px) {
  .tgw-footer-newsletter { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
}
.tgw-footer-news-headline {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -.7px;
  color: #fff;
  margin: 14px 0 8px;
  line-height: 1.25;
}
.tgw-footer-news-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.5;
  max-width: 480px;
}
.tgw-footer-news-form {
  display: flex; gap: 0; height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  overflow: hidden;
  transition: border-color .2s;
}
.tgw-footer-news-form:focus-within {
  border-color: var(--gw-mint, #A8916E);
  box-shadow: 0 0 0 3px rgba(33, 191, 225, .14);
}
.tgw-footer-news-form input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
}
.tgw-footer-news-form input::placeholder { color: rgba(255, 255, 255, .42); }
.tgw-footer-news-form button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1));
  color: var(--gw-navy, #35405B);
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  border: 0; cursor: pointer;
  transition: filter .2s;
}
.tgw-footer-news-form button:hover { filter: brightness(1.1); }
.tgw-footer-news-form button .material-symbols-outlined { font-size: 16px; }
.tgw-footer-news-success {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .18);
  border: 1px solid rgba(33, 191, 225, .35);
  color: var(--gw-mint, #A8916E);
  font-size: 13px; font-weight: 700;
}

/* Trust badges */
.tgw-footer-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 36px 0;
  margin-bottom: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (max-width: 900px) { .tgw-footer-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tgw-footer-trust { grid-template-columns: 1fr; } }

.tgw-footer-trust-item {
  display: flex; align-items: flex-start; gap: 14px;
}
.tgw-footer-trust-ico {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(33, 191, 225, .15), rgba(33, 191, 225, .08));
  border: 1px solid rgba(33, 191, 225, .22);
  display: grid; place-items: center;
  color: var(--gw-mint, #A8916E);
}
.tgw-footer-trust-ico .material-symbols-outlined { font-size: 22px; }
.tgw-footer-trust-title { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.2px; margin-bottom: 4px; }
.tgw-footer-trust-body  { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .58); }

/* 4-col link grid */
.tgw-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .tgw-footer-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
@media (max-width: 540px) { .tgw-footer-cols { grid-template-columns: 1fr; } }

.tgw-footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}
.tgw-footer-logo img {
  width: 40px; height: 40px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tgw-footer-logo span {
  font-size: 15px; font-weight: 800; letter-spacing: -.5px;
  color: #fff; text-transform: uppercase;
}
.tgw-footer-tagline {
  font-size: 13px; line-height: 1.55;
  color: rgba(255, 255, 255, .58);
  max-width: 320px;
  margin-bottom: 20px;
}
.tgw-footer-socials { display: flex; gap: 10px; }
.tgw-footer-socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .78);
  transition: all .2s;
}
.tgw-footer-socials a:hover {
  background: rgba(33, 191, 225, .18);
  border-color: rgba(33, 191, 225, .35);
  color: var(--gw-mint, #A8916E);
  transform: translateY(-2px);
}
.tgw-footer-socials .material-symbols-outlined { font-size: 18px; }

.tgw-footer-col h4 {
  font-size: 11px; font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 18px;
}
.tgw-footer-col ul { list-style: none; padding: 0; margin: 0; }
.tgw-footer-col li { margin-bottom: 12px; }
.tgw-footer-col li a {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .15s;
}
.tgw-footer-col li a:hover { color: var(--gw-mint, #A8916E); }

.tgw-footer-bottom {
  display: flex; justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.tgw-footer-bottom p {
  font-size: 11px;
  letter-spacing: .3px;
  color: rgba(255, 255, 255, .42);
  margin: 0;
}

/* Pause the homepage hero gradient animation when scrolled out of view, save battery */
@media (max-width: 540px) { .hero-v2 { background-size: 200% 200%; } }


/* ═══════════════════════════════════════════════════════════════
   PAGE-HERO (gallery + testimonials shared)
   ═══════════════════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  padding: 140px 24px 100px;
  background: linear-gradient(135deg, var(--gw-navy-3, #35405B) 0%, var(--gw-navy, #35405B) 50%, var(--gw-navy-2, #425072) 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.page-hero--alt {
  background: linear-gradient(135deg, var(--gw-navy-2, #425072) 0%, var(--gw-navy, #35405B) 50%, var(--gw-navy-3, #35405B) 100%);
}
.page-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.page-hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.page-hero-blob--a { width: 460px; height: 460px; top: -120px; right: -120px; background: rgba(33, 191, 225, .22); }
.page-hero-blob--b { width: 360px; height: 360px; bottom: -100px; left: -100px; background: rgba(94, 196, 214, .18); }
.page-hero-grid-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}
.page-hero-inner { position: relative; z-index: 5; max-width: 980px; margin: 0 auto; }
.page-hero-h1 {
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 800; letter-spacing: -2px; line-height: 1.06;
  color: #fff;
  margin: 22px 0 18px;
}
.page-hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  max-width: 680px; margin: 0 auto 36px;
}
.page-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  max-width: 720px; margin: 0 auto;
}
.page-hero-stat { padding: 2px 8px; }
.page-hero-stat + .page-hero-stat { border-left: 1px solid rgba(255,255,255,.12); }
.page-hero-stat .v {
  font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.8px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.page-hero-stat .l {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-top: 6px;
}
.page-hero-wave {
  position: absolute; bottom: -1px; left: 0; right: 0;
  width: 100%; height: 80px; display: block; z-index: 4;
}
@media (max-width: 700px) {
  .page-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
  .page-hero-stat + .page-hero-stat { border-left: 0; }
  .page-hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY PAGE — toolbar, masonry, tiles, CTA
   ═══════════════════════════════════════════════════════════════ */
.gallery-section { padding: 56px 24px 100px; background: #ffffff; }
.gallery-inner { max-width: 1280px; margin: 0 auto; }

.gallery-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fafbfc;
  border: 1px solid var(--gw-card-border, #dee2ef);
}
.gallery-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  color: var(--gw-text, #425072);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  cursor: pointer; appearance: none;
  transition: all .15s ease;
}
.gallery-chip:hover { border-color: var(--gw-teal, #21BFE1); color: var(--gw-navy, #35405B); }
.gallery-chip.is-active {
  background: var(--gw-navy, #35405B);
  color: #fff; border-color: var(--gw-navy, #35405B);
}
.gallery-chip-count {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .22);
  color: var(--gw-navy, #35405B);
  font-size: 10px;
}
.gallery-chip.is-active .gallery-chip-count { background: rgba(255,255,255,.18); color: #fff; }

.gallery-sort {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gw-muted, #7987a1); font-weight: 600;
  letter-spacing: .3px;
}
.gallery-sort .material-symbols-outlined { font-size: 16px; }

/* PINTEREST-STYLE MASONRY — CSS multi-column.
   Each tile keeps its natural aspect ratio so columns pack with no gaps. */
.gallery-masonry {
  column-count: 4;
  column-gap: 14px;
}
@media (max-width: 1200px) { .gallery-masonry { column-count: 3; } }
@media (max-width: 760px)  { .gallery-masonry { column-count: 2; column-gap: 10px; } }
@media (max-width: 420px)  { .gallery-masonry { column-count: 1; } }

.gallery-masonry .gallery-tile {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--gw-card-border, #dee2ef);
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  appearance: none;
  break-inside: avoid;             /* keep each tile inside its column */
  page-break-inside: avoid;        /* legacy support */
  -webkit-column-break-inside: avoid;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: left;
  /* hint to GPU so the lift+scale don't jitter */
  will-change: transform;
}
@media (max-width: 760px) {
  .gallery-masonry .gallery-tile { margin-bottom: 10px; }
}

.gallery-masonry .gallery-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gw-teal, #21BFE1);
  box-shadow: 0 22px 50px rgba(53, 64, 91, .16);
  z-index: 2;
}
.gallery-masonry .gallery-tile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .45s ease;
  background: var(--gw-card-border, #dee2ef);
}
.gallery-masonry .gallery-tile:hover img { transform: scale(1.05); }

.gallery-masonry .gallery-tile-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(3,27,78,.0) 40%, rgba(3,27,78,.78) 100%);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.gallery-masonry .gallery-tile:hover .gallery-tile-overlay { opacity: 1; }

.gallery-masonry .gallery-tile-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .94);
  color: var(--gw-navy, #35405B);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.gallery-masonry .gallery-tile:hover .gallery-tile-tag { opacity: 1; transform: translateY(0); }

.gallery-masonry .gallery-tile-caption {
  color: #fff;
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  transform: translateY(8px);
  transition: transform .25s ease;
}
.gallery-masonry .gallery-tile:hover .gallery-tile-caption { transform: translateY(0); }

.gallery-masonry .gallery-tile-cta {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--gw-navy, #35405B);
  display: grid; place-items: center;
  transform: scale(.6); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.gallery-masonry .gallery-tile:hover .gallery-tile-cta { transform: scale(1); opacity: 1; }
.gallery-masonry .gallery-tile-cta .material-symbols-outlined { font-size: 18px; }

/* Gallery bottom CTA card */
.gallery-cta {
  margin-top: 64px;
  padding: 40px 44px;
  border-radius: 24px;
  background:
    radial-gradient(60% 100% at 80% 50%, rgba(33, 191, 225, .14), transparent 60%),
    linear-gradient(135deg, #fafbfc, #ffffff);
  border: 1px solid var(--gw-card-border, #dee2ef);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.gallery-cta-body { max-width: 600px; }
.gallery-cta h2 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800; letter-spacing: -.6px;
  color: var(--gw-navy, #35405B);
  margin: 14px 0 10px;
  line-height: 1.25;
}
.gallery-cta p { font-size: 14px; line-height: 1.6; color: var(--gw-muted, #7987a1); }
.gallery-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS PAGE — featured quote, grid, CTA
   ═══════════════════════════════════════════════════════════════ */

.featured-quote-section {
  padding: 56px 24px 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
.featured-quote-inner { max-width: 1100px; margin: 0 auto; }

.featured-quote-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--gw-card-border, #dee2ef);
  box-shadow: 0 30px 80px rgba(53, 64, 91, .12), 0 4px 12px rgba(53, 64, 91, .04);
}
.featured-quote-photo {
  position: relative;
  background: var(--gw-navy, #35405B);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.featured-quote-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.featured-quote-card:hover .featured-quote-photo img { transform: scale(1.04); }
.featured-quote-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(33, 191, 225, .94);
  color: var(--gw-navy, #35405B);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .2s ease;
}
.featured-quote-card:hover .featured-quote-play { transform: translate(-50%, -50%) scale(1.08); }
.featured-quote-play .material-symbols-outlined { font-size: 42px; }
.featured-quote-duration {
  position: absolute; bottom: 16px; right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.featured-quote-body {
  position: relative;
  padding: 48px 48px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.featured-quote-mark {
  width: 48px; height: 48px;
  color: var(--gw-teal, #21BFE1);
  margin-bottom: 18px;
  opacity: .9;
}
.featured-quote-text {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--gw-navy, #35405B);
  font-weight: 500;
  letter-spacing: -.2px;
  margin-bottom: 28px;
}
.featured-quote-attr {
  display: flex; align-items: center; gap: 14px;
}
.fq-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gw-navy), var(--gw-teal));
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 800; letter-spacing: -1px;
  flex-shrink: 0;
}
.fq-name {
  font-size: 14px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.2px;
}
.fq-role {
  font-size: 12.5px; color: var(--gw-muted, #7987a1);
  margin-top: 2px;
}
.featured-quote-tag {
  position: absolute; top: 24px; right: 24px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .14);
  color: var(--gw-navy, #35405B);
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
}
.featured-quote-tag .material-symbols-outlined { font-size: 13px; }
@media (max-width: 900px) {
  .featured-quote-card { grid-template-columns: 1fr; }
  .featured-quote-photo { aspect-ratio: 16 / 10; }
  .featured-quote-body { padding: 32px 24px; }
  .featured-quote-tag { top: 14px; right: 14px; }
}

/* Stories grid */
.stories-page-section { padding: 40px 24px 100px; background: #fafbfc; }
.stories-page-inner { max-width: 1280px; margin: 0 auto; }

.stories-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.stories-page-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.stories-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.story-tile-pg {
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.story-tile-pg:hover {
  transform: translateY(-4px);
  border-color: var(--gw-teal, #21BFE1);
  box-shadow: 0 22px 50px rgba(53, 64, 91, .14);
}
.story-tile-pg-cover {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--gw-navy, #35405B);
}
.story-tile-pg-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.story-tile-pg:hover .story-tile-pg-cover img { transform: scale(1.06); }
.story-tile-pg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(3,27,78,.45) 100%);
}
.story-tile-pg-duration {
  position: absolute; bottom: 12px; right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.story-tile-pg-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(33, 191, 225, .92);
  color: var(--gw-navy, #35405B);
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}
.story-tile-pg:hover .story-tile-pg-play { transform: translate(-50%, -50%) scale(1.08); }
.story-tile-pg-play .material-symbols-outlined { font-size: 28px; }

.story-tile-pg-body { padding: 18px 20px 20px; }
.story-tile-pg-quote {
  font-size: 14px; line-height: 1.5; font-weight: 500;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.1px;
  margin-bottom: 14px;
}
.story-tile-pg-attr {
  display: flex; align-items: center; gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--gw-card-border, #dee2ef);
}
.story-tile-pg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gw-navy), var(--gw-teal));
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; letter-spacing: -.5px;
  flex-shrink: 0;
}
.story-tile-pg-name { font-size: 12.5px; font-weight: 800; color: var(--gw-navy, #35405B); letter-spacing: -.1px; }
.story-tile-pg-role { font-size: 11px; color: var(--gw-muted, #7987a1); margin-top: 2px; }

/* Stories bottom CTA — dark card */
.stories-cta {
  margin-top: 64px;
  padding: 44px 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--gw-navy-3, #35405B), var(--gw-navy, #35405B) 60%, var(--gw-navy-2, #425072));
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.stories-cta::before {
  content: ""; position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(33, 191, 225, .18);
  filter: blur(60px);
  pointer-events: none;
}
.stories-cta-body { max-width: 640px; position: relative; z-index: 1; }
.stories-cta h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800; letter-spacing: -.7px;
  color: #fff;
  line-height: 1.2;
  margin: 14px 0 10px;
}
.stories-cta p {
  font-size: 14.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.stories-cta .btn-hero { position: relative; z-index: 1; }


/* ═══════════════════════════════════════════════════════════════
   CMS PAGE TEMPLATE (about / impact / contact / etc.)
   ═══════════════════════════════════════════════════════════════ */
.cms-section { padding: 64px 24px 100px; background: #ffffff; }
.cms-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: flex-start;
}
@media (max-width: 980px) {
  .cms-inner { grid-template-columns: 1fr; }
  .cms-aside { order: -1; }
}

/* Prose styling — make pasted-in CMS HTML look great by default */
.cms-prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gw-text, #425072);
  max-width: 720px;
}
.cms-prose h1, .cms-prose h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800; letter-spacing: -.6px;
  color: var(--gw-navy, #35405B);
  margin: 40px 0 14px;
  line-height: 1.25;
}
.cms-prose h1:first-child, .cms-prose h2:first-child { margin-top: 0; }
.cms-prose h3 {
  font-size: 20px; font-weight: 800; letter-spacing: -.3px;
  color: var(--gw-navy, #35405B);
  margin: 32px 0 10px; line-height: 1.3;
}
.cms-prose h4 {
  font-size: 16px; font-weight: 800; letter-spacing: -.2px;
  color: var(--gw-navy, #35405B);
  text-transform: uppercase; letter-spacing: .4px;
  margin: 28px 0 8px;
}
.cms-prose p { margin-bottom: 20px; }
.cms-prose p strong { color: var(--gw-navy, #35405B); font-weight: 700; }
.cms-prose a {
  color: var(--gw-navy, #35405B);
  text-decoration: none;
  border-bottom: 2px solid var(--gw-mint, #A8916E);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.cms-prose a:hover { color: var(--gw-teal, #21BFE1); border-bottom-color: var(--gw-teal, #21BFE1); }
.cms-prose ul, .cms-prose ol {
  margin: 0 0 22px;
  padding-left: 22px;
}
.cms-prose li { margin-bottom: 10px; line-height: 1.7; }
.cms-prose ul li::marker { color: var(--gw-teal, #21BFE1); }
.cms-prose ol { padding-left: 24px; }
.cms-prose ol li::marker { color: var(--gw-navy, #35405B); font-weight: 800; }

.cms-prose blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--gw-teal, #21BFE1);
  background: linear-gradient(90deg, rgba(33, 191, 225, .08), transparent 60%);
  border-radius: 0 12px 12px 0;
  font-size: 18px; line-height: 1.6;
  color: var(--gw-navy, #35405B);
  font-style: italic;
}
.cms-prose blockquote p:last-child { margin-bottom: 0; }
.cms-prose code {
  background: #f6f7fb;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--gw-navy, #35405B);
}
.cms-prose pre {
  background: var(--gw-navy, #35405B);
  color: #f4f5f9;
  padding: 18px 22px;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  margin: 22px 0;
}
.cms-prose pre code { background: transparent; color: inherit; padding: 0; }
.cms-prose img {
  max-width: 100%; height: auto;
  border-radius: 14px;
  margin: 28px 0;
  box-shadow: 0 18px 40px rgba(53, 64, 91, .12);
}
.cms-prose hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gw-card-border, #dee2ef), transparent);
  margin: 40px 0;
}
.cms-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14px;
}
.cms-prose th, .cms-prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gw-card-border, #dee2ef);
  text-align: left;
}
.cms-prose th {
  background: #fafbfc;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gw-muted, #7987a1);
}

/* Sticky sidebar — quick facts + CTA */
.cms-aside { position: sticky; top: 100px; }
.cms-aside-card {
  background: linear-gradient(145deg, #ffffff, #fafbfc);
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 18px 40px rgba(53, 64, 91, .06);
}
.cms-fact-list {
  list-style: none; padding: 0; margin: 18px 0 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.cms-fact-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--gw-card-border, #dee2ef);
}
.cms-fact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cms-fact-v {
  font-size: 20px; font-weight: 800; letter-spacing: -.5px;
  color: var(--gw-navy, #35405B);
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}
.cms-fact-l { font-size: 13px; color: var(--gw-muted, #7987a1); line-height: 1.4; }

.cms-aside-cta {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; justify-content: center;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1));
  color: var(--gw-navy, #35405B);
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(33, 191, 225, .35);
  transition: transform .15s, box-shadow .2s;
}
.cms-aside-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(33, 191, 225, .50); color: var(--gw-navy, #35405B); }
.cms-aside-cta .material-symbols-outlined { font-size: 16px; }

/* Bottom dark CTA card */
.cms-bottom-cta {
  max-width: 1180px; margin: 80px auto 0;
}
.cms-bottom-cta-card {
  padding: 56px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--gw-navy-3, #35405B), var(--gw-navy, #35405B) 55%, var(--gw-navy-2, #425072));
  color: #fff;
  text-align: center;
  position: relative; overflow: hidden;
}
.cms-bottom-cta-card::before {
  content: ""; position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(33, 191, 225, .18);
  filter: blur(60px);
}
.cms-bottom-cta-card::after {
  content: ""; position: absolute;
  bottom: -80px; left: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(53, 64, 91, .4);
  filter: blur(60px);
}
.cms-bottom-cta-card h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800; letter-spacing: -.8px;
  color: #fff;
  line-height: 1.2;
  margin: 14px auto 12px;
  max-width: 680px;
  position: relative; z-index: 1;
}
.cms-bottom-cta-card p {
  font-size: 15.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  max-width: 580px; margin: 0 auto 30px;
  position: relative; z-index: 1;
}
.cms-bottom-cta-actions {
  display: flex; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
@media (max-width: 600px) {
  .cms-bottom-cta-card { padding: 36px 24px; }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT US — CUSTOM LAYOUT (overrides generic CMS prose for /aboutus)
   ═══════════════════════════════════════════════════════════════ */
.about-intro {
  position: relative;
  padding: 80px 24px 60px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  overflow: hidden;
}
.about-intro::before {
  content: ""; position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 191, 225, .18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.about-intro::after {
  content: ""; position: absolute;
  bottom: -180px; left: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 64, 91, .08), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.about-intro-grid {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 40px; }
}
.about-intro-text { max-width: 580px; }

.about-h1 {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--gw-navy, #35405B);
  margin: 14px 0 22px;
}
.about-h1-accent {
  display: inline;
  background: linear-gradient(135deg, var(--gw-teal, #21BFE1), var(--gw-mint, #A8916E));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-intro-text p {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--gw-text, #425072);
  margin-bottom: 16px;
}
.about-intro-text p strong {
  color: var(--gw-navy, #35405B);
  font-weight: 700;
}
.about-buttons {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 28px;
}
.btn-hero-ghost-navy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid var(--gw-navy, #35405B);
  background: transparent;
  color: var(--gw-navy, #35405B);
  font-size: 13px; font-weight: 800; letter-spacing: .4px;
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s;
}
.btn-hero-ghost-navy:hover {
  background: var(--gw-navy, #35405B);
  color: #fff;
  transform: translateY(-2px);
}

/* Right column — feature card */
.about-feature-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff, #fafbfc);
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 24px 60px rgba(53, 64, 91, .10);
  overflow: hidden;
}
.about-feature-card-deco {
  position: absolute;
  top: -80px; right: -80px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 191, 225, .22), transparent 70%);
  pointer-events: none;
}
.about-feature-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) {
  .about-feature-grid { grid-template-columns: 1fr; }
  .about-feature-card { padding: 24px; }
}
.about-feature {
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 18px;
  padding: 22px 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.about-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(53, 64, 91, .08);
  border-color: var(--gw-teal, #21BFE1);
}
.about-feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gw-navy, #35405B), var(--gw-navy-2, #425072));
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(53, 64, 91, .22);
}
.about-feature-icon .material-symbols-outlined { font-size: 26px; }
.about-feature:nth-child(2) .about-feature-icon {
  background: linear-gradient(135deg, var(--gw-teal, #21BFE1), #21BFE1);
}
.about-feature:nth-child(3) .about-feature-icon {
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1));
  color: var(--gw-navy, #35405B);
}
.about-feature:nth-child(4) .about-feature-icon {
  background: linear-gradient(135deg, #425072, #35405B);
}
.about-feature h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--gw-navy, #35405B);
  margin: 0 0 8px;
}
.about-feature p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gw-muted, #7987a1);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE-HERO ANIMATION — match home hero (gradient pan + blob drift)
   Applied to all .page-hero / .page-hero--alt (gallery, testimonials,
   about, and all CMS pages)
   ═══════════════════════════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(
    135deg,
    var(--gw-navy-3, #35405B) 0%,
    var(--gw-navy, #35405B) 22%,
    var(--gw-navy-2, #425072) 48%,
    #425072 72%,
    var(--gw-navy-2, #425072) 100%
  );
  background-size: 280% 280%;
  background-position: 0% 50%;
  animation: page-hero-gradient-pan 18s ease-in-out infinite alternate;
}
.page-hero--alt {
  background: linear-gradient(
    135deg,
    var(--gw-navy-2, #425072) 0%,
    var(--gw-navy, #35405B) 28%,
    var(--gw-navy-3, #35405B) 58%,
    #35405B 78%,
    var(--gw-navy, #35405B) 100%
  );
  background-size: 280% 280%;
  background-position: 0% 50%;
  animation: page-hero-gradient-pan 20s ease-in-out infinite alternate;
}
@keyframes page-hero-gradient-pan {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Blobs drift slowly — matches the home hero's parallax feel */
.page-hero-blob--a { animation: page-hero-blob-drift-a 26s ease-in-out infinite alternate; will-change: transform, opacity; }
.page-hero-blob--b { animation: page-hero-blob-drift-b 30s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes page-hero-blob-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%  { transform: translate3d(-30px, 24px, 0) scale(1.08); opacity: .82; }
  100% { transform: translate3d(18px, -16px, 0) scale(.95); opacity: 1; }
}
@keyframes page-hero-blob-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(26px, -22px, 0) scale(1.1); }
  100% { transform: translate3d(-14px, 14px, 0) scale(.92); }
}

/* Subtle floating ring (matches home hero-shape--ring) — inserted via ::after on .page-hero-bg */
.page-hero-bg::after {
  content: "";
  position: absolute;
  top: 18%; left: 48%;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07);
  pointer-events: none;
  z-index: 1;
  transform: translateX(-50%);
  animation: page-hero-ring-rotate 60s linear infinite;
}
@keyframes page-hero-ring-rotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .page-hero,
  .page-hero--alt,
  .page-hero-blob--a,
  .page-hero-blob--b,
  .page-hero-bg::after { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   GALLERY LIGHTBOX — full-screen image viewer modal
   ═══════════════════════════════════════════════════════════════ */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 28, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: lb-fade-in .25s ease;
}
.gallery-lightbox[hidden] { display: none; }
@keyframes lb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lb-stage {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lb-stage img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .3s ease;
}
.lb-stage img.loaded { opacity: 1; }
.lb-spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border: 3px solid rgba(255, 255, 255, .15);
  border-top-color: var(--gw-teal, #21BFE1);
  border-radius: 50%;
  animation: lb-spin .9s linear infinite;
  z-index: 1;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; max-width: 920px;
  margin-top: 14px;
  padding: 0 6px;
  color: #fff;
}
.lb-caption {
  font-size: 15px; line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  letter-spacing: -.2px;
}
.lb-counter {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: 16px;
}
.lb-close, .lb-nav {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background .2s, border-color .2s, transform .15s;
}
.lb-close:hover, .lb-nav:hover {
  background: rgba(33, 191, 225, .18);
  border-color: var(--gw-mint, #A8916E);
  transform: scale(1.06);
}
.lb-close { top: 22px; right: 22px; }
.lb-prev  { top: 50%; left: 22px;  transform: translateY(-50%); }
.lb-next  { top: 50%; right: 22px; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-close .material-symbols-outlined,
.lb-nav .material-symbols-outlined { font-size: 22px; }
@media (max-width: 720px) {
  .lb-close { top: 14px; right: 14px; width: 42px; height: 42px; }
  .lb-prev  { left: 10px; width: 42px; height: 42px; }
  .lb-next  { right: 10px; width: 42px; height: 42px; }
  .lb-stage img { max-height: 70vh; }
  .lb-bottom { flex-direction: column; gap: 4px; align-items: flex-start; }
  .lb-counter { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   STORY MODAL — video-style modal for testimonials page
   ═══════════════════════════════════════════════════════════════ */
.story-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 28, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  animation: lb-fade-in .25s ease;
}
.story-modal[hidden] { display: none; }
.story-modal-card {
  position: relative;
  width: min(960px, 100%);
  max-height: 88vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55);
  animation: story-modal-up .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes story-modal-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 820px) {
  .story-modal-card { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
}
.story-modal-video {
  position: relative;
  background: linear-gradient(135deg, var(--gw-navy-3, #35405B), var(--gw-navy, #35405B) 55%, var(--gw-navy-2, #425072));
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.story-modal-video::before {
  content: ""; position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(33, 191, 225, .25), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(33, 191, 225, .20), transparent 55%);
}
.story-modal-video-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
  mix-blend-mode: luminosity;
}
.story-modal-video-frame {
  position: relative; z-index: 2;
  width: 84%; max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.story-modal-video-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.story-modal-video-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(53, 64, 91, .55), transparent 50%);
}
.story-modal-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--gw-navy, #35405B);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.story-modal-play .material-symbols-outlined { font-size: 38px; }
.story-modal-badge {
  position: absolute; bottom: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(53, 64, 91, .82);
  color: rgba(255, 255, 255, .9);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  z-index: 3;
  text-transform: uppercase;
}
.story-modal-badge .material-symbols-outlined { font-size: 14px; color: var(--gw-mint, #A8916E); }
.story-modal-duration {
  position: absolute; bottom: 18px; right: 18px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border-radius: 6px;
  font-size: 12px; font-weight: 700;
  z-index: 3;
  font-variant-numeric: tabular-nums;
}

.story-modal-body {
  padding: 38px 36px;
  display: flex; flex-direction: column;
  gap: 18px;
  background: #ffffff;
}
@media (max-width: 600px) {
  .story-modal-body { padding: 26px 22px; }
}
.story-modal-quote-mark {
  width: 38px; height: 38px;
  color: var(--gw-teal, #21BFE1);
  opacity: .8;
}
.story-modal-quote {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.4px;
  margin: 0;
}
.story-modal-attr { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.story-modal-avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gw-teal, #21BFE1), var(--gw-mint, #A8916E));
  color: var(--gw-navy, #35405B);
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.story-modal-name { font-size: 15px; font-weight: 800; color: var(--gw-navy, #35405B); letter-spacing: -.2px; }
.story-modal-role { font-size: 13px; color: var(--gw-muted, #7987a1); margin-top: 2px; }

.story-modal-meta {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.story-modal-meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--gw-text, #425072);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.story-modal-meta-pill .material-symbols-outlined { font-size: 13px; color: var(--gw-teal, #21BFE1); }

.story-modal-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gw-muted, #7987a1);
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(33, 191, 225, .08), transparent 80%);
  border-left: 3px solid var(--gw-teal, #21BFE1);
  border-radius: 0 10px 10px 0;
  margin-top: auto;
}

.story-modal-cta {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1));
  color: var(--gw-navy, #35405B);
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(33, 191, 225, .35);
  transition: transform .15s, box-shadow .2s;
}
.story-modal-cta:hover { transform: translateY(-2px); color: var(--gw-navy, #35405B); box-shadow: 0 14px 28px rgba(33, 191, 225, .5); }
.story-modal-cta .material-symbols-outlined { font-size: 16px; }

.story-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(53, 64, 91, .9);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background .2s, transform .15s;
}
.story-modal-close:hover { background: var(--gw-navy, #35405B); transform: scale(1.06); }
.story-modal-close .material-symbols-outlined { font-size: 22px; }

/* Hover state on story tiles — play button feels clickable */
.story-tile-pg { cursor: pointer; }
.story-tile-pg:hover .story-tile-pg-play { transform: scale(1.06); }


/* ═══════════════════════════════════════════════════════════════
   STORY MODAL — body scroll fix + featured card cursor
   ═══════════════════════════════════════════════════════════════ */
.story-modal-card {
  height: min(88vh, 720px);
}
.story-modal-body {
  overflow-y: auto;
  min-height: 0;
}
.story-modal-body::-webkit-scrollbar { width: 8px; }
.story-modal-body::-webkit-scrollbar-track { background: transparent; }
.story-modal-body::-webkit-scrollbar-thumb { background: #dee2ef; border-radius: 999px; }
.story-modal-body::-webkit-scrollbar-thumb:hover { background: #c2cbdb; }

/* Featured quote card — now interactive (whole card opens the modal) */
.featured-quote-card { cursor: pointer; }
.featured-quote-card:focus-visible {
  outline: 3px solid var(--gw-teal, #21BFE1);
  outline-offset: 4px;
}
.featured-quote-card:hover { box-shadow: 0 38px 90px rgba(53, 64, 91, .16), 0 6px 16px rgba(53, 64, 91, .06); }

/* On very small screens, the whole modal scrolls — keep the video frame visible */
@media (max-width: 820px) {
  .story-modal-card { height: auto; max-height: 92vh; }
  .story-modal-body { overflow-y: visible; }
}


/* ═══════════════════════════════════════════════════════════════
   BROWSE SCHOOLS — layout, filter bar, cards, empty state
   ═══════════════════════════════════════════════════════════════ */
.browse-section {
  padding: 64px 24px 100px;
  background: #fafbfc;
}
.browse-inner { max-width: 1280px; margin: 0 auto; }

/* ── Filter bar ─────────────────────────────────────────── */
.browse-filter-bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 28px;
  box-shadow: 0 18px 40px rgba(53, 64, 91, .07);
  align-items: end;
}
@media (max-width: 1080px) {
  .browse-filter-bar { grid-template-columns: 1fr 1fr 1fr; }
  .browse-filter-search { grid-column: 1 / -1; }
  .browse-filter-submit { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .browse-filter-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .browse-filter-bar { grid-template-columns: 1fr; }
}
.browse-filter-field {
  position: relative;
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.browse-filter-field label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gw-muted, #7987a1);
  padding-left: 14px;
}
.browse-filter-field input,
.browse-filter-field select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f4f6fa;
  font-size: 14px;
  color: var(--gw-navy, #35405B);
  outline: none;
  transition: border-color .2s, background .2s;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-weight: 500;
}
.browse-filter-field input::placeholder { color: var(--gw-muted, #7987a1); }
.browse-filter-field input:focus,
.browse-filter-field select:focus {
  border-color: var(--gw-teal, #21BFE1);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(33, 191, 225, .14);
}
.browse-filter-search input { padding-left: 40px; }
.browse-filter-search > .material-symbols-outlined {
  position: absolute;
  left: 12px; bottom: 12px;
  color: var(--gw-muted, #7987a1);
  font-size: 20px;
  pointer-events: none;
}
.browse-filter-caret {
  position: absolute;
  right: 12px; bottom: 12px;
  color: var(--gw-muted, #7987a1);
  font-size: 18px;
  pointer-events: none;
}
.browse-filter-submit {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--gw-navy, #35405B);
  color: #ffffff;
  font-size: 13px; font-weight: 800; letter-spacing: .4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.browse-filter-submit:hover {
  background: var(--gw-navy-2, #425072);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(53, 64, 91, .28);
}
.browse-filter-submit .material-symbols-outlined { font-size: 18px; }

/* ── Result meta strip ─────────────────────────────────── */
.browse-result-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.browse-result-count {
  font-size: 13.5px;
  color: var(--gw-muted, #7987a1);
  margin: 0;
  display: inline-flex; align-items: center; flex-wrap: wrap;
}
.browse-result-count strong {
  color: var(--gw-navy, #35405B);
  font-weight: 800;
  font-size: 18px;
  margin-right: 6px;
  letter-spacing: -.3px;
}
.browse-clear-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 16px;
  font-size: 11.5px; font-weight: 800;
  color: var(--gw-teal, #21BFE1);
  text-decoration: none;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .1);
  transition: background .2s, color .2s;
}
.browse-clear-link:hover {
  background: var(--gw-teal, #21BFE1);
  color: #fff;
}
.browse-trust-strip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--gw-navy, #35405B);
  letter-spacing: .2px;
}
.browse-trust-strip .material-symbols-outlined {
  font-size: 18px;
  color: var(--gw-teal, #21BFE1);
}

/* ── Cards grid ────────────────────────────────────────── */
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  margin-bottom: 80px;
}
.school-card {
  display: flex; flex-direction: column;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--gw-card-border, #dee2ef);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 24px rgba(53, 64, 91, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.school-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(53, 64, 91, .14);
  border-color: var(--gw-teal, #21BFE1);
}
.school-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--gw-navy, #35405B);
  overflow: hidden;
}
.school-card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.school-card:hover .school-card-cover img { transform: scale(1.06); }
.school-card-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(53, 64, 91, 0) 50%, rgba(53, 64, 91, .55) 100%);
  pointer-events: none;
}
.school-card-badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  z-index: 1;
}
.school-card-badge {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.school-card-badge--school    { background: rgba(33, 191, 225, .92); color: var(--gw-navy, #35405B); }
.school-card-badge--panchayat { background: rgba(255, 218, 91, .94); color: var(--gw-navy, #35405B); }
.school-card-badge--category  { background: rgba(255, 255, 255, .92); color: var(--gw-navy, #35405B); text-transform: none; letter-spacing: 0; }

.school-card-body {
  padding: 22px 22px 20px;
  display: flex; flex-direction: column;
  flex-grow: 1;
}
.school-card-name {
  font-size: 17px; font-weight: 800;
  letter-spacing: -.3px;
  color: var(--gw-navy, #35405B);
  margin: 0 0 6px;
  line-height: 1.3;
  transition: color .2s;
}
.school-card:hover .school-card-name { color: var(--gw-teal, #21BFE1); }
.school-card-loc {
  display: flex; align-items: center; gap: 4px;
  font-size: 12.5px;
  color: var(--gw-muted, #7987a1);
  margin-bottom: 16px;
}
.school-card-loc .material-symbols-outlined { font-size: 16px; color: var(--gw-teal, #21BFE1); }
.school-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.school-card-stat {
  background: #f4f6fa;
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
.school-card-stat .v {
  font-size: 18px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.3px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.school-card-stat .l {
  font-size: 10px; font-weight: 700;
  color: var(--gw-muted, #7987a1);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 4px;
}
.school-card-stat--empty { opacity: .55; }
.school-card-stat--empty .v { color: var(--gw-muted, #7987a1); }

.school-card-progress { margin-bottom: 16px; }
.school-card-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--gw-text, #425072);
  letter-spacing: -.1px;
}
.school-card-pct {
  color: var(--gw-navy, #35405B) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.school-card-progress-track {
  width: 100%; height: 8px;
  background: #eef1f7;
  border-radius: 999px;
  overflow: hidden;
}
.school-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gw-teal, #21BFE1), var(--gw-mint, #A8916E));
  border-radius: 999px;
  transition: width .5s ease;
}
.school-card-cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--gw-navy, #35405B);
  color: #ffffff;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  transition: background .25s;
}
.school-card-cta .material-symbols-outlined { font-size: 16px; }
.school-card:hover .school-card-cta {
  background: linear-gradient(135deg, var(--gw-teal, #21BFE1), #21BFE1);
}

/* ── Empty state ───────────────────────────────────────── */
.browse-empty {
  background: #ffffff;
  border: 2px dashed var(--gw-card-border, #dee2ef);
  border-radius: 20px;
  padding: 64px 32px;
  text-align: center;
  margin-bottom: 80px;
}
.browse-empty > .material-symbols-outlined {
  font-size: 60px;
  color: var(--gw-faint, #97a3b9);
  margin-bottom: 8px;
}
.browse-empty h3 {
  font-size: 22px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.4px;
  margin: 6px 0 8px;
}
.browse-empty p {
  font-size: 14.5px;
  color: var(--gw-muted, #7987a1);
  margin-bottom: 24px;
}
.browse-empty .btn-hero { display: inline-flex; }


/* ═══════════════════════════════════════════════════════════════
   BROWSE — fixes: badge stacking, CTA hover contrast, no underline
   ═══════════════════════════════════════════════════════════════ */
.school-card,
.school-card:hover,
.school-card:focus,
.school-card:visited { text-decoration: none !important; }

/* Stack badges vertically so type + category never overlap on narrow cards */
.school-card-badges {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: calc(100% - 24px);
}

/* CTA hover: brighter gradient + navy text so label stays readable */
.school-card-cta {
  color: #ffffff;
  text-decoration: none !important;
}
.school-card:hover .school-card-cta {
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1));
  color: var(--gw-navy, #35405B);
}
.school-card:hover .school-card-cta .material-symbols-outlined {
  color: var(--gw-navy, #35405B);
}


/* ═══════════════════════════════════════════════════════════════
   BROWSE — override leftover absolute-positioned .school-card-loc
   from the home-page's older .school-card-link strip. New browse
   cards put the location in the body, in normal flow.
   ═══════════════════════════════════════════════════════════════ */
.school-card-body .school-card-loc {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--gw-muted, #7987a1);
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 16px;
}
.school-card-body .school-card-loc .material-symbols-outlined {
  font-size: 16px;
  color: var(--gw-teal, #21BFE1);
}


/* ═══════════════════════════════════════════════════════════════
   SCHOOL DETAIL — left-aligned hero variant
   ═══════════════════════════════════════════════════════════════ */
.school-hero {
  text-align: left !important;
  padding: 130px 24px 84px;
}
.school-hero-inner {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .school-hero { padding: 110px 16px 70px; }
  .school-hero-inner { padding: 0; }
}

.school-hero-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .4px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .2s, color .2s, transform .15s;
}
.school-hero-back:hover {
  background: rgba(33, 191, 225, .18);
  color: var(--gw-mint, #A8916E);
  transform: translateX(-2px);
}
.school-hero-back .material-symbols-outlined { font-size: 16px; }

.school-hero-h1 {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1.4px;
  line-height: 1.06;
  margin: 14px 0 16px;
  max-width: 920px;
}

.school-hero-sub {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  max-width: 760px;
  margin: 0;
}
.school-hero-sub .material-symbols-outlined {
  font-size: 20px;
  color: var(--gw-mint, #A8916E);
  margin-top: 1px;
}

.school-hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.school-hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: rgba(255, 255, 255, .82);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  letter-spacing: .2px;
}
.school-hero-tag strong { color: #fff; font-weight: 800; }
.school-hero-tag .material-symbols-outlined {
  font-size: 16px;
  color: var(--gw-mint, #A8916E);
}
.school-hero-tag--mint {
  background: rgba(33, 191, 225, .14);
  border-color: rgba(33, 191, 225, .32);
  color: #ffffff;
}
.school-hero-tag--mint .material-symbols-outlined { color: var(--gw-mint, #A8916E); }

/* Stats row — left-aligned, separated by vertical rules, single line on wide screens */
.school-hero-stats {
  display: flex; flex-wrap: wrap;
  margin-top: 32px;
  gap: 0;
}
.school-hero-stat {
  padding: 0 22px;
  position: relative;
}
.school-hero-stat:first-child { padding-left: 0; }
.school-hero-stat + .school-hero-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: rgba(255, 255, 255, .14);
}
.school-hero-stat .v {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.school-hero-stat .l {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .school-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 12px;
    margin-top: 26px;
  }
  .school-hero-stat { padding: 0; }
  .school-hero-stat + .school-hero-stat::before { display: none; }
}

/* Pull the inner page content closer to the hero (cancel any spurious top margin) */
.school-detail-main { background: var(--gw-bg, #f8fafc); }


/* ═══════════════════════════════════════════════════════════════
   SCHOOL DETAIL — SECTIONS BELOW HERO
   Infrastructure stats · About prose · Active Requirements ·
   Updates · Documents · FAQ
   ═══════════════════════════════════════════════════════════════ */

/* Generic section spacing + heading styles */
.school-section {
  display: flex; flex-direction: column;
  gap: 32px;
  margin-top: 72px;
}
.school-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.school-section-h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.15;
  color: var(--gw-navy, #35405B);
  margin: 12px 0 8px;
}
.school-section-h2--sm { font-size: clamp(20px, 2.2vw, 26px); }
.school-section-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gw-muted, #7987a1);
  max-width: 620px;
  margin: 0;
}
.school-section-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .14);
  color: var(--gw-navy, #35405B);
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase;
}
.school-section-pill .material-symbols-outlined {
  font-size: 14px;
  color: var(--gw-teal, #21BFE1);
}

/* ── Infrastructure 6-card strip ───────────────────────── */
.infra-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 980px) { .infra-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .infra-stats { grid-template-columns: repeat(2, 1fr); } }
.infra-stat {
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 16px;
  padding: 18px 14px 16px;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(53, 64, 91, .04);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.infra-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(53, 64, 91, .1);
  border-color: var(--gw-teal, #21BFE1);
}
.infra-stat-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(33, 191, 225, .18), rgba(33, 191, 225, .12));
  color: var(--gw-navy, #35405B);
}
.infra-stat-icon .material-symbols-outlined { font-size: 22px; }
.infra-stat-value {
  font-size: 16px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.2px;
  line-height: 1;
}
.infra-stat-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gw-muted, #7987a1);
}
.infra-stat--good .infra-stat-value { color: #0d9488; }
.infra-stat--good .infra-stat-icon {
  background: linear-gradient(135deg, rgba(33, 191, 225, .32), rgba(33, 191, 225, .14));
  color: #0d9488;
}
.infra-stat--bad .infra-stat-value { color: #dc2626; }
.infra-stat--bad .infra-stat-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, .15), rgba(239, 68, 68, .08));
  color: #dc2626;
}

/* ── About school description ───────────────────────────── */
.school-about {
  display: flex; flex-direction: column;
  gap: 14px;
  align-self: center;
}
.school-about-h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.2;
  color: var(--gw-navy, #35405B);
  margin: 6px 0 4px;
}
.school-about-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gw-text, #425072);
}
.school-about-body p { margin: 0 0 18px; }
.school-about-body p:last-child { margin-bottom: 0; }

/* ── Need cards (Active Requirements grid) ─────────────── */
[data-tgw-card-grid] {
  /* Use brand styling on the existing markup without changing PHP */
}
[data-tgw-card-grid] > article {
  border: 1px solid var(--gw-card-border, #dee2ef) !important;
  border-radius: 20px !important;
  background: #fff !important;
  padding: 18px !important;
  box-shadow: 0 6px 18px rgba(53, 64, 91, .05) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
[data-tgw-card-grid] > article:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(53, 64, 91, .1) !important;
  border-color: var(--gw-teal, #21BFE1) !important;
}
[data-tgw-card-grid] > article > div:first-child { border-radius: 14px !important; }
[data-tgw-card-grid] > article > div:first-child img { height: 170px !important; }
/* Style the donate button as a brand pill */
[data-tgw-card-grid] a.gw-donate-btn {
  background: linear-gradient(135deg, var(--gw-navy, #35405B), var(--gw-navy-2, #425072)) !important;
  border-radius: 999px !important;
  letter-spacing: .5px !important;
  font-size: 11px !important;
  padding: 13px 16px !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
}
[data-tgw-card-grid] a.gw-donate-btn:hover {
  background: linear-gradient(135deg, var(--gw-teal, #21BFE1), #21BFE1) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(33, 191, 225, .35);
}
[data-tgw-card-grid] button:disabled {
  background: linear-gradient(135deg, #94a3b8, #64748b) !important;
  border-radius: 999px !important;
  letter-spacing: .5px !important;
}

/* "Funded" stat card variant */
[data-tgw-card-grid] > article div[style*="background:#A8916E"] {
  background: linear-gradient(90deg, var(--gw-teal, #21BFE1), var(--gw-mint, #A8916E)) !important;
}

/* "View all N items" pill */
[data-tgw-view-all] {
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1)) !important;
  color: var(--gw-navy, #35405B) !important;
  padding: 14px 28px !important;
  box-shadow: 0 12px 28px rgba(33, 191, 225, .35) !important;
  border-radius: 999px !important;
}
[data-tgw-view-all]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(33, 191, 225, .5) !important;
}

/* ── Updates grid (quarterly update cards) ─────────────── */
#updates .grid > article {
  border-radius: 20px !important;
  border: 1px solid var(--gw-card-border, #dee2ef) !important;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(53, 64, 91, .05) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
#updates .grid > article:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(53, 64, 91, .1) !important;
  border-color: var(--gw-teal, #21BFE1) !important;
}
#updates .grid > article > div:first-child > img { transition: transform .5s ease; }
#updates .grid > article:hover > div:first-child > img { transform: scale(1.04); }

/* ── Documents & FAQ split ─────────────────────────────── */
.school-doc-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 72px;
  padding-top: 16px;
}
@media (max-width: 980px) { .school-doc-faq-grid { grid-template-columns: 1fr; gap: 56px; } }

.school-doc-col, .school-faq-col {
  display: flex; flex-direction: column;
  gap: 10px;
}

.school-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 10px;
}
@media (max-width: 520px) { .school-doc-grid { grid-template-columns: 1fr; } }
.school-doc-card {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 20px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(53, 64, 91, .04);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.school-doc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(53, 64, 91, .1);
  border-color: var(--gw-teal, #21BFE1);
}
.school-doc-card-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gw-navy, #35405B), var(--gw-navy-2, #425072));
  color: #fff;
  box-shadow: 0 8px 20px rgba(53, 64, 91, .18);
}
.school-doc-card-icon .material-symbols-outlined { font-size: 24px; }
.school-doc-card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--gw-navy, #35405B);
  line-height: 1.3;
}
.school-doc-card-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  color: var(--gw-teal, #21BFE1);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.school-doc-card-meta .material-symbols-outlined { font-size: 13px; }

.school-faq-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.school-faq-item {
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(53, 64, 91, .04);
  transition: border-color .2s, box-shadow .2s;
}
.school-faq-item[open] {
  border-color: var(--gw-teal, #21BFE1);
  box-shadow: 0 14px 28px rgba(53, 64, 91, .08);
}
.school-faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: 18px 22px;
  gap: 14px;
  list-style: none;
}
.school-faq-item summary::-webkit-details-marker { display: none; }
.school-faq-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.1px;
  line-height: 1.4;
}
.school-faq-chev {
  font-size: 22px;
  color: var(--gw-muted, #7987a1);
  transition: transform .25s, color .2s;
  flex-shrink: 0;
}
.school-faq-item[open] .school-faq-chev {
  transform: rotate(180deg);
  color: var(--gw-teal, #21BFE1);
}
.school-faq-a {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gw-text, #425072);
}

/* ── Right-column dark impact card polish ──────────────── */
.school-detail-main main {
  /* placeholder for future detail-main targeted rules */
}


/* ═══════════════════════════════════════════════════════════════
   SCHOOL DETAIL v2 — white video card + dark updates slab
   ═══════════════════════════════════════════════════════════════ */

/* ── Video + About: white "slab" card ─────────────────── */
.school-video-section {
  background: #ffffff;
  border-radius: 32px;
  padding: 56px 48px;
  margin-top: 64px;
  border: 1px solid var(--gw-card-border, #dee2ef);
  box-shadow: 0 18px 50px rgba(53, 64, 91, .05);
}
.school-video-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .school-video-inner { grid-template-columns: 1fr; gap: 32px; }
  .school-video-section { padding: 40px 28px; }
}
.school-video-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background: #35405B;
  box-shadow: 0 28px 60px rgba(53, 64, 91, .22);
}
.school-video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.school-video-cover {
  position: absolute; inset: 0;
  cursor: pointer;
  z-index: 2;
  transition: opacity .3s ease;
}
.school-video-cover.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.school-video-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.school-video-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(53, 64, 91, .35) 0%, rgba(53, 64, 91, .6) 100%);
}
.school-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1));
  color: var(--gw-navy, #35405B);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 0 0 rgba(33, 191, 225, .4);
  transition: transform .2s, box-shadow .3s;
}
.school-video-cover:hover .school-video-play,
.school-video-cover:focus-visible .school-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 14px rgba(33, 191, 225, .25);
}
.school-video-play .material-symbols-outlined {
  font-size: 44px;
  font-variation-settings: 'FILL' 1;
  margin-left: 5px;
}
.school-video-label {
  position: absolute;
  bottom: 32px;
  left: 50%; transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(53, 64, 91, .55);
  backdrop-filter: blur(6px);
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.school-video-cover--static { cursor: default; }
.school-video-soon-badge {
  position: absolute;
  top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(53, 64, 91, .85);
  color: rgba(255, 255, 255, .92);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase;
  z-index: 2;
}
.school-video-soon-badge .material-symbols-outlined {
  font-size: 14px;
  color: var(--gw-mint, #A8916E);
}
.school-video-soon-caption {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;
}
.school-video-soon-caption p {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
  background: rgba(53, 64, 91, .55);
  backdrop-filter: blur(8px);
  padding: 14px 16px;
  border-radius: 14px;
  margin: 0;
}
.school-video-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, .45);
  text-align: center;
}
.school-video-empty .material-symbols-outlined { font-size: 56px; }
.school-video-empty div {
  font-size: 12px; font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Updates: dark navy slab ───────────────────────────── */
.school-updates-section {
  position: relative;
  margin-top: 72px;
  padding: 56px 40px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--gw-navy-3, #35405B), var(--gw-navy, #35405B) 55%, var(--gw-navy-2, #425072));
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(53, 64, 91, .25);
}
@media (max-width: 820px) {
  .school-updates-section { padding: 40px 24px; border-radius: 24px; }
}
.school-updates-deco {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.school-updates-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.school-updates-blob--a {
  top: -120px; right: -120px;
  width: 340px; height: 340px;
  background: rgba(33, 191, 225, .14);
}
.school-updates-blob--b {
  bottom: -120px; left: -100px;
  width: 280px; height: 280px;
  background: rgba(33, 191, 225, .12);
}
.school-updates-inner {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  gap: 32px;
}

/* Dark-context overrides for shared head pieces */
.school-section-head--dark { align-items: flex-end; }
.school-section-h2--light {
  color: #ffffff !important;
}
.school-section-sub--light {
  color: rgba(255, 255, 255, .68) !important;
  max-width: 620px;
}
.school-section-pill--dark {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .14);
}
.school-section-pill--dark .material-symbols-outlined {
  color: var(--gw-mint, #A8916E) !important;
}

/* Eyebrow on dark bg */
.eyebrow-mint-on-dark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(33, 191, 225, .14);
  color: var(--gw-mint, #A8916E);
  border: 1px solid rgba(33, 191, 225, .26);
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase;
}
.eyebrow-mint-on-dark .material-symbols-outlined {
  font-size: 14px;
  color: var(--gw-mint, #A8916E);
}

/* Update cards: lift on dark bg with mint accents */
#updates .grid > article {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .18) !important;
}
#updates .grid > article:hover {
  border-color: var(--gw-mint, #A8916E) !important;
  box-shadow: 0 28px 56px rgba(33, 191, 225, .18), 0 12px 28px rgba(0, 0, 0, .22) !important;
}


/* ═══════════════════════════════════════════════════════════════
   NEED CARDS — redesigned active-requirement tiles
   Overrides the older [data-tgw-card-grid] > article scope.
   ═══════════════════════════════════════════════════════════════ */

/* Reset the earlier override scoped to articles inside the grid */
[data-tgw-card-grid] > article.need-card {
  background: #ffffff !important;
  border: 1px solid var(--gw-card-border, #dee2ef) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  box-shadow: 0 8px 22px rgba(53, 64, 91, .05) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-tgw-card-grid] > article.need-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 56px rgba(53, 64, 91, .12) !important;
  border-color: var(--gw-teal, #21BFE1) !important;
}
.need-card.is-hidden { display: none !important; }

.need-card--funded {
  background: #fafdfe !important;
  border-color: rgba(34, 197, 94, .26) !important;
}
.need-card--funded .need-card-cover img {
  filter: saturate(.65) brightness(1.05);
  opacity: .85;
}

/* Cover */
.need-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #eef2f7;
  overflow: hidden;
}
.need-card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.need-card:hover .need-card-cover img { transform: scale(1.05); }
.need-card-cover-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #97a3b9;
}
.need-card-cover-empty .material-symbols-outlined { font-size: 56px; }
.need-card-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(53, 64, 91, 0) 60%, rgba(53, 64, 91, .25) 100%);
  pointer-events: none;
}

/* Type tag (top-left) */
.need-card-tag {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.need-card-tag .material-symbols-outlined { font-size: 13px; }
.need-card-tag--solo {
  background: rgba(33, 191, 225, .94);
  color: var(--gw-navy, #35405B);
}
.need-card-tag--group {
  background: rgba(255, 255, 255, .94);
  color: var(--gw-navy, #35405B);
  box-shadow: 0 2px 6px rgba(53, 64, 91, .12);
}

/* Funded tag (top-right) */
.need-card-funded-tag {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .96);
  color: #ffffff;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.need-card-funded-tag .material-symbols-outlined { font-size: 13px; }

/* Body */
.need-card-body {
  padding: 18px 18px 18px;
  display: flex; flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.need-card-cat {
  font-size: 10px; font-weight: 800;
  color: var(--gw-teal, #21BFE1);
  letter-spacing: .8px;
  text-transform: uppercase;
}
.need-card-title {
  font-size: 16.5px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 0;
}
.need-card-unit {
  font-size: 11.5px; font-weight: 700;
  color: var(--gw-muted, #7987a1);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-top: -2px;
}

/* Price chip */
.need-card-price {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: 6px;
  padding: 11px 14px;
  background: linear-gradient(90deg, rgba(33, 191, 225, .14), rgba(33, 191, 225, .04));
  border: 1px solid rgba(33, 191, 225, .28);
  border-radius: 12px;
}
.need-card-price-v {
  font-size: 20px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.need-card-price-u {
  font-size: 12px; color: var(--gw-text, #425072); font-weight: 700;
}

/* Progress */
.need-card-progress {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.need-card-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
}
.need-card-progress-raised {
  color: var(--gw-text, #425072); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.need-card-progress-pct {
  color: var(--gw-navy, #35405B); font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.need-card-progress-track {
  height: 7px; width: 100%;
  background: #eef1f7;
  border-radius: 999px;
  overflow: hidden;
}
.need-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gw-teal, #21BFE1), var(--gw-mint, #A8916E));
  border-radius: 999px;
  transition: width .6s ease;
}
.need-card-progress-donors {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  color: var(--gw-muted, #7987a1);
  letter-spacing: -.1px;
  margin-top: 2px;
}
.need-card-progress-donors .material-symbols-outlined {
  font-size: 14px;
  color: var(--gw-teal, #21BFE1);
}

/* Sponsor attribution panel */
.need-card-sponsor {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(33, 191, 225, .16), rgba(33, 191, 225, .06));
  border-radius: 12px;
  border-left: 3px solid var(--gw-teal, #21BFE1);
  margin-top: 4px;
}
.need-card-sponsor-l {
  font-size: 10px; font-weight: 800;
  color: var(--gw-teal, #21BFE1);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.need-card-sponsor-v {
  font-size: 14px; font-weight: 700;
  color: var(--gw-navy, #35405B);
  font-style: italic;
  letter-spacing: -.2px;
}

/* "1 sponsor needed" pill */
.need-card-callout {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: #f4f6fa;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  color: var(--gw-text, #425072);
  align-self: flex-start;
  letter-spacing: .2px;
  margin-top: 4px;
}
.need-card-callout .material-symbols-outlined {
  font-size: 14px;
  color: var(--gw-teal, #21BFE1);
}

/* Foot — CTA + optional brochure */
.need-card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.need-card-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--gw-navy, #35405B);
  color: #ffffff;
  font-size: 12px; font-weight: 800;
  letter-spacing: .4px;
  text-decoration: none;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background .25s, transform .15s, box-shadow .2s;
}
.need-card-cta:hover {
  background: linear-gradient(135deg, var(--gw-teal, #21BFE1), #21BFE1);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(33, 191, 225, .35);
}
.need-card-cta:hover .material-symbols-outlined { transform: translateX(2px); }
.need-card-cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform .2s;
}
.need-card-cta--sponsor {
  background: linear-gradient(135deg, var(--gw-mint, #A8916E), var(--gw-teal, #21BFE1));
  color: var(--gw-navy, #35405B);
}
.need-card-cta--sponsor:hover {
  background: linear-gradient(135deg, var(--gw-teal, #21BFE1), #21BFE1);
  color: var(--gw-navy, #35405B);
}
.need-card-cta--funded {
  background: rgba(22, 101, 52, .18);
  color: #14532d;
  border: 1px solid rgba(22, 101, 52, .4);
  cursor: not-allowed;
}
.need-card-cta--funded .material-symbols-outlined { color: #14532d; }
.need-card-cta--funded:hover {
  background: rgba(34, 197, 94, .12);
  transform: none;
  box-shadow: none;
}

.need-card-brochure {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(220, 38, 38, .07);
  color: #dc2626;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .4px;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid rgba(220, 38, 38, .18);
  transition: background .2s, transform .15s;
}
.need-card-brochure:hover {
  background: rgba(220, 38, 38, .12);
  transform: translateY(-1px);
}
.need-card-brochure .material-symbols-outlined {
  font-size: 14px;
  color: #dc2626;
}

/* Funded card variations on actions row */
.need-card--funded .need-card-cat { color: #16a34a; }
.need-card--funded .need-card-price {
  background: linear-gradient(90deg, rgba(34, 197, 94, .12), rgba(34, 197, 94, .03));
  border-color: rgba(34, 197, 94, .26);
}


/* ═══════════════════════════════════════════════════════════════
   404 PAGE — brand hero + helpful link cards
   ═══════════════════════════════════════════════════════════════ */
.e404-hero {
  padding: 130px 24px 100px;
  text-align: center;
}
.e404-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 5;
}
.e404-big {
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -8px;
  background: linear-gradient(135deg, rgba(33, 191, 225, .9), rgba(33, 191, 225, .6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 14px 0 6px;
  text-shadow: 0 18px 60px rgba(33, 191, 225, .12);
}
.e404-hero .page-hero-h1 {
  margin-top: 8px;
  text-align: center;
}
.e404-hero .page-hero-sub {
  text-align: center;
  margin: 18px auto 0;
  max-width: 640px;
}
.e404-actions {
  display: inline-flex; flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}
.e404-actions .btn-hero {
  padding: 14px 24px;
  font-size: 13px;
}
.e404-actions .btn-hero .material-symbols-outlined { font-size: 17px; }

/* Helpful links section */
.e404-helpful {
  background: #ffffff;
  padding: 80px 24px 100px;
}
.e404-helpful-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.e404-h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--gw-navy, #35405B);
  margin: 12px 0 36px;
}
.e404-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  text-align: left;
  margin-bottom: 36px;
}
.e404-link-card {
  background: #ffffff;
  border: 1px solid var(--gw-card-border, #dee2ef);
  border-radius: 20px;
  padding: 28px 26px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 22px rgba(53, 64, 91, .05);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.e404-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(53, 64, 91, .12);
  border-color: var(--gw-teal, #21BFE1);
}
.e404-link-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gw-navy, #35405B), var(--gw-navy-2, #425072));
  color: #fff;
  box-shadow: 0 10px 24px rgba(53, 64, 91, .18);
}
.e404-link-icon .material-symbols-outlined { font-size: 24px; }
.e404-link-card h3 {
  font-size: 18px; font-weight: 800;
  color: var(--gw-navy, #35405B);
  letter-spacing: -.3px;
  margin: 4px 0 0;
}
.e404-link-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gw-muted, #7987a1);
  margin: 0;
  flex-grow: 1;
}
.e404-link-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800;
  color: var(--gw-teal, #21BFE1);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-top: 4px;
  transition: gap .2s, color .2s;
}
.e404-link-cta .material-symbols-outlined { font-size: 14px; transition: transform .2s; }
.e404-link-card:hover .e404-link-cta { color: var(--gw-navy, #35405B); gap: 8px; }
.e404-link-card:hover .e404-link-cta .material-symbols-outlined { transform: translateX(2px); }

.e404-help-line {
  font-size: 14px;
  color: var(--gw-muted, #7987a1);
  margin: 0;
}
.e404-help-line a {
  color: var(--gw-navy, #35405B);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid var(--gw-mint, #A8916E);
  padding-bottom: 1px;
}
.e404-help-line a:hover {
  color: var(--gw-teal, #21BFE1);
  border-bottom-color: var(--gw-teal, #21BFE1);
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL: no hover-underlines anywhere. Wipes browser default,
   any a:hover{text-decoration:underline} rules earlier in the file,
   and any Tailwind hover:underline utility usage in markup.
   ───────────────────────────────────────────────────────────── */
*:hover, a:hover, a:focus, button:hover, button:focus,
.hover\:underline:hover { text-decoration: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   NSTA POLISH — 2026-05-20
   Editorial-feel overrides layered on top of the cwd brand system.
   Goal: airier whitespace, stronger H1 hierarchy, cyan pill tags,
   flatter cards, sticky top nav. To roll back, delete this block.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --nsta-font-sans: -apple-system, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nsta-h1: clamp(2.4rem, 4vw + 1rem, 3.6rem);
  --nsta-h2: clamp(1.6rem, 2vw + 1rem, 2.25rem);
  --nsta-h3: 1.375rem;
  --nsta-deck: 1.125rem;
}

body, .container, .section { font-family: var(--nsta-font-sans); }

.hero-v2 .hero-h1,
.section h1, .section .h1, .section-h1, h1.section-h1 {
  font-size: var(--nsta-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.section h2, .section .h2, .section-h2 {
  font-size: var(--nsta-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section h3, .section .h3 {
  font-size: var(--nsta-h3);
  font-weight: 700;
  line-height: 1.25;
}
.hero-sub, .section-deck, .lead {
  font-size: var(--nsta-deck);
  line-height: 1.5;
  color: var(--text-muted);
}

/* NSTA tag pills — cyan on white, uppercase, small */
.nsta-pill, .tag-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 4px;
  background: #21BFE1;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.nsta-pill--ghost  { background: transparent; color: #0275A3; box-shadow: inset 0 0 0 1px #0275A3; }
.nsta-pill--orange { background: #D56935; color: #fff; }
.nsta-pill--navy   { background: #35405B; color: #fff; }
.nsta-pill--tan    { background: #A8916E; color: #fff; }

/* Flatten cards — drop heavy shadows, square corners */
.card, .tgw-card, .need-card, .school-card,
.cms-card, .cms-tile {
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
}
.card:hover, .tgw-card:hover, .need-card:hover, .school-card:hover,
.cms-card:hover, .cms-tile:hover {
  border-color: #35405B !important;
  box-shadow: 0 2px 8px rgba(53,64,91,.06) !important;
  transform: none !important;
}

/* Sticky top header */
.tgw-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 1px 0 rgba(53,64,91,.08), 0 2px 8px rgba(53,64,91,.04) !important;
}
.tgw-top-ad-zone   { padding: 12px 16px 10px !important; background: #ffffff !important; }
.tgw-header-main   { padding-top: 14px !important; padding-bottom: 12px !important; }
.tgw-header-brand img { width: 44px !important; height: 44px !important; }
.tgw-header-brand span { font-size: 22px !important; }
.tgw-top-ad-placeholder {
  border-color: rgba(53,64,91,.15) !important;
  background: #ffffff !important;
  color: #35405B !important;
  aspect-ratio: auto !important;
  max-height: 100px !important;
}

/* Hero — editorial CTAs, square corners */
.hero-v2 .hero-cta-row .btn,
.hero-cta-row .btn-primary,
.hero-cta-row .btn-secondary,
.hero-v2 .btn {
  border-radius: 4px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 24px;
}
.hero-v2 .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(33,191,225,.18);
  color: #21BFE1;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-v2 .hero-stats {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 24px;
  margin-top: 32px;
}

/* Buttons — square */
.btn, .btn-primary, .btn-secondary, .btn-tertiary,
.cms-btn, .cta-btn {
  border-radius: 4px !important;
}

/* Quicklinks + main nav — square-pill restraint */
.tgw-qlink { border-radius: 3px !important; font-weight: 600; letter-spacing: 0.02em; }
.tgw-qlink.is-active { background: #0275A3 !important; color: #fff !important; }
.tgw-main-nav-link { border-radius: 3px !important; letter-spacing: 0.02em; }
.tgw-main-nav-link.is-active { background: #21BFE1 !important; color: #35405B !important; }

/* Footer — thin orange top accent (nsta-style) */
.tgw-footer-v2,
.site-footer {
  border-top: 3px solid #D56935;
}

/* Generic section spacing — airier */
.section { padding: 64px 0; }
@media (max-width: 768px) { .section { padding: 40px 0; } }


/* ═══════════════════════════════════════════════════════════════════
   NSTA EDITORIAL HERO — variant cms-hero--bg-editorial
   2026-05-20. White bg, 2-col layout, side image.
   ═══════════════════════════════════════════════════════════════════ */

.cms-hero--bg-editorial {
  background: #ffffff !important;
  color: #35405B !important;
  padding: 88px 0 72px !important;
  position: relative;
  overflow: visible !important;
  min-height: 0 !important;
}
.cms-hero--bg-editorial .hero-v2-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.cms-hero--bg-editorial .hero-v2-content {
  color: #35405B !important;
  text-align: left !important;
  max-width: none !important;
}
.cms-hero--bg-editorial .hero-h1,
.cms-hero--bg-editorial .hero-h1--inspiring {
  color: #35405B !important;
  font-size: clamp(2.6rem, 4.2vw + 1rem, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  margin: 18px 0 0 !important;
  text-shadow: none !important;
}
.cms-hero--bg-editorial .hero-h1-script {
  color: #D56935 !important;
  font-style: normal !important;
}
.cms-hero--bg-editorial .hero-sub,
.cms-hero--bg-editorial .hero-sub--inspiring {
  color: #5c6370 !important;
  font-size: 1.2rem !important;
  line-height: 1.55 !important;
  max-width: 560px !important;
  margin: 20px 0 0 !important;
  text-shadow: none !important;
}
.cms-hero--bg-editorial .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(33,191,225,.14) !important;
  color: #0275A3 !important;
  padding: 5px 12px !important;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
  font-weight: 700;
  border: 0 !important;
}
.cms-hero--bg-editorial .hero-eyebrow .material-symbols-outlined {
  font-size: 16px;
  color: #0275A3 !important;
}
.cms-hero--bg-editorial .hero-cta-row {
  margin-top: 32px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start !important;
}
.cms-hero--bg-editorial .hero-cta-row a,
.cms-hero--bg-editorial .hero-cta-row .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border-radius: 4px !important;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.cms-hero--bg-editorial .hero-cta-row a:first-child,
.cms-hero--bg-editorial .hero-cta-row .cta-primary,
.cms-hero--bg-editorial .hero-cta-row .btn-primary {
  background: #D56935 !important;
  color: #ffffff !important;
  border: 1.5px solid #D56935 !important;
  box-shadow: 0 4px 12px rgba(213,105,53,.25) !important;
}
.cms-hero--bg-editorial .hero-cta-row a:first-child:hover,
.cms-hero--bg-editorial .hero-cta-row .cta-primary:hover,
.cms-hero--bg-editorial .hero-cta-row .btn-primary:hover {
  background: #b85728 !important;
  border-color: #b85728 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.cms-hero--bg-editorial .hero-cta-row a:nth-child(2),
.cms-hero--bg-editorial .hero-cta-row .cta-secondary,
.cms-hero--bg-editorial .hero-cta-row .btn-secondary {
  background: #ffffff !important;
  color: #35405B !important;
  border: 1.5px solid #35405B !important;
}
.cms-hero--bg-editorial .hero-cta-row a:nth-child(2):hover,
.cms-hero--bg-editorial .hero-cta-row .cta-secondary:hover,
.cms-hero--bg-editorial .hero-cta-row .btn-secondary:hover {
  background: #35405B !important;
  color: #ffffff !important;
}

.cms-hero--bg-editorial .hero-illustration {
  position: relative;
  width: 100%;
}
.cms-hero--bg-editorial .hero-illustration img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 20px 48px rgba(53,64,91,.12);
  display: block;
}
.cms-hero--bg-editorial .hero-illustration__accent {
  position: absolute;
  z-index: -1;
  border-radius: 6px;
}
.cms-hero--bg-editorial .hero-illustration__accent--orange {
  width: 88px;
  height: 88px;
  background: #D56935;
  bottom: -22px;
  right: -22px;
  opacity: 0.85;
}
.cms-hero--bg-editorial .hero-illustration__accent--cyan {
  width: 64px;
  height: 64px;
  background: #21BFE1;
  top: -20px;
  left: -20px;
  opacity: 0.85;
}

.cms-hero--bg-editorial .hero-stats {
  margin-top: 48px !important;
  border-top: 1px solid #e5e7eb !important;
  padding-top: 28px !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 640px;
  background: transparent !important;
}
.cms-hero--bg-editorial .hero-stat {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.cms-hero--bg-editorial .hero-stat-value {
  color: #35405B !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  display: block;
  line-height: 1;
}
.cms-hero--bg-editorial .hero-stat-label {
  color: #5c6370 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 6px;
  display: block;
}

@media (max-width: 900px) {
  .cms-hero--bg-editorial { padding: 56px 0 48px !important; }
  .cms-hero--bg-editorial .hero-v2-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cms-hero--bg-editorial .hero-illustration { order: 2; max-width: 480px; margin: 0 auto; }
  .cms-hero--bg-editorial .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .cms-hero--bg-editorial .hero-h1 { font-size: clamp(2.2rem, 8vw, 2.8rem) !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   NSTA SIMPLE SECTIONS — 2026-05-20
   Strip decoration from interior sections: blobs, glows, dots,
   marquee animations, heavy shadows, gradient backgrounds, reveal
   transitions. Goal: every section reads like a calm nsta.org block.
   Hero (cms-hero--bg-editorial) keeps its scoped accents.
   ═══════════════════════════════════════════════════════════════════ */

/* Kill decorative shape/blob/dot/glow elements site-wide */
.kalam-bg-blob,
.kalam-grid-dots,
.kalam-portrait-glow,
.kalam-card-glow,
.partners-blob,
.tgw-footer-blob,
.tgw-footer-grid-dots,
.tgw-footer-wave,
.hero-shape,
.hero-grid-dots,
section .hero-shape,
section .hero-grid-dots {
  display: none !important;
}

/* Disable reveal animations on interior sections */
.cms-page .tgw-reveal,
.cms-page section .tgw-reveal,
.tgw-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: opacity 0.18s ease !important;
}

/* Stop the partners marquee — static row */
.partners-marquee,
.partners-marquee *,
.partners-marquee-track {
  animation: none !important;
  transform: none !important;
}
.partners-section {
  background: #ffffff !important;
  padding: 56px 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Kalam section — flat editorial */
.kalam-section {
  background: #ffffff !important;
  padding: 64px 0 !important;
}
.kalam-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.kalam-portrait,
.kalam-portrait-wrap {
  border-radius: 6px !important;
  box-shadow: none !important;
}
.kalam-portrait-badge {
  background: #D56935 !important;
  color: #ffffff !important;
  border-radius: 3px !important;
}
.kalam-headline {
  color: #35405B !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}
.kalam-body,
.kalam-body-text {
  color: #5c6370 !important;
  font-style: normal !important;
}
.kalam-cta {
  border-radius: 4px !important;
}

/* CMS card grid — white, flat, square */
.cms-cards--bg-soft { background: #ffffff !important; }
.cms-cards--bg-navy { background: #fafbfc !important; }
.cms-cards--bg-navy .section-h2,
.cms-cards--bg-navy .section-h2 em,
.cms-cards--bg-navy .section-h2 .hero-h1-script,
.cms-cards--bg-navy .section-lead {
  color: #35405B !important;
}
.cms-cards--bg-navy .cms-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #35405B !important;
}
.cms-card,
.cms-cards--style-bordered .cms-card,
.cms-cards--style-shadow .cms-card,
.cms-cards--style-lift .cms-card,
.cms-cards--hover-glow .cms-card,
.cms-cards--hover-lift .cms-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  transform: none !important;
  padding: 24px !important;
}
.cms-card:hover,
.cms-cards--hover-glow .cms-card:hover,
.cms-cards--hover-lift .cms-card:hover {
  border-color: #35405B !important;
  box-shadow: 0 2px 8px rgba(53,64,91,.06) !important;
  transform: none !important;
}
.cms-card-icon {
  color: #0275A3 !important;
  font-size: 24px !important;
}
.cms-cards--icon-mint .cms-card-icon { color: #A8916E !important; }
.cms-cards--icon-sky  .cms-card-icon { color: #21BFE1 !important; }
.cms-cards--icon-navy .cms-card-icon { color: #35405B !important; }

/* Split section — soft photo */
.cms-split-media img,
.cms-split-video {
  border-radius: 6px !important;
  box-shadow: 0 4px 14px rgba(53,64,91,.08) !important;
}
.cms-split--bg-soft { background: #ffffff !important; }
.cms-split--bg-navy {
  background: #fafbfc !important;
  color: #35405B !important;
}
.cms-split--bg-navy .section-h2,
.cms-split--bg-navy .section-lead { color: #35405B !important; }

/* Donors band — flat */
.cms-donors-band {
  background: #fafbfc !important;
  color: #35405B !important;
  padding: 56px 0 !important;
}
.cms-donors-band .section-h2,
.cms-donors-band .section-h2 .hero-h1-script,
.cms-donors-band .section-lead,
.cms-donors-band p,
.cms-donors-band li { color: #35405B !important; }
.cms-donors-band .hero-h1-script { color: #D56935 !important; }

/* Schools carousel — flat cards */
.cms-schools,
.cms-schools--bg-light {
  background: #ffffff !important;
}
.cms-schools .cms-card,
.cms-schools .school-card {
  border-radius: 4px !important;
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
}

/* Icon tiles — flat */
.cms-tile {
  border-radius: 3px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}
.cms-tile-icon { color: #0275A3 !important; }
.cms-tiles--bg-navy {
  background: #fafbfc !important;
}
.cms-tiles--bg-navy .cms-tiles-heading,
.cms-tiles--bg-navy .cms-tile-label { color: #35405B !important; }

/* Stories grid — flat */
.cms-stories,
.stories-section {
  background: #ffffff !important;
  padding: 56px 0 !important;
}

/* How-it-works — flat */
.how-section {
  background: #ffffff !important;
  padding: 56px 0 !important;
}
.how-timeline,
.how-timeline-step,
.timeline-step,
.cms-how-step {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Section headings — editorial */
.cms-page .section-h2,
.section-h2,
.section-h2-center {
  color: #35405B !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15;
}
.cms-page .section-h2 em,
.cms-page .section-h2 .hero-h1-script,
.section-h2 .hero-h1-script {
  color: #D56935 !important;
  font-style: normal !important;
}
.cms-page .section-lead,
.section-lead,
.section-lead-center {
  color: #5c6370 !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  max-width: 720px;
}
.section-lead-center { margin-left: auto; margin-right: auto; }

/* Eyebrows — uniform nsta-pill style */
.cms-page .eyebrow,
.cms-page .eyebrow-mint,
.cms-page .eyebrow-sky,
.cms-page .eyebrow-mint-on-dark,
.eyebrow,
.eyebrow-mint,
.eyebrow-sky {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px !important;
  background: rgba(33,191,225,.14) !important;
  color: #0275A3 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  box-shadow: none !important;
}
.eyebrow-mint-on-dark {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}

/* Footer — solid navy, no wave, no blobs */
.tgw-footer-v2 {
  background: #35405B !important;
}
.tgw-footer-bg { display: none !important; }

/* Tighten generic section padding for airy nsta feel */
.section-v2 {
  padding: 64px 0 !important;
}
@media (max-width: 768px) {
  .section-v2, .partners-section, .kalam-section, .how-section, .cms-stories, .stories-section, .cms-donors-band {
    padding: 40px 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   NSTA BUTTONS — 2026-05-20
   Unified button system: square corners, bold weight, restrained
   padding, palette-only fills. Overrides .btn, .btn-hero, .cta-,
   .tgw-btn-*, and section-specific CTA classes site-wide.
   ═══════════════════════════════════════════════════════════════════ */

.btn,
.btn-hero,
.cms-btn,
.cta-btn,
.tgw-btn-join,
.tgw-btn-signin,
.kalam-cta,
.school-card-cta,
button.tgw-btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-ghost,
.btn-hero-primary,
.btn-hero-secondary,
.btn-hero-ghost,
.btn-hero-ghost-navy,
.btn-error {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: auto !important;
  padding: 12px 22px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  box-shadow: none !important;
  white-space: nowrap;
}

/* PRIMARY — orange filled */
.btn.primary,
.btn-primary,
.btn-hero-primary,
.tgw-btn-join,
.cta-btn-primary,
.kalam-cta,
.school-card-cta {
  background: #D56935 !important;
  color: #ffffff !important;
  border-color: #D56935 !important;
}
.btn.primary:hover,
.btn-primary:hover,
.btn-hero-primary:hover,
.tgw-btn-join:hover,
.cta-btn-primary:hover,
.kalam-cta:hover,
.school-card-cta:hover {
  background: #b85728 !important;
  border-color: #b85728 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(213,105,53,.22) !important;
}

/* SECONDARY — navy outline (filled-on-hover) */
.btn-secondary,
.btn-hero-secondary,
.btn-hero-ghost-navy {
  background: #ffffff !important;
  color: #35405B !important;
  border-color: #35405B !important;
}
.btn-secondary:hover,
.btn-hero-secondary:hover,
.btn-hero-ghost-navy:hover {
  background: #35405B !important;
  color: #ffffff !important;
  border-color: #35405B !important;
  text-decoration: none !important;
}

/* TERTIARY / GHOST — text-only, subtle hover */
.btn.ghost,
.btn-ghost,
.btn-tertiary,
.btn-hero-ghost,
.tgw-btn-signin {
  background: transparent !important;
  color: #35405B !important;
  border-color: transparent !important;
}
.btn.ghost:hover,
.btn-ghost:hover,
.btn-tertiary:hover,
.btn-hero-ghost:hover,
.tgw-btn-signin:hover {
  background: rgba(53,64,91,.06) !important;
  color: #35405B !important;
  text-decoration: none !important;
}

/* INFO / LINK style — strong blue */
.btn-info,
.cta-btn-info {
  background: #0275A3 !important;
  color: #ffffff !important;
  border-color: #0275A3 !important;
}
.btn-info:hover,
.cta-btn-info:hover {
  background: #015d83 !important;
  border-color: #015d83 !important;
}

/* DANGER */
.btn-error,
.btn-danger {
  background: #d92626 !important;
  color: #ffffff !important;
  border-color: #d92626 !important;
}
.btn-error:hover,
.btn-danger:hover {
  background: #b71c1c !important;
  border-color: #b71c1c !important;
}

/* SIZES */
.btn.small, .btn-sm, .btn--sm {
  padding: 8px 14px !important;
  font-size: 13px !important;
}
.btn.large, .btn-lg, .btn--lg {
  padding: 14px 28px !important;
  font-size: 15px !important;
}
.btn.block, .btn--block {
  width: 100% !important;
  display: flex !important;
}

/* Inline icon sizing inside buttons */
.btn .material-symbols-outlined,
.btn-hero .material-symbols-outlined,
.btn-primary .material-symbols-outlined,
.btn-secondary .material-symbols-outlined,
.btn-tertiary .material-symbols-outlined,
.kalam-cta .material-symbols-outlined,
.school-card-cta .material-symbols-outlined,
.tgw-btn-join .material-symbols-outlined,
.tgw-btn-signin .material-symbols-outlined {
  font-size: 16px !important;
}

/* Disabled state */
.btn:disabled,
.btn[disabled],
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Focus-visible — accessible ring */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-tertiary:focus-visible,
.btn-hero:focus-visible,
.tgw-btn-join:focus-visible,
.tgw-btn-signin:focus-visible {
  outline: 2px solid #21BFE1 !important;
  outline-offset: 2px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   NSTA SCROLL HEADER — 2026-05-20
   Banner (ad zone) collapses on scroll; header tightens to a slim nav
   bar (mirrors nsta.org behaviour). Requires nsta-header.js to toggle
   .is-scrolled on .tgw-site-header.
   ═══════════════════════════════════════════════════════════════════ */

.tgw-site-header .tgw-top-ad-zone {
  overflow: hidden !important;
  max-height: 140px;
  opacity: 1;
  transition: max-height 0.28s ease, padding 0.28s ease, opacity 0.18s ease !important;
}
.tgw-site-header.is-scrolled .tgw-top-ad-zone {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

.tgw-site-header .tgw-header-main {
  transition: padding 0.22s ease !important;
}
.tgw-site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(53,64,91,.10) !important;
}
.tgw-site-header.is-scrolled .tgw-header-main {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.tgw-site-header.is-scrolled .tgw-header-brand img {
  width: 36px !important;
  height: 36px !important;
  transition: width 0.22s ease, height 0.22s ease !important;
}
.tgw-site-header.is-scrolled .tgw-header-brand span {
  font-size: 18px !important;
  transition: font-size 0.22s ease !important;
}
.tgw-site-header .tgw-header-brand img,
.tgw-site-header .tgw-header-brand span {
  transition: width 0.22s ease, height 0.22s ease, font-size 0.22s ease !important;
}

/* Main nav (the navy strip below the logo row) — slim down too */
.tgw-site-header .tgw-main-nav {
  transition: min-height 0.22s ease, padding 0.22s ease !important;
}
.tgw-site-header.is-scrolled .tgw-main-nav {
  min-height: 42px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   DARKCARDS variant — Specialized Learning Kits etc.
   White section, dark-navy cards w/ cyan icons, white text.
   ═══════════════════════════════════════════════════════════════════ */
.cms-cards--bg-darkcards { background: #ffffff !important; }
.cms-cards--bg-darkcards .section-h2,
.cms-cards--bg-darkcards .section-lead { color: #35405B !important; }
.cms-cards--bg-darkcards .section-h2 em,
.cms-cards--bg-darkcards .section-h2 .hero-h1-script { color: #D56935 !important; }

.cms-cards--bg-darkcards .cms-card {
  background: #35405B !important;
  border: 1px solid #35405B !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}
.cms-cards--bg-darkcards .cms-card:hover {
  background: #425072 !important;
  border-color: #425072 !important;
  box-shadow: 0 8px 20px rgba(53,64,91,.22) !important;
  transform: translateY(-2px);
}
.cms-cards--bg-darkcards .cms-card-title { color: #ffffff !important; }
.cms-cards--bg-darkcards .cms-card-body  { color: rgba(255,255,255,.84) !important; }
.cms-cards--bg-darkcards .cms-card-icon  { color: #21BFE1 !important; }


/* ═══════════════════════════════════════════════════════════════════
   DONORS BAND — dark navy + standard buttons
   FOOTER — light navy upper (newsletter + trust), dark navy link grid
   2026-05-20
   ═══════════════════════════════════════════════════════════════════ */

/* ── DONORS BAND ───────────────────────────────────────── */
.cms-donors-band {
  background: #35405B !important;
  color: #ffffff !important;
  padding: 72px 0 !important;
}
.cms-donors-band h2,
.cms-donors-band h3,
.cms-donors-band .font-display,
.cms-donors-band .font-h2 {
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.cms-donors-band p,
.cms-donors-band .font-body-lg,
.cms-donors-band .text-body-md,
.cms-donors-band .text-secondary-fixed,
.cms-donors-band .text-secondary-fixed-dim {
  color: rgba(255,255,255,.86) !important;
}
.cms-donors-band .uppercase,
.cms-donors-band .font-label-md {
  color: rgba(255,255,255,.78) !important;
}

/* Eyebrow on dark band */
.cms-donors-band span.text-secondary-fixed-dim.uppercase {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border-radius: 4px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Right-side glass card stays subtle */
.cms-donors-band .bg-surface\/5,
.cms-donors-band [class*="bg-surface/5"] {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.cms-donors-band [class*="bg-white/5"] {
  background: rgba(255,255,255,.06) !important;
}
.cms-donors-band .bg-secondary {
  background: #21BFE1 !important;
}

/* Left CTA — standard primary orange (had inline style background:#A8916E) */
.cms-donors-band a[style*="background:#A8916E"],
.cms-donors-band a[style*="background: #A8916E"],
.cms-donors-band a[style*="#A8916E"] {
  background: #D56935 !important;
  color: #ffffff !important;
  border: 1.5px solid #D56935 !important;
  border-radius: 4px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: 0 4px 12px rgba(213,105,53,.22) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.cms-donors-band a[style*="#A8916E"]:hover {
  background: #b85728 !important;
  border-color: #b85728 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}

/* Right CTA — secondary on dark (white outline) */
.cms-donors-band .secondary-pill {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 4px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
.cms-donors-band .secondary-pill:hover {
  background: #ffffff !important;
  color: #35405B !important;
  border-color: #ffffff !important;
}

/* Stat numbers in right card */
.cms-donors-band .text-h2.font-bold.text-secondary-fixed-dim {
  color: #21BFE1 !important;
  font-size: 1.6rem;
  font-weight: 800;
}

/* ── FOOTER — light navy upper + dark navy lower ──────── */
.tgw-footer-v2 {
  background: #425072 !important; /* light navy — top portion */
}

/* Newsletter strip */
.tgw-footer-v2 .tgw-footer-newsletter {
  background: transparent !important;
  padding: 56px 32px 28px !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.tgw-footer-v2 .tgw-footer-news-headline {
  color: #ffffff !important;
  font-weight: 800;
}
.tgw-footer-v2 .tgw-footer-news-sub {
  color: rgba(255,255,255,.82) !important;
}
.tgw-footer-v2 .tgw-footer-news-form input[type="email"] {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
}
.tgw-footer-v2 .tgw-footer-news-form input[type="email"]::placeholder {
  color: rgba(255,255,255,.55) !important;
}
.tgw-footer-v2 .tgw-footer-news-form button {
  background: #D56935 !important;
  color: #ffffff !important;
  border: 1.5px solid #D56935 !important;
  border-radius: 4px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(213,105,53,.22) !important;
}
.tgw-footer-v2 .tgw-footer-news-form button:hover {
  background: #b85728 !important;
  border-color: #b85728 !important;
}

/* Trust badges */
.tgw-footer-v2 .tgw-footer-trust {
  background: transparent !important;
  padding: 36px 32px 56px !important;
}
.tgw-footer-v2 .tgw-footer-trust-ico {
  color: #21BFE1 !important;
}
.tgw-footer-v2 .tgw-footer-trust-ico .material-symbols-outlined {
  color: #21BFE1 !important;
}
.tgw-footer-v2 .tgw-footer-trust-title {
  color: #ffffff !important;
  font-weight: 700;
}
.tgw-footer-v2 .tgw-footer-trust-body {
  color: rgba(255,255,255,.78) !important;
}

/* Link grid — dark navy for visual separation */
.tgw-footer-v2 .tgw-footer-cols {
  background: #35405B !important;
  padding: 56px 32px 40px !important;
  margin: 0 -32px !important;
  position: relative;
}
.tgw-footer-v2 .tgw-footer-cols::before {
  content: '';
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: 0;
  bottom: 0;
  background: #35405B;
  z-index: -1;
}

/* Footer bottom (copyright) — stay on dark navy */
.tgw-footer-v2 .tgw-footer-bottom,
.tgw-footer-v2 .tgw-footer-legal {
  background: #35405B !important;
  padding: 20px 32px !important;
  margin: 0 -32px !important;
  position: relative;
  color: rgba(255,255,255,.72) !important;
}

/* Footer success state (when subscribed) */
.tgw-footer-v2 .tgw-footer-news-success {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  border-radius: 4px;
  padding: 12px 16px;
}


/* ═══════════════════════════════════════════════════════════════════
   STICKY HEADER FIX — 2026-05-20
   Banner scrolls away with the page (normal flow).
   ONLY the logo+nav row (.tgw-header-main) stays stuck to top.
   Overrides earlier whole-header sticky + ad-zone collapse rules.
   ═══════════════════════════════════════════════════════════════════ */

/* RESET — whole-header sticky from earlier polish */
.tgw-site-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* RESET — ad-zone collapse-on-scroll. Banner now scrolls normally. */
.tgw-site-header .tgw-top-ad-zone,
.tgw-site-header.is-scrolled .tgw-top-ad-zone {
  position: static !important;
  max-height: none !important;
  opacity: 1 !important;
  padding: 28px 16px 26px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* STICKY — only the logo + nav + actions row */
.tgw-site-header .tgw-header-main {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(53,64,91,.10) !important;
  border-bottom: 1px solid rgba(53,64,91,.08) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 9vw !important;
  transition: padding 0.22s ease, box-shadow 0.22s ease !important;
}

/* On scroll: tighten the sticky bar and shrink the brand a touch */
.tgw-site-header.is-scrolled .tgw-header-main {
  padding: 8px 9vw !important;
  box-shadow: 0 4px 18px rgba(53,64,91,.14) !important;
}
.tgw-site-header.is-scrolled .tgw-header-brand img {
  width: 36px !important;
  height: 36px !important;
  transition: width 0.22s ease, height 0.22s ease !important;
}
.tgw-site-header.is-scrolled .tgw-header-brand span {
  font-size: 18px !important;
  transition: font-size 0.22s ease !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FIXES — 2026-05-20
   - Schools section: spacing between heading/lede and cards
   - Kalam Foundation Partner: dark navy background
   ═══════════════════════════════════════════════════════════════════ */

/* Universal section heading spacing — guarantees breathing room */
.cms-page section .section-h2,
.cms-page section .section-h2-center {
  margin: 0 0 16px !important;
}
.cms-page section .section-lead,
.cms-page section .section-lead-center {
  margin: 0 auto 40px !important;
}

/* SCHOOLS — explicit grid spacing */
.cms-schools .schools-grid,
.cms-schools .cms-cards-grid,
.cms-schools .cms-schools-grid {
  margin-top: 40px !important;
}

/* KALAM section — DARK NAVY band */
.kalam-section {
  background: #35405B !important;
  color: #ffffff !important;
  padding: 72px 0 !important;
}
.kalam-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.kalam-headline {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
}
.kalam-body,
.kalam-body-text,
.kalam-section p {
  color: rgba(255,255,255,.86) !important;
  font-style: normal !important;
}
.kalam-section .eyebrow,
.kalam-section [class*="eyebrow"] {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
.kalam-section .eyebrow .material-symbols-outlined,
.kalam-section [class*="eyebrow"] .material-symbols-outlined {
  color: #ffffff !important;
}

/* Kalam card — translucent on dark */
.kalam-card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.kalam-card .kalam-headline,
.kalam-card .kalam-body { color: #ffffff !important; }

/* Portrait area */
.kalam-portrait,
.kalam-portrait-wrap {
  border-radius: 6px !important;
  box-shadow: none !important;
}
.kalam-portrait-badge {
  background: #D56935 !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  font-weight: 700;
}

/* Kalam CTA — on dark navy, use white-outline secondary */
.kalam-section .kalam-cta {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 4px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.kalam-section .kalam-cta:hover {
  background: #ffffff !important;
  color: #35405B !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
}

/* ═══ NAV BUTTON HOVER — white background ═══ */
.tgw-qlink:hover,
.tgw-main-nav-link:hover {
  background: #ffffff !important;
  color: #35405B !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px rgba(53,64,91,.18), 0 1px 3px rgba(53,64,91,.06) !important;
}
.tgw-qlink.is-active:hover,
.tgw-main-nav-link.is-active:hover {
  background: #ffffff !important;
  color: #35405B !important;
  box-shadow: inset 0 0 0 1px #0275A3, 0 1px 3px rgba(53,64,91,.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SUBSCRIBE FORM — square NSTA-style (override the original pill)
   ═══════════════════════════════════════════════════════════════════ */
.tgw-footer-news-form {
  display: flex !important;
  gap: 8px !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.tgw-footer-news-form:focus-within {
  border-color: transparent !important;
  box-shadow: none !important;
}
.tgw-footer-news-form input,
.tgw-footer-news-form input[type="email"] {
  flex: 1 !important;
  height: 44px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: 14px !important;
}
.tgw-footer-news-form input::placeholder {
  color: rgba(255,255,255,.55) !important;
}
.tgw-footer-news-form input:focus {
  outline: none !important;
  border-color: #ffffff !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: none !important;
}
.tgw-footer-news-form button {
  height: 44px !important;
  padding: 0 22px !important;
  background: #D56935 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid #D56935 !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(213,105,53,.22) !important;
  transition: background-color 0.18s ease, transform 0.18s ease !important;
  filter: none !important;
}
.tgw-footer-news-form button:hover {
  background: #b85728 !important;
  background-image: none !important;
  border-color: #b85728 !important;
  filter: none !important;
  transform: translateY(-1px);
}
.tgw-footer-news-success {
  border-radius: 4px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: #ffffff !important;
}

/* ═══ ALL STORIES button + VIDEO container — match new UI ═══ */
.stories-view-all {
  background: transparent !important;
  color: #35405B !important;
  border: 1.5px solid #35405B !important;
  border-radius: 4px !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.stories-view-all:hover {
  background: #35405B !important;
  color: #ffffff !important;
  border-color: #35405B !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(53,64,91,.18) !important;
  text-decoration: none !important;
}
.stories-view-all .material-symbols-outlined {
  font-size: 16px !important;
}

/* Videos + split media — flat, square, palette colors */
.cms-page .cms-split-media img,
.cms-page .cms-split-video,
.cms-split-media img,
.cms-split-video {
  border-radius: 6px !important;
  box-shadow: 0 4px 14px rgba(53,64,91,.10) !important;
}
.cms-page .cms-split-video,
.cms-split-video {
  background: #35405B !important;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.cms-split-video iframe,
.cms-split-video video {
  border-radius: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STICKY HEADER — JS-DRIVEN FIXED MODE
   The earlier position:sticky on .tgw-header-main only stuck within
   the header's own height (parent containing block). Switching to
   position:fixed once user scrolls past the banner. A JS-added spacer
   prevents layout jump.
   ═══════════════════════════════════════════════════════════════════ */

/* Default state — normal flow, white bar with shadow */
.tgw-site-header .tgw-header-main {
  position: relative !important;
  top: auto !important;
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(53,64,91,.10) !important;
  border-bottom: 1px solid rgba(53,64,91,.08) !important;
  padding: 14px 9vw !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 100;
  transition: padding 0.22s ease, box-shadow 0.22s ease !important;
}

/* Scrolled state — pin to viewport top */
.tgw-site-header.is-scrolled .tgw-header-main {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  padding: 8px 9vw !important;
  box-shadow: 0 4px 18px rgba(53,64,91,.14) !important;
  animation: tgwNavSlideDown 0.22s ease;
}
.tgw-site-header.is-scrolled .tgw-header-brand img {
  width: 36px !important;
  height: 36px !important;
  transition: width 0.22s ease, height 0.22s ease !important;
}
.tgw-site-header.is-scrolled .tgw-header-brand span {
  font-size: 18px !important;
  transition: font-size 0.22s ease !important;
}

/* Spacer — JS sets height, only visible (block) when scrolled */
.tgw-header-main-spacer {
  display: none;
}
.tgw-site-header.is-scrolled + * .tgw-header-main-spacer,
.tgw-site-header.is-scrolled .tgw-header-main-spacer {
  display: block !important;
}

@keyframes tgwNavSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADING ALIGNMENT FIX — 2026-05-20
   Restore center alignment for section heads + lede, override the
   margin:0 0 16px rule that was killing margin:auto centering.
   ═══════════════════════════════════════════════════════════════════ */

/* Center variants — text + block centered */
.cms-page section .section-h2-center,
section .section-h2-center,
.section-h2-center {
  text-align: center !important;
  margin: 0 auto 16px !important;
  max-width: 720px !important;
}
.cms-page section .section-lead-center,
section .section-lead-center,
.section-lead-center {
  text-align: center !important;
  margin: 0 auto 40px !important;
  max-width: 720px !important;
}

/* Default section-h2 — also center by default (nsta-style) */
.cms-page section .section-h2,
section .section-h2 {
  text-align: center !important;
  margin: 0 auto 16px !important;
  max-width: 720px !important;
}
.cms-page section .section-lead,
section .section-lead {
  text-align: center !important;
  margin: 0 auto 40px !important;
  max-width: 720px !important;
}

/* EXCEPTION — split sections keep editorial left-aligned text */
.cms-split-copy .section-h2,
.cms-split-copy .section-lead,
.cms-split-copy .section-h2-center,
.cms-split-copy .section-lead-center {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* EXCEPTION — donors band keeps editorial left-aligned text */
.cms-donors-band h2,
.cms-donors-band h3,
.cms-donors-band p {
  text-align: left !important;
}

/* EXCEPTION — hero keeps editorial left-aligned text */
.cms-hero--bg-editorial .hero-h1,
.cms-hero--bg-editorial .hero-sub,
.cms-hero--bg-editorial .hero-eyebrow {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Center the eyebrow chip above center-aligned section heads */
.cms-page section > .section-v2-inner > .tgw-reveal,
.cms-page .section-v2-inner > .tgw-reveal:first-child {
  text-align: center;
}

/* ═══ STORIES HEADER — center heading group, button below ═══ */
.stories-section .stories-header {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 24px !important;
}
.stories-section .stories-header .lead-col {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}
.stories-section .stories-header .lead-col .eyebrow,
.stories-section .stories-header .lead-col .eyebrow-mint {
  align-self: center;
}
.stories-section .stories-header .stories-view-all {
  align-self: center !important;
}

/* same treatment for stories_section gradient bg — replace with white */
.stories-section {
  background: #ffffff !important;
}

/* ═══ FOOTER — unified DARK navy, no broken split ═══ */
.tgw-footer-v2,
.tgw-footer-v2 .tgw-footer-newsletter,
.tgw-footer-v2 .tgw-footer-trust,
.tgw-footer-v2 .tgw-footer-cols,
.tgw-footer-v2 .tgw-footer-bottom,
.tgw-footer-v2 .tgw-footer-legal {
  background: #35405B !important;
}

/* Kill the negative-margin extension trick + ::before pseudos that
   created the inconsistent strips */
.tgw-footer-v2 .tgw-footer-cols,
.tgw-footer-v2 .tgw-footer-bottom,
.tgw-footer-v2 .tgw-footer-legal {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.tgw-footer-v2 .tgw-footer-cols::before { display: none !important; }

/* Subtle inner divider between trust and link grid for separation */
.tgw-footer-v2 .tgw-footer-cols {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 48px !important;
}
.tgw-footer-v2 .tgw-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px !important;
}

/* ═══ LOGO ASPECT FIX — preserve banner ratio (473x103) ═══ */
.tgw-header-brand img {
  width: auto !important;
  height: 44px !important;
  max-width: 220px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.tgw-site-header.is-scrolled .tgw-header-brand img {
  width: auto !important;
  height: 36px !important;
  max-width: 180px !important;
}
.tgw-footer-logo img {
  width: auto !important;
  height: 40px !important;
  max-width: 200px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ═══ HIDE SITE NAME (logo already contains brand text) ═══ */
.tgw-header-brand span,
.tgw-footer-logo span,
.tgw-app-header__brand-text {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STICKY — also pin .tgw-main-nav row (was the missing piece)
   ═══════════════════════════════════════════════════════════════════ */
.tgw-site-header.is-scrolled .tgw-main-nav {
  position: fixed !important;
  top: var(--tgw-nav-top, 64px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  animation: tgwNavSlideDown 0.22s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER LAYOUT SWAP — quicklinks to RIGHT, language to LEFT
   ═══════════════════════════════════════════════════════════════════ */
.tgw-header-main {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}
.tgw-header-main .tgw-header-brand {
  order: 1 !important;
  margin-right: 8px !important;
}
.tgw-header-main [data-tgw-lang-menu] {
  order: 2 !important;
}
.tgw-header-main .tgw-header-quicklinks {
  order: 3 !important;
  margin-left: auto !important;
}
.tgw-header-main .tgw-header-actions {
  order: 4 !important;
  margin-left: 0 !important;
}
/* The language pill is currently nested inside .tgw-header-actions.
   Use flex order on the actions container so the language pill is
   the LAST child of actions (it will visually move to the right of
   bell/user). Then we counter-move it to LEFT via grid magic below.
   But cleanest: pull language out of actions via CSS order isn't
   cross-container — we need to keep language inside actions and just
   reorder within actions to put language LAST. */
.tgw-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.tgw-header-actions [data-tgw-lang-menu] {
  order: 99 !important; /* push language to end of actions = far right */
}

/* ═══ NAVY NAV BAR — active link = white pill, navy text ═══ */
.tgw-main-nav-link.is-active,
.tgw-main-nav .tgw-main-nav-link.is-active {
  background: #ffffff !important;
  color: #35405B !important;
  border-radius: 3px !important;
}
.tgw-main-nav-link.is-active:hover {
  background: #ffffff !important;
  color: #35405B !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}

/* ═══ PARTNER LOGOS — show in actual color, no hover effect ═══ */
.partners-item,
.partners-item:hover {
  transform: none !important;
  transition: none !important;
}
.partners-item img,
.partners-item:hover img {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* ═══ ANCHOR SCROLL — offset for sticky header rows ═══ */
.cms-page section[id],
section[id] {
  scroll-margin-top: 120px;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-HERO — apply editorial (image + text 2-col) style
   Matches cms-hero--bg-editorial on home/school/donor.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero,
.page-hero.page-hero--alt {
  background: #ffffff !important;
  color: #35405B !important;
  padding: 88px 0 72px !important;
  position: relative;
  overflow: hidden;
  min-height: 0 !important;
}
.page-hero .page-hero-bg,
.page-hero .page-hero-blob,
.page-hero .page-hero-grid-dots,
.page-hero .page-hero-wave {
  display: none !important;
}

.page-hero-inner {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  position: relative;
}
.page-hero-inner > * {
  grid-column: 1 !important;
}
.page-hero-inner::after {
  content: '';
  grid-column: 2 !important;
  grid-row: 1 / span 99 !important;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background-image: url('/cwdpro/assets/img/hero-school.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(53,64,91,.10);
  align-self: stretch;
}

.page-hero-h1 {
  color: #35405B !important;
  font-size: clamp(2.4rem, 4.2vw + 1rem, 3.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  text-align: left !important;
  margin: 18px 0 0 !important;
  text-shadow: none !important;
}
.page-hero-h1 .hero-h1-accent,
.page-hero-h1 .hero-h1-script {
  color: #D56935 !important;
  background: none !important;
  -webkit-text-fill-color: #D56935 !important;
  filter: none !important;
  font-style: normal !important;
}
.page-hero-sub {
  color: #5c6370 !important;
  font-size: 1.15rem !important;
  line-height: 1.55 !important;
  max-width: 560px !important;
  margin: 20px 0 0 !important;
  text-align: left !important;
  text-shadow: none !important;
}
.page-hero .hero-eyebrow {
  background: rgba(33,191,225,.14) !important;
  color: #0275A3 !important;
  border: 0 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.page-hero .hero-eyebrow .material-symbols-outlined {
  color: #0275A3 !important;
  font-size: 16px;
}

.page-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  border-top: 1px solid #e5e7eb !important;
  padding-top: 24px !important;
  margin-top: 32px !important;
  max-width: 580px;
  background: transparent !important;
}
.page-hero-stat {
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.page-hero-stat .v {
  color: #35405B !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  display: block;
  line-height: 1;
}
.page-hero-stat .l {
  color: #5c6370 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .page-hero,
  .page-hero.page-hero--alt { padding: 56px 0 48px !important; }
  .page-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .page-hero-inner::after {
    min-height: 240px;
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 99;
  }
  .page-hero-h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
  .page-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   NEWSLETTER STRIP — visually separated from footer, LIGHT NAVY bg
   Sits above the dark navy footer with a clear color break.
   ═══════════════════════════════════════════════════════════════════ */
.tgw-footer-v2 .tgw-footer-newsletter {
  background: #425072 !important;
  padding: 56px 0 !important;
  margin: 0 0 0 0 !important;
  position: relative;
  border: 0 !important;
  border-bottom: 0 !important;
}
/* Full-viewport-width light-navy band via pseudo-element */
.tgw-footer-v2 .tgw-footer-newsletter::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 100vw;
  background: #425072;
  z-index: -1;
}
.tgw-footer-v2 .tgw-footer-newsletter > * {
  position: relative;
  z-index: 1;
}
.tgw-footer-v2 .tgw-footer-newsletter {
  max-width: 1180px;
  margin: 0 auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Inner content layout — text left + form right */
.tgw-footer-v2 .tgw-footer-newsletter {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
}
@media (max-width: 768px) {
  .tgw-footer-v2 .tgw-footer-newsletter {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Make trust section follow newsletter on the dark band with a clear break */
.tgw-footer-v2 .tgw-footer-trust {
  padding-top: 56px !important;
  border-top: 0 !important;
}

/* Text styles on the light-navy band */
.tgw-footer-v2 .tgw-footer-newsletter .eyebrow,
.tgw-footer-v2 .tgw-footer-newsletter [class*="eyebrow"] {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.tgw-footer-v2 .tgw-footer-news-headline {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem) !important;
  margin-top: 12px !important;
  letter-spacing: -0.015em;
}
.tgw-footer-v2 .tgw-footer-news-sub {
  color: rgba(255,255,255,.86) !important;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ═══ Remove the 96px top gap that shows dark navy above newsletter ═══ */
.tgw-footer-v2 .tgw-footer-inner {
  padding-top: 0 !important;
  max-width: none !important;
}

/* ═══ Remove dividers between trust → cols and below trust badges ═══ */
.tgw-footer-v2 .tgw-footer-trust {
  border-bottom: 0 !important;
}
.tgw-footer-v2 .tgw-footer-cols {
  border-top: 0 !important;
}
.tgw-footer-v2 .tgw-footer-bottom {
  border-top: 0 !important;
}

/* ═══ Restore one divider — above the copyright bar only ═══ */
.tgw-footer-v2 .tgw-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding-top: 22px !important;
}

/* ═══ Make the copyright-bar divider visible ═══ */
.tgw-footer-v2 .tgw-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.22) !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}

/* ═══ Add divider between trust badges and link grid ═══ */
.tgw-footer-v2 .tgw-footer-trust {
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
  padding-bottom: 48px !important;
  margin-bottom: 24px !important;
}

/* ═══ Lighter dividers (more visible white) ═══ */
.tgw-footer-v2 .tgw-footer-trust { border-bottom-color: rgba(255,255,255,.40) !important; }
.tgw-footer-v2 .tgw-footer-bottom { border-top-color: rgba(255,255,255,.40) !important; }

/* ═══ Dim dividers ═══ */
.tgw-footer-v2 .tgw-footer-trust { border-bottom-color: rgba(255,255,255,.18) !important; }
.tgw-footer-v2 .tgw-footer-bottom { border-top-color: rgba(255,255,255,.18) !important; }

.tgw-footer-v2 .tgw-footer-trust { border-bottom-color: rgba(255,255,255,.12) !important; }
.tgw-footer-v2 .tgw-footer-bottom { border-top-color: rgba(255,255,255,.12) !important; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE-HERO — REVERT broken 2-col + image overrides
   Keep white bg + clean type, drop the forced grid and ::after image.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero,
.page-hero.page-hero--alt {
  background: #ffffff !important;
  color: #35405B !important;
  padding: 72px 24px 56px !important;
  position: relative;
  overflow: hidden;
}
.page-hero .page-hero-bg,
.page-hero .page-hero-blob,
.page-hero .page-hero-grid-dots,
.page-hero .page-hero-wave {
  display: none !important;
}
.page-hero-inner {
  display: block !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.page-hero-inner > * {
  grid-column: auto !important;
}
.page-hero-inner::after {
  content: none !important;
  display: none !important;
}
.page-hero-h1 {
  text-align: center !important;
  color: #35405B !important;
  font-size: clamp(2rem, 3.5vw + 1rem, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 14px auto 0 !important;
  max-width: 820px;
}
.page-hero-h1 .hero-h1-accent,
.page-hero-h1 .hero-h1-script {
  color: #D56935 !important;
  background: none !important;
  -webkit-text-fill-color: #D56935 !important;
}
.page-hero-sub {
  text-align: center !important;
  color: #5c6370 !important;
  font-size: 1.05rem !important;
  margin: 16px auto 0 !important;
  max-width: 680px;
}
.page-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  border-top: 1px solid #e5e7eb !important;
  padding-top: 24px !important;
  margin: 32px auto 0 !important;
  max-width: 760px;
}
.page-hero-stat { text-align: center !important; }
.page-hero-stat .v { color: #35405B !important; font-size: 1.7rem; font-weight: 800; display: block; }
.page-hero-stat .l { color: #5c6370 !important; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 768px) {
  .page-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══ TIMELINE — kill the container border that's clipping step circles ═══ */
.how-timeline,
.how-section .how-timeline {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.how-step,
.how-timeline-step,
.timeline-step,
.cms-how-step {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-HERO — TRUE 2-col editorial (text left, image right)
   PHP now renders <div class="page-hero-side"><img class="page-hero-image">
   alongside .page-hero-inner. Use grid on .page-hero directly.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero,
.page-hero.page-hero--alt {
  background: #ffffff !important;
  color: #35405B !important;
  padding: 72px 32px !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  position: relative;
  overflow: visible !important;
}
.page-hero > .page-hero-inner {
  display: block !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: 1 !important;
}
.page-hero > .page-hero-side {
  grid-column: 2 !important;
  position: relative;
}
.page-hero-image {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(53,64,91,.10);
  display: block;
}

.page-hero-h1 {
  text-align: left !important;
  font-size: clamp(2.2rem, 4vw + 1rem, 3.4rem) !important;
}
.page-hero-sub {
  text-align: left !important;
  margin-left: 0 !important;
}
.page-hero .hero-eyebrow {
  display: inline-flex !important;
}
.page-hero-stats {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 580px;
}
.page-hero-stat { text-align: left !important; }

@media (max-width: 900px) {
  .page-hero,
  .page-hero.page-hero--alt {
    grid-template-columns: 1fr !important;
    padding: 48px 24px !important;
    gap: 32px !important;
  }
  .page-hero > .page-hero-side {
    grid-column: 1 !important;
    order: 2;
  }
  .page-hero-image { max-height: 280px; }
}

/* ═══ HOW IT WORKS — light gray bg (was pure white) ═══ */
.how-section {
  background: #f6f7f9 !important;
}

/* ═══ PAGE-HERO image accent blocks (orange + cyan) — match homepage ═══ */
.page-hero > .page-hero-side {
  position: relative;
  isolation: isolate;
}
.page-hero > .page-hero-side::before {
  content: '';
  position: absolute;
  top: -22px;
  left: -22px;
  width: 72px;
  height: 72px;
  background: #21BFE1;
  border-radius: 6px;
  z-index: -1;
  opacity: 0.9;
}
.page-hero > .page-hero-side::after {
  content: '';
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 92px;
  height: 92px;
  background: #D56935;
  border-radius: 6px;
  z-index: -1;
  opacity: 0.9;
}
.page-hero {
  overflow: visible !important;
}
@media (max-width: 900px) {
  .page-hero > .page-hero-side::before,
  .page-hero > .page-hero-side::after { display: none; }
}

/* ═══ PAGE-HERO — FULL-WIDTH white, inner content constrained to 1280px ═══ */
.page-hero,
.page-hero.page-hero--alt {
  max-width: none !important;
  margin: 0 !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  padding-left: max(32px, calc(50% - 640px)) !important;
  padding-right: max(32px, calc(50% - 640px)) !important;
}
@media (max-width: 900px) {
  .page-hero,
  .page-hero.page-hero--alt {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT US — flatten Empowering section + 4 cards (NSTA-style)
   ═══════════════════════════════════════════════════════════════════ */
.about-intro {
  background: #ffffff !important;
  padding: 72px 32px !important;
}
.about-intro-grid {
  max-width: 1280px;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
  text-align: center !important;
}
.about-intro-text {
  max-width: 880px;
  margin: 0 auto !important;
  text-align: center !important;
}
.about-h1 {
  color: #35405B !important;
  font-size: clamp(1.8rem, 3vw + 1rem, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 12px 0 18px !important;
}
.about-h1-accent {
  color: #D56935 !important;
  background: none !important;
  -webkit-text-fill-color: #D56935 !important;
}
.about-intro-text p {
  color: #5c6370 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}
.about-intro-text .eyebrow,
.about-intro-text .eyebrow-teal {
  background: rgba(33,191,225,.14) !important;
  color: #0275A3 !important;
  border: 0 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.about-buttons {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 28px !important;
  flex-wrap: wrap;
}
.about-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: none !important;
  border: 1.5px solid !important;
}
.about-buttons a:first-child {
  background: #D56935 !important;
  color: #fff !important;
  border-color: #D56935 !important;
  box-shadow: 0 4px 12px rgba(213,105,53,.22) !important;
}
.about-buttons a:first-child:hover {
  background: #b85728 !important;
  border-color: #b85728 !important;
}
.about-buttons a:nth-child(2) {
  background: #ffffff !important;
  color: #35405B !important;
  border-color: #35405B !important;
}
.about-buttons a:nth-child(2):hover {
  background: #35405B !important;
  color: #fff !important;
}

/* 4 feature cards — flat NSTA style */
.about-feature-grid {
  max-width: 1180px;
  margin: 56px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}
.about-feature,
.about-feature-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 28px 22px !important;
  text-align: left !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  transform: none !important;
}
.about-feature:hover,
.about-feature-card:hover {
  border-color: #35405B !important;
  box-shadow: 0 4px 14px rgba(53,64,91,.08) !important;
  transform: none !important;
}
.about-feature-card-deco {
  display: none !important;
}
.about-feature-icon,
.about-feature .material-symbols-outlined {
  font-size: 28px !important;
  color: #0275A3 !important;
  margin-bottom: 14px !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
}
.about-feature h3,
.about-feature-card h3,
.about-feature-card-title {
  color: #35405B !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em !important;
}
.about-feature p,
.about-feature-card p,
.about-feature-card-body {
  color: #5c6370 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .about-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .about-feature-grid { grid-template-columns: 1fr !important; }
}

/* ═══ ABOUT INTRO — darker bg (dark navy band) ═══ */
.about-intro {
  background: #35405B !important;
  color: #ffffff !important;
}
.about-intro .about-h1 {
  color: #ffffff !important;
}
.about-intro .about-h1-accent {
  color: #D56935 !important;
  -webkit-text-fill-color: #D56935 !important;
}
.about-intro .about-intro-text p,
.about-intro p {
  color: rgba(255,255,255,.86) !important;
}
.about-intro .about-intro-text p strong,
.about-intro p strong {
  color: #ffffff !important;
}
.about-intro .eyebrow,
.about-intro .eyebrow-teal,
.about-intro [class*="eyebrow"] {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
.about-intro .eyebrow .material-symbols-outlined,
.about-intro [class*="eyebrow"] .material-symbols-outlined {
  color: #ffffff !important;
}

/* Secondary CTA on dark bg → white outline */
.about-intro .about-buttons a:nth-child(2) {
  background: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.about-intro .about-buttons a:nth-child(2):hover {
  background: #ffffff !important;
  color: #35405B !important;
}

/* Feature cards stay light on dark — translucent */
.about-intro .about-feature,
.about-intro .about-feature-card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}
.about-intro .about-feature:hover,
.about-intro .about-feature-card:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow: none !important;
}
.about-intro .about-feature h3,
.about-intro .about-feature-card h3,
.about-intro .about-feature-card-title {
  color: #ffffff !important;
}
.about-intro .about-feature p,
.about-intro .about-feature-card p,
.about-intro .about-feature-card-body {
  color: rgba(255,255,255,.78) !important;
}
.about-intro .about-feature-icon,
.about-intro .about-feature .material-symbols-outlined {
  color: #21BFE1 !important;
}

/* ═══ ABOUT FEATURE GRID — break out with white bg (full-bleed) ═══ */
.about-intro .about-feature-grid {
  background: #ffffff !important;
  position: relative;
  margin: 56px 0 0 !important;
  padding: 56px 0 !important;
  z-index: 0;
}
.about-intro .about-feature-grid::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 100vw;
  background: #ffffff;
  z-index: -1;
}
.about-intro .about-feature-grid > * {
  position: relative;
  z-index: 1;
}
/* Cards revert to light-on-light styling now that bg is white */
.about-intro .about-feature-grid .about-feature,
.about-intro .about-feature-grid .about-feature-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #35405B !important;
}
.about-intro .about-feature-grid .about-feature h3,
.about-intro .about-feature-grid .about-feature-card h3,
.about-intro .about-feature-grid .about-feature-card-title {
  color: #35405B !important;
}
.about-intro .about-feature-grid .about-feature p,
.about-intro .about-feature-grid .about-feature-card p,
.about-intro .about-feature-grid .about-feature-card-body {
  color: #5c6370 !important;
}
.about-intro .about-feature-grid .about-feature:hover,
.about-intro .about-feature-grid .about-feature-card:hover {
  border-color: #35405B !important;
  box-shadow: 0 4px 14px rgba(53,64,91,.08) !important;
}
.about-intro .about-feature-grid .about-feature-icon,
.about-intro .about-feature-grid .about-feature .material-symbols-outlined {
  color: #0275A3 !important;
}

/* ═══ Logo — remove hover effects ═══ */
.tgw-header-brand,
.tgw-header-brand:hover,
.tgw-header-brand:focus {
  transform: none !important;
  text-decoration: none !important;
}
.tgw-header-brand img,
.tgw-header-brand:hover img {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.tgw-footer-logo,
.tgw-footer-logo:hover,
.tgw-footer-logo img,
.tgw-footer-logo:hover img {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ═══ ABOUT FEATURES — standalone full-width white section ═══ */
.about-features-section {
  background: #ffffff !important;
  padding: 72px 32px !important;
  width: 100%;
}
.about-features-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.about-features-section .about-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.about-features-section .about-feature {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 28px 22px !important;
  color: #35405B !important;
}
.about-features-section .about-feature:hover {
  border-color: #35405B !important;
  box-shadow: 0 4px 14px rgba(53,64,91,.08) !important;
}
.about-features-section .about-feature h3 { color: #35405B !important; }
.about-features-section .about-feature p { color: #5c6370 !important; font-size: 14px; line-height: 1.55; margin: 0; }
.about-features-section .about-feature-icon,
.about-features-section .about-feature .material-symbols-outlined {
  color: #0275A3 !important;
  font-size: 28px !important;
  margin-bottom: 14px !important;
  background: none !important;
}
@media (max-width: 900px) { .about-features-section .about-feature-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .about-features-section .about-feature-grid { grid-template-columns: 1fr !important; } }

/* ═══ HERO 'How it works' secondary button — make visible on white bg ═══ */
.cms-hero--bg-editorial .hero-cta-row a:not(:first-child),
.hero-cta-row .cta-secondary,
.hero-cta-row .btn-secondary,
.hero-cta-row .btn-hero-secondary,
.hero-cta-row .btn-hero-ghost-navy,
.hero-cta-row .btn-hero-ghost {
  background: #ffffff !important;
  color: #35405B !important;
  border: 1.5px solid #35405B !important;
  border-radius: 4px !important;
}
.cms-hero--bg-editorial .hero-cta-row a:not(:first-child):hover,
.hero-cta-row .cta-secondary:hover,
.hero-cta-row .btn-secondary:hover,
.hero-cta-row .btn-hero-secondary:hover,
.hero-cta-row .btn-hero-ghost-navy:hover,
.hero-cta-row .btn-hero-ghost:hover {
  background: #35405B !important;
  color: #ffffff !important;
}

/* ═══ Feature card icons — strip box, just icon ═══ */
.about-features-section .about-feature-icon,
.about-features-section .about-feature:nth-child(2) .about-feature-icon,
.about-features-section .about-feature:nth-child(3) .about-feature-icon,
.about-features-section .about-feature:nth-child(4) .about-feature-icon {
  width: auto !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #0275A3 !important;
  display: inline-block !important;
  margin-bottom: 14px !important;
}
.about-features-section .about-feature-icon .material-symbols-outlined {
  font-size: 30px !important;
  color: #0275A3 !important;
  background: none !important;
}

/* ═══ REGISTER PAGE — NSTA-style left aside ═══ */
.register-aside-nsta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 8px;
}
.register-aside-nsta .nsta-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.register-aside-nsta .nsta-pill .material-symbols-outlined {
  font-size: 14px;
  color: #ffffff;
}
.register-h1 {
  color: #35405B;
  font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.register-h1 .hero-h1-accent {
  color: #D56935 !important;
  -webkit-text-fill-color: #D56935 !important;
}
.register-lede {
  color: #5c6370;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
  max-width: 520px;
}
.register-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.register-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #35405B;
  font-size: 14px;
  line-height: 1.5;
}
.register-checklist li .material-symbols-outlined {
  color: #0275A3;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.register-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 20px;
  margin-top: 8px;
}
.register-stat-v {
  color: #35405B;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}
.register-stat-l {
  color: #5c6370;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 6px;
}

/* ═══ SCHOOL HERO — re-skin for editorial (white bg, dark text) ═══ */
.school-hero.page-hero {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}
.school-hero .school-hero-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
.school-hero .school-hero-h1 {
  color: #35405B !important;
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem) !important;
  letter-spacing: -0.025em !important;
}
.school-hero .school-hero-sub {
  color: #5c6370 !important;
  font-size: 1.05rem !important;
}
.school-hero .school-hero-sub .material-symbols-outlined {
  color: #0275A3 !important;
}
.school-hero .school-hero-back {
  background: rgba(53,64,91,.08) !important;
  border: 1px solid rgba(53,64,91,.14) !important;
  color: #35405B !important;
}
.school-hero .school-hero-back:hover {
  background: rgba(33,191,225,.18) !important;
  color: #0275A3 !important;
}
.school-hero .school-hero-tags {
  margin-top: 18px;
}
.school-hero .school-hero-tag {
  background: rgba(53,64,91,.06) !important;
  border: 1px solid rgba(53,64,91,.14) !important;
  color: #35405B !important;
}
.school-hero .school-hero-tag .material-symbols-outlined {
  color: #0275A3 !important;
}
.school-hero .school-hero-tag strong { color: #35405B !important; }
.school-hero .school-hero-tag--mint {
  background: rgba(33,191,225,.16) !important;
  border-color: rgba(33,191,225,.32) !important;
  color: #0275A3 !important;
}
.school-hero .school-hero-tag--mint .material-symbols-outlined { color: #0275A3 !important; }
.school-hero .school-hero-stats {
  margin-top: 32px !important;
  border-top: 1px solid #e5e7eb !important;
  padding-top: 24px !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 640px;
}
.school-hero .school-hero-stat .v {
  color: #35405B !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
}
.school-hero .school-hero-stat .l {
  color: #5c6370 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
@media (max-width: 900px) {
  .school-hero.page-hero {
    grid-template-columns: 1fr !important;
  }
  .school-hero .school-hero-stats { grid-template-columns: repeat(2, 1fr); }
}