/* Healthy Tomorrow Foundation: "Canopy" variant (index-canopy.html only).
   Reuses the approved base unchanged and layers a botanical identity on top:
   the full logo on the hero's paper field beside the headline; a fine vine that
   runs from under the header's tree down the left margin of every section and
   carries a few small leaves; leaf details on labels, lists and rules.
   Decoration only, never words.
   1. Tokens  2. Vine and leaves  3. Motion  4. Page lane  5. Hero
   6. Sections  7. Details  8. Footer  9. Small screens  10. Reduced motion */
/* ---- site.css (approved base, inlined for the homepage build) ---- */
/* Healthy Tomorrow Foundation
   1. Tokens  2. Base  3. Layout  4. Buttons  5. Header and navigation
   6. Hero  7. Content sections  8. Footer  9. Motion */

/* 1. Tokens ------------------------------------------------------------ */
:root {
  /* Colour, taken from the logo */
  --forest: #173f35;       /* primary: headings accents, buttons, footer */
  --forest-deep: #0f2d26;  /* hover and pressed */
  --leaf: #5e9434;         /* sparing accent: short rules only, never text */
  --ink: #182c32;          /* body text */
  --muted: #50605b;        /* secondary text (6.2:1 on paper) */
  --rule: #d7dfd7;         /* hairlines */
  --rule-strong: #b9c6bc;  /* borders that must be visible */
  --paper: #f7f6f1;        /* page background */
  --white: #ffffff;
  --on-forest: #f7f6f1;
  --on-forest-muted: #c5d3cb; /* 8.6:1 on forest */

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --text-base: 1.125rem;                                    /* 18px */
  --text-sm: 0.9375rem;                                     /* 15px */
  --text-xs: 0.8125rem;                                     /* 13px, labels in capitals */
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-h1: clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);       /* 36px phone, 56px desktop */
  --text-h2: clamp(1.875rem, 1.5rem + 1.25vw, 2.625rem);
  --text-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
  --leading: 1.6;
  --measure: 38rem;

  /* Space and layout */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);
  --container: 75rem;                                       /* 1200px */
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --header-h: 4.5rem;
  --radius: 2px;
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--forest);
}

/* 2. Base -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3); line-height: 1.3; font-weight: 600; }

p { text-wrap: pretty; }

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

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--forest-deep); text-decoration-thickness: 2px; }

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

/* 3. Layout ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Short leaf rule used before capitalised labels (kicker, section labels). */
.kicker {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
}
.kicker::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background: var(--leaf);
  transform: translateY(-0.3em);
}

/* 4. Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  background: var(--forest);
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--white); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }

/* Quiet outline variant for secondary links, if a section needs one. */
.btn-outline { background: transparent; color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: var(--white); }

/* Donate Coming Soon: visibly unavailable, never clickable. */
.btn-disabled,
.btn-disabled:hover,
.btn[disabled] {
  background: transparent;
  border: 1px dashed var(--rule-strong);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-sm { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: var(--text-sm); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* 5. Header and navigation -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--forest); text-decoration: none; }

/* The logo file is a square with a pale grey ground and the wordmark below the tree.
   In the header only the tree is shown: the image is scaled and offset inside a fixed
   window (no distortion), and lifted so its grey ground blends into the paper. */
.brand-mark {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
}
.brand-mark img {
  position: absolute;
  width: 5.25rem;
  max-width: none;
  height: 5.25rem;
  left: -1.375rem;
  top: -0.4rem;
}

.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* Blend the logo's grey ground into the page. */
.brand-mark img,
.hero-mark img {
  filter: brightness(1.11) contrast(1.02);
  mix-blend-mode: multiply;
}

.primary-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav a {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.primary-nav a:hover { color: var(--forest); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; text-decoration-color: var(--leaf); }

/* Icon-only toggle: three bars that become a cross. */
.nav-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 50%;
  width: 1.375rem;
  height: 2px;
  margin-left: -0.6875rem;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars { top: 50%; margin-top: -1px; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; left: 0; margin-left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.is-open .nav-toggle-bars { background: transparent; }
.is-open .nav-toggle-bars::before { background: var(--ink); transform: translateY(7px) rotate(45deg); }
.is-open .nav-toggle-bars::after { background: var(--ink); transform: translateY(-7px) rotate(-45deg); }

/* Desktop: inline menu. */
@media (min-width: 56.25em) {
  .site-menu {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .primary-nav ul { gap: var(--space-4); }
  .primary-nav a { padding-block: 0.5rem; }
}

/* Small screens: collapsible panel below the bar (open by default without JavaScript). */
@media (max-width: 56.1875em) {
  .js .nav-toggle { display: block; }

  .site-menu {
    padding-bottom: var(--space-3);
    flex-basis: 100%;
  }
  .header-inner { flex-wrap: wrap; column-gap: var(--space-2); row-gap: 0; }
  .js .header-inner { flex-wrap: nowrap; padding-block: 0.75rem; }
  .brand { min-width: 0; }
  .brand-name { font-size: 1.0625rem; }

  .js .site-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 var(--gutter) var(--space-4);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .js .is-open .site-menu { display: block; }

  .primary-nav ul { flex-direction: column; margin-bottom: var(--space-3); }
  .primary-nav li { border-bottom: 1px solid var(--rule); }
  .primary-nav a { padding: 0.875rem 0; font-size: 1.125rem; }
  .site-menu .btn { width: 100%; min-height: 3rem; }
}

@media (max-width: 26em) {
  .brand-name { max-width: 10.5em; }
}

/* 6. Hero -------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 7.5rem) clamp(3.5rem, 2rem + 5vw, 7rem);
  border-bottom: 1px solid var(--rule);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-5);
  align-items: center;
}

.hero-copy { grid-column: 1 / span 12; }
.hero-copy .kicker { margin-bottom: var(--space-3); }
.hero-copy h1 { max-width: 15em; color: var(--forest); }
.hero .lead {
  max-width: var(--measure);
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.6;
}
.hero .actions { margin-top: var(--space-4); }

.hero-mark {
  display: none;
}

@media (min-width: 56.25em) {
  .hero-copy { grid-column: 1 / span 8; }
  .hero-mark {
    display: block;
    grid-column: 9 / span 4;
    max-width: none;
    margin-left: 0;
    justify-self: stretch;
    padding-left: var(--gutter);
    border-left: 1px solid var(--rule);
  }
  .hero-mark img { width: 100%; max-width: 22rem; margin-inline: auto; }
}

/* 7. Content sections ------------------------------------------------- */
/* Sections: #mission, #focus, #partners, #contact. Scoped to .section and its children.
   Uses the shared tokens (--forest --ink --paper --muted --rule --serif --sans) and .container/.btn. */

.section {
  --sec-pad: clamp(3.5rem, 8vw, 7rem);
  padding-block: var(--sec-pad);
  color: var(--ink, #182c32);
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  scroll-margin-top: 4.5rem;
}
.section h2,
.section h3 {
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-weight: 600;
  color: var(--forest, #173f35);
  margin: 0;
  text-wrap: balance;
}
.section p { margin: 0; }

.section-title {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lede {
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.3125rem, 2.1vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink, #182c32);
  max-width: 34em;
}
.body-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--muted, #50605b);
  max-width: 38em;
}

/* Shared two-column header: title left, text right */
.section-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .section-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}

/* Mission */
.section-mission {
  background: var(--paper, #f7f6f1);
  border-top: 0;
}
.section-mission .section-body { display: grid; gap: 1.75rem; }
.section-mission .section-title { padding-top: 0.35rem; }

/* Focus */
.section-focus {
  background: #fff;
  border-top: 1px solid var(--rule, #d7dfd7);
}
.section-intro { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-intro .lede { padding-top: 0.15rem; }

.focus-rows { border-bottom: 1px solid var(--rule, #d7dfd7); }
.focus-row {
  display: grid;
  gap: 0.75rem;
  padding-block: 2rem;
  border-top: 1px solid var(--rule, #d7dfd7);
}
.focus-row .label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest, #173f35);
  line-height: 1.5;
}
.focus-row h3 {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  line-height: 1.25;
}
.focus-row p:not(.label) {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted, #50605b);
  max-width: 40em;
}
@media (min-width: 900px) {
  .focus-row {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 3.6fr) minmax(0, 6fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: baseline;
    padding-block: 2.5rem;
  }
}

/* Principles list */
.principles {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  gap: 1.5rem;
}
.principles h3 {
  font-size: clamp(1.5rem, 2.1vw, 1.625rem);
  line-height: 1.25;
}
.principles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-bottom: 1px solid var(--rule, #d7dfd7);
}
.principles li {
  position: relative;
  padding: 1rem 0 1rem 1.75rem;
  border-top: 1px solid var(--rule, #d7dfd7);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink, #182c32);
}
.principles li::before { /* decorative marker, no text */
  content: "";
  position: absolute;
  left: 0;
  top: 1.65rem;
  width: 0.75rem;
  height: 2px;
  background: var(--leaf);
}
@media (min-width: 900px) {
  .principles {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .principles ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    border-bottom: 0;
  }
  .principles li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--rule, #d7dfd7); }
}

/* Call to action: a restrained band, no card */
.cta {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-block: 2rem;
  border-top: 2px solid var(--forest, #173f35);
  border-bottom: 1px solid var(--rule, #d7dfd7);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.section .cta-heading {
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--forest, #173f35);
  margin-bottom: 0.5rem;
}
.cta-heading strong { font-weight: 600; }
.cta-text p:not(.cta-heading) {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted, #50605b);
  max-width: 36em;
}
.cta-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 900px) {
  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
  }
}

/* Partners */
.section-partners {
  background: var(--paper, #f7f6f1);
  border-top: 1px solid var(--rule, #d7dfd7);
}
.partner-list {
  display: grid;
  gap: 2.5rem;
}
.partner {
  border-top: 2px solid var(--forest, #173f35);
  padding-top: 1.25rem;
}
.partner h3 {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.partner p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted, #50605b);
  max-width: 28em;
}
@media (min-width: 760px) {
  .partner-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* Contact */
.section-contact {
  background: var(--forest, #173f35);
  color: var(--paper, #f7f6f1);
  border-top: 0;
}
.section-contact .section-title { color: var(--paper, #f7f6f1); margin-bottom: 1.25rem; }
.section-contact .lede {
  color: #e6ede8;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.contact-details { display: grid; gap: 0.75rem; align-content: start; }
.contact-prompt {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #cfdad3;
}
.contact-email {
  font-family: var(--serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.25rem, 4.6vw, 2.125rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.section-contact a:not(.btn) {
  color: var(--paper, #f7f6f1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.section-contact a:not(.btn):hover { text-decoration-thickness: 2px; }
.section-contact a:focus-visible,
.section-contact .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.contact-actions { margin-top: 1.25rem; }
.section-contact .btn:not(.btn-disabled) {
  background: var(--paper, #f7f6f1);
  border-color: var(--paper, #f7f6f1);
  color: var(--forest, #173f35);
  text-decoration: none;
}
.section-contact .btn:not(.btn-disabled):hover {
  background: #fff;
  border-color: #fff;
}
.section-contact .btn-disabled,
.section-contact .btn-disabled:disabled {
  background: transparent;
  border: 1px solid #8fa79b;
  color: #cfdad3;
  opacity: 1;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .section * { transition: none !important; animation: none !important; }
}

/* 8. Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--forest);
  color: var(--on-forest-muted);
  font-size: var(--text-sm);
}
.footer-grid {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(247, 246, 241, 0.18);
}
.footer-tagline {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--on-forest);
}
.site-footer a { color: var(--on-forest); text-decoration-color: rgba(247, 246, 241, 0.5); }
.site-footer a:hover { color: var(--white); text-decoration-color: currentColor; }
.site-footer :focus-visible { outline-color: var(--on-forest); }

@media (min-width: 56.25em) {
  .footer-grid {
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: var(--gutter);
    padding-block: var(--space-4);
  }
  .footer-tagline { text-align: center; }
  .footer-email { text-align: right; }
  .footer-copy { order: 0; }
}

/* 9. Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---- end site.css ---- */

/* 1. Tokens ------------------------------------------------------------ */
.canopy {
  --c-bright: #7ab648;   /* young leaf, from the logo canopy */
  --c-mid: #4f8a3c;
  --muted: #354b44;      /* secondary text: 8.7:1 on paper, 9.4:1 on white, 8.3:1 on sage */
  --stem: #8fae7b;       /* the vine: a muted leaf green, quiet on paper and white */
  /* Left inset of the content box; the vine runs under the trunk of the header's tree. */
  --inset: calc(max(0px, (100% - var(--container) - 2 * var(--gutter)) / 2) + var(--gutter));
  --vine: calc(var(--inset) + 1.25rem);
  --vw: 2.5rem;          /* the vine's box; the path drifts a few pixels either side of its centre */
  --lane: 0rem;
  /* Leaf: a short stalk and a blade with a fine midrib, 2:1, stalk end at the left middle. */
  --leaf-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 5.4h4.6v1.2H0z'/%3E%3Cpath fill-rule='evenodd' d='M3.6 6C7 .8 15-.2 24 4.8 16 11.6 7.2 11.2 3.6 6zM6.5 6.1 20 5.2v-.3L6.5 5.5z'/%3E%3C/svg%3E");
}

/* 2. Vine and leaves --------------------------------------------------- */
/* Shared art layer: behind the copy, never interactive. */
.canopy .canopy-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Each section carries its own stretch of vine: a path drawn in a 40 x 1000 box and
   stretched to the section's height. Every stretch starts and ends on the centre line
   heading straight down, so neighbouring sections join cleanly. The stroke stays 1px. */
.canopy .vine {
  position: absolute;
  top: 0;
  left: calc(var(--vine) - var(--vw) / 2);
  width: var(--vw);
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--stem);
  stroke-width: 1;
  stroke-linecap: round;
}
.canopy .vine path { vector-effect: non-scaling-stroke; }

/* Leaves grow from the points where the path turns, so each one sits on the stem:
   --y is the height as a fraction of the section, --x the path's x in its 40-unit box,
   --r the angle (0 points right, -90deg points up), --s the length. */
.canopy .leaf {
  --s: 0.875rem;
  --c: var(--c-mid);
  --k: 1;                /* side of the stem: 1 right, -1 left */
  position: absolute;
  top: calc(var(--y) * 100%);
  left: calc(var(--vine) + (var(--x) / 40 - 0.5) * var(--vw));
  width: var(--s);
  height: calc(var(--s) / 2);
  margin-top: calc(var(--s) / -4);
  background: var(--c);
  -webkit-mask: var(--leaf-shape) 0 0 / 100% 100% no-repeat;
  mask: var(--leaf-shape) 0 0 / 100% 100% no-repeat;
  transform-origin: 0 50%;
  rotate: var(--r);
}
.canopy .leaf--left { --k: -1; }
.canopy .leaf--light { --c: var(--c-bright); }

/* 3. Motion ------------------------------------------------------------ */
/* A short introduction on the first screen only, about 3 seconds and then still: the
   vine grows down through the hero and Mission, and their leaves open and settle.
   Afterwards, leaves lift a little while their section is hovered or holds focus. */
@keyframes vine-grow {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes leaf-open {
  0% { scale: 0; transform: rotate(calc(var(--k) * -40deg)); }
  65% { scale: 1.05; transform: rotate(calc(var(--k) * 6deg)); }
  100% { scale: 1; transform: rotate(0deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .canopy .hero { --t0: 0.25s; --t1: 1.2s; }
  .canopy .section-mission { --t0: 1.45s; --t1: 0.95s; }
  .canopy .hero .vine { animation: vine-grow var(--t1) cubic-bezier(0.45, 0, 1, 1) var(--t0) backwards; }
  .canopy .section-mission .vine { animation: vine-grow var(--t1) cubic-bezier(0, 0, 0.4, 1) var(--t0) backwards; }
  .canopy .hero .leaf,
  .canopy .section-mission .leaf {
    animation: leaf-open 0.9s cubic-bezier(0.3, 0.6, 0.35, 1) calc(var(--t0) + var(--y) * var(--t1) + 0.1s) backwards;
  }

  .canopy .leaf { transition: transform 0.8s cubic-bezier(0.3, 0.6, 0.35, 1); }
  .canopy .hero:hover .leaf,
  .canopy .hero:focus-within .leaf,
  .canopy .section:hover .leaf,
  .canopy .section:focus-within .leaf { transform: rotate(calc(var(--k) * -8deg)); }
}

/* 4. Page lane (wide screens) ------------------------------------------ */
/* Content in main and the footer moves right to leave a lane for the vine,
   which runs directly under the tree in the header. */
@media (min-width: 56.25em) {
  .canopy { --lane: 4.25rem; }
  .canopy main .container,
  .canopy .site-footer .container {
    padding-left: calc(var(--gutter) + var(--lane));
  }
}

/* 5. Hero -------------------------------------------------------------- */
/* One warm paper field: the full logo stands beside the headline, unframed and in its
   true colours. The logo file has empty margins (its artwork fills 15.6% to 87.1% of
   the width and 7.9% to 75% of the height); the offsets below account for them. */
.canopy .hero {
  --mw: clamp(16rem, 10rem + 14vw, 22.5rem);   /* width of the logo file */
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(2.5rem, 0.75rem + 4vw, 4.75rem) clamp(3rem, 1rem + 4.5vw, 5.5rem);
}
.canopy .hero .container { position: relative; }
/* 34px on phones (a little less below 370px, so "Advancing community" keeps to one line), 51px on desktop. */
.canopy .hero h1 { font-size: min(clamp(2.125rem, 1.6rem + 2.1vw, 3.2rem), 9.2vw); }

.canopy .hero-mark {
  display: block;
  width: var(--mw);
}
.canopy .hero-mark img {
  width: 100%;
  max-width: none;
  margin: 0;
  filter: none;          /* the file's ground is transparent: nothing to blend away */
  mix-blend-mode: normal;
}

@media (min-width: 56.25em) {
  /* The logo's column ends at the artwork's right edge, so the wordmark lines up with
     the content edge and the file's empty right margin runs into the gutter. */
  .canopy .hero-grid {
    grid-template-columns: minmax(0, 1fr) calc(0.871 * var(--mw));
    align-items: start;
  }
  .canopy .hero-copy { grid-column: 1; }
  .canopy .hero-mark {
    grid-column: 2;
    justify-self: start;
    padding: 0;
    border: 0;
    /* Top of the tree level with the capitals of the headline's first line. */
    margin-top: calc(3.55rem - 0.079 * var(--mw));
  }
}

/* 6. Sections ---------------------------------------------------------- */
.canopy .section {
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.canopy .section > .container { position: relative; }

.canopy .section-partners { background: #eef2e9; }
/* Partner headings break only between phrase groups, never inside one. */
.canopy .partner-heading-part { display: inline-block; }
/* Contact sits on forest: a deeper stem tone. */
.canopy .section-contact { --stem: #5f8a4f; }

/* North Carolina, as a fine paper-coloured outline in the empty lower right of
   Contact. It lives inside the section's existing bottom padding (sized from it),
   right-aligned to the content edge, so it never meets the text, buttons or vine
   and adds no height. The stroke stays 1px at any size. */
.canopy .nc-watermark {
  position: absolute;
  right: var(--inset);
  bottom: 0.75rem;
  /* Height = padding less 0.75rem clear above and below; 2.61 = the outline's aspect ratio. */
  width: min(15.5rem, calc((var(--sec-pad) - 1.5rem) * 2.61));
  height: auto;
  fill: none;
  stroke: var(--paper);
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0.14;
  pointer-events: none;
}
.canopy .nc-watermark path { vector-effect: non-scaling-stroke; }

/* 7. Details ----------------------------------------------------------- */
/* Small leaf before each focus label; it turns and brightens on hover or focus. */
.canopy .focus-row .label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.canopy .focus-row .label::before {
  content: "";
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 100% 0;
  background: var(--c-mid);
  transition: rotate 0.5s ease, background-color 0.5s ease;
}
.canopy .focus-row { transition: border-color 0.5s ease; }
.canopy .focus-row:hover { border-top-color: var(--c-bright); }
.canopy .focus-row:hover .label::before { rotate: -35deg; background: var(--c-bright); }

/* Principles: leaves instead of dashes. */
.canopy .principles li::before {
  top: 1.45rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 100% 0;
  background: var(--c-mid);
  transition: rotate 0.5s ease;
}
.canopy .principles li:hover::before { rotate: -35deg; }

/* Partners and the call to action: a leaf standing on each forest rule. */
.canopy .partner,
.canopy .cta { position: relative; }
.canopy .partner::before,
.canopy .cta::before {
  content: "";
  position: absolute;
  top: calc(-2px - 1.1rem);
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 100% 0;
  background: var(--c-mid);
  transform-origin: 0 100%;
  transition: rotate 0.6s ease;
}
.canopy .cta::before { width: 1.4rem; height: 1.4rem; top: calc(-2px - 1.4rem); background: var(--c-bright); }
.canopy .partner:hover::before,
.canopy .cta:hover::before { rotate: -18deg; }

/* 8. Footer ------------------------------------------------------------ */
.canopy .site-footer {
  --stem: #5f8a4f;
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--forest-deep);
}
.canopy .site-footer .container { position: relative; }
/* The vine ends here in a small tendril, drawn at its natural size (40 x 56). */
.canopy .vine--end { height: calc(var(--vw) * 1.4); }

/* 9. Small screens ----------------------------------------------------- */
@media (max-width: 56.1875em) {
  /* The vine becomes a quiet line in the left margin; its leaves rest. */
  .canopy { --vine: calc(var(--gutter) / 2); --vw: 1rem; }
  .canopy .vine { opacity: 0.6; }
  .canopy .leaf,
  .canopy .vine--end { display: none; }

  /* The logo, centred above the copy on the same paper field. */
  .canopy .hero {
    --mw: clamp(11rem, 7rem + 9vw, 13rem);
    padding-top: 1.25rem;
  }
  .canopy .hero-grid { row-gap: 0; }
  .canopy .hero-mark {
    order: -1;
    grid-column: 1 / -1;
    justify-self: center;
    /* Trim the empty quarter below the wordmark, leaving a clear gap above the copy. */
    margin-bottom: calc(1.75rem - 0.25 * var(--mw));
  }
}

/* Phones: plain wrapping gives the headline better breaks than balancing here. */
@media (max-width: 37.4375em) {
  .canopy .hero h1 { text-wrap: pretty; }
}

/* 10. Reduced motion --------------------------------------------------- */
/* Nothing moves: the vine and leaves are simply shown at rest. */
@media (prefers-reduced-motion: reduce) {
  .canopy .vine,
  .canopy .leaf {
    animation: none !important;
    transition: none !important;
  }
  .canopy .focus-row,
  .canopy .focus-row .label::before,
  .canopy .principles li::before,
  .canopy .partner::before,
  .canopy .cta::before {
    transition: none !important;
  }
}