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

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

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

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

/* Greenda — Closing CTA ................................. prefix: .gcc-
   Spec: About Us.dc.html, section "Closing CTA".
   The photo slides up behind the copy and fades into the page background,
   so the gradient stops must use the same colour as --gd-page-bg.          */

.gcc.gcc.gcc{
  position: relative;
  overflow: hidden;
  background: var(--gd-page-bg);
  border-top: 1px solid var(--neutral-100);
  color: var(--neutral-900);
  font-family: var(--font-sans);
}

.gcc.gcc .gcc-copy{
  position: relative; z-index: 2;
  padding-left: var(--gd-gutter);
  padding-right: var(--gd-gutter);
  text-align: center;
  margin: 0 auto;
}

.gcc.gcc .gcc-h2{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: var(--fw-extra);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--neutral-900);
}

.gcc.gcc .gcc-body{
  margin: 20px auto 0; max-width: 52ch;
  font-size: var(--fs-lg); line-height: 1.5;
  color: var(--neutral-700);
}

.gcc.gcc .gcc-ctas{ margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gcc.gcc .gcc-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--r-pill);
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.gcc.gcc .gcc-btn--primary{ background: var(--green-500); color: var(--fg-on-green); border: 1px solid transparent; }
.gcc.gcc .gcc-btn--primary:hover{ background: var(--green-600); color: var(--fg-on-green); text-decoration: none; }
.gcc.gcc .gcc-btn--ghost{ background: var(--neutral-0); color: var(--neutral-900); border: 1px solid var(--neutral-200); }
.gcc.gcc .gcc-btn--ghost:hover{ border-color: var(--neutral-400); color: var(--neutral-900); text-decoration: none; }
.gcc.gcc .gcc-btn:focus-visible{ outline: 2px solid var(--green-700); outline-offset: 3px; }
.gcc.gcc .gcc-arrow{ font-size: 17px; line-height: 1; }

.gcc.gcc .gcc-hand{
  margin-top: 22px;
  font-family: var(--font-hand); font-size: 30px; line-height: 1.2;
  color: var(--green-700);
  transform: rotate(-1.2deg);
}

/* -- field photo ------------------------------------------------------ */
.gcc.gcc .gcc-field{ position: relative; z-index: 1; height: clamp(300px, 34vw, 480px); }
.gcc.gcc .gcc-field-img{
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
}
.gcc.gcc .gcc-field-fade{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--gd-page-bg) 0%,
    color-mix(in srgb, var(--gd-page-bg) 86%, transparent) 22%,
    color-mix(in srgb, var(--gd-page-bg) 28%, transparent) 48%,
    transparent 72%
  );
}
/* Fallback for engines without color-mix(): the design's literal stops. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .gcc.gcc .gcc-field-fade{
    background: linear-gradient(
      to bottom,
      #FAFBFC 0%,
      rgba(250, 251, 252, 0.86) 22%,
      rgba(250, 251, 252, 0.28) 48%,
      rgba(250, 251, 252, 0) 72%
    );
  }
}

@media (max-width: 560px) {
  .gcc.gcc .gcc-ctas{ flex-direction: column; align-items: stretch; }
  .gcc.gcc .gcc-btn{ justify-content: center; }
}