.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================================
   Settlement Services — Global CSS (Elementor export, single-file merge)
   Regenerated AS-IS from the theme's own assets/css/{global,components,
   responsive}.css (2026-08-21 replacement: gold removed, --color-accent
   now equals --color-primary, .hero/.cta-panel moved to the flat dark
   navy --color-surface-dark shared with the footer, new .hero--light
   homepage modifier). No separate "lighter blue" identity is kept here
   anymore — this file now tracks the theme source's own design decisions
   directly, PART 1/2/3 concatenated for Elementor's single global.css
   Custom CSS field.
   Two non-color structural bugs the theme source itself doesn't fix yet
   are reapplied here, since they directly cause the exact "text/buttons
   not visible" symptoms being checked for:
   (1) .pillar-card's last-child divider removal breaks inside multi-
       column grids (technology.html's 3-across Digital Servicing Portal
       section) — the third card loses its divider even though it's a
       sibling column, not the end of a list.
   (2) .footer-contact (phone/email) and .footer-legal__links (Privacy
       Policy) have no explicit :hover/:visited color, so they can fall
       back to the browser/host-theme's default link-hover blue instead
       of staying light on the dark footer.
   global.css itself is untouched by this file; a full backup of the
   pre-variant original is saved alongside it as global.original-backup.css.
   ========================================================================= */

/* =========================================================================
   PART 1 — global.css (design tokens & base styles)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* --- Color: brand ------------------------------------------------------
     Gold removed entirely, per direct client request — this palette is
     remapped to settlementgroup.io's own live stylesheet values (read
     directly from that site's actual :root custom properties via
     DevTools), using their real --brand-600 (lighter than the first
     color-match pass's brand-700 guess). Variable NAMES are unchanged so
     every existing rule keeps working; only the hex VALUES move.
     --color-accent is set equal to --color-primary — settlementgroup's own
     site uses its blue as the only real "accent" color in practice.
     Because --color-accent === --color-primary, several rules that used
     to rely on --color-accent for foreground text/icons against a
     --color-primary background became invisible (same color on same
     color) — every one of those is called out with its own comment below
     (.eyebrow--on-dark, .italic-accent, .hero__trust-item svg, .icon-block
     hover states, .btn-on-dark.btn-secondary). */
  --color-primary: #3D7099;        /* settlementgroup --brand-600 — primary brand accent: buttons, CTAs, brand fills */
  --color-primary-dark: #234866;   /* settlementgroup --brand-800 — pressed/hover state of primary */
  --color-primary-light: #7BA6C8;  /* settlementgroup --brand-400 — lighter hover/tint variant of primary */
  --color-secondary: #DDE3E8;      /* settlementgroup --ink-200 — secondary UI accents, dividers (NOTE: this role changed from a near-black text color to a light gray — do not reuse the old "--color-secondary = dark, accessible-on-gold" assumption anywhere) */
  --color-accent: #3D7099;         /* settlementgroup --brand-600, intentionally identical to --color-primary — buttons, eyebrow accents */
  --color-accent-dark: #234866;    /* settlementgroup --brand-800 — accent hover state; clears WCAG AA on white with wide margin */
  --color-accent-soft: #E6EFF6;    /* settlementgroup --brand-100 — accent-tinted badges/backgrounds, and the "text on the flat hero/cta blue" fix (see .eyebrow--on-dark) */

  --color-background: #FFFFFF;
  --color-background-alt: #FAFBFC; /* settlementgroup --bg-soft — soft neutral section backgrounds */
  --color-surface: #FFFFFF;        /* cards / panels */
  --color-surface-dark: #1A3A52;   /* settlementgroup --brand-900, their darkest navy — .section--dark, .process-step__num, .site-footer, .skip-link (not pure black — no dark/near-black tones remain in this palette) */

  --color-text: #0D1B27;           /* settlementgroup --ink-900 — headings and body copy (darkest tone in the palette, near-black with a faint blue undertone) */
  --color-text-muted: #5C6B78;     /* settlementgroup --ink-500 — secondary/supporting text */
  --color-text-inverse: #FFFFFF;
  /* NOT settlementgroup's own --ink-200 (#DDE3E8) verbatim: that value
     measures only ~4.08:1 against the new flat --color-primary hero/
     cta-panel background — this token is used at regular body-text size
     in both places (.hero__lede, .cta-panel__desc), which needs the
     4.5:1 AA-normal minimum, not just the 3:1 large-text one. Recomputed
     to the same hex already established as accessible on this exact
     background by the accent-soft fix below (#E6EFF6, 4.54:1 on
     --color-primary) — still comfortably passes (8-10:1) everywhere else
     this token is used on the darker --color-surface-dark/
     --color-primary-dark backgrounds too. */
  --color-text-inverse-muted: #E6EFF6;

  --color-border: #DDE3E8;         /* settlementgroup --ink-200 — card/input borders, dividers */
  --color-border-dark: rgba(255, 255, 255, 0.14);

  --color-success: #1E7A4C;        /* no settlementgroup equivalent — kept as-is (functional/system color, not a brand color) */
  --color-focus: #3D7099;          /* settlementgroup --brand-600, matches new primary — focus ring */

  /* --- Typography ---------------------------------------------------- */
  --font-heading: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-display: clamp(2.75rem, 1.8rem + 4.2vw, 5rem);

  --lh-tight: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-eyebrow: 0.14em;

  /* --- Spacing scale --------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --section-space: clamp(3.5rem, 3rem + 3vw, 7rem);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1280px;
  --container-narrow: 860px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* --- Radius / shadow / border ------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* rgba tint moved from neutral black to settlementgroup --brand-700's
     RGB (46, 91, 124) — they tint their own shadows with brand color
     rather than plain black; blur/spread/offset numbers are unchanged
     (layout, not color). */
  --shadow-sm: 0 1px 2px rgba(46, 91, 124, 0.06), 0 1px 1px rgba(46, 91, 124, 0.04);
  --shadow-md: 0 8px 24px rgba(46, 91, 124, 0.08), 0 2px 8px rgba(46, 91, 124, 0.06);
  --shadow-lg: 0 24px 48px rgba(46, 91, 124, 0.14), 0 8px 16px rgba(46, 91, 124, 0.08);
  --shadow-focus: 0 0 0 3px rgba(61, 112, 153, 0.35); /* rgb of the new --color-primary above */

  /* --- Motion -------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 480ms;

  /* --- Z-index scale --------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-overlay: 120;
  --z-modal: 130;
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: hidden guards against the .site-header/.site-footer full-bleed
   breakout (margin-inline: calc(50% - 50vw) — see components.css) causing a
   horizontal scrollbar: 100vw includes the desktop scrollbar's own width,
   which %-based layout widths don't, so the breakout can overshoot the
   visible viewport by a few px without this. Harmless no-op otherwise. */
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

/* Focus visibility (WCAG 2.2 AA) */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -60px;
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-sm); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}
/* --color-accent (#3D7099) is now IDENTICAL to --color-primary, which
   .hero/.cta-panel use as their flat background — this text/dash would
   render the same color as its own background, invisible.
   --color-accent-soft (light icy-blue) reads clearly on both that flat
   hero blue AND the darker --color-surface-dark navy (.section--dark),
   unlike --color-accent which is now too close in luminance to both. */
.eyebrow--on-dark { color: var(--color-accent-soft); }
.eyebrow--on-dark::before { background: var(--color-accent-soft); }

.text-body-lg { font-size: var(--fs-body-lg); }
.text-small { font-size: var(--fs-small); }
.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }
.text-inverse-muted { color: var(--color-text-inverse-muted); }
.text-center { text-align: center; }
/* Interior-page .hero and .cta-panel now use the same dark navy as the
   footer (--color-surface-dark, #1A3A52) — see the comment above .hero in
   PART 2. --color-text (#0D1B27, near-black) was the right choice for the
   OLD flat medium-blue --color-primary background (~3.2:1 there), but on
   this much darker navy it drops to ~1.5:1 (dark-on-dark, effectively
   invisible). --color-primary-light (#7BA6C8) is the fix: 4.59:1 against
   --color-surface-dark, clearing the 4.5:1 AA-normal minimum (not just
   large-text), and reads as a clear, distinct accent against the dark
   navy. (The homepage hero is the one exception — it uses a white
   background via .hero--light, which overrides this back to
   --color-accent; see that rule in PART 2.) Use this class exclusively
   inside large heading text on dark/hero backgrounds — never on light
   backgrounds or at body-text size. */
.italic-accent { font-style: italic; color: var(--color-primary-light); }

/* -------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-space); }
.section--alt { background: var(--color-background-alt); }
.section--dark {
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--color-text-inverse);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-xl);
}
.section-head--center { margin-inline: auto; text-align: center; }

.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.flex {
  display: flex;
  gap: var(--space-sm);
}
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.flex--col { flex-direction: column; }

/* Scroll-reveal base state (progressively enhanced by main.js).
   Visible by default — main.js opts elements INTO the hidden
   pre-animation state (via the "js-anim" class on <html>) only once it
   confirms it's actually running (IntersectionObserver exists, visitor
   doesn't prefer reduced motion). This means .reveal content never gets
   stuck invisible if main.js fails to load or errors out for any reason
   (caching/minify plugin stripping it, ad blocker, slow network, etc.) —
   a real risk on a live WordPress + Elementor deployment where scripts
   can end up shipped inline inside an Elementor HTML widget instead of
   properly enqueued. This replaces the previous fail-closed approach
   (.reveal hidden by default, requiring a "no-js"/"js-disabled" class to
   reveal it) with a fail-open one. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================================
   PART 2 — components.css (buttons, nav, cards, footer, etc.)
   ========================================================================= */

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
  white-space: nowrap;
  min-height: 44px; /* touch target */
}
.btn svg { flex-shrink: 0; width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-standard); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-accent);
  /* --color-text is now a dark navy (#0D1B27) in the same hue family as
     --color-accent's new medium blue (#3D7099) — together they measure
     only ~3.2:1, nearly the "same-family, low-contrast" problem this
     comment used to warn about for --color-primary-dark instead.
     --color-text-inverse (white) measures ~5.4:1 here and matches the
     :hover state below, which already used white for the same reason.
     (--color-secondary is no longer a dark color post color-match — see
     its :root comment — so it's no longer a valid substitute here.) */
  color: var(--color-text-inverse);
  border: 1.5px solid var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); box-shadow: var(--shadow-md); color: var(--color-text-inverse); }

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary); background: var(--color-background-alt); }

/* Back to a transparent + 14%-opacity white border (--color-border-dark)
   "ghost button" outline — this had briefly been solid-filled with
   --color-primary-dark while .hero/.cta-panel used a flat, fairly
   saturated medium-blue background (against which a faint border barely
   registered). Now that .hero/.cta-panel are the same dark navy as the
   footer (--color-surface-dark), that solid fill became a real bug: its
   base fill (#234866 vs. #1A3A52) only reaches ~1.24:1 against the new
   background — barely distinguishable — and its :hover fill was
   literally --color-surface-dark, i.e. IDENTICAL to the section behind
   it, so hovering made the button vanish entirely. A light border reads
   clearly against a properly dark background (that's the original reason
   this pattern existed), so it's the correct fix here, not a workaround. */
.btn-on-dark.btn-secondary {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-border-dark);
}
.btn-on-dark.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--color-text-inverse); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0;
  border-radius: 0;
  color: var(--color-accent-dark);
  font-weight: var(--fw-semibold);
  border-bottom: 1.5px solid transparent;
}
.btn-text:hover { border-color: currentColor; }
.btn-text svg { flex-shrink: 0; width: 15px; height: 15px; }

.btn-lg { padding: 1.05rem 2rem; font-size: var(--fs-body); }
.btn-block { width: 100%; justify-content: center; }

/* -------------------------------------------------------------------------
   SITE HEADER / NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
  /* Plain, normal-flow header — no position: sticky, no position: fixed.
     Both were tried and reverted on the live WordPress + Elementor site:
     sticky silently breaks the moment any ancestor up the chain has
     non-visible overflow, and fixed breaks differently (confined to a
     boxed width instead of the real viewport) the moment an ancestor has
     a transform/filter/perspective/will-change set — and something up
     the Elementor Container chain was hitting one or the other with no
     reliable way to detect its exact class from CSS alone. Normal flow
     has neither failure mode; the tradeoff is the header scrolls away
     with the page instead of staying pinned. position: relative (not
     sticky/fixed) is still needed here so .site-header::before's
     position: absolute + inset: 0 covers exactly this header's own box
     instead of the nearest OTHER positioned ancestor up the tree. */
  position: relative;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
  /* Full-bleed regardless of the width of whatever wraps this in
     Elementor — see the same rule on .site-footer below for why.
     !important because Elementor's own Container width classes/inline
     styles can otherwise win the specificity fight. This margin-based
     breakout works from normal flow regardless of any ancestor's
     transform/filter/overflow — none of those affect how a
     non-positioned block computes its own width/margin, only
     sticky/fixed's containing-block lookup, which no longer applies now
     that this is neither. */
  width: auto !important;
  max-width: none !important;
  margin-inline: calc(50% - 50vw) !important;
}
/*
 * The frosted-glass background lives on a ::before pseudo-element rather
 * than directly on .site-header. A `backdrop-filter` (like `transform` or
 * `filter`) on an element establishes a new containing block for any
 * `position: fixed` descendant — and .nav-primary / .nav-overlay (the
 * mobile nav drawer) are descendants of .site-header. Putting the filter
 * here instead keeps .site-header itself filter/transform-free, so the
 * fixed-position mobile drawer still sizes and positions itself against
 * the real viewport instead of the ~72px-tall header bar.
 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.1rem;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img,
.site-header__logo .custom-logo { height: 36px; width: auto; display: block; }

/* flex: 1 makes .nav-primary claim all the space between the logo and its
   own right edge, so .nav-primary__list (also flex: 1, justify-content:
   center below) has genuine room to center itself in — not just sit
   flush-left against whatever's left after the logo. Both are overridden
   entirely by the mobile drawer's own flex-direction/position rules in
   the 1024px media query, so this only affects desktop. */
.nav-primary { display: flex; align-items: center; gap: var(--space-lg); flex: 1; }
.nav-primary__list { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); flex: 1; }
.nav-primary__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding: 0.5rem 0.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-primary__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transition: right var(--duration-base) var(--ease-standard);
  border-radius: var(--radius-pill);
}
.nav-primary__link:hover::after,
.nav-primary__item.is-open > .nav-primary__link::after { right: 0; }
.nav-primary__item { position: relative; }
.nav-caret { width: 9px; height: 9px; transition: transform var(--duration-base) var(--ease-standard); }
.nav-primary__item.is-open .nav-caret { transform: rotate(180deg); }

/* Invisible hover bridge over the 14px visual gap between the nav link and
   .nav-dropdown below it (see that rule's `top: calc(100% + 14px)`).
   .nav-dropdown is position:absolute, so it doesn't extend
   .nav-primary__item's own box downward — the empty gap between the link
   and the dropdown falls OUTSIDE .nav-primary__item's actual hoverable
   area. Moving the cursor from the link down into the dropdown crosses
   that gap, losing :hover along the way and closing the menu before the
   click on a submenu item can register — exactly the "submenu disappears
   the moment you try to pick something" bug. This bridge fills that gap
   so the item stays hovered the whole way down. Only appears once the
   item is already hovered/open, so it can't accidentally intercept clicks
   on whatever sits just below the header the rest of the time. */
.nav-primary__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  display: none;
}
.nav-primary__item:hover::after,
.nav-primary__item.is-open::after {
  display: block;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  /* --dropdown-shift (set on .nav-primary__item by main.js's
     positionDropdown()) nudges this centered position back on-screen when
     centering under an edge item — e.g. the first/leftmost nav item —
     would otherwise push part of the dropdown past the viewport edge.
     Defaults to 0px so nothing shifts until JS measures an actual
     overflow. */
  --dropdown-shift: 0px;
  transform: translate(calc(-50% + var(--dropdown-shift)), 8px);
  min-width: 300px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
  z-index: var(--z-dropdown);
}
.nav-primary__item.is-open .nav-dropdown,
.nav-primary__item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--dropdown-shift)), 0);
  transition-delay: 0s;
}
.nav-dropdown__link {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--color-text);
}
.nav-dropdown__link:hover { background: var(--color-background-alt); }
.nav-dropdown__link strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.nav-dropdown__link span { color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.15rem; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-dark);
  color: var(--color-text-inverse) !important;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.nav-cta:hover { background: var(--color-primary); }
.nav-cta svg { width: 15px; height: 15px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  /* !important: the active theme/host site may ship its own default
     button background/border reset with higher specificity than this
     class alone. */
  background: transparent !important;
  border: none !important;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text) !important;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(0) rotate(-45deg); }

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 5vw, 6rem) clamp(3.5rem, 6vw, 7rem);
  /* Flat --color-surface-dark fill (the same dark navy used on the
     footer), per client request to match that blue rather than the
     lighter flat --color-primary this used before. No gradient — the
     radial-glow decoration that used to live in a .hero::before
     pseudo-element is removed entirely too (it was also a gradient), per
     the earlier "no dark, no gradient backgrounds" direction; this is a
     flat fill, just a darker one. White text on this background measures
     ~11.9:1. See the .hero--light modifier below for the homepage's white
     variant, and the .italic-accent comment in PART 1 for the "same
     near-black text on a much darker background" fix this required. */
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero__eyebrow { margin-bottom: var(--space-md); }
.hero h1, .hero h2, .hero h3,
.hero__title { color: var(--color-text-inverse); font-size: var(--fs-display); margin-bottom: var(--space-md); }
.hero__lede { font-size: var(--fs-body-lg); color: var(--color-text-inverse-muted); max-width: 44ch; margin-bottom: var(--space-lg); }
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
.hero__trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); color: var(--color-text-inverse-muted); }
/* Same invisible-on-hero issue as .italic-accent/.eyebrow--on-dark above —
   --color-accent now equals the flat .hero background color exactly. */
.hero__trust-item svg { width: 16px; height: 16px; color: var(--color-accent-soft); flex-shrink: 0; }

.hero__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.14);
  aspect-ratio: 4 / 5;
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual-badge {
  position: absolute;
  left: var(--space-md); bottom: var(--space-md);
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  max-width: 260px;
}
.hero__visual-badge strong { display: block; font-size: 1.35rem; font-family: var(--font-heading); color: var(--color-text-inverse); }
.hero__visual-badge span { font-size: 0.78rem; color: var(--color-text-inverse-muted); }

/* Homepage hero only ("section 1" of the landing page) — white background
   instead of the flat blue every other page's plain .hero uses. Interior
   pages (About, Contact, Policy Servicing, etc.) keep the blue .hero
   unchanged; this is an additional modifier class added only to the
   homepage hero section, not a change to .hero itself. Every child element
   above was specifically tuned for a dark-blue background — each override
   below flips just the pieces that need it back to their normal
   light-background treatment (the same treatment .eyebrow/.italic-accent/
   etc. already use elsewhere on white sections). Contrast improves here,
   not just changes: --color-accent on white is 5.28:1 (passes AA at any
   text size), versus the old --color-text-on-primary's 3.30:1 (large-text
   only). */
.hero--light {
  background: var(--color-background);
  color: var(--color-text);
}
.hero--light .hero__title,
.hero--light h1, .hero--light h2, .hero--light h3 {
  color: var(--color-text);
}
.hero--light .hero__lede,
.hero--light .hero__trust-item {
  color: var(--color-text-muted);
}
.hero--light .hero__trust-item svg { color: var(--color-accent-dark); }
.hero--light .italic-accent { color: var(--color-accent); }
.hero--light .hero__visual { border-color: var(--color-border); }

/* -------------------------------------------------------------------------
   STAT BAND
   ------------------------------------------------------------------------- */
.stat-band {
  background: var(--color-background-alt);
  border-bottom: 1px solid var(--color-border);
}
.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}
.stat-card { text-align: center; }
.stat-card__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  display: block;
  line-height: 1;
  margin-bottom: var(--space-2xs);
}
.stat-card__label { font-size: var(--fs-small); color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   CARDS — services / audiences / pillars
   ------------------------------------------------------------------------- */
.card {
  /* !important throughout this block: Elementor's own widget/theme
     defaults (card/box padding, borders, flex alignment) can otherwise
     win the specificity fight against this plain single-class .elementor-kit-6 —
     same reasoning as .site-header/.site-footer above. */
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-lg) !important;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) !important; border-color: transparent !important; }

.icon-block {
  width: 52px !important; height: 52px !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-accent-soft) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: var(--space-md) !important;
  transition: background var(--duration-base) var(--ease-standard);
}
.icon-block svg { width: 26px !important; height: 26px !important; color: var(--color-accent-dark) !important; }
.card:hover .icon-block { background: var(--color-accent) !important; }
/* Same fix as .btn-primary above — the icon-block background on hover is
   --color-accent (#3D7099), the same dark-blue family as --color-text
   (#0D1B27), so the icon nearly disappeared into it. White reads clearly
   against it instead. */
.card:hover .icon-block svg { color: var(--color-text-inverse) !important; }

.service-card__title { font-size: var(--fs-h4); margin-bottom: var(--space-2xs); }
.service-card__desc { color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: var(--space-sm); }
.service-card__link { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-accent-dark); display: inline-flex; align-items: center; gap: 0.3rem; }
.service-card__link svg { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-standard); }
.service-card__link:hover svg { transform: translateX(3px); }

.audience-card { text-align: left; }
.audience-card__title { font-size: var(--fs-body-lg); font-family: var(--font-heading); margin-bottom: var(--space-2xs); }

.pillar-card { display: flex !important; gap: var(--space-md) !important; align-items: flex-start !important; padding: var(--space-md) 0 !important; border-bottom: 1px solid var(--color-border) !important; }
/* border-bottom-width only via :last-child, not the border-bottom
   shorthand — the shorthand would also reset border-bottom-color to
   currentColor (initial), which breaks the .grid--3/.grid--4 override
   right below: it re-enables the line but, without touching color itself,
   would inherit that reset currentColor (solid white) instead of the same
   var(--color-border)/inline-overridden color its sibling columns use —
   two visibly different-colored dividers in the same row. */
.pillar-card:last-child { border-bottom-width: 0 !important; }
/* :last-child only makes sense as "no line" for a single-column, stacked
   list (the homepage Technology section) — there the last item really is
   the end of the list. Inside a multi-column grid (technology.html's
   Digital Servicing Portal, 3 pillar-cards side by side in .grid--3), the
   third card is only "last" in DOM order, not visually last — it's a
   sibling column, not the end of a vertical stack, so it still needs its
   own divider line like the other two. Without this, that third column's
   divider silently disappears while its siblings keep theirs. */
.grid--3 .pillar-card:last-child,
.grid--4 .pillar-card:last-child {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
}
.pillar-card .icon-block { margin-bottom: 0 !important; flex-shrink: 0 !important; }
/* color has no !important: several instances (Technology page, homepage
   Technology section) intentionally override it inline (style="color:#fff")
   for on-dark-background variants — !important here would win over that
   inline style and force dark text unreadable on a dark card. */
.pillar-card__title { font-size: var(--fs-body-lg) !important; margin-bottom: var(--space-3xs) !important; color: var(--color-text); font-weight: var(--fw-semibold) !important; }
/* color has no !important: on-dark instances add .text-inverse-muted for a
   lighter, dark-background-appropriate tone — !important here would win
   over that class's (non-important) color rule regardless of it too. */
.pillar-card__desc { color: var(--color-text-muted); font-size: var(--fs-small) !important; }
/* .pillar-card__desc and .text-inverse-muted are both single-class
   .elementor-kit-6s (equal specificity) — since .pillar-card__desc is declared
   later in this file than .text-inverse-muted (in PART 1's typography
   utilities), it wins the tie by source order alone, forcing the muted
   GRAY text even on on-dark instances that add .text-inverse-muted
   specifically to opt out of it (e.g. the homepage Technology section,
   technology.html's Digital Servicing Portal). A matching two-class
   override guarantees the lighter on-dark tone wins regardless of source
   order. */
.pillar-card__desc.text-inverse-muted { color: var(--color-text-inverse-muted); }

/* -------------------------------------------------------------------------
   PROCESS STEPS
   ------------------------------------------------------------------------- */
.process { position: relative; }
.process__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); position: relative; }
.process__list::before {
  content: "";
  position: absolute;
  top: 28px; left: 8%; right: 8%;
  height: 1px;
  background: var(--color-border);
}
.process-step { position: relative; }
.process-step__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}
.process-step__title { font-size: var(--fs-body-lg); margin-bottom: var(--space-2xs); color: var(--color-text); font-weight: var(--fw-semibold); }
.process-step__desc { color: var(--color-text-muted); font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   CTA PANELS
   ------------------------------------------------------------------------- */
.cta-panel {
  /* Flat --color-surface-dark fill — same dark navy as the footer/.hero,
     per client request. No gradient — the radial-glow decoration that
     used to live in a .cta-panel::after pseudo-element is removed
     entirely too (it was also a gradient), per the earlier "no dark, no
     gradient backgrounds" direction — same reasoning as .hero above. */
  background: var(--color-surface-dark);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 3vw, 4.5rem);
  color: var(--color-text-inverse);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-panel__inner { position: relative; max-width: 640px; margin-inline: auto; }
.cta-panel__title { color: var(--color-text-inverse); margin-bottom: var(--space-sm); }
.cta-panel__desc { color: var(--color-text-inverse-muted); margin-bottom: var(--space-lg); }
.cta-panel__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

.portal-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 3vw, 3.5rem);
}
.portal-panel__badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}
.portal-panel__visual {
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: var(--space-lg);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   AFFILIATES
   ------------------------------------------------------------------------- */
.affiliate-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.affiliate-card__logo { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 1.25rem; color: var(--color-text); }
.affiliate-card__desc { color: var(--color-text-muted); font-size: var(--fs-small); flex-grow: 1; }

/* -------------------------------------------------------------------------
   ACCORDION
   ------------------------------------------------------------------------- */
.accordion__item {
  border-bottom: 1px solid var(--color-border);
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-size: var(--fs-body-lg);
}
.accordion__icon { flex-shrink: 0; width: 20px; height: 20px; transition: transform var(--duration-base) var(--ease-standard); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-standard);
}
.accordion__panel-inner { padding-bottom: var(--space-md); color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------------- */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-sm); }
.form-group label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text); }
.form-group .hint { font-size: 0.78rem; color: var(--color-text-muted); }
.form-control {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: var(--fs-body);
  background: var(--color-background);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  min-height: 44px;
}
textarea.form-control { min-height: 120px; resize: vertical; }
.form-control:focus-visible { border-color: var(--color-focus); box-shadow: var(--shadow-focus); }
.form-microcopy { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--space-sm); }
.form-microcopy svg { width: 14px; height: 14px; color: var(--color-success); }

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-text-inverse-muted);
  padding-block: var(--space-2xl) var(--space-lg);
  /* Full-bleed regardless of the width of whatever wraps this in Elementor
     (e.g. a "Boxed" Container around the HTML widget) — without this, the
     footer's dark background only spans that Container's content width
     instead of the full viewport. !important because Elementor's own
     Container width classes/inline styles can otherwise win the
     specificity fight. */
  width: auto !important;
  max-width: none !important;
  margin-inline: calc(50% - 50vw) !important;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border-dark);
}
.footer-brand__logo { margin-bottom: var(--space-md); }
.footer-brand__logo img { height: 31px; width: auto; display: block; }
.footer-brand__desc { max-width: 34ch; font-size: var(--fs-small); }
.footer-col__title { color: var(--color-text-inverse); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-sm); }
.footer-col__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-col__list a { font-size: var(--fs-small); transition: color var(--duration-base) var(--ease-standard); }
.footer-col__list a:hover { color: var(--color-text-inverse); }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-small); }
.footer-contact svg { flex-shrink: 0; width: 16px; height: 16px; }
/* .footer-contact (phone/email) and .footer-legal__links (Privacy Policy)
   are the only footer links with no explicit :hover/:visited rule of their
   own — they were relying on the plain `a { color: inherit; }` reset up in
   PART 1 to keep them light on this dark footer. .footer-col__list a right
   above already has its own explicit :hover color and never showed this
   problem; these two didn't, and could fall back to the browser/host-theme
   default link-hover blue instead. */
.footer-contact a:hover, .footer-contact a:visited,
.footer-legal__links a:hover, .footer-legal__links a:visited { color: var(--color-text-inverse); }
.service-card__desc svg { flex-shrink: 0; width: 16px; height: 16px; }
.footer-legal {
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.8rem;
}
.footer-legal__links { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   BADGES
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  background: var(--color-background-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* -------------------------------------------------------------------------
   BLOG — reskins Elementor PRO's native "Posts" widget to match this
   design system (cards, eyebrow badges, buttons, pagination) with zero
   copy/paste: this file is already enqueued site-wide, so the moment an
   editor drops a Posts widget onto any page it picks up this styling
   automatically. Targets the widget's own stable markup/classes
   (elementor-post*, elementor-pagination) rather than anything custom.
   See elementor/instructions/blog.md for full build steps + how to
   customize every piece below.
   ------------------------------------------------------------------------- */

/* Card skin (works with the widget's "Cards" or "Classic" skin) */
.elementor-widget-posts .elementor-post {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.elementor-widget-posts .elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.elementor-widget-posts .elementor-post__card { padding: 0; }
.elementor-widget-posts .elementor-post__thumbnail__link { display: block; }
.elementor-widget-posts .elementor-post__thumbnail {
  aspect-ratio: 8 / 5;
  object-fit: cover;
  width: 100%;
}
.elementor-widget-posts .elementor-post__text {
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

/* Category "badge" (Terms meta) — styled like .eyebrow, not a raw link chip */
.elementor-widget-posts .elementor-post__badge {
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  background: none;
  padding: 0;
  margin-bottom: var(--space-2xs);
}

.elementor-widget-posts .elementor-post__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-2xs);
}
.elementor-widget-posts .elementor-post__title a { color: var(--color-primary); }
.elementor-widget-posts .elementor-post__title a:hover { color: var(--color-primary-dark); }

.elementor-widget-posts .elementor-post__meta-data {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--space-sm);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.elementor-widget-posts .elementor-post__excerpt {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.elementor-widget-posts .elementor-post__excerpt p { margin: 0 0 var(--space-sm); }

.elementor-widget-posts .elementor-post__read-more {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.elementor-widget-posts .elementor-post__read-more:hover { color: var(--color-primary-dark); }
/* Faux arrow to match .service-card__link elsewhere on the site, since the
   Posts widget's Read More text has no built-in icon control. */
.elementor-widget-posts .elementor-post__read-more::after {
  content: "\2192";
  transition: transform var(--duration-base) var(--ease-standard);
}
.elementor-widget-posts .elementor-post__read-more:hover::after { transform: translateX(3px); }

/* Pagination (Numbers layout) — styled like small pill buttons */
.elementor-widget-posts .elementor-pagination,
.elementor-widget-posts nav.elementor-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}
.elementor-widget-posts .elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.elementor-widget-posts .elementor-pagination .page-numbers:hover {
  border-color: var(--color-primary);
  background: var(--color-background-alt);
}
.elementor-widget-posts .elementor-pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.elementor-widget-posts .elementor-pagination .page-numbers.dots {
  border: none;
  color: var(--color-text-muted);
}

/* Single blog post body copy (post.php / single.php the_content output) —
   gives real paragraph/heading/list/quote rhythm to post body text, since
   .entry-content otherwise only sets font-size via the .text-body-lg
   utility applied in single.php. */
.entry-content h2 { font-size: var(--fs-h3); margin-top: var(--space-xl); }
.entry-content h3 { font-size: var(--fs-h4); margin-top: var(--space-lg); }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: var(--space-md); }
.entry-content ul, .entry-content ol { padding-left: 1.25em; list-style: revert; }
.entry-content img { border-radius: var(--radius-md); margin-block: var(--space-md); }
.entry-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  font-style: italic;
  color: var(--color-text-muted);
}
.entry-content a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-border); }
.entry-content a:hover { text-decoration-color: currentColor; }

/* =========================================================================
   PART 3 — responsive.css (breakpoint overrides)
   Breakpoints tested: 1440 / 1200 / 1024 / 768 / 480 / 390.
   ========================================================================= */

/* ----------------------------- 1200px ----------------------------------- */
@media (max-width: 1200px) {
  :root { --container-pad: 2rem; }
  .hero__grid { gap: var(--space-xl); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
}

/* ----------------------------- 1024px ----------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 480px; margin-inline: auto; aspect-ratio: 16/10; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stat-band__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .process__list::before { display: none; }
  .portal-panel { grid-template-columns: 1fr; }
  .portal-panel__visual { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  /* Nav collapses to a mobile drawer */
  .nav-primary {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    height: 100vh;
    height: 100dvh;
    width: min(360px, 86vw);
    background: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    padding: 5.5rem var(--space-lg) var(--space-lg);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-standard);
    z-index: var(--z-overlay);
    overflow-y: auto;
    gap: var(--space-lg);
  }
  .nav-primary.is-open { transform: translateX(0); }
  /* flex: 0 1 auto and justify-content: flex-start undo the desktop
     centering rule (.nav-primary__list { flex: 1; justify-content: center; })
     — inside this mobile drawer's column layout, flex: 1 on the list makes
     it grow to fill all remaining vertical space, and justify-content:
     center then centers the (few, short) nav items inside that huge box,
     stranding a large empty gap above and below them instead of a normal
     top-anchored list. */
  .nav-primary__list { flex: 0 1 auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; }
  .nav-primary__item { width: 100%; border-bottom: 1px solid var(--color-border); }
  .nav-primary__link { padding: 0.9rem 0; width: 100%; justify-content: space-between; }
  .nav-primary__link::after { display: none; }
  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    display: none;
    padding: 0 0 var(--space-sm);
    min-width: 0;
  }
  /* `.nav-primary__item.is-open .nav-dropdown` / `:hover` (desktop centering
     + reveal transform, two classes = higher specificity than the plain
     `.nav-dropdown` reset just above, one class) still wins over that reset
     even inside this mobile-only media query — specificity beats source
     order regardless of which media query either rule sits in. Left
     unfixed, opening any accordion item re-applies translateX(-50%) here
     too, shoving the whole submenu half its own width off to the left and
     clipping its text — needs its own explicit override at matching
     specificity. */
  .nav-primary__item.is-open .nav-dropdown,
  .nav-primary__item:hover .nav-dropdown {
    transform: none;
  }
  /* .nav-dropdown__link's 0.7rem 0.8rem padding exists for the floating
     desktop card (needs breathing room inside its own border/shadow) — in
     this flat mobile accordion there's no card, so that same horizontal
     padding just shifts each sub-item's text start further right than the
     "Who We Serve" trigger text sitting directly above it, at 0 horizontal
     padding. Matching horizontal padding to the trigger keeps every level
     flush at the same left edge; vertical padding is kept for tap targets. */
  .nav-dropdown__link { padding-left: 0; padding-right: 0; }
  .nav-primary__item.is-open .nav-dropdown { display: block; }
  .nav-toggle { display: inline-flex !important; }
  .nav-cta { order: -1; }

  .nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: calc(var(--z-overlay) - 1);
    opacity: 0; visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-standard);
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }
}

/* ------------------------------ 768px ------------------------------------ */
@media (max-width: 768px) {
  .section { padding-block: clamp(2.5rem, 8vw, 4rem); }
  .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
  .stat-band__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .process__list { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > * { grid-column: auto; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .pillar-card { flex-direction: column; }
}

/* ------------------------------ 480px ------------------------------------ */
@media (max-width: 480px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero { padding-block: 2.5rem 3rem; }
  .hero__visual { aspect-ratio: 4/3; }
  .cta-panel { padding: 2rem 1.25rem; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions .btn { width: 100%; }
  .site-header__bar { padding-block: 0.85rem; }
}

/* ------------------------------ 390px ------------------------------------ */
@media (max-width: 390px) {
  :root { --container-pad: 1.1rem; }
  .stat-card__value { font-size: 1.75rem; }
  .icon-block { width: 46px; height: 46px; }
}/* End custom CSS */