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

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

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

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

/* Greenda — Story statement ............................. prefix: .gss-
   Spec: About Us.dc.html, section "Our story is your story".
   The section keeps the standard 1080px container; the design's 760px is a
   deliberate narrower *text measure* centred inside it.                    */

.gss.gss.gss{
  padding-left: var(--gd-gutter);
  padding-right: var(--gd-gutter);
  font-family: var(--font-sans);
  color: var(--neutral-900);
}
.gss.gss.gss--bg-tint{ background: var(--neutral-25); }
.gss.gss.gss--bg-page{ background: var(--gd-page-bg); }
.gss.gss.gss--bg-white{ background: var(--neutral-0); }
.gss.gss.gss--bg-mint{ background: var(--green-50); }

.gss.gss .gss-inner{ max-width: var(--gd-measure); margin: 0 auto; }
.gss.gss .gss-measure{ margin: 0 auto; text-align: center; }

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

.gss.gss .gss-statement{
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 54px);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: pretty;
  white-space: pre-line;
}

.gss.gss .gss-support{
  margin: 24px auto 0; max-width: 46ch;
  font-size: var(--fs-lg); line-height: 1.6;
  color: var(--neutral-700);
  white-space: pre-line;
}

.gss.gss .gss-hand{
  margin: 18px 0 0;
  font-family: var(--font-hand);
  font-size: 30px;
  line-height: 1.2;
  color: var(--green-700);
}

/* Scroll-driven reveal. No JS: where view() is unsupported the content is
   simply already visible, which is the correct fallback. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes gss-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    .gss.gss .gss-reveal{ animation: gss-rise linear both; animation-timeline: view(); }
    .gss.gss .gss-reveal--1{ animation-range: entry 5%  entry 55%; }
    .gss.gss .gss-reveal--2{ animation-range: entry 12% entry 62%; }
    .gss.gss .gss-reveal--3{ animation-range: entry 18% entry 68%; }
    /* the handwritten line keeps its tilt: rotate lives on the element's own
       inline transform, so animate opacity only */
    @keyframes gss-fade { from { opacity: 0; } to { opacity: 1; } }
    .gss.gss .gss-hand.gss-reveal{ animation-name: gss-fade; }
  }
}