/* ============================================================================
   GREENDA — design tokens for the About Us modules
   Single source of truth. build.py injects this into the top of every
   module.css, scoped to that module's own root class so it cannot leak into
   the rest of the theme (same approach as Greenda — Hero's .gdh block).

   DO NOT edit the copy inside a module.css — edit this file and run:
       python3 build.py

   Values taken verbatim from the Greenda design system
   (_ds/greenda-design-system-.../colors_and_type.css).
   Fonts are NOT declared here: Work Sans is already in the portal, and each
   module exposes optional self-hosted font URL fields that emit @font-face
   via require_css.
   ============================================================================ */

.gmi.gmi.gmi{
  /* Green ramp — 500 is brand primary */
  --green-50:#E6F0DA; --green-100:#D4E8C2; --green-200:#B7DC9F; --green-300:#9BD17C;
  --green-400:#80C460; --green-500:#78B443; --green-600:#5F9336; --green-700:#477229;
  --green-800:#30521D; --green-900:#193212;

  /* Blue ramp — 900 is brand ink */
  --blue-50:#E6F0FA; --blue-900:#1D2331; --blue-950:#141A26; --blue-975:#0C1119;

  /* Purple accent */
  --purple-500:#8B53FE;

  /* Neutrals — the workhorse ramp */
  --neutral-0:#FFFFFF; --neutral-25:#F8FAF9; --neutral-50:#F3F5F4; --neutral-100:#E9EBEA;
  --neutral-200:#D4D7D6; --neutral-300:#BCC0BF; --neutral-400:#9FA4A3; --neutral-500:#818786;
  --neutral-600:#656C6B; --neutral-700:#4A5251; --neutral-800:#303837; --neutral-900:#1A2221;

  /* On-colour foregrounds */
  --fg-on-green:#0B1A05;

  /* Page canvas used by the About Us design */
  --gd-page-bg:#FAFBFC;

  /* Type — same fallback chain as the existing Greenda modules */
  --font-sans:'Work Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Work Sans','Inter',system-ui,sans-serif;
  --font-hand:'Caveat','Bradley Hand','Segoe Script',cursive;
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-extra:800;
  --fs-xxs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-3xl:38px; --fs-4xl:48px;
  --tracking-eyebrow:0.12em;

  /* Radii */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  /* Shadows */
  --shadow-sm:0 1px 2px 0 rgba(29,35,49,0.05), 0 2px 6px -2px rgba(29,35,49,0.06);
  --shadow-md:0 4px 14px -4px rgba(29,35,49,0.10), 0 2px 4px -1px rgba(29,35,49,0.05);

  /* Motion */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:520ms;

  /* About Us page layout — from the design file */
  --gd-measure:1080px;   /* max-width of every section's inner container */
  --gd-gutter:32px;      /* horizontal section padding */
}

.gmi.gmi.gmi, .gmi.gmi.gmi *, .gmi.gmi.gmi *::before, .gmi.gmi.gmi *::after{ box-sizing: border-box; }

/* ==========================================================================
   greenda-mission — module styles
   GENERATED by build.py from src/css/greenda-mission.css — do not edit this file.
   ========================================================================== */

/* Greenda — Mission ..................................... prefix: .gmi-
   Spec: About Us.dc.html, section "Mission".                              */

.gmi.gmi.gmi{
  padding-left: var(--gd-gutter);
  padding-right: var(--gd-gutter);
  background: var(--gd-page-bg);
  color: var(--neutral-900);
  font-family: var(--font-sans);
  position: relative;
  overflow: clip;
}

.gmi.gmi .gmi-inner{
  max-width: var(--gd-measure);
  margin: 0 auto;
  display: grid;
  align-items: start;
}
/* Explicit column counts — never auto-fit, so a column can't silently drop. */
.gmi.gmi .gmi-inner--narrow_left{ grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
.gmi.gmi .gmi-inner--even{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gmi.gmi .gmi-inner--wide_left{ grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }

.gmi.gmi .gmi-eyebrow{
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--green-700);
}

/* -- left column ----------------------------------------------------- */
.gmi.gmi .gmi-figure{
  margin-top: 28px; position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--neutral-50);
}
.gmi.gmi .gmi-figure-img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.gmi.gmi .gmi-focus--top{ object-position: 50% 0%; }
.gmi.gmi .gmi-focus--center{ object-position: 50% 50%; }
.gmi.gmi .gmi-focus--bottom{ object-position: 50% 100%; }

.gmi.gmi .gmi-quote{
  margin: 26px 0 0;
  width: max-content; max-width: 46vw;
  font-family: var(--font-hand);
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.05;
  color: var(--green-600);
  white-space: pre-line;
}
/* Bleeds left of the container, but only by as much as the viewport margin
   actually allows — never off-screen. Straight from the design. */
.gmi.gmi .gmi-quote--bleed{
  margin-left: calc(-1 * max(0px, min(180px, (100vw - var(--gd-measure)) / 2 - 8px)));
}

/* -- right column ---------------------------------------------------- */
.gmi.gmi .gmi-h2{
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: var(--fw-bold);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: pretty;
  color: var(--neutral-900);
}

.gmi.gmi .gmi-body{ margin: 28px 0 0; max-width: 62ch; }
.gmi.gmi .gmi-body p{
  margin: 0 0 1.2em;
  font-size: var(--fs-md); line-height: 1.7;
  color: var(--neutral-700); text-wrap: pretty;
}
.gmi.gmi .gmi-body p:last-child{ margin-bottom: 0; }
.gmi.gmi .gmi-body a{ color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

.gmi.gmi .gmi-callout{
  margin-top: 36px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 18px 22px;
  background: var(--green-50);
  border-left: 3px solid var(--green-500);
}
.gmi.gmi .gmi-callout-strong{ font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--green-800); }
.gmi.gmi .gmi-callout-hand{ font-family: var(--font-hand); font-size: 30px; line-height: 1.15; color: var(--neutral-900); }

/* -- reveal ---------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes gmi-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    .gmi.gmi .gmi-reveal{ animation: gmi-rise linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    .gmi.gmi .gmi-reveal--late{ animation-range: entry 12% entry 62%; }
  }
}

/* -- responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .gmi.gmi .gmi-inner--narrow_left, .gmi.gmi .gmi-inner--even, .gmi.gmi .gmi-inner--wide_left{ grid-template-columns: minmax(0, 1fr); }
  .gmi.gmi .gmi-quote{ max-width: 100%; white-space: normal; }
  .gmi.gmi .gmi-quote--bleed{ margin-left: 0; }
  .gmi.gmi .gmi-h2{ margin-top: 8px; }
}