/* ===================================
   EDUCATE EAST — V7 BRAND STYLESHEET
   =================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* Open Sauce is not on Google Fonts — using system fallback until self-hosted */
/* To self-host: download from https://github.com/marcologous/Open-Sauce-Fonts */

:root {
  /* Brand Colours */
  --cream:      #FBFCEE;
  --forest:     #1E3125;
  --sand:       #EBE1C4;
  --sage:       #868B65;
  --body-text:  #4A5449;   /* accessible body copy — 7.6:1 on cream */
  --lime:       #DFE591;
  --black:      #0D0707;
  --white:      #FFFFFF;

  /* Functional aliases */
  --bg:         var(--cream);
  --bg-alt:     var(--sand);
  --bg-dark:    var(--forest);
  --text:       var(--black);
  --text-muted: var(--sage);
  --accent:     var(--lime);
  --border:     rgba(30,49,37,0.15);

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Open Sauce One', 'Poppins', 'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow:    0 2px 20px rgba(14,49,37,0.08);
  --shadow-lg: 0 8px 40px rgba(14,49,37,0.12);

  --transition: 0.2s ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 17px;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ── NAV ── */
.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,252,238,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.nav-logo .nav-submark {
  height: 48px;
  width: auto;
  display: block;
}
.nav-logo .nav-wordmark {
  height: 27px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--body-text);
  transition: color var(--transition);
  white-space: nowrap;
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active:not(.nav-cta)::after { transform: scaleX(1); }
.nav-links a:hover,
.nav-links a.active { color: var(--forest); }
.nav-links a.active { font-weight: 600; }
.nav-links .nav-cta {
  background: var(--forest);
  color: var(--cream) !important;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.nav-links .nav-cta:hover { background: var(--black); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--forest);
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  text-align: center;
  line-height: 1;
}
.btn-primary   { background: var(--forest); color: var(--cream); }
.btn-primary:hover { background: var(--black); }
.btn-secondary { background: var(--cream); color: var(--forest); border-color: var(--forest); }
.btn-secondary:hover { background: var(--sand); }
.btn-outline   { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-outline:hover { background: rgba(30,49,37,0.06); }
.btn-lime      { background: var(--lime); color: var(--forest); }
.btn-lime:hover { background: #cdd87e; }
.btn-white     { background: var(--white); color: var(--forest); }
.btn-white:hover { background: var(--cream); }
.btn-outline-white { background: transparent; color: var(--cream); border-color: rgba(251,252,238,0.5); }
.btn-outline-white:hover { background: rgba(251,252,238,0.1); }

.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-group.centered { justify-content: center; }

/* ── TYPE HELPERS ── */
.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body-text);
  margin-bottom: 12px;
}
.eyebrow-pill {
  display: inline-block;
  background: rgba(30,49,37,0.08);
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: var(--forest);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.section-heading em { font-style: italic; color: var(--sage); }
.section-sub {
  font-size: 1rem;
  color: var(--body-text);
  max-width: 580px;
  line-height: 1.8;
}

/* ── HERO ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Touch feedback: press-down effect on tap (hover doesn't fire on touchscreens) */
@media (hover: none) {
  .btn:active, .nf-card:active, .sector-card:active, .why-card:active,
  .compliance-card:active, .value-card:active, .commit-card:active,
  .referral-card:active, .team-card:active, .job-card:active,
  .nav-cta:active { transform: scale(0.97); transition: transform 0.1s ease; }
  a.btn:active, button:active { opacity: 0.9; }
}
.hero {
  background: var(--bg);
  padding: 120px 28px 104px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Light.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.15;
  z-index: 1;
}
/* ── PHOTO HERO ── */
.hero-photo {
  background: var(--forest);
  padding: 132px 28px 120px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('hero-landscape.webp');
  background-size: cover;
  background-position: center 55%;
  z-index: 0;
}
@media (min-resolution: 1.5dppx) {
  .hero-bg { background-image: url('hero-landscape@2x.webp'); }
}
/* Subtle, very slow hero photo drift — makes the hero feel alive, not frozen */
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero-bg,
.page-hero.page-hero-photo .page-hero-bg,
.gb-hero-photo .gb-hero-bg {
  animation: hero-drift 26s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .page-hero.page-hero-photo .page-hero-bg,
  .gb-hero-photo .gb-hero-bg { animation: none; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(30,49,37,0.24) 0%,
      rgba(30,49,37,0.32) 48%,
      rgba(30,49,37,0.52) 100%
    );
}
.hero-photo .hero-tagline { color: var(--lime); }
.hero-photo .hero-logo    { filter: drop-shadow(0 2px 12px rgba(13,7,7,0.28)); }
.hero-photo .hero-sub     { color: rgba(251,252,238,0.94); }
.hero-photo .btn-primary        { background: var(--lime); color: var(--forest); border-color: var(--lime); }
.hero-photo .btn-primary:hover  { background: #cdd87e; border-color: #cdd87e; }
.hero-photo .btn-secondary        { background: transparent; color: var(--cream); border-color: rgba(251,252,238,0.55); }
.hero-photo .btn-secondary:hover  { background: rgba(251,252,238,0.12); border-color: rgba(251,252,238,0.8); }
.hero-inner {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.hero-logo {
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto 24px;
  display: block;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-style: italic;
  font-weight: 600;
  color: var(--body-text);
  letter-spacing: 0.01em;
  margin-bottom: 26px;
}
.hero-sub {
  font-size: 1.05rem;
  color: var(--body-text);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.8;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 700;
  color: var(--forest);
  line-height: 1.1;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
.hero-headline em { font-style: italic; color: var(--sage); }

/* ── MISSION STRIP ── */
.mission-strip {
  background: var(--forest);
  padding: 56px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mission-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Dark.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.12;
  z-index: 0;
}
.mission-strip blockquote { position: relative; z-index: 1; }
.mission-strip blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-style: italic;
  color: var(--cream);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.65;
  font-weight: 600;
}
.mission-strip blockquote span { color: var(--lime); }

/* ── TWO PATHS ── */
.two-paths { padding: 80px 0; background: var(--bg); }
.paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.path-card {
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--white);
}
.path-card.schools { border-top: 4px solid var(--forest); }
.path-card.educators { border-top: 4px solid var(--sage); }
.path-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.path-badge.schools   { background: rgba(30,49,37,0.08); color: var(--forest); }
.path-badge.educators { background: rgba(134,139,101,0.18); color: var(--forest); }
.path-icon { margin-bottom: 16px; }
.path-icon img { height: 52px; width: auto; }
.path-card h2 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 12px;
  line-height: 1.2;
}
.path-card p { font-size: 0.95rem; color: var(--body-text); margin-bottom: 24px; line-height: 1.75; }
.check-list { margin-bottom: 32px; }
.check-list li {
  font-size: 0.9rem;
  color: var(--body-text);
  padding: 7px 0;
  border-bottom: 1px solid rgba(30,49,37,0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}
.check-list li::before {
  content: "✓";
  color: var(--forest);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── SECTORS ── */
.sectors { background: var(--sand); padding: 80px 0; }
.sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.sector-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  border: 1px solid var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
}
.sector-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.arrow-nudge { display: inline-block; transition: transform 0.22s ease; }
a:hover .arrow-nudge { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .arrow-nudge { transition: none; } a:hover .arrow-nudge { transform: none; } }
.sector-card, .why-card, .compliance-card, .team-card, .testimonial-card, .value-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.why-card:hover, .compliance-card:hover, .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sector-card-icon { height: 56px; width: auto; margin-bottom: 16px; }
.sector-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 8px;
}
.sector-card p { font-size: 0.9rem; color: var(--body-text); line-height: 1.65; }

/* ── VALUES ── */
.values { padding: 80px 0; background: var(--bg); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  border-top: 3px solid var(--forest);
}
.value-card:nth-child(3n+2) { border-top-color: var(--sage); }
.value-card:nth-child(3n) { border-top-color: var(--forest); }
.value-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--forest);
  color: var(--cream);
}
.value-card:nth-child(3n+2) .value-icon { background: var(--sage); }
.value-card:nth-child(3n) .value-icon { background: var(--forest); }
.value-icon svg { width: 22px; height: 22px; }
.value-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 8px;
}
.value-card p {
  font-size: 0.9rem;
  color: var(--body-text);
  line-height: 1.7;
}
@media(max-width:900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px) { .values-grid { grid-template-columns: 1fr; } }

/* ── BRAND CIRCLE MARKS (from logo suite) ── */
.brand-marks {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
.mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--forest);
  display: inline-block;
  position: relative;
}
.mark-2::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--forest);
}
.mark-3::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid var(--forest);
}
.mark-3::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--forest);
  z-index: 1;
}

/* ── GIVE BACK / COMMUNITY ── */
.community { background: var(--forest); padding: 80px 0; color: var(--cream); position: relative; overflow: hidden; }
.community .eyebrow { color: var(--lime); }
.community .section-heading { color: var(--cream); }
.community .section-sub { color: rgba(251,252,238,0.82); }
.giveback-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; align-items: stretch; }
.giveback-card {
  background: rgba(251,252,238,0.07);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(251,252,238,0.14);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
}
.giveback-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--cream); margin-bottom: 10px; margin-top: 16px; }
.giveback-card p { font-size: 0.9rem; color: rgba(251,252,238,0.82); line-height: 1.75; margin-bottom: 16px; }
.giveback-card .gb-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  background: var(--lime);
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.giveback-stat { text-align: center; margin-top: 56px; padding-top: 48px; border-top: 1px solid rgba(251,252,238,0.12); }
.giveback-stat .big-num {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
  margin-bottom: 10px;
}
.giveback-stat p { font-size: 1rem; color: rgba(251,252,238,0.65); max-width: 440px; margin: 0 auto; }
.candidego-note { text-align: center; margin-top: 20px; font-size: 0.87rem; color: rgba(251,252,238,0.7); }
.candidego-note span { color: var(--lime); font-weight: 600; }

/* ── WHY US ── */
.why-us { background: var(--cream); padding: 80px 0; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 48px; }
.why-card { background: var(--white); border-radius: var(--radius-md); padding: 28px 24px; border: 1px solid var(--border); }
.why-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: rgba(134,139,101,0.3); line-height: 1; margin-bottom: 12px; }
/* Icon badge used in place of the old 01/02/03 numbers */
.why-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: var(--forest);
  color: var(--cream);
}
.why-icon svg { width: 21px; height: 21px; }
.why-card:nth-child(even) .why-icon { background: var(--sage); }
.why-card h3 { font-size: 0.98rem; font-weight: 600; color: var(--forest); margin-bottom: 6px; }
.why-card p { font-size: 0.89rem; color: var(--body-text); line-height: 1.65; }

/* ── RIPPLE CHAIN ── */
.ripple-chain {
  background: var(--forest);
  padding: 26px 28px;
  text-align: center;
  border-top: 1px solid rgba(223,229,145,0.2);
  border-bottom: 1px solid rgba(223,229,145,0.2);
}
.ripple-chain p {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.02em;
}

/* ── TEAM ── */
.team { padding: 96px 0; background: var(--bg); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.team-card { border-radius: var(--radius-lg); border: 1.5px solid var(--border); overflow: hidden; box-shadow: var(--shadow); background: var(--white); }
.team-avatar { aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.team-initial { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--forest); }
.team-avatar img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.team-info { padding: 24px; }
.team-info h3 { font-size: 1.05rem; font-weight: 600; color: var(--forest); margin-bottom: 2px; }
.team-role { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--body-text); margin-bottom: 10px; }
.team-info p { font-size: 0.89rem; color: var(--body-text); line-height: 1.65; }

/* ── REGIONS ── */
.regions { background: var(--cream); padding: 72px 0; text-align: center; }
.regions.about-regions { background: var(--sand); position: relative; overflow: hidden; }
.regions.about-regions::before { content: ''; position: absolute; inset: 0; background-image: url('Brand_Pattern_Light.svg'); background-repeat: repeat; background-size: 240px auto; opacity: 0.15; z-index: 0; }
.regions.about-regions > * { position: relative; z-index: 1; }
.regions.about-regions .region-tag { background: var(--white); }
.regions-wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.region-tag { background: var(--white); border: 1.5px solid var(--border); color: var(--forest); padding: 10px 22px; border-radius: var(--radius-pill); font-size: 0.88rem; font-weight: 500; }

/* ── CTA BAND ── */
.cta-band {
  background: var(--forest);
  padding: 96px 0;
  text-align: center;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Dark.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.12;
  z-index: 0;
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 700; margin-bottom: 14px; color: var(--cream); }
.cta-band p { font-size: 1rem; color: rgba(251,252,238,0.75); max-width: 500px; margin: 0 auto 40px; line-height: 1.8; }

/* ── FOOTER ── */
.footer { background: var(--black); color: rgba(251,252,238,0.75); padding: 64px 0 0; }
.footer-inner { display: grid; grid-template-columns: 1.8fr 1fr; gap: 64px; padding-bottom: 52px; }
.footer-logo img { height: 32px; width: auto; margin-bottom: 16px; }
.footer-tagline { font-size: 0.87rem; color: rgba(251,252,238,0.72); max-width: 260px; line-height: 1.65; margin-bottom: 12px; }
.footer-mission { font-size: 0.85rem; color: rgba(251,252,238,0.62); font-style: italic; max-width: 280px; line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col strong { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); font-weight: 600; margin-bottom: 4px; }
.footer-col a { font-size: 0.88rem; color: rgba(251,252,238,0.72); transition: color var(--transition); }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { border-top: 1px solid rgba(251,252,238,0.1); padding: 22px 28px; text-align: center; font-size: 0.82rem; color: rgba(251,252,238,0.6); }
.footer-bottom a { color: rgba(251,252,238,0.75); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--cream); }

/* ── APSCo member badge ── */
.apsco-badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
.apsco-badge .apsco-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(251,252,238,0.6); }
.apsco-badge .apsco-panel { background: var(--white); border-radius: var(--radius-sm); padding: 11px 16px; display: inline-flex; }
.apsco-badge .apsco-panel img { height: 32px; width: auto; display: block; }
/* Footer badge row: APSCo + Cyber Essentials sit side by side, wrap on narrow screens */
.footer-badges { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 14px; margin-top: 22px; }
.footer-badges .apsco-badge { margin-top: 0; }
.footer-badges .apsco-panel { align-items: center; min-height: 64px; box-sizing: border-box; }
.footer-badges .cyber-badge .apsco-panel { padding: 6px 14px; }
.footer-badges .cyber-badge .apsco-panel img { height: 52px; width: auto; }
.apsco-trust { display: flex; align-items: center; gap: 22px; justify-content: center; flex-wrap: wrap; background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 24px 32px; max-width: 640px; margin: 44px auto 0; box-shadow: var(--shadow); }
.apsco-trust img { height: 48px; width: auto; flex-shrink: 0; }
.apsco-trust .apsco-trust-text { font-size: 0.92rem; color: var(--body-text); line-height: 1.5; text-align: left; }
.apsco-trust .apsco-trust-text strong { color: var(--forest); font-weight: 600; }
@media (max-width: 520px) { .apsco-trust { flex-direction: column; text-align: center; } .apsco-trust .apsco-trust-text { text-align: center; } }

/* ── INNER PAGE HERO ── */
/* Photo hero variant for inner pages (For Schools, For Educators) */
.page-hero.page-hero-photo {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  padding: 112px 28px 100px;
  text-align: center;
}
.page-hero.page-hero-photo .page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('school-hero.webp');
  background-size: cover;
  background-position: center 30%;
}
.page-hero.page-hero-photo.educators-hero .page-hero-bg { background-image: url('educators-hero.webp'); }
@media (min-resolution: 1.5dppx) {
  .page-hero.page-hero-photo .page-hero-bg { background-image: url('school-hero@2x.webp'); }
  .page-hero.page-hero-photo.educators-hero .page-hero-bg { background-image: url('educators-hero@2x.webp'); }
}
.page-hero.page-hero-photo .page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 75% 65% at 50% 55%, rgba(30,49,37,0.58) 0%, rgba(30,49,37,0.34) 65%, rgba(30,49,37,0.22) 100%),
    linear-gradient(180deg, rgba(30,49,37,0.28) 0%, rgba(30,49,37,0.24) 45%, rgba(30,49,37,0.5) 100%);
}
.page-hero.page-hero-photo .page-hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.page-hero.page-hero-photo::before { display: none; }
.page-hero.page-hero-photo .eyebrow-pill { background: rgba(223,229,145,0.15); color: var(--lime); border: 1px solid rgba(223,229,145,0.3); }
.page-hero.page-hero-photo .hero-dots .hd { border-color: var(--cream); }
.page-hero.page-hero-photo .hero-dots .hd2::after { background: var(--cream); }
.page-hero.page-hero-photo .hero-dots .hd3::after { border-color: var(--cream); }
.page-hero.page-hero-photo .hero-dots .hd3::before { background: var(--cream); }
.page-hero.page-hero-photo h1 { color: var(--cream); }
.page-hero.page-hero-photo p { color: rgba(251,252,238,0.92); }
@media (max-width: 768px) {
  .page-hero.page-hero-photo { padding: 84px 24px 76px; }
  .page-hero.page-hero-photo .page-hero-overlay { background: radial-gradient(ellipse 90% 60% at 50% 52%, rgba(30,49,37,0.64) 0%, rgba(30,49,37,0.42) 60%, rgba(30,49,37,0.3) 100%), linear-gradient(180deg, rgba(30,49,37,0.34) 0%, rgba(30,49,37,0.3) 45%, rgba(30,49,37,0.56) 100%); }
}

/* Compact forest hero variant (Jobs, Apply) */
.page-hero.jobs-hero { background: var(--forest); padding: 64px 28px 56px; border-bottom: none; }
.page-hero.jobs-hero::before { background-image: url('Brand_Pattern_Dark.svg'); background-size: 240px auto; opacity: 0.12; }
.page-hero.jobs-hero .eyebrow-pill { background: rgba(223,229,145,0.15); color: var(--lime); border: 1px solid rgba(223,229,145,0.3); }
.page-hero.jobs-hero .hero-dots .hd { border-color: var(--cream); }
.page-hero.jobs-hero .hero-dots .hd2::after { background: var(--cream); }
.page-hero.jobs-hero .hero-dots .hd3::after { border-color: var(--cream); }
.page-hero.jobs-hero .hero-dots .hd3::before { background: var(--cream); }
.page-hero.jobs-hero h1 { color: var(--cream); }
.page-hero.jobs-hero p { color: rgba(251,252,238,0.82); }
.page-hero.jobs-hero .why-item { color: rgba(251,252,238,0.85); }
.page-hero.jobs-hero .why-item::before { color: var(--lime); }

.page-hero {
  background: var(--bg);
  padding: 80px 28px 68px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Light.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.15;
  z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--forest);
  margin: 0 auto 20px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 860px;
}
.page-hero p {
  font-size: 1.05rem;
  color: var(--body-text);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.8;
}
.page-hero .hero-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 0 auto 24px;
}
.hero-dots-mark {
  display: block;
  height: 16px;
  width: auto;
  margin: 0 auto 24px;
}
.hero-dots .hd {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--forest);
  position: relative;
  display: inline-block;
}
/* dot 1: empty circle (as is) */
/* dot 2: solid centre */
.hero-dots .hd2::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--forest);
}
/* dot 3: concentric target */
.hero-dots .hd3::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--forest);
}
.hero-dots .hd3::before {
  content: '';
  position: absolute;
  inset: 4.5px;
  border-radius: 50%;
  background: var(--forest);
  z-index: 1;
}
.page-hero .hero-actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── CONTENT SECTIONS ── */
.content-section { padding: 80px 0; }
.content-section.alt {
  background: var(--sand);
  position: relative;
  overflow: hidden;
}
.content-section.alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Light.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.15;
  z-index: 0;
}
.content-section.alt > * { position: relative; z-index: 1; }

/* ── FORMS ── */
.form-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 36px 40px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
/* CV upload control — used on the job Apply form and educator registration */
.cv-optional { font-weight:400; color:var(--body-text); font-size:0.82rem; }
.cv-upload { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cv-upload input[type=file] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cv-upload-btn { display:inline-flex; align-items:center; gap:8px; border:1.5px dashed var(--sage); border-radius:var(--radius-sm); padding:11px 18px; font-size:0.88rem; font-weight:600; color:var(--forest); background:var(--white); cursor:pointer; transition:border-color 0.2s ease, background 0.2s ease; }
.cv-upload-btn:hover { border-color:var(--forest); background:var(--cream); }
.cv-upload-btn svg { width:17px; height:17px; flex-shrink:0; }
.cv-upload input[type=file]:focus-visible + .cv-upload-btn { outline:2px solid var(--forest); outline-offset:2px; }
.cv-upload-filename { font-size:0.85rem; color:var(--body-text); word-break:break-all; }
.cv-error { color:#b3492f; font-size:0.82rem; margin-top:6px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 0.86rem; font-weight: 500; color: var(--forest); }
input, select, textarea {
  border: 1.5px solid rgba(30,49,37,0.2);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--text);
  background: var(--cream);
  transition: border-color var(--transition);
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--forest); }
textarea { resize: vertical; min-height: 96px; }
.form-submit { margin-top: 8px; width: 100%; padding: 16px; font-size: 1rem; }

/* ── STEPS ── */
.steps-list { display: flex; flex-direction: column; gap: 28px; max-width: 660px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--forest); color: var(--cream); font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-content h3 { font-size: 1rem; font-weight: 600; color: var(--forest); margin-bottom: 4px; }
.step-content p { font-size: 0.9rem; color: var(--body-text); }

/* ── ROLE TAGS ── */
.role-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.role-tag { background: var(--sand); color: var(--forest); padding: 8px 18px; border-radius: var(--radius-pill); font-size: 0.86rem; font-weight: 500; border: 1px solid var(--border); }

/* ── COMPLIANCE ── */
.compliance-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px; }
.compliance-card { background: var(--cream); border-radius: var(--radius-md); padding: 28px 24px; border: 1px solid var(--border); flex: 1 1 220px; max-width: 270px; }
.compliance-icon { width: 38px; height: 38px; background: var(--forest); color: var(--cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; margin-bottom: 14px; }
.compliance-card h3 { font-size: 0.96rem; font-weight: 600; color: var(--forest); margin-bottom: 6px; }
.compliance-card p { font-size: 0.89rem; color: var(--body-text); line-height: 1.6; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .paths-grid, .sectors-grid, .giveback-grid, .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: 70px; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--border);
    padding: 12px 28px 24px; gap: 4px; z-index: 99;
    /* animate open/closed */
    opacity: 0; visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    box-shadow: 0 12px 30px rgba(14,49,37,0.12);
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block; width: 100%;
    padding: 14px 8px; min-height: 44px;
    box-sizing: border-box;
  }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-links .nav-cta { text-align: center; margin-top: 8px; padding: 14px 20px; }
  /* backdrop behind the open menu */
  .nav-backdrop {
    position: fixed; inset: 0; top: 70px;
    background: rgba(14,49,37,0.35);
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    z-index: 98;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
  .nav-toggle { display: flex; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-col a { display: inline-block; padding: 8px 0; min-height: 40px; box-sizing: border-box; }
  .footer-bottom a { display: inline-block; padding: 6px 4px; }
  .btn-group { flex-direction: column; align-items: center; }
  .btn { width: 100%; max-width: 320px; }
  .hero { padding: 80px 24px 72px; }
  .hero-photo { padding: 92px 24px 84px; }
  .hero-photo .hero-bg { background-position: center 38%; }
  .hero-photo .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(30,49,37,0.52) 0%,
      rgba(30,49,37,0.60) 40%,
      rgba(30,49,37,0.80) 100%
    );
  }
  .hero-logo { max-width: 300px; }
  .hero-pattern { background-size: 200px auto; }
}

/* ═══════════════════════════════════
   BRAND LOADER — three marks motif
   ═══════════════════════════════════ */

/* Full-page overlay */
/* Hero dots hidden only while the loader is on screen, preventing double-dots.
   Default visible, so they always show even if JS fails. */


#ee-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#ee-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.loader-marks {
  display: flex;
  gap: 14px;
  align-items: center;
}
.loader-logo {
  width: 260px;
  max-width: 70vw;
  height: auto;
  opacity: 0;
  animation: ee-word-in 0.5s ease 0.1s forwards, ee-breathe 1.6s ease-in-out 0.7s infinite;
}
@keyframes ee-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes ee-word-in { to { opacity: 1; } }

/* The three marks */
.ee-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--forest);
  position: relative;
  opacity: 0.25;
  animation: ee-pulse 1.4s ease-in-out infinite;
}
.ee-mark:nth-child(1) { animation-delay: 0s; }
.ee-mark:nth-child(2) { animation-delay: 0.18s; }
.ee-mark:nth-child(3) { animation-delay: 0.36s; }

/* Mark 2 — solid centre dot */
.ee-mark.m2::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--forest);
}
/* Mark 3 — concentric target */
.ee-mark.m3::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid var(--forest);
}
.ee-mark.m3::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--forest);
  z-index: 1;
}

/* Brand three-dot mark, used in place of the built-in loader dots.
   Each dot shows one third of the real brand asset as a sprite, so they
   can still pulse one after another like the original loader. */
.ee-dot {
  width: 30px;
  aspect-ratio: 54 / 51;
  background-image: url('submark2dark.svg');
  background-repeat: no-repeat;
  background-size: 300% 100%;
  opacity: 0.25;
  animation: ee-pulse 1.4s ease-in-out infinite;
}
.ee-dot1 { background-position: 0% 0; animation-delay: 0s; }
.ee-dot2 { background-position: 50% 0; animation-delay: 0.18s; }
.ee-dot3 { background-position: 100% 0; animation-delay: 0.36s; }
.ee-loader-inline .ee-dot { width: 20px; }

@keyframes ee-pulse {
  0%, 100% { opacity: 0.22; transform: scale(0.88); }
  45%      { opacity: 1;    transform: scale(1.06); }
}

/* Inline loader — for jobs feed, forms, any in-page waiting */
.ee-loader-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 24px;
}
.ee-loader-inline .loader-marks { gap: 10px; }
.ee-loader-inline .ee-mark { width: 20px; height: 20px; border-width: 2px; }
.ee-loader-inline .ee-mark.m2::after { inset: 5px; }
.ee-loader-inline .ee-mark.m3::after { inset: 3px; border-width: 1.5px; }
.ee-loader-inline .ee-mark.m3::before { inset: 6.5px; }
.ee-loader-inline p {
  font-size: 0.86rem;
  color: var(--sage);
  letter-spacing: 0.04em;
}

/* Loader on dark backgrounds */
.ee-loader-inline.on-dark .ee-mark { border-color: var(--lime); }
.ee-loader-inline.on-dark .ee-mark.m2::after,
.ee-loader-inline.on-dark .ee-mark.m3::before { background: var(--lime); }
.ee-loader-inline.on-dark .ee-mark.m3::after { border-color: var(--lime); }
.ee-loader-inline.on-dark p { color: rgba(251,252,238,0.6); }

/* Button loading state */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: ee-spin 0.7s linear infinite;
  color: var(--cream);
}
@keyframes ee-spin { to { transform: rotate(360deg); } }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ee-mark { animation: none; opacity: 0.7; }
  .ee-dot { animation: none; opacity: 1; }
  .loader-logo { animation: none; opacity: 1; }
  #ee-loader { transition: none; }
}

/* ═══════════════════════════════════
   SECTION RHYTHM — inner pages
   ═══════════════════════════════════ */

/* Dark section variant using black */
.content-section.dark {
  background: var(--black);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.content-section.dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Dark.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.12;
  z-index: 0;
}
.content-section.dark > * { position: relative; z-index: 1; }
.content-section.dark.dark-forest { background: #172319; }
.content-section.dark.dark-forest + .community,
.content-section.dark.dark-forest + .cta-band { border-top: 1px solid rgba(223,229,145,0.18); }
.content-section.dark .compliance-card { background: rgba(251,252,238,0.06); border-color: rgba(251,252,238,0.14); }
.content-section.dark .compliance-icon { background: var(--lime); color: var(--forest); }
.content-section.dark .compliance-card h3 { color: var(--cream); }
.content-section.dark .compliance-card p { color: rgba(251,252,238,0.8); }
.content-section.dark .kcsie-note { background: rgba(251,252,238,0.06); border-color: rgba(251,252,238,0.18); border-left-color: var(--lime); }
.content-section.dark .kcsie-note p { color: rgba(251,252,238,0.85); }
.content-section.dark .kcsie-note strong { color: var(--lime); }
.content-section.dark .eyebrow { color: var(--lime); }
.content-section.dark .section-heading { color: var(--cream); }
.content-section.dark .section-sub { color: rgba(251,252,238,0.82); }

/* Pattern on sand sections for texture */
.content-section.alt,
.sectors,
.why-us,
.regions {
  position: relative;
  overflow: hidden;
}
.content-section.alt::before,
.sectors::before,
.why-us::before,
.regions::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Light.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.15;
  z-index: 0;
}
.content-section.alt > *,
.sectors > *,
.why-us > *,
.regions > * { position: relative; z-index: 1; }

/* Give Back section pattern */
.community::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Dark.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.12;
  z-index: 0;
}
.community > * { position: relative; z-index: 1; }

/* Lift the cards so they read against the texture */
.why-card,
.sector-card,
.compliance-card {
  box-shadow: 0 1px 3px rgba(14,49,37,0.04);
}
.why-card:hover,
.compliance-card:hover {
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition);
}

/* Section divider marks — the three-circle motif as a separator */
.section-divider {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 8px 0;
}
.section-divider .dm {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--sage);
  opacity: 0.5;
}
.section-divider .dm.filled { background: var(--sage); }

/* Compliance cards on dark sections */
.compliance-card.on-dark {
  background: rgba(251,252,238,0.05);
  border: 1px solid rgba(251,252,238,0.12);
}
.compliance-card.on-dark h3 { color: var(--cream); }
.compliance-card.on-dark p { color: rgba(251,252,238,0.65); }
.compliance-card.on-dark .compliance-icon {
  background: var(--lime);
  color: var(--forest);
}

/* Cards on dark sections generally */
.content-section.dark .form-card {
  background: rgba(251,252,238,0.05);
  border-color: rgba(251,252,238,0.12);
}
.content-section.dark label { color: var(--cream); }
.content-section.dark .check-list li {
  color: rgba(251,252,238,0.7);
  border-bottom-color: rgba(251,252,238,0.08);
}
.content-section.dark .check-list li::before { color: var(--lime); }

/* ═══════════════════════════════════
   GIVE BACK — schools variant
   ═══════════════════════════════════ */
.school-gb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.school-gb-card {
  background: rgba(251,252,238,0.07);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(251,252,238,0.14);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
}
.sgb-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
  margin-bottom: 14px;
}
.school-gb-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 10px;
}
.school-gb-card p {
  font-size: 0.9rem;
  color: rgba(251,252,238,0.82);
  line-height: 1.75;
}
.school-gb-note {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(251,252,238,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.school-gb-note p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--lime);
  margin: 0;
}

/* ═══════════════════════════════════
   GIVE BACK — educators variant
   ═══════════════════════════════════ */
.edu-benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.edu-benefit {
  background: rgba(251,252,238,0.07);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(251,252,238,0.14);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
}
.eb-tag {
  display: inline-block;
  background: var(--lime);
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.edu-benefit h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 12px;
  line-height: 1.2;
}
.eb-lead {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--lime);
  margin-bottom: 14px;
}
.edu-benefit > p {
  font-size: 0.93rem;
  color: rgba(251,252,238,0.82);
  line-height: 1.8;
  margin-bottom: 22px;
}
.eb-list { border-top: 1px solid rgba(251,252,238,0.1); }
.eb-list li {
  font-size: 0.89rem;
  color: rgba(251,252,238,0.85);
  padding: 9px 0;
  border-bottom: 1px solid rgba(251,252,238,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eb-list li::before {
  content: "✓";
  color: var(--lime);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.edu-benefit-footer {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(251,252,238,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.edu-benefit-footer p {
  font-size: 0.95rem;
  color: rgba(251,252,238,0.6);
  max-width: 560px;
  margin: 0;
  line-height: 1.75;
}

@media (max-width: 860px) {
  .school-gb-grid, .edu-benefit-grid { grid-template-columns: 1fr; }
  .school-gb-note { flex-direction: column; align-items: center; }
  .edu-benefit-footer { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════
   CONTACT ROUTES
   ═══════════════════════════════════ */
.contact-routes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.contact-route {
  background: rgba(251,252,238,0.07);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(251,252,238,0.14);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.contact-route h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 10px;
}
.contact-route p {
  font-size: 0.89rem;
  color: rgba(251,252,238,0.82);
  line-height: 1.75;
  margin-bottom: 16px;
}
.contact-route a {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lime);
  transition: opacity var(--transition);
}
.contact-route a:hover { opacity: 0.75; }

/* ═══════════════════════════════════
   HOW WE WORK (About)
   ═══════════════════════════════════ */
.how-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.how-item {
  padding: 28px 0 28px 28px;
  border-left: 2px solid rgba(223,229,145,0.3);
}
.how-section .how-item {
  padding: 30px 28px;
  border-left: none;
  background: rgba(251,252,238,0.06);
  border: 1px solid rgba(251,252,238,0.14);
  border-top: 3px solid var(--lime);
  border-radius: var(--radius-md);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.how-section .how-item:hover {
  transform: translateY(-4px);
  border-color: rgba(223,229,145,0.4);
  background: rgba(251,252,238,0.09);
}
.how-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.how-item h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 8px;
}
.how-item p {
  font-size: 0.9rem;
  color: rgba(251,252,238,0.82);
  line-height: 1.75;
}

@media (max-width: 860px) {
  .contact-routes, .how-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════
   SCROLL REVEAL
   Subtle cinematic entrance on scroll
   ═══════════════════════════════════ */

/* Only hide elements once JS confirms it's running.
   Without .reveal-ready on <html>, everything stays visible. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  will-change: opacity, transform;
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered children — cards, list items, grids */
.reveal-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(34px) scale(0.97);
}
.reveal-ready [data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-ready [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.06s; }
.reveal-ready [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.16s; }
.reveal-ready [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.26s; }
.reveal-ready [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.36s; }
.reveal-ready [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.46s; }
.reveal-ready [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.56s; }

/* Gentle parallax drift on section patterns */
.reveal-ready .pattern-drift {
  transition: transform 0.1s linear;
}

/* Hero entrance — runs on load, not scroll */
.reveal-ready .hero-logo,
.reveal-ready .hero-tagline,
.reveal-ready .hero-sub,
.reveal-ready .hero .btn-group {
  opacity: 0;
  transform: translateY(16px);
}
.hero-entered .hero-logo,
.hero-entered .hero-tagline,
.hero-entered .hero-sub,
.hero-entered .hero .btn-group {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-entered .hero-logo    { transition-delay: 0.05s; }
.hero-entered .hero-tagline { transition-delay: 0.18s; }
.hero-entered .hero-sub     { transition-delay: 0.28s; }
.hero-entered .hero .btn-group { transition-delay: 0.38s; }

/* ── Accessibility: no motion if the user asks for none ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal-group] > *,
  .reveal-ready .hero-logo,
  .reveal-ready .hero-tagline,
  .reveal-ready .hero-sub,
  .reveal-ready .hero .btn-group {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pattern-drift { transform: none !important; }
}

/* KCSIE compliance note */
.kcsie-note {
  margin-top: 36px;
  padding: 24px 28px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--forest);
  border-radius: var(--radius-md);
}
.kcsie-note p {
  font-size: 0.93rem;
  color: var(--body-text);
  line-height: 1.75;
  margin: 0;
}
.kcsie-note strong { color: var(--forest); }

/* Icons sitting on dark backgrounds — recolour to lime */
.icon-on-dark {
  height: 48px;
  width: auto;
  margin-bottom: 16px;
  filter: brightness(0) saturate(100%) invert(89%) sepia(24%) saturate(541%) hue-rotate(23deg) brightness(97%) contrast(89%);
}

/* ═══════════════════════════════════
   AUDIENCE PAGE ACCENTS
   Adds colour without breaking the
   lime-only-on-dark rule
   ═══════════════════════════════════ */

/* Numbered cards — sand fill with forest accent bar */
.why-us .why-card,
.content-section .why-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 3px solid var(--sage);
  position: relative;
  overflow: hidden;
}
.why-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--forest);
  transition: width 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.why-card:hover::after { width: 100%; }
.why-card .why-num {
  color: var(--sage);
  opacity: 0.45;
}
/* Accent bar on each card matches its icon badge colour */
.why-us .why-card:nth-child(even),
.content-section .why-card:nth-child(even) { border-top-color: var(--sage); }
.why-us .why-card:nth-child(odd),
.content-section .why-card:nth-child(odd) { border-top-color: var(--forest); }

/* Sector cards — alternate tinting */
.sector-card:nth-child(1) { border-top: 3px solid var(--forest); }
.sector-card:nth-child(2) { border-top: 3px solid var(--sage); }
.sector-card:nth-child(3) { border-top: 3px solid var(--black); }

/* Sand section behind numbered cards for contrast */
.content-section.tinted {
  background: var(--sand);
  position: relative;
  overflow: hidden;
  padding-bottom: 24px;
}
.content-section.tinted::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Light.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.15;
  z-index: 0;
}
.content-section.tinted > * { position: relative; z-index: 1; }

/* Role tags — vary tone so the block isn't flat */
/* Role tags — one clean consistent style */

/* Steps — forest circles with a connecting line */
.steps-list { position: relative; }
.step { position: relative; }
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: -28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--sage), rgba(134,139,101,0.15));
  opacity: 0.4;
}

/* Scheme terms footnote */
.scheme-terms {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.scheme-terms p {
  font-size: 0.85rem;
  color: var(--body-text);
  line-height: 1.7;
  max-width: 780px;
  opacity: 0.85;
}
.scheme-terms strong { color: var(--forest); }

/* ═══════════════════════════════════
   EDUCATOR HIGHLIGHT BRIDGE
   ═══════════════════════════════════ */
.edu-highlight {
  margin-top: 28px;
  background: var(--forest);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.edu-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('Brand_Pattern_Dark.svg');
  background-repeat: repeat;
  background-size: 240px auto;
  opacity: 0.12;
  z-index: 0;
}
.edu-highlight > * { position: relative; z-index: 1; }
.edu-highlight-mark {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ehm {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--lime);
  position: relative;
  display: inline-block;
}
.ehm2::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--lime);
}
.ehm3::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
}
.ehm3::before {
  content: '';
  position: absolute;
  inset: 6.5px;
  border-radius: 50%;
  background: var(--lime);
  z-index: 1;
}
.ehl-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 10px;
}
.edu-highlight-body h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 10px;
  line-height: 1.2;
}
.edu-highlight-body p {
  font-size: 0.94rem;
  color: rgba(251,252,238,0.82);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 700px) {
  .edu-highlight {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 28px;
  }
}

/* "Registering interest in X" banner on educators form */
.applying-banner {
  background: var(--forest);
  color: var(--lime);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════
   RESPONSIVE TWO-COLUMN SPLIT
   Stacks to one column on mobile
   ═══════════════════════════════════ */
.split-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.contact-split {
  grid-template-columns: 1fr 1.7fr;
  gap: 72px;
  align-items: start;
}
@media (max-width: 820px) {
  .split-2col,
  .contact-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 700px) {
  .pillar-card,
  .pillar-card.reverse {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
  }
}

/* Prevent long emails/URLs overflowing on narrow screens */
.footer-col a,
.contact-route a,
a[href^="mailto:"] {
  overflow-wrap: break-word;
  hyphens: none;
}
.footer-col a[href^="mailto:"] {
  font-size: 0.82rem;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .footer-col a[href^="mailto:"] { font-size: 0.76rem; }
}

/* Contact detail links shouldn't break mid-word awkwardly */
.split-2col a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* ═══ DESKTOP LAYOUT REFRESH (homepage) — mobile unaffected ═══ */
@media (min-width: 900px) {
  /* Wider, more generous section rhythm now the container is roomier */
  .sectors-grid { gap: 28px; }
  .paths-grid { gap: 32px; }

  /* Section intros: keep their natural left alignment but let paragraphs
     breathe wider so they don't feel like a thin centre column */
  .sectors .section-sub,
  .why-us .section-sub { max-width: 640px; }
}

@media (min-width: 1100px) {
  /* HERO: keep everything centred (as it reads best), just wider so it
     isn't a pinched narrow column. Mobile unaffected. */
  .hero-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; }
  .hero-inner .hero-sub { max-width: 620px; margin-left: auto; margin-right: auto; }

  /* Mission strip: keep centred but widen so it isn't pinched */
  .mission-strip blockquote { max-width: 960px; }
}

/* Nav logo: keep enlarged on desktop, ease back slightly on small phones so it doesn't crowd the menu button */
@media (max-width: 480px) {
  .nav-logo .nav-submark { height: 40px; }
  .nav-logo .nav-wordmark { height: 23px; }
  .nav-logo { gap: 9px; }
}

/* ═══ MICRO-POLISH PASS — refined hover states & transitions ═══ */

/* Job cards: subtle lift and shadow on hover */
.job-card-full {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.job-card-full:hover {
  box-shadow: 0 12px 32px rgba(30,49,37,0.1);
  transform: translateY(-3px);
  border-color: var(--sage);
}

/* Team cards: gentle lift so they feel alive */
.team-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.team-card:hover {
  box-shadow: 0 14px 36px rgba(30,49,37,0.13);
  transform: translateY(-3px);
}

/* Role tags: soft fill shift on hover */
.role-tag {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.role-tag:hover {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}

/* Buttons: add a subtle lift on the primary/secondary buttons for tactility */
.btn {
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover,
.btn-lime:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30,49,37,0.18);
}

/* Links in prose: smoother underline transition */
.footer-col a,
.footer-bottom a { transition: color 0.2s ease; }

/* Respect reduced motion — disable all lifts for those who prefer it */
@media (prefers-reduced-motion: reduce) {
  .job-card-full:hover,
  .team-card:hover,
  .btn-primary:hover,
  .btn-lime:hover { transform: none; }
}

/* ═══ TESTIMONIALS ═══ */
.testimonials { background: var(--cream); padding: 80px 0; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.testimonial-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 38px 34px;
  position: relative;
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.testimonial-card:hover {
  box-shadow: 0 14px 36px rgba(30,49,37,0.12);
  transform: translateY(-3px);
}
.testimonial-quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.5;
  color: var(--sage);
  opacity: 0.4;
  margin-bottom: 8px;
  height: 32px;
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--forest);
  margin-bottom: 24px;
}
.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.testimonial-name { font-weight: 600; color: var(--forest); font-size: 0.95rem; }
.testimonial-role { font-size: 0.85rem; color: var(--body-text); }
/* ── Testimonial carousel ── */
.testimonial-carousel { margin-top: 48px; }
.testimonial-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  transition: opacity 0.5s ease;
}
.testimonial-track.fading { opacity: 0; }
.testimonial-track .testimonial-card { margin: 0; height: 100%; display: flex; flex-direction: column; }
.testimonial-track .testimonial-card blockquote { margin-bottom: auto; padding-bottom: 24px; }
.testimonial-dots { display: flex; gap: 9px; justify-content: center; margin-top: 32px; }
.testimonial-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
  background: var(--sage); opacity: 0.35; cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.testimonial-dots button.active { opacity: 1; transform: scale(1.25); background: var(--forest); }
.tm-more {
  display: inline; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; font-style: normal;
  color: var(--sage); text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.tm-more:hover { color: var(--forest); }
@media (max-width: 900px) { .testimonial-track { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 720px) {
  .testimonial-grid { grid-template-columns: 1fr; gap: 20px; }
  .testimonial-card { padding: 32px 26px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-card:hover { transform: none; }
}

/* ═══ FOOTER SOCIAL ICONS ═══ */
.footer-social { display: flex; gap: 14px; margin-top: 20px; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,252,238,0.25);
  color: rgba(251,252,238,0.75);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover {
  background: var(--lime);
  color: var(--forest);
  border-color: var(--lime);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .social-link:hover { transform: none; } }