/* ==========================================================================
   GLYNT FOREST — Divi 4 deployment stylesheet
   Forked from the Divi 5 build after reverting to Divi 4 (Aug 2026).
   Differences from that file, all deliberate:
     · §11e PHANTOM FIREWALL removed entirely — Divi 5 only, and its broad
       !important resets did real damage.
     · The three per-property resets (border, background, spacing) restored to
       §11, which is the shape Divi 4 wants.
     · Row max-width and the measure utilities back to plain weight.
     · display:contents dropped from button pairs; the flex-direction fix stays,
       since stacked pairs were a genuine bug in both versions.
     · Mega-menu type given #page-container variants so it no longer depends on
       Divi 5's .et-db #et-boc .et-l wrapper.
   The .et-db #et-boc .et-l selectors elsewhere are harmless — they simply never
   match on Divi 4 — and are left in place rather than risk touching working
   rules. The Design tab is USABLE again on Divi 4; it replaces values instead
   of appending, so the "never touch Design" rule no longer applies
   v1.0 · Forest palette, Q3 2026
   --------------------------------------------------------------------------
   INSTALL: Divi → Theme Options → General → Custom CSS. Paste whole file.
   FONTS:   loaded via Divi's Google Fonts picker (Sora + Urbanist).
            This file only APPLIES them — it does not load them.
   ICONS:   Font Awesome official WP plugin, Pro kit, Sharp family default.
            This file only colours/sizes them. See section 9.
   FORMS:   HubSpot embedded forms — see section 10. Set the HubSpot form
            style to "unstyled" or these rules fight its inline CSS.
   NOTE:    no @import, no @font-face, no relative asset URLs — none of the
            three work from the Custom CSS box.
   ========================================================================== */


/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* Darks */
  --color-dark-1: #004901;              /* Cedar    */
  --color-dark-2: #075920;              /* Conifer  */
  --color-dark-3: #003400;              /* Woodland */

  /* Greens */
  --color-primary-brand: #188F28;       /* Fern   — primary brand */
  --color-green-2: #1BA03C;             /* Clover */
  --color-green-3: #54B923;             /* Balsam */
  --color-accent-1: #4ED40A;            /* Grass  — primary action */
  --color-accent-2: #98E110;            /* New Leaf */

  /* Pale */
  --color-pale-1: #FFFDF3;              /* Parchment */

  /* Neutrals */
  --color-neutral-900: #1B1B1B;         /* Charcoal */
  --color-neutral-600: #64645E;         /* Slate    */
  --color-neutral-300: #C6C6BD;         /* Ash      */
  --color-neutral-100: #F6F8F5;         /* Off-white */
  --color-neutral-100-warm: #F9F8F3;
  --color-white: #FFFFFF;

  /* Alerts — status only, never decoration */
  --color-alert-yellow: #E6CF4B;
  --color-alert-orange: #E1781F;
  --color-alert-red: #D13420;        /* true error red, added Aug 2026 */
  --color-alert-red-hover: #B82C1A;

  /* Editorial aliases */
  --color-cedar: var(--color-dark-1);
  --color-conifer: var(--color-dark-2);
  --color-woodland: var(--color-dark-3);
  --color-fern: var(--color-primary-brand);
  --color-clover: var(--color-green-2);
  --color-balsam: var(--color-green-3);
  --color-grass: var(--color-accent-1);
  --color-new-leaf: var(--color-accent-2);
  --color-parchment: var(--color-pale-1);
  --color-charcoal: var(--color-neutral-900);
  --color-slate: var(--color-neutral-600);
  --color-off-white: var(--color-neutral-100);

  /* Derived support */
  --color-border: #E2E2DB;
  --color-border-strong: #C6C6BD;
  --color-divider: #EDEDE7;
  --tint-success-bg: #D6F0A2;
  --tint-warning-bg: #F7EBB4;
  --tint-warning-fg: #7A5B00;
  --tint-alert-soft-bg: #FDF3EE;
  --tint-alert-soft-border: #F2C9B3;
  --tint-error-bg: #FBEAE7;
  --tint-error-border: #F0C4BC;
  --tint-error-fg: #8E2113;
  --tint-success-soft-bg: #F4FAE8;
  --tint-success-soft-border: #D3EAA6;

  /* Semantic */
  --surface-page: var(--color-white);
  --surface-muted: var(--color-neutral-100);
  --surface-warm: var(--color-neutral-100-warm);
  --surface-card: var(--color-white);
  --surface-inverse: var(--color-dark-3);
  --text-heading: var(--color-dark-1);
  --text-body: var(--color-neutral-900);
  --text-muted: var(--color-neutral-600);
  --text-on-dark: var(--color-neutral-100);
  --text-brand: var(--color-primary-brand);
  /* Links resolve to Cedar, not Fern — Fern is ~3.6:1 on white, under AA for
     body-size text. Cedar is ~11:1. Hover lifts to Fern for the state change. */
  --link-color: var(--color-dark-1);
  --link-color-hover: var(--color-primary-brand);
  --text-data: var(--color-primary-brand);
  --border-default: var(--color-border);
  --action-primary-bg: var(--color-accent-1);
  --action-primary-fg: var(--color-dark-3);
  --action-secondary-fg: var(--color-primary-brand);
  --action-destructive-bg: var(--color-alert-red);
  --action-destructive-fg: var(--color-white);
  --text-error: var(--color-alert-red);
  --border-error: var(--color-alert-red);

  /* Hover states (fills darken ~6%) */
  --action-primary-bg-hover: #43BC08;
  --action-brand-bg-hover: #147A22;
  --action-accent-2-hover: #8ACC0E;   /* New Leaf darkened ~6% */
  --action-cedar-hover: #003C01;      /* Cedar darkened ~6% */

  /* Type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Urbanist', system-ui, sans-serif;
  --font-data: 'Sora', system-ui, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Web type scale — desktop. Slide-scale (72/62/52) lives on .glynt-display */
  --text-display: 72px;
  --text-h1: 60px;
  --text-h2: 40px;
  --text-h3: 30px;
  --text-h4: 24px;
  --text-h5: 20px;
  --text-h6: 14px;
  --text-title: 18px;
  --text-body-lg: 20px;
  --text-body-base: 16px;
  --text-body-sm: 16px;
  --text-caption: 14px;
  --text-eyebrow: 15px;

  --leading-tight: 0.98;
  --leading-snug: 1.1;
  --leading-normal: 1.4;
  --leading-list: 1.65;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.14em;
  --tracking-cta: 0.06em;

  /* Buttons — label size for the default (unmodified) button. */
  --text-btn: 15px;

  /* Space — 8px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Layout */
  --grid-max-width: 1280px;
  --grid-gutter: 24px;
  --pad-card: 24px;
  --pad-section: 48px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0,52,0,0.07), 0 4px 12px rgba(0,52,0,0.05);
  --shadow-md: 0 2px 6px rgba(0,52,0,0.09), 0 10px 28px rgba(0,52,0,0.09);
  --shadow-lg: 0 4px 12px rgba(0,52,0,0.11), 0 24px 56px rgba(0,52,0,0.14);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}


/* ==========================================================================
   2 · BASE — body, links, selection
   ========================================================================== */
body,
body.et-db {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--surface-page);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

#main-content,
.et-db #et-boc .et-l p,
.et_pb_text,
.et_pb_module {
  font-family: var(--font-body);
}

p { line-height: var(--leading-normal); }
p:not(:last-child) { padding-bottom: var(--space-3); }

/* Lists — looser leading than paragraphs (bullets read as separate lines, so
   they need the extra air) plus a little space between items. Divi 4 sets
   line-height on .et_pb_text ul/ol li (0,2,1) and Divi 5 repeats it per module,
   so these carry #page-container to outrank both without !important on the
   bullet-marker properties. Applies to plain lists only — .glynt-list (§8)
   sets its own rhythm on top of this. */
ul, ol,
body #page-container ul,
body #page-container ol,
.et-db #et-boc .et-l ul,
.et-db #et-boc .et-l ol {
  line-height: var(--leading-list);
}
li,
body #page-container li,
.et-db #et-boc .et-l li {
  line-height: var(--leading-list);
}
body #page-container li:not(:last-child),
.et-db #et-boc .et-l li:not(:last-child) {
  margin-bottom: var(--space-2);
}
/* Nested lists sit closer to their parent item than to the next sibling. */
body #page-container li > ul,
body #page-container li > ol,
.et-db #et-boc .et-l li > ul,
.et-db #et-boc .et-l li > ol {
  margin-top: var(--space-2);
}

/* Divi's Customizer writes #main-content a { color } (1,0,1) and per-module
   link colors, both of which outrank a bare `a`. Match its specificity and
   force it. Buttons, nav, and anything explicitly opted out are excluded so
   this only claims real inline text links. */
a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]),
a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]):visited,
#main-content a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]),
#main-content a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]):visited,
.et-db #et-boc .et-l a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]),
.et-db #et-boc .et-l a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]):visited {
  color: var(--link-color) !important;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]):hover,
#main-content a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]):hover,
.et-db #et-boc .et-l a:not(.et_pb_button):not(.glynt-btn):not(.glynt-link-inherit):not([class*="glynt-link--"]):hover {
  color: var(--link-color-hover) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Chrome links keep their own color — nav, widgets, footer, and opt-outs. */
#top-menu a, #top-menu a:visited, #top-menu a:hover,
.et_mobile_menu a, .et_mobile_menu a:visited,
.et_pb_widget a, .et_pb_widget a:visited,
#footer-widgets a, #footer-widgets a:visited,
a.glynt-link-inherit, a.glynt-link-inherit:visited { color: inherit !important; }

/* --- Breaking a link out of the default Cedar ------------------------------
   Two mechanisms, in order of preference.

   1. CONTAINER — put a glynt-links-* class on the section/row/module and every
      inline link inside it re-resolves. These only reassign the two variables
      the global rule already reads, so there is no specificity fight and no
      new !important. This is the right tool for "all the links in this block".

   2. SINGLE LINK — put a glynt-link--* class on the <a> itself. The global
      link rule in §2 excludes [class*="glynt-link--"] outright rather than
      trying to outrank it: its three :not() classes put it at (1,3,1), which
      no reasonable per-link selector beats. Because the exclusion is total,
      the two colour-neutral modifiers (--underline, --no-underline) restore
      the default colour themselves in the rule directly below the colour set.
      Use sparingly; a container class is easier to maintain.

   Legibility on white (AA needs 4.5:1 at body size):
      cedar 11:1 · woodland 13:1 · conifer 8:1 · charcoal 15:1 — all safe
      fern 3.6:1 — LARGE TEXT ONLY (18px+ bold / 24px+ regular)
      grass, leaf — never on light; deep-green surfaces only
   -------------------------------------------------------------------------- */

/* 1 · Container-level. Inherited custom properties — no !important needed. */
.glynt-links-cedar    { --link-color: var(--color-dark-1);        --link-color-hover: var(--color-primary-brand); }
.glynt-links-fern     { --link-color: var(--color-primary-brand); --link-color-hover: var(--color-dark-1); }
.glynt-links-conifer  { --link-color: var(--color-dark-2);        --link-color-hover: var(--color-primary-brand); }
.glynt-links-woodland { --link-color: var(--color-dark-3);        --link-color-hover: var(--color-primary-brand); }
.glynt-links-charcoal { --link-color: var(--text-body);           --link-color-hover: var(--color-primary-brand); }
.glynt-links-slate    { --link-color: var(--text-muted);          --link-color-hover: var(--color-dark-1); }
/* For deep-green surfaces. The §2 dark-surface rule already handles sections
   tagged glynt-section--dark / glynt-on-dark; this is for a light-tagged
   container that happens to sit on a dark card. */
.glynt-links-leaf     { --link-color: var(--color-accent-2);      --link-color-hover: var(--color-pale-1); }
.glynt-links-white    { --link-color: var(--text-on-dark);        --link-color-hover: var(--color-accent-2); }

/* 2 · Per-link. Beats the global rule's #main-content tier. */
#main-content a.glynt-link--cedar,    #main-content a.glynt-link--cedar:visited,
.et-db #et-boc .et-l a.glynt-link--cedar    { color: var(--color-dark-1) !important; }
#main-content a.glynt-link--fern,     #main-content a.glynt-link--fern:visited,
.et-db #et-boc .et-l a.glynt-link--fern     { color: var(--color-primary-brand) !important; }
#main-content a.glynt-link--conifer,  #main-content a.glynt-link--conifer:visited,
.et-db #et-boc .et-l a.glynt-link--conifer  { color: var(--color-dark-2) !important; }
#main-content a.glynt-link--woodland, #main-content a.glynt-link--woodland:visited,
.et-db #et-boc .et-l a.glynt-link--woodland { color: var(--color-dark-3) !important; }
#main-content a.glynt-link--charcoal, #main-content a.glynt-link--charcoal:visited,
.et-db #et-boc .et-l a.glynt-link--charcoal { color: var(--text-body) !important; }
#main-content a.glynt-link--slate,    #main-content a.glynt-link--slate:visited,
.et-db #et-boc .et-l a.glynt-link--slate    { color: var(--text-muted) !important; }
#main-content a.glynt-link--leaf,     #main-content a.glynt-link--leaf:visited,
.et-db #et-boc .et-l a.glynt-link--leaf     { color: var(--color-accent-2) !important; }
#main-content a.glynt-link--white,    #main-content a.glynt-link--white:visited,
.et-db #et-boc .et-l a.glynt-link--white    { color: var(--text-on-dark) !important; }
/* Hover for all of the above: lift toward Fern on light, Off-white on dark. */
#main-content a[class*="glynt-link--"]:hover { color: var(--color-primary-brand) !important; }
#main-content a.glynt-link--leaf:hover,
#main-content a.glynt-link--white:hover      { color: var(--color-pale-1) !important; }

/* Underline behaviour — orthogonal to colour, stacks with any of the above. */
#main-content a.glynt-link--underline,
#main-content .glynt-links-underline a:not(.et_pb_button):not(.glynt-btn) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
#main-content a.glynt-link--no-underline:hover,
#main-content .glynt-links-no-underline a:not(.et_pb_button):not(.glynt-btn):hover {
  text-decoration: none !important;
}
/* Colour-neutral modifiers are excluded from the global rule along with the
   rest of the glynt-link--* family, so they have to re-declare the default.
   Placed before the colour rules so a stacked colour class still wins. */
#main-content a.glynt-link--underline:not([class*="glynt-link--c"]):not([class*="glynt-link--f"]):not([class*="glynt-link--w"]):not([class*="glynt-link--s"]):not([class*="glynt-link--l"]),
#main-content a.glynt-link--no-underline:not([class*="glynt-link--c"]):not([class*="glynt-link--f"]):not([class*="glynt-link--w"]):not([class*="glynt-link--s"]):not([class*="glynt-link--l"]) {
  color: var(--link-color) !important;
}

/* Reads as body copy until hovered — for links inside dense prose. */
#main-content a.glynt-link--quiet,
#main-content a.glynt-link--quiet:visited { color: inherit !important; text-decoration: underline; text-decoration-color: var(--color-border); }
#main-content a.glynt-link--quiet:hover   { color: var(--color-primary-brand) !important; text-decoration-color: currentColor; }

/* Container opt-out — every link inside keeps the surrounding text colour.
   The single-link form (a.glynt-link-inherit) is above. */
#main-content .glynt-links-inherit a:not(.et_pb_button):not(.glynt-btn),
#main-content .glynt-links-inherit a:not(.et_pb_button):not(.glynt-btn):visited { color: inherit !important; }

/* On dark surfaces links go pale, not brand green (fails contrast on Woodland).
   Carries #main-content so it outranks the link rule above. */
#main-content .glynt-section--dark a:not(.et_pb_button):not(.glynt-btn),
#main-content .glynt-section--dark a:not(.et_pb_button):not(.glynt-btn):visited,
#main-content .glynt-on-dark a:not(.et_pb_button):not(.glynt-btn),
#main-content .glynt-on-dark a:not(.et_pb_button):not(.glynt-btn):visited,
.glynt-section--dark a:not(.et_pb_button):not(.glynt-btn),
.glynt-on-dark a:not(.et_pb_button):not(.glynt-btn) {
  color: var(--color-accent-2) !important;
}
#main-content .glynt-section--dark a:not(.et_pb_button):not(.glynt-btn):hover,
#main-content .glynt-on-dark a:not(.et_pb_button):not(.glynt-btn):hover {
  color: var(--color-pale-1) !important;
}

::selection { background: var(--color-accent-2); color: var(--color-dark-3); }

:focus-visible {
  outline: 2px solid var(--color-primary-brand);
  outline-offset: 2px;
}


/* ==========================================================================
   3 · HEADINGS + TYPE SCALE
   Divi hard-codes h1–h6 sizes in its core stylesheet and again per-module,
   so these need the !important. Set nothing in the Builder's Heading Text
   fields and these hold everywhere.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.et-db #et-boc .et-l h1,
.et-db #et-boc .et-l h2,
.et-db #et-boc .et-l h3,
.et-db #et-boc .et-l h4,
.et-db #et-boc .et-l h5,
.et-db #et-boc .et-l h6 {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--text-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  padding-bottom: 0;
}

h1, .et-db #et-boc .et-l h1 { font-size: var(--text-h1) !important; line-height: var(--leading-tight) !important; }
h2, .et-db #et-boc .et-l h2 { font-size: var(--text-h2) !important; line-height: var(--leading-snug) !important; }
h3, .et-db #et-boc .et-l h3 { font-size: var(--text-h3) !important; line-height: 1.2 !important; }

/* Mini H1 — keeps the <h1> element (one real H1 per page, SEO-correct) but
   sizes it down to the H2 scale for hero headlines on internal pages that
   don't want full H1 visual weight. Apply glynt-h1--sm alongside the H1. */
h1.glynt-h1--sm,
.et-db #et-boc .et-l h1.glynt-h1--sm,
.et_pb_heading h1.glynt-h1--sm,
.et_pb_heading .et_pb_heading_container h1.glynt-h1--sm,
.et_pb_text_inner h1.glynt-h1--sm,
body #page-container h1.glynt-h1--sm {
  font-size: calc((var(--text-h1) + var(--text-h2)) / 2) !important;
  line-height: var(--leading-snug) !important;
}
/* Mini H3 — keeps the <h3> element so the document outline and SEO indexing
   are unchanged, but renders at the H5 scale (20px / 1.35 / no tracking) for
   sub-labels, card headings, and dense card stacks where a full 30px H3 is too
   loud. Apply glynt-h3--sm alongside the H3. Stacks with glynt-heading-free
   if the colour comes from the Design tab. */
h3.glynt-h3--sm,
.et-db #et-boc .et-l h3.glynt-h3--sm,
.et_pb_heading h3.glynt-h3--sm,
.et_pb_heading .et_pb_heading_container h3.glynt-h3--sm,
.et_pb_text_inner h3.glynt-h3--sm,
body #page-container h3.glynt-h3--sm {
  font-size: var(--text-h5) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
/* One notch smaller again — H6 scale, for tight card stacks. */
h3.glynt-h3--xs,
.et-db #et-boc .et-l h3.glynt-h3--xs,
.et_pb_heading h3.glynt-h3--xs,
.et_pb_heading .et_pb_heading_container h3.glynt-h3--xs,
.et_pb_text_inner h3.glynt-h3--xs,
body #page-container h3.glynt-h3--xs {
  font-size: var(--text-h6) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

h4, .et-db #et-boc .et-l h4 { font-size: var(--text-h4) !important; line-height: 1.3 !important; letter-spacing: -0.01em; }
h5, .et-db #et-boc .et-l h5 { font-size: var(--text-h5) !important; line-height: 1.35 !important; letter-spacing: 0; }
h6, .et-db #et-boc .et-l h6 { font-size: var(--text-h6) !important; line-height: 1.4 !important; letter-spacing: 0; }

/* Slide-scale display headline — use sparingly, hero only */
.glynt-display {
  font-family: var(--font-display) !important;
  font-size: var(--text-display) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}

/* Eyebrow — UPPERCASE, loose tracking */
.glynt-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow) !important;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: var(--space-3);
}
.glynt-eyebrow--muted { color: var(--text-muted); }
/* Dark-surface eyebrow — New Leaf. The §3 rules already flip eyebrows to New
   Leaf inside a tagged dark section; this covers the cases they don't reach:
   an eyebrow on a glynt-card--inverse, or on any deep-green block that isn't
   tagged with a surface class. Reaches the inner <p>/<span> too, since a CSS
   Class field puts the class on the module wrapper. */
.glynt-eyebrow--on-dark,
.glynt-eyebrow--on-dark p,
.glynt-eyebrow--on-dark span,
#page-container .glynt-eyebrow--on-dark,
#page-container .glynt-eyebrow--on-dark p,
#page-container .glynt-eyebrow--on-dark span,
#page-container .et_pb_text.glynt-eyebrow--on-dark .et_pb_text_inner p {
  color: var(--color-accent-2) !important;
}

/* Body sizes */
.glynt-lead:not(.glynt-lead--on-dark),
.glynt-lead:not(.glynt-lead--on-dark) p { font-size: var(--text-body-lg) !important; line-height: var(--leading-normal); color: var(--text-body); }
/* Dark-surface lead — Warm off-white #F9F8F3, a touch warmer than the standard
   --text-on-dark (#F6F8F5), for lead paragraphs sitting on deep greens. Carries
   #page-container so it outranks the dark-surface body rules in §3, which
   already claim .glynt-lead on those surfaces. */
.glynt-lead--on-dark,
.glynt-lead--on-dark p,
#page-container .glynt-lead--on-dark,
#page-container .glynt-lead--on-dark p,
#page-container .glynt-lead--on-dark .et_pb_text_inner p {
  font-size: var(--text-body-lg) !important;
  line-height: var(--leading-normal);
  color: #F9F8F3 !important;
}
.glynt-body-sm,
.glynt-body-sm p { font-size: var(--text-body-sm) !important; }
.glynt-caption,
.glynt-caption p { font-size: var(--text-caption) !important; line-height: 1.45; color: var(--text-muted); }

/* Data / numbers — Sora 600 */
.glynt-data {
  font-family: var(--font-data) !important;
  font-weight: var(--weight-semibold) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-data);
}

/* Text colour utilities */
.glynt-text-brand   { color: var(--text-brand) !important; }
.glynt-text-muted   { color: var(--text-muted) !important; }
.glynt-text-heading { color: var(--text-heading) !important; }
.glynt-text-light   { color: var(--text-on-dark) !important; }

/* --------------------------------------------------------------------------
   Inline highlight — New Leaf behind Woodland text
   Wrap the words in a <span class="glynt-hl"> in the Text module's code view:
     Sustainability data <span class="glynt-hl">auditors trust</span>.
   The highlight hugs the span exactly — no horizontal padding, so it starts
   and ends flush with the first and last glyph. Vertical padding is negative-
   margined back out so the highlight never adds line height, and
   box-decoration-break keeps a wrapped span highlighted on every line rather
   than one long bar. Colour pairing is the ::selection pairing (New Leaf /
   Woodland, 8.8:1) and is safe on light and deep surfaces alike, so it also
   works inside a glynt-surface-deep section.
   Modifiers: --pad (breathing room + 4px radius) · --grass · --pale
   -------------------------------------------------------------------------- */
.glynt-hl,
#page-container .glynt-hl,
.et-db #et-boc .et-l .glynt-hl {
  display: inline;
  background-color: var(--color-accent-2);
  color: var(--color-dark-3) !important;
  padding: 0.08em 0;
  margin: -0.08em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Headings inside a Text module are claimed by the §3 colour reclaim rules
   (0,2,1 + !important), which the span above can't outrank on its own. */
.et_pb_text_inner :is(h1, h2, h3, h4, h5, h6) .glynt-hl,
.et_pb_heading :is(h1, h2, h3, h4, h5, h6) .glynt-hl {
  color: var(--color-dark-3) !important;
}
/* Padded variant — for display headlines where a flush highlight reads tight. */
.glynt-hl--pad,
#page-container .glynt-hl--pad {
  padding: 0.1em 0.28em;
  margin: -0.1em 0;
  border-radius: var(--radius-sm);
}
.glynt-hl--grass, #page-container .glynt-hl--grass { background-color: var(--color-accent-1); }
.glynt-hl--pale,  #page-container .glynt-hl--pale  { background-color: var(--color-pale-1); }

/* --------------------------------------------------------------------------
   Heading colour reclaim
   Divi 5 compiles module + preset heading styles into
   `.et_pb_text_N .et_pb_text_inner hX` (0,2,1) and a deleted preset can leave
   that CSS behind. These match that weight so headings stay on-brand.
   Escape hatches: .glynt-heading-free (keep Divi's colour) and the on-dark /
   inverse contexts below, which need pale text.
   -------------------------------------------------------------------------- */
.et_pb_text .et_pb_text_inner h1:not(.glynt-heading-free),
.et_pb_text .et_pb_text_inner h2:not(.glynt-heading-free),
.et_pb_text .et_pb_text_inner h3:not(.glynt-heading-free),
.et_pb_text .et_pb_text_inner h4:not(.glynt-heading-free),
.et_pb_text .et_pb_text_inner h5:not(.glynt-heading-free),
.et_pb_text .et_pb_text_inner h6:not(.glynt-heading-free),
.et_pb_module .et_pb_text_inner h1:not(.glynt-heading-free),
.et_pb_module .et_pb_text_inner h2:not(.glynt-heading-free),
.et_pb_module .et_pb_text_inner h3:not(.glynt-heading-free),
.et_pb_module .et_pb_text_inner h4:not(.glynt-heading-free),
.et_pb_module .et_pb_text_inner h5:not(.glynt-heading-free),
.et_pb_module .et_pb_text_inner h6:not(.glynt-heading-free) {
  color: var(--text-heading) !important;
  text-shadow: none !important;
}

/* Deep surfaces still get pale headings.
   Every selector carries the .glynt-heading-free escape hatch twice: once for
   the class on the heading itself (Text-module code view) and once for the
   class on an ancestor (the module's CSS Class field, which Divi puts on the
   module wrapper — the h3 inside is untouched). Without the second form a
   wrapper-level glynt-heading-free does nothing here. */
:is(.glynt-section--dark, .glynt-on-dark, .glynt-surface-deep,
    .glynt-surface-gradient, .glynt-card--inverse)
.et_pb_text_inner :is(h1, h2, h3, h4, h5, h6):not(.glynt-heading-free):not(.glynt-heading-free *) {
  color: var(--text-on-dark) !important;
}

/* No text shadows anywhere — the brand has none. */
.et_pb_text_inner h1, .et_pb_text_inner h2, .et_pb_text_inner h3,
.et_pb_text_inner h4, .et_pb_text_inner h5, .et_pb_text_inner h6,
.et_pb_text_inner p { text-shadow: none !important; }


/* --------------------------------------------------------------------------
   Divi 5 Heading module. It emits .et_pb_heading > .et_pb_heading_container,
   NOT .et_pb_text_inner, so none of the rules above reach it — a Heading
   module on a deep-green section renders in Divi's default colour. These
   mirror the Text-module rules onto it.
   -------------------------------------------------------------------------- */
.et_pb_heading h1:not(.glynt-heading-free),
.et_pb_heading h2:not(.glynt-heading-free),
.et_pb_heading h3:not(.glynt-heading-free),
.et_pb_heading h4:not(.glynt-heading-free),
.et_pb_heading h5:not(.glynt-heading-free),
.et_pb_heading h6:not(.glynt-heading-free),
.et_pb_heading .et_pb_heading_container h1:not(.glynt-heading-free),
.et_pb_heading .et_pb_heading_container h2:not(.glynt-heading-free),
.et_pb_heading .et_pb_heading_container h3:not(.glynt-heading-free) {
  color: var(--text-heading) !important;
  text-shadow: none !important;
}

:is(.glynt-section--dark, .glynt-on-dark, .glynt-surface-deep,
    .glynt-surface-gradient, .glynt-card--inverse)
.et_pb_heading :is(h1, h2, h3, h4):not(.glynt-heading-free):not(.glynt-heading-free *),
body #page-container :is(.glynt-surface-gradient, .glynt-surface-deep)
.et_pb_heading h1:not(.glynt-heading-free):not(.glynt-heading-free *) {
  color: var(--text-on-dark) !important;
}

/* --------------------------------------------------------------------------
   Body copy, lists and eyebrows on deep surfaces. The heading rules above
   only ever covered headings, so a paragraph on a deep-green section stayed
   Charcoal and read as unreadable dark-on-dark.
   -------------------------------------------------------------------------- */
.glynt-section--dark .et_pb_text_inner p,
.glynt-section--dark .et_pb_text_inner li,
.glynt-on-dark .et_pb_text_inner p,
.glynt-on-dark .et_pb_text_inner li,
.glynt-surface-deep .et_pb_text_inner p,
.glynt-surface-deep .et_pb_text_inner li,
.glynt-surface-gradient .et_pb_text_inner p,
.glynt-surface-gradient .et_pb_text_inner li,
.glynt-card--inverse .et_pb_text_inner p,
.glynt-card--inverse .et_pb_text_inner li,
.glynt-surface-deep .glynt-lead,
.glynt-surface-gradient .glynt-lead,
.glynt-on-dark .glynt-lead,
body #page-container .glynt-surface-gradient .et_pb_text_inner p,
body #page-container .glynt-surface-deep .et_pb_text_inner p {
  color: var(--text-on-dark) !important;
}

/* Eyebrows go New Leaf on deep green — Fern is too dark to read there. */
.glynt-surface-deep .glynt-eyebrow,
.glynt-surface-gradient .glynt-eyebrow,
.glynt-section--dark .glynt-eyebrow,
.glynt-on-dark .glynt-eyebrow,
.glynt-surface-deep .et_pb_text_inner .glynt-eyebrow,
.glynt-surface-gradient .et_pb_text_inner .glynt-eyebrow,
body #page-container .glynt-surface-gradient .glynt-eyebrow {
  color: var(--color-accent-2) !important;
}


/* Catch-all: any heading on a deep surface, whatever module emitted it. Divi 5
   ships several heading-capable modules (Text, Heading, Blurb title, Fullwidth
   Header) and their wrappers differ, so this matches the heading itself. The
   :not() keeps headings inside a light card on a deep section dark. */
.glynt-surface-deep :is(h1, h2, h3, h4):not(.glynt-card *):not(.glynt-heading-free),
.glynt-surface-gradient :is(h1, h2, h3, h4):not(.glynt-card *):not(.glynt-heading-free),
.glynt-section--dark :is(h1, h2, h3, h4):not(.glynt-card *):not(.glynt-heading-free),
.glynt-on-dark :is(h1, h2, h3, h4):not(.glynt-card *):not(.glynt-heading-free),
body #page-container .glynt-surface-gradient :is(h1, h2, h3, h4):not(.glynt-card *),
body #page-container .glynt-surface-deep :is(h1, h2, h3, h4):not(.glynt-card *) {
  color: var(--text-on-dark) !important;
}


/* When glynt-eyebrow is applied via Divi's CSS Class field it lands on the
   module wrapper, not the <p> inside it — so the on-dark paragraph rule above
   outranks the colour the <p> would otherwise inherit. These reach the inner
   element directly. */
.glynt-eyebrow p,
.glynt-eyebrow span,
.et_pb_text.glynt-eyebrow .et_pb_text_inner p { color: inherit !important; }

.glynt-surface-deep .glynt-eyebrow p,
.glynt-surface-gradient .glynt-eyebrow p,
.glynt-section--dark .glynt-eyebrow p,
.glynt-on-dark .glynt-eyebrow p,
.glynt-surface-deep .glynt-eyebrow .et_pb_text_inner p,
.glynt-surface-gradient .glynt-eyebrow .et_pb_text_inner p,
.glynt-surface-deep .et_pb_text_inner p.glynt-eyebrow,
.glynt-surface-gradient .et_pb_text_inner p.glynt-eyebrow,
body #page-container .glynt-surface-gradient .glynt-eyebrow p,
body #page-container .glynt-surface-deep .glynt-eyebrow p {
  color: var(--color-accent-2) !important;
}


/* ==========================================================================
   4 · BUTTONS
   Covers Divi 4 (.et_pb_button) and Divi 5 (.et_pb_button_wrapper wrap).
   Divi's default is a 2px-border ghost button with an arrow that slides in
   on hover and re-pads the element — all three are removed here.
   ========================================================================== */
/* Every button paints from variables. Variants set ONLY variables — never
   background/color/padding directly — so no variant has to out-specify the
   base rule, and a variant class works whether it sits on the Button module
   or on a wrapping row/column (custom properties inherit).
     --btn-bg / --btn-fg / --btn-border / --btn-border-w
     --btn-bg-hover / --btn-fg-hover / --btn-border-hover
     --btn-pad / --btn-size / --btn-underline-hover
   Anything left unset falls back to the default Grass action button, so a bare
   .glynt-btn or an unclassed Divi button still looks right.
   Adding a colour variant is now one line — no exclusion list to maintain. */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button,
.et_pb_button_wrapper .et_pb_button,
a.glynt-btn,
.glynt-btn,
body #page-container .et_pb_button,
html body #page-container .et_pb_button,
.et-db #et-boc .et-l .et_pb_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body) !important;
  font-size: var(--btn-size, var(--text-btn)) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-cta) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: var(--btn-pad, 14px 26px) !important;
  background-color: var(--btn-bg, var(--action-primary-bg)) !important;
  color: var(--btn-fg, var(--action-primary-fg)) !important;
  border: var(--btn-border-w, 1px) solid var(--btn-border, transparent) !important;
  border-radius: var(--radius-md) !important;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard) !important;
}

.et_pb_button:hover,
.et_pb_button_module_wrapper .et_pb_button:hover,
.et_pb_button_wrapper .et_pb_button:hover,
a.glynt-btn:hover,
.glynt-btn:hover,
body #page-container .et_pb_button:hover,
html body #page-container .et_pb_button:hover,
.et-db #et-boc .et-l .et_pb_button:hover {
  padding: var(--btn-pad, 14px 26px) !important;
  background-color: var(--btn-bg-hover, var(--action-primary-bg-hover)) !important;
  color: var(--btn-fg-hover, var(--btn-fg, var(--action-primary-fg))) !important;
  border-color: var(--btn-border-hover, var(--btn-border, transparent)) !important;
  text-decoration: var(--btn-underline-hover, none) !important;
  text-underline-offset: 3px;
}

/* Kill the Divi arrow and its hover re-padding */
.et_pb_button:before,
.et_pb_button:after,
.et-db #et-boc .et-l .et_pb_button:after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  margin: 0 !important;
}

.et_pb_button:active,
.glynt-btn:active { transform: translateY(1px); }

.et_pb_button:disabled,
.glynt-btn[disabled],
.glynt-btn.is-disabled { opacity: 0.4 !important; pointer-events: none; }


/* --- Colour variants — one line each, specificity-free -------------------- */

/* Grass fill. Explicit name for the default, for when you want to state it. */
.glynt-btn--grass {
  --btn-bg: var(--action-primary-bg);
  --btn-fg: var(--action-primary-fg);
  --btn-bg-hover: var(--action-primary-bg-hover);
}

/* Brand fill — Fern. `--fern` is an alias; merged Aug 2026. */
.glynt-btn--brand,
.glynt-btn--fern {
  --btn-bg: var(--color-primary-brand);
  --btn-fg: var(--color-neutral-100-warm);
  --btn-border: var(--color-primary-brand);
  --btn-border-w: 2px;
  --btn-bg-hover: var(--action-brand-bg-hover);
  --btn-border-hover: var(--action-brand-bg-hover);
}

/* Cedar fill — the deepest button. Quiet, authoritative CTA on light. */
.glynt-btn--cedar {
  --btn-bg: var(--color-dark-1);
  --btn-fg: var(--color-neutral-100-warm);
  --btn-border: var(--color-dark-1);
  --btn-border-w: 2px;
  --btn-bg-hover: var(--action-cedar-hover);
  --btn-border-hover: var(--action-cedar-hover);
}

/* Secondary — outlined Fern. */
.glynt-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--action-secondary-fg);
  --btn-border: var(--color-primary-brand);
  --btn-border-w: 2px;
  --btn-bg-hover: var(--color-primary-brand);
  --btn-fg-hover: var(--color-white);
}

/* Secondary in Grass — same outline button, Grass border. The LABEL stays Fern:
   Grass (#4ED40A) on white is ~1.9:1, so Grass text here would be unreadable.
   Border and hover fill carry the Grass; on hover the label flips to Woodland,
   never white on Grass. For deep-green bands use --outline-grass instead, where
   Grass text does pass. */
.glynt-btn--secondary-grass {
  --btn-bg: transparent;
  --btn-fg: var(--action-secondary-fg);
  --btn-border: var(--color-accent-1);
  --btn-border-w: 2px;
  --btn-bg-hover: var(--action-primary-bg);
  --btn-fg-hover: var(--action-primary-fg);
  --btn-border-hover: var(--action-primary-bg);
}

/* On deep surfaces — off-white ghost. */
.glynt-btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--text-on-dark);
  --btn-border: rgba(246,248,245,0.45);
  --btn-border-w: 2px;
  --btn-bg-hover: var(--color-neutral-100);
  --btn-fg-hover: var(--color-dark-3);
  --btn-border-hover: var(--color-neutral-100);
}

/* Destructive — true red, white text. */
.glynt-btn--danger {
  --btn-bg: var(--action-destructive-bg);
  --btn-fg: var(--action-destructive-fg);
  --btn-bg-hover: var(--color-alert-red-hover);
}

/* Text button — no box, no side padding. */
.glynt-btn--text {
  --btn-bg: transparent;
  --btn-fg: var(--action-secondary-fg);
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--color-dark-1);
  --btn-pad: 14px 0;
}

/* Size modifiers — stack with any colour variant. */
.glynt-btn--sm { --btn-pad: 10px 18px; --btn-size: var(--text-caption); }
.glynt-btn--lg { --btn-pad: 18px 34px; --btn-size: var(--text-body-base); }


/* ==========================================================================
   4b · BUTTON PAIRS
   Divi renders each button as its own module, so two buttons stack and pick
   up module margins. Put `glynt-btn-pair` on the ROW (or column) that holds
   them — it lays the wrappers out side by side and kills those margins.
   Pairing rule: exactly one filled button per pair. The second is always the
   quieter of the two, never a second fill competing for the same attention.
   ========================================================================== */
/* flex-direction: row is load-bearing. Divi 5 ships `.et_pb_column` as
   `display: flex; flex-direction: column`, and setting `display: flex` here
   without a direction leaves that column direction in place — so the two
   buttons stack, and `align-items: center` (meant to level them vertically)
   centres them horizontally instead, because it is now acting on the cross
   axis. That is the stacked, centre-aligned pair we saw on the deep hero.
   Every alignment declaration below carries !important so the modifiers beat
   both this base rule and anything Divi sets on the column. */
.glynt-btn-pair,
.glynt-btn-pair .et_pb_column,
.glynt-btn-pair .et_pb_column_inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--space-3);
}
/* Divi 4 emits ROW > COLUMN > .et_pb_button_module_wrapper, so making the
   column a flex row is enough — no display:contents flattening needed. */

.glynt-btn-pair .et_pb_button_module_wrapper,
.glynt-btn-pair .et_pb_button_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}
.glynt-btn-pair--center,
.glynt-btn-pair--center .et_pb_column,
.glynt-btn-pair--center .et_pb_column_inner { justify-content: center !important; }
.glynt-btn-pair--right,
.glynt-btn-pair--right .et_pb_column,
.glynt-btn-pair--right .et_pb_column_inner { justify-content: flex-end !important; }
.glynt-btn-pair--stack,
.glynt-btn-pair--stack .et_pb_column,
.glynt-btn-pair--stack .et_pb_column_inner {
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Pair partners — the second button in each context.
   Light surfaces: Grass fill + Fern outline.
   Deep surfaces:  Grass fill + off-white ghost.
   Both partners match the fill's height and tracking so the pair reads level.
   These set variables too, so putting the class on the Button module or on the
   wrapping column both work. Exactly one filled button per pair — the filled
   one is plain .glynt-btn, no modifier.

   Named for how they look, not where they sit:
     --outline-fern   Fern text + border, for light surfaces
     --outline-grass  Grass text + border, for deep-green bands
     --outline-leaf   New Leaf text + border, quieter than grass on deep green
     --link           text only, no box
   The old --pair-* names still work as aliases; prefer the new ones. */
.glynt-btn--outline-fern,
.glynt-btn--pair-outline {
  --btn-bg: transparent;
  --btn-fg: var(--action-secondary-fg);
  --btn-border: var(--color-primary-brand);
  --btn-border-w: 3px;
  --btn-bg-hover: var(--color-primary-brand);
  --btn-fg-hover: var(--color-white);
}

/* Grass outline for the second action on deep-green bands. Grass on Woodland
   is ~7:1, so the text passes AA at button size. On hover it fills, and the
   label flips to Woodland — never white on Grass. */
.glynt-btn--outline-grass,
.glynt-btn--pair-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-accent-1);
  --btn-border: var(--color-accent-1);
  --btn-border-w: 3px;
  --btn-bg-hover: var(--color-accent-1);
  --btn-fg-hover: var(--color-dark-3);
  --btn-border-hover: var(--color-accent-1);
}

/* New Leaf outline — for deep-green bands where the ghost reads too neutral. */
.glynt-btn--outline-leaf,
.glynt-btn--pair-green {
  --btn-bg: transparent;
  --btn-fg: var(--color-accent-2);
  --btn-border: var(--color-accent-2);
  --btn-border-w: 3px;
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--action-accent-2-hover);
  --btn-border-hover: var(--action-accent-2-hover);
}

/* Quietest partner — a link beside a fill, no box. Use when the second action
   is genuinely secondary (Learn more, See pricing). */
.glynt-btn--link,
.glynt-btn--pair-link {
  --btn-bg: transparent;
  --btn-fg: var(--action-secondary-fg);
  --btn-border: transparent;
  --btn-border-w: 0;
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--color-dark-1);
  --btn-pad: 14px 4px;
  --btn-underline-hover: underline;
}
/* On deep surfaces the link partner goes New Leaf. Two classes beats one, so
   this lands on top of the variant above with no !important anywhere. */
.glynt-section--dark .glynt-btn--link,
.glynt-on-dark .glynt-btn--link,
.glynt-section--dark .glynt-btn--pair-link,
.glynt-on-dark .glynt-btn--pair-link {
  --btn-fg: var(--color-accent-2);
  --btn-fg-hover: var(--color-pale-1);
}


/* ==========================================================================
   5 · CARDS + STAT TILES
   Apply .glynt-card to a Divi Column, Blurb or Text module CSS Class field.
   ========================================================================== */
/* !important on the border and background shorthands, and the #page-container
   variants, both carried over from the Divi 5 build. A per-module declaration
   compiles to `.et_pb_text_N` — 0,1,0, the same weight as a single class — and
   lands in a <style> block AFTER this stylesheet, so it wins the cascade on a
   tie. That is how you get a card with three Ash sides and one phantom side:
   Divi only ever writes the side it has data for. The shorthand pins all four,
   and the ID prefix settles the tie. Every variant below also needs !important,
   or it would lose to the base rule instead. */
.glynt-card,
.et_pb_column.glynt-card,
.et_pb_blurb.glynt-card,
#page-container .glynt-card {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--pad-card) !important;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
/* Plain cards never declared their own text color, so a p/li inherited
   whatever color an ancestor happened to carry — including a mis-scoped
   icon-color modifier. Pin body copy explicitly so it can't inherit. */
.glynt-card:not(.glynt-card--inverse) p, .glynt-card:not(.glynt-card--inverse) li,
#page-container .glynt-card:not(.glynt-card--inverse) p,
#page-container .glynt-card:not(.glynt-card--inverse) li { color: var(--text-body) !important; }
.glynt-card--raised    { box-shadow: var(--shadow-sm) !important; }
.glynt-card--raised-md { box-shadow: var(--shadow-md) !important; }
.glynt-card--raised-lg { box-shadow: var(--shadow-lg) !important; }
.glynt-card--interactive:hover { box-shadow: var(--shadow-md) !important; border-color: var(--color-border-strong) !important; }
.glynt-card--muted    { background-color: var(--surface-muted) !important; }
.glynt-card--accent   { background-color: var(--color-pale-1) !important; }
.glynt-card--inverse,
#page-container .glynt-card--inverse { background-color: var(--surface-inverse) !important; border-color: rgba(246,248,245,0.14) !important; }
.glynt-card--inverse,
.glynt-card--inverse :is(p, li, h1, h2, h3, h4):not(.glynt-heading-free):not(.glynt-heading-free *),
#page-container .glynt-card--inverse,
#page-container .glynt-card--inverse :is(p, li, h1, h2, h3, h4):not(.glynt-heading-free):not(.glynt-heading-free *) { color: var(--text-on-dark) !important; }
/* .glynt-heading-free is handled purely by the :not() guards above and in
   §3 — never by a counter-rule. A rule like
   `#page-container .glynt-card--inverse .glynt-heading-free { color: inherit }`
   is (1,2,0) and would outrank Divi's own `.et_pb_text_N h3` (0,1,1), so the
   Design tab colour would still lose. Removing our declaration is the only
   thing that hands control back. */

/* Stat / KPI tile. Same cascade trap as .glynt-card above — the four
   `border-right-color` phantoms the pre-flight caught on the stat band were
   Divi winning a tie on one side. Shorthand + !important pins all four. */
.glynt-stat,
#page-container .glynt-stat {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--pad-card) !important;
}
.glynt-stat--muted   { background-color: var(--surface-muted) !important; }
.glynt-stat--accent  { background-color: var(--color-pale-1) !important; }
.glynt-stat--inverse { background-color: var(--surface-inverse) !important; border-color: rgba(246,248,245,0.14) !important; }
.glynt-stat__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.et_pb_text_inner .glynt-stat__label,
body #page-container .glynt-stat__label {
  font-family: var(--font-body) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--text-muted) !important;
}
/* Divi 5 compiles the module's Text-settings typography onto `.et_pb_text_N p`
   (and its descendants), which outranks a single class — so the value and
   label force their own font, weight and color. */
.glynt-stat__value,
.et_pb_text_inner .glynt-stat__value,
body #page-container .glynt-stat__value {
  display: block;
  font-family: var(--font-data) !important;
  font-size: 44px;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading) !important;
}
.glynt-stat__value--lg,
body #page-container .glynt-stat__value--lg { font-size: 60px; }
.glynt-stat__value--xl,
body #page-container .glynt-stat__value--xl { font-size: 80px; }
.glynt-stat__unit { font-size: 0.5em; color: var(--text-muted); margin-left: 0.25em; letter-spacing: 0; }
/* Green sub-label inside a stat tile (e.g. TIMEFRAME, PRODUCT) — same eyebrow
   treatment as __label but in brand green, for field headings above a value. */
.glynt-stat__eyebrow,
.et_pb_text_inner .glynt-stat__eyebrow,
body #page-container .glynt-stat__eyebrow {
  display: block;
  font-family: var(--font-body) !important;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-dark-1) !important;
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

/* Divi gives every <p> in a Text module a ~1em bottom margin, which opens a
   big gap under each eyebrow. Inside a stat tile the rhythm is tighter. */
.glynt-stat p,
.et_pb_text_inner .glynt-stat p,
body #page-container .glynt-stat p { margin-bottom: var(--space-3); line-height: 1.45; }
.glynt-stat p:last-child { margin-bottom: 0; }
.glynt-stat__eyebrow + br { display: none; }

.glynt-stat__delta {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-brand);
}
.glynt-stat__delta--down { color: var(--color-alert-orange); }
.glynt-stat__delta--error { color: var(--color-alert-red); }
.glynt-stat__delta--flat { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   MINI TILE GRID — compact stat tiles that run two across whatever container
   they sit in, so a 2x2 block fits inside a narrow (1/3, 1/4) Divi column.
   Deploy as raw markup in a CODE module, with .glynt-tiles as the outermost
   element (a Text module strips nested divs; the column CSS Class field would
   fight Divi's own column layout). Tracks are 1fr, so tiles stay square-ish
   and equal-height no matter how long the labels run.
     <div class="glynt-tiles">
       <div class="glynt-tile">
         <span class="glynt-tile__value">99.5%</span>
         <span class="glynt-tile__label">Accuracy</span>
       </div>  … x4
     </div>
   -------------------------------------------------------------------------- */
.glynt-tiles,
#page-container .glynt-tiles {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
  width: 100%;
}
.glynt-tiles--1, #page-container .glynt-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.glynt-tiles--3, #page-container .glynt-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tighter gutter option for very narrow columns. */
.glynt-tiles--tight, #page-container .glynt-tiles--tight { gap: var(--space-2); }

.glynt-tile,
#page-container .glynt-tile {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 18px 16px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
}
.glynt-tile--muted,   #page-container .glynt-tile--muted   { background-color: var(--surface-muted) !important; }
.glynt-tile--accent,  #page-container .glynt-tile--accent  { background-color: var(--color-pale-1) !important; }
.glynt-tile--inverse, #page-container .glynt-tile--inverse {
  background-color: var(--surface-inverse) !important;
  border-color: rgba(246,248,245,0.14) !important;
}
/* Deep-green tile: value goes New Leaf, label goes off-white at 70%. */
#page-container .glynt-tile--inverse .glynt-tile__value { color: var(--color-accent-2) !important; }
#page-container .glynt-tile--inverse .glynt-tile__label { color: rgba(246,248,245,0.72) !important; }
#page-container .glynt-tile--inverse .glynt-tile__icon  { color: var(--color-accent-2) !important; }

/* Value: Sora Semibold, tabular, sized to survive a 1/4-column at 2-across. */
.glynt-tile__value,
.et_pb_text_inner .glynt-tile__value,
body #page-container .glynt-tile__value {
  display: block;
  font-family: var(--font-data) !important;
  font-size: 30px;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading) !important;
}
.glynt-tile__value--sm, body #page-container .glynt-tile__value--sm { font-size: 24px; }
.glynt-tile__value--lg, body #page-container .glynt-tile__value--lg { font-size: 38px; }
.glynt-tile__unit { font-size: 0.5em; color: var(--text-muted); margin-left: 0.2em; letter-spacing: 0; }

.glynt-tile__label,
.et_pb_text_inner .glynt-tile__label,
body #page-container .glynt-tile__label {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 11px;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-dark-1) !important;
}
/* Optional third line — sentence-case supporting note under the label. */
.glynt-tile__note,
.et_pb_text_inner .glynt-tile__note,
body #page-container .glynt-tile__note {
  display: block;
  font-family: var(--font-body) !important;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--text-muted) !important;
  margin-top: 2px;
}
/* Optional icon above the value. Sits on its own line, brand green. */
.glynt-tile__icon,
#page-container .glynt-tile__icon {
  display: block;
  font-size: 18px;
  line-height: 1;
  color: var(--color-primary-brand) !important;
  margin-bottom: 6px;
}
/* Divi wraps Code-module output in .et_pb_code_inner; keep it from adding
   its own box or margins around the grid. */
.glynt-tiles .et_pb_module,
#page-container .et_pb_code_inner > .glynt-tiles { background: transparent !important; margin: 0 !important; }
.glynt-tile p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   PARTNER GRID — logo, company name, region and an outbound link, five or six
   across, with a ragged last row by design. Twenty-one partners is more items
   than a Divi row can hold as columns, so this deploys as raw markup in a
   CODE module with .glynt-partners as the outermost element — same pattern as
   .glynt-tiles. Each tile is a single <a>, so the whole card is the link and
   there is no repeated "Visit X's website" line.
     <div class="glynt-partners glynt-partners--5">
       <a class="glynt-partner" href="https://slalom.com" target="_blank" rel="noopener">
         <span class="glynt-partner__logo"><img src="/wp-content/uploads/slalom.png" alt="Slalom"></span>
         <span class="glynt-partner__name">Slalom</span>
         <span class="glynt-partner__meta">
           <span class="glynt-partner__region glynt-partner__region--na">North America</span>
           <i class="fa-sharp fa-solid fa-arrow-up-right-from-square glynt-partner__go"></i>
         </span>
       </a>
     </div>
   The meta row is margin-top:auto, so the region and the link icon sit on the
   tile's bottom edge and line up across the row however many lines the company
   name takes. Count comes from --pcols, declared in :where() so it carries no
   specificity and the breakpoints below win on source order alone (see the
   card-grid note — the earlier version of that pattern lost this fight).
   -------------------------------------------------------------------------- */
.glynt-partners,
#page-container .glynt-partners {
  display: grid !important;
  grid-template-columns: repeat(var(--pcols), minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
  width: 100%;
  margin: 0;
}
:where(.glynt-partners)    { --pcols: 5; }
:where(.glynt-partners--4) { --pcols: 4; }
:where(.glynt-partners--5) { --pcols: 5; }
:where(.glynt-partners--6) { --pcols: 6; }

.glynt-partner,
#page-container .glynt-partner {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  height: 100%;
  padding: var(--space-3);
  background-color: var(--surface-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  text-decoration: none !important;
  transition: border-color 160ms ease, transform 160ms ease;
}
#page-container .glynt-partner:hover {
  border-color: var(--color-primary-brand) !important;
  transform: translateY(-2px);
}

/* Logo sits on a faint plate so marks of wildly different shape and aspect
   still land on one baseline. --plain drops the plate for a set of logos that
   are all transparent PNG/SVG on a consistent footprint. */
.glynt-partner__logo,
#page-container .glynt-partner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--surface-muted);
}
.glynt-partner__logo img,
#page-container .glynt-partner__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.glynt-partners--plain .glynt-partner__logo,
#page-container .glynt-partners--plain .glynt-partner__logo {
  background-color: transparent;
  padding: 0;
}

.glynt-partner__name,
#page-container .glynt-partner__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-body) !important;
  text-wrap: pretty;
}

.glynt-partner__meta,
#page-container .glynt-partner__meta {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.glynt-partner__region,
#page-container .glynt-partner__region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
/* The dot is an aid, never the only carrier — the region is always spelled
   out beside it. */
.glynt-partner__region::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--region-dot, var(--color-primary-brand));
}
.glynt-partner__region--global { --region-dot: var(--color-primary-brand); }
.glynt-partner__region--na     { --region-dot: var(--color-accent-1); }
.glynt-partner__region--emea   { --region-dot: var(--color-dark-2); }
.glynt-partner__region--apac   { --region-dot: var(--color-accent-2); }
.glynt-partner__region--latam  { --region-dot: var(--color-green-3); }

.glynt-partner__go,
#page-container .glynt-partner__go {
  flex: none;
  font-size: 12px;
  color: var(--text-muted) !important;
  transition: color 160ms ease;
}
#page-container .glynt-partner:hover .glynt-partner__go {
  color: var(--color-primary-brand) !important;
}

/* Six across trims the tile rather than the legibility: the logo plate and
   the padding give up the space, type steps down one notch. */
.glynt-partners--6 .glynt-partner,
#page-container .glynt-partners--6 .glynt-partner { padding: 14px; gap: 10px; }
.glynt-partners--6 .glynt-partner__logo,
#page-container .glynt-partners--6 .glynt-partner__logo { height: 40px; }
.glynt-partners--6 .glynt-partner__name,
#page-container .glynt-partners--6 .glynt-partner__name { font-size: 13px; }
.glynt-partners--6 .glynt-partner__region,
#page-container .glynt-partners--6 .glynt-partner__region { font-size: 10px; letter-spacing: 0.07em; }

/* Divi wraps Code-module output in .et_pb_code_inner. */
#page-container .et_pb_code_inner > .glynt-partners { margin: 0 !important; }

@media (max-width: 980px) { :where(.glynt-partners) { --pcols: 3; } }
@media (max-width: 767px) { :where(.glynt-partners) { --pcols: 2; } }


/* --------------------------------------------------------------------------
   CASE STUDY CARD — detailed stat tile with two called-out metrics plus a
   labelled field list. Two layouts:
     .glynt-case            Split ledger — off-white card, metrics side by side
     .glynt-case--deep      Deep header — gradient cap holds the metrics,
                            white body holds hairline-ruled field rows
   Both are built as raw markup inside a single Divi Text module, so every
   rule carries the #page-container tier the base card rules use.
   -------------------------------------------------------------------------- */
.glynt-case,
#page-container .glynt-case {
  background-color: var(--surface-muted) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--pad-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-5) !important;
}
/* Deep-header variant paints its surface white and lets __head bleed to the
   card edge, so the padding moves onto the two inner blocks. */
.glynt-case--deep,
#page-container .glynt-case--deep {
  background-color: var(--surface-card) !important;
  padding: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}

.glynt-case__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Metric pair. Side by side with a hairline between; the divider is drawn on
   the second child so a single-metric card needs no modifier. */
.glynt-case__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.glynt-case__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.glynt-case__metric + .glynt-case__metric {
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border);
}
.glynt-case__value,
.et_pb_text_inner .glynt-case__value,
body #page-container .glynt-case__value {
  display: block;
  font-family: var(--font-data) !important;
  font-size: 46px !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--color-primary-brand) !important;
}
.glynt-case__metric-label,
.et_pb_text_inner .glynt-case__metric-label,
body #page-container .glynt-case__metric-label {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  text-wrap: balance;
}

.glynt-case__rule {
  height: 1px;
  background: var(--color-border);
}

/* Field list — label above value. Split ledger uses gaps; the deep variant
   overrides to hairline-separated rows below. */
.glynt-case__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.glynt-case__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.glynt-case__label,
.et_pb_text_inner .glynt-case__label,
body #page-container .glynt-case__label {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: var(--color-dark-1) !important;
}
.glynt-case__text,
.et_pb_text_inner .glynt-case__text,
body #page-container .glynt-case__text {
  display: block;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--text-body) !important;
  text-wrap: pretty;
}

/* Deep header ------------------------------------------------------------ */
.glynt-case__head,
#page-container .glynt-case__head {
  background: linear-gradient(135deg, var(--color-dark-3) 0%, var(--color-dark-1) 100%) !important;
  padding: 22px var(--pad-card) var(--pad-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
}
.glynt-case__head .glynt-case__value,
body #page-container .glynt-case__head .glynt-case__value {
  font-size: 52px !important;
  line-height: 0.95 !important;
  color: var(--color-white) !important;
}
/* New Leaf on deep green — Fern and Slate both fail contrast here. */
.glynt-case__head .glynt-case__metric-label,
.glynt-case__head .glynt-case__eyebrow,
body #page-container .glynt-case__head .glynt-case__metric-label,
body #page-container .glynt-case__head .glynt-case__eyebrow {
  color: var(--color-accent-2) !important;
}
.glynt-case__head .glynt-case__metrics { align-items: flex-end; }
.glynt-case__head .glynt-case__metric + .glynt-case__metric {
  border-left-color: rgba(246, 248, 245, 0.2);
}
.glynt-case__eyebrow,
.et_pb_text_inner .glynt-case__eyebrow,
body #page-container .glynt-case__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body) !important;
  font-size: var(--text-eyebrow) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--color-dark-1) !important;
}
/* Industry icon inside the eyebrow scales with it. */
.glynt-case__eyebrow i,
body #page-container .glynt-case__eyebrow i { font-size: 14px !important; }
/* Body of the deep variant: hairline-ruled rows, last one unruled. */
.glynt-case--deep .glynt-case__fields {
  padding: 4px var(--pad-card) 8px;
  gap: 0;
}
.glynt-case--deep .glynt-case__field {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.glynt-case--deep .glynt-case__field:last-child { border-bottom: 0; }
.glynt-case--deep .glynt-case__label,
body #page-container .glynt-case--deep .glynt-case__label { color: var(--text-muted) !important; }

/* Divi's Text module gives every <p> a bottom margin; these cards space with
   flex gap, so zero it out or the rhythm doubles up. */
.glynt-case p,
.et_pb_text_inner .glynt-case p,
body #page-container .glynt-case p { margin: 0 !important; }

@media (max-width: 767px) {
  .glynt-case__metrics { grid-template-columns: 1fr; gap: var(--space-4); }
  .glynt-case__metric + .glynt-case__metric {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
  .glynt-case__head .glynt-case__metric + .glynt-case__metric {
    border-left: 0;
    border-top-color: rgba(246, 248, 245, 0.2);
  }
}

/* Modules inside a tile never carry their own surface. Divi 5 module presets
   compile a background into `.et_pb_text_N`, which otherwise paints a box
   inside the tile. */
.glynt-stat .et_pb_module,
.glynt-stat .et_pb_text,
.glynt-stat .et_pb_text_inner,
.glynt-card .et_pb_text,
.glynt-card .et_pb_text_inner,
#page-container .glynt-stat .et_pb_text,
#page-container .glynt-card .et_pb_text {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* --- Card grid (equal-height rows) ---------------------------------------
   Put `glynt-card-grid` on the ROW that holds the cards. Divi floats its
   columns, so a short card and a tall one leave a stagger and the next pair
   wraps into the gap — this grids the row instead, which equalises heights
   and keeps the columns on a shared baseline. Divi 5 rows that converted to
   flex are covered by the same rule.
   Column count follows Divi's own row layout at desktop; below 980 it drops
   to two, below 767 to one. `--cols` overrides it per row. */
.glynt-card-grid,
.et-db #et-boc .et-l .glynt-card-grid,
body #page-container .glynt-card-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch !important;
}
/* Column count. Every --cols declaration — default, modifier, and the
   responsive overrides below — is wrapped in :where() so it carries ZERO
   specificity and plain source order decides the winner: default, then
   modifier, then breakpoint. Divi never sets --cols, so these don't need the
   specificity tiers the layout properties above do. (They used to carry them,
   and that was the bug: the modifiers' .et-db #et-boc .et-l tier scored
   (1,3,0), which outranked the (1,1,1) breakpoint rules, so a row with an
   explicit --5 or --6 stayed at full column count all the way down to
   mobile.) */
:where(.glynt-card-grid) { --cols: 4; }
:where(.glynt-card-grid--6) { --cols: 6; }
:where(.glynt-card-grid--5) { --cols: 5; }
:where(.glynt-card-grid--4) { --cols: 4; }
:where(.glynt-card-grid--3) { --cols: 3; }
:where(.glynt-card-grid--2) { --cols: 2; }
:where(.glynt-card-grid--1) { --cols: 1; }
/* Divi sets per-column width and margin inline on the module — the grid owns
   both now, so they have to come off or the tracks won't be even. */
.glynt-card-grid > .et_pb_column,
.et-db #et-boc .et-l .glynt-card-grid > .et_pb_column,
body #page-container .glynt-card-grid > .et_pb_column {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column;
  height: auto !important;
}
/* The card fills its track top to bottom, so every card in the row ends level
   regardless of how much copy it holds. */
.glynt-card-grid > .et_pb_column.glynt-card,
.glynt-card-grid > .et_pb_column > .glynt-card {
  flex: 1 1 auto;
  height: 100%;
}
/* Media sits flush at the top of the card; copy takes the slack below it.
   The thumbnails come in at mixed ratios, so the image box is pinned to one
   ratio and the art is cropped to fill it — otherwise each card's title
   starts at a different height and the row reads ragged. Override per row
   with `--card-media-ratio` (e.g. 4 / 3) on the row's Main Element. */
.glynt-card-grid { --card-media-ratio: 16 / 9; }
.glynt-card-grid .et_pb_image,
.glynt-card-grid .et_pb_video { margin-bottom: var(--space-3) !important; }
/* Markup-agnostic: Divi 4 wraps the image in .et_pb_image_wrap, Divi 5 emits
   a plain <a>/<span>/<picture>, and the Video module uses .et_pb_video_box —
   the ratio box is applied to the module root AND to whatever single element
   sits inside it, so all four cases land on the same height. */
.glynt-card-grid .et_pb_image,
.glynt-card-grid .et_pb_video,
.glynt-card-grid .et_pb_image > *,
.glynt-card-grid .et_pb_video > *,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_image,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_image .et_pb_image_wrap,
body #page-container .glynt-card-grid .et_pb_image,
body #page-container .glynt-card-grid .et_pb_image .et_pb_image_wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}
.glynt-card-grid .et_pb_image .et_pb_image_wrap,
.glynt-card-grid .et_pb_video .et_pb_video_box,
.glynt-card-grid .et_pb_image > a,
.glynt-card-grid .et_pb_image > span,
.glynt-card-grid .et_pb_image > picture,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_image .et_pb_image_wrap {
  aspect-ratio: var(--card-media-ratio) !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: var(--radius-md);
}
/* Fallback for a module whose image is a direct child with no wrapper at all
   — the ratio then has to live on the img itself. */
.glynt-card-grid .et_pb_image > img { aspect-ratio: var(--card-media-ratio) !important; }
.glynt-card-grid .et_pb_image img,
.glynt-card-grid .et_pb_video .et_pb_video_box img,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_image img,
body #page-container .glynt-card-grid .et_pb_image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* Title block starts at the same line in every card, and the description
   takes whatever is left so the cards end level too. */
.glynt-card-grid .glynt-card h1, .glynt-card-grid .glynt-card h2,
.glynt-card-grid .glynt-card h3, .glynt-card-grid .glynt-card h4,
.glynt-card-grid > .et_pb_column.glynt-card h3,
.glynt-card-grid > .et_pb_column.glynt-card h4 {
  margin-top: 0 !important;
  text-wrap: pretty;
}
.glynt-card-grid > .et_pb_column.glynt-card > .et_pb_module:last-child { margin-bottom: 0 !important; }

@media (max-width: 980px) {
  :where(.glynt-card-grid) { --cols: 2; }
  /* 5- and 6-up are only used for short labels — dropping straight to 2 is
     too sharp, so they land on 3 at tablet before collapsing on phones. */
  :where(.glynt-card-grid--6, .glynt-card-grid--5) { --cols: 3; }
}
@media (max-width: 767px) {
  :where(.glynt-card-grid) { --cols: 1; }
}


/* Blurb cards in a card grid — glynt-blurb--card (± --bleed) on each Blurb,
   glynt-card-grid on the row. The column is already a flex column; this
   stretches the blurb to fill it and passes the height down every Divi
   wrapper to the description, so the cards end level. The last paragraph of
   the description (the "Read the guide" link) is pushed to the bottom, so the
   links line up across the row too. */
.glynt-card-grid > .et_pb_column > .et_pb_blurb.glynt-blurb--card,
.glynt-card-grid > .et_pb_column > .et_pb_blurb.glynt-blurb--bleed,
body #page-container .glynt-card-grid > .et_pb_column > .et_pb_blurb.glynt-blurb--card,
body #page-container .glynt-card-grid > .et_pb_column > .et_pb_blurb.glynt-blurb--bleed,
.et-db #et-boc .et-l .glynt-card-grid > .et_pb_column > .et_pb_blurb.glynt-blurb--card,
.et-db #et-boc .et-l .glynt-card-grid > .et_pb_column > .et_pb_blurb.glynt-blurb--bleed {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  margin-bottom: 0 !important;
}
body #page-container .glynt-card-grid .et_pb_blurb.glynt-blurb--card .et_pb_blurb_content,
body #page-container .glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_content,
body #page-container .glynt-card-grid .et_pb_blurb.glynt-blurb--card .et_pb_blurb_container,
body #page-container .glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_container,
body #page-container .glynt-card-grid .et_pb_blurb.glynt-blurb--card .et_pb_blurb_description,
body #page-container .glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_description,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_blurb.glynt-blurb--card .et_pb_blurb_content,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_content,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_blurb.glynt-blurb--card .et_pb_blurb_container,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_container,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_blurb.glynt-blurb--card .et_pb_blurb_description,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_description {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
}
.glynt-card-grid .et_pb_blurb.glynt-blurb--card .et_pb_blurb_description > :last-child:not(:first-child),
.glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_description > :last-child:not(:first-child) {
  margin-top: auto !important;
  padding-top: var(--space-3, 16px);
  padding-bottom: 0 !important;
}
/* Bleed cards have no padding on the module, so the bottom gap comes from
   the text container. */
body #page-container .glynt-card-grid .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_container { padding-bottom: var(--pad-card, 24px) !important; }

/* A card built as a single Blurb keeps its image in .et_pb_main_blurb_image —
   same ratio box, so blurb-built and Image-module-built cards line up. */
.glynt-card-grid .et_pb_blurb .et_pb_main_blurb_image,
.et-db #et-boc .et-l .glynt-card-grid .et_pb_blurb .et_pb_main_blurb_image,
body #page-container .glynt-card-grid .et_pb_blurb .et_pb_main_blurb_image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 var(--space-3) 0 !important;
}
.glynt-card-grid .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap,
.glynt-card-grid .et_pb_blurb .et_pb_main_blurb_image > a,
.glynt-card-grid .et_pb_blurb .et_pb_main_blurb_image > span {
  display: block !important;
  width: 100% !important;
  aspect-ratio: var(--card-media-ratio) !important;
  overflow: hidden !important;
  border-radius: var(--radius-md);
}
.glynt-card-grid .et_pb_blurb .et_pb_main_blurb_image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* Blurb content sits under the image, not beside it. */
.glynt-card-grid .et_pb_blurb .et_pb_blurb_content,
.glynt-card-grid .et_pb_blurb .et_pb_blurb_container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Catch-all: whatever module the thumbnail came from, the ratio and crop are
   applied to the img itself — no wrapper needed. Any parent chain then just
   shrink-wraps to it. Add `glynt-no-crop` to a card whose image is a logo or
   icon that must not be cropped. */
.glynt-card-grid .glynt-card img,
.et-db #et-boc .et-l .glynt-card-grid .glynt-card img,
body #page-container .glynt-card-grid .glynt-card img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--card-media-ratio) !important;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.glynt-card-grid .glynt-no-crop img,
body #page-container .glynt-card-grid .glynt-no-crop img {
  aspect-ratio: auto !important;
  object-fit: contain;
}
/* Divi 5's Layout group can leave the column centring its children, which
   floats the whole stack and leaves dead space above the image. Content
   always starts at the top of a card. */
.glynt-card-grid > .et_pb_column,
.glynt-card-grid > .et_pb_column.glynt-card,
.glynt-card-grid > .et_pb_column > .glynt-card,
.et-db #et-boc .et-l .glynt-card-grid > .et_pb_column,
body #page-container .glynt-card-grid > .et_pb_column {
  justify-content: flex-start !important;
  align-items: stretch !important;
}
.glynt-card-grid > .et_pb_column > .et_pb_module:first-child,
.glynt-card-grid > .et_pb_column > .glynt-card > .et_pb_module:first-child { margin-top: 0 !important; }

/* --- Bottom-aligned CTA in a card ----------------------------------------
   Add `glynt-card--cta` alongside `glynt-card` on a card whose last element
   is a button or link. The card becomes a flex column and the CTA is pushed
   to the bottom edge, so a row of cards with uneven copy still has its
   buttons on one line.

   Works on the two shapes a Divi card takes: a COLUMN classed .glynt-card
   holding several modules, or a single module (Blurb/Text) classed
   .glynt-card whose CTA lives in its content. Only needs the grid's stretch
   to have already equalised the heights — pair it with .glynt-card-grid.

   The CTA itself is whatever comes last: an .et_pb_button module, a Divi
   button wrapper, or a trailing <a> inside a Text module. All three are
   matched so you don't have to restructure the card to use this. */
.glynt-card--cta,
.glynt-card-grid > .et_pb_column.glynt-card--cta,
.glynt-grid-2 > .et_pb_column.glynt-card--cta,
.glynt-grid-3 > .et_pb_column.glynt-card--cta,
.glynt-grid-4 > .et_pb_column.glynt-card--cta,
.glynt-grid-5 > .et_pb_column.glynt-card--cta,
body #page-container .glynt-card--cta,
.et-db #et-boc .et-l .glynt-card--cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: 100% !important;
}

/* The last block in the card takes the slack above it. margin-top:auto on a
   flex child is what does the pushing — no absolute positioning, so the card
   still grows normally when the copy is long. */
.glynt-card--cta > .et_pb_button_module_wrapper:last-child,
.glynt-card--cta > .et_pb_module:last-child.et_pb_button_module_wrapper,
.glynt-card--cta > .et_pb_button:last-child,
.glynt-card--cta > .glynt-btn:last-child,
.glynt-card--cta > .et_pb_module:last-child > .et_pb_button_wrapper,
body #page-container .glynt-card--cta > .et_pb_button_module_wrapper:last-child,
.et-db #et-boc .et-l .glynt-card--cta > .et_pb_button_module_wrapper:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* When the card IS the Divi column, the Text module sits between the card and
   .et_pb_text_inner, so the `> .et_pb_text_inner` rules below never match and
   nothing gets pushed. These handle the column case.

   Case A — the CTA is its own module (Button module, or a Text module holding
   just the link). The last module is pushed to the bottom; nothing inside it
   needs to flex. This is the cleanest structure and the one to prefer. */
.glynt-card--cta > .et_pb_module:last-child,
body #page-container .glynt-card--cta > .et_pb_module:last-child,
.et-db #et-boc .et-l .glynt-card--cta > .et_pb_module:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* Case B — heading, copy and link all live in ONE Text module. The module has
   to stretch to fill the card, its inner wrapper too, and then the trailing
   element is pushed down. :has(a) keeps this from firing on a card whose last
   line is ordinary copy — otherwise a CTA-less card in the same row would get
   its final paragraph shoved to the bottom edge. */
.glynt-card--cta > .et_pb_text:last-child,
body #page-container .glynt-card--cta > .et_pb_text:last-child {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.glynt-card--cta > .et_pb_text:last-child > .et_pb_text_inner,
body #page-container .glynt-card--cta > .et_pb_text:last-child > .et_pb_text_inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100%;
}
.glynt-card--cta > .et_pb_text > .et_pb_text_inner > *:last-child:has(a),
body #page-container .glynt-card--cta > .et_pb_text > .et_pb_text_inner > *:last-child:has(a) {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* A bare trailing <a> with no wrapping <p> — same push. */
.glynt-card--cta > .et_pb_text > .et_pb_text_inner > a:last-child,
body #page-container .glynt-card--cta > .et_pb_text > .et_pb_text_inner > a:last-child {
  margin-top: auto !important;
  align-self: flex-start;
}

/* Single-module cards (Blurb / Text): the content wrapper becomes the column
   and its trailing button or link is pushed down instead. */
.glynt-card--cta .et_pb_blurb_container,
.glynt-card--cta .et_pb_blurb_content,
.glynt-card--cta > .et_pb_text_inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100%;
}
.glynt-card--cta .et_pb_blurb_container > *:last-child,
.glynt-card--cta > .et_pb_text_inner > *:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* A trailing bare link (Text module ending in "Learn more →") reads as the
   CTA too — give it the same treatment and a little breathing room, since
   it has no button padding of its own. */
.glynt-card--cta > .et_pb_text_inner > p:last-child > a:only-child,
.glynt-card--cta .et_pb_blurb_description > p:last-child > a:only-child {
  display: inline-block;
  margin-top: var(--space-2);
}

/* Stop the CTA stretching full width just because the card is stretch-aligned
   — buttons keep their intrinsic width and sit left. */
.glynt-card--cta > .et_pb_button_module_wrapper:last-child,
.glynt-card--cta .et_pb_button_wrapper { align-self: flex-start; }
.glynt-card--cta.glynt-card--cta-full > .et_pb_button_module_wrapper:last-child,
.glynt-card--cta.glynt-card--cta-full .et_pb_button_wrapper { align-self: stretch; }
.glynt-card--cta.glynt-card--cta-full .et_pb_button { width: 100% !important; text-align: center; }

/* ==========================================================================
   5c · VIDEO LIGHTBOX
   Divi's Image lightbox only handles images and its Video module plays
   inline, so this pairs a thumbnail with a modal player.
   Build: an IMAGE module with CSS Class `glynt-video` and its Link URL set
   to the YouTube / Vimeo / HubSpot share / .mp4 URL. The script (cheatsheet) intercepts the
   click, builds the iframe and traps focus. Without JS the link still opens
   the video in a new tab, so nothing is lost.
   ========================================================================== */
.glynt-video { position: relative; cursor: pointer; }
.glynt-video .et_pb_image_wrap,
.glynt-video > a { position: relative !important; display: block !important; }
/* Play badge — drawn, not an asset, so it inherits brand colour. */
.glynt-video .et_pb_image_wrap::after,
.glynt-video > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-accent-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003400'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50% / 22px 22px;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}
.glynt-video:hover .et_pb_image_wrap::after,
.glynt-video:hover > a::after { transform: translate(-50%, -50%) scale(1.08); }
/* Blurb build: the image sits in .et_pb_main_blurb_image, so the badge is
   positioned against that instead of the module root. Set the blurb's Link
   URL to the video — Divi wraps the image and title in one <a>, which the
   script picks up. */
.glynt-video .et_pb_main_blurb_image,
.glynt-video .et_pb_main_blurb_image > a,
.glynt-video .et_pb_main_blurb_image .et_pb_image_wrap { position: relative !important; }
.glynt-video .et_pb_main_blurb_image .et_pb_image_wrap::after,
.glynt-video .et_pb_main_blurb_image > a::after,
.glynt-video .et_pb_main_blurb_image > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-accent-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003400'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50% / 22px 22px;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}
.glynt-video:hover .et_pb_main_blurb_image .et_pb_image_wrap::after,
.glynt-video:hover .et_pb_main_blurb_image > a::after { transform: translate(-50%, -50%) scale(1.08); }
/* A blurb's own module root would otherwise get a second badge. */
.glynt-video.et_pb_blurb > a::after { display: none; }

/* --- Button trigger ------------------------------------------------------- */
/* A Divi Button module renders the CSS Class onto the <a> ITSELF, so the
   thumbnail selector (.glynt-video a) never matches it. Use glynt-video-btn
   on the BUTTON module instead, with its Button URL set to the video. It keeps
   whatever glynt-btn-* styling it already has — no play badge, no positioning
   — and just adds a small inline play triangle before the label. Pair with
   any button modifier: `glynt-btn glynt-btn--on-dark glynt-video-btn`. */
.glynt-video-btn::after,
#page-container .glynt-video-btn::after { content: none !important; display: none !important; }
.glynt-video-btn::before,
#page-container .glynt-video-btn::before {
  content: "" !important;
  display: inline-block !important;
  width: 0;
  height: 0;
  margin-right: 9px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  transition: transform var(--duration-fast) var(--ease-standard);
}
#page-container .glynt-video-btn:hover::before { transform: translateX(1px) !important; }
/* Text/link variant of the trigger, and any plain inline <a> that should open
   the modal — same hook, no glyph forced on it. */
.glynt-video-link, #page-container .glynt-video-link { cursor: pointer; }
.glynt-video-link::before, #page-container .glynt-video-link::before { content: none !important; }

/* --- The modal ------------------------------------------------------------ */
.glynt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 52, 0, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}
.glynt-lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.glynt-lightbox__frame {
  position: relative;
  width: min(1100px, 92vw);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: scale(0.97);
  transition: transform var(--duration-base) var(--ease-standard);
}
.glynt-lightbox.is-open .glynt-lightbox__frame { transform: scale(1); }
.glynt-lightbox__frame iframe,
.glynt-lightbox__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.glynt-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1;
  color: var(--text-on-dark);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.glynt-lightbox__close:hover { color: var(--color-accent-1); }
.glynt-lightbox__close:focus-visible { outline: 2px solid var(--color-accent-1); outline-offset: 2px; }
@media (max-width: 767px) {
  .glynt-lightbox__close { top: -40px; }
}


/* ==========================================================================
   6 · BADGES / STATUS PILLS
   ========================================================================== */
.glynt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.glynt-badge--neutral  { background: var(--color-neutral-100); color: var(--text-muted);          border-color: var(--color-border); }
.glynt-badge--brand    { background: var(--color-primary-brand); color: var(--color-white); }
.glynt-badge--verified { background: var(--tint-success-bg); color: var(--color-dark-3); }
.glynt-badge--pending  { background: var(--tint-warning-bg); color: var(--tint-warning-fg); }
.glynt-badge--flagged  { background: var(--color-alert-orange); color: var(--color-white); }
.glynt-badge--error    { background: var(--color-alert-red); color: var(--color-white); }
.glynt-badge--error-soft { background: var(--tint-error-bg); color: var(--tint-error-fg); border-color: var(--tint-error-border); }
.glynt-badge--outline  { background: transparent; color: var(--text-brand); border-color: var(--color-primary-brand); }
.glynt-badge--on-dark  { background: rgba(246,248,245,0.12); color: var(--text-on-dark); border-color: rgba(246,248,245,0.28); }

/* Leading status dot */
.glynt-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Inline New Leaf headline accent — for a span inside a glynt-card--inverse
   (or other dark-surface) headline. Apply on the span, not the heading tag. */
.glynt-text--leaf { font-size: 18px !important; font-weight: 700 !important; color: var(--color-accent-2) !important; }


/* ==========================================================================
   7 · TABLES
   Divi's core stylesheet skins .et_pb_text table with grey borders — this
   overrides it and also stands alone as .glynt-table.
   ========================================================================== */
.glynt-table,
.et_pb_text table,
.et-db #et-boc .et-l .et_pb_text table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  background: var(--surface-card);
}

.glynt-table thead th,
.et_pb_text table thead th {
  background: var(--color-neutral-100) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-caption) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted) !important;
  text-align: left;
  padding: var(--space-3) var(--space-4) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.glynt-table td,
.et_pb_text table td {
  padding: var(--space-3) var(--space-4) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-divider) !important;
  color: var(--text-body) !important;
  vertical-align: middle;
}
.glynt-table tbody tr:last-child td,
.et_pb_text table tbody tr:last-child td { border-bottom: 0 !important; }

/* Numeric columns — Sora 600, tabular, right-aligned */
.glynt-table .num,
.glynt-table td.num,
.glynt-table th.num {
  font-family: var(--font-data) !important;
  font-weight: var(--weight-semibold) !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.glynt-table--compact td,
.glynt-table--compact thead th { padding: var(--space-2) var(--space-3) !important; }


/* --------------------------------------------------------------------------
   7a · LOGO CARDS — .glynt-logo-cards
   Image-only card tiles for certifications / standards. No text, no links.
   Uniform tile height; logos are contained and centred. CODE module:
     <div class="glynt-logo-cards">
       <div class="glynt-logo-card"><img src="…/csrd.png" alt="CSRD"></div>
       …
     </div>
   5 across at every desktop/tablet width, 2 across ≤767px (10 logos = 5 rows).
   Tile height: style="--lc-h: 140px" on the wrapper. Logo box: --lc-logo-h.
   -------------------------------------------------------------------------- */
.glynt-logo-cards,
#page-container .glynt-logo-cards {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.glynt-logo-cards > p:empty,
.glynt-logo-cards br { display: none; }
.glynt-logo-card,
#page-container .glynt-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--lc-h, 128px);
  padding: 24px;
  margin: 0;
  box-sizing: border-box;
  background: var(--surface-card, #FFFFFF);
  border: 1px solid var(--color-border, #E2E2DB);
  border-radius: var(--radius-lg, 12px);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.glynt-logo-card:hover,
#page-container .glynt-logo-card:hover {
  border-color: var(--color-neutral-300, #C6C6BD);
  box-shadow: 0 1px 2px rgba(0,52,0,0.06), 0 6px 18px rgba(0,52,0,0.06);
}
.glynt-logo-card img,
#page-container .glynt-logo-card img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--lc-logo-h, 80px) !important;
  object-fit: contain;
  margin: 0 !important;
}
@media (max-width: 980px) {
  :where(.glynt-logo-cards) { --lc-h: 104px; --lc-logo-h: 64px; }
  .glynt-logo-cards, #page-container .glynt-logo-cards { gap: 12px; }
  .glynt-logo-card, #page-container .glynt-logo-card { padding: 16px; }
}
@media (max-width: 767px) {
  .glynt-logo-cards, #page-container .glynt-logo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.glynt-logo-cards) { --lc-h: 112px; --lc-logo-h: 64px; }
}


/* --------------------------------------------------------------------------
   7b · FEATURE TABLE — .glynt-feature-table
   Two-column capability list: check + Sora title on the left, description on
   the right. Deploys as raw markup in a CODE module (same pattern as
   .glynt-partners). Divs rather than <table> so rows can stack on mobile.
     <div class="glynt-feature-table">
       <div class="glynt-feature-table__head">
         <span>Capability</span><span>How GLYNT handles it</span>
       </div>
       <div class="glynt-feature-table__row">
         <span class="glynt-feature-table__title">Capture every file</span>
         <span class="glynt-feature-table__desc">GLYNT handles the varied file types and formats</span>
       </div>
     </div>
   Head is optional. Title column width: style="--ft-col: 260px" on the wrapper.
   -------------------------------------------------------------------------- */
.glynt-feature-table,
#page-container .glynt-feature-table {
  background: var(--surface-card, #FFFFFF);
  border: 1px solid var(--color-border, #E2E2DB);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
#page-container .et_pb_code_inner > .glynt-feature-table { margin: 0 !important; }
.glynt-feature-table > p:empty,
.glynt-feature-table br { display: none; }

.glynt-feature-table__head,
.glynt-feature-table__row,
#page-container .glynt-feature-table__head,
#page-container .glynt-feature-table__row {
  display: grid;
  grid-template-columns: var(--ft-col, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 18px 28px;
  margin: 0;
}
.glynt-feature-table__head,
#page-container .glynt-feature-table__head {
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--surface-warm, #F9F8F3);
}
.glynt-feature-table__head > span,
#page-container .glynt-feature-table__head > span {
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-muted, #64645E) !important;
}
.glynt-feature-table__head > span:first-child,
#page-container .glynt-feature-table__head > span:first-child { color: var(--color-primary-brand, #188F28) !important; }

.glynt-feature-table__row + .glynt-feature-table__row,
.glynt-feature-table__head + .glynt-feature-table__row,
#page-container .glynt-feature-table__row + .glynt-feature-table__row,
#page-container .glynt-feature-table__head + .glynt-feature-table__row {
  border-top: 1px solid var(--color-border, #E2E2DB);
}
.glynt-feature-table__row { transition: background-color 160ms ease; }
.glynt-feature-table__row:hover,
#page-container .glynt-feature-table__row:hover { background: var(--surface-page, #F6F8F5); }

.glynt-feature-table__title,
#page-container .glynt-feature-table__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-body, #1B1B1B) !important;
}
.glynt-feature-table__title::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-accent-1, #4ED40A) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23003400' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.glynt-feature-table__desc,
#page-container .glynt-feature-table__desc {
  font-family: var(--font-body, 'Urbanist', sans-serif) !important;
  font-size: 17px !important;
  line-height: 1.5;
  color: var(--text-muted, #64645E) !important;
  text-wrap: pretty;
}

/* 3-column modifier: title + two text columns.
   class="glynt-feature-table glynt-feature-table--3col"; each row takes
   __title + two __desc spans (the first can be __desc--strong for body ink).
   Column widths: --ft-col (title) and --ft-col-2 (middle) on the wrapper. */
.glynt-feature-table--3col > .glynt-feature-table__head,
.glynt-feature-table--3col > .glynt-feature-table__row,
#page-container .glynt-feature-table--3col > .glynt-feature-table__head,
#page-container .glynt-feature-table--3col > .glynt-feature-table__row {
  grid-template-columns: var(--ft-col, 280px) var(--ft-col-2, minmax(0, 1fr)) minmax(0, 1.4fr);
}
.glynt-feature-table__desc--strong,
#page-container .glynt-feature-table__desc--strong { color: var(--text-body, #1B1B1B) !important; }

/* Group row: a full-width label that splits the table into sections
   (e.g. DATA, AUDITS & ASSURANCE). Works in 2- and 3-column tables and
   doesn't count as a step in --steps tables.
     <div class="glynt-feature-table__group">Data</div> */
.glynt-feature-table__group,
#page-container .glynt-feature-table__group {
  display: block;
  margin: 0;
  padding: 12px 28px;
  background: #E7F4E3;
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-dark-3, #003400) !important;
}
.glynt-feature-table > .glynt-feature-table__group + *,
.glynt-feature-table > * + .glynt-feature-table__group,
#page-container .glynt-feature-table > .glynt-feature-table__group + *,
#page-container .glynt-feature-table > * + .glynt-feature-table__group {
  border-top: 1px solid var(--color-border, #E2E2DB);
}
@media (max-width: 767px) {
  .glynt-feature-table__group,
  #page-container .glynt-feature-table__group { padding: 12px 20px; }
  .glynt-feature-table--3col > .glynt-feature-table__row,
  #page-container .glynt-feature-table--3col > .glynt-feature-table__row { grid-template-columns: minmax(0, 1fr); }
  .glynt-feature-table__desc--strong,
  #page-container .glynt-feature-table__desc--strong { font-weight: 600; }
}

/* Steps modifier: swaps the check for an auto-numbered marker (1, 2, 3…).
   Add alongside the base class: class="glynt-feature-table glynt-feature-table--steps".
   Numbers come from a CSS counter, so reordering rows renumbers them.
   Start from another number: style="counter-reset: ft-step 3" on the wrapper
   (first row then shows 4). */
.glynt-feature-table--steps,
#page-container .glynt-feature-table--steps { counter-reset: ft-step; }
.glynt-feature-table--steps .glynt-feature-table__row { counter-increment: ft-step; }
.glynt-feature-table--steps .glynt-feature-table__title::before,
#page-container .glynt-feature-table--steps .glynt-feature-table__title::before {
  content: counter(ft-step);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark-3, #003400);
  color: var(--color-accent-1, #4ED40A);
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

@media (max-width: 980px) {
  :where(.glynt-feature-table) { --ft-col: 240px; }
}
@media (max-width: 767px) {
  .glynt-feature-table__head,
  #page-container .glynt-feature-table__head { display: none; }
  .glynt-feature-table__row,
  #page-container .glynt-feature-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 16px 20px;
  }
  .glynt-feature-table__head + .glynt-feature-table__row,
  #page-container .glynt-feature-table__head + .glynt-feature-table__row { border-top: 0; }
  .glynt-feature-table__desc,
  #page-container .glynt-feature-table__desc { padding-left: 38px; font-size: 16px !important; }
}


/* --------------------------------------------------------------------------
   7c · DATA TABLE — .glynt-table
   General comparison / data table in the Feature-table style. Real <table>
   inside a wrapper, deployed in a CODE module. Any number of columns.
     <div class="glynt-table glynt-table--hl-3">
       <table>
         <thead><tr><th>Dimension</th><th>Typical ESG data</th><th>Finance-grade data</th></tr></thead>
         <tbody><tr><td>Source</td><td>…</td><td>…</td></tr></tbody>
       </table>
     </div>
   Highlight one column: --hl-2 … --hl-6 (column number, counting from 1).
   Or put class="is-hl" on individual th/td cells for one-offs.
   First column = row labels (Sora). Turn off with --plain-first.
   ≤767px: scrolls sideways inside the card; the first column stays pinned.
   -------------------------------------------------------------------------- */
.glynt-table,
#page-container .glynt-table {
  background: var(--surface-card, #FFFFFF);
  border: 1px solid var(--color-border, #E2E2DB);
  border-radius: var(--radius-lg, 12px);
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-overflow-scrolling: touch;
}
.glynt-table > p:empty,
.glynt-table br { display: none; }
.glynt-table table,
#page-container .glynt-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0 !important;
  margin: 0 !important;
  table-layout: auto;
}
.glynt-table th,
.glynt-table td,
#page-container .glynt-table th,
#page-container .glynt-table td {
  padding: 18px 24px !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border, #E2E2DB) !important;
  text-align: left;
  vertical-align: middle;
  background: var(--surface-card, #FFFFFF);
  font-family: var(--font-body, 'Urbanist', sans-serif) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: var(--text-muted, #64645E) !important;
}
.glynt-table thead th,
#page-container .glynt-table thead th {
  border-top: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background: var(--surface-warm, #F9F8F3) !important;
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4 !important;
  white-space: nowrap;
}
.glynt-table tbody tr:first-child > *,
#page-container .glynt-table tbody tr:first-child > * { border-top: 1px solid var(--color-border, #E2E2DB) !important; }
.glynt-table table:not(:has(thead)) tbody tr:first-child > * { border-top: 0 !important; }

/* Row labels */
.glynt-table:not(.glynt-table--plain-first) tbody tr > :first-child,
#page-container .glynt-table:not(.glynt-table--plain-first) tbody tr > :first-child {
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--text-body, #1B1B1B) !important;
  white-space: nowrap;
}
.glynt-table:not(.glynt-table--plain-first) thead tr > :first-child,
#page-container .glynt-table:not(.glynt-table--plain-first) thead tr > :first-child { color: var(--color-primary-brand, #188F28) !important; }


/* Highlighted column */
.glynt-table--hl-2 tr > :nth-child(2),
.glynt-table--hl-3 tr > :nth-child(3),
.glynt-table--hl-4 tr > :nth-child(4),
.glynt-table--hl-5 tr > :nth-child(5),
.glynt-table--hl-6 tr > :nth-child(6),
.glynt-table .is-hl,
#page-container .glynt-table--hl-2 tr > :nth-child(2),
#page-container .glynt-table--hl-3 tr > :nth-child(3),
#page-container .glynt-table--hl-4 tr > :nth-child(4),
#page-container .glynt-table--hl-5 tr > :nth-child(5),
#page-container .glynt-table--hl-6 tr > :nth-child(6),
#page-container .glynt-table .is-hl {
  background: #E7F4E3 !important;
  color: var(--text-body, #1B1B1B) !important;
  font-weight: 500;
  border-top-color: #CFE6C8 !important;
}
.glynt-table--hl-2 thead tr > :nth-child(2),
.glynt-table--hl-3 thead tr > :nth-child(3),
.glynt-table--hl-4 thead tr > :nth-child(4),
.glynt-table--hl-5 thead tr > :nth-child(5),
.glynt-table--hl-6 thead tr > :nth-child(6),
.glynt-table thead .is-hl,
#page-container .glynt-table--hl-2 thead tr > :nth-child(2),
#page-container .glynt-table--hl-3 thead tr > :nth-child(3),
#page-container .glynt-table--hl-4 thead tr > :nth-child(4),
#page-container .glynt-table--hl-5 thead tr > :nth-child(5),
#page-container .glynt-table--hl-6 thead tr > :nth-child(6),
#page-container .glynt-table thead .is-hl {
  background: #DDEFD7 !important;
  color: var(--color-dark-3, #003400) !important;
  box-shadow: inset 0 3px 0 var(--color-primary-brand, #188F28);
}

/* Highlight the first column. Needs the doubled class to beat the row-label
   header colour. */
.glynt-table.glynt-table--hl-1 tr > :first-child,
#page-container .glynt-table.glynt-table--hl-1 tr > :first-child {
  background: #E7F4E3 !important;
  border-top-color: #CFE6C8 !important;
}
.glynt-table.glynt-table--hl-1 thead tr > :first-child,
#page-container .glynt-table.glynt-table--hl-1 thead tr > :first-child {
  background: #DDEFD7 !important;
  color: var(--color-dark-3, #003400) !important;
  box-shadow: inset 0 3px 0 var(--color-primary-brand, #188F28);
}

/* Two-line cell: bold label + muted sub-line.
   <td>Scope and boundaries<span class="glynt-table__sub">Which assets…</span></td> */
.glynt-table__sub,
#page-container .glynt-table__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body, 'Urbanist', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--text-muted, #64645E) !important;
  white-space: normal;
}
.glynt-table td:has(.glynt-table__sub),
#page-container .glynt-table td:has(.glynt-table__sub) {
  white-space: normal !important;
  min-width: 220px;
  vertical-align: top;
}
.glynt-table table:has(.glynt-table__sub) td,
#page-container .glynt-table table:has(.glynt-table__sub) td { vertical-align: top; }

/* Centre a column's content (e.g. badges): class="is-center" on the th + td cells. */
.glynt-table .is-center,
#page-container .glynt-table .is-center { text-align: center !important; }
.glynt-table td .glynt-badge { vertical-align: middle; }
/* Link column — a plain uppercase text link with an arrow, right-aligned.
   <td><a class="glynt-link--fern glynt-table__link" href="/…">Learn more <i class="fa-sharp fa-solid fa-arrow-right"></i></a></td>
   Pair with glynt-table--wrap-first when the row labels are long. */
.glynt-table td:has(> .glynt-table__link),
#page-container .glynt-table td:has(> .glynt-table__link) {
  width: 1%;
  white-space: nowrap !important;
  text-align: right !important;
}
.glynt-table a.glynt-table__link,
#page-container .glynt-table a.glynt-table__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--color-primary-brand, #188F28) !important;
  transition: color var(--duration-fast, 120ms) ease;
}
.glynt-table a.glynt-table__link i { font-size: 12px; transition: transform var(--duration-fast, 120ms) ease; }
#page-container .glynt-table a.glynt-table__link:hover { color: var(--color-dark-1, #075920) !important; }
.glynt-table a.glynt-table__link:hover i { transform: translateX(2px); }
/* Inline links in cells — underlined, Fern; excludes the arrow link column. */
#page-container .glynt-table td a:not(.glynt-table__link) {
  color: var(--color-primary-brand, #188F28) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: color var(--duration-fast, 120ms) ease;
}
#page-container .glynt-table td a:not(.glynt-table__link):hover { color: var(--color-dark-1, #075920) !important; }
/* Let long row labels wrap instead of forcing one line. */
.glynt-table--wrap-first tbody tr > :first-child,
#page-container .glynt-table--wrap-first tbody tr > :first-child { white-space: normal !important; }

/* Numbered list table — col 1 is a step number, col 2 takes the row-label style.
   <div class="glynt-table glynt-table--numbered"> … <th>#</th><th>Item</th><th>Note</th> */
.glynt-table--numbered tr > :first-child,
#page-container .glynt-table.glynt-table--numbered tr > :first-child {
  width: 64px;
  text-align: center !important;
  font-family: var(--font-data, 'Sora', sans-serif) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  color: var(--color-primary-brand, #188F28) !important;
}
.glynt-table--numbered tbody tr > :nth-child(2),
#page-container .glynt-table--numbered tbody tr > :nth-child(2) {
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--text-body, #1B1B1B) !important;
}
@media (max-width: 767px) {
  .glynt-table--numbered tr > :first-child { width: 48px; }
}

/* Status / report-card table — col 1 is a status icon, col 2 takes the row-label style.
   <div class="glynt-table glynt-table--status"> … <th>Status</th><th>Principle</th><th>Note</th>
   Icons: <i class="fa-sharp fa-solid fa-square-xmark glynt-status glynt-status--fail" aria-hidden="true"></i><span class="glynt-sr">Not met</span>
   Modifiers: --pass (Fern), --fail (Alert Red), --unknown (Ash). Row aside: <tr class="glynt-table__aside"> */
.glynt-table--status tr > :first-child,
#page-container .glynt-table.glynt-table--status tr > :first-child {
  width: 96px;
  text-align: center !important;
}
.glynt-table--status tbody tr > :nth-child(2),
#page-container .glynt-table--status tbody tr > :nth-child(2) {
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--text-body, #1B1B1B) !important;
  white-space: normal !important;
}
.glynt-table .glynt-status,
#page-container .glynt-table .glynt-status {
  font-size: 22px !important;
  line-height: 1 !important;
  vertical-align: middle;
}
#page-container .glynt-status--pass,    .glynt-status--pass    { color: var(--color-primary-brand, #188F28) !important; }
#page-container .glynt-status--fail,    .glynt-status--fail    { color: var(--color-alert-red, #D13420) !important; }
#page-container .glynt-status--unknown, .glynt-status--unknown { color: var(--color-neutral-ash, #C6C6BD) !important; }
.glynt-table__aside td,
#page-container .glynt-table .glynt-table__aside td { font-style: italic; color: var(--text-muted, #64645E) !important; }
#page-container .glynt-table--status tbody .glynt-table__aside td:nth-child(2) { font-family: var(--font-body, 'Urbanist', sans-serif) !important; font-weight: 500 !important; color: var(--text-muted, #64645E) !important; }
.glynt-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 767px) {
  .glynt-table--status tr > :first-child { width: 64px; }
}

/* Footnotes under a table. Sits directly after the .glynt-table wrapper:
   <div class="glynt-table-notes"><p><sup>*</sup> Note…</p></div> */
.glynt-table-notes,
#page-container .glynt-table-notes {
  margin: 14px 0 0;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#page-container .glynt-table-notes p {
  margin: 0;
  padding: 0 0 0 18px;
  text-indent: -18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted, #64645E);
}
#page-container .glynt-table-notes sup {
  display: inline-block;
  width: 18px;
  text-indent: 0;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  color: var(--color-primary-brand, #188F28);
  font-weight: 700;
}
#page-container .glynt-table-notes a { text-decoration: underline; text-underline-offset: 2px; }

/* Stacked reference items — one or more numbered lines in a cell.
   <td><span class="glynt-table__item"><span class="glynt-table__ref">#3</span>Electricity usage…</span>
       <span class="glynt-table__item"><span class="glynt-table__ref">#4</span>Natural gas usage…</span></td>
   Rows top-align so paired items line up across columns. */
.glynt-table__item,
#page-container .glynt-table__item {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: baseline;
}
.glynt-table__item + .glynt-table__item,
#page-container .glynt-table__item + .glynt-table__item { margin-top: var(--space-2, 8px); }
.glynt-table__ref,
#page-container .glynt-table__ref {
  flex: 0 0 auto;
  min-width: 2.25em;
  font-family: var(--font-data, 'Sora', sans-serif) !important;
  font-weight: var(--weight-semibold, 600) !important;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-brand, #188F28) !important;
}
.glynt-table table:has(.glynt-table__item) td,
#page-container .glynt-table table:has(.glynt-table__item) td {
  vertical-align: top !important;
  white-space: normal !important;
}
.glynt-table table:has(.glynt-table__item) td,
#page-container .glynt-table table:has(.glynt-table__item) td { min-width: 180px; }
.glynt-table td:has(.glynt-table__item),
#page-container .glynt-table td:has(.glynt-table__item) { min-width: 240px; }
.glynt-table table:has(.glynt-table__item) tbody tr > :first-child,
#page-container .glynt-table table:has(.glynt-table__item) tbody tr > :first-child { min-width: 160px; }
/* Bulleted list inside a cell — plain <ul><li> in the markup. Small Fern
   squares (the brand's geometric mark) instead of Divi's default discs.
   Rows holding a list top-align so the first bullet sits level with the
   other cells' first line. */
.glynt-table td ul,
#page-container .glynt-table td ul,
.et-db #et-boc .et-l .glynt-table td ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.glynt-table td li,
#page-container .glynt-table td li,
.et-db #et-boc .et-l .glynt-table td li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
  line-height: 1.45;
  list-style: none !important;
}
.glynt-table td li + li,
#page-container .glynt-table td li + li { margin-top: 6px !important; }
.glynt-table td li::before,
#page-container .glynt-table td li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--color-primary-brand, #188F28);
  border-radius: 1px;
}
.glynt-table td:has(ul),
#page-container .glynt-table td:has(ul) { white-space: normal !important; min-width: 220px; }
.glynt-table table:has(td ul) td,
#page-container .glynt-table table:has(td ul) td { vertical-align: top !important; }

@media (max-width: 980px) {
  .glynt-table th, .glynt-table td,
  #page-container .glynt-table th, #page-container .glynt-table td { padding: 16px 18px !important; font-size: 16px !important; }
  .glynt-table thead th, #page-container .glynt-table thead th { padding-top: 12px !important; padding-bottom: 12px !important; font-size: 11px !important; }
}
@media (max-width: 767px) {
  /* Size to content, not a fixed 680px: a 3-column table only needs to scroll
     a little, a 5-column one scrolls more. Snippet colgroup percentages are
     ignored here — 40% of a forced-wide table was wider than the screen. */
  .glynt-table table, #page-container .glynt-table table {
    width: max-content !important;
    min-width: 100% !important;
  }
  .glynt-table colgroup col, #page-container .glynt-table colgroup col { width: auto !important; }
  .glynt-table td, .glynt-table th,
  #page-container .glynt-table td, #page-container .glynt-table th {
    min-width: 140px;
    max-width: 240px;
    white-space: normal;
  }
  .glynt-table--numbered tr > :first-child,
  #page-container .glynt-table--numbered tr > :first-child { min-width: 48px !important; width: 48px !important; }
  .glynt-table:not(.glynt-table--plain-first) tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--color-border, #E2E2DB);
  }
  /* The pinned label column wraps and caps at ~40% of the screen, so at least
     one data column is always visible beside it while scrolling. */
  .glynt-table:not(.glynt-table--numbered) tbody tr > :first-child,
  .glynt-table:not(.glynt-table--numbered) thead tr > :first-child,
  #page-container .glynt-table:not(.glynt-table--plain-first):not(.glynt-table--numbered) tbody tr > :first-child,
  #page-container .glynt-table:not(.glynt-table--numbered) thead tr > :first-child,
  #page-container .glynt-table:not(.glynt-table--numbered) table:has(.glynt-table__item) tbody tr > :first-child {
    white-space: normal !important;
    width: 40vw !important;
    min-width: 120px !important;
    max-width: 40vw !important;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: pretty;
  }
  #page-container .glynt-table:not(.glynt-table--plain-first) tbody tr > :first-child { font-size: 15px !important; line-height: 1.35; }
  .glynt-table td, .glynt-table th { vertical-align: top; }
}


/* ==========================================================================
   8 · BLURBS + ICON LISTS
   ========================================================================== */
/* Module headers inherit the size of the tag the Builder actually emitted —
   never force one size, or an H5/H6 blurb title silently renders at H4. */
.et_pb_blurb .et_pb_module_header,
.et-db #et-boc .et-l .et_pb_blurb .et_pb_module_header {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--text-heading) !important;
  padding-bottom: var(--space-2) !important;
}
.et_pb_blurb h2.et_pb_module_header, .et_pb_blurb h2,
.et-db #et-boc .et-l .et_pb_blurb h2 { font-size: var(--text-h2) !important; line-height: var(--leading-snug) !important; }
.et_pb_blurb h3.et_pb_module_header, .et_pb_blurb h3,
.et-db #et-boc .et-l .et_pb_blurb h3 { font-size: var(--text-h3) !important; line-height: 1.2 !important; }
.et_pb_blurb h4.et_pb_module_header, .et_pb_blurb h4,
.et-db #et-boc .et-l .et_pb_blurb h4 { font-size: var(--text-h4) !important; line-height: 1.3 !important; letter-spacing: -0.01em; }
.et_pb_blurb h5.et_pb_module_header, .et_pb_blurb h5,
.et-db #et-boc .et-l .et_pb_blurb h5 { font-size: var(--text-h5) !important; line-height: 1.35 !important; letter-spacing: 0; }
.et_pb_blurb h6.et_pb_module_header, .et_pb_blurb h6,
.et-db #et-boc .et-l .et_pb_blurb h6 { font-size: var(--text-h6) !important; line-height: 1.4 !important; letter-spacing: 0; }
.et_pb_blurb .et_pb_blurb_description,
.et_pb_blurb .et_pb_blurb_description p {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.et_pb_blurb .et-pb-icon,
.et_pb_blurb .et_pb_main_blurb_image .et-pb-icon {
  color: var(--color-primary-brand) !important;
}
/* Blurb card — the class goes on the BLURB module, not the column. Don't
   stack with .glynt-card on the column (card-in-card). Shorthands carry
   !important + the #page-container prefix for the same reason as .glynt-card:
   Divi's Design-tab background/border would otherwise win. overflow:hidden
   clips a full-bleed image to the rounded corners; the image radius is a
   fallback for browsers/Divi wrappers that escape the clip. */
.et_pb_blurb.glynt-blurb--card,
#page-container .et_pb_blurb.glynt-blurb--card {
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--pad-card) !important;
  overflow: hidden !important;
  isolation: isolate;
}
.et_pb_blurb.glynt-blurb--card .et_pb_main_blurb_image,
.et_pb_blurb.glynt-blurb--card .et_pb_image_wrap,
.et_pb_blurb.glynt-blurb--card .et_pb_main_blurb_image img,
#page-container .et_pb_blurb.glynt-blurb--card .et_pb_main_blurb_image img {
  border-top-left-radius: calc(var(--radius-lg) - 1px) !important;
  border-top-right-radius: calc(var(--radius-lg) - 1px) !important;
}
/* Inside a padded card the image isn't touching the corners, so give it the
   regular inner radius instead of a top-only one. */
.et_pb_blurb.glynt-blurb--card:not(.glynt-blurb--bleed) .et_pb_main_blurb_image img {
  border-radius: var(--radius-md) !important;
}
/* Full-bleed image: add glynt-blurb--bleed alongside glynt-blurb--card. Image
   runs edge to edge across the top, text keeps the card padding. */
/* Doesn't require --card alongside it — a blurb carrying only --bleed was
   keeping Divi's padding, which shows up as a 20px inset on the image.
   Doubled class bumps specificity past a Design-tab padding saved with
   !important (.et_pb_blurb_N.et_pb_blurb). */
.et_pb_blurb.glynt-blurb--bleed.glynt-blurb--bleed,
#page-container .et_pb_blurb.glynt-blurb--bleed.glynt-blurb--bleed,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed.glynt-blurb--bleed { padding: 0 !important; }
/* Divi caps the blurb at 550px and sizes the image wrap from the module's
   Image Width setting (.et_pb_blurb_N .et_pb_image_wrap { max-width }), and the
   wrap is inline-block — any of those leaves a gap on the right. Release all
   three; the ID prefix outranks Divi's per-module rule. */
.et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_content,
#page-container .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_content,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image,
#page-container .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image {
  display: block !important;
  margin: 0 0 var(--space-5) 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.et_pb_blurb.glynt-blurb--bleed .et_pb_image_wrap,
.et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image img,
#page-container .et_pb_blurb.glynt-blurb--bleed .et_pb_image_wrap,
#page-container .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image img,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed .et_pb_image_wrap,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image img,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image > a,
#page-container .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image > a {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  padding: 0 !important;
  margin: 0 !important;
}
/* The <img> box measured full width while the picture drew narrower and
   left-aligned — the bitmap was being letterboxed inside its own box
   (object-fit: contain/scale-down from a theme or plugin rule). Force cover
   so the photo fills the box it's given. */
.et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image img,
#page-container .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image img,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed .et_pb_main_blurb_image img {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
.et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_container,
#page-container .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_container,
.et-db #et-boc .et-l .et_pb_blurb.glynt-blurb--bleed .et_pb_blurb_container {
  padding: 0 var(--pad-card) var(--pad-card) !important;
}

/* Icon list — brand check marks, no bullets.
   Works both ways: the class on a wrapper (Text module CSS Class field, which
   wraps the UL) or directly on the UL/OL in a module's code view. */
.glynt-list ul,
.glynt-list ol,
ul.glynt-list,
ol.glynt-list,
#page-container ul.glynt-list,
#page-container ol.glynt-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.glynt-list li {
  position: relative;
  margin-bottom: 0 !important;
  padding: 0 0 var(--space-3) 30px !important;
  font-size: var(--text-body-base);
  line-height: var(--leading-list);
  color: var(--text-body);
  list-style: none !important;
}
.glynt-list li:last-child { padding-bottom: 0 !important; }
.glynt-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-accent-1);
}
.glynt-list--dot li:before { border-radius: 50%; background: var(--color-primary-brand); }

/* Body-size list — items match the surrounding paragraph text (size, line-height)
   instead of the fixed list size. Inherits from the Text module, so whatever the
   module's body font size is, the bullets follow. Combine with any other modifier:
   <ul class="glynt-list glynt-list--body"> or class on the Text module wrapper. */
.glynt-list--body li,
#page-container .glynt-list--body li,
#page-container .glynt-list--body ul li,
#page-container .glynt-list--body ol li,
#page-container .et_pb_text .glynt-list--body li {
  font-size: inherit !important;
  line-height: var(--leading-normal, 1.4) !important;
  padding-left: 1.75em !important;
}
.glynt-list--body li:before { top: 0.6em; width: 0.6em; height: 0.6em; }
.glynt-list--body.glynt-list--fa li:before,
#page-container .glynt-list--body.glynt-list--fa li:before {
  top: 0;
  line-height: 1.647; /* 1.4 ÷ 0.85 — keeps the 0.85em glyph centred on the first text line */
  font-size: var(--glynt-list-icon-size, 0.85em);
}

/* --- Font Awesome bullets -------------------------------------------------
   Add glynt-list--fa alongside glynt-list to swap the drawn square for a real
   Font Awesome glyph. The glyph is a variable, so any icon works without a new
   class — set it inline on the list:
     <ul class="glynt-list glynt-list--fa" style="--glynt-list-icon: '\f0e7';">
   Find the unicode on the icon's Font Awesome page (Unicode field, e.g. f0e7)
   and write it as '\f0e7' — quotes required, backslash required.
   Named presets below cover the ones we actually use, so most lists need no
   inline style at all. Requires the site's Font Awesome CSS to be loading
   (it already is — the icon classes in §7 depend on it).
   The family stack covers Pro 6/7 and Sharp; weight 900 = solid, 300 = light,
   400 = regular (use --light / --regular). Divi's own ETmodules font is not
   involved. -------------------------------------------------------------- */
.glynt-list--fa li:before,
#page-container .glynt-list--fa li:before {
  content: var(--glynt-list-icon, "\f00c") !important;
  font-family: "Font Awesome 7 Sharp", "Font Awesome 6 Sharp",
               "Font Awesome 7 Pro", "Font Awesome 6 Pro",
               "Font Awesome 7 Free", "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  width: auto;
  height: auto;
  top: 0;
  line-height: var(--leading-list);
  font-size: var(--glynt-list-icon-size, 14px);
  border-radius: 0;
  background: none !important;
  color: var(--glynt-list-icon-color, var(--color-primary-brand));
}
/* Weight variants — Sharp Light reads better at larger icon sizes. */
.glynt-list--fa.glynt-list--light li:before,
#page-container .glynt-list--fa.glynt-list--light li:before { font-weight: 300; }
.glynt-list--fa.glynt-list--regular li:before,
#page-container .glynt-list--fa.glynt-list--regular li:before { font-weight: 400; }

/* Named glyph presets — combine with glynt-list--fa. */
.glynt-list--check      { --glynt-list-icon: "\f00c"; }  /* check            */
.glynt-list--check-circle { --glynt-list-icon: "\f058"; } /* circle-check    */
.glynt-list--arrow      { --glynt-list-icon: "\f061"; }  /* arrow-right      */
.glynt-list--chevron    { --glynt-list-icon: "\f054"; }  /* chevron-right    */
.glynt-list--leaf       { --glynt-list-icon: "\f06c"; }  /* leaf             */
.glynt-list--bolt       { --glynt-list-icon: "\f0e7"; }  /* bolt             */
.glynt-list--shield     { --glynt-list-icon: "\f3ed"; }  /* shield-halved    */
.glynt-list--chart      { --glynt-list-icon: "\e0e3"; }  /* chart-mixed      */
.glynt-list--file       { --glynt-list-icon: "\f15c"; }  /* file-lines       */
.glynt-list--gauge      { --glynt-list-icon: "\f625"; }  /* gauge-high       */
.glynt-list--xmark      { --glynt-list-icon: "\f00d"; --glynt-list-icon-color: #D13420; }
.glynt-list--square     { --glynt-list-icon: "\f45c"; }  /* square-small     */

/* Icon colour — same legibility tiers as the §7 icon modifiers. */
.glynt-list--icon-fern     { --glynt-list-icon-color: var(--color-primary-brand); }
.glynt-list--icon-grass    { --glynt-list-icon-color: var(--color-accent-1); }
.glynt-list--icon-leaf     { --glynt-list-icon-color: var(--color-accent-2); }
.glynt-list--icon-cedar    { --glynt-list-icon-color: var(--color-dark-1); }
.glynt-list--icon-conifer  { --glynt-list-icon-color: var(--color-dark-2); }
.glynt-list--icon-woodland { --glynt-list-icon-color: var(--color-dark-3); }
.glynt-list--icon-slate    { --glynt-list-icon-color: var(--text-muted); }
.glynt-list--icon-white    { --glynt-list-icon-color: var(--text-on-dark); }

/* Icon size — the text stays put; only the glyph and the indent change. */
.glynt-list--icon-sm { --glynt-list-icon-size: 12px; }
.glynt-list--icon-lg { --glynt-list-icon-size: 18px; }
.glynt-list--icon-lg li,
#page-container .glynt-list--icon-lg li { padding-left: 34px !important; }

/* On deep-green sections the body copy inverts too. */
.glynt-list--on-dark li,
#page-container .glynt-list--on-dark li { color: var(--text-on-dark); }
.glynt-list--on-dark { --glynt-list-icon-color: var(--color-accent-2); }


/* ==========================================================================
   8b · FAQ / ACCORDION
   Apply .glynt-faq to the Accordion or Toggle module's CSS Class field, or to
   the row holding several Toggles. Divi ships a boxed, grey-bordered accordion
   with an ETmodules glyph for the marker — all of that is replaced here with a
   hairline list and a drawn chevron. Set nothing in the module's Design tab.
   ========================================================================== */
.glynt-faq .et_pb_accordion,
.glynt-faq.et_pb_accordion {
  border: 0 !important;
  background: transparent !important;
}
.glynt-faq .et_pb_toggle,
.glynt-faq.et_pb_toggle,
body #page-container .glynt-faq .et_pb_toggle {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.glynt-faq .et_pb_toggle:first-of-type,
.glynt-faq.et_pb_toggle:first-of-type { border-top: 1px solid var(--color-border) !important; }

/* Heading level is free — set Title Heading Level to H3 (or anything) in the
   Toggle module; it always renders at H5 size. The h-tag selectors outrank
   Divi's per-module h3 rules and any global h3 sizing. */
.glynt-faq .et_pb_toggle_title,
body #page-container .glynt-faq .et_pb_toggle_title,
body #page-container .glynt-faq :is(h1, h2, h3, h4, h5, h6).et_pb_toggle_title,
body #page-container .glynt-faq.et_pb_toggle :is(h1, h2, h3, h4, h5, h6).et_pb_toggle_title {
  font-family: var(--font-display) !important;
  font-size: var(--text-h5) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: var(--text-heading) !important;
  padding: var(--space-4) 56px var(--space-4) 0 !important;
  margin: 0 !important;
  cursor: pointer;
  position: relative;
  transition: color var(--duration-fast) var(--ease-standard);
}
.glynt-faq .et_pb_toggle_title:hover { color: var(--text-brand) !important; }

/* Divi draws its marker as an ETmodules glyph on ::before. Blanking the
   content and font is what stops a stray "3" appearing inside the chevron. */
.glynt-faq .et_pb_toggle_title::before,
body #page-container .glynt-faq .et_pb_toggle_title::before {
  content: '' !important;
  font-family: inherit !important;
  width: 11px;
  height: 11px;
  border: 0 !important;
  border-right: 2px solid var(--color-primary-brand) !important;
  border-bottom: 2px solid var(--color-primary-brand) !important;
  border-radius: 1px;
  background: none !important;
  position: absolute;
  right: 10px;
  top: 27px;
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}
.glynt-faq .et_pb_toggle_open .et_pb_toggle_title::before,
body #page-container .glynt-faq .et_pb_toggle_open .et_pb_toggle_title::before {
  transform: rotate(-135deg);
  top: 32px;
}

.glynt-faq .et_pb_toggle_content,
body #page-container .glynt-faq .et_pb_toggle_content {
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  line-height: 1.55;
  color: var(--text-body) !important;
  padding: 0 56px var(--space-4) 0 !important;
  margin: 0 !important;
  max-width: 72ch;
}
.glynt-faq .et_pb_toggle_content p:last-child { margin-bottom: 0; }

/* --- Smoother open/close -------------------------------------------------
   Divi opens a toggle with jQuery slideDown(), which writes an inline pixel
   height on .et_pb_toggle_content every frame AND animates padding-top and
   padding-bottom alongside it. Two animations on the same box, one of them
   changing the element's own content height, is what makes it stutter —
   especially on the first open, before the browser has laid the text out.

   CSS can't smooth a jQuery-driven height, but it can stop the padding from
   fighting it. Padding is pinned so slideDown only has height to animate,
   and the text gets its own fade + lift on a real CSS transition, which is
   what the eye actually reads as "the panel opened".

   If you want the height itself on a CSS transition instead, that needs the
   toggle script replaced — say the word and I'll write it. */
.glynt-faq .et_pb_toggle_content,
body #page-container .glynt-faq .et_pb_toggle_content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  will-change: height;
  backface-visibility: hidden;
}

/* Spacing now comes from the text's own margins, which slideDown measures as
   part of the height rather than animating separately. */
.glynt-faq .et_pb_toggle_content > *:first-child { margin-top: 0 !important; }

/* Breathing room between the answer and the divider below it. This lives on
   the TOGGLE, not on the content: the content box is what slideDown animates,
   and a bottom margin on its last child sits inside that animated box, so it
   reads as part of the text block rather than as separation from the next
   question. Padding on the open toggle is outside the animation entirely —
   it can't be collapsed and it doesn't stutter. */
/* Space below the answer.
   Carried as a MARGIN on the last child, inside the box slideDown animates,
   so jQuery measures it into the height and the whole thing is one animation.

   Two approaches were tried and reverted, both for the same reason — they
   put the spacing on a second, independently-timed clock:
     - padding-bottom on the open toggle + a CSS transition. jQuery finishes
       the height and snaps to auto while CSS is still easing, giving one
       fast movement at the end.
     - padding-bottom on the content for jQuery to animate. Worse: it changes
       the box's own height mid-measurement.
   Leave this as a margin. */
.glynt-faq .et_pb_toggle_content > *:last-child,
body #page-container .glynt-faq .et_pb_toggle_content > *:last-child,
.glynt-faq .et_pb_toggle_content p:last-child,
body #page-container .glynt-faq .et_pb_toggle_content p:last-child {
  margin-bottom: 0 !important;
}
/* The spacer is a block ::after, not a margin on the last child. Answers typed
   straight into the toggle are bare text with no <p>, so *:last-child never
   matched and the next question sat right underneath. The hand-added "</p>"
   only worked because browsers turn it into an empty <p> that the rule caught.
   ::after is always there whatever the markup, and it sits inside the
   animated box, so slideDown measures it into the same single animation.
   No stray </p> needed any more. */
.glynt-faq .et_pb_toggle_content::after,
body #page-container .glynt-faq .et_pb_toggle_content::after {
  content: "" !important;
  display: block !important;
  height: 24px;
  clear: both;
}

/* Fade + lift the copy as the panel opens. Closed state is the resting one so
   it also plays in reverse on close. */
.glynt-faq .et_pb_toggle_content > * {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--ease-standard) 60ms,
              transform 220ms var(--ease-standard) 60ms;
}
.glynt-faq .et_pb_toggle_open .et_pb_toggle_content > * {
  opacity: 1;
  transform: none;
}

/* The chevron was transitioning transform only; adding top to the same
   transition stops the small jump as it flips. */
.glynt-faq .et_pb_toggle_title::before,
body #page-container .glynt-faq .et_pb_toggle_title::before {
  transition: transform var(--duration-base) var(--ease-standard),
              top var(--duration-base) var(--ease-standard) !important;
}

@media (prefers-reduced-motion: reduce) {
  .glynt-faq .et_pb_toggle_content > *,
  .glynt-faq .et_pb_toggle_title::before { transition: none !important; }
  .glynt-faq .et_pb_toggle_content > * { opacity: 1; transform: none; }
}

/* Deep-green bands. */
.glynt-faq.glynt-on-dark .et_pb_toggle,
.glynt-on-dark .glynt-faq .et_pb_toggle { border-bottom-color: rgba(246,248,245,0.22) !important; }
.glynt-faq.glynt-on-dark .et_pb_toggle:first-of-type,
.glynt-on-dark .glynt-faq .et_pb_toggle:first-of-type { border-top-color: rgba(246,248,245,0.22) !important; }
.glynt-on-dark .glynt-faq .et_pb_toggle_title,
.glynt-faq.glynt-on-dark .et_pb_toggle_title { color: var(--color-white) !important; }
.glynt-on-dark .glynt-faq .et_pb_toggle_title:hover,
.glynt-faq.glynt-on-dark .et_pb_toggle_title:hover { color: var(--color-accent-1) !important; }
.glynt-on-dark .glynt-faq .et_pb_toggle_content,
.glynt-faq.glynt-on-dark .et_pb_toggle_content { color: var(--text-on-dark) !important; }
.glynt-on-dark .glynt-faq .et_pb_toggle_title::before,
.glynt-faq.glynt-on-dark .et_pb_toggle_title::before {
  border-right-color: var(--color-accent-1) !important;
  border-bottom-color: var(--color-accent-1) !important;
}


/* ==========================================================================
   9 · ICONS — Font Awesome 7 Pro (official WP plugin + Pro kit)
   The plugin loads the webfonts and the fa-* classes; these rules only apply
   brand colour and scale. Set the kit's default family to Sharp so bare
   `fa-solid` markup renders on-brand without a `fa-sharp` class everywhere.
   ========================================================================== */
.fa-sharp, .fa-solid, .fa-regular, .fa-light, .fas, .far, .fal {
  line-height: 1;
  vertical-align: -0.075em;
}

/* Colour utilities — pair with any fa-* icon */
.glynt-icon-brand   { color: var(--color-primary-brand) !important; }
.glynt-icon-action  { color: var(--color-accent-1) !important; }
.glynt-icon-deep    { color: var(--color-dark-1) !important; }
.glynt-icon-muted   { color: var(--text-muted) !important; }
.glynt-icon-light   { color: var(--text-on-dark) !important; }
.glynt-icon-warning { color: var(--color-alert-orange) !important; }
.glynt-icon-error   { color: var(--color-alert-red) !important; }

/* Size utilities — 8px scale, independent of FA's fa-lg / fa-2x */
.glynt-icon-sm { font-size: 16px !important; }
.glynt-icon-md { font-size: 24px !important; }
.glynt-icon-lg { font-size: 32px !important; }
.glynt-icon-xl { font-size: 48px !important; }
/* Containment, same trap as the color modifiers: font-size inherits, so a size
   class on a wrapper bigger than the <i> scales the copy underneath it too.
   Put text descendants back on the type scale. */
:is(.glynt-icon-sm, .glynt-icon-md, .glynt-icon-lg, .glynt-icon-xl) :is(p, li) {
  font-size: var(--text-body-base) !important;
  line-height: var(--leading-normal) !important;
}
:is(.glynt-icon-sm, .glynt-icon-md, .glynt-icon-lg, .glynt-icon-xl) h1 { font-size: var(--text-h1) !important; }
:is(.glynt-icon-sm, .glynt-icon-md, .glynt-icon-lg, .glynt-icon-xl) h2 { font-size: var(--text-h2) !important; }
:is(.glynt-icon-sm, .glynt-icon-md, .glynt-icon-lg, .glynt-icon-xl) h3 { font-size: var(--text-h3) !important; }
:is(.glynt-icon-sm, .glynt-icon-md, .glynt-icon-lg, .glynt-icon-xl) h4 { font-size: var(--text-h4) !important; }
:is(.glynt-icon-sm, .glynt-icon-md, .glynt-icon-lg, .glynt-icon-xl) h5 { font-size: var(--text-h5) !important; }
:is(.glynt-icon-sm, .glynt-icon-md, .glynt-icon-lg, .glynt-icon-xl) h6 { font-size: var(--text-h6) !important; }

/* Icon color modifiers — stack with a glynt-icon-* size class, e.g.
   <span class="fa-sharp fa-solid fa-leaf glynt-icon-lg glynt-icon--leaf"> */
.glynt-icon--leaf     { color: var(--color-accent-2) !important; }
.glynt-icon--fern     { color: var(--color-primary-brand) !important; }
.glynt-icon--conifer  { color: var(--color-dark-2) !important; }
.glynt-icon--cedar    { color: var(--color-dark-1) !important; }
.glynt-icon--woodland { color: var(--color-dark-3) !important; }
.glynt-icon--grass    { color: var(--color-accent-1) !important; }
.glynt-icon--slate    { color: var(--text-muted) !important; }
.glynt-icon--ash      { color: var(--color-neutral-300) !important; }
.glynt-icon--white    { color: var(--color-white) !important; }
/* Alert Yellow / Orange are deliberately absent — status colour belongs to the
   badge classes, not a general-purpose icon utility, or it drifts into
   decoration. Contrast notes: --leaf and --grass are legible only on the deep
   greens; --woodland and --white only on bright green / deep green
   respectively; --fern, --conifer and --cedar are the light-surface set. */

/* Containment: if a modifier ever ends up on a wrapper bigger than just the
   <i> (e.g. a whole card/column instead of the icon span), stop the color at
   the icon — don't let it inherit into headings/body copy underneath it. */
:is(.glynt-icon--leaf, .glynt-icon--fern, .glynt-icon--conifer,
    .glynt-icon--cedar, .glynt-icon--woodland, .glynt-icon--grass,
    .glynt-icon--slate, .glynt-icon--ash,
    .glynt-icon--white) :is(h1,h2,h3,h4,h5,h6,p,li) { color: var(--text-body) !important; }

/* Icon in a tinted tile — the blurb / feature-card pattern */
.glynt-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-primary-brand);
  font-size: 20px;
  margin-bottom: var(--space-3);
}
.glynt-icon-tile--accent  { background: var(--color-pale-1); }
.glynt-icon-tile--brand   { background: var(--color-primary-brand); color: var(--color-white); }
.glynt-icon-tile--on-dark { background: rgba(246,248,245,0.12); color: var(--color-accent-2); }

/* Icons on dark surfaces pick up New Leaf */
.glynt-card--inverse .fa-sharp,
.glynt-surface-deep .fa-sharp,
.glynt-surface-gradient .fa-sharp { color: var(--color-accent-2); }

/* Divi's own icon modules stay on-brand if anyone uses them */
.et_pb_icon_wrap .et-pb-icon { color: var(--color-primary-brand) !important; }


/* ==========================================================================
   10 · FORMS — HubSpot embeds
   Set each form's style to "unstyled" in the HubSpot form editor first. If it
   ships HubSpot's own CSS these rules win on most properties, but the layout
   still carries HubSpot's default margins.
   ========================================================================== */
.hs-form,
.hbspt-form {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-base);
  color: var(--text-body);
}

.hs-form-field { margin-bottom: var(--space-4) !important; }

.hs-form-field > label,
.hs-form-field > label span {
  display: block;
  font-family: var(--font-body) !important;
  font-size: var(--text-caption) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: var(--space-2);
}
.hs-form-field > label .hs-form-required,
.hs-form-required {
  display: inline !important;
  color: var(--color-alert-red) !important;
  margin-left: 2px;
}

/* Text-entry fields. Deliberately an explicit type whitelist, not a
   :not([type=checkbox]):not([type=radio]) chain — that scores 0,3,0 and would
   outrank every state modifier below it (.invalid, .glynt-form-on-dark, the
   767px override) even with !important on both sides. Keep this at 0,2,0. */
.hs-input[type="text"],
.hs-input[type="email"],
.hs-input[type="tel"],
.hs-input[type="number"],
.hs-input[type="url"],
.hs-input[type="password"],
.hs-input[type="date"],
.hs-input[type="search"],
textarea.hs-input,
select.hs-input {
  width: 100% !important;
  box-sizing: border-box;
  font-family: var(--font-body) !important;
  font-size: var(--text-body-base) !important;
  line-height: 1.4;
  color: var(--text-body) !important;
  background: var(--color-white) !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.hs-input::placeholder { color: var(--color-neutral-300); }

.hs-input:focus,
textarea.hs-input:focus,
select.hs-input:focus {
  outline: none !important;
  border-color: var(--color-primary-brand) !important;
  box-shadow: 0 0 0 3px rgba(24,143,40,0.15) !important;
}

textarea.hs-input { min-height: 132px; resize: vertical; }

/* Checkbox / radio rows and consent copy */
.hs-form-booleancheckbox label,
.hs-form-checkbox label,
.hs-form-radio label {
  display: flex !important;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm) !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-body) !important;
}
.hs-form-booleancheckbox input,
.hs-form-checkbox input,
.hs-form-radio input { accent-color: var(--color-primary-brand); margin-top: 4px; }

.legal-consent-container,
.legal-consent-container p,
.hs-richtext {
  font-size: var(--text-caption) !important;
  line-height: 1.5;
  color: var(--text-muted) !important;
}
.legal-consent-container a, .hs-richtext a { color: var(--text-brand) !important; }

/* Errors — the reason the palette needed a real red */
.hs-error-msg,
.hs-error-msgs label,
.hs_error_rollup label {
  font-family: var(--font-body) !important;
  font-size: var(--text-caption) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-alert-red) !important;
  margin-top: var(--space-2);
  display: block;
}
.hs-error-msgs { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.hs-input.invalid,
.hs-input.error { border-color: var(--color-alert-red) !important; background: var(--tint-error-bg) !important; }
.hs-input.invalid:focus,
.hs-input.error:focus { border-color: var(--color-alert-red) !important; box-shadow: 0 0 0 3px rgba(209,52,32,0.15) !important; }

/* Submit */
.hs-button,
.hs-button.primary,
input[type="submit"].hs-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body) !important;
  font-size: var(--text-body-sm) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-cta) !important;
  text-transform: uppercase;
  padding: 14px 26px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  background: var(--action-primary-bg) !important;
  color: var(--action-primary-fg) !important;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.hs-button:hover,
.hs-button.primary:hover { background: var(--action-primary-bg-hover) !important; color: var(--action-primary-fg) !important; }
.hs-button:active { transform: translateY(1px); }
.hs-button[disabled] { opacity: 0.4 !important; pointer-events: none; }

/* Post-submit message */
.submitted-message {
  background: var(--tint-success-soft-bg);
  border: 1px solid var(--tint-success-soft-border);
  border-left: 5px solid var(--color-primary-brand);
  border-radius: var(--radius-md);
  padding: var(--space-4) !important;
  font-size: var(--text-body-base);
  color: var(--text-body);
}

/* Form on a deep-green section */
.glynt-form-on-dark .hs-form-field > label { color: rgba(246,248,245,0.75) !important; }
.glynt-form-on-dark .legal-consent-container,
.glynt-form-on-dark .legal-consent-container p,
.glynt-form-on-dark .hs-richtext { color: rgba(246,248,245,0.7) !important; }
.glynt-form-on-dark .hs-input[type],
.glynt-form-on-dark textarea.hs-input,
.glynt-form-on-dark select.hs-input { border-color: rgba(246,248,245,0.3) !important; }

/* Two-up field rows — grid, so whitespace and field order can't break it */
.glynt-form-2col .hs-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.glynt-form-2col .hs-fieldtype-textarea,
.glynt-form-2col .hs-fieldtype-booleancheckbox,
.glynt-form-2col .hs-fieldtype-checkbox,
.glynt-form-2col .hs-fieldtype-radio,
.glynt-form-2col .legal-consent-container,
.glynt-form-2col .hs_error_rollup,
.glynt-form-2col .hs_submit { grid-column: 1 / -1; }


/* ==========================================================================
   11 · LAYOUT — sections, rows, surfaces, rails

   GATED RESETS — read this before wondering why a reset "isn't working".
   The three per-property resets below (border, background, spacing) apply ONLY
   inside `.glynt-scope`. Put that class on a SECTION (or a ROW, if you are
   converting one row of a legacy page) and everything inside it gets the full
   treatment. Without it, the section is left exactly as Divi renders it.

   Why: the site was restored to a pre-migration backup whose pages were built
   the normal Divi way, with styling in the Design tab. Applying these resets
   globally strips that styling and makes every legacy page look broken. Gating
   them means legacy and rebuilt sections can coexist on the same site — and on
   the same page — so the rebuild can happen one section at a time.

   Everything else in this file is unconditional: type scale, buttons, cards,
   badges, tables, the header, the footer and the utilities all work anywhere.
   Only the three resets are gated, because only they take styling AWAY.

   Every pattern in the Library carries glynt-scope on its section. When the
   whole site is rebuilt, this gate can be removed and the resets made global
   again — that is a one-line change per block.
   ========================================================================== */
/* Plain, not !important. Divi 4 instance CSS is ordinary weight, so a single
   class placed later in this file already wins. */
.et_pb_row,
.et-db #et-boc .et-l .et_pb_row { max-width: var(--grid-max-width); }

.et_pb_section { padding: var(--pad-section) 0; }
.glynt-pad-section,
#page-container .glynt-pad-section { padding: var(--pad-section) 0 !important; }
.glynt-flush-section,
#page-container .glynt-flush-section { padding: 0 !important; }

/* Blanket border reset. Nothing in this system draws a border from the
   Builder, so borders are zeroed by default on layout elements and text
   modules. The exclusion list is the SHORT list of classes that genuinely draw
   one — not :not([class*="glynt-"]), which let a phantom through on any module
   carrying an unrelated class like glynt-lead.
   Escape hatch: .glynt-keep-border. */
.et_pb_section.glynt-scope:not(:is(.glynt-card, .glynt-border, .glynt-keep-border)),
.et_pb_row.glynt-scope:not(:is(.glynt-card, .glynt-border, .glynt-keep-border)),
.glynt-scope .et_pb_row:not(:is(.glynt-card, .glynt-border, .glynt-keep-border)),
.glynt-scope .et_pb_column:not(:is(.glynt-card, .glynt-card--inverse, .glynt-card--muted,
    .glynt-card--accent, .glynt-blurb--card, .glynt-stat, .glynt-border, .glynt-keep-border)),
.glynt-scope .et_pb_text:not(:is(.glynt-card, .glynt-card--inverse, .glynt-card--muted,
    .glynt-card--accent, .glynt-blurb--card, .glynt-stat, .glynt-border, .glynt-keep-border,
    .glynt-table, .glynt-faq)),
.glynt-scope .et_pb_heading:not(:is(.glynt-card, .glynt-border, .glynt-keep-border)) {
  border: 0 !important;
  border-radius: 0 !important;
}

.glynt-border,
body #page-container .glynt-border {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

/* Escape hatches for Divi 5 instance-data ghosts — values saved in a module's
   compiled CSS that no longer appear in any Builder field (desktop, tablet,
   phone or hover) and survive a cache purge. Add the class in Advanced →
   Attributes → CSS Class instead of hunting the field down. */
.glynt-no-border,
.et_pb_row.glynt-no-border,
.et_pb_section.glynt-no-border,
.et_pb_column.glynt-no-border,
body #page-container .glynt-no-border {
  border: 0 !important;
  border-radius: 0 !important;
}

.glynt-no-shadow,
.et_pb_row.glynt-no-shadow,
.et_pb_section.glynt-no-shadow,
.et_pb_column.glynt-no-shadow,
body #page-container .glynt-no-shadow { box-shadow: none !important; }

/* Kills stray negative margins left by the Divi 4 → 5 migration. */
.glynt-no-offset,
.et_pb_row.glynt-no-offset,
.et_pb_section.glynt-no-offset,
body #page-container .glynt-no-offset {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Measure utilities — cap the width of a heading or text block against its row
   rather than letting it run the full 1280px. Put on the Text/Heading module,
   or on a column to cap everything inside it. Percentages so the measure holds
   at any breakpoint; the floor stops them collapsing on phones. */
.glynt-measure,
.glynt-measure .et_pb_text_inner,
body #page-container .glynt-measure { max-width: 52%; min-width: 340px; }
.glynt-measure--narrow,
body #page-container .glynt-measure--narrow { max-width: 40%; min-width: 320px; }
.glynt-measure--wide,
body #page-container .glynt-measure--wide { max-width: 66%; min-width: 340px; }
@media (max-width: 980px) {
  .glynt-measure,
  .glynt-measure--narrow,
  .glynt-measure--wide,
  body #page-container .glynt-measure,
  body #page-container .glynt-measure--narrow,
  body #page-container .glynt-measure--wide { max-width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   BACKGROUND IMAGES
   Set the image itself in Divi — Content → Background → Image. Leave the size,
   position and repeat dropdowns alone; this class owns them, so every image
   section behaves the same. Then add a scrim so text stays legible: photos are
   never uniform enough for pale text to hold on their own.

   Compose three classes on the SECTION:
     glynt-bg-image  glynt-bg-scrim  glynt-on-dark

   glynt-on-dark is what turns headings, body copy and eyebrows pale — the same
   handling the deep-green surfaces get. The scrim only darkens the photo.
   -------------------------------------------------------------------------- */
.glynt-bg-image,
body #page-container .glynt-bg-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.glynt-bg-scrim { position: relative; isolation: isolate; }
.glynt-bg-scrim::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 52, 0, 0.72);
}
/* Divi's rows are static, so they'd sit under the scrim without this. */
.glynt-bg-scrim > .et_pb_row,
.glynt-bg-scrim > .et_pb_row_inner,
.glynt-bg-scrim > .et_pb_column { position: relative; z-index: 1; }

.glynt-bg-scrim--soft::before   { background: rgba(0, 52, 0, 0.52); }
.glynt-bg-scrim--strong::before { background: rgba(0, 52, 0, 0.86); }

/* Directional scrims — for a photo whose subject must stay visible on one side
   while text sits on the other. */
.glynt-bg-scrim--left::before {
  background: linear-gradient(90deg, rgba(0,52,0,0.92) 0%, rgba(0,52,0,0.72) 45%, rgba(0,52,0,0.15) 100%);
}
.glynt-bg-scrim--right::before {
  background: linear-gradient(270deg, rgba(0,52,0,0.92) 0%, rgba(0,52,0,0.72) 45%, rgba(0,52,0,0.15) 100%);
}
.glynt-bg-scrim--bottom::before {
  background: linear-gradient(0deg, rgba(0,52,0,0.92) 0%, rgba(0,52,0,0.55) 50%, rgba(0,52,0,0.1) 100%);
}

/* Phones crop background images hard — anchor to the top so a subject in the
   upper third survives. Add glynt-bg-image--center to override. */
@media (max-width: 767px) {
  .glynt-bg-image,
  body #page-container .glynt-bg-image { background-position: center top !important; }
  .glynt-bg-image--center,
  body #page-container .glynt-bg-image--center { background-position: center center !important; }
}

/* --------------------------------------------------------------------------
   PARALLAX
   Use this instead of Divi's Parallax Effect toggle. Divi's version moves the
   image onto an injected .et_parallax_bg child, which escapes the sizing rules
   above and doesn't compose with the scrim; it also has a standing bug where a
   desktop parallax image disappears on tablet and phone.

   Compose:  glynt-bg-image  glynt-bg-parallax  glynt-bg-scrim  glynt-on-dark

   background-attachment: fixed is deliberately dropped on touch devices — iOS
   Safari renders it as a viewport-sized jump rather than a parallax, and the
   effect is decorative, so a static image is the honest fallback. Rules for
   .et_parallax_bg are included so the scrim and sizing still hold if Divi's own
   toggle is on somewhere.
   -------------------------------------------------------------------------- */
.glynt-bg-parallax,
body #page-container .glynt-bg-parallax {
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
}
@media (hover: none), (pointer: coarse), (max-width: 980px) {
  .glynt-bg-parallax,
  body #page-container .glynt-bg-parallax { background-attachment: scroll !important; }
}

/* Divi's own parallax child, if it is enabled on a section anyway. */
.glynt-bg-image .et_parallax_bg,
.glynt-bg-scrim .et_parallax_bg {
  background-size: cover !important;
  background-position: center center !important;
  z-index: 0;
}
.glynt-bg-scrim .et_parallax_bg { position: absolute; inset: 0; }

/* Text and Heading modules never carry their own background here — surfaces
   live on sections, and cards opt in with a class. A Background group preset on
   the Text module puts white (or worse, a brand green) behind every text block:
   invisible on a white section, glaring on chalk or over a photo.
   Escape hatch: .glynt-keep-bg. */
.glynt-scope .et_pb_text:not(:is(.glynt-card, .glynt-card--inverse, .glynt-card--muted,
    .glynt-card--accent, .glynt-blurb--card, .glynt-stat, .glynt-keep-bg,
    [class*="glynt-surface"], [class*="glynt-bg-"])),
.glynt-scope .et_pb_heading:not(:is(.glynt-card, .glynt-keep-bg,
    [class*="glynt-surface"], [class*="glynt-bg-"])) {
  background-color: transparent !important;
  background-image: none !important;
}


/* --------------------------------------------------------------------------
   SPACING RESET — Text and Heading modules
   A Spacing group preset injects padding no field shows, and it stacks: two
   text blocks in a row open twice the gap nobody asked for. Vertical rhythm
   comes from the type scale's own margins, so module padding is zeroed and the
   bottom margin normalised to one token, then adjusted with:
     glynt-flush   0        two blocks that should read as one
     glynt-tight   8px      label above a value
     glynt-snug    16px     heading above its own body copy
     (default)     24px
     glynt-loose   48px     before a new idea
   Escape hatch for a module whose own padding matters: glynt-keep-space.
   -------------------------------------------------------------------------- */
.glynt-scope .et_pb_text:not(:is(.glynt-card, .glynt-card--inverse, .glynt-card--muted,
    .glynt-card--accent, .glynt-blurb--card, .glynt-stat, .glynt-faq,
    .glynt-keep-space, [class*="glynt-surface"], [class*="glynt-bg-"])),
.glynt-scope .et_pb_heading:not(:is(.glynt-card, .glynt-keep-space,
    [class*="glynt-surface"], [class*="glynt-bg-"])) {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-4) !important;
}

.glynt-flush, body #page-container .glynt-flush { margin-bottom: 0 !important; }
.glynt-tight, body #page-container .glynt-tight { margin-bottom: var(--space-2) !important; }
.glynt-snug,  body #page-container .glynt-snug  { margin-bottom: var(--space-3) !important; }
.glynt-loose, body #page-container .glynt-loose { margin-bottom: var(--space-6) !important; }

/* The last module in a column never adds trailing space — the row's padding
   already ends the section. */
.et_pb_column > .et_pb_module:last-child,
body #page-container .et_pb_column > .et_pb_module:last-child { margin-bottom: 0 !important; }

/* Surface utilities for sections and rows.

   The `#page-container` variants are load-bearing. Divi 5 emits its own
   `!important` declarations into an inline <style> block — we caught
   `background-image: initial !important` on `.et_pb_section_0`, which blanked
   this gradient. That selector is 0,1,0, identical to a single class, and the
   inline block loads after this stylesheet, so it won the tie. An ID prefix
   puts these at 1,1,0 and settles it permanently.

   Do not "simplify" these back to a single class. The bare-grey dark hero was
   this exact tie being lost. */
.glynt-surface-muted,
#page-container .glynt-surface-muted    { background-color: var(--surface-muted) !important; }
.glynt-surface-warm,
#page-container .glynt-surface-warm     { background-color: var(--surface-warm) !important; }
.glynt-surface-accent,
#page-container .glynt-surface-accent   { background-color: var(--color-pale-1) !important; }
.glynt-surface-deep,
#page-container .glynt-surface-deep     { background-color: var(--color-dark-3) !important; }
.glynt-surface-gradient,
#page-container .glynt-surface-gradient {
  background: linear-gradient(160deg, var(--color-dark-3) 0%, var(--color-dark-1) 100%) !important;
}

/* Multi-green rail — put on a section to top it with the brand stripe */
.glynt-rail { position: relative; }
.glynt-rail:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--color-dark-3) 0%, var(--color-dark-1) 20%, var(--color-primary-brand) 45%,
    var(--color-green-3) 70%, var(--color-accent-1) 88%, var(--color-accent-2) 100%);
  z-index: 2;
}

/* Opt-in heights for a hero that wants a tall box. Min-height only, so content
   still grows the section past it and nothing can clip. */
.glynt-tall,
#page-container .glynt-tall { min-height: 80vh; height: auto; }
.glynt-full,
#page-container .glynt-full { min-height: 100vh; height: auto; }

/* Hairline divider */
.glynt-divider { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

/* --- Split intro: sticky header left, feature grid right -------------------
   The "benefits" pattern — an eyebrow/headline/lead block on the left, and a
   2-up set of icon features on the right that wraps (2 over 1 with three
   items, 2 over 2 with four).

   Build it with ordinary Divi modules, no Code module:
     Row (2 columns, any Divi layout)   ← glynt-split-intro
       Column 1  ← the eyebrow / H2 / lead text modules
       Column 2  ← glynt-feature-grid, holding 3 Blurb modules
   The row class owns the two tracks, so Divi's own column-width setting is
   irrelevant — pick any 2-col layout in the Builder and the class overrides it.
   -------------------------------------------------------------------------- */
.glynt-split-intro,
.et-db #et-boc .et-l .glynt-split-intro,
body #page-container .glynt-split-intro {
  --split-ratio: 5fr 7fr;
  display: grid !important;
  grid-template-columns: var(--split-ratio);
  gap: var(--space-8, 64px);
  align-items: start !important;
}
/* Ratio modifiers — the left column is the header, so it is usually narrower. */
.glynt-split-intro--even,   .et-db #et-boc .et-l .glynt-split-intro--even,   body #page-container .glynt-split-intro--even   { --split-ratio: 1fr 1fr; }
.glynt-split-intro--narrow, .et-db #et-boc .et-l .glynt-split-intro--narrow, body #page-container .glynt-split-intro--narrow { --split-ratio: 4fr 8fr; }
.glynt-split-intro--wide,   .et-db #et-boc .et-l .glynt-split-intro--wide,   body #page-container .glynt-split-intro--wide   { --split-ratio: 6fr 6fr; }
/* Header on the right instead — swaps the visual order, leaves DOM order alone
   so the headline still reads first to a screen reader. */
.glynt-split-intro--flip > .et_pb_column:first-child { order: 2; }
.glynt-split-intro--flip > .et_pb_column:last-child  { order: 1; }

/* Divi sets width and margin inline on every column; the grid owns both now.
   These resets apply to EVERY column including the feature one. */
.glynt-split-intro > .et_pb_column,
.et-db #et-boc .et-l .glynt-split-intro > .et_pb_column,
body #page-container .glynt-split-intro > .et_pb_column {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}
/* The display switch is separate and skips .glynt-feature-grid: at (1,2,1)
   this rule outranks the feature-grid block's (1,1,1), and since both declare
   display:!important it would win and collapse the grid into a flex column. */
.glynt-split-intro > .et_pb_column:not(.glynt-feature-grid),
.et-db #et-boc .et-l .glynt-split-intro > .et_pb_column:not(.glynt-feature-grid),
body #page-container .glynt-split-intro > .et_pb_column:not(.glynt-feature-grid) {
  display: flex !important;
  flex-direction: column;
}
/* Long feature lists: the header follows the scroll instead of stranding a
   wall of white space beside item four. Add to the ROW. */
.glynt-split-intro--sticky > .et_pb_column:first-child,
.et-db #et-boc .et-l .glynt-split-intro--sticky > .et_pb_column:first-child,
body #page-container .glynt-split-intro--sticky > .et_pb_column:first-child {
  position: sticky !important;
  top: var(--sticky-offset, 120px);
  align-self: start !important;
  z-index: 2;
}
/* Sticky dies inside any overflow:hidden ancestor. Divi sets it on rows and
   sections when rounded corners, animations or the Overflow option are used.
   Desktop only: sticky is switched off at 980px and below, and these overrides
   hid Divi's mobile hamburger dropdown on pages using the modifier. */
@media (min-width: 981px) {
.glynt-split-intro--sticky,
body #page-container .glynt-split-intro--sticky,
.et_pb_section:has(> .glynt-split-intro--sticky),
body #page-container .et_pb_section:has(> .glynt-split-intro--sticky) {
  overflow: visible !important;
}
/* Divi hides overflow on #page-container (and many sites on html/body) to
   kill sideways scroll — that also kills sticky. On pages that use the
   modifier, swap to clip: same visual result, but not a scroll container. */
html:has(.glynt-split-intro--sticky),
body:has(.glynt-split-intro--sticky),
body:has(.glynt-split-intro--sticky) #page-container,
body:has(.glynt-split-intro--sticky) #et-main-area,
body:has(.glynt-split-intro--sticky) #main-content,
body:has(.glynt-split-intro--sticky) .et-l--body,
body:has(.glynt-split-intro--sticky) .et_builder_inner_content,
body:has(.glynt-split-intro--sticky) .entry-content {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
}

/* --- Feature grid: grids the MODULES inside one column ---------------------
   Everything else in the system grids columns; this grids a single column's
   modules, which is what lets three Blurbs sit 2-over-1 inside the right half
   of a two-column row without nested rows or a Code module. Column count via
   --2 (default) / --3 / --1. */
.glynt-feature-grid,
.et-db #et-boc .et-l .glynt-feature-grid,
body #page-container .glynt-feature-grid,
body #page-container .glynt-split-intro > .et_pb_column.glynt-feature-grid {
  --feature-cols: 2;
  display: grid !important;
  grid-template-columns: repeat(var(--feature-cols), minmax(0, 1fr));
  gap: var(--space-6, 48px) var(--space-5, 40px);
  align-items: start;
  width: 100%;
}
.glynt-feature-grid--1, .et-db #et-boc .et-l .glynt-feature-grid--1, body #page-container .glynt-feature-grid--1, body #page-container .glynt-split-intro > .et_pb_column.glynt-feature-grid--1 { --feature-cols: 1; }
.glynt-feature-grid--3, .et-db #et-boc .et-l .glynt-feature-grid--3, body #page-container .glynt-feature-grid--3, body #page-container .glynt-split-intro > .et_pb_column.glynt-feature-grid--3 { --feature-cols: 3; }
.glynt-feature-grid--tight, .et-db #et-boc .et-l .glynt-feature-grid--tight, body #page-container .glynt-feature-grid--tight, body #page-container .glynt-split-intro > .et_pb_column.glynt-feature-grid--tight { gap: var(--space-4, 32px) var(--space-4, 32px); }
/* Divi's 30px module margin would stack on top of the grid gap. */
.glynt-feature-grid > .et_pb_module,
body #page-container .glynt-feature-grid > .et_pb_module {
  margin-bottom: 0 !important;
  min-width: 0;
}
/* A feature that should run the full width of the grid — a closing note, or
   the odd third item when you want it wide rather than half. */
.glynt-feature-grid > .glynt-feature--full,
body #page-container .glynt-feature-grid > .glynt-feature--full { grid-column: 1 / -1; }

/* Blurb inside a feature grid: icon on its own line above the title, flush
   left, no card chrome. Divi's default is icon-left with centred text. */
.glynt-feature-grid .et_pb_blurb,
body #page-container .glynt-feature-grid .et_pb_blurb { text-align: left !important; }
.glynt-feature-grid .et_pb_blurb .et_pb_blurb_content,
body #page-container .glynt-feature-grid .et_pb_blurb .et_pb_blurb_content {
  display: block !important;
  max-width: none !important;
  text-align: left !important;
}
.glynt-feature-grid .et_pb_blurb .et_pb_main_blurb_image,
body #page-container .glynt-feature-grid .et_pb_blurb .et_pb_main_blurb_image {
  display: block !important;
  width: auto !important;
  margin: 0 0 var(--space-3) 0 !important;
  text-align: left !important;
  vertical-align: top;
}
.glynt-feature-grid .et_pb_blurb .et_pb_main_blurb_image .et-pb-icon,
body #page-container .glynt-feature-grid .et_pb_blurb .et_pb_main_blurb_image .et-pb-icon {
  font-size: var(--feature-icon-size, 34px) !important;
  color: var(--color-primary-brand) !important;
  line-height: 1;
}
.glynt-feature-grid .et_pb_blurb_container,
body #page-container .glynt-feature-grid .et_pb_blurb_container {
  padding: 0 !important;
  text-align: left !important;
}
.glynt-feature-grid .et_pb_module_header,
.glynt-feature-grid .et_pb_blurb h1, .glynt-feature-grid .et_pb_blurb h2,
.glynt-feature-grid .et_pb_blurb h3, .glynt-feature-grid .et_pb_blurb h4,
body #page-container .glynt-feature-grid .et_pb_module_header {
  padding-bottom: var(--space-2) !important;
  margin-top: 0 !important;
  text-wrap: pretty;
}
/* A Font Awesome <i> dropped in a Text module works the same way. */
.glynt-feature-grid .glynt-icon,
body #page-container .glynt-feature-grid .glynt-icon {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--feature-icon-size, 34px);
}
/* Deep-green section: icons go New Leaf like everything else on dark. */
:is(.glynt-section--dark, .glynt-on-dark, .glynt-surface-deep, .glynt-surface-gradient)
.glynt-feature-grid .et_pb_main_blurb_image .et-pb-icon {
  color: var(--color-accent-2) !important;
}

@media (max-width: 980px) {
  /* Header stacks above the features; sticky is meaningless once stacked. */
  /* Must match the base block's .et-db #et-boc .et-l selector or it loses. */
  .glynt-split-intro,
  .et-db #et-boc .et-l .glynt-split-intro,
  body #page-container .glynt-split-intro { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-6, 48px) !important; }
  .glynt-split-intro--sticky > .et_pb_column:first-child,
  .et-db #et-boc .et-l .glynt-split-intro--sticky > .et_pb_column:first-child,
  body #page-container .glynt-split-intro--sticky > .et_pb_column:first-child { position: static !important; }
  .glynt-split-intro--flip > .et_pb_column:first-child,
  .glynt-split-intro--flip > .et_pb_column:last-child { order: 0; }
  .glynt-feature-grid--3,
  .et-db #et-boc .et-l .glynt-feature-grid--3,
  body #page-container .glynt-feature-grid--3 { --feature-cols: 2 !important; }
}
@media (max-width: 767px) {
  .glynt-feature-grid,
  .et-db #et-boc .et-l .glynt-feature-grid,
  body #page-container .glynt-feature-grid,
  body #page-container .glynt-split-intro > .et_pb_column.glynt-feature-grid { --feature-cols: 1 !important; gap: var(--space-5, 40px) !important; }
}

/* Card grid inside a Divi row */
.glynt-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.glynt-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gutter); }
.glynt-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
.glynt-grid-5 { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gutter); }

/* Equal heights: stretch every track, and let tile content sit top-aligned. */
/* A grid class on a ROW whose only child is one column is the easy mistake:
   the column becomes a single track and the modules stack inside it at 1/N
   width. Pass the grid through to the modules instead, so putting the class on
   either the row or the column gives the same result. */
.glynt-grid-2 > .et_pb_column:only-child,
.glynt-grid-3 > .et_pb_column:only-child,
.glynt-grid-4 > .et_pb_column:only-child,
.glynt-grid-5 > .et_pb_column:only-child,
body #page-container .glynt-grid-4 > .et_pb_column:only-child {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: inherit !important;
  gap: inherit !important;
  align-items: stretch !important;
}

.glynt-grid-2,
.glynt-grid-3,
.glynt-grid-4,
.glynt-grid-5 { align-items: stretch !important; }

/* Grid rows override Divi's column widths, margins and dividers wholesale —
   these are what make duplicated columns behave. */
.glynt-grid-2 > .et_pb_column,
.glynt-grid-3 > .et_pb_column,
.glynt-grid-4 > .et_pb_column,
.glynt-grid-5 > .et_pb_column {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  border: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
}
.glynt-grid-2 > .et_pb_column.glynt-card,
.glynt-grid-3 > .et_pb_column.glynt-card,
.glynt-grid-4 > .et_pb_column.glynt-card,
.glynt-grid-5 > .et_pb_column.glynt-card {
  border: 1px solid var(--color-border) !important;
}


/* ==========================================================================
   11b · FOOTER NORMALIZE
   Divi's global footer lives in a Theme Builder template, so stray shadows
   and backgrounds set there never show up in the page's Builder. This scopes
   a reset to the footer only — nothing here leaks into page content.
   Add .glynt-footer-keep to any footer element that should keep its own
   background or shadow.
   ========================================================================== */
#main-footer,
.et-l--footer,
.glynt-footer,
.glynt-footer .et_pb_row,
.glynt-footer .et_pb_row_inner,
.glynt-footer .et_pb_column,
.glynt-footer .et_pb_column_inner,
.glynt-footer .et_pb_module:not(.et_pb_button):not(.glynt-footer-keep),
.glynt-footer .et_pb_text,
.glynt-footer .et_pb_image,
.glynt-footer .et_pb_code,
.glynt-footer .et_pb_social_media_follow,
#main-content .glynt-footer,
#main-content .glynt-footer .et_pb_row,
#main-content .glynt-footer .et_pb_row_inner,
#main-content .glynt-footer .et_pb_column,
#main-content .glynt-footer .et_pb_column_inner,
#main-content .glynt-footer .et_pb_module:not(.et_pb_button):not(.glynt-footer-keep),
#main-footer .et_pb_section,
#main-footer .et_pb_row,
#main-footer .et_pb_column,
.et-l--footer .et_pb_section,
.et-l--footer .et_pb_row,
.et-l--footer .et_pb_column {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* The footer's own surface — set it once, here. */
#main-footer,
.et-l--footer,
#main-content .glynt-footer,
.glynt-footer { background-color: var(--color-dark-3) !important; }

/* Logos and images in the footer never carry elevation. */
#main-footer img,
#main-footer .et_pb_image,
#main-footer .et_pb_image_wrap,
.glynt-footer img,
.glynt-footer .et_pb_image,
.glynt-footer .et_pb_image_wrap,
.et-l--footer img,
.et-l--footer .et_pb_image,
.et-l--footer .et_pb_image_wrap,
.glynt-footer-logo,
.glynt-footer-logo img {
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Footer logo sits at three-quarter scale. */
.glynt-footer .glynt-footer-logo img,
#main-content .glynt-footer .glynt-footer-logo img {
  width: 75% !important;
  max-width: 75% !important;
  height: auto !important;
}

/* Footer links — warm off-white, outranking the global link rule and the
   chrome `inherit` rule above. */
#main-footer a,
#main-footer a:visited,
#main-footer .et_pb_widget a,
#main-footer #footer-widgets a,
#main-footer #footer-widgets a:visited,
#main-footer .et_pb_text a,
.et-l--footer a,
.et-l--footer a:visited,
.et-l--footer .et_pb_text a,
.et-db #et-boc .et-l .et-l--footer a:not(.et_pb_button):not(.glynt-btn),
.et-db #et-boc .et-l .et-l--footer a:not(.et_pb_button):not(.glynt-btn):visited,
.et-db #et-boc .et-l #main-footer a:not(.et_pb_button):not(.glynt-btn),
.et-db #et-boc .et-l #main-footer a:not(.et_pb_button):not(.glynt-btn):visited {
  color: var(--color-neutral-100-warm) !important;
  text-decoration: none;
}
#main-footer a:hover,
#main-footer #footer-widgets a:hover,
#main-footer .et_pb_text a:hover,
.et-l--footer a:hover,
.et-l--footer .et_pb_text a:hover,
.et-db #et-boc .et-l .et-l--footer a:not(.et_pb_button):not(.glynt-btn):hover,
.et-db #et-boc .et-l #main-footer a:not(.et_pb_button):not(.glynt-btn):hover {
  color: var(--color-accent-2) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Deterministic footer scope — add the CSS Class `glynt-footer` to the footer
   SECTION in the Theme Builder template. Works regardless of what wrapper
   Divi emits, and is specific enough to beat the global link rule (1,5,1). */
.glynt-footer a,
.glynt-footer a:visited,
#main-content .glynt-footer a:not(.et_pb_button):not(.glynt-btn),
#main-content .glynt-footer a:not(.et_pb_button):not(.glynt-btn):visited,
#page-container .glynt-footer a:not(.et_pb_button):not(.glynt-btn),
#page-container .glynt-footer a:not(.et_pb_button):not(.glynt-btn):visited,
.et-db #et-boc .et-l .glynt-footer a:not(.et_pb_button):not(.glynt-btn),
.et-db #et-boc .et-l .glynt-footer a:not(.et_pb_button):not(.glynt-btn):visited,
body .glynt-footer a:not(.et_pb_button):not(.glynt-btn),
body .glynt-footer a:not(.et_pb_button):not(.glynt-btn):visited {
  color: var(--color-neutral-100-warm) !important;
  text-decoration: none;
}
.glynt-footer a:hover,
#main-content .glynt-footer a:not(.et_pb_button):not(.glynt-btn):hover,
#page-container .glynt-footer a:not(.et_pb_button):not(.glynt-btn):hover,
.et-db #et-boc .et-l .glynt-footer a:not(.et_pb_button):not(.glynt-btn):hover,
body .glynt-footer a:not(.et_pb_button):not(.glynt-btn):hover {
  color: var(--color-accent-2) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer columns size themselves.
   Divi's column widths come from per-page classes (.et_pb_column_1_5 and
   friends), which the global footer inherits from whatever page it renders
   on — so the same footer collapses on one page and not another. This lays
   footer rows out with flex so page CSS can't reach them.
   Add .glynt-footer-freeform to a row that needs Divi's own widths. */
.glynt-footer .et_pb_row:not(.glynt-footer-freeform),
#main-content .glynt-footer .et_pb_row:not(.glynt-footer-freeform) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--grid-gutter);
  width: 100% !important;
  max-width: var(--layout-max, 1280px) !important;
}
.glynt-footer .et_pb_row:not(.glynt-footer-freeform) > .et_pb_column,
#main-content .glynt-footer .et_pb_row:not(.glynt-footer-freeform) > .et_pb_column {
  flex: 1 1 0 !important;
  min-width: 150px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

@media (max-width: 980px) {
  .glynt-footer .et_pb_row:not(.glynt-footer-freeform) > .et_pb_column {
    flex: 1 1 40% !important;
  }
}
@media (max-width: 767px) {
  .glynt-footer .et_pb_row:not(.glynt-footer-freeform) > .et_pb_column {
    flex: 1 1 100% !important;
  }
}

/* Footer modules fill their column. Divi 5 sizing presets can cap module
   width (we hit a preset pinning the logo/phone/CTA column to ~90px), and
   the preset is shared across sections so it can't be cleared locally. */
.glynt-footer .et_pb_row .et_pb_module:not(.et_pb_button),
#main-content .glynt-footer .et_pb_row .et_pb_module:not(.et_pb_button) {
  width: 100% !important;
  max-width: 100% !important;
}
.glynt-footer .et_pb_button_module_wrapper,
#main-content .glynt-footer .et_pb_button_module_wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
.glynt-footer .et_pb_button,
#main-content .glynt-footer .et_pb_button {
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap;
}

/* All footer columns start at the same baseline — the first module in each
   column loses its top margin so per-column spacing can't stagger them. */
.glynt-footer .et_pb_row > .et_pb_column > .et_pb_module:first-child,
.glynt-footer .et_pb_row > .et_pb_column > .et_pb_module:first-of-type,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child > .et_pb_text_inner,
#main-content .glynt-footer .et_pb_row > .et_pb_column > .et_pb_module:first-child,
#main-content .glynt-footer .et_pb_row > .et_pb_column > .et_pb_module:first-of-type,
#main-content .glynt-footer .et_pb_row > .et_pb_column > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.glynt-footer .et_pb_row > .et_pb_column > *:first-child h1,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child h2,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child h3,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child h4,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child h5,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child h6,
.glynt-footer .et_pb_row > .et_pb_column > *:first-child p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.glynt-footer .et_pb_row > .et_pb_column,
#main-content .glynt-footer .et_pb_row > .et_pb_column {
  padding-top: 0 !important;
}

/* Footer is immune to page-ordinal CSS.
   Divi numbers module classes per page (.et_pb_text_9, .et_pb_image_3 …), so
   a global footer inherits whatever the host page set on the same ordinal —
   which is why the copyright row centres on one page and the logo resizes on
   another. Alignment and image sizing are pinned here.
   Escape hatch: .glynt-footer-keep on the element. */
.glynt-footer .et_pb_row .et_pb_module:not(.glynt-footer-keep),
.glynt-footer .et_pb_row .et_pb_text:not(.glynt-footer-keep),
.glynt-footer .et_pb_text_inner,
#main-content .glynt-footer .et_pb_row .et_pb_module:not(.glynt-footer-keep),
#main-content .glynt-footer .et_pb_text_inner {
  text-align: left !important;
}
.glynt-footer .et_pb_image:not(.glynt-footer-keep),
.glynt-footer .et_pb_image_wrap,
#main-content .glynt-footer .et_pb_image:not(.glynt-footer-keep) {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.glynt-footer .et_pb_image:not(.glynt-footer-logo):not(.glynt-footer-keep) img,
#main-content .glynt-footer .et_pb_image:not(.glynt-footer-logo):not(.glynt-footer-keep) img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.glynt-footer .et_pb_text_inner h1,
.glynt-footer .et_pb_text_inner h2,
.glynt-footer .et_pb_text_inner h3,
.glynt-footer .et_pb_text_inner h4,
.glynt-footer .et_pb_text_inner h5,
.glynt-footer .et_pb_text_inner h6,
.glynt-footer .et_pb_text_inner p,
.glynt-footer .et_pb_text_inner ul,
.glynt-footer .et_pb_text_inner li,
#main-content .glynt-footer .et_pb_text_inner h1,
#main-content .glynt-footer .et_pb_text_inner h2,
#main-content .glynt-footer .et_pb_text_inner h3,
#main-content .glynt-footer .et_pb_text_inner h4,
#main-content .glynt-footer .et_pb_text_inner h5,
#main-content .glynt-footer .et_pb_text_inner h6,
#main-content .glynt-footer .et_pb_text_inner p,
#main-content .glynt-footer .et_pb_text_inner li {
  text-align: left !important;
}

/* Geometry lock — the footer is never flex-shrunk, floated, right-pushed or
   narrowed by rules meant for other chrome. Added Aug 2026 after header nav
   rules reached the footer via a stray CSS class. */
#main-footer,
.et-l--footer,
.glynt-footer,
#main-content .glynt-footer {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  position: relative !important;
  display: block !important;
}
.glynt-footer > .et_pb_row,
#main-footer > .et_pb_row,
.et-l--footer .et_pb_section > .et_pb_row {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}
.glynt-footer .et_pb_column,
#main-footer .et_pb_column,
.et-l--footer .et_pb_column {
  flex: 1 1 auto;
  justify-content: flex-start;
}

/* Opt-out — restores whatever the Builder set on that one element. */
#main-footer .glynt-footer-keep,
.et-l--footer .glynt-footer-keep {
  background-color: revert !important;
  background-image: revert !important;
  box-shadow: revert !important;
  border: revert !important;
}



/* ==========================================================================
   11b-2 · FOOTER TYPE + COLOR LOCK
   Why this exists: §11b only ever set LINK colour. Headings and plain module
   text in the footer fell through to the global dark heading/body colour
   (§2) and disappeared against the Woodland surface. Divi's own per-module
   Design → Text colour is emitted without !important, so it also loses to
   nothing — there was simply no footer text rule to win.

   This block owns every text colour and family inside the footer. Because it
   is !important across four wrapper contexts (front end, page-embedded,
   Theme Builder editor, Divi 5 leftovers), the Builder's per-module Text
   Colour will NOT override it — that is deliberate. To colour one element
   differently, add the CSS Class .glynt-footer-keep-type to that MODULE and
   set the colour in the Builder as usual.
   ========================================================================== */

/* Everything that renders text in the footer — off-white on Woodland. */
:is(#main-footer, .et-l--footer, .glynt-footer,
    #main-content .glynt-footer, #page-container .glynt-footer,
    .et-db #et-boc .et-l .et-l--footer, .et-db #et-boc .et-l .glynt-footer)
:is(h1, h2, h3, h4, h5, p, li, span, strong, em, td, th, label, blockquote, figcaption,
    .et_pb_text_inner, .et_pb_blurb_container, .et_pb_blurb_description,
    .et_pb_blurb_description p, .et_pb_module_header, .et_pb_toggle_content,
    .et_pb_widget, .et_pb_widget li, .et_pb_menu__link, .et_pb_menu .et-menu > li > a,
    .et_pb_social_media_follow li a.icon):not(.glynt-footer-keep-type):not(.glynt-footer-keep-type *):not(.et_pb_button) {
  color: var(--color-neutral-100-warm) !important;
}

/* Families: Sora for headings and numbers, Urbanist for everything else. */
:is(#main-footer, .et-l--footer, .glynt-footer,
    #main-content .glynt-footer, .et-db #et-boc .et-l .glynt-footer)
:is(p, li, span, td, th, label, .et_pb_text_inner, .et_pb_blurb_description,
    .et_pb_menu__link, .et_pb_widget) {
  font-family: var(--font-body) !important;
}
:is(#main-footer, .et-l--footer, .glynt-footer,
    #main-content .glynt-footer, .et-db #et-boc .et-l .glynt-footer)
:is(h1, h2, h3, h4, h5, h6, .et_pb_module_header) {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase;
  margin-bottom: var(--space-2) !important;
}

/* Column headings — the eyebrow row above each link list. h4/h5/h6 in a
   footer column read as one, so they share the size; .glynt-footer-eyebrow
   is there for when the heading has to be a <p> or a <span>. */
:is(.glynt-footer, #main-footer, .et-l--footer, #main-content .glynt-footer,
    .et-db #et-boc .et-l .glynt-footer)
:is(h4, h5, h6, .glynt-footer-eyebrow, .glynt-footer-eyebrow p),
.glynt-footer-eyebrow {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--color-neutral-100-warm) !important;
}

/* Link lists — body size, dimmed one step so the headings still lead, Grass
   on hover. Sits after §11b's link rules so it wins on source order. */
:is(.glynt-footer, #main-footer, .et-l--footer, #main-content .glynt-footer,
    .et-db #et-boc .et-l .glynt-footer)
:is(p, li, span, .et_pb_text_inner) a:not(.et_pb_button):not(.glynt-btn),
:is(.glynt-footer, #main-footer, .et-l--footer, #main-content .glynt-footer)
.et_pb_widget a, 
:is(.glynt-footer, #main-footer, .et-l--footer, #main-content .glynt-footer)
.et_pb_menu__link {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: var(--weight-regular) !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(249, 248, 243, 0.82) !important;
  text-decoration: none !important;
}
:is(.glynt-footer, #main-footer, .et-l--footer, #main-content .glynt-footer,
    .et-db #et-boc .et-l .glynt-footer)
:is(p, li, span, .et_pb_text_inner) a:not(.et_pb_button):not(.glynt-btn):hover {
  color: var(--color-accent-2) !important;
  text-decoration: none !important;
}

/* Legal / copyright rail — smaller, dimmer, but never invisible. */
.glynt-footer-legal,
.glynt-footer .glynt-footer-legal .et_pb_text_inner,
.glynt-footer .glynt-footer-legal p,
#main-footer .glynt-footer-legal p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(249, 248, 243, 0.7) !important;
}
.glynt-footer .glynt-footer-legal a:not(.et_pb_button),
#main-footer .glynt-footer-legal a:not(.et_pb_button) {
  color: rgba(249, 248, 243, 0.7) !important;
  font-size: 13px !important;
}
.glynt-footer .glynt-footer-legal a:not(.et_pb_button):hover {
  color: var(--color-accent-2) !important;
}

/* --- H6 = New Leaf ------------------------------------------------------
   Footer h6 is the accent heading (New Leaf on Woodland — 8.8:1, cleared in
   the guide). h6 is deliberately REMOVED from the blanket footer-text rule
   at the top of 11b-2 rather than fought with :not() chains.

   Why the chain never worked: that blanket rule's second :is() list contains
   .et_pb_social_media_follow li a.icon, which alone is worth (0,2,2). With
   #main-footer in the first list and three :not()s it totals (1,8,2) — no
   amount of :not() padding on a plain h6 selector reaches that. Dropping h6
   from the list is the only clean win.

   Escape hatch: .glynt-heading-free on the h6 (inline) or on the module. */
:is(.glynt-footer, #main-footer, .et-l--footer, footer,
    #main-content .glynt-footer, .et-db #et-boc .et-l .glynt-footer)
h6:not(.glynt-heading-free):not(.glynt-footer-keep-type) {
  color: #98E110 !important;
  color: var(--color-accent-2, #98E110) !important;
}

/* Escape hatch — inline or on the module wrapper. */
:is(.glynt-footer, #main-footer, .et-l--footer, footer,
    #main-content .glynt-footer, .et-db #et-boc .et-l .glynt-footer)
:is(.glynt-heading-free, .glynt-heading-free *,
    .glynt-footer-keep-type, .glynt-footer-keep-type *) {
  color: inherit;
  font-family: inherit;
}


/* Escape hatch — inline or on the module wrapper. Colour set in the Builder,
   or with your own inline style, now lands. */
:is(.glynt-footer, #main-footer, .et-l--footer, #main-content .glynt-footer,
    .et-db #et-boc .et-l .glynt-footer)
:is(.glynt-heading-free, .glynt-heading-free *,
    .glynt-footer-keep-type, .glynt-footer-keep-type *) {
  color: inherit;
  font-family: inherit;
}

/* Social icons and the inline phone icon are text-coloured too. */
.glynt-footer .et_pb_social_media_follow li a.icon::before,
#main-footer .et_pb_social_media_follow li a.icon::before,
.glynt-footer .fa, .glynt-footer .fas, .glynt-footer i[class*="fa-"] {
  color: var(--color-neutral-100-warm) !important;
}

/* CONTACT US keeps its Grass fill and Woodland label — buttons are excluded
   from every rule above, this just states it so a future edit can't drift. */
.glynt-footer .et_pb_button,
#main-footer .et_pb_button,
.et-l--footer .et_pb_button {
  color: var(--color-dark-3) !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   11b-3 · FOOTER DIRECTORY — layout 1c (ruled directory + contact panel)
   Theme Builder footer: SECTION .glynt-footer → ROW (one column) → ONE Code
   module holding snippets/footer-directory.txt. Set section + row padding
   to 0; the component carries its own.
   Every selector leads with the doubled ID #glynt-fdir#glynt-fdir (2,0,0)
   so it outranks the §11b-2 footer locks — their :is() lists include
   ".et-db #et-boc .et-l .glynt-footer", which scores (1,6,1) on every rule.
   Links: 15px / 1.3 so wrapped titles hold together; 10px between items
   (14px for the long popular-link titles) so separate links read apart.
   ========================================================================== */
#glynt-fdir#glynt-fdir {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto !important;
  padding: var(--space-8, 64px) clamp(20px, 5vw, 80px) 0;
  font-family: var(--font-body) !important;
  color: var(--color-neutral-100-warm) !important;
}
#glynt-fdir#glynt-fdir .glynt-fdir__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8, 64px);
  align-items: start;
}
#glynt-fdir#glynt-fdir .glynt-fdir__dir {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}
#glynt-fdir#glynt-fdir .glynt-fdir__col { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
#glynt-fdir#glynt-fdir .glynt-fdir__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  border-top: 1px solid var(--color-primary-brand);
  padding-top: 14px;
}
#glynt-fdir#glynt-fdir .glynt-fdir__head {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: var(--weight-semibold, 600) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-accent-2) !important;
  margin: 0 !important;
  padding: 0 !important;
}
#glynt-fdir#glynt-fdir .glynt-fdir__links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#glynt-fdir#glynt-fdir .glynt-fdir__links--long { gap: 14px; }
#glynt-fdir#glynt-fdir .glynt-fdir__links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  text-wrap: pretty;
}
#glynt-fdir#glynt-fdir .glynt-fdir__links li::before,
#glynt-fdir#glynt-fdir .glynt-fdir__links li::marker { content: none !important; display: none !important; }
#glynt-fdir#glynt-fdir a:not(.glynt-fdir__cta) {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: var(--weight-regular, 400) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--color-neutral-100-warm) !important;
  transition: color 150ms ease;
}
#glynt-fdir#glynt-fdir a:not(.glynt-fdir__cta):hover,
#glynt-fdir#glynt-fdir a:not(.glynt-fdir__cta):focus-visible { color: var(--color-accent-2) !important; }
#glynt-fdir#glynt-fdir .glynt-fdir__panel {
  background: var(--color-dark-1) !important;
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 24px);
}
#glynt-fdir#glynt-fdir .glynt-fdir__logo {
  display: block !important;
  width: 132px !important;
  max-width: 132px !important;
  height: auto !important;
  box-shadow: none !important;
}
#glynt-fdir#glynt-fdir .glynt-fdir__tagline {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: var(--weight-semibold, 600) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--color-neutral-100-warm) !important;
  margin: 0 !important;
  padding: 0 !important;
}
#glynt-fdir#glynt-fdir .glynt-fdir__cta {
  display: block !important;
  text-align: center !important;
  background: var(--color-accent-1) !important;
  color: var(--color-dark-3) !important;
  border: 0 !important;
  border-radius: var(--radius-md, 8px) !important;
  padding: 14px 22px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: var(--weight-semibold, 600) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}
#glynt-fdir#glynt-fdir .glynt-fdir__cta:hover { background: #47C209 !important; color: var(--color-dark-3) !important; }
#glynt-fdir#glynt-fdir .glynt-fdir__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--color-dark-2);
  padding-top: 20px;
}
#glynt-fdir#glynt-fdir .glynt-fdir__phone { display: inline-flex !important; align-items: center; gap: 8px; }
#glynt-fdir#glynt-fdir .glynt-fdir__phone i {
  font-size: 13px !important;
  color: var(--color-accent-2) !important;
  /* The §11b-2 keep-type escape sets font-family: inherit on every child,
     which swaps the icon font for Urbanist — restore the FA stack. */
  font-family: "Font Awesome 7 Sharp", "Font Awesome 6 Sharp", "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 7 Free", "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1 !important;
}
#glynt-fdir#glynt-fdir .glynt-fdir__social { display: flex; gap: 20px; }
#glynt-fdir#glynt-fdir .glynt-fdir__legal {
  margin-top: 56px;
  border-top: 1px solid var(--color-dark-2);
  padding: var(--space-5, 24px) 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}
#glynt-fdir#glynt-fdir .glynt-fdir__legal,
#glynt-fdir#glynt-fdir .glynt-fdir__legal span,
#glynt-fdir#glynt-fdir .glynt-fdir__legal a {
  font-size: 13px !important;
  line-height: 1.3 !important;
}
#glynt-fdir#glynt-fdir .glynt-fdir__legal span { color: var(--color-neutral-100-warm) !important; }
#glynt-fdir#glynt-fdir .glynt-fdir__legal .glynt-fdir__tag { color: var(--color-accent-2) !important; }
#glynt-fdir#glynt-fdir .glynt-fdir__legal-left,
#glynt-fdir#glynt-fdir .glynt-fdir__legal-right { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 980px) {
  #glynt-fdir#glynt-fdir { padding-top: var(--space-7, 48px); padding-left: 32px; padding-right: 32px; }
  #glynt-fdir#glynt-fdir .glynt-fdir__main { grid-template-columns: minmax(0, 1fr); gap: var(--space-7, 48px); }
  #glynt-fdir#glynt-fdir .glynt-fdir__dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #glynt-fdir#glynt-fdir .glynt-fdir__legal { margin-top: var(--space-7, 48px); }
}
@media (max-width: 767px) {
  #glynt-fdir#glynt-fdir { padding-left: 20px; padding-right: 20px; }
  #glynt-fdir#glynt-fdir .glynt-fdir__dir { gap: 32px 20px; }
  #glynt-fdir#glynt-fdir .glynt-fdir__col { gap: 32px; }
  #glynt-fdir#glynt-fdir .glynt-fdir__legal { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   11c · HEADER NAV + MEGA MENU
   Built in the Theme Builder header template. Structure Divi emits:
     SECTION .glynt-nav            → the whole sticky header
       ROW   .glynt-navbar         → logo | menu module | log in + demo buttons
       SECTION/ROW .glynt-mega     → the drop panel (one per mega item),
                                     given an id like #glynt-mega-solutions
   The panel is hidden until the toggle script adds .is-open (see the Code
   module snippet in the cheatsheet). Nothing here styles page content.
   ========================================================================== */
.glynt-nav {
  position: relative;
  z-index: 500;
  background: var(--surface-page) !important;
  border-bottom: 1px solid var(--color-border);
  padding: 0 !important;
}

/* Sticky — THE WRAPPER STICKS, NOT THE SECTION.
   ------------------------------------------------------------------
   This is the fix for "dropdowns only open at the top of the screen".

   The four mega panels are absolutely positioned with top:100%, which
   resolves against their nearest positioned ancestor — the Theme Builder
   header wrapper .et-l--header, NOT the nav section. When only the SECTION
   is sticky, the section travels with the viewport but the wrapper stays
   at document top, so the panels keep opening 0px from the top of the page.

   Making the wrapper the sticky element keeps nav and panels in the same
   moving coordinate space. The wrapper's own height is just the navbar
   (the panels are absolute, so they add no height), so top:100% still
   lands exactly under the bar.

   REQUIRED IN THE BUILDER: turn Divi's Position → Sticky OFF on the nav
   section. Divi's sticky sets position:fixed + a transform on the section,
   and a transform makes the SECTION a containing block again — which
   re-breaks this. Sticky is owned here now, not by the module. */
.et-l--header:has(.glynt-nav),
.glynt-header-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: var(--glynt-header-top, 0px);
  z-index: var(--z-header, 1000);
}

/* Fallback for browsers without :has() — add the CSS Class
   glynt-header-sticky to the header wrapper, or leave it; the section-level
   rule below still gives a usable (non-tracking) header. */
@supports not selector(:has(*)) {
  .glynt-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

/* Positioning context for browsers WITHOUT :has() only. The :has() rule
   above already makes the wrapper a containing block (sticky is a positioned
   value), so re-declaring position:relative here for all .et-l--header would
   overwrite it and silently kill the sticky. Scoped to the fallback. */
@supports not selector(:has(*)) {
  .et-l--header { position: relative; }
}

/* Overflow must stay visible the whole way up the chain or the panels are
   clipped at the bar's lower edge once the wrapper starts scrolling. */
.et-l--header,
.et-l--header > .et_builder_inner_content,
.glynt-nav,
.glynt-nav > .et_pb_row {
  overflow: visible !important;
}

/* Sticky dies if ANY ancestor has overflow other than visible. Divi puts
   overflow-x:hidden on these two, which is the usual reason a sticky header
   silently scrolls away. */
html, body, #page-container, #et-main-area, #main-content {
  overflow: visible !important;
  overflow-x: clip;
}

/* The header wrapper must hug the navbar. The four mega sections are absolute
   so they add no height, but Divi still gives the wrapper and each section its
   default 54px/4% section padding — that empty band is what doubled the header.
   The navbar row owns the header's height; nothing else contributes. */
.et-l--header > .et_builder_inner_content { padding: 0 !important; }
.glynt-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.glynt-nav > .et_pb_row.glynt-navbar {
  padding-top: var(--space-2) !important;
  padding-bottom: var(--space-2) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* An absolutely-positioned section still leaves Divi's margin behind in some
   builds — zero it so the closed panels can't push the wrapper taller. */
.glynt-mega { margin: 0 !important; }

/* WP admin bar. Only offset when the bar is genuinely fixed over the page:
   WordPress fixes it at >=783px and lets it scroll away below that. Applying
   32px unconditionally is what put a gap above the sticky header — logged-out
   visitors have .admin-bar absent, but a logged-in editor whose bar is hidden
   (or a Builder/preview frame) still matched and got pushed down.

   Driven through --glynt-header-top so there is one number to change and no
   competing top: declarations. Default is 0. */
@media screen and (min-width: 783px) {
  body.admin-bar { --glynt-header-top: 32px; }
}

/* Divi's sticky module state can still fire if it's left on somewhere —
   neutralise the transform so it can't hijack the containing block. */
.glynt-nav.et_pb_sticky,
.glynt-nav.et_pb_sticky--top {
  position: relative !important;
  transform: none !important;
  top: auto !important;
}

.glynt-nav.et_pb_sticky--top,
.glynt-nav.et_pb_sticky {
  box-shadow: var(--shadow-sm);
  border-bottom-color: transparent;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.glynt-nav .glynt-navbar {
  /* Same box as a page row — Divi rows are 80% wide capped at --grid-max-width,
     so the logo lines up with page content instead of sitting inset. */
  padding: var(--space-3) 0 !important;
  width: 80% !important;
  max-width: var(--grid-max-width) !important;
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: var(--space-4);
}
/* Logo auto-width, menu takes the slack, actions pin right. Divi writes
   percentage widths on each column — these override all three. */
/* Divi's clearfix ::before/::after become flex items in a flex row and take a
   gap slot. On mobile the reordered columns moved ::after (order 0) to the
   front, insetting the logo by one gap; on desktop it insets the CTA. */
.glynt-nav .glynt-navbar::before,
.glynt-nav .glynt-navbar::after { display: none !important; content: none !important; }
.glynt-nav .glynt-navbar > .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.glynt-nav .glynt-navbar > .et_pb_column:nth-child(2) { flex: 1 1 auto; justify-content: flex-end; }
.glynt-nav .glynt-navbar > .et_pb_column:last-child { margin-left: auto !important; justify-content: flex-end; }

/* Header logo — cap the height so it can't drive the bar's height.
   Tune it here: --nav-logo-h is the ONE number that sets header logo size.
   Divi's Image module width/height settings are overridden by the !important
   below, so changing it in the Builder does nothing — change the token.
   Per-page override if ever needed: .glynt-nav { --nav-logo-h: 48px; } */
.glynt-nav {
  --nav-logo-h: 40px;
}
.glynt-nav .glynt-navbar .et_pb_image,
.glynt-nav .glynt-navbar .et_pb_image_wrap { margin: 0 !important; line-height: 0; }
.glynt-nav .glynt-navbar img {
  height: var(--nav-logo-h) !important;
  width: auto !important;
  max-width: none !important;
}

/* The menu never wraps to a second line, and hugs the right edge. Divi 5
   centers via .et_pb_menu__wrap, which outranked the ul rule below. */
.glynt-nav .glynt-navbar .et_pb_menu,
.glynt-nav .glynt-navbar .et_pb_menu_inner_container,
.glynt-nav .et_pb_menu__menu,
.glynt-nav .et_pb_menu__menu > nav { width: 100% !important; }
.glynt-nav .glynt-navbar .et_pb_menu__wrap,
.glynt-nav .glynt-navbar .et_pb_menu__menu,
.glynt-nav .glynt-navbar .et_pb_menu_inner_container {
  justify-content: flex-end !important;
}
.glynt-nav .et_pb_menu__menu > nav > ul,
.glynt-nav .et-menu {
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}
.glynt-nav .et-menu > li,
.glynt-nav .et-menu > li > a { white-space: nowrap; }
/* The global link rule underlines on hover — nav items are chrome, not prose. */
.glynt-nav a,
.glynt-nav a:hover,
.glynt-nav a:focus,
.glynt-nav a:active,
.glynt-nav .et-menu a,
.glynt-nav .et-menu a:hover,
.glynt-nav .et-menu li li a:hover,
body #page-container .glynt-nav a:not(.et_pb_button):not(.glynt-btn):hover {
  text-decoration: none !important;
}
/* Last menu item sits close to the CTA rather than against the column edge. */
.glynt-nav .et-menu > li:last-child > a { padding-right: 0 !important; }

/* Header CTA sits at nav-item height. One variable each — no specificity
   battle with the base rule now that it paints from variables. */
.glynt-nav .et_pb_button,
.glynt-nav .glynt-btn {
  --btn-pad: 8px 16px;
  --btn-size: 13px;
}
/* Escape hatch — a header button that should keep full page-size padding. */
.glynt-nav .glynt-btn-keep { --btn-pad: 14px 26px; --btn-size: var(--text-body-sm); }

.glynt-nav .et_pb_button_module_wrapper,
.glynt-nav .et_pb_button_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  line-height: 1 !important;
}
/* Menu module and CTA share one baseline — Divi gives the menu a small top
   offset that leaves the button riding high next to the item pills. */
.glynt-nav .glynt-navbar > .et_pb_column { align-self: center; }
.glynt-nav .glynt-navbar .et_pb_menu,
.glynt-nav .glynt-navbar .et_pb_menu_inner_container,
.glynt-nav .glynt-navbar .et_pb_menu__wrap { align-items: center !important; }
.glynt-nav .et-menu,
.glynt-nav .et-menu > li { margin-top: 0 !important; margin-bottom: 0 !important; }
.glynt-nav .et-menu > li > a { display: flex; align-items: center; }
.glynt-nav .et_pb_column { display: flex; align-items: center; }

/* Top-level menu items — Urbanist 600, Cedar, Fern on hover/active. */
.glynt-nav .et_pb_menu .et-menu > li > a,
.glynt-nav #top-menu > li > a {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-sm) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0 !important;
  color: var(--text-heading) !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.glynt-nav .et_pb_menu .et-menu > li > a:hover,
.glynt-nav #top-menu > li > a:hover,
.glynt-nav .et-menu > li.glynt-has-mega.is-open > a {
  color: var(--text-brand) !important;
  background: var(--surface-muted);
  opacity: 1 !important;
}
/* Current page and its ancestors get colour only — no resting fill, so the
   pill reads as a hover affordance rather than permanent state. */
.glynt-nav .et-menu > li.current-menu-item > a,
.glynt-nav .et-menu > li.current-menu-parent > a,
.glynt-nav .et-menu > li.current-menu-ancestor > a,
.glynt-nav .et-menu > li.current_page_item > a,
.glynt-nav #top-menu > li.current-menu-item > a,
body #page-container .glynt-nav .et-menu > li.current-menu-item > a {
  background: transparent !important;
  color: var(--text-brand) !important;
  opacity: 1 !important;
}
.glynt-nav .et-menu > li.current-menu-item > a:hover,
.glynt-nav .et-menu > li.current-menu-parent > a:hover,
.glynt-nav .et-menu > li.current-menu-ancestor > a:hover {
  background: var(--surface-muted) !important;
}
/* Caret on anything that opens a panel or a dropdown. Divi paints its own
   arrow as an ETmodules glyph on this same ::after, so the content and font
   have to be reset or the "3" character sits inside our chevron box. */
.glynt-nav .et-menu > li.glynt-has-mega > a::after,
.glynt-nav .et-menu > li.menu-item-has-children > a::after,
.glynt-nav .et_pb_menu .et-menu > li.menu-item-has-children > a::after,
.glynt-nav #top-menu > li.menu-item-has-children > a::after {
  content: "" !important;
  font-family: inherit !important;
  font-size: 0 !important;
  position: static !important;
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
  opacity: 1 !important;
}
.glynt-nav .et-menu > li.is-open > a::after { transform: translateY(1px) rotate(-135deg); }
/* Divi also drops an arrow span in the markup on some menu styles. */
.glynt-nav .et-menu > li > a > .et-menu-arrow,
.glynt-nav .et_pb_menu .et-menu-nav li > a > span.et-arrow { display: none !important; }
/* Divi ships its own ::after caret on parent items — suppress it. */
.glynt-nav .et-menu > li.menu-item-has-children > a::before { display: none !important; }

/* --- Mega panel ---------------------------------------------------------- */
.glynt-mega {
  position: absolute !important;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(900px, 94vw) !important;
  max-width: min(900px, 94vw) !important;
  padding: var(--space-4) !important;
  background: var(--surface-page) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility 0s linear var(--duration-fast);
}
.glynt-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 8px);
  transition-delay: 0s;
}
.glynt-mega .et_pb_row,
.glynt-mega .et_pb_row_inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Divi sizes rows to its own content width — the panel sets its own. */
.et-db #et-boc .et-l .glynt-mega,
body #page-container .glynt-mega {
  width: min(900px, 94vw) !important;
  max-width: min(900px, 94vw) !important;
}
/* One Divi column holds every module; the grid does the two-up. That keeps the
   footer strip able to span the full width without a nested row. */
.glynt-mega .et_pb_column {
  margin-bottom: 0 !important;
  width: 100% !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-3);
  align-items: start;
}

/* --- Mega item (Divi Blurb, icon left) ----------------------------------- */
.glynt-mega-item {
  display: flex !important;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 8px var(--space-2) !important;
  margin: 0 !important;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.glynt-mega-item:hover { background: var(--surface-muted); }
.glynt-mega-item .et_pb_main_blurb_image .et_pb_image_wrap,
.glynt-mega-item .et_pb_main_blurb_image span { line-height: 0 !important; }
.glynt-mega-item .et_pb_main_blurb_image .et-pb-icon,
.glynt-mega-item .et_pb_main_blurb_image i,
.et-db #et-boc .et-l .glynt-mega-item .et-pb-icon {
  font-size: 15px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  color: var(--color-primary-brand) !important;
}
.glynt-mega-item .et_pb_blurb_container { padding: 0 !important; text-align: left !important; }
/* Divi centers blurb content by default and writes it per-module — force left
   at the same weight as §8's blurb rules so titles and subtext share an edge. */
.glynt-mega-item,
.glynt-mega-item .et_pb_blurb_container,
.glynt-mega-item .et_pb_blurb_content,
.glynt-mega-item .et_pb_module_header,
.glynt-mega-item .et_pb_blurb_description,
.glynt-mega-item .et_pb_blurb_description p,
.glynt-mega-item h1, .glynt-mega-item h2, .glynt-mega-item h3,
.glynt-mega-item h4, .glynt-mega-item h5, .glynt-mega-item h6,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_blurb_container,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_blurb_content,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_module_header,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_blurb_description,
body #page-container .glynt-mega-item .et_pb_blurb_container,
body #page-container .glynt-mega-item .et_pb_module_header,
body #page-container .glynt-mega-item .et_pb_blurb_description {
  text-align: left !important;
}
/* The text block fills the row so centring has nothing to centre against.
   .et_pb_blurb_content is Divi's real icon+text wrapper — the flex row has to
   live there, not on the module root, or the text block stays auto-width and
   floats a different distance from the icon on every item. */
/* The row is built name-agnostically: whichever element wraps the icon and the
   text — .et_pb_blurb_content in Divi 4, something else in Divi 5 — is the
   module's only child, so :only-child catches it without naming it. If there
   is no wrapper, the module root itself is already the flex row. */
.glynt-mega-item > *:only-child,
.glynt-mega-item .et_pb_blurb_content,
.et-db #et-boc .et-l .glynt-mega-item > *:only-child,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_blurb_content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
/* Divi's icon block is display:block at full width — pin it so it can't claim
   the whole row and bump the text onto a second line. */
.glynt-mega-item .et_pb_main_blurb_image,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_main_blurb_image,
body #page-container .glynt-mega-item .et_pb_main_blurb_image {
  flex: 0 0 30px !important;
  width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--tint-success-soft-bg);
  border-radius: var(--radius-md);
}
.glynt-mega-item .et_pb_blurb_container,
.glynt-mega-item .et_pb_main_blurb_image + *,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_blurb_container,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_main_blurb_image + * {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
}
/* §8 styles blurb headers as `.et-db #et-boc .et-l .et_pb_blurb hN` (1,3,0),
   which outranks a plain .glynt-mega-item rule — these match that context so
   nav-scale type wins over page-scale type regardless of the tag the Builder
   emitted. Set the blurb title to H5 or H6 in the module; size is forced here
   either way. */
.glynt-mega-item .et_pb_module_header,
.glynt-mega-item .et_pb_module_header a,
.glynt-mega-item h1, .glynt-mega-item h2, .glynt-mega-item h3,
.glynt-mega-item h4, .glynt-mega-item h5, .glynt-mega-item h6,
.glynt-mega-item .et_pb_module_header a,
.glynt-mega-item .et_pb_module_header a:visited,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_module_header a,
body #page-container .glynt-mega-item .et_pb_module_header a,
body #page-container .glynt-mega-item .et_pb_module_header a:visited,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_module_header,
.et-db #et-boc .et-l .glynt-mega-item h1,
.et-db #et-boc .et-l .glynt-mega-item h2,
.et-db #et-boc .et-l .glynt-mega-item h3,
.et-db #et-boc .et-l .glynt-mega-item h4,
.et-db #et-boc .et-l .glynt-mega-item h5,
.et-db #et-boc .et-l .glynt-mega-item h6,
body #page-container .glynt-mega-item .et_pb_module_header,
body #page-container .glynt-mega-item h1,
body #page-container .glynt-mega-item h2,
body #page-container .glynt-mega-item h3,
body #page-container .glynt-mega-item h4,
body #page-container .glynt-mega-item h5,
body #page-container .glynt-mega-item h6 {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--text-heading) !important;
  text-shadow: none !important;
  margin: 0 !important;
  padding: 0 0 2px 0 !important;
}
.glynt-mega-item:hover .et_pb_module_header,
.glynt-mega-item:hover .et_pb_module_header a { color: var(--text-brand) !important; }
.glynt-mega-item .et_pb_blurb_description,
.glynt-mega-item .et_pb_blurb_description p,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_blurb_description,
.et-db #et-boc .et-l .glynt-mega-item .et_pb_blurb_description p,
body #page-container .glynt-mega-item .et_pb_blurb_description {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}
/* Subtext is a single line by design — it sets the panel's minimum width. */
.glynt-mega-item .et_pb_blurb_description p { text-wrap: pretty; }

/* --- Mega footer strip ---------------------------------------------------- */
.glynt-mega-foot {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  text-align: left !important;
  gap: var(--space-2);
  grid-column: 1 / -1;
  margin-top: var(--space-3) !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--color-divider);
}
.glynt-mega-foot,
.glynt-mega-foot .et_pb_text_inner,
.glynt-mega-foot .et_pb_text_inner p,
.et-db #et-boc .et-l .glynt-mega-foot,
.et-db #et-boc .et-l .glynt-mega-foot .et_pb_text_inner,
.et-db #et-boc .et-l .glynt-mega-foot .et_pb_text_inner p,
body #page-container .glynt-mega-foot .et_pb_text_inner,
body #page-container .glynt-mega-foot .et_pb_text_inner p {
  text-align: left !important;
}
.glynt-mega-foot .et_pb_text_inner,
.glynt-mega-foot .et_pb_text_inner p {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: var(--space-2);
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.glynt-mega-foot,
.glynt-mega-foot p,
.glynt-mega-foot span,
.et-db #et-boc .et-l .glynt-mega-foot .et_pb_text_inner p {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.glynt-mega-foot a {
  font-weight: var(--weight-semibold) !important;
  color: var(--text-brand) !important;
}

/* Single-column variant — for a short list (Resources). Narrow, and anchored
   to the right edge of the bar rather than centred, since the nav cluster
   sits right. Add `glynt-mega--single` alongside `glynt-mega`. */
.glynt-mega--single,
.et-db #et-boc .et-l .glynt-mega--single,
body #page-container .glynt-mega--single {
  width: min(340px, 92vw) !important;
  max-width: min(340px, 92vw) !important;
  left: auto !important;
  /* Align to the navbar's content column (92%, max 1280) — not the viewport
     edge, which the full-bleed header section would otherwise give us. */
  right: max(10%, calc((100% - var(--grid-max-width)) / 2)) !important;
  transform: translate(0, -8px);
}
.glynt-mega--single.is-open { transform: translate(0, 8px); }
.glynt-mega--single .et_pb_column { grid-template-columns: 1fr; }

@media (max-width: 980px) {
  .glynt-mega--single,
  body #page-container .glynt-mega--single {
    width: 100% !important;
    max-width: 100% !important;
    right: auto !important;
    transform: none !important;
  }
}

/* Compact variant — single column, icon + title only, no descriptive text
   (Industries). Add `glynt-mega--compact` alongside `glynt-mega`. Sits under
   its own trigger: the toggle script writes --mega-left (the trigger's centre,
   measured against the header) on open; without the script it falls back to
   the centred default. Leave the blurb's Body field empty in the module —
   the rule below also hides one if the Builder emits an empty <p>. */
.glynt-mega--compact,
.et-db #et-boc .et-l .glynt-mega--compact,
body #page-container .glynt-mega--compact {
  width: min(300px, 92vw) !important;
  max-width: min(300px, 92vw) !important;
  padding: var(--space-2) !important;
  left: var(--mega-left, 50%) !important;
  right: auto !important;
}
.glynt-mega--compact .et_pb_column {
  grid-template-columns: 1fr;
  gap: 2px;
}
.glynt-mega--compact .glynt-mega-item .et_pb_blurb_description,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item .et_pb_blurb_description,
body #page-container .glynt-mega--compact .glynt-mega-item .et_pb_blurb_description {
  display: none !important;
}
/* Icon and title share one baseline row: centre both axes of the flex row and
   drop the title's 2px bottom pad, which otherwise pushes the text down 1px. */
.glynt-mega--compact .glynt-mega-item,
.glynt-mega--compact .glynt-mega-item > *:only-child,
.glynt-mega--compact .glynt-mega-item .et_pb_blurb_content,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item > *:only-child,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item .et_pb_blurb_content {
  align-items: center !important;
}
.glynt-mega--compact .glynt-mega-item .et_pb_blurb_container,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item .et_pb_blurb_container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 30px; /* matches the icon tile, so short titles still centre */
}
/* Without a description the title is the container's only flex child, so it
   shrink-wraps and Divi's centring pulls it off the left edge — make it fill
   the row so text-align:left has something to align against. */
.glynt-mega--compact .glynt-mega-item .et_pb_module_header,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item .et_pb_module_header,
body #page-container .glynt-mega--compact .glynt-mega-item .et_pb_module_header {
  flex: 1 1 auto !important;
  width: 100% !important;
  text-align: left !important;
  padding-top: 3px !important; /* optical: pulls the cap-height onto the icon's centre */
}
.glynt-mega--compact .glynt-mega-item .et_pb_module_header,
.glynt-mega--compact .glynt-mega-item h1, .glynt-mega--compact .glynt-mega-item h2,
.glynt-mega--compact .glynt-mega-item h3, .glynt-mega--compact .glynt-mega-item h4,
.glynt-mega--compact .glynt-mega-item h5, .glynt-mega--compact .glynt-mega-item h6,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item .et_pb_module_header,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item h4,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item h5,
.et-db #et-boc .et-l .glynt-mega--compact .glynt-mega-item h6,
body #page-container .glynt-mega--compact .glynt-mega-item .et_pb_module_header {
  padding-bottom: 0 !important;
  font-size: 15px !important;
}

@media (max-width: 980px) {
  .glynt-mega--compact,
  body #page-container .glynt-mega--compact {
    width: 100% !important;
    max-width: 100% !important;
    left: 50% !important;
  }
}


/* --- Simple dropdown (Resources, Company) --------------------------------- */
.glynt-nav .et-menu li ul.sub-menu {
  width: 250px;
  padding: var(--space-2) !important;
  background: var(--surface-page) !important;
  border: 1px solid var(--color-border) !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.glynt-nav .et-menu li li { padding: 0 !important; }
.glynt-nav .et-menu li li a {
  display: block;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: var(--weight-medium) !important;
  color: var(--text-body) !important;
  padding: 9px 12px !important;
  border-radius: var(--radius-sm);
}
.glynt-nav .et-menu li li a:hover {
  background: var(--surface-muted);
  color: var(--text-brand) !important;
  opacity: 1 !important;
}

/* --- Keyboard focus ------------------------------------------------------- */
.glynt-nav a:focus-visible,
.glynt-mega a:focus-visible,
.glynt-mega-item:focus-within {
  outline: 2px solid var(--color-primary-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Mobile: panel stacks inline, no absolute positioning ----------------- */
@media (max-width: 980px) {
  /* One bar: logo left, CTA + hamburger right. Order puts the hamburger last
     so it sits at the far edge on its own, the way people expect to find it. */
  .glynt-nav .glynt-navbar { flex-wrap: nowrap !important; position: relative !important; gap: var(--space-3, 16px); }
  .glynt-nav .glynt-navbar > .et_pb_column:first-child { order: 1; }
  .glynt-nav .glynt-navbar > .et_pb_column:last-child { order: 2; margin-left: auto !important; }
  .glynt-nav .glynt-navbar > .et_pb_column:nth-child(2) { order: 3; flex: 0 0 auto !important; }
  /* The menu column is now only as wide as the hamburger — release every
     positioned wrapper so the dropdown measures against the whole bar. */
  .glynt-nav .glynt-navbar > .et_pb_column:nth-child(2),
  .glynt-nav .glynt-navbar .et_pb_menu,
  .glynt-nav .glynt-navbar .et_pb_menu_inner_container,
  .glynt-nav .glynt-navbar .et_pb_menu__wrap,
  .glynt-nav .glynt-navbar .et_mobile_nav_menu,
  .glynt-nav .glynt-navbar .mobile_nav { position: static !important; }
  .glynt-nav .glynt-navbar .et_mobile_menu {
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  /* Compact CTA so it fits beside the logo on tablets. */
  .glynt-nav .glynt-navbar > .et_pb_column:last-child .et_pb_button_module_wrapper { margin: 0 !important; }
  .glynt-nav .glynt-navbar > .et_pb_column:last-child .et_pb_button {
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .glynt-nav .glynt-navbar > .et_pb_column:last-child .et_pb_button::after { display: none !important; }
  .glynt-mega {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    border: 0;
    border-top: 1px solid var(--color-divider);
    border-radius: 0;
    box-shadow: none;
    display: none;
  }
  .glynt-mega.is-open { display: block; transform: none !important; }
  .glynt-mega .et_pb_column { grid-template-columns: 1fr; }
  .glynt-mega-foot { flex-direction: column; align-items: flex-start; }
  /* Inside Divi's hamburger list. The toggle script moves the panel into the
     tapped item, so it opens as an accordion under its own label. */
  .et_mobile_menu { max-height: calc(100vh - 96px); overflow-y: auto !important; }
  .et_mobile_menu .glynt-mega,
  body #page-container .et_mobile_menu .glynt-mega {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--space-2, 8px) 0 var(--space-3, 16px) !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none !important;
  }
  .et_mobile_menu .glynt-mega.is-open,
  body #page-container .et_mobile_menu .glynt-mega.is-open { display: block !important; }
  .et_mobile_menu .glynt-mega .et_pb_row,
  .et_mobile_menu .glynt-mega .et_pb_column { padding: 0 !important; margin: 0 !important; }
  /* Divi pads and rules every link in the mobile list — not the ones in the panel. */
  .et_mobile_menu .glynt-mega a { padding: 0 !important; border: 0 !important; background: none !important; }
}
/* Phones: no room for the CTA beside the logo — the bar is logo + hamburger.
   Add "Talk to a data expert" as the last item in the menu so it stays one tap away. */
@media (max-width: 767px) {
  .glynt-nav .glynt-navbar > .et_pb_column:last-child { display: none !important; }
  .glynt-nav { --nav-logo-h: 32px; }
  /* With the CTA column gone, the menu column has to claim the slack itself. */
  .glynt-nav .glynt-navbar { justify-content: space-between !important; }
  .glynt-nav .glynt-navbar > .et_pb_column:nth-child(2) { margin-left: auto !important; }
}
/* Divi centres Image modules below 980px — pin the logo to the content edge. */
@media (max-width: 980px) {
  /* Any side padding on the header section or wrapper shrinks the 80% navbar
     row relative to page rows, so the logo and hamburger sit inside the content
     edge. Zero it; the row width alone sets the inset, same as every page row. */
  .et-l--header,
  .et-l--header > .et_builder_inner_content,
  .glynt-nav,
  body #page-container .glynt-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .glynt-nav .glynt-navbar,
  body #page-container .glynt-nav .glynt-navbar {
    width: 80% !important;
    max-width: var(--grid-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .glynt-nav .glynt-navbar > .et_pb_column { padding-left: 0 !important; padding-right: 0 !important; }
  .glynt-nav .glynt-navbar > .et_pb_column:first-child,
  .glynt-nav .glynt-navbar > .et_pb_column:first-child .et_pb_image,
  .glynt-nav .glynt-navbar > .et_pb_column:first-child .et_pb_module {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: flex-start !important;
  }
  .glynt-nav .glynt-navbar .et_pb_image_wrap { display: block; margin: 0 !important; padding: 0 !important; }
  .glynt-nav .glynt-navbar img { margin: 0 !important; padding: 0 !important; }
  .glynt-nav .glynt-navbar .et_mobile_nav_menu { margin: 0 !important; }
}


/* ==========================================================================
   11d · LOGO CAROUSEL
   Build it as: SECTION → ROW `glynt-logos` → ONE column → 15 Image modules.
   Then DUPLICATE the whole set of images so the column holds the run twice
   (30 modules, same order). The track scrolls exactly one run and restarts,
   so the seam is invisible — with a single run it would jump.
   Options on the row: `glynt-logos--slow` / `--fast`, `glynt-logos--reverse`.
   Logos: same pixel height, transparent PNG or SVG, uploaded at 2x.
   ========================================================================== */
.glynt-logos {
  --logo-speed: 50s;
  --logo-h: 70px;
  --logo-gap: 64px;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  /* Fade the two ends so logos enter and leave instead of clipping. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* The single column is the moving track. width:max-content lets it grow past
   the row so the animation has somewhere to travel. */
.glynt-logos .et_pb_column,
.et-db #et-boc .et-l .glynt-logos .et_pb_column,
body #page-container .glynt-logos .et_pb_column {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: var(--logo-gap);
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  animation: glynt-logo-marquee var(--logo-speed) linear infinite;
  will-change: transform;
}
/* Half the track is the duplicate run, and the gap after the last item of the
   first run has to travel too — hence the calc, not a flat -50%. */
@keyframes glynt-logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--logo-gap) / 2)), 0, 0); }
}
/* Pause on hover / keyboard focus. Must match the tiers of the track rule
   above — its animation shorthand resets play-state to running, and at
   (1,2,1) it beat a bare .glynt-logos:hover rule, so hover never paused. */
.glynt-logos:hover .et_pb_column,
.glynt-logos:focus-within .et_pb_column,
.et-db #et-boc .et-l .glynt-logos:hover .et_pb_column,
.et-db #et-boc .et-l .glynt-logos:focus-within .et_pb_column,
body #page-container .glynt-logos:hover .et_pb_column,
body #page-container .glynt-logos:focus-within .et_pb_column {
  animation-play-state: paused !important;
}

.glynt-logos .et_pb_image,
.glynt-logos .et_pb_module {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: center !important;
}
.glynt-logos .et_pb_image .et_pb_image_wrap { display: block !important; }
.glynt-logos img {
  display: block;
  height: var(--logo-h) !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}

.glynt-logos--slow { --logo-speed: 70s; }
.glynt-logos--fast { --logo-speed: 28s; }
.glynt-logos--reverse .et_pb_column { animation-direction: reverse; }

@media (max-width: 767px) {
  .glynt-logos { --logo-h: 30px; --logo-gap: 40px; --logo-speed: 32s; }
}
/* Respect the OS setting — the row still shows, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .glynt-logos .et_pb_column { animation: none !important; }
  .glynt-logos {
    overflow-x: auto !important;
    -webkit-mask-image: none;
            mask-image: none;
  }
}


/* ==========================================================================
   11e · REMOVED — was PHANTOM FIREWALL (Divi 5 only)
   The firewall existed to defeat Divi 5 pathologies: declarations appended
   rather than replaced, values invisible in every Builder field, Divi emitting
   its own !important, and Sizing values hidden behind "auto" placeholders.
   Divi 4 replaces Design-tab values instead of appending, so none of that
   applies — and the firewall's zero-specificity !important resets caused real
   collateral damage sitewide. The three narrower per-property resets it had
   replaced are restored in §11 instead.
   Do not port this block back.
   ========================================================================== */


/* ==========================================================================
   11f · CUSTOMER STORY CAROUSEL — .glynt-stories / .glynt-story
   Split tile (text left, photo right), one story in view. Raw markup in a
   CODE module — see snippets/customer-story-carousel.txt. Set the Divi
   SECTION background to #C6C6BD. Slides scroll natively with snap, so
   phones swipe; the arrows and dots are added by the snippet's script.
   Photos: 1200×627, cropped to fill (object-fit: cover). On phones the
   photo stacks on top at its full 1200:627 shape.
   ========================================================================== */
.glynt-stories {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  row-gap: 24px;
}
.glynt-stories__viewport {
  grid-column: 2;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.glynt-stories__viewport::-webkit-scrollbar { display: none; }

.glynt-story {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 480px;
  background: #FFFFFF;
  border: 1px solid #E2E2DB;
  box-sizing: border-box;
  margin: 0;
}
.glynt-story__body {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#page-container .glynt-story__industry {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #188F28;
}
#page-container .glynt-story__title {
  margin: 0 0 18px;
  padding: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 34px !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #003400;
  text-wrap: balance;
}
#page-container .glynt-story__desc {
  margin: 0 0 28px;
  padding: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: #1B1B1B;
  text-wrap: pretty;
}
.glynt-story__link { align-self: flex-start; }
.glynt-story__media { position: relative; min-height: 480px; overflow: hidden; }
.glynt-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.glynt-stories__nav {
  justify-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #188F28;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 160ms ease, color 160ms ease;
}
.glynt-stories__nav:hover { color: #075920; }
.glynt-stories__nav[disabled] { opacity: 0.35; cursor: default; }
.glynt-stories__nav--prev { grid-column: 1; grid-row: 1; }
.glynt-stories__nav--next { grid-column: 3; grid-row: 1; }
.glynt-stories__nav:focus-visible,
.glynt-stories__dot:focus-visible { outline: 2px solid #003400; outline-offset: 3px; }

.glynt-stories__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.glynt-stories__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #64645E;
  cursor: pointer;
  transition: width 200ms ease, background 200ms ease;
}
.glynt-stories__dot[aria-current="true"] { width: 28px; background: #188F28; }

@media (max-width: 980px) {
  .glynt-stories { grid-template-columns: 56px minmax(0, 1fr) 56px; }
  .glynt-story__body { padding: 40px; }
  #page-container .glynt-story__title { font-size: 28px !important; }
}
@media (max-width: 767px) {
  .glynt-stories { grid-template-columns: minmax(0, 1fr); }
  .glynt-stories__viewport { grid-column: 1; }
  .glynt-stories__nav { display: none; }
  .glynt-story { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .glynt-story__media { order: -1; min-height: 0; aspect-ratio: 1200 / 627; }
  .glynt-story__body { padding: 28px 24px 32px; }
  #page-container .glynt-story__title { font-size: 26px !important; }
  .glynt-story__link { align-self: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .glynt-stories__viewport { scroll-behavior: auto; }
}


/* ==========================================================================
   11g · BLOG POST TEMPLATE (1a Editorial) — .glynt-post-*
   Theme Builder → All Posts → Custom Body. Full build sheet:
   snippets/blog-post-template-build-sheet.txt
     SECTION .glynt-post-hero    → Text (.glynt-post-cat) + Post Title (.glynt-post-title)
     SECTION .glynt-post-main    → ROW .glynt-post-media  → Image (dynamic Featured Image)
                                 → ROW .glynt-post-read   → Post Content (.glynt-post-body)
                                                          → Blurb (.glynt-post-author)
                                                          → Post Navigation (.glynt-post-nav)
   ========================================================================== */

/* Hero band. The global link rule (§2) forces every link to var(--link-color)
   at high specificity, so link colours here are set through that variable. */
.glynt-post-hero { --link-color: #98E110; --link-color-hover: #FFFFFF; }
.glynt-post-nav  { --link-color: #003400; --link-color-hover: #003400; }
.glynt-post-hero.et_pb_section,
.et-db #et-boc .et-l .glynt-post-hero.et_pb_section {
  background-color: #003400 !important;
  padding: 88px 0 200px !important;
}
.glynt-post-hero .et_pb_row,
.et-db #et-boc .et-l .glynt-post-hero .et_pb_row { max-width: 880px; padding: 0 !important; }
.glynt-post-hero .et_pb_module { margin-bottom: 0 !important; text-align: center; }

#page-container .glynt-post-cat,
#page-container .glynt-post-cat p { margin: 0 0 22px !important; padding: 0; }
#page-container .glynt-post-cat a,
#page-container .glynt-post-cat {
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #98E110 !important;
}
#page-container .glynt-post-cat a:hover { color: #FFFFFF !important; }

.glynt-post-title.et_pb_post_title { padding: 0 !important; margin: 0 !important; background: none !important; }
.glynt-post-title .et_pb_title_container { text-align: center; }
#page-container .glynt-post-title h1.entry-title {
  margin: 0 0 22px;
  padding: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 52px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em;
  color: #FFFFFF !important;
  text-wrap: balance;
}
#page-container .glynt-post-title .et_pb_title_meta_container,
#page-container .glynt-post-title .et_pb_title_meta_container a {
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 15px !important;
  line-height: 1.4;
}
#page-container .glynt-post-title .et_pb_title_meta_container { color: #F6F8F5 !important; }
#page-container .glynt-post-title .et_pb_title_meta_container a:hover { color: #98E110 !important; }

/* Main section: featured image overlaps the hero.
   The image row's negative margin collapses through to this section, pulling
   the whole section up over the hero — so the section must be transparent
   (the page behind it is white) or its white fill hides the overlap. */
.glynt-post-main.et_pb_section,
.et-db #et-boc .et-l .glynt-post-main.et_pb_section {
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 2;
}
.glynt-post-main.et_pb_section,
.et-db #et-boc .et-l .glynt-post-main.et_pb_section { background: #FFFFFF; padding: 0 0 88px !important; }
.glynt-post-media.et_pb_row,
.et-db #et-boc .et-l .glynt-post-media.et_pb_row {
  max-width: 960px;
  width: 90%;
  margin-top: -150px !important;
  padding: 0 !important;
  position: relative;
  z-index: 2;
}
.glynt-post-media .et_pb_image { margin: 0 !important; border-radius: 16px; overflow: hidden; }
.glynt-post-media .et_pb_image_wrap,
.glynt-post-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 627;
  object-fit: cover;
  border-radius: 16px;
}

.glynt-post-read.et_pb_row,

.et-db #et-boc .et-l .glynt-post-read.et_pb_row { max-width: 960px; width: 90%; padding: 64px 0 0 !important; }

/* Posts written in the Divi Builder bring their own sections and rows (80%
   width + 4% padding), which squeezes the text inside the 720px column.
   Flatten them so the article fills the column. */
.glynt-post-body .et_pb_section,
.glynt-post-body .et_pb_row,
.glynt-post-body .et_pb_column,
.et-db #et-boc .et-l .glynt-post-body .et_pb_section,
.et-db #et-boc .et-l .glynt-post-body .et_pb_row,
.et-db #et-boc .et-l .glynt-post-body .et_pb_column {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: transparent !important;
}
.glynt-post-body .et_pb_section,
.et-db #et-boc .et-l .glynt-post-body .et_pb_section { padding-top: 0 !important; padding-bottom: 0 !important; }
.glynt-post-body .et_pb_row,
.et-db #et-boc .et-l .glynt-post-body .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Article body — styles whatever the post editor outputs */
#page-container .glynt-post-body { font-size: 19px; line-height: 1.7; color: #1B1B1B; }
#page-container .glynt-post-body p {
  margin: 0 0 24px;
  padding: 0;
  font-size: 19px;
  line-height: 1.7;
  text-wrap: pretty;
}
#page-container .glynt-post-body h2 {
  margin: 48px 0 16px;
  padding: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 30px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em;
  color: #004901 !important;
}
#page-container .glynt-post-body h3 {
  margin: 36px 0 12px;
  padding: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 23px !important;
  line-height: 1.25 !important;
  color: #003400 !important;
}
#page-container .glynt-post-body h4 {
  margin: 28px 0 10px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 19px !important;
  color: #003400 !important;
}
#page-container .glynt-post-body > :first-child { margin-top: 0; }
#page-container .glynt-post-body a {
  color: #188F28;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
#page-container .glynt-post-body a:hover { color: #075920; }
#page-container .glynt-post-body ul,
#page-container .glynt-post-body ol {
  margin: 0 0 28px;
  padding: 0 0 0 24px;
  font-size: 19px;
  line-height: 1.6;
}
#page-container .glynt-post-body ul { list-style: disc; }
#page-container .glynt-post-body ol { list-style: decimal; }
#page-container .glynt-post-body li { margin: 0 0 10px; padding: 0; }
#page-container .glynt-post-body li::marker { color: #188F28; }
#page-container .glynt-post-body blockquote {
  margin: 16px 0 40px;
  padding: 0;
  border: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #188F28;
  text-align: center;
  text-wrap: balance;
}
#page-container .glynt-post-body blockquote p { font-size: inherit; line-height: inherit; margin: 0; }
#page-container .glynt-post-body blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  color: #64645E;
}
#page-container .glynt-post-body img { max-width: 100%; height: auto; border-radius: 12px; }

/* Blockquote / pull quote — sitewide. Same look as the blog body quote.
   Three ways in:
     1. Text module editor → "Quote" format (or <blockquote> in code view)
     2. CSS Class "glynt-quote" on a Text module — its whole text becomes the quote
     3. <p class="glynt-quote"> in code view for one paragraph
   Attribution: <cite>Name, Title, Company</cite> inside the quote, or a
   paragraph with class glynt-quote__cite. Add glynt-quote--left to left-align. */
#page-container blockquote,
#page-container .glynt-quote .et_pb_text_inner,
#page-container p.glynt-quote {
  margin: 16px 0 40px;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-primary-brand, #188F28);
  text-align: center;
  text-wrap: balance;
}
#page-container .glynt-quote .et_pb_text_inner { margin: 0; }
#page-container blockquote p,
#page-container .glynt-quote .et_pb_text_inner p {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit;
  color: inherit !important;
  margin: 0;
  padding: 0;
}
#page-container blockquote cite,
#page-container .glynt-quote cite,
#page-container .glynt-quote .glynt-quote__cite,
#page-container p.glynt-quote__cite,
body #page-container .et_pb_section .et_pb_module blockquote cite,
body #page-container .et_pb_section .et_pb_module .glynt-quote__cite,
.et-db #et-boc .et-l .et_pb_module blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 15px !important;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4 !important;
  letter-spacing: 0;
  color: var(--text-muted, #64645E) !important;
  text-align: inherit;
}
#page-container .glynt-quote--left .et_pb_text_inner,
#page-container .glynt-quote--left blockquote,
#page-container blockquote.glynt-quote--left,
#page-container p.glynt-quote.glynt-quote--left { text-align: left; }
/* On dark — automatic inside any dark-tagged surface, or force it with
   glynt-quote--on-dark (on the Text module, the blockquote, or the <p>).
   Specificity matters here: the inverse-card / dark-section text rules claim
   every <p> at (1,3,1)+!important, and the light cite rule sits at (1,2,3),
   so these carry body #page-container + .et_pb_module to land on top.
   The quote paragraph is coloured directly — "inherit" loses to those rules. */
body #page-container :is(.glynt-section--dark, .glynt-on-dark, .glynt-surface-deep, .glynt-surface-gradient, .glynt-card--inverse, .glynt-quote--on-dark) .et_pb_module :is(blockquote, blockquote p, .glynt-quote .et_pb_text_inner p, p.glynt-quote),
body #page-container :is(.glynt-section--dark, .glynt-on-dark, .glynt-surface-deep, .glynt-surface-gradient, .glynt-card--inverse, .glynt-quote--on-dark).et_pb_module :is(blockquote, blockquote p, .et_pb_text_inner, .et_pb_text_inner p),
body #page-container .et_pb_module :is(blockquote.glynt-quote--on-dark, blockquote.glynt-quote--on-dark p, p.glynt-quote.glynt-quote--on-dark) {
  color: var(--color-accent-2, #98E110) !important;
}
body #page-container :is(.glynt-section--dark, .glynt-on-dark, .glynt-surface-deep, .glynt-surface-gradient, .glynt-card--inverse, .glynt-quote--on-dark) .et_pb_module :is(blockquote cite, blockquote .glynt-quote__cite, .glynt-quote cite, p.glynt-quote__cite),
body #page-container :is(.glynt-section--dark, .glynt-on-dark, .glynt-surface-deep, .glynt-surface-gradient, .glynt-card--inverse, .glynt-quote--on-dark).et_pb_module :is(blockquote cite, .glynt-quote__cite, cite),
body #page-container .et_pb_module blockquote.glynt-quote--on-dark :is(cite, .glynt-quote__cite) {
  color: var(--text-on-dark, #F6F8F5) !important;
}
@media (max-width: 767px) {
  #page-container blockquote,
  #page-container .glynt-quote .et_pb_text_inner,
  #page-container p.glynt-quote { font-size: 22px; }
}
#page-container .glynt-post-body figure { margin: 8px 0 32px; }
#page-container .glynt-post-body figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #64645E;
  text-align: center;
}
#page-container .glynt-post-body hr { margin: 40px 0; border: 0; border-top: 1px solid #E2E2DB; }
#page-container .glynt-post-body strong { color: #003400; font-weight: 700; }

/* Author box (Blurb module, image left) */
.glynt-post-author.et_pb_blurb {
  margin: 24px 0 0 !important;
  padding: 28px 0 !important;
  border-top: 1px solid #E2E2DB;
  border-bottom: 1px solid #E2E2DB;
}
.glynt-post-author .et_pb_blurb_content { display: flex; align-items: center; gap: 20px; max-width: none; text-align: left; }
.glynt-post-author .et_pb_main_blurb_image { flex: none; width: 64px !important; margin: 0 !important; }
.glynt-post-author .et_pb_main_blurb_image img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; }
.glynt-post-author .et_pb_blurb_container { padding: 0 !important; }
#page-container .glynt-post-author .et_pb_module_header {
  margin: 0 0 4px;
  padding: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: #003400 !important;
}
#page-container .glynt-post-author .et_pb_blurb_description,
#page-container .glynt-post-author .et_pb_blurb_description p {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #64645E;
}

/* Previous / next (Post Navigation module) */
.glynt-post-nav.et_pb_posts_nav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin: 48px 0 0 !important;
  padding: 0 !important;
}
.glynt-post-nav .nav-previous,
.glynt-post-nav .nav-next { float: none !important; width: auto !important; display: block; }
.glynt-post-nav .nav-next { grid-column: 2; }
.glynt-post-nav .nav-previous a,
.glynt-post-nav .nav-next a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid #E2E2DB;
  border-radius: 16px;
  background: #FFFFFF;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 18px !important;
  line-height: 1.3;
  color: #003400 !important;
  text-decoration: none;
  transition: border-color 160ms ease;
}
.glynt-post-nav .nav-next a { text-align: right; }
.glynt-post-nav a:hover { border-color: #188F28; }
.glynt-post-nav .meta-nav { display: none; }
.glynt-post-nav .nav-previous a::before,
.glynt-post-nav .nav-next a::before {
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #188F28;
}
.glynt-post-nav .nav-previous a::before { content: "\2190  Previous post"; }
.glynt-post-nav .nav-next a::before { content: "Next post  \2192"; }

@media (max-width: 980px) {
  .glynt-post-hero.et_pb_section,
  .et-db #et-boc .et-l .glynt-post-hero.et_pb_section { padding: 64px 0 160px !important; }
  .glynt-post-hero .et_pb_row,
  .et-db #et-boc .et-l .glynt-post-hero .et_pb_row { width: 90%; }
  #page-container .glynt-post-title h1.entry-title { font-size: 40px !important; }
  .glynt-post-media.et_pb_row,
  .et-db #et-boc .et-l .glynt-post-media.et_pb_row { margin-top: -110px !important; }
}
@media (max-width: 767px) {
  .glynt-post-hero.et_pb_section,
  .et-db #et-boc .et-l .glynt-post-hero.et_pb_section { padding: 48px 0 120px !important; }
  #page-container .glynt-post-title h1.entry-title { font-size: 32px !important; }
  .glynt-post-media.et_pb_row,
  .et-db #et-boc .et-l .glynt-post-media.et_pb_row { margin-top: -80px !important; }
  .glynt-post-read.et_pb_row,
  .et-db #et-boc .et-l .glynt-post-read.et_pb_row { padding-top: 40px !important; }
  #page-container .glynt-post-body,
  #page-container .glynt-post-body p,
  #page-container .glynt-post-body ul,
  #page-container .glynt-post-body ol { font-size: 17px; }
  #page-container .glynt-post-body h2 { font-size: 25px !important; margin-top: 36px; }
  #page-container .glynt-post-body h3 { font-size: 20px !important; }
  #page-container .glynt-post-body blockquote { font-size: 22px; }
  .glynt-post-nav.et_pb_posts_nav { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .glynt-post-nav .nav-next { grid-column: 1; }
}


/* ==========================================================================
   12 · RESPONSIVE — Divi breakpoints 980 / 767 / 479
   ========================================================================== */
@media (max-width: 980px) {
  :root {
    --text-display: 52px;
    --text-h1: 44px;
    --text-h2: 32px;
    --text-h3: 26px;
    --text-h4: 22px;
    --text-body-lg: 19px;
    --pad-section: 40px;
  }
  .glynt-stat__value { font-size: 38px; }
  .glynt-tile__value { font-size: 26px; }
  .glynt-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .glynt-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .glynt-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  :root {
    --text-display: 40px;
    --text-h1: 34px;
    --text-h2: 28px;
    --text-h3: 23px;
    --text-h4: 20px;    --text-body-lg: 18px;
    --pad-section: 32px;
    --pad-card: 20px;
  }
  h1, h2, .et-db #et-boc .et-l h1, .et-db #et-boc .et-l h2 { letter-spacing: -0.01em; }
  .glynt-stat__value { font-size: 34px; }
  /* Tiles stay 2-across on tablet/phone — the host column is full-width by
     now, so there's room. 3-across drops to 2. */
  .glynt-tiles--3, #page-container .glynt-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glynt-grid-2, .glynt-grid-3, .glynt-grid-4, .glynt-grid-5 { grid-template-columns: 1fr; }

  /* Full-width CTAs, min 44px touch target */
  .et_pb_button, .glynt-btn { width: 100%; min-height: 48px; }
  .glynt-btn--text, .et_pb_button.glynt-btn--text { width: auto; }

  /* Pairs stack full-width on phones, fill first */
  .glynt-btn-pair,
  .glynt-btn-pair .et_pb_column,
  .glynt-btn-pair .et_pb_column_inner { flex-direction: column; align-items: stretch; }
  .glynt-btn-pair .et_pb_button_module_wrapper,
  .glynt-btn-pair .et_pb_button_wrapper { width: 100% !important; }
  .glynt-btn--link, .et_pb_button.glynt-btn--link,
  .glynt-btn--pair-link, .et_pb_button.glynt-btn--pair-link { width: auto; align-self: center; }

  /* Tables scroll rather than squash */
  .glynt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .glynt-table-scroll .glynt-table { min-width: 620px; }

  /* HubSpot: single column, iOS-safe 16px inputs, full-width submit */
  .glynt-form-2col .hs-form { grid-template-columns: 1fr; }
  .hs-input[type],
  textarea.hs-input,
  select.hs-input { font-size: 16px !important; }
  .hs-button, .hs-button.primary { width: 100%; min-height: 48px; }
  .glynt-icon-xl { font-size: 40px !important; }
}

@media (max-width: 479px) {
  :root {
    --text-display: 34px;
    --text-h1: 30px;
    --text-h2: 25px;    --text-h3: 21px;
    --pad-section: 24px;
  }
  .glynt-tiles, #page-container .glynt-tiles,
  .glynt-tiles--3, #page-container .glynt-tiles--3 { grid-template-columns: minmax(0, 1fr); }
  .glynt-tile__value { font-size: 24px; }
  .glynt-stat__value { font-size: 30px; }
  .glynt-stat__value--lg { font-size: 40px; }
  .glynt-stat__value--xl { font-size: 48px; }
  .glynt-badge { font-size: 12px; padding: 5px 10px; }
}


/* ==========================================================================
   13 · PRINT
   ========================================================================== */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .glynt-card, .glynt-stat, .glynt-table { box-shadow: none !important; border-color: #999 !important; }
  .et_pb_button, .glynt-btn { display: none !important; }
}

/* --- HTML site map -------------------------------------------------------
   Visitor-facing site map page. Paste snippets/html-sitemap.txt into a CODE
   module. One <section> per group; groups flow into 3 columns, 2 on tablet,
   1 on phones. Add or remove groups freely — the grid reflows. */
.glynt-sitemap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6, 48px) var(--space-5, 32px);
}
.glynt-sitemap__group { min-width: 0; padding-top: var(--space-3, 16px); border-top: 2px solid var(--color-dark-3, #003400); }
.glynt-sitemap .glynt-sitemap__head,
#page-container .glynt-sitemap .glynt-sitemap__head {
  margin: 0 0 var(--space-3, 16px) !important;
  padding: 0 !important;
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--color-primary-brand, #188F28) !important;
}
.glynt-sitemap .glynt-sitemap__links,
#page-container .glynt-sitemap .glynt-sitemap__links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.glynt-sitemap .glynt-sitemap__links li,
#page-container .glynt-sitemap .glynt-sitemap__links li {
  margin: 0 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--color-border, #E2E2DB);
  list-style: none !important;
}
.glynt-sitemap .glynt-sitemap__links li::before { content: none !important; }
#page-container .glynt-sitemap .glynt-sitemap__links a {
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-body, #1B1B1B) !important;
  text-decoration: none !important;
}
#page-container .glynt-sitemap .glynt-sitemap__links a:hover { color: var(--color-primary-brand, #188F28) !important; }
@media (max-width: 980px) { .glynt-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .glynt-sitemap { grid-template-columns: minmax(0, 1fr); gap: var(--space-5, 32px); } }

/* References list — numbered sources, 2 columns on desktop, reads down then across.
   <div class="glynt-refs"><h3 class="glynt-refs__head">References</h3><ol class="glynt-refs__list">
   <li id="ref-1"><span class="glynt-refs__num">1</span><div><a class="glynt-refs__title">…</a><span class="glynt-refs__src">…</span></div></li> */
.glynt-refs { padding-top: var(--space-3, 16px); border-top: 2px solid var(--color-dark-3, #003400); }
.glynt-refs .glynt-refs__head,
#page-container .glynt-refs .glynt-refs__head {
  margin: 0 0 var(--space-3, 16px) !important;
  padding: 0 !important;
  font-family: var(--font-display, 'Sora', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--color-primary-brand, #188F28) !important;
}
.glynt-refs .glynt-refs__list,
#page-container .glynt-refs .glynt-refs__list {
  columns: 2;
  column-gap: var(--space-6, 48px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.glynt-refs .glynt-refs__list li,
#page-container .glynt-refs .glynt-refs__list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-2, 8px);
  break-inside: avoid;
  margin: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--color-border, #E2E2DB);
  list-style: none !important;
  scroll-margin-top: 120px;
}
.glynt-refs .glynt-refs__list li::before { content: none !important; }
.glynt-refs .glynt-refs__num {
  font-family: var(--font-data, 'Sora', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-brand, #188F28);
}
#page-container .glynt-refs .glynt-refs__list a {
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-dark-2, #075920) !important;
  text-decoration: none !important;
  text-wrap: pretty;
}
#page-container .glynt-refs .glynt-refs__list a:hover {
  color: var(--color-primary-brand, #188F28) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.glynt-refs .glynt-refs__body {
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-body, #1B1B1B);
}
.glynt-refs .glynt-refs__src {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body, 'Urbanist', sans-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted, #64645E);
}
@media (max-width: 767px) { .glynt-refs .glynt-refs__list, #page-container .glynt-refs .glynt-refs__list { columns: 1; } }