/* ==========================================================================
   Alberta Aboriginal Head Start Association
   Design tokens + fixed-background shell + translucent navigation
   ========================================================================== */

:root {
  /* --- Brand (sampled from AHS_Logo_Final.pdf) --- */
  --gold:        #FBC707;
  --gold-deep:   #E0A800;
  --red:         #D91920;
  --ink:         #231F20;

  /* --- Night sky (sampled from the aurora photograph) --- */
  --navy-900:    #05091A;
  --navy-800:    #0B1430;
  --navy-700:    #16224A;
  --aurora:      #4FE3B0;   /* the green curtain */
  --aurora-dim:  #2FA37F;
  --ember:       #E87A2B;   /* the sunset band on the horizon */

  /* --- Neutrals --- */
  --cream:       #F7F3EA;
  --cream-soft:  rgba(247, 243, 234, 0.74);
  --hairline:    rgba(247, 243, 234, 0.14);

  /* --- The nav's see-through-ness ---------------------------------------
     1.00 = solid, 0 = invisible. This is the base value; the bar layers a
     gradient on top so its bottom edge fades into the photo.

     At 0.75 over a night sky the bar just looked black — there was nothing
     bright behind it to show through. 0.38 + the blur below actually reads
     as glass. Raise it toward 0.75 if you want it heavier.
     -------------------------------------------------------------------- */
  --nav-alpha:   0.38;

  /* --- Type --- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Metrics ---
     The mark is a wide 2.67:1 strip of five blocks, so it needs real height
     before the inner symbols (inukshuk, feather, drum) become legible.
     That's what drives the bar height — not the other way around. */
  --nav-h:   124px;
  --mark-h:  78px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);

  /* Half the gap between sections. Every section pays this top and bottom, so
     the visible gap between any two is twice this value. Everything that sits
     between sections uses the same token, or the rhythm drifts. */
  --section-gap: clamp(2.5rem, 6vh, 4.5rem);
  --measure: 68ch;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--cream);
  background-color: var(--navy-900); /* shows while the photo loads */
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   THE FIXED BACKGROUND

   Deliberately NOT `background-attachment: fixed` — that is broken on iOS
   Safari and janky on Android. A fixed-position layer behind the content
   does the same job and works everywhere.
   -------------------------------------------------------------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("../img/bg-mobile.webp");
  background-size: cover;
  background-position: center 30%; /* keeps the aurora in frame when cropped */
  background-repeat: no-repeat;
}

@media (min-width: 800px) {
  .backdrop { background-image: url("../img/bg-1920.webp"); }
}
@media (min-width: 1800px) {
  .backdrop { background-image: url("../img/bg-desktop.webp"); }
}

/* A light scrim to keep the hero text off a busy sky. It used to ramp to 82%
   black at the bottom — directly over the two children — back when body copy
   sat straight on the photo. The content lives on cream cards now, so the
   scrim can be far gentler and let the foreground read. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(5, 9, 26, 0.22) 0%,
      rgba(5, 9, 26, 0.30) 45%,
      rgba(5, 9, 26, 0.38) 100%
    );
}

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--nav-h);
  display: flex;
  align-items: flex-end;   /* links sit level with the base of the logo blocks */
  gap: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 0.75rem;

  /* A flat bar produced a hard seam against the night sky. A gradient that
     fades out at the bottom edge dissolves into the photo instead. */
  background: linear-gradient(
    to bottom,
    rgba(5, 9, 26, calc(var(--nav-alpha) + 0.16)) 0%,
    rgba(5, 9, 26, var(--nav-alpha)) 62%,
    rgba(5, 9, 26, calc(var(--nav-alpha) * 0.45)) 100%
  );
  border-bottom: 1px solid rgba(247, 243, 234, 0.07);

  /* Frosts whatever scrolls underneath. This is what keeps the links legible
     at low opacity once photos and text start passing behind the bar. */
  -webkit-backdrop-filter: blur(16px) saturate(135%);
          backdrop-filter: blur(16px) saturate(135%);
}

/* Browsers without backdrop-filter (older Firefox) get a solid bar rather
   than unreadable text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(5, 9, 26, 0.94); }
}

/* --- Brand lockup: blocks mark + real text -------------------------------- */
.nav__brand {
  display: flex;
  align-items: center;     /* wordmark stays centred against the mark */
  gap: 1.1rem;
  margin-right: auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.nav__mark {
  height: var(--mark-h);
  width: auto;
  flex-shrink: 0;
}

.nav__wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav__name {
  max-width: 24ch;              /* wraps to two tidy lines instead of one long one */
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-wrap: balance;
}

.nav__tagline {
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--aurora);
  white-space: nowrap;
}

.nav__brand:hover .nav__name,
.nav__brand:focus-visible .nav__name { color: var(--gold); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--cream);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

/* Active/hover marker: a short gold rule sitting flush under the word.
   The floating square read as a rendering bug, not an indicator. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active { color: var(--gold); }

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* Apply — the one loud element on the bar */
.nav__cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-900);        /* 11.9:1 against the gold — well past AA */
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--gold-deep);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: #FFD534;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(251, 199, 7, 0.32), 0 2px 0 var(--gold-deep);
}

.nav__cta:active { transform: translateY(1px); box-shadow: 0 0 0 var(--gold-deep); }

/* Hamburger (mobile only) */
.nav__toggle {
  display: none;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: var(--cream);
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 220ms ease, opacity 160ms ease;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Keyboard focus — visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link for screen readers / keyboard users */
.skip {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 160ms ease;
}
.skip:focus { top: 0; }

/* --- Mobile nav ----------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__toggle { display: block; }

  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    display: grid;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;

    background: rgba(5, 9, 26, 0.96);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--hairline);

    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }

  .nav__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: 1rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--hairline);
  }

  /* Stacked links: the gold rule becomes a left-edge bar */
  .nav__link::after {
    left: -12px;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 3px;
    height: 22px;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
  }
  .nav__link:hover::after,
  .nav__link:focus-visible::after,
  .nav__link.is-active::after { transform: translateY(-50%) scaleY(1); }

  .nav__cta {
    margin-top: 1.25rem;
    text-align: center;
    padding-block: 0.9rem;
  }
}

/* Tight phones: keep the mark, drop the tagline, shrink the name */
@media (max-width: 560px) {
  :root { --nav-h: 84px; --mark-h: 50px; }
  .nav__name    { font-size: 0.92rem; max-width: 16ch; }
  .nav__tagline { display: none; }
}

@media (min-width: 901px) {
  .nav__menu {
    display: flex;
    align-items: flex-end;
    gap: clamp(1rem, 2.2vw, 2.25rem);
    padding-bottom: 2px;   /* optical nudge — the gold rule reads as the baseline */
  }
  .nav__links { align-items: flex-end; }
}

/* ==========================================================================
   PAGE CONTENT
   Text sits on frosted navy panels so it is always legible; the aurora shows
   through the gaps between them.
   ========================================================================== */

.wrap {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }

.section--flush-top {
  /* No top padding. The preceding section already pays --section-gap on its
     bottom, and that alone is the right distance. This facts strip summarises
     the site cards directly above it, so stacking two full section gaps left a
     large empty band between the last card and the summary. Proximity signals
     they belong together. */
  padding-top: 0;
}

/* --- Type scale ----------------------------------------------------------- */
.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora);
}

.h-xl, .h-lg, .h-sm {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h-xl { margin: 0 0 1.25rem; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.h-lg { margin: 0 0 1.25rem; font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
.h-sm { margin: 2rem 0 1rem; font-size: clamp(1.1rem, 2vw, 1.35rem); }

.sub {
  max-width: 62ch;
  margin: -0.4rem 0 2rem;
  color: var(--cream-soft);
  text-wrap: pretty;
}
.sub--wide { max-width: 70ch; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.62;
}

.note {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--cream-soft);
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 10vh, 7rem);
  text-align: center;
}

/* A soft pool of shade behind the hero copy. The aurora is brightest exactly
   where the text sits, so rather than fight it colour-by-colour, we lay down a
   gentle darkened oval that lifts every line's contrast at once. Feathered
   edges keep the photo visible around it. */
.hero::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 62% at 50% 46%,
    rgba(5, 9, 26, 0.55) 0%,
    rgba(5, 9, 26, 0.42) 42%,
    rgba(5, 9, 26, 0.12) 72%,
    transparent 100%
  );
  pointer-events: none;
}
.hero > * { position: relative; }

.hero .eyebrow { color: var(--aurora); }

.hero__title {
  margin: 0 auto 1.5rem;
  max-width: 17ch;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(5, 9, 26, 0.9), 0 1px 3px rgba(5, 9, 26, 0.55);
}
.hero__title em { font-style: normal; color: var(--gold); }

.hero__lede {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: #F2EEE4;                 /* brighter than cream-soft: 4.3:1 on aurora, vs 2.4 before */
  text-shadow: 0 1px 3px rgba(5, 9, 26, 0.9), 0 2px 22px rgba(5, 9, 26, 0.85);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
}
.panel .hero__actions { justify-content: flex-start; }

.page-head {
  /* No bottom padding. The section below already pays --section-gap on its
     top, which alone is the right distance here. A page title and the content
     directly beneath it are one unit — giving that boundary the SAME gap used
     between independent sections made the heading look detached from the thing
     it introduces. Proximity is what signals they belong together. */
  padding-block: clamp(3rem, 9vh, 5.5rem) 0;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.btn--gold {
  background: var(--gold);
  color: var(--navy-900);          /* 11.9:1 — comfortably past AA */
  box-shadow: 0 2px 0 var(--gold-deep);
}
.btn--gold:hover, .btn--gold:focus-visible {
  background: #FFD534;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(251, 199, 7, 0.3), 0 2px 0 var(--gold-deep);
}

.btn--ghost {
  background: rgba(247, 243, 234, 0.06);
  border-color: rgba(247, 243, 234, 0.28);
  color: var(--cream);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: rgba(247, 243, 234, 0.14);
  border-color: var(--cream);
  transform: translateY(-1px);
}

/* --- Panels --------------------------------------------------------------- */
.panel {
  padding: clamp(1.6rem, 3.5vw, 3rem);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: rgba(11, 20, 48, 0.82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

.panel p { max-width: var(--measure); color: var(--cream-soft); }
.panel p:last-child { margin-bottom: 0; }
/* Only for panels stacked in normal flow. Inside a grid, adjacent siblings sit
   in separate cells, and this margin would push the second one down inside its
   own cell — which is exactly what knocked Mission and Vision out of line. */
.panel + .panel { margin-top: 1.25rem; }
.ltp__pair .panel + .panel,
.ltp__grid .panel + .panel,
.cards .panel + .panel,
.media .panel + .panel { margin-top: 0; }

.panel--cta { text-align: left; border-color: rgba(251, 199, 7, 0.28); }

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; } }

.quote-panel .signoff {
  margin-top: 1.5rem;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--gold);
}
.byline { font-size: 0.9rem; letter-spacing: 0.02em; }

/* --- Card grid ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.card {
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(11, 20, 48, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: border-color 180ms ease, transform 180ms ease;
}
.card:hover { border-color: rgba(251, 199, 7, 0.4); transform: translateY(-2px); }

.card__icon { display: block; font-size: 1.7rem; line-height: 1; margin-bottom: 0.8rem; }

.card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.25;
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--gold); }

.card p, .card address {
  margin: 0;
  font-size: 0.95rem;
  font-style: normal;
  color: var(--cream-soft);
}
.card a { color: var(--aurora); }

/* --- Numbered steps ------------------------------------------------------- */
/* Numbers are used here because enrollment genuinely is a sequence — step 4
   cannot happen before step 2. They carry information, not decoration. */
.steps {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 0 16px 16px 0;
  background: rgba(11, 20, 48, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.step__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-900);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.step h3 {
  margin: 0.35rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
}
.step p { margin: 0; color: var(--cream-soft); }

/* --- People --------------------------------------------------------------- */
.people {
  display: grid;
  /* One column on phones; steps up below. The office team is nine people, so
     three across lands exactly three full rows with nothing stranded. */
  grid-template-columns: 1fr;
  gap: 0.9rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(247, 243, 234, 0.04);
}

/* Initials, not photos — the source site does the same for most staff, and it
   avoids 20 headshot requests before launch. Swap in <img> when you have them. */
.person__badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), #E08A00);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.person h3 { margin: 0; font-size: 0.98rem; font-weight: 700; }
.person p  { margin: 0; font-size: 0.85rem; color: var(--cream-soft); }
.person a  { color: var(--aurora); }

/* --- Facts strip ---------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  margin: 2rem 0 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  background: var(--hairline);
}
.facts > div { padding: 1.15rem 1.25rem; background: rgba(11, 20, 48, 0.86); }
.facts dt { font-weight: 700; font-size: 0.98rem; color: var(--gold); }
.facts dd { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--cream-soft); }
.facts a  { color: inherit; }

/* --- Staff rows ----------------------------------------------------------- */
.staff { margin: 1rem 0 0; padding: 0; }
.staff > div {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 640px) { .staff > div { grid-template-columns: 190px 1fr; } }
.staff dt { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aurora); }
.staff dd { margin: 0; color: var(--cream); }

/* --- Ticks ---------------------------------------------------------------- */
.ticks { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--cream-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--gold);
}



/* --- Pull quote ----------------------------------------------------------- */
.pull {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid rgba(79, 227, 176, 0.28);
  border-radius: 18px;
  background: rgba(11, 20, 48, 0.78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.pull p {
  margin: 0;
  max-width: 70ch;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* --- Misc ----------------------------------------------------------------- */
.alert {
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: rgba(251, 199, 7, 0.09);
  color: var(--cream) !important;
}

.jump { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.jump a {
  padding: 0.5rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--cream);
  font-size: 0.9rem;
  text-decoration: none;
}
.jump a:hover { border-color: var(--gold); color: var(--gold); }

.contact-line { margin: 1.25rem 0; }
.contact-line address { font-style: normal; margin-bottom: 0.35rem; }
.contact-line a { color: var(--aurora); }

.linklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.linklist a { font-size: 0.93rem; color: var(--aurora); }

.funder h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
}

a { color: var(--aurora); }
a:hover { color: var(--gold); }

/* --- Forms ---------------------------------------------------------------- */
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.1rem;
  margin-top: 1.75rem;
}
.field--wide { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.field label span { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(247, 243, 234, 0.2);
  border-radius: 10px;
  background: rgba(5, 9, 26, 0.55);
  color: var(--cream);
  font: inherit;
  font-size: 0.98rem;
}
.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: transparent;
}

.field select option { background: var(--navy-800); color: var(--cream); }

/* --- Footer --------------------------------------------------------------- */
.footer {
  /* No margin-top. The preceding section already pays --section-gap on its
     bottom; adding 3rem here made the footer gap 11.5rem against 9rem
     everywhere else — the single largest break on the page. */
  margin-top: 0;
  padding-block: var(--section-gap) 2rem;
  background: rgba(5, 9, 26, 0.92);

  /* NO border-top and NO backdrop-filter here.

     border-top drew a 1px --hairline line across the full width — the sharp
     line visible at the top of the footer.

     backdrop-filter drew the other half of the problem: it blurs the
     photograph inside the footer's box but not above it, so the image visibly
     changed at that same edge. This rule was overridden by a later
     `backdrop-filter: none` until that declaration was removed, at which point
     the blur came back without anything else changing. Both are gone at source
     now rather than being cancelled downstream. */
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.footer__mark { height: 46px; width: auto; margin-bottom: 1rem; }
.footer__blurb { margin: 0 0 1rem; max-width: 40ch; font-size: 0.92rem; color: var(--cream-soft); }
.footer__social { font-size: 0.9rem; }

.footer__head {
  margin: 0 0 0.9rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.footer__list a { font-size: 0.93rem; color: var(--cream-soft); text-decoration: none; }
.footer__list a:hover { color: var(--gold); text-decoration: underline; }

.footer__address {
  margin: 0 0 0.75rem;
  font-style: normal;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--cream-soft);
}

/* Land acknowledgement — given room to breathe rather than buried in fine print. */
.acknowledge {
  margin-top: 3rem;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--hairline);
}
.acknowledge p {
  max-width: 82ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--cream-soft);
  text-wrap: pretty;
}
.acknowledge__word {
  margin-top: 0.9rem !important;
  font-family: var(--display);
  font-size: 1.15rem !important;
  font-weight: 600;
  color: var(--gold) !important;
}

.footer__legal {
  margin: 2rem 0 0;
  font-size: 0.85rem;
  /* Was rgba(85,80,75,0.7), which composited to 3.35:1 — a fail. It had been
     written against the earlier, lighter ink palette and never revisited. */
  color: var(--ink-body);
}

/* --------------------------------------------------------------------------
   Respect people who've asked their OS to reduce motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   IMAGERY
   Every <img> carries width/height so the browser reserves the space before
   the file arrives — no layout jumping as the page loads.
   ========================================================================== */

.shot {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: rgba(11, 20, 48, 0.6);
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
}

.shot figcaption {
  padding: 0.75rem 1.1rem;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--cream-soft);
  background: rgba(5, 9, 26, 0.55);
}

.shot--wide { max-width: 760px; margin-inline: auto; }

/* Image beside a block of text; stacks on narrow screens */
.media {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 880px) {
  .media { grid-template-columns: 0.85fr 1.15fr; gap: 1.75rem; }
}

/* Executive Director's portrait, floated into the welcome message */
.portrait {
  float: right;
  width: 132px;
  height: 132px;
  margin: 0 0 1rem 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(251, 199, 7, 0.5);
  shape-outside: circle(50%);   /* text hugs the curve, not the box */
}
@media (max-width: 560px) {
  .portrait { float: none; margin: 0 0 1.25rem; }
}

/* Staff portraits reuse the initials-badge slot, so markup stays identical */
.person__photo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(251, 199, 7, 0.45);
}

.site-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

/* Funder logos arrive on white backgrounds. A light plate keeps them from
   floating awkwardly on the navy. */
/* Constrained by HEIGHT, not width. These logos have wildly different aspect
   ratios — a 5:1 wordmark beside a circular crest — and capping them to the
   same WIDTH would make the square one look several times larger. Equal height
   is what actually reads as equal.

   The white plate is deliberate. The PHAC logo contains the Canadian flag,
   whose centre band is white and connects to the outer background, so the
   white cannot be keyed out — and rendering the flag with a transparent stripe
   through it would be a brand-usage violation as well as a visual mess. Every
   funder sits on the same plate so they match. */
.funder__logo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72px;
  height: auto;
  margin: 0 auto 1.1rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: #FFFFFF;
  box-sizing: content-box;
}

/* The painting is 3:4 portrait — a tall artwork. Cap its height so it doesn't
   tower over the text beside it, and don't crop it: it's someone's painting. */
.shot--art img { max-height: 560px; object-fit: contain; background: rgba(5, 9, 26, 0.35); }

/* ==========================================================================
   LIGHT SURFACES

   Cards and panels flip to cream. That means everything *inside* them has to
   flip too — the aurora green and gold that read beautifully on navy are
   nearly invisible on cream. These overrides handle the whole cascade.

   Section headings, eyebrows and the hero stay light: they sit directly on
   the photograph, not on a card.
   ========================================================================== */

:root {
  --surface:      #F7F3EA;   /* the card itself */
  --surface-edge: rgba(35, 31, 32, 0.12);
  --ink-strong:   #201D1E;   /* headings   — 15.4:1 on cream */
  --ink-body:     #443F3B;   /* darkened so cards can be see-through */
  --ink-link:     #08553F;   /* deep spruce, darkened for translucency */
  --ink-accent:   #6E4D00;   /* brand gold, darkened for translucency        */
}

/* --- The surfaces --------------------------------------------------------- */
.panel,
.card,
.step,
.pull,
.person,
.facts > div,
.shot figcaption {
  background: var(--surface);
  border-color: var(--surface-edge);
  color: var(--ink-body);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.panel { box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.75); }
.card  { box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.6); }

.card:hover { border-color: var(--ink-accent); }

/* --- Text inside them ----------------------------------------------------- */
.panel h2, .panel h3,
.card h3, .step h3, .person h3,
.funder h3 { color: var(--ink-strong); }

.panel p, .card p, .step p, .person p,
.panel address, .card address,
.contact-line address,
.footer__blurb + *,
.pull p { color: var(--ink-body); }

.panel .lede { color: var(--ink-strong); }

.panel .eyebrow,
.card .eyebrow { color: var(--ink-link); }

.panel a, .card a, .step a, .person a, .pull a,
.linklist a, .contact-line a { color: var(--ink-link); }

.panel a:hover, .card a:hover, .linklist a:hover,
.contact-line a:hover { color: var(--ink-accent); }

.card h3 a { color: var(--ink-strong); }
.card h3 a:hover { color: var(--ink-link); }

.panel .note { color: var(--ink-body); }

/* --- Components that carried colour ---------------------------------------- */
.step { border-left-color: var(--ink-accent); }

/* The gold number badge keeps working: navy text on gold is 11.9:1 either way */
.step__num { background: var(--gold); color: var(--navy-900); }

.ticks li { color: var(--ink-body); }
.ticks li::before { background: var(--ink-accent); }

.spice li {
  border-color: rgba(169, 121, 0, 0.35);
  background: rgba(251, 199, 7, 0.14);
  color: var(--ink-strong);
}
.spice span { color: var(--ink-accent); }

.pull { border-color: rgba(11, 107, 82, 0.3); }
.pull p { color: var(--ink-strong); }

.facts { background: var(--surface-edge); border-color: var(--surface-edge); }
.facts dt { color: var(--ink-strong); }
.facts dd { color: var(--ink-body); }
.facts a  { color: var(--ink-link); }

.staff > div { border-top-color: var(--surface-edge); }
.staff dt { color: var(--ink-link); }
.staff dd { color: var(--ink-strong); }

.split { border-top-color: var(--surface-edge); }

.person { background: rgba(35, 31, 32, 0.04); }
.person__badge { background: linear-gradient(140deg, var(--gold), #E08A00); color: var(--navy-900); }
.person__photo { border-color: rgba(35, 31, 32, 0.15); }

.quote-panel .signoff { color: var(--ink-accent); }
.byline { color: var(--ink-strong); }

.alert {
  border-left-color: var(--ink-accent);
  background: rgba(251, 199, 7, 0.16);
  color: var(--ink-strong) !important;
}

.panel--cta { border-color: rgba(169, 121, 0, 0.35); }

/* Funder logos come on white, so they no longer need a plate behind them */


.shot figcaption { color: var(--ink-body); }

/* --- Buttons on cream ----------------------------------------------------- */
/* The ghost button was built for a dark backdrop — on cream it vanished. */
.panel .btn--ghost,
.card .btn--ghost {
  background: transparent;
  border-color: rgba(35, 31, 32, 0.3);
  color: var(--ink-strong);
}
.panel .btn--ghost:hover,
.panel .btn--ghost:focus-visible {
  background: rgba(35, 31, 32, 0.06);
  border-color: var(--ink-strong);
}

/* --- Forms on cream ------------------------------------------------------- */
.panel .field label { color: var(--ink-strong); }
.panel .field label span { color: var(--red); }

.panel .field input,
.panel .field select,
.panel .field textarea {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.22);
  color: var(--ink-strong);
}

.panel .field input::placeholder,
.panel .field textarea::placeholder { color: rgba(85, 80, 75, 0.6); }

.panel .field input:focus,
.panel .field select:focus,
.panel .field textarea:focus {
  outline-color: var(--ink-link);
  border-color: transparent;
}

.panel .field select option { background: #FFFFFF; color: var(--ink-strong); }

/* ==========================================================================
   FOOTER — cream, to match the cards

   Bonus: the logo's black block outlines are invisible on navy but read
   properly on cream, so the mark finally looks like itself down here.
   ========================================================================== */

.footer {
  background: var(--surface);
  color: var(--ink-body);
}

.footer__head { color: var(--ink-accent); }

.footer__blurb,
.footer__address { color: var(--ink-body); }

.footer__list a,
.footer__social {
  color: var(--ink-body);
  text-decoration: none;
}
.footer__list a:hover,
.footer__social:hover {
  color: var(--ink-link);
  text-decoration: underline;
}

.acknowledge {
  border-top-color: var(--surface-edge);
}
.acknowledge p { color: var(--ink-body); }
.acknowledge__word { color: var(--ink-accent) !important; }

.footer__legal { color: var(--ink-body); opacity: 0.85; }

/* The nav is still dark glass over the photo, and the footer is now a solid
   cream block. Without this the page ended on an abrupt hard edge; a short
   fade lets the aurora dissolve into the footer instead. */


/* ==========================================================================
   LIVING AURORA

   The photo stays fixed and untouched. These are curtains of light drifting
   over the sky, blended with `screen` so they ADD light rather than paint
   over it.

   Sizing matters here: the blur radius must stay well UNDER the stripe width,
   or the stripes smear into each other and flatten into a featureless wash
   with no visible motion. Stripes ~300px, blur ~50px.

   Only `transform` and `opacity` animate — both GPU-composited, so this costs
   nothing on scroll.

   One knob:  --aurora-strength: 0 turns it off.
   ========================================================================== */

:root { --aurora-strength: 1.6; }

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;                 /* above the photo, behind every bit of content */
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: var(--aurora-strength);

  /* Two mask layers, intersected: keep only what falls in the UPPER sky AND
     on the RIGHT side, where the photograph's real curtains are. Without the
     horizontal mask the effect reads strongest over the empty navy on the
     left — `screen` adds light, so it shows up most where the sky is darkest,
     which is the opposite of where we want it. */
  -webkit-mask-image:
      linear-gradient(to bottom, #000 0%, #000 44%, rgba(0,0,0,0.55) 62%, transparent 78%),
      linear-gradient(to right, transparent 26%, rgba(0,0,0,0.35) 42%, #000 62%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
      linear-gradient(to bottom, #000 0%, #000 44%, rgba(0,0,0,0.55) 62%, transparent 78%),
      linear-gradient(to right, transparent 26%, rgba(0,0,0,0.35) 42%, #000 62%, #000 100%);
          mask-composite: intersect;
}

.aurora__band {
  position: absolute;
  top: -35%;
  left: -50%;
  width: 200%;
  height: 120%;
  filter: blur(42px);
  will-change: transform, opacity;
}

/* Band 1 — the green curtain. Wide, slow, the dominant motion. */
.aurora__band--1 {
  background: repeating-linear-gradient(
    114deg,
    transparent               0px, transparent              180px,
    rgba(79, 227, 176, 0.66) 300px, rgba(79, 227, 176, 0.66) 430px,
    transparent              560px, transparent              760px,
    rgba(150, 250, 205, 0.48) 880px, rgba(150, 250, 205, 0.48) 980px,
    transparent             1120px, transparent             1400px
  );
  animation: drift-1 17s ease-in-out infinite alternate;
}

/* Band 2 — the violet edge. Narrower, faster, travelling the other way so the
   two never settle into an obvious repeating rhythm. */
.aurora__band--2 {
  background: repeating-linear-gradient(
    107deg,
    transparent               0px, transparent              240px,
    rgba(165, 120, 255, 0.56) 360px, rgba(165, 120, 255, 0.56) 470px,
    transparent              600px, transparent              900px,
    rgba(100, 215, 255, 0.44) 1040px, rgba(100, 215, 255, 0.44) 1150px,
    transparent             1300px, transparent             1700px
  );
  animation: drift-2 26s ease-in-out infinite alternate;
}

@keyframes drift-1 {
  from { transform: translate3d(-9%, 0, 0) skewX(0deg) scaleY(1);        opacity: 0.35; }
  35%  { transform: translate3d(-2%, -2%, 0) skewX(-4deg) scaleY(1.08);  opacity: 1; }
  70%  { transform: translate3d(5%, 1%, 0) skewX(2deg) scaleY(0.96);     opacity: 0.5; }
  to   { transform: translate3d(12%, 2%, 0) skewX(4deg) scaleY(1.05);    opacity: 0.95; }
}

@keyframes drift-2 {
  from { transform: translate3d(11%, 1%, 0) skewX(2deg) scaleY(1.04);    opacity: 0.9; }
  40%  { transform: translate3d(2%, -4%, 0) skewX(-3deg) scaleY(0.94);   opacity: 0.25; }
  to   { transform: translate3d(-11%, 0, 0) skewX(4.5deg) scaleY(1.1);   opacity: 1; }
}

/* Band 3 — a thin, bright ribbon on a short cycle. This is what your eye
   actually reads as "the lights are alive": one fast-moving element against
   two slow ones. */
@keyframes drift-3 {
  from { transform: translate3d(-4%, 2%, 0) skewX(-2deg);   opacity: 0.15; }
  30%  { transform: translate3d(3%, -1%, 0) skewX(3deg);    opacity: 0.85; }
  60%  { transform: translate3d(8%, 1%, 0) skewX(-1deg);    opacity: 0.3; }
  to   { transform: translate3d(14%, -2%, 0) skewX(4deg);   opacity: 0.75; }
}

.aurora__band--3 {
  background: repeating-linear-gradient(
    120deg,
    transparent               0px, transparent              320px,
    rgba(190, 255, 225, 0.50) 400px, rgba(190, 255, 225, 0.50) 452px,
    transparent              540px, transparent             1250px
  );
  filter: blur(26px);
  animation: drift-3 11s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   Reduced motion — this override is NOT optional.

   The global reduced-motion rule above forces animation-duration to 0.01ms.
   On a finite animation that's harmless. On an INFINITE one it restarts the
   loop every hundredth of a second — a full-screen strobe, and a seizure
   risk. Kill the animation outright; leave the curtains as a still glow.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aurora__band {
    animation: none !important;
    opacity: 0.75;
    transform: none;
  }
}

/* ==========================================================================
   WEBGL AURORA

   aurora.js adds .has-gl-aurora to <html> only once the shader has actually
   compiled, linked and drawn. Until then — and forever, on any device without
   WebGL — the CSS curtains above stay on screen. There is no moment where the
   sky is empty.
   ========================================================================== */

.aurora-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Shader is live: retire the CSS bands so the two don't stack. */
.has-gl-aurora .aurora__band { display: none; }

/* The shader does its own masking and falloff internally, so the CSS mask and
   the strength multiplier would only fight it. */
.has-gl-aurora .aurora {
  opacity: 1;
  -webkit-mask-image: none;
          mask-image: none;
}

/* Phone number in the hero. Many families served by this program would sooner
   call than fill in a form, and the office is staffed 8:15–4:15. It shouldn't
   take three scrolls to find the number. */
.hero__call {
  margin: 1.6rem 0 0;
  font-size: 1.02rem;
  color: var(--cream-soft);
  text-shadow: 0 1px 14px rgba(5, 9, 26, 0.95);
}

.hero__call a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(251, 199, 7, 0.4);
  padding-bottom: 1px;
  white-space: nowrap;
}
.hero__call a:hover,
.hero__call a:focus-visible { border-bottom-color: var(--gold); }

.hero__hours {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: rgba(247, 243, 234, 0.62);
}
@media (min-width: 620px) {
  .hero__hours { display: inline; margin-top: 0; }
  .hero__hours::before { content: " · "; }
}

/* ==========================================================================
   PRINT

   Real scenario: a Family Support Worker prints the Locations page for a
   parent who has no printer at home. Without this it prints a night sky, a
   nav bar, and an aurora gradient — wasting a cartridge and producing
   something nobody can read.

   Print gets black text on white paper, and URLs spelled out, because a
   printed hyperlink is useless.
   ========================================================================== */

@media print {
  /* Everything decorative goes */
  .backdrop,
  .aurora,
  .aurora-gl,
  .nav__toggle,
  .nav__menu,
  .skip,
  .footer::before,
  .jump,
  .hero__actions,
  .btn,
  .card__icon,
  .step__num,
  .person__badge {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  /* Keep the logo, drop the sticky bar */
  .nav {
    position: static !important;
    min-height: auto !important;
    padding: 0 0 12pt !important;
    background: none !important;
    border-bottom: 1pt solid #000 !important;
    backdrop-filter: none !important;
  }
  .nav__mark { height: 44pt !important; }
  .nav__name, .nav__tagline { color: #000 !important; }

  /* Flatten every panel — no shadows, no rounded corners, no fills */
  .panel, .card, .step, .pull, .person, .facts > div,
  .footer, .shot, .shot figcaption {
    background: #fff !important;
    color: #000 !important;
    border: 1pt solid #999 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .panel h2, .panel h3, .card h3, .step h3,
  .h-xl, .h-lg, .h-sm, .eyebrow, .sub, .note,
  .panel p, .card p, .step p, .facts dt, .facts dd,
  .footer__head, .footer__list a, .acknowledge p, .acknowledge__word {
    color: #000 !important;
    text-shadow: none !important;
  }

  .hero { min-height: auto !important; padding: 12pt 0 !important; }
  .hero__title { font-size: 22pt !important; }

  /* A printed hyperlink is useless unless you can read the address */
  a[href^="http"]::after  { content: " (" attr(href) ")"; font-size: 9pt; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  a[href^="tel:"]::after  { content: ""; }   /* the number is already the text */
  a[href^="#"]::after,
  a[href$=".html"]::after { content: ""; }   /* internal links: no point */

  /* Don't split a site's address away from its heading */
  .card, .step, .person, .panel { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Forms don't print usefully */
  .form { display: none !important; }
}

/* ==========================================================================
   FIXES
   ========================================================================== */

/* --- 1. The painting was burying the homepage on mobile -------------------
   It's 750x1000 — tall — and sits first in the DOM. Once the grid collapses
   to one column on a phone, a parent scrolled past the hero straight into a
   full-height painting, with the mission statement pushed a screen and a half
   further down.

   `order` moves it below the text on narrow screens WITHOUT touching the
   source order, so the reading order stays correct for screen readers. It
   also gets a height cap so it can't dominate the fold. */
@media (max-width: 879px) {
  .media { display: flex; flex-direction: column; }
  .media .panel { order: 1; }
  .media .shot--art { order: 2; }
  .shot--art img { max-height: 420px; }
}

/* --- 4. <address> replaced by .addr in the site cards --------------------- */
.addr {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-body);
}
.panel .addr, .card .addr { color: var(--ink-body); }

/* --- 5. Mobile menu: dim and seal the page behind it ---------------------- */
.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* under the nav (100), over everything else */
  background: rgba(5, 9, 26, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}
.nav__scrim.is-open { opacity: 1; visibility: visible; }

@media (min-width: 901px) {
  .nav__scrim { display: none; }
}

/* Stop the page scrolling behind an open menu */
body.menu-open { overflow: hidden; }

/* --- Hero proof points ----------------------------------------------------
   The answers to the four questions a parent is silently asking, placed where
   they'll actually be seen. Deliberately plain: no icons, no cards, nothing to
   decode. Just the facts, above the fold. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.4rem;
  margin: 1.6rem auto 0;
  padding: 0;
  list-style: none;
  max-width: 52rem;
}

/* Facts, not buttons. No pill, no fill, no border — just text with a gold tick
   in front, so nothing here competes with the two real buttons below. */
.hero__proof li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cream);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(5, 9, 26, 0.9);
}

.hero__proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);   /* small gold diamond tick */
}

/* The cost point still gets the spotlight — but through colour, not a box. */
.hero__proof li:first-child {
  color: var(--gold);
  font-weight: 700;
}

@media (max-width: 480px) {
  .hero__proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    width: fit-content;
    text-align: left;
  }
  .hero__proof li { font-size: 0.95rem; }
}

/* --- Photo benefit cards --------------------------------------------------
   The "Why choose us" cards now lead with a photo instead of an emoji. Image
   spans the full card width at the top; text sits below with the usual padding.
   The base .card padding is removed so the photo can go edge-to-edge. */
.card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(11, 20, 48, 0.4);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.card--photo:hover .card__media img { transform: scale(1.04); }

.card__body { padding: 1.35rem 1.5rem 1.5rem; }
.card__body h3 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .card__media img { transition: none; }
  .card--photo:hover .card__media img { transform: none; }
}

/* --- Site map cards -------------------------------------------------------
   OpenStreetMap embeds — no API key, no billing, no tracking. The iframe is
   lazy-loaded so three maps don't block the homepage. */
.card--map { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.map-frame {
  aspect-ratio: 4 / 3;
  background: rgba(11, 20, 48, 0.5);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* OSM tiles are light; a touch of desaturation settles them against the
     dark page without hiding the streets. */
  filter: saturate(0.9);
}

.card--map .card__body { padding: 1.25rem 1.4rem 1.4rem; }
.card--map h3 { margin-top: 0; }

.map-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-link);
  text-decoration: none;
}
.map-link:hover { color: var(--ink-accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .map-frame iframe { pointer-events: auto; }  /* still usable, just no auto-anim */
}

/* ==========================================================================
   ABOUT MASTHEAD — logo left, Kihew right

   The bird was previously absolute-positioned over the panel's corner, which
   meant every size change risked it landing on the text. It's in normal flow
   now: a two-column row that collapses to a stack on narrow screens. Nothing
   can collide because nothing overlaps.
   ========================================================================== */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.masthead__brand { min-width: 0; }

.panel__logo {
  margin: 0;
  line-height: 0;              /* kills the inline-image baseline gap */
}

.panel__logo img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.masthead__bird {
  margin: 0;
  min-width: 0;
}

.masthead__bird img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(5, 9, 26, 0.28));
}

.masthead__bird figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-accent);
}

/* Divider between masthead and copy. Full width now that the masthead is a
   row rather than a centred stack. */
.panel__rule {
  height: 2px;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  border: 0;
  border-radius: 2px;
  background: var(--ink-accent);
  opacity: 0.4;
}

.section--intro { padding-top: var(--section-gap); }

@media (max-width: 700px) {
  .masthead {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
  }
  .panel__logo img { max-width: 260px; margin-inline: auto; }
  .masthead__bird  { max-width: 320px; margin-inline: auto; }
}

/* ==========================================================================
   SIX PROGRAM COMPONENTS

   The artwork carries this section, so there are no card frames. Each image's
   background has been flood-filled to match --surface, which means the
   illustrations blend into the panel instead of sitting in six boxes. Putting
   a border around every picture would fight the imagery and turn a rich
   section into a grid of thumbnails.
   ========================================================================== */

.components-panel { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.component { display: flex; flex-direction: column; }

.component__media {
  display: block;
  margin-bottom: 0.9rem;
}

.component__media img {
  width: 100%;
  height: auto;
  display: block;
  /* Nothing behind the image — it IS the surface. */
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.component:hover .component__media img { transform: scale(1.03); }

.component__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  color: var(--ink-strong);
  text-wrap: balance;
}

/* A short gold rule ties each title back to the artwork above it. */
.component__title::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 0.65rem;
  background: var(--ink-accent);
}

.component__note {
  margin: 0.5rem 0 0;
  font-size: 0.93rem;
  color: var(--ink-body);
}

@media (prefers-reduced-motion: reduce) {
  .component__media img { transition: none; }
  .component:hover .component__media img { transform: none; }
}

/* --- Logo as page heading -------------------------------------------------
   Used on About, where the logo's own wordmark says exactly what the heading
   said. The <h1> is kept for document structure; only its contents changed.

   The logo is shown in full brand colour, which means it needs a light plate:
   its text is near-black and scores 1.1:1 against the night sky. On the cream
   plate it's 14.7:1. The plate also matches the cream panels used everywhere
   else on the site, so it reads as part of the design rather than a patch. */
/* --- Masthead inside the panel --------------------------------------------
   The logo used to sit on its own cream plate above the panel, which read as
   two disconnected boxes with a gap between them. It now lives inside the
   panel: the panel is already a cream surface, so it doubles as the plate and
   the whole thing becomes one object.

   The logo's near-black text scores 9.8:1 against the translucent panel, so
   it stays perfectly legible without the extra backing. */
.panel__logo {
  margin: 0 auto 1.5rem;
  line-height: 0;              /* kills the inline-image baseline gap */
  text-align: center;
}

.panel__logo img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-inline: auto;
}

/* Divider between the masthead and the copy below it. */
.panel__rule {
  width: min(140px, 40%);
  height: 3px;
  margin: 0 auto 2rem;
  border: 0;
  border-radius: 2px;
  background: var(--ink-accent);
  opacity: 0.55;
}



@media (max-width: 560px) {
  .panel__logo img { max-width: 260px; }
}

/* ==========================================================================
   NAV OVERFLOW FIX

   At 375px the bar used 373 of 375 available pixels — a 2px margin, which is
   luck rather than a layout. At 320px (older iPhone SE, still in use) it
   overflowed and pushed the whole site into horizontal scroll.

   The logo mark is a wide 2.67:1 strip, so its height drives its width. The
   fix is to step that height down on very narrow screens and let the wordmark
   wrap, plus allow the lockup to shrink rather than force overflow.
   ========================================================================== */

@media (max-width: 430px) {
  :root { --nav-h: 72px; --mark-h: 38px; }

  .nav__brand { gap: 0.6rem; min-width: 0; }

  /* Previously flex-shrink: 0 — it could not give way, so something had to
     overflow. Now it can compress a little under pressure. */
  .nav__mark { flex-shrink: 1; min-width: 74px; }

  .nav__name {
    font-size: 0.8rem;
    line-height: 1.15;
    max-width: 13ch;           /* wraps to two lines instead of forcing width */
  }
}

/* Last-resort guard. If a future edit makes the lockup wider again, this stops
   the entire page from scrolling sideways — the single worst mobile symptom.
   It is a safety net, not a substitute for the sizing above. */
html, body { overflow-x: clip; }

/* --- Form privacy notice --------------------------------------------------
   Sits directly above the submit button, where someone actually reads it —
   not buried in a footer link. */
.form-privacy {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--ink-link);
  border-radius: 0 8px 8px 0;
  background: rgba(11, 107, 82, 0.07);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-body);
}
.form-privacy strong { color: var(--ink-strong); }

/* Honeypot: removed from view and from the accessibility tree, but still
   submitted. Deliberately NOT display:none — some bots skip hidden fields,
   and some screen readers would announce it. Off-canvas is the reliable way. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   TRANSLUCENT SURFACES

   Cards and panels let the aurora show through. Two constraints set the
   number:

   1. Contrast. Over the darkest part of the photo, cream at 90% still gives
      5.83:1 for body text and 4.74:1 for links — both clear AA. At 86% the
      links drop to 4.35 and fail. So 0.90 is the floor, not a preference.

   2. The component illustrations had their backgrounds flood-filled to solid
      cream so they'd blend into an opaque panel. They have been regenerated
      with real alpha, otherwise they would read as opaque cream blocks
      floating on a see-through panel.

   The blur is what makes this work: it softens the photo behind the text so
   detail doesn't compete with the words.
   ========================================================================== */

/* 0.80 lets a fifth of the aurora through. It is the floor, not a taste
   call: the inks above were darkened specifically to reach it, and at 0.78
   the gold accent drops to 4.45 and fails AA. Lower this and text breaks. */
:root { --surface-alpha: 0.80; }

.panel,
.card,
.step,
.pull,
.facts > div,
.shot figcaption {
  background: rgba(247, 243, 234, var(--surface-alpha));
  -webkit-backdrop-filter: blur(14px) saturate(115%);
          backdrop-filter: blur(14px) saturate(115%);
}

/* Nested surfaces stay opaque. Stacking two translucent layers doubles the
   darkening underneath and would push the inner one below AA. */
.panel .card,
.panel .step,
.panel .facts > div {
  /* Nested inside an already-translucent panel, so these stay closer to solid.
     Two stacked translucent layers darken twice over and would fail AA. */
  background: rgba(247, 243, 234, 0.55);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Slightly more solid, since these sit on the busiest part of the photo. */
.person { background: rgba(247, 243, 234, 0.55); }

/* Footer: solid, with a clean edge.

   Four attempts at fading the photograph into the footer all failed, and the
   last one failed even when it was technically correct — because the fade
   itself was the problem. A soft horizontal wash across a photograph reads as
   a rendering artifact, not a decision: every other edge on this page (cards,
   panels, the nav) is crisp, so a blurry one looks broken.

   A solid footer with a definite edge is what the rest of the page already
   does. It is also the only version with nothing to go wrong: no second layer,
   no alpha compounding, no backdrop-filter boundary. */
.footer {
  background: var(--surface);
  padding-top: var(--section-gap);
}

/* No backdrop-filter support (older Firefox): fall back to solid rather than
   leaving text over an unblurred photograph. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .card, .step, .pull, .facts > div {
    background: var(--surface);
  }
}

/* ==========================================================================
   SPICE — whole-child development

   Rebuilt from the design as real HTML rather than dropped in as a picture.
   Text in an image can't be selected, searched, translated, read aloud, or
   reflowed on a phone — and it would have needed to be redrawn for every copy
   change.

   The circle fills use the design's original colours. The LABELS use darker
   variants of the same hues, because the originals fail as text: the orange
   scored 1.51:1 on the panel. Same palette, legible.
   ========================================================================== */

.spice-panel { overflow: hidden; }

.spice-head {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  /* Photo left, words right. The figure comes AFTER the text in the HTML so a
     screen reader hears the heading first; `order` moves it visually without
     disturbing that.

     A fixed photo column rather than a fractional one: the child is a small
     accent beside the heading, not an equal half of a two-column split, so
     the text should take whatever is left over. */
  .spice-head {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
  }
  .spice-head__photo { order: -1; justify-self: start; max-width: 240px; }
}

@media (min-width: 1040px) {
  .spice-head { grid-template-columns: 280px minmax(0, 1fr); }
  .spice-head__photo { max-width: 280px; }
}

.spice-head .sub { margin-bottom: 0; }

/* The photo is a transparent cutout, so it floats directly on the panel. A
   rounded frame would only draw a box around empty space — the shape of the
   child IS the shape. */
.spice-head__photo {
  margin: 0;
  max-width: 240px;
  justify-self: center;
}
.spice-head__photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(5, 9, 26, 0.22));
}

/* --- The five areas -------------------------------------------------------- */
.spice-grid {
  display: grid;
  /* auto-fit with a 170px minimum came to ~946px across five columns in a
     ~928px panel, so the fifth wrapped onto its own row. Explicit columns and
     a tighter gap keep S-P-I-C-E on one line, which matters when the initials
     are meant to be read as a word. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem) clamp(0.75rem, 1.5vw, 1.15rem);
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  border-top: 1px solid var(--surface-edge);
  list-style: none;
  text-align: center;
}

.spice-item { display: flex; flex-direction: column; align-items: center; }

.spice-item__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--spice-fill);
  color: #fff;                        /* the glyph */
  box-shadow: 0 0 0 3px rgba(247, 243, 234, 0.75),
              0 0 0 4px var(--spice-fill);
}
.spice-item__icon svg { width: 30px; height: 30px; }

.spice-item__name {
  margin: 0 0 0.5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--spice-ink);
}

/* The letter that spells S-P-I-C-E */
.spice-item__initial {
  font-family: var(--display);
  font-size: 1.2em;
  font-weight: 700;
}

.spice-item__note {
  margin: 0;
  max-width: 19ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-body) !important;
}

/* Fill = the design's colour. Ink = a darker cut of the same hue, so the
   labels clear AA on the panel. */
.spice-item--social       { --spice-fill: #608A51; --spice-ink: #3D5834; }
.spice-item--physical     { --spice-fill: #C4740E; --spice-ink: #764508; }
.spice-item--intellectual { --spice-fill: #176593; --spice-ink: #13557B; }
.spice-item--cultural     { --spice-fill: #7949A0; --spice-ink: #683F8A; }
.spice-item--emotional    { --spice-fill: #218076; --spice-ink: #175A53; }

@media (min-width: 620px) {
  .spice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .spice-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .spice-item__icon { width: 54px; height: 54px; }
  .spice-item__icon svg { width: 26px; height: 26px; }
  .spice-item__note { font-size: 0.85rem; }
}

/* --- Click-to-load map placeholder ---------------------------------------- */
.map-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 1px dashed rgba(35, 31, 32, 0.28);
  border-radius: 12px;
  background: rgba(35, 31, 32, 0.04);
  color: var(--ink-body);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.map-load:hover,
.map-load:focus-visible {
  background: rgba(35, 31, 32, 0.08);
  border-color: var(--ink-accent);
}

.map-load__pin  { font-size: 1.6rem; line-height: 1; }
.map-load__text { font-weight: 700; color: var(--ink-strong); }
.map-load__note { font-size: 0.78rem; opacity: 0.75; }

/* --- Intake deadline in the hero ------------------------------------------ */
.hero__deadline {
  display: inline-block;
  margin: 1.25rem auto 0;
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(251, 199, 7, 0.45);
  border-radius: 10px;
  background: rgba(5, 9, 26, 0.5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 0.92rem;
  color: var(--cream);
  text-shadow: 0 1px 8px rgba(5, 9, 26, 0.9);
}
.hero__deadline strong { color: var(--gold); }

/* ==========================================================================
   VERTICAL RHYTHM AROUND SECTION HEADINGS

   A heading was sitting 20px above the grid it introduces but only 14px below
   its own eyebrow — so the two barely grouped, and the hierarchy read flat.
   A heading should sit close to its eyebrow and further from the content it
   labels, not the other way round.

   These are margin-top values on the grids themselves, so they collapse
   harmlessly against the larger margin-bottom of an intro paragraph where one
   exists — sections with a `.sub` are unaffected.
   ========================================================================== */

.cards,
.steps,
.people,
.facts {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Trailing note needs room from the grid above it too. */
.note { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Tighten the eyebrow to its heading so they read as one unit. */
.eyebrow { margin-bottom: 0.6rem; }

/* ==========================================================================
   FOOTER REFINEMENTS
   ========================================================================== */

/* --- 5. The mark was orphaned: 46px floating above a wide gap ------------- */
.footer__mark {
  height: 58px;
  width: auto;
  margin-bottom: 1.1rem;
}

/* --- 4. Facebook now reads as a link, not as body copy -------------------
   Social is this program's main outreach channel; it shouldn't be the least
   clickable-looking element on the page. */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(35, 31, 32, 0.22);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-strong);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.footer__social svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer__social:hover,
.footer__social:focus-visible {
  border-color: var(--ink-link);
  background: rgba(8, 85, 63, 0.07);
  color: var(--ink-link);
}

/* --- 2 & 3. The land acknowledgement ------------------------------------
   It was set at 82ch, well past the 45-75ch range where the eye can find the
   start of the next line reliably — and that over-wide measure was also what
   left the right third of the footer empty.

   It also read as fine print: same size as the nav links, tucked under a
   hairline. For a Treaty 6 organisation this is a substantive statement, so
   it now gets room, a slightly larger size, and a gold rule to set it apart. */
.acknowledge {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  border-top: 2px solid rgba(110, 77, 0, 0.28);
}

.acknowledge p {
  max-width: 68ch;
  font-size: 0.97rem;
  line-height: 1.8;
}

.acknowledge__word {
  margin-top: 1.1rem !important;
  font-size: 1.3rem !important;
}

/* --- 6. Back to top, and the base row ------------------------------------ */
.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-edge);
}

.footer__legal { margin: 0 !important; }

.footer__top {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-link);
  text-decoration: none;
  white-space: nowrap;
}
.footer__top:hover,
.footer__top:focus-visible { color: var(--ink-accent); text-decoration: underline; }

/* ==========================================================================
   LEARNING THROUGH PLAY

   Built from the design as real HTML: the copy stays selectable, searchable,
   translatable and reflowable, and the icons are inline SVG at a few hundred
   bytes each rather than baked into a picture.

   Heading colours are darkened cuts of the design's palette so they clear AA
   on the translucent panel — indigo 8.9:1, green 5.4:1, blue 6.2:1.
   ========================================================================== */

.ltp__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

.ltp__ornament { display: block; color: var(--aurora); opacity: 0.85; }
.ltp__ornament svg { width: 120px; height: 20px; margin: 0 auto 1.1rem; }

.ltp__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(5, 9, 26, 0.85);
  text-wrap: balance;
}

.ltp__rule {
  display: block;
  width: 74px;
  height: 3px;
  margin: 1rem auto 1.25rem;
  border-radius: 2px;
  background: var(--aurora);
}

.ltp__lede {
  max-width: 56ch;
  margin: 0 auto;
  font-size: clamp(1rem, 0.97rem + 0.25vw, 1.14rem);
  line-height: 1.65;
  color: #F2EEE4;
  text-shadow: 0 1px 12px rgba(5, 9, 26, 0.9);
  text-wrap: pretty;
}

/* --- Painting + About, side by side --------------------------------------- */
.ltp__grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 760px) {
  /* Equal columns, matching the Mission/Vision row below. stretch, not start,
     so the painting and the About card also end level. */
  .ltp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.ltp__art {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(247, 243, 234, 0.8);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--surface-edge);
}
.ltp__art picture { display: block; flex: 1; min-height: 0; }
.ltp__art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ltp__art figcaption {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-body);
}

.ltp__caption-icon { display: inline-flex; color: var(--ltp-accent, #4C1D95); }
.ltp__caption-icon svg { width: 18px; height: 18px; }

/* --- Cards ---------------------------------------------------------------- */
.ltp__card { --ltp-accent: #4C1D95; --ltp-ink: #2E1065; }
.ltp__card--mission { --ltp-accent: #166534; --ltp-ink: #14532D; }
.ltp__card--vision  { --ltp-accent: #1D4E89; --ltp-ink: #12406E; }

.ltp__card-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  color: var(--ltp-ink);
}

.ltp__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ltp-accent) 14%, transparent);
  color: var(--ltp-accent);
}
.ltp__icon svg { width: 24px; height: 24px; }

/* Browsers without color-mix get a flat tint rather than no chip at all. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ltp__icon { background: rgba(35, 31, 32, 0.08); }
}

.ltp__underline {
  display: block;
  width: 42px;
  height: 3px;
  margin: -0.4rem 0 1rem;
  border-radius: 2px;
  background: var(--ltp-accent);
  opacity: 0.75;
}

/* --- Bulleted points ------------------------------------------------------ */
.ltp__points {
  display: grid;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--surface-edge);
  list-style: none;
}

.ltp__points li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink-strong);
}
.ltp__points li + li { border-top: 1px solid var(--surface-edge); }

.ltp__bullet {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ltp-accent) 13%, transparent);
  color: var(--ltp-accent);
}
.ltp__bullet svg { width: 18px; height: 18px; }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ltp__bullet { background: rgba(35, 31, 32, 0.08); }
}

/* --- Mission / Vision pair ------------------------------------------------ */
.ltp__pair {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 760px) {
  .ltp__pair { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* ==========================================================================
   CULTURAL EXPERIENCES — one panel

   Was seven separate cards in a three-column grid, which left the seventh
   stranded alone on its own row and put more border on the page than content.
   One panel, two columns of rows inside, divided by hairlines rather than
   boxes.
   ========================================================================== */

.culture-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 780px) {
  .culture-list { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.75rem); }
}

.culture-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--surface-edge);
}

/* No rule above the items that sit in the first row. On one column that is
   just the first child; on two columns the photo occupies the whole right-hand
   side of rows 1-3, so only the first text item needs its rule removed. */
.culture-item:first-child { border-top: 0; }
@media (min-width: 780px) {
  .culture-item:nth-child(2) { border-top: 0; }
  .culture-item--photo { border-top: 0; }
}

.culture-item__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(8, 85, 63, 0.1);
  color: var(--ink-link);
}
.culture-item__icon svg { width: 22px; height: 22px; }

.culture-item h3 {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink-strong);
}

.culture-item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-body) !important;
}

/* --- Photo in the culture grid -------------------------------------------
   Fills the empty eighth cell. It has no icon and no rule above it, so it
   reads as an image sitting in the layout rather than a broken list item. */
.culture-item--photo {
  padding: 1.15rem 0;
  border-top: 1px solid var(--surface-edge);
}

/* Explicit placement: right-hand column, spanning the first three rows. The
   seven text items then auto-flow around it and fill every remaining cell —
   three down the left, then two full rows — with nothing left stranded. */
@media (min-width: 780px) {
  .culture-item--photo {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding-bottom: 0;
  }
  .culture-item--photo figure { height: 100%; }
}

.culture-item--photo figure {
  margin: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.culture-item--photo img {
  display: block;
  width: 100%;
  height: 100%;
  /* The photo is portrait; cover crops it to whatever height the row ends up,
     centred slightly high so the regalia rather than the grass is in frame. */
  min-height: 260px;
  object-fit: cover;
  object-position: 50% 35%;
}

/* On one column the photo sits last, full width, and needs no minimum. */
@media (max-width: 779px) {
  .culture-item--photo img { min-height: 0; }
}



/* ==========================================================================
   LEADERSHIP TEAM — portrait cards

   Photo above the name rather than beside it, centred, four across. Scoped to
   .people--leads so the nine-person staff list below (which has no photos)
   keeps its own simpler layout.
   ========================================================================== */

.people--leads {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.people--leads .person {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 1rem;
}

.people--leads .person picture { display: block; }

.people--leads .person__photo {
  width: clamp(84px, 9vw, 104px);
  height: clamp(84px, 9vw, 104px);
  margin-bottom: 1rem;
  border-radius: 50%;
  object-fit: cover;
  /* Gold ring, with a cream gap between it and the photo so the two don't
     merge on portraits with dark edges. */
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px var(--surface);
}

.people--leads .person h3 {
  margin: 0 0 0.25rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink-strong);
}

.people--leads .person p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-body) !important;
}

/* ==========================================================================
   SITE BLOCKS

   Photograph one side, everything else the other, alternating down the page.
   Staff are individual rows rather than a hairline-divided list — each one
   holds together as a unit, which matters when a role like "Educational
   Assistants" wraps to two lines beside a pair of names.
   ========================================================================== */

.site-block { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 880px) {
  .site-block {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  /* Photo right on alternating blocks. Body stays first in the DOM either way,
     so the reading order never changes. */
  .site-block--flip .site-block__media { order: 2; }
  .site-block--flip .site-block__body  { order: 1; }
}

.site-block__body > :first-child { margin-top: 0; }
.site-block__desc { margin-bottom: 1.1rem; }

.site-block__media picture { display: block; }

.site-block__media .site-photo {
  display: block;
  width: 100%;
  height: auto;
  /* 3:4, matching the photographs. A 16/9 crop cut a horizontal band out of
     the middle of each portrait. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 14px;
  /* Gold bar across the top, tying the photo to the site palette. */
  border-top: 5px solid var(--gold);
  margin: 0;
}

/* --- Staff rows ----------------------------------------------------------- */
.staff-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.staff-row {
  display: grid;
  grid-template-columns: auto minmax(0, 11rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: rgba(247, 243, 234, 0.55);
}

.staff-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-accent);
  flex-shrink: 0;
}

.staff-row__role {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-link);
  line-height: 1.3;
}

.staff-row__name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--ink-strong);
}

@media (max-width: 560px) {
  .staff-row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.2rem;
  }
  .staff-row__name { grid-column: 2; }
}




/* Office and culture team lists: three across from tablet up. */
@media (min-width: 640px) {
  .people:not(.people--leads) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .people:not(.people--leads) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Narrower cards, so give the badge and text a little less room to sprawl. */
@media (min-width: 640px) {
  .people:not(.people--leads) .person { gap: 0.75rem; padding: 0.9rem 1rem; }
  .people:not(.people--leads) .person h3 { font-size: 0.98rem; }
  .people:not(.people--leads) .person p  { font-size: 0.86rem; }
}


/* --- Address as a maps link ----------------------------------------------
   Replaces the embedded map. An embed needs coordinates, which had to be
   estimated and came out over a kilometre wrong; Google geocodes the address
   itself, so there is nothing to drift. It also removes the last third-party
   frame from the page. */
.addr__link {
  color: var(--ink-strong);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(8, 85, 63, 0.35);
  transition: color 150ms ease, border-color 150ms ease;
}
.addr__link:hover,
.addr__link:focus-visible {
  color: var(--ink-link);
  border-bottom-color: var(--ink-link);
}

.addr__ext {
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 0.85em;
  color: var(--ink-link);
}

/* Visually hidden but read aloud — warns screen-reader users that the link
   opens a new tab, which is otherwise a silent surprise. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}