/* Templesprings final shared quality layer — loaded last on every page. */
:root {
  --brand-blue: #1865ac;
  --brand-sky: #4abeff;
  --brand-blue-gradient: linear-gradient(135deg, #1865ac, #4abeff);
  --brand-olive: #b0ad19;
  --brand-paper: #f8f7ef;
  --brand-ink: #202116;
  --brand-muted: #626356;
  --touch-target: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; }
body.menu-open { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

:where(h1, h2, h3, h4, h5, h6, strong, .section-label, .eyebrow, .commerce-kicker) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
:where(h1, h2) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

:where(a, button, input, select, textarea, summary) { -webkit-tap-highlight-color: rgba(24, 101, 172, .18); }
:where(button, input, select, textarea) { font: inherit; }
:where(.button, .commerce-button, button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 44px; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #0b4f8f;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: #0b4f8f;
  font: 800 14px/1.2 'DM Sans', sans-serif;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* One brand language: blue gradients for actions, exact logo olive for green surfaces. */
:where(.button, .button-small, .button-light, .commerce-button, .form-submit, button[type="submit"], input[type="submit"]) {
  background: var(--brand-blue-gradient);
  color: #fff;
}
:where(.floating-card, .impact-badge, .accent-card, .award-tag, .content-section.olive,
  .inline-cta, .journey-cta, .purpose-panel, .trial, .final-cta, .article-hero,
  .service-hero, .consult-footer) {
  background-color: var(--brand-olive);
  color: #fff;
}
:where(.floating-card, .impact-badge, .accent-card, .award-tag, .content-section.olive,
  .inline-cta, .journey-cta, .purpose-panel, .trial, .final-cta, .article-hero,
  .service-hero, .consult-footer) :where(h1, h2, h3, h4, p, span, strong, em, a, i) {
  color: #fff;
}

/* A single fixed global header with a constrained mobile logo. */
.site-header.global-site-header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
}
.announcement + .site-header.global-site-header,
.announcement ~ .site-header.global-site-header { top: 34px; }
.global-site-header .brand,
.global-site-header .brand-logo { min-width: 0; }
.global-site-header .desktop-nav { justify-content: center; }
.global-site-header .desktop-nav a { font-size: 15px; }

/* The first visual is exactly the usable viewport and keeps copy clear of the header. */
.global-first-hero {
  height: var(--first-hero-height, calc(100dvh - 84px));
  min-height: var(--first-hero-height, calc(100dvh - 84px));
  max-height: var(--first-hero-height, calc(100dvh - 84px));
  overflow: hidden;
  isolation: isolate;
}
.global-first-hero .hero-content {
  top: clamp(18px, 3dvh, 34px);
  bottom: auto;
  max-width: min(890px, calc(100% - 40px));
}
.global-first-hero h1 {
  margin-bottom: clamp(14px, 2.4dvh, 26px);
  font-size: clamp(40px, min(7.5vw, 11dvh), 92px);
  line-height: .96;
}
.global-first-hero p { max-width: 680px; }
.commerce-hero.global-first-hero { padding-block: clamp(26px, 5dvh, 58px); }
.commerce-hero.global-first-hero > div { margin-block: auto; }

/* Cards remain obvious links without becoming noisy. */
.lesson-card h3 a,
.course-card h3 a,
.programme-row h3 a,
.project-card h3 a { color: inherit; text-decoration: none; }
a.project-card, a.course-card { display: block; color: inherit; text-decoration: none; }
.card-num:empty { display: none; }

/* Footer is intentionally prominent and its extra routes sit in the existing columns. */
footer.footer {
  width: 100%;
  padding: clamp(64px, 7vw, 88px) clamp(20px, 5vw, 72px) 28px;
  background: var(--brand-blue-gradient);
  color: #fff;
}
footer.footer .footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(130px, 1fr));
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
  padding-bottom: clamp(52px, 6vw, 72px);
}
footer.footer .footer-brand { min-width: 0; }
footer.footer .brand-footer { color: #fff; font: 800 24px/1 'Manrope', sans-serif; text-decoration: none; }
footer.footer .footer-brand > p { margin: 18px 0 0; color: rgba(255,255,255,.9); line-height: 1.65; }
footer.footer .footer-brand .charity { margin-top: 38px; font-size: 12px; }
footer.footer .footer-col { min-width: 0; }
footer.footer .footer-col h4 { color: #fff; font-size: 12px; font-weight: 800; }
footer.footer .footer-col a,
footer.footer .footer-col p { color: rgba(255,255,255,.94); font-size: 15px; font-weight: 700; }
footer.footer .footer-col a { display: block; text-decoration: none; }
footer.footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 700;
}
footer.footer .footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer.footer .footer-bottom a { color: #fff; text-decoration: none; }
footer.footer a:hover,
footer.footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 5px; }

@media (hover: hover) and (pointer: fine) {
  :where(.button, .commerce-button, .lesson-card, .course-card, .project-card) { transition: transform .2s ease, box-shadow .2s ease; }
  :where(.button, .commerce-button, .lesson-card, .course-card, .project-card):hover { transform: translateY(-2px); }
}

@media (max-width: 900px) {
  .site-header.global-site-header { height: 72px; min-height: 72px; padding-inline: max(16px, env(safe-area-inset-left)); }
  .global-site-header .brand { flex: 1 1 auto; max-width: calc(100% - 64px); overflow: hidden; }
  .global-site-header .brand-logo { width: min(158px, 100%); height: 48px; object-fit: contain; object-position: left center; }
  .global-site-header .menu-toggle { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; }
  .global-mobile-menu { top: 72px; max-height: calc(100dvh - 72px); overscroll-behavior: contain; }
  .announcement ~ .global-mobile-menu { top: 106px; max-height: calc(100dvh - 106px); }
  .global-mobile-menu nav a { min-height: var(--touch-target); display: flex; align-items: center; }
  .global-mobile-menu .button { min-height: var(--touch-target); }

  .section, .content-section, .page-section { padding-inline: 20px; }
  .section-head { gap: 20px; }
  .global-explore { padding-inline: 20px; }
  .global-explore h2 { font-size: clamp(34px, 9vw, 50px); }
  footer.footer { padding-inline: 20px; }
  footer.footer .footer-top { grid-template-columns: 1.3fr 1fr 1fr; }
  footer.footer .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .home-page .global-first-hero .hero-content {
    position: absolute !important;
    top: auto !important;
    right: 18px !important;
    bottom: 18px !important;
    left: 18px !important;
    width: auto !important;
    max-width: none !important;
    padding: 24px 20px 18px !important;
  }
  .global-first-hero .hero-content { left: 18px; right: 18px; top: clamp(18px, 2.6dvh, 24px); max-width: none; }
  .global-first-hero h1 { font-size: clamp(38px, min(11.5vw, 8dvh), 54px); }
  .global-first-hero p { font-size: clamp(15px, 4vw, 17px); line-height: 1.5; }
  .global-first-hero .hero-buttons { gap: 14px; }
  .global-first-hero .hero-buttons .button { width: 100%; min-height: var(--touch-target); text-align: center; }

  .stats, .trust-grid, .lesson-grid, .impact-grid, .quote-grid,
  .course-grid, .project-grid, .portal-grid { grid-template-columns: 1fr; }
  .programme-row { grid-template-columns: 1fr auto; }
  .programme-row > span:first-child { display: none; }
  .programme-row p { grid-column: 1 / -1; display: block; }

  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  footer.footer .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand, .footer-col:last-child,
  footer.footer .footer-brand { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-height: 680px) {
  .global-first-hero h1 { font-size: clamp(34px, min(6.8vw, 8dvh), 58px); }
  .global-first-hero p { line-height: 1.4; }
  .global-first-hero .hero-content { top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}