/* New Emidat design system (type styles + colors) on top of the mirrored Webflow pages.
   Source of truth: Figma X4wic4oB9anS50EYbym9tv, "Existing top level pages" (Home, DPP, EPD).
   Same tokens as src/styles/tokens.css. Only type and color properties are set here
   (font-size, line-height, letter-spacing, font-weight, text-transform, color,
   background-color, border-color, fill/stroke); never layout.
   Linked after overrides.css on every snapshot page by scripts/apply_overrides.py, and
   appended to public/chrome/webflow.css (with :root -> :host) by scripts/extract_chrome.py. */

/* ======================================================================
   1. Tokens (copied from src/styles/tokens.css)
   ====================================================================== */
:root {
  --color-builtgreen-600: #404d3e;
  --color-builtgreen-700: #323d31;
  --color-energyyellow-300: #dcff1d;
  --color-gray-50: #f7f7f7;
  --color-gray-200: #e0e0e0;
  --color-gray-300: #d1d1d1;
  --color-gray-400: #b5b5b5;
  --color-gray-500: #8f8f8f;
  --color-gray-600: #666666;
  --color-gray-700: #3d3d3d;
  --color-gray-800: #2e2c2d;
  --color-sand-100: #f2f0e9;
  --color-sand-400: #d6d0c5;
  --color-sand-500: #c2b8ab;

  --content-primary: var(--color-builtgreen-700);
  --content-secondary: var(--color-builtgreen-600);
  --content-tertiary: var(--color-gray-600);
  --content-primary-inverse: var(--color-sand-100);
  --content-secondary-inverse: var(--color-sand-400);
  --content-tertiary-inverse: var(--color-sand-500);
  --content-accent: var(--color-energyyellow-300);
  --card-primary: var(--color-gray-50);
  --card-inverse: var(--color-builtgreen-600);
  --background-primary: var(--color-gray-200);
  --background-accent: var(--color-energyyellow-300);
  --background-inverse: var(--color-gray-800);
  --border-primary: var(--color-gray-400);
  --border-secondary: var(--color-gray-500);
  --border-tertiary: var(--color-builtgreen-600);

  /* Desktop (992–1919px) is the base mode. All sizes are static per breakpoint (no vw). */
  --hero-gigantic: 256;
  --hero-huge: 128;
  --hero-xl: 88;
  --h1: 64px;
  --h2: 52px;
  --h3: 40px;
  --h4: 32px;
  --h5: var(--p-xl);
  --h6: var(--p-lg);
  --p-xl: 22px;
  --p-lg: 18px;
  --p-md: 14px;
  --p-sm: 12px;
}
@media (max-width: 479px) {
  :root {
    --hero-gigantic: 56; --hero-huge: 48; --hero-xl: 44;
    --h1: 40px; --h2: 36px; --h3: 32px; --h4: 24px;
    --p-xl: 20px; --p-lg: 16px; --p-md: 14px; --p-sm: 12px;
  }
}
@media (min-width: 480px) and (max-width: 991px) {
  :root {
    --hero-gigantic: 88; --hero-huge: 64; --hero-xl: 52;
    --h1: 48px; --h2: 44px; --h3: 36px; --h4: 28px;
    --p-xl: 22px; --p-lg: 16px; --p-md: 14px; --p-sm: 12px;
  }
}
@media (min-width: 1920px) {
  :root {
    --hero-gigantic: 320; --hero-huge: 192; --hero-xl: 128;
    --h1: 80px; --h2: 64px; --h3: 52px; --h4: 40px;
    --p-xl: 24px; --p-lg: 20px; --p-md: 16px; --p-sm: 14px;
  }
}

/* ======================================================================
   2. Webflow variables -> new palette and type scale
   ====================================================================== */
:root {
  /* Colors */
  --colors--primary: var(--color-energyyellow-300);        /* #dcff1d, unchanged */
  --colors--energy-yellow: var(--color-energyyellow-300);  /* #dcff1d, unchanged */
  --colors--teritary: var(--color-builtgreen-600);         /* #404d3e, unchanged (content/secondary, card/inverse) */
  --colors--white: var(--content-primary-inverse);         /* white -> sand-100 #f2f0e9 */
  --colors--black: var(--content-primary);                 /* #333 -> builtgreen-700 #323d31 (button text on yellow) */
  --colors--black-bg: var(--background-inverse);           /* #2b2725 -> gray-800 #2e2c2d */
  --colors--light-grey: var(--background-primary);         /* #ddd -> gray-200 #e0e0e0 */
  --colors--light-grey-2: var(--border-primary);           /* #bcbcbc -> gray-400 #b5b5b5 */
  --colors--dark-grey: var(--color-gray-700);              /* #484848 -> gray-700 #3d3d3d */
  --colors--secondary: var(--color-sand-400);              /* #d6d5c9 -> sand-400 #d6d0c5 */
  /* Mode tokens (default light mode) */
  --_modes---tokens--headline: var(--content-primary);     /* was teritary #404d3e */
  --_modes---tokens--secondary-button-text: var(--content-primary-inverse); /* was primary (yellow) on dark green */

  /* Type scale */
  --_typography---styles--h1: var(--h1);
  --_typography---styles--h2: var(--h2);
  --_typography---styles--h3: var(--h3);
  --_typography---styles--h4: var(--h4);
  --_typography---styles--h5: var(--h5);
  --_typography---styles--copy-l: var(--p-xl);
  --_typography---styles--copy: var(--p-lg);
  --_typography---styles--copy-s: var(--p-md);
  --_typography---styles--sulbine-l: var(--p-lg);   /* label-lg */
  --_typography---styles--subline: var(--p-md);     /* label-md */
  --_typography---styles--subline-s: var(--p-md);   /* label-md (buttons, stat labels) */
  --_typography---styles--supertype: calc(var(--hero-huge) * 1px);

  /* Mode-aware text colors used below: light by default */
  --ds-fg-1: var(--content-primary);
  --ds-fg-2: var(--content-secondary);
  --ds-fg-3: var(--content-tertiary);
}

/* Webflow section modes (same selectors and order as the Webflow CSS so specificity matches).
   Light modes: headline teritary -> content/primary; dark modes: inverse text tokens. */
.section.w-variant-6380744f-d8a4-de71-288b-52b76eba8048,
.section.mode-sand, .section.sand-21, .section.background-line.sand, .section.background-line.sand-44,
.section.sand, .rich-text-block-2, .lottie-block {
  --_modes---tokens--headline: var(--content-primary);
  --_modes---tokens--secondary-button-text: var(--content-primary-inverse);
  --ds-fg-1: var(--content-primary); --ds-fg-2: var(--content-secondary); --ds-fg-3: var(--content-tertiary);
}
.section.w-variant-182875b4-882a-4284-3c24-11f648152adb, .section.yellow-2, .yellow-box {
  --_modes---tokens--headline: var(--content-primary);
  --_modes---tokens--primary-button-text: var(--content-primary-inverse); /* yellow text on dark button */
  --ds-fg-1: var(--content-primary); --ds-fg-2: var(--content-secondary); --ds-fg-3: var(--content-tertiary);
}
.section.w-variant-7a8fc3b8-16ad-fa32-a48c-f854e86933d2,
.section.mode-black, .section.black-2, .section.background-line.black-22, .section.background-line.black-42 {
  --_modes---tokens--secondary-button-text: var(--content-primary-inverse);
  --ds-fg-1: var(--content-primary-inverse); --ds-fg-2: var(--content-secondary-inverse); --ds-fg-3: var(--content-tertiary-inverse);
}
.section.background-line.black-42.bg-mode {
  --_modes---tokens--headline: var(--content-primary);
  --ds-fg-1: var(--content-primary); --ds-fg-2: var(--content-secondary); --ds-fg-3: var(--content-tertiary);
}
.section.green, .phase-block.green, .green-box {
  --ds-fg-1: var(--content-primary-inverse); --ds-fg-2: var(--content-secondary-inverse); --ds-fg-3: var(--content-tertiary-inverse);
}

/* ======================================================================
   3. Type styles
   ====================================================================== */

/* ---- Hero (Black, uppercase, -4%) ---- */
.type-percentage,
.type-vw,
h1.h2:not(.heading-2),
.type-percentage.w-variant-0b91fea4-f2b0-0ade-6f52-a1ec75832853:not(.add),
.type-percentage._2,
.type-percentage.s-4.add.s-6 {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em;
}
/* Hero/Gigantic */
.type-percentage { font-size: calc(var(--hero-gigantic) * 1px); line-height: 0.8; }
/* Hero/Huge */
.type-vw { font-size: calc(var(--hero-huge) * 1px); line-height: 0.96; }
/* Hero/XL */
h1.h2:not(.heading-2),
.type-percentage.w-variant-0b91fea4-f2b0-0ade-6f52-a1ec75832853:not(.add),
.type-percentage._2,
.type-percentage.s-4.add.s-6 { font-size: calc(var(--hero-xl) * 1px); line-height: 0.96; }

/* ---- H1 (Black, uppercase, 96%, -4%) ---- */
.h1, .h2, h1.heading-2.h2 {
  font-size: var(--h1); line-height: 0.96; letter-spacing: -0.04em; font-weight: 900; text-transform: uppercase;
}

/* ---- H2–H4 (Black, sentence case, 120%, -2%) ---- */
.h3, .h4, .uc-h2, .tm-h2, .uc-h3,
.h3.primary.percentage, .type-percentage.add:not(.s-6) {
  font-weight: 900; text-transform: none; letter-spacing: -0.02em; line-height: 1.2;
}
/* H2 */
.h3, .headline-block > .h4, .uc-h2, .tm-h2 { font-size: var(--h2); }
/* H3 */
.h3.primary.percentage, .type-percentage.add:not(.s-6) { font-size: var(--h3); }
/* H4 */
.h4, .uc-h3, .uc-h2.white, .block.vt > .slot > .headline-block > h2.h3 { font-size: var(--h4); }

/* ---- H5–H6 (Black, 140%, -2%) ---- */
.title, .uc-context .div-block-75 > div:first-child, .menu-cta .copy-l,
.h5, .title.year, .h4.yellow, .copy-l.bold, .footer_list_item_link .copy, .menu-copy,
.uc-card, .uc-src, .tm-name, .ag-scard-title, .blog-title-preview,
.text-small.is-bold-uppercase-built-green, .text-small-uppercase-bold {
  font-weight: 900; text-transform: none; letter-spacing: -0.02em; line-height: 1.4;
}
.menu-cta .copy-l strong, .text-small.is-bold-uppercase-built-green .text-span-3 { font-weight: 900; }
/* H5 */
.title, .title.s, .uc-context .div-block-75 > div:first-child, .menu-cta .copy-l { font-size: var(--h5); }
/* H6 */
.h5, .title.year, .h4.yellow, .copy-l.bold, .footer_list_item_link .copy, .menu-copy,
.uc-card, .uc-src, .tm-name, .ag-scard-title, .blog-title-preview,
.text-small.is-bold-uppercase-built-green, .text-small-uppercase-bold { font-size: var(--h6); }

/* ---- Content p-xl / p-lg / p-md / p-sm (Book, 140%, -2%) ---- */
.copy-xl, .copy, .copy-l, .copy-s, .text-block-13, .tm-role, .ag-agent-title,
.uc-sub, .tm-sub, .tm-quote,
.info-block div, .phase-block li, .ag-con-sub, .ag-prompt-text, .ag-scard-sub, .ag-con-title,
.process_content .copy-s, .text-small.is-built-green, .copy-s.detail {
  font-weight: 400; text-transform: none; letter-spacing: -0.02em; line-height: 1.4;
}
/* p-xl */
.copy-xl, .headline-block > .h3 ~ .copy, .uc-sub, .tm-sub, .tm-quote,
.section.yellow-2 .data-info .copy-s { font-size: var(--p-xl); }
/* p-lg (majority for .copy, .copy-l and .copy-s on these pages) */
.copy, .copy-l, .copy-s, .text-block-13, .tm-role, .ag-agent-title { font-size: var(--p-lg); }
.ag-agent-title { font-weight: 700; } /* Figma: Circular Bold 18/140%, no style */
/* p-md */
.info-block div, .phase-block li, .ag-con-sub, .ag-prompt-text, .ag-scard-sub,
.glass-box .copy-s, .footer_logo .copy-s, .language_toggle .copy-s, .language-link { font-size: var(--p-md); }
/* p-md-bold */
.text-logo-slider-wrapper .copy-s, .info-block strong, .ag-con-title,
.process_content .text-span, .text-small.is-built-green .text-span {
  font-size: var(--p-md); font-weight: 700; letter-spacing: -0.02em; line-height: 1.4;
}
/* p-sm */
.copy-s.detail, .process_content .copy-s, .text-small.is-built-green { font-size: var(--p-sm); }
/* Homepage "Who we are" intro */
.copy.white { font-size: var(--p-xl); }
/* Top nav links: p-md on desktop (the mobile menu keeps its own Webflow styles) */
@media screen and (min-width: 992px) {
  .nav_menu_link { font-weight: 400; letter-spacing: -0.02em; line-height: 1.4; }
  .nav_menu_link.dark { font-size: var(--p-md); }
}

/* ---- Labels (Black, uppercase, 140%, +4%) ---- */
.subline-l, .tm-tagtext, .uc-index, .tm-index,
.button_text, .subline, .subline-s, .tagline, .uc-tag, .tm-htag, .uc-tab, .uc-caption,
.ag-btn, .ag-soontag, .text-block-14, ._04-tab,
.tm-tagtext._2, .tm-otherslabel, .ag-chip, .subline-s.subline, .footer-list > .copy-s, .menu-headline, .text-block-15 {
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4;
}
.button_text strong, .subline-s strong, .footer-list > .copy-s strong { font-weight: 900; }
/* label-lg */
.subline-l, .tm-tagtext, .uc-index, .tm-index { font-size: var(--p-lg); }
/* label-md */
.button_text, .subline, .subline-s, .tagline, .uc-tag, .tm-htag, .uc-tab, .uc-caption,
.ag-btn, .ag-soontag, .text-block-14, ._04-tab { font-size: var(--p-md); }
/* label-sm */
.tm-tagtext._2, .tm-otherslabel, .ag-chip, .subline-s.subline, .footer-list > .copy-s, .menu-headline, .text-block-15 { font-size: var(--p-sm); }

/* ---- Rich text and bare tags ---- */
.rich-text h1, .w-richtext h1 { font-size: var(--h1); line-height: 0.96; letter-spacing: -0.04em; font-weight: 900; text-transform: uppercase; }
.rich-text h2, .w-richtext h2 { font-size: var(--h2); line-height: 1.2; letter-spacing: -0.02em; font-weight: 900; text-transform: none; }
.rich-text h3, .w-richtext h3 { font-size: var(--h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 900; text-transform: none; }
.rich-text h4, .w-richtext h4 { font-size: var(--h4); line-height: 1.2; letter-spacing: -0.02em; font-weight: 900; text-transform: none; }
.rich-text h5, .w-richtext h5 { font-size: var(--h5); line-height: 1.4; letter-spacing: -0.02em; font-weight: 900; text-transform: none; }
.rich-text h6, .w-richtext h6 { font-size: var(--h6); line-height: 1.4; letter-spacing: -0.02em; font-weight: 900; text-transform: none; }
.rich-text p, .rich-text li, .rich-text a,
.w-richtext p, .w-richtext li { font-size: var(--p-lg); line-height: 1.4; letter-spacing: -0.02em; font-weight: 400; }
.rich-text blockquote, .w-richtext blockquote { font-size: var(--p-xl); line-height: 1.4; letter-spacing: -0.02em; }
/* Bare tags: zero specificity, so every class rule (and the pages' inherit reset) wins. */
:where(h1) { font-size: var(--h1); line-height: 0.96; letter-spacing: -0.04em; font-weight: 900; text-transform: uppercase; }
:where(h2) { font-size: var(--h2); line-height: 1.2; letter-spacing: -0.02em; font-weight: 900; }
:where(h3) { font-size: var(--h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 900; }
:where(h4) { font-size: var(--h4); line-height: 1.2; letter-spacing: -0.02em; font-weight: 900; }
:where(h5) { font-size: var(--h5); line-height: 1.4; letter-spacing: -0.02em; font-weight: 900; }
:where(h6) { font-size: var(--h6); line-height: 1.4; letter-spacing: -0.02em; font-weight: 900; }
:where(p) { font-size: var(--p-lg); line-height: 1.4; letter-spacing: -0.02em; }

/* ======================================================================
   4. Colors
   ====================================================================== */

/* Headings follow the section mode: content/primary, or primary-inverse on dark. */
.h1, .h2, .h3, .h4, .h5, .title, .copy-xl, .copy-l.bold, .menu-cta .copy-l { color: var(--ds-fg-1); }
/* Webflow color combo classes and white variants keep their role (yellow = accent,
   white = primary-inverse) against the generic rules above. */
:is(.h1, .h2, .h3, .h4, .h5, .title, .copy, .copy-l, .copy-s, .copy-xl).yellow { color: var(--content-accent); }
:is(.h1, .h2, .h3, .h4, .h5, .title, .copy-l, .copy-s, .copy-xl).white { color: var(--content-primary-inverse); }
.copy.white { color: var(--content-secondary-inverse); }
.copy.w-variant-6402fbd7-7dd1-898e-1050-03f047123aae,
.copy-s.w-variant-6402fbd7-7dd1-898e-1050-03f047123aae,
.copy-s.w-variant-d3d8a53c-eccf-7782-aec2-102b787f1a85 { color: var(--content-primary-inverse); }
/* Hero headlines */
h1.h2, h1.heading-2.h2, .type-percentage._2, .type-percentage.s-4.add.s-6 { color: var(--content-accent); }
.h4.yellow { color: var(--content-accent); }
.title.yellow { color: var(--content-primary-inverse); }
.title.year { color: var(--ds-fg-2); }
.phase-block .h5 { color: var(--content-secondary); }
.phase-block.active .h5 { color: var(--content-primary); }
/* Homepage yellow "Building a better future" section */
.section.yellow-2 .type-vw, .section.yellow-2 .type-percentage, .section.yellow-2 .h3.primary.percentage,
.section.yellow-2 .headline-block > .h4, .section.yellow-2 .data-info .copy-s { color: var(--content-secondary); }
.section.yellow-2 .subline-s { color: var(--content-tertiary); }

/* Body copy */
.copy, .copy-l, .copy-s, .text-block-13 { color: var(--ds-fg-2); }
.copy.secondary-inverse { color: var(--content-secondary-inverse); }
._03-block > .copy { color: var(--content-primary); }
.block.data-info > p.copy-s { color: var(--content-tertiary); }
.copy-s.detail { color: var(--ds-fg-3); }
.text-logo-slider-wrapper .copy-s { color: var(--content-secondary-inverse); }
.glass-box .copy-s { color: var(--ds-fg-2); }
.info-block div, .info-block strong, .phase-block li { color: var(--content-secondary); }
.process_content .copy-s, .text-small.is-built-green { color: var(--content-secondary); }
.process_content .text-span, .text-small.is-built-green .text-span,
.text-small.is-bold-uppercase-built-green, .text-small-uppercase-bold { color: var(--content-primary); }

/* Labels */
.tagline, .subline-l { color: var(--content-secondary); }
.text-block-8.subline { color: var(--content-tertiary); }
.phase-block .subline-s.subline { color: var(--content-tertiary); }
.phase-block.active .subline-s.subline { color: var(--content-primary); }
._04-tab, ._04-tab.w--current { color: var(--content-primary); }
.text-block-14, .text-block-15 { color: var(--content-tertiary-inverse); }
.blog-title-preview { color: var(--content-primary-inverse); }

/* Buttons: text on yellow = content/primary (via --colors--black), on dark = primary-inverse
   (mode tokens above); the outline button over the dark hero = content/accent. */
.button.teritary.w-variant-c0048e70-048e-6e74-03b4-262400f5eb13 { color: var(--content-accent); }

/* Homepage custom sections (uc-*, tm-*, ag-*) */
.uc-index, .tm-index, .uc-caption, .ag-con-sub { color: var(--content-tertiary); }
.uc-index._2 { color: var(--content-tertiary-inverse); }
.uc-tag, .tm-htag, .uc-sub, .tm-sub, .uc-src, .tm-otherslabel, .ag-scard-sub { color: var(--content-secondary); }
.uc-tag.yellow { color: var(--content-primary); } /* yellow chip: accent text would vanish */
.uc-h2, .tm-h2, .uc-tab, .tm-tagtext, .tm-quote, .tm-name, .tm-role, .ag-con-title, .ag-chip,
.ag-scard-title, .ag-btn { color: var(--content-primary); }
.uc-h2.white, .uc-h2.yellow, .uc-h3.white, .uc-card, .uc-context .div-block-75 > div:first-child,
.ag-agent-title, .ag-prompt-text, .ag-soontag { color: var(--content-primary-inverse); }

/* Footer (bright on every page but the homepage, dark there) */
.footer_list_item_link .copy { color: var(--content-primary); }
.footer-list > .copy-s { color: var(--content-tertiary); }
.footer_logo .copy-s { color: var(--content-secondary); }
.footer_list_item_link .copy.w-variant-6402fbd7-7dd1-898e-1050-03f047123aae { color: var(--content-primary-inverse); }
.footer-list > .copy-s.w-variant-6402fbd7-7dd1-898e-1050-03f047123aae { color: var(--content-tertiary-inverse); }
.footer_logo .copy-s.w-variant-6402fbd7-7dd1-898e-1050-03f047123aae { color: var(--content-secondary-inverse); }

/* Header: links content/primary on the light bar, primary-inverse over the hero
   (the page's inline styles force #FFF with !important there). */
.nav_menu_link.dark, .language-link.dark, .language_toggle.dark { color: var(--content-primary); }
.language_toggle.dark { border-color: var(--content-primary); }
.language_toggle .copy-s { color: inherit; }
.nav_menu_link.dark.w-variant-d3d8a53c-eccf-7782-aec2-102b787f1a85,
.language_toggle.dark.w-variant-d3d8a53c-eccf-7782-aec2-102b787f1a85 { color: var(--content-primary-inverse); border-color: var(--content-primary-inverse); }
#navbar.is-transparent .navbar5_dropdown-toggle,
#navbar.is-transparent .navbar5_dropdown-toggle .nav_menu_link,
#navbar.is-transparent .navbar5_dropdown-toggle .dropdown-chevron,
#navbar.is-transparent .language_toggle,
#navbar.is-transparent .language_toggle .copy-s,
#navbar.is-transparent .language_toggle .dropdown-chevron { color: var(--content-primary-inverse) !important; }
#navbar.is-transparent .language_toggle { border-color: var(--content-primary-inverse) !important; }
#navbar.is-transparent .navbar5_menu-button svg path { stroke: var(--content-primary-inverse) !important; fill: var(--content-primary-inverse) !important; }
.menu-headline { color: var(--content-tertiary); }
.menu-headline.light { color: var(--content-secondary-inverse); }
.menu-copy { color: var(--content-primary); }
.menu-copy.w-variant-818bec10-dddd-2865-251d-1e1dc3994930 { color: var(--content-accent); }

/* Surfaces that used pure white */
.card, .lable { background-color: var(--card-primary); }

/* Mega-menu links: Content/p-md-bold (Bold 14, 140%, -2%), Figma Dotcom Design
   System › Components › nav exp. */
.menu-copy { font-size: var(--p-md); font-weight: 700; }

/* Menu toggles (design review, Lauren): hover = 4% black, open = 8% black. */
.navbar5_dropdown-toggle:hover { background-color: rgba(0, 0, 0, 0.04) !important; }
.navbar5_dropdown-toggle.w--open,
.navbar5_dropdown-toggle[aria-expanded="true"] { background-color: rgba(0, 0, 0, 0.08) !important; }

/* ======================================================================
   Buttons: every Webflow button renders as the Figma Button (Components › Button 6530:41417),
   the same component as src/components/Button.astro / .btn-* in src/styles/base.css.
   48px high, 0/24px padding, 8px gap, label-md; no square glyph. Hover = 12% overlay.
     .button, .button.new, yellow w-variants  -> Primary · Filled
     .button.secondary                        -> Secondary · Filled
     .button.new.outline, .button.teritary    -> Secondary · Outline (dark backgrounds)
   ====================================================================== */
.button, .button.new, .w-button.button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important; height: 48px !important; min-height: 0 !important; padding: 0 24px !important;
  box-sizing: border-box !important; border: 2px solid transparent !important; border-radius: 0 !important;
  background-color: var(--background-accent) !important; color: var(--color-builtgreen-700) !important;
  font-family: Circularstd, sans-serif !important; font-size: 14px !important; font-weight: 900 !important;
  line-height: 1.4 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important;
  white-space: nowrap; text-decoration: none !important; box-shadow: none !important;
}
.button .button_text { font-size: 14px !important; font-weight: 900 !important; line-height: 1.4 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; color: inherit !important; }
.button .button_svg { display: none !important; }
.button:hover { box-shadow: inset 0 0 0 999px rgba(64, 77, 62, 0.12) !important; }
.button.secondary { background-color: var(--card-inverse) !important; color: var(--content-primary-inverse) !important; }
.button.secondary:hover { box-shadow: inset 0 0 0 999px rgba(247, 247, 247, 0.12) !important; }
.button.teritary, .button.new.outline {
  background-color: transparent !important; color: var(--content-accent) !important; border-color: var(--content-accent) !important;
  -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important;
}
.button.teritary:hover, .button.new.outline:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.12) !important; }

/* ======================================================================
   Section labels (design update): no "01/02" numbers and no grey tag chip above section
   headings; just the label style (Content/label-md), as on Careers and Mission.
   ====================================================================== */
.tag-wrapper > .subline { display: none !important; }
.tag-wrapper .tag { background-color: transparent !important; padding: 0 !important; }
.tag-wrapper .tagline {
  font-size: var(--p-md) !important; font-weight: 900 !important; line-height: 1.4 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--ds-fg-2) !important;
}

/* Buttons on yellow backgrounds use the Secondary style (Built Green), never yellow on yellow. */
.section.yellow-2 .button, .yellow-box .button {
  background-color: var(--card-inverse) !important; color: var(--content-primary-inverse) !important; border-color: transparent !important;
}
.section.yellow-2 .button:hover, .yellow-box .button:hover { box-shadow: inset 0 0 0 999px rgba(247, 247, 247, 0.12) !important; }

/* Footer (Figma Components › Footer 6530:41454): 1px line along the top edge,
   border/primary on the light footer, Built Green on the dark homepage footer. */
.footer.footer-section { border-top: 1px solid var(--border-primary) !important; }
/* Homepage: the last section already draws the line (.bottom-line), so the dark footer adds none;
   that line takes the dark footer's Built Green. One 1px line either way. */
.footer.footer-section.w-variant-6402fbd7-7dd1-898e-1050-03f047123aae { border-top: 0 !important; }
.section.bottom-line.black { border-bottom-color: var(--color-builtgreen-600) !important; }
/* Homepage section heads use their own markup (.uc-headmeta / .tm-headmeta): same treatment. */
.uc-headmeta > .uc-index, .tm-headmeta > .tm-index { display: none !important; }
.tm-htag, .uc-headmeta > :not(.uc-index) {
  background-color: transparent !important; padding: 0 !important;
  font-size: var(--p-md) !important; font-weight: 900 !important; line-height: 1.4 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--ds-fg-2) !important;
}
/* On dark sections the label uses the inverse text colour. */
.section.black .tm-htag, .section.black .uc-headmeta > :not(.uc-index),
.section.black-2 .tm-htag, .section.black-2 .uc-headmeta > :not(.uc-index),
.section.green .tm-htag, .section.green .uc-headmeta > :not(.uc-index) { color: var(--content-secondary-inverse) !important; }

/* Hero logo strip (homepage, EPD): Webflow pins it absolutely to the bottom of a one-screen
   hero, so on short or narrow windows it slides over the button. Keep it in the flow at the
   bottom instead: the hero still fills the screen, and grows when the content needs more room. */
.section:has(> .div-block-42) { display: flex; flex-direction: column; }
.section:has(> .div-block-42) > .container { flex: 1 0 auto; }
.section > .div-block-42 { position: relative; inset: auto; margin-top: var(--spacing-12, 48px); flex: none; }