/* ==========================================================================
   Namela Development Institute  ·  namela.org
   Palette drawn from the logo: deep olive forest, terracotta, warm gold,
   lime signal dot, warm off-white ground.
   ========================================================================== */

:root {
  --olive: #333A00;
  --olive-deep: #262B00;
  --olive-soft: #4A5312;
  --terra: #A9431B;
  --terra-bright: #C05A2E;
  --terra-wash: #F6E3D8;
  --gold: #D99A2B;
  --gold-deep: #9A6A12;
  --gold-wash: #F7ECD2;
  --lime: #C8E600;
  --cream: #FAF6EC;
  --paper: #FFFDF7;
  --sand: #F1EAD9;
  --ink: #26290B;
  --ink-soft: #4C4F35;
  --line: #DCD5BC;
  --heading: 'Leitura Sans', 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
  --body: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --shadow-pop: 6px 6px 0 rgba(51, 58, 0, 0.16);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--heading);
  color: var(--olive);
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p + p { margin-top: 1em; }

a { color: var(--terra); }
a:hover { color: var(--terra-bright); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--lime); color: var(--olive); }

.wrap { width: min(1180px, 92%); margin: 0 auto; }
.wrap-narrow { width: min(860px, 92%); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--olive);
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: bold;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 236, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--olive);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 4px 18px rgba(38, 41, 11, 0.12); }

/* Brand sits left, navigation right, on one row at every desktop width.
   The gap below is a floor, not a suggestion: it guarantees clear space
   between the logo and the first navigation item no matter how the nav
   reflows, which is what previously failed. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2.5rem;
  padding: 0.65rem 0;
  min-height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--olive);
  flex: 0 0 auto;
  white-space: nowrap;
}
.brand img {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  display: block;
  flex: 0 0 auto;
}
.brand-name {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.brand-name small {
  display: block;
  font-family: var(--body);
  font-weight: normal;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Primary navigation
   Six top-level items, four of which open a grouped menu. Menus open on
   click rather than hover: hover menus are unusable on touch and hostile to
   anyone using a pointer with limited precision.
   -------------------------------------------------------------------------- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 auto;
  min-width: 0;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }

.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: bold;
  color: var(--olive);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  /* Buttons and anchors both act as top-level items, so line-height and
     box model are pinned here. Left to defaults they render at different
     heights and the row looks misaligned. */
  line-height: 1.3;
  box-sizing: border-box;
  min-height: 2.4rem;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-top:hover { background: var(--sand); color: var(--terra); }
.nav-top.is-active,
.nav-top[aria-current="page"] {
  color: var(--terra);
  border-bottom-color: var(--terra);
}

.caret {
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.06em, -0.06em);
  transition: transform 0.2s ease;
}
.nav-top[aria-expanded="true"] .caret {
  transform: rotate(-135deg) translate(-0.04em, -0.04em);
}
.nav-top[aria-expanded="true"] { background: var(--sand); color: var(--terra); }

.submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 130;
  min-width: 20rem;
  background: var(--paper);
  border: 2px solid var(--olive);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 0.5rem;
}
.submenu ul { list-style: none; margin: 0; padding: 0; }
.submenu a {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
}
.submenu a:hover { background: var(--gold-wash); }
.submenu a[aria-current="page"] { background: var(--sand); }
.submenu-label {
  display: block;
  font-family: var(--heading);
  font-weight: 700;
  color: var(--olive);
  font-size: 0.97rem;
}
.submenu a:hover .submenu-label,
.submenu a[aria-current="page"] .submenu-label { color: var(--terra); }
.submenu-desc {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
  line-height: 1.35;
}
/* Keep the last menus from running off the right edge of the viewport. */
.nav-item:nth-last-child(-n+3) .submenu { left: auto; right: 0; }

.nav-cta {
  flex: 0 0 auto;
  background: var(--terra);
  color: #fff;
  font-weight: bold;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.nav-cta:hover,
.nav-cta:focus-visible { background: var(--olive); color: #fff; }
.nav-cta[aria-current="page"] { background: var(--olive); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--olive);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  color: var(--olive);
  font-family: var(--body);
  font-weight: bold;
  font-size: 0.95rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Navigation below 1080px: full-width panel with accordion groups
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .header-inner { gap: 1rem; }
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--olive);
    box-shadow: 0 16px 30px rgba(38, 41, 11, 0.18);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    padding: 0.8rem 4% 1.2rem;
  }
  .main-nav.open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { position: static; }

  .nav-top {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0.5rem;
    font-size: 1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-top.is-active,
  .nav-top[aria-current="page"] {
    border-bottom: 1px solid var(--line);
    background: var(--terra-wash);
  }
  .nav-top[aria-expanded="true"] { background: var(--sand); }

  .submenu {
    position: static;
    min-width: 0;
    border: 0;
    border-left: 3px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.3rem 0 0.5rem 0.8rem;
    margin-bottom: 0.4rem;
  }
  .nav-item:nth-last-child(-n+3) .submenu { left: auto; right: auto; }
  .submenu a { padding: 0.6rem 0.5rem; }

  .nav-cta {
    display: block;
    margin-top: 1rem;
    text-align: center;
    padding: 0.8rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caret, .nav-top, .nav-cta { transition: none; }
}

/* No-JavaScript fallback. Submenus are hidden in the markup so the script
   controls them, which would strand those links if the script never runs.
   Until main.js marks the nav as enhanced, every submenu is shown inline. */
.main-nav:not([data-enhanced]) .submenu[hidden] {
  display: block !important;
  position: static;
  min-width: 0;
  border: 0;
  border-left: 3px solid var(--gold);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.2rem 0 0.4rem 0.6rem;
}
.main-nav:not([data-enhanced]) .caret { display: none; }
@media (min-width: 1081px) {
  .main-nav:not([data-enhanced]) { flex-wrap: wrap; }
  .main-nav:not([data-enhanced]) .nav-list { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-terra { background: var(--terra); color: #fff; }
.btn-terra:hover { background: var(--terra-bright); color: #fff; }
.btn-olive { background: var(--olive); color: #fff; }
.btn-olive:hover { background: var(--olive-soft); color: #fff; }
.btn-ghost { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn-ghost:hover { background: var(--olive); color: #fff; }
.btn-light { background: var(--cream); color: var(--olive); }
.btn-light:hover { background: #fff; color: var(--terra); }
.btn-lg { padding: 1.05rem 2.2rem; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.section-sand { background: var(--sand); }
.section-olive { background: var(--olive); }
.section-olive h2, .section-olive h3 { color: #fff; }
.section-olive p { color: #E8E5D2; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--olive);
}
.section-olive .eyebrow { color: var(--gold); }

.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.section-olive .lede { color: #D9D6C0; }

.section-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: 780px; }
.section-head h2 { margin-bottom: 0.7rem; }

/* --------------------------------------------------------------------------
   Reveal animations
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

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

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 span.mark { color: var(--terra); }
.hero .lede { margin: 1.2rem 0 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero-media { position: relative; }
.hero-media img {
  border-radius: var(--radius);
  border: 3px solid var(--olive);
  box-shadow: 10px 10px 0 var(--gold);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.hero-badge {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--olive);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.35;
  max-width: 240px;
  border: 3px solid var(--cream);
}
.hero-badge .dot { color: var(--lime); }

/* On narrow screens the badge's negative left offset pushed it past the
   viewport edge. Below 560px it sits inside the image instead. */
@media (max-width: 560px) {
  .hero-badge {
    left: 0;
    right: 0;
    bottom: -12px;
    max-width: none;
    margin: 0 0.6rem;
  }
}

.pillar-flags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.3rem; }
.pillar-flag {
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 2px solid var(--olive);
}
.pillar-flag.learners { background: var(--gold-wash); color: var(--gold-deep); }
.pillar-flag.orgs { background: var(--terra-wash); color: var(--terra); }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 440px; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 2px solid var(--olive);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover, .card:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-pop);
}
.card h3 { margin-bottom: 0.55rem; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card .card-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--heading);
  font-weight: 700;
  text-decoration: none;
}
.card .card-link::after { content: " \2192"; }

.card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.tag-gold { background: var(--gold-wash); color: var(--gold-deep); border: 1px solid var(--gold); }
.tag-terra { background: var(--terra-wash); color: var(--terra); border: 1px solid var(--terra); }
.tag-olive { background: #E9EBD8; color: var(--olive); border: 1px solid var(--olive-soft); }

/* Asymmetric card band: one wide feature + stacked side cards */
.band-asym {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 1.4rem;
}
.band-asym .stack { display: grid; gap: 1.4rem; align-content: start; }
@media (max-width: 880px) {
  .band-asym { grid-template-columns: 1fr; }
}

.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  border: 3px solid var(--olive);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.feature-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-pop); }
.feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-card .feature-overlay {
  position: relative;
  background: linear-gradient(to top, rgba(38, 43, 0, 0.92) 30%, rgba(38, 43, 0, 0.15) 85%, transparent);
  padding: 5rem 1.6rem 1.6rem;
  color: #fff;
}
.feature-card h3 { color: #fff; }
.feature-card p { color: #E4E1CC; font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   Two-pillar split
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.pillar {
  border-radius: var(--radius);
  border: 3px solid var(--olive);
  padding: 2.1rem 1.9rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pillar:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-pop); }
.pillar-learners { background: var(--gold-wash); }
.pillar-orgs { background: var(--terra-wash); }
.pillar h3 { font-size: 1.45rem; margin: 0.6rem 0; }
.pillar ul { list-style: none; margin: 1rem 0 1.4rem; }
.pillar li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
}
.pillar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--olive);
}
@media (max-width: 820px) {
  .pillars { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Stats and counters
   -------------------------------------------------------------------------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.stat {
  border-left: 4px solid var(--gold);
  padding: 0.4rem 0 0.4rem 1.2rem;
}
.stat .stat-num {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  color: #fff;
  line-height: 1;
  display: block;
}
.stat .stat-label { color: #CFCBB0; font-size: 0.95rem; margin-top: 0.5rem; display: block; }
.stats-note { margin-top: 2rem; font-size: 0.92rem; color: #BDB99B; }
@media (max-width: 880px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-band { grid-template-columns: 1fr; } }

/* Light variant for Impact page */
.stats-light .stat .stat-num { color: var(--olive); }
.stats-light .stat .stat-label { color: var(--ink-soft); }
.stats-light.stats-band { gap: 1.6rem; }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.tabs { border: none; }
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}
.tab-btn {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.75rem 1.4rem;
  background: var(--paper);
  color: var(--olive);
  border: 2px solid var(--olive);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.tab-btn:hover { background: var(--sand); }
.tab-btn[aria-selected="true"] { background: var(--olive); color: #fff; }
.tab-panel[hidden] { display: none; }

.tab-panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.tab-panel img {
  border-radius: var(--radius);
  border: 3px solid var(--olive);
  box-shadow: 8px 8px 0 var(--terra-wash);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
@media (max-width: 820px) { .tab-panel { grid-template-columns: 1fr; } }

.outcome-list { list-style: none; margin-top: 1.2rem; }
.outcome-list li {
  padding: 0.65rem 0 0.65rem 2.1rem;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
.outcome-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--olive);
  color: var(--lime);
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Accordions
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: 0.9rem; }
.acc-item {
  background: var(--paper);
  border: 2px solid var(--olive);
  border-radius: var(--radius);
  overflow: hidden;
}
.acc-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--olive);
  padding: 1.15rem 3.4rem 1.15rem 1.4rem;
  position: relative;
}
.acc-trigger:hover { color: var(--terra); }
.acc-trigger::after {
  content: "+";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid var(--olive);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform 0.25s ease, background 0.2s ease;
}
.acc-trigger[aria-expanded="true"]::after {
  content: "\2212";
  background: var(--lime);
  transform: translateY(-50%) rotate(180deg);
}
.acc-panel { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); }
.acc-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Steps (seven-step model, four-step process)
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0; position: relative; }
.step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.3rem;
  padding: 1.3rem 0;
  position: relative;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 78px;
  bottom: -8px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--gold) 0 8px, transparent 8px 16px);
}
.step-num {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--olive);
  color: #fff;
  border: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.step:nth-child(even) .step-num { background: var(--terra); }
.step h3 { margin-bottom: 0.25rem; }
.step h3 .step-word { color: var(--terra); }
.step p { color: var(--ink-soft); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--paper);
  border: 3px solid var(--olive);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 10px 10px 0 var(--sand);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-weight: bold;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
  color: var(--olive);
}
.field .hint { font-weight: normal; color: var(--ink-soft); font-size: 0.82rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--olive-soft);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--olive);
  background: #fff;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}
.check-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--cream);
  border: 2px solid var(--olive-soft);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.check-pill:hover { background: var(--gold-wash); }
.check-pill input { width: 1.15rem; height: 1.15rem; accent-color: var(--terra); flex-shrink: 0; }
.check-pill:has(input:checked) { background: var(--gold-wash); border-color: var(--gold-deep); }

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
fieldset legend {
  font-weight: bold;
  font-size: 0.92rem;
  color: var(--olive);
  margin-bottom: 0.5rem;
}

.radio-row { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.radio-row label { display: flex; align-items: center; gap: 0.45rem; font-weight: normal; cursor: pointer; }
.radio-row input { accent-color: var(--terra); width: 1.1rem; height: 1.1rem; }

.form-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--gold-wash);
  border: 2px dashed var(--gold-deep);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
  margin: 1.2rem 0;
}
.form-note strong { color: var(--olive); }

/* Honeypot: hidden from humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin-top: 1rem; font-weight: bold; }
.form-status.error { color: #8E2412; }

.form-success {
  text-align: center;
  padding: 2.5rem 1rem;
}
.form-success .tick {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--lime);
  font-size: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  border: 3px solid var(--gold);
}
.form-success h3 { margin-bottom: 0.6rem; }
.form-success p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Pathway visual, income bar, misc graphics
   -------------------------------------------------------------------------- */
.pathway-svg, .income-svg { width: 100%; height: auto; display: block; }

.income-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.8rem;
  margin-top: 1.3rem;
  font-size: 0.93rem;
}
.income-legend span { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); }
.income-legend i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--olive);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Split layouts
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.split img {
  border-radius: var(--radius);
  border: 3px solid var(--olive);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.split .shadow-gold { box-shadow: 10px 10px 0 var(--gold); }
.split .shadow-terra { box-shadow: -10px 10px 0 var(--terra-wash); }
@media (max-width: 820px) {
  .split, .split.flip { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Value chips / partner routes
   -------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.value-grid .card { border-width: 2px; }
.value-num {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold-deep);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 0.5rem;
}
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }

/* Offset the middle column for asymmetry on wide screens */
@media (min-width: 901px) {
  .value-grid.stagger > *:nth-child(3n + 2) { transform: translateY(1.6rem); }
  .value-grid.stagger > *:nth-child(3n + 2):hover { transform: translateY(calc(1.6rem - 3px)) translateX(-3px); }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--terra);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.4rem);
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto;
  gap: 1.6rem;
  align-items: center;
  border: 3px solid var(--olive);
  box-shadow: 10px 10px 0 var(--olive);
}
.cta-band h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-band p { color: #FBE4D6; }
@media (max-width: 720px) { .cta-band { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--olive);
  color: #fff;
  padding: clamp(3rem, 6vw, 4.6rem) 0;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: #D9D6C0; margin-top: 1rem; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 44px solid rgba(200, 230, 0, 0.14);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 2px solid var(--olive);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.97rem;
}
table.data th {
  background: var(--olive);
  color: #fff;
  text-align: left;
  padding: 0.85rem 1rem;
  font-family: var(--heading);
}
table.data td {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: top;
}
table.data td:first-child { font-weight: bold; color: var(--olive); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--olive-deep);
  color: #D9D6C0;
  padding: clamp(2.6rem, 5vw, 4rem) 0 1.6rem;
  border-top: 6px solid var(--gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr;
  gap: 2.2rem;
  padding-bottom: 2.2rem;
}
.site-footer .brand { color: #fff; margin-bottom: 1rem; }
.site-footer .brand-name small { color: #A6A385; }
.footer-tagline {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  max-width: 30ch;
  line-height: 1.45;
}
.footer-tagline .dot { color: var(--lime); }
.site-footer h3,
.site-footer h4 {
  color: var(--gold);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: #D9D6C0; text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--lime); }
.footer-meta {
  border-top: 1px solid rgba(217, 214, 192, 0.25);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #A6A385;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ==========================================
   Digital Readiness Table
========================================== */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

.score-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    table-layout: fixed;
}

.score-table caption {
    text-align: left;
    font-weight: 700;
    margin-bottom: 1rem;
}

.score-table th,
.score-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    vertical-align: top;
}

.score-table thead th {
    font-weight: 700;
}

.score-table tbody th {
    font-weight: 600;
}

/* Column widths */

.score-table th:nth-child(1),
.score-table td:nth-child(1) {
    width: 24%;
}

.score-table th:nth-child(2),
.score-table td:nth-child(2) {
    width: 16%;
    white-space: nowrap;
}

.score-table th:nth-child(3),
.score-table td:nth-child(3) {
    width: 60%;
}

/* Tablet */

@media (max-width: 992px) {
    .split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Mobile */

@media (max-width: 768px) {
    .score-table {
        min-width: 600px;
    }

    .score-table th,
    .score-table td {
        padding: 0.9rem 1rem;
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   ADDITIONS · NGO Network and Digital Readiness Assessment
   Appended so the original stylesheet above remains untouched. Every colour,
   radius and shadow below is drawn from the variables already declared at the
   top of this file. No new palette is introduced.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ecosystem grid, used on the NGO Network page
   -------------------------------------------------------------------------- */
.eco-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.eco-card {
  background: var(--paper);
  border: 3px solid var(--olive);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: var(--shadow-pop);
}
.eco-card h3 { margin: 0; }
.eco-card p { margin: 0; }
.eco-card .btn { margin-top: auto; align-self: flex-start; }
.eco-num {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
}

/* Comparison strip separating survey, assessment and health check */
.compare-strip {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.compare-item {
  border-left: 6px solid var(--gold);
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
}
.compare-item h3 { color: var(--olive); margin-bottom: 0.3rem; }
.compare-item p { font-size: 0.94rem; margin: 0; }
.compare-item.is-assessment { border-left-color: var(--terra); }
.compare-item.is-check { border-left-color: var(--olive); }

/* --------------------------------------------------------------------------
   Digital Readiness Assessment wizard
   -------------------------------------------------------------------------- */
.dra {
  background: var(--paper);
  border: 3px solid var(--olive);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 1.6rem;
}
@media (min-width: 720px) { .dra { padding: 2.2rem; } }

.dra-progress { margin-bottom: 1.6rem; }
.dra-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-family: var(--heading);
  font-weight: 700;
  color: var(--olive);
  font-size: 0.92rem;
}
.dra-pips { display: flex; gap: 0.35rem; }
.dra-pip {
  flex: 1 1 0;
  height: 0.55rem;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.25s ease;
}
.dra-pip.is-done { background: var(--gold); }
.dra-pip.is-current { background: var(--terra); }

.dra-step h2 { margin-bottom: 0.3rem; }
.dra-step .lede { margin-bottom: 1.5rem; }

.dra-q {
  border-top: 1px solid var(--line);
  padding: 1.3rem 0 0.4rem;
}
.dra-q:first-of-type { border-top: 0; padding-top: 0.2rem; }
.dra-q legend {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--olive);
  font-size: 1.02rem;
  padding: 0;
  margin-bottom: 0.7rem;
}
.dra-q fieldset { border: 0; padding: 0; margin: 0; }
.dra-options { display: grid; gap: 0.4rem; }
.dra-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dra-opt:hover { border-color: var(--gold); background: var(--gold-wash); }
.dra-opt input { margin-top: 0.28em; accent-color: var(--terra); }
.dra-opt:has(input:checked) {
  border-color: var(--terra);
  background: var(--terra-wash);
}
.dra-opt:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

.dra-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--line);
}
.dra-nav .spacer { flex: 1 1 auto; }
.dra-error {
  color: var(--terra);
  font-weight: bold;
  margin-top: 0.8rem;
  min-height: 1.4em;
}

/* Profile step */
.dra-privacy {
  background: var(--gold-wash);
  border: 2px dashed var(--gold-deep);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
}
.dra-privacy h3 { font-size: 1rem; color: var(--olive); margin-bottom: 0.35rem; }
.dra-privacy p { font-size: 0.93rem; margin: 0; }
.dra-privacy p + p { margin-top: 0.5rem; }

/* Results */
.dra-score-head {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .dra-score-head { grid-template-columns: 15rem 1fr; } }

.dra-dial { display: block; width: 100%; max-width: 15rem; margin: 0 auto; }
.dra-band {
  display: inline-block;
  font-family: var(--heading);
  font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: var(--olive);
  color: var(--lime);
  margin-bottom: 0.6rem;
}

.dra-bars { display: grid; gap: 0.9rem; }
.dra-bar-row { display: grid; gap: 0.3rem; }
.dra-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.93rem;
  font-family: var(--heading);
  font-weight: 700;
  color: var(--olive);
}
.dra-bar-track {
  height: 0.85rem;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.dra-bar-fill { height: 100%; background: var(--terra); border-radius: 999px; }
.dra-bar-fill.is-strong { background: var(--olive-soft); }
.dra-bar-fill.is-weak { background: var(--gold); }

.dra-actions-list { display: grid; gap: 1rem; counter-reset: dra; }
.dra-action {
  border: 3px solid var(--olive);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.2rem 1.4rem;
}
.dra-action h4 { color: var(--terra); margin-bottom: 0.3rem; }
.dra-action p { margin: 0; }
.dra-action .dra-action-score {
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: block;
  margin-top: 0.5rem;
}

.dra-ref {
  font-family: 'Courier New', monospace;
  background: var(--sand);
  border: 1px solid var(--line);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

/* Print: results only, no chrome */
@media print {
  .site-header, .site-footer, .skip-link, .dra-nav, .cta-band,
  .dra-print-hide, .page-hero::after { display: none !important; }
  body { background: #fff; }
  .dra { border: 1px solid #000; box-shadow: none; padding: 0; }
  .dra-action, .eco-card { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

@media (prefers-reduced-motion: reduce) {
  .dra-pip, .dra-opt, .dra-bar-fill { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Conditional panel on the registration form
   Used for the grant writing detail group, which appears only when that
   service is selected.
   -------------------------------------------------------------------------- */
.grant-panel {
  border: 2px dashed var(--gold-deep);
  background: var(--gold-wash);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 0;
}
.grant-panel > legend {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--olive);
  background: var(--paper);
  border: 2px solid var(--gold-deep);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-size: 0.95rem;
}
.grant-panel fieldset { border: 0; padding: 0; margin: 0; }
.grant-panel fieldset legend {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--olive);
  font-size: 0.95rem;
  padding: 0;
  margin-bottom: 0.5rem;
}
.grant-panel .form-grid { margin-top: 1rem; }
.grant-panel > .hint { display: block; }
.grant-panel input[type="date"] {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--olive);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
[hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   Call-to-action band: button area
   The band sits on terracotta, so the outline button needs light borders.
   Olive on terracotta measures roughly 2.4:1 and is not readable.
   -------------------------------------------------------------------------- */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.cta-band .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.cta-band .btn-ghost:hover,
.cta-band .btn-ghost:focus-visible {
  background: #fff;
  color: var(--terra);
  border-color: #fff;
}
@media (max-width: 720px) {
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 auto; text-align: center; }
}