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

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

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

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

/* greenda-site-footer — site-wide footer .................. prefix: .gsf-
   Layout, spacing and type taken from the footer block of
   mega-menu-naviagtion/project/Greenda Hero.dc.html. Colours all read
   --gsf-* custom properties written by module.html from the colour fields. */

.gsf {
  /* Hairlines and hover fills are derived from the footer's own "strong" text
     colour, so re-branding one colour field keeps every edge in step. The
     rgba values are the fallback for browsers without color-mix(). */
  --gsf-hairline: var(--gsf-hairline-set, rgba(255, 255, 255, 0.12));
  --gsf-hairline-mid: var(--gsf-hairline-set, rgba(255, 255, 255, 0.18));
  --gsf-hairline-strong: rgba(255, 255, 255, 0.32);
  --gsf-hover-fill: var(--gsf-hover-set, rgba(255, 255, 255, 0.07));

  position: relative;
  background: var(--gsf-page-bg);
  padding: var(--gsf-pad-y) var(--gsf-pad-x) 20px;
  overflow: hidden;
  font-family: var(--font-sans);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .gsf {
    --gsf-hairline-strong: color-mix(in srgb, var(--gsf-strong) 32%, transparent);
  }
}

.gsf-card {
  max-width: var(--gsf-max);
  margin: 0 auto;
  background: var(--gsf-card-bg);
  border-radius: var(--gsf-radius);
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px) 0;
}

.gsf-icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gsf-icon--brand { fill: currentColor; stroke: none; }
.gsf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gsf [hidden] { display: none; }

/* ------------------------------------------------------------- top block */

.gsf-top {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.gsf-about {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 440px;
}

.gsf-h {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gsf-heading);
}

.gsf-body {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--gsf-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- socials */

.gsf-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.gsf-social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gsf-social-border);
  color: var(--gsf-social);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.gsf-social:hover,
.gsf-social:focus-visible {
  background: var(--gsf-hover-fill);
  border-color: var(--gsf-social-hover);
  color: var(--gsf-social-hover);
}

/* ---------------------------------------------------------- app buttons */

.gsf-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.gsf-app {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 15px;
  border: 1px solid var(--gsf-app-border);
  border-radius: 11px;
  text-decoration: none;
  color: var(--gsf-text);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.gsf-app:hover,
.gsf-app:focus-visible {
  background: var(--gsf-hover-fill);
  border-color: var(--gsf-hairline-strong);
}

.gsf-app .gsf-icon { width: 25px; height: 25px; color: var(--gsf-app-icon); }
.gsf-app-lines { display: flex; flex-direction: column; line-height: 1.15; }

.gsf-app-small {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gsf-app-small);
}

.gsf-app-big {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--gsf-strong);
}

/* ---------------------------------------------------------- link columns */

.gsf-cols {
  display: grid;
  grid-template-columns: repeat(var(--gsf-cols), minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 44px);
  min-width: 0;
}

.gsf-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gsf-about > .gsf-h { color: var(--gsf-about-heading); }
.gsf-col .gsf-h { margin: 0 0 12px; color: var(--gsf-heading); }

.gsf-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-size: var(--fs-base);
  color: var(--gsf-text);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}

a.gsf-link:hover,
a.gsf-link:focus-visible { color: var(--gsf-link-hover); }
.gsf-link--static { cursor: default; }

.gsf-badge {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--gsf-badge-bg);
  border: 1px solid var(--gsf-badge-border);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gsf-badge-text);
}

/* ------------------------------------------------------------- watermark */

.gsf-mark {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex;
  justify-content: center;
}

.gsf-mark img {
  display: block;
  width: min(1180px, 100%);
  height: auto;
  opacity: var(--gsf-mark-opacity);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 92%);
}

/* ------------------------------------------------------------- legal bar */

.gsf-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--gsf-hairline);
}

.gsf-legal-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--gsf-legal);
}

.gsf-legal-note .gsf-icon { width: 16px; height: 16px; color: var(--gsf-legal-icon); }

.gsf-copy { font-size: var(--fs-sm); color: var(--gsf-muted); }

.gsf-legal-links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.gsf-legal-link {
  font-size: var(--fs-sm);
  color: var(--gsf-legal);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}

.gsf-legal-link:hover,
.gsf-legal-link:focus-visible { color: var(--gsf-legal-hover); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .gsf-top { grid-template-columns: 1fr; }
  .gsf-about { max-width: none; }
}

@media (max-width: 900px) {
  .gsf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .gsf-cols { grid-template-columns: minmax(0, 1fr); }
  .gsf-legal-links { margin-left: 0; }
  .gsf-mark { margin-top: 32px; }
}

.gsf :focus-visible {
  outline: 2px solid var(--gsf-link-hover);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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


/* ==========================================================================
   Theme override guard
   Portal themes routinely style `a` with a selector that outranks a single
   class (e.g. `.content-wrapper a`), which repaints every link in here and
   can add underlines. These rules re-assert the module's own colour fields.
   They are the only !important declarations in this file, and they only
   restate values the editor already controls — nothing is hard-coded.
   ========================================================================== */

.gsf a { text-decoration: none !important; }

.gsf a.gsf-link { color: var(--gsf-text) !important; }
.gsf a.gsf-link:hover,
.gsf a.gsf-link:focus-visible { color: var(--gsf-link-hover) !important; }

.gsf a.gsf-legal-link { color: var(--gsf-legal) !important; }
.gsf a.gsf-legal-link:hover,
.gsf a.gsf-legal-link:focus-visible { color: var(--gsf-legal-hover) !important; }

.gsf a.gsf-social {
  color: var(--gsf-social) !important;
  border-color: var(--gsf-social-border) !important;
}
.gsf a.gsf-social:hover,
.gsf a.gsf-social:focus-visible {
  color: var(--gsf-social-hover) !important;
  border-color: var(--gsf-social-hover) !important;
}

.gsf a.gsf-app { border-color: var(--gsf-app-border) !important; }
.gsf a.gsf-app .gsf-app-small { color: var(--gsf-app-small) !important; }
.gsf a.gsf-app .gsf-app-big { color: var(--gsf-strong) !important; }
.gsf a.gsf-app .gsf-icon { color: var(--gsf-app-icon) !important; }

.gsf .gsf-badge {
  color: var(--gsf-badge-text) !important;
  background: var(--gsf-badge-bg) !important;
  border-color: var(--gsf-badge-border) !important;
}

.gsf .gsf-h { color: var(--gsf-heading); }
.gsf .gsf-about > .gsf-h { color: var(--gsf-about-heading); }
.gsf .gsf-body { color: var(--gsf-body); }
.gsf .gsf-copy { color: var(--gsf-muted); }