/* ============================================================================
   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.
   ============================================================================ */

.gvi.gvi.gvi{
  /* 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 */
}

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

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

/* Greenda — Vision (dark band) .......................... prefix: .gvi-
   Spec: About Us.dc.html, section "Vision".
   The prototype's two paragraphs used repeat(auto-fit, minmax(280px,1fr)),
   which silently collapses to one column at odd widths. Fixed column count
   plus an explicit breakpoint instead.                                     */

.gvi.gvi.gvi{
  padding-left: var(--gd-gutter);
  padding-right: var(--gd-gutter);
  position: relative;
  overflow: clip;
  color: var(--neutral-0);
  font-family: var(--font-sans);
}
.gvi.gvi.gvi--bg-ink{ background: var(--blue-900); }
.gvi.gvi.gvi--bg-deep{ background: var(--blue-950); }
.gvi.gvi.gvi--bg-deepest{ background: var(--blue-975); }

.gvi.gvi .gvi-dots{
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 26px 26px;
}

.gvi.gvi .gvi-inner{ position: relative; max-width: var(--gd-measure); margin: 0 auto; }

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

.gvi.gvi .gvi-heading{
  margin: 32px 0 0; max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: var(--fw-extra);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--neutral-0);
  text-wrap: pretty;
}

.gvi.gvi .gvi-cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 56px;
  max-width: 1000px;
}
.gvi.gvi .gvi-col{
  margin: 0;
  font-size: var(--fs-md); line-height: 1.7;
  color: var(--neutral-300);
}

.gvi.gvi .gvi-closer{
  margin-top: 48px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.gvi.gvi .gvi-closer-hand{
  font-family: var(--font-hand); font-size: 30px; line-height: 1.2;
  color: var(--green-400); transform: rotate(-1deg);
}
.gvi.gvi .gvi-closer-plain{ font-size: var(--fs-md); color: var(--neutral-200); }

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

@media (max-width: 760px) {
  .gvi.gvi .gvi-cols{ grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
}