/* ==========================================================================
   FIVE PILLARS — CORE DESIGN SYSTEM
   Tokens, reset, typography, layout, utilities, animation primitives.
   Palette is a placeholder derived from the working "five pillars" mark;
   swap the --brand-* tokens once the client's real logo/palette is supplied.
   ========================================================================== */

/* Rounded, friendly display font for headings — loaded here (not in each
   page's <head>) so no HTML file needs to change to pick it up. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

:root {
  /* ---- Brand colors (sampled directly from the Five Pillars logo: navy,
     gold and teal). --brand-secondary is the logo's gold darkened enough
     to stay AA-readable as white-on-gold button text (the raw logo gold,
     #CC8600, only manages ~3:1) — that true bright gold is kept as
     --brand-gold for borders/icons/underlines where text contrast isn't
     a factor. --brand-teal is the logo's heart/leaf accent, likewise for
     non-text decorative use. ---- */
  --brand-primary: #12406F;      /* logo navy, lightened for gradients */
  --brand-primary-dark: #002A52; /* exact logo navy */
  --brand-primary-light: #E7ECF3;
  --brand-secondary: #A36B00;    /* logo gold, darkened for AA contrast */
  --brand-secondary-dark: #7A5000;
  --brand-gold: #CC8600;         /* true logo gold — decorative only */
  --brand-teal: #02B9B5;         /* true logo teal — decorative only */

  /* ---- Five Pillars colors ---- */
  --pillar-1: #4A90C4; /* Communication */
  --pillar-2: #E8784A; /* Behaviour & Emotional Regulation */
  --pillar-3: #E5A23A; /* Motor & Sensory */
  --pillar-4: #3F9C87; /* Cognitive & Learning */
  --pillar-5: #8B6BB8; /* Social & Life Skills */

  /* ---- Text-safe darkened variants (WCAG AA >=4.5:1 on white) ----
     Use these for small TEXT set in a pillar color; keep the vivid
     tokens above for icons, borders and tinted backgrounds. ---- */
  --pillar-1-text: #387AAB;
  --pillar-2-text: #C94D1A;
  --pillar-3-text: #A06915;
  --pillar-4-text: #348170;
  --pillar-5-text: #8665B5;
  --brand-secondary-text: #7A5000; /* same hue family as brand-secondary */

  /* ---- Neutrals ---- */
  --ink-900: #1E2A32;
  --ink-700: #3B4A52;
  /* Darkened from a medium gray (#67767F) to near-black, site-wide — the
     lighter gray read poorly (sub-4.5:1) against several of the site's
     tinted section backgrounds, not just on plain white. --ink-300 (below)
     is untouched since it's specifically the light fallback used for body
     text on DARK backgrounds (.section-dark) — darkening that one would
     make it disappear instead of fixing anything. */
  --ink-500: #22303A;
  --ink-300: #A9B6BC;
  --bg-page: #FFFEFB;
  --bg-soft: #FBF8F4;
  --bg-soft-blue: #F2F7F8;
  --bg-dark: #0F2A42;
  --border-soft: #E7E1D8;
  --white: #FFFFFF;

  /* ---- Semantic ---- */
  --success: #3F9C87;
  --error: #C0453A;

  /* ---- Typography ---- */
  --font-heading: 'Fredoka', 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.25rem;
  --space-3xl: 4.5rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: 1.5rem;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 4px 14px rgba(20, 40, 45, 0.07);
  --shadow-md: 0 16px 40px rgba(20, 40, 45, 0.12);
  --shadow-lg: 0 30px 70px rgba(20, 40, 45, 0.18);
  --shadow-warm: 0 18px 40px rgba(163, 107, 0, 0.2);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;

  --header-h: 127px;

  /* ---- Decorative blob colors (used by ::before/::after section accents) ---- */
  --blob-1: var(--pillar-1);
  --blob-2: var(--pillar-2);
  --blob-3: var(--pillar-3);
  --blob-4: var(--pillar-4);
  --blob-5: var(--pillar-5);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

html { overflow-x: hidden; max-width: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--bg-page);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  color: var(--ink-900);
  line-height: 1.2;
  font-weight: 600;
}
h1, .h1 { font-size: clamp(2.15rem, 1.45rem + 3vw, 3.75rem); font-weight: 600; letter-spacing: -0.015em; }
h2, .h2 { font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.55rem); font-weight: 600; letter-spacing: -0.015em; }
h3, .h3 { font-size: clamp(1.15rem, 1.05rem + 0.55vw, 1.4rem); }
h4, .h4 { font-size: 1.05rem; }
p { color: var(--ink-500); }
.lead { font-size: 1.2rem; color: var(--ink-700); line-height: 1.6; }
.legal-content > h2 { margin-top: var(--space-lg); }
.legal-content > p, .legal-content > ul { margin-top: var(--space-sm); }
small, .text-sm { font-size: 0.875rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-secondary-text);
  background: color-mix(in srgb, var(--brand-secondary) 10%, white);
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
}
.eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: var(--brand-secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.3 6.2 16 8 9.3 9.8 8 16 6.7 9.8 0 8 6.7 6.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.3 6.2 16 8 9.3 9.8 8 16 6.7 9.8 0 8 6.7 6.2Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: eyebrow-pulse 2.2s ease-in-out infinite;
}
@keyframes eyebrow-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.25) rotate(15deg); opacity: 0.7; }
}
.text-white { color: var(--white); }
.text-muted { color: var(--ink-500); }
.text-center { text-align: center; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: clamp(1.75rem, 1.4rem + 1.6vw, var(--space-2xl));
  position: relative;
}
.section-sm { padding-block: clamp(1.25rem, 1.1rem + 0.8vw, var(--space-xl)); position: relative; }
.section-soft { background: #F5EADB; position: relative; overflow: hidden; }
.section-soft-blue { background: var(--bg-soft-blue); position: relative; overflow: hidden; }
.section-dark { background: var(--bg-dark); color: var(--ink-300); position: relative; overflow: hidden; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.72); }
.section-dark .eyebrow { background: rgba(255,255,255,0.12); color: var(--white); }
.section-dark .eyebrow::before { background-color: var(--white); }

/* Soft organic color-wash blobs behind alternating sections — pure CSS,
   no new markup. .section-soft leans warm coral/amber, .section-soft-blue
   leans cool teal/violet, so the two alternating backgrounds read as
   distinct pastel washes rather than identical grey panels. */
.section-soft::before {
  content: "";
  position: absolute;
  top: -14%;
  right: -8%;
  width: 36vw;
  height: 36vw;
  max-width: 480px;
  max-height: 480px;
  min-width: 280px;
  min-height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pillar-2) 0%, transparent 68%);
  opacity: 0.10;
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.section-soft::after {
  content: "";
  position: absolute;
  bottom: -16%;
  left: -6%;
  width: 26vw;
  height: 26vw;
  max-width: 340px;
  max-height: 340px;
  min-width: 180px;
  min-height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pillar-3) 0%, transparent 68%);
  opacity: 0.10;
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.section-soft-blue::before {
  content: "";
  position: absolute;
  top: -14%;
  right: -8%;
  width: 36vw;
  height: 36vw;
  max-width: 480px;
  max-height: 480px;
  min-width: 280px;
  min-height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-primary) 0%, transparent 68%);
  opacity: 0.10;
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.section-soft-blue::after {
  content: "";
  position: absolute;
  bottom: -16%;
  left: -6%;
  width: 26vw;
  height: 26vw;
  max-width: 340px;
  max-height: 340px;
  min-width: 180px;
  min-height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pillar-5) 0%, transparent 68%);
  opacity: 0.10;
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.section-soft > .container,
.section-soft-blue > .container { position: relative; z-index: 1; }

.section-heading {
  max-width: 820px;
  margin-bottom: var(--space-md);
  position: relative;
}

/* Playful floating icons scattered around a section heading — pencil,
   ABC block, star, open book — in the five pillar colours. Purely
   decorative (aria-hidden), so hidden on small screens where there's no
   room for them without colliding with the heading text. */
.heading-decor { position: absolute; inset: 0; pointer-events: none; }
.heading-decor .decor-icon {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--white);
  box-shadow: var(--shadow-sm);
  animation: decorBob 3.6s ease-in-out infinite;
}
.heading-decor .decor-icon svg { width: 22px; height: 22px; }
/* All four cluster around the h2 only (top: 0–45%) — none use `bottom`,
   so they never drift down into the paragraph line(s) below, whatever
   length that text wraps to. */
.heading-decor .decor-pencil { top: -6px; left: 4%; background: var(--pillar-2); animation-delay: 0s; }
.heading-decor .decor-blocks { top: -2px; right: 3%; background: var(--pillar-1); animation-delay: 0.5s; }
.heading-decor .decor-star { top: 42%; left: -1%; background: var(--pillar-3); animation-delay: 1s; }
.heading-decor .decor-book { top: 42%; right: 0%; background: var(--pillar-4); animation-delay: 1.5s; }
/* Further out again, into the wide empty gutter on very wide screens —
   offset as a % of the (narrow) heading box itself, so they land just
   inside the .container's edge rather than the full, much wider viewport. */
.heading-decor .decor-heart { top: 20%; left: -16%; background: var(--pillar-5); animation-delay: 0.3s; }
.heading-decor .decor-apple { top: 20%; right: -16%; background: var(--brand-primary); animation-delay: 0.8s; }
@keyframes decorBob {
  0%, 100% { transform: translateY(0) rotate(var(--decor-rot, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--decor-rot, 0deg)); }
}
.heading-decor .decor-pencil { --decor-rot: -12deg; }
.heading-decor .decor-blocks { --decor-rot: 10deg; }
.heading-decor .decor-heart { --decor-rot: -6deg; }
.heading-decor .decor-apple { --decor-rot: 6deg; }
.heading-decor .decor-star { --decor-rot: -8deg; }
.heading-decor .decor-book { --decor-rot: 8deg; }
/* The heart/apple pair only has room once the container's side gutter is
   actually wide — below this they'd sit too close to (or past) the edge. */
@media (max-width: 1100px) { .heading-decor .decor-heart, .heading-decor .decor-apple { display: none; } }
@media (max-width: 767px) { .heading-decor { display: none; } }
@media (prefers-reduced-motion: reduce) { .heading-decor .decor-icon { animation: none; } }

/* Shared gentle wobble, reused by every icon badge across the site (pillar
   cards, programme cards, mission/vision, contact info cards, contact
   strip) so icons read as quietly "alive" rather than static art. Paused
   on hover wherever the icon already has its own hover rotate/scale, so
   the two don't fight over `transform`. */
@keyframes iconPulse {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-card .pillar-icon,
  .programme-icon,
  .icon-card .icon-circle,
  .info-card .icon-circle,
  .contact-strip-item .icon-circle {
    animation: none !important;
  }
}
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin-top: var(--space-xs); }
/* Common to every section heading site-wide, so this one animation covers
   every page's headers in one place rather than needing per-page changes. */
.section-heading h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 12px;
  margin-top: 0.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M2 8 Q17 1 32 8 T62 8 T92 8 T118 8' stroke='%23C94D1A' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  animation: squiggleWave 2.4s ease-in-out infinite;
}
@keyframes squiggleWave {
  0%, 100% { transform: scaleX(1) translateY(0); }
  50% { transform: scaleX(1.15) translateY(-2px); }
}
.section-heading.center h2::after { transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .section-heading h2::after { animation: none; } }
.section-heading.center h2::after { margin-inline: auto; }
.section-dark .section-heading h2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M2 8 Q17 1 32 8 T62 8 T92 8 T118 8' stroke='%23E5A23A' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.section-heading p { margin-top: var(--space-sm); }

/* Gradient accent text + squiggle underline for the homepage intro heading */
.accent-gradient-text {
  color: var(--pillar-5); /* fallback for browsers without background-clip:text */
  background: linear-gradient(90deg, var(--pillar-5), var(--brand-secondary-text));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.intro-accent-heading { position: relative; }
.intro-accent-heading::after {
  content: "";
  display: block;
  width: 84px;
  height: 12px;
  margin-top: 0.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M2 8 Q17 1 32 8 T62 8 T92 8 T118 8' stroke='%23C94D1A' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.section-head-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split.split-top { align-items: start; }

.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;
}
.skip-link {
  position: absolute;
  top: -60px; left: var(--space-sm);
  background: var(--brand-primary);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-sm); }

/* ==========================================================================
   Focus / accessibility
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Decorative pillar motif (used as section divider / background accent)
   ========================================================================== */
.pillar-motif {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
}
.pillar-motif span {
  width: 6px;
  border-radius: 3px;
  display: block;
}
.pillar-motif span:nth-child(1) { height: 55%; background: var(--pillar-1); }
.pillar-motif span:nth-child(2) { height: 75%; background: var(--pillar-2); }
.pillar-motif span:nth-child(3) { height: 100%; background: var(--pillar-3); }
.pillar-motif span:nth-child(4) { height: 75%; background: var(--pillar-4); }
.pillar-motif span:nth-child(5) { height: 55%; background: var(--pillar-5); }

.bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

/* ==========================================================================
   Scroll reveal (JS adds .in-view)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1.in-view { transition-delay: 90ms; }
.reveal-delay-2.in-view { transition-delay: 180ms; }
.reveal-delay-3.in-view { transition-delay: 270ms; }
.reveal-delay-4.in-view { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}