/* ============================================================
   Genstone — Global Styles
   Shared: reset, typography, layout helpers, nav, footer, buttons.
   ============================================================ */
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
img, video { display: block; max-width: 100%; }
body {
  font-family: var(--gs-font);
  font-size: 16px;
  color: var(--gs-text);
  line-height: 1.65;
  background-color: var(--gs-white);
  background-image:
    radial-gradient(circle at top right, color-mix(in srgb, var(--gs-blue) 18%, transparent) 0%, transparent 70%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--gs-blue) 18%, transparent) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 800px 800px, 800px 800px;
  background-position: top right, bottom right;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ──
   Scoped under `body` (specificity 0,0,2) so these brand defaults outrank the
   Tailwind preflight reset (`h1..h6 { font-size: inherit; font-weight: inherit }`,
   specificity 0,0,1), which is enqueued after main.css. A Tailwind utility class
   on a heading (0,1,0) still wins, so utility-first markup is unaffected. */
body h1, body h2, body h3, body h4 {
  font-family: var(--gs-font-display);
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
  text-wrap: balance;
}
body h1 { font-size: var(--gs-h1); }
body h2 { font-size: var(--gs-h2); line-height: 1.15; }
body h3 { font-size: var(--gs-h3); line-height: 1.2; letter-spacing: -0.02em; }
body h4 { font-size: var(--gs-h4); line-height: 1.25; color: var(--gs-slate-gray-text); }

body strong, body b { font-weight: 800; }

/* ── Accessibility ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 300; /* above .site-header (200) */
  background: var(--gs-navy);
  color: var(--gs-white);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Consistent, visible keyboard focus indicator. :where() keeps specificity at
   zero so any component-level :focus-visible style still wins. currentColor
   guarantees contrast against both light and dark module backgrounds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── Container ── */
.gs-container {
  max-width: var(--gs-container);
  margin-inline: auto;
  padding-inline: 40px;
}

/* ── Background colour utilities (used by modules) ── */
.gs-bg--white  { background-color: transparent; }
/* 120deg puts the gradient's colour bands parallel to the angled slashes the
   hero and text/image modules cut. Measured off the comps, that slash runs
   ~59-62deg from horizontal, which is a 118-121deg gradient; 120 is the round
   value. It was 150deg, whose bands sat 30deg off and read as a different
   axis to the slash. */
.gs-bg--light  {
  background-color: rgba(190, 190, 190, .4);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(120deg,
      rgba(195, 195, 195, .42) 0%,
      rgba(230, 230, 230, .5) 8%,
      rgba(215, 215, 215, .42) 15%,
      rgba(245, 245, 245, .7) 22%,
      rgba(255, 255, 255, .9) 32%,
      rgba(250, 250, 250, .88) 42%,
      rgba(255, 255, 255, .95) 50%,
      rgba(250, 250, 250, .88) 58%,
      rgba(255, 255, 255, .9) 68%,
      rgba(245, 245, 245, .7) 78%,
      rgba(215, 215, 215, .42) 85%,
      rgba(230, 230, 230, .5) 92%,
      rgba(195, 195, 195, .42) 100%);
  background-size: 200px 200px, auto;
  background-repeat: repeat, no-repeat;
}
.gs-bg--blue{
  background-color: var(--gs-navy);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(120deg,
      var(--gs-blue-sheen-fixed-1) 0%,
      var(--gs-blue-sheen-fixed-2) 8%,
      var(--gs-blue-sheen-fixed-3) 15%,
      var(--gs-blue-sheen-fixed-4) 22%,
      var(--gs-blue-sheen-fixed-5) 32%,
      var(--gs-blue-sheen-fixed-6) 42%,
      var(--gs-blue-sheen-fixed-7) 50%,
      var(--gs-blue-sheen-fixed-6) 58%,
      var(--gs-blue-sheen-fixed-5) 68%,
      var(--gs-blue-sheen-fixed-4) 78%,
      var(--gs-blue-sheen-fixed-3) 85%,
      var(--gs-blue-sheen-fixed-2) 92%,
      var(--gs-blue-sheen-fixed-1) 100%);
  background-size: 200px 200px, auto;
  background-repeat: repeat, no-repeat;
}
.gs-bg--primary{
  background-color: var(--gs-navy);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(120deg,
      var(--gs-blue-sheen-1) 0%,
      var(--gs-blue-sheen-2) 8%,
      var(--gs-blue-sheen-3) 15%,
      var(--gs-blue-sheen-4) 22%,
      var(--gs-blue-sheen-5) 32%,
      var(--gs-blue-sheen-6) 42%,
      var(--gs-blue-sheen-7) 50%,
      var(--gs-blue-sheen-6) 58%,
      var(--gs-blue-sheen-5) 68%,
      var(--gs-blue-sheen-4) 78%,
      var(--gs-blue-sheen-3) 85%,
      var(--gs-blue-sheen-2) 92%,
      var(--gs-blue-sheen-1) 100%);
  background-size: 200px 200px, auto;
  background-repeat: repeat, no-repeat;
}
.gs-bg--navy   { background-color: var(--gs-navy); }
.gs-bg--dark   { background-color: var(--gs-navy-dark); }

.gs-bg--light,.gs-bg--navy,.gs-bg--dark{ box-shadow: 0 0 50px rgba(0, 0, 0, .2); }
.gs-bg--blue{ box-shadow: 0 0 50px rgba(0, 0, 0, .2); }
.gs-bg--primary{ box-shadow: 0 0 50px rgba(0, 0, 0, .2); }

/* ── Section padding utilities ── */
.gs-pt--none { padding-top: var(--gs-pad-none); }
.gs-pt--sm   { padding-top: var(--gs-pad-sm); }
.gs-pt--md   { padding-top: var(--gs-pad-md); }
.gs-pt--lg   { padding-top: var(--gs-pad-lg); }

.gs-pb--none { padding-bottom: var(--gs-pad-none); }
.gs-pb--sm   { padding-bottom: var(--gs-pad-sm); }
.gs-pb--md   { padding-bottom: var(--gs-pad-md); }
.gs-pb--lg   { padding-bottom: var(--gs-pad-lg); }

/* Left/Right is a switch rather than a scale: the horizontal inset comes from
   the .gs-container inside each section, so "Default" is simply the absence of
   a rule and "None" zeroes that container for a full-bleed section. Descendant
   rather than child, because some modules nest the container (the News &
   Insights hero puts it inside a <header>). */
.gs-px--none .gs-container { padding-inline: 0; }

/* ── Buttons ── */
.gs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  --gs-btn-pad-y: 13px;
  --gs-btn-pad-x: 26px;
  --gs-btn-bw: 2px;
  padding: var(--gs-btn-pad-y) var(--gs-btn-pad-x);
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--gs-btn-bw) solid transparent;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .1s;
  white-space: nowrap;
  line-height: 1;
}
.gs-btn:active { transform: translateY(1px); }

/* Primary — the blue gradient treatment. --blue renders identically and is
   kept as an alias so content that already selected it is unchanged.

   No border at all: the inherited 2px transparent one read oddly against a
   coloured section. Padding takes the 2px back, so the outer box still
   matches the outlined variants it sits beside, at either size. */
.gs-btn--primary{
  --gs-btn-bw: 0px;
  padding: calc(var(--gs-btn-pad-y) + 2px) calc(var(--gs-btn-pad-x) + 2px);
}
.gs-btn--blue{
  --gs-btn-bw: 0px;
  padding: calc(var(--gs-btn-pad-y) + 2px) calc(var(--gs-btn-pad-x) + 2px);
}
.gs-btn--primary{
  --gs-btn-bw: 0px;
  padding: calc(var(--gs-btn-pad-y) + 2px) calc(var(--gs-btn-pad-x) + 2px);
}
.gs-btn--orange{
  --gs-btn-bw: 0px;
  padding: calc(var(--gs-btn-pad-y) + 2px) calc(var(--gs-btn-pad-x) + 2px);
}
.gs-btn--secondary{
  --gs-btn-bw: 0px;
  padding: calc(var(--gs-btn-pad-y) + 2px) calc(var(--gs-btn-pad-x) + 2px);
}
.gs-btn--primary{
  background: linear-gradient(135deg, var(--gs-blue) 0%, var(--gs-blue-dark) 100%);
  color: var(--gs-white);
}
.gs-btn--blue{
  background: linear-gradient(135deg, var(--gs-blue-fixed) 0%, var(--gs-blue-dark-fixed) 100%);
  color: var(--gs-white);
}
.gs-btn--primary{
  background: linear-gradient(135deg, var(--gs-blue) 0%, var(--gs-blue-dark) 100%);
  color: var(--gs-white);
}
.gs-btn--primary:hover{
  background: linear-gradient(135deg, var(--gs-blue-dark) 0%, var(--gs-blue) 100%);
}
.gs-btn--blue:hover{
  background: linear-gradient(135deg, var(--gs-blue-dark-fixed) 0%, var(--gs-blue-fixed) 100%);
}
.gs-btn--primary:hover{
  background: linear-gradient(135deg, var(--gs-blue-dark) 0%, var(--gs-blue) 100%);
}

/* Orange — the brand accent. Same gradient treatment primary carried before
   it moved to blue, so the look is unchanged; it is now an explicit choice
   rather than the default. */
.gs-btn--orange{
  background: linear-gradient(135deg, var(--gs-orange-fixed) 0%, var(--gs-orange-dark-fixed) 100%);
  color: var(--gs-white);
}
.gs-btn--secondary{
  background: linear-gradient(135deg, var(--gs-orange) 0%, var(--gs-orange-dark) 100%);
  color: var(--gs-white);
}
.gs-btn--orange:hover{
  background: linear-gradient(135deg, var(--gs-orange-dark-fixed) 0%, var(--gs-orange-fixed) 100%);
}
.gs-btn--secondary:hover{
  background: linear-gradient(135deg, var(--gs-orange-dark) 0%, var(--gs-orange) 100%);
}

.gs-btn--ghost {
  background: transparent;
  color: var(--gs-white);
  border-color: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(4px) brightness(0.95);
          backdrop-filter: blur(4px) brightness(0.95);
}
.gs-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.9); }

/* "Ghost (grey border)". The class keeps its original name because it is the
   stored value in existing content; only the look changed, from navy to a
   neutral dark gray. */
.gs-btn--ghost-navy {
  background: transparent;
  color: #4a4a4a;
  border-color: #4a4a4a;
}

/* Solid white — the inverse of --blue, for a call to action sitting on a blue
   or navy section where an outline would read as secondary. */
.gs-btn--white {
  background: var(--gs-white);
  color: var(--gs-blue);
  border-color: var(--gs-white);
}
.gs-btn--white:hover {
  background: var(--gs-light);
  color: var(--gs-blue-dark);
  border-color: var(--gs-light);
}

/* Large CTA size — uppercase, big padding, trailing chevron */
.gs-btn--lg {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  --gs-btn-pad-y: 18px;
  --gs-btn-pad-x: 28px;
  gap: 14px;
}
.gs-btn--lg::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 5 16 12 9 19'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 5 16 12 9 19'/></svg>") no-repeat center / contain;
  transition: transform .2s ease;
}
.gs-btn--lg:hover::after { transform: translateX(4px); }

/* ── New-tab buttons: external-link icon + hover tooltip ──
   Emitted by genstone_newtab_attr() on any module button whose link opens in a
   new tab. The attribute value IS the tooltip copy, so the text stays in PHP
   (translatable) and CSS just renders it.

   Screen readers are deliberately not given this: the ::before is decorative
   duplication of information the link already carries, and announcing it on
   every outbound button is noise. */
.gs-btn[data-gs-newtab] {
  position: relative;
}

/* Icon. On --lg this replaces the chevron (same 0-2-1 specificity, later in the
   file); on smaller buttons, which have no ::after, it adds one. */
.gs-btn[data-gs-newtab]::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center / contain;
  transition: transform .2s ease;
}
/* The chevron slides right on hover; a fixed external-link glyph should not. */
.gs-btn--lg[data-gs-newtab]:hover::after { transform: none; }

/* Tooltip, styled to match the Insight-card one in src/news-insights. */
.gs-btn[data-gs-newtab]::before {
  content: attr(data-gs-newtab);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 5;
  padding: 7px 11px;
  border-radius: 6px;
  background: var(--gs-text); /* dark grey, the same one Branding calls "Dark Grey" */
  color: var(--gs-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.gs-btn[data-gs-newtab]:hover::before,
.gs-btn[data-gs-newtab]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gs-btn[data-gs-newtab]::before,
  .gs-btn[data-gs-newtab]::after { transition: none; }
}

/* Stays outlined and deepens — matches the hero secondary. Previously filled
   with white text, which inverted the button on hover. */
.gs-btn--ghost-navy:hover {
  background: transparent;
  color: #262626;
  border-color: #262626;
}

/* ── Eyebrow label ── */
.gs-eyebrow {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gs-module-eyebrow, var(--gs-text-dark)); /* Branding → Module Eyebrow Color */
  margin-bottom: 14px;
}
.gs-eyebrow--light { color: var(--gs-white); }
.gs-eyebrow::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  max-width: 160px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  background-color: var(--gs-orange);
  pointer-events: none;
}

/* ── Section headings ── */
.gs-heading-xl,
.gs-heading-lg {
  letter-spacing: -0.02em;
}
.gs-heading-xl {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--gs-module-heading, var(--gs-navy)); /* Branding → Module Headline Color */
  line-height: 1.12;
}
.gs-heading-lg {
  font-size: clamp(2rem, 4vw + 0.5rem, 4.5rem);
  font-weight: 800;
  color: var(--gs-module-heading, var(--gs-blue)); /* Branding → Module Headline Color */
  line-height: 1em;
}
.gs-heading-xl--white,
.gs-heading-lg--white { color: var(--gs-white); }

.gs-body-copy {
  font-size: var(--gs-body-size);
  font-weight: 400;
  color: var(--gs-text-dark);
  line-height: 1.6em;
}

@media (min-width: 1025px) {
  .gs-body-copy { font-weight: 300; }
}

/* Module intro mobile alignment.
   Each page-builder module emits .gs-mobile-align-{left|center} on its
   root element. The default is "left", which forces the intro typography
   to left-align under 640px even when the desktop alignment is center.
   Picking "center" in the editor skips this override so the parent's
   text-align: center is inherited normally. */
@media (max-width: 639.98px) {
  .gs-mobile-align-left .gs-heading-lg,
  .gs-mobile-align-left .gs-body-copy,
  .gs-mobile-align-left .news-insights__heading,
  .gs-mobile-align-left .news-insights__intro {
    text-align: left;
  }
  .gs-mobile-align-left .gs-eyebrow {
    margin-inline: 0 !important;
  }
  /* Eyebrow stays centered on mobile across all modules, regardless of the
     mobile-align-left override on heading/body. Block + fit-content +
     auto margins keep the ::after underline hugging the text width while
     the element itself sits centered. !important is needed because each
     module re-declares .gs-eyebrow { display: inline-block } at higher
     specificity from a later-loaded stylesheet. */
  .gs-eyebrow {
    display: block !important;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto !important;
    text-align: center;
  }
}

/* ── Button group ── */
.gs-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ── NAV ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--gs-header-h);
  max-width: var(--gs-container);
  margin-inline: auto;
  padding-inline: 40px;
  transition: height .25s ease;
}

/* Logo wrap — stacks the colored + white logos via grid so they overlay */
.site-header__logo-wrap {
  display: grid;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo-wrap > * {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity .25s ease;
}
.site-header__logo-wrap img {
  height: var(--gs-logo-h, 50px) !important;
  width: auto !important;
  max-width: none;
  transition: height .25s ease;
}
.site-header__logo-text {
  font-size: 24px;
  font-weight: 800;
  color: var(--gs-navy);
  transition: color .25s ease, font-size .25s ease;
}

/* Solid look — also reused by the scrolled state. Size/compaction is
   scroll-only and lives in the .is-scrolled-only block below. */
.site-header.is-scrolled,
.site-header--solid {
  background: var(--gs-white);
  border-bottom-color: var(--gs-border);
}

/* Transparent-over-hero state — Page Display → Header Style.
   Every rule here is scoped to :not(.is-scrolled):not(.site-header--solid), so
   the solid header (the default, and what existing sites render) is untouched.
   The nav-link rules further down already carry the hero treatment; these fill
   in the pieces that went with the variant — the logo and the CTA. */
.site-header:not(.is-scrolled):not(.site-header--solid) .site-header__logo-text {
  color: var(--gs-white);
  text-shadow: var(--gs-text-shadow-hero);
}

/* Logo swap. The colored and white logos share one grid cell in
   .site-header__logo-wrap, so this cross-fades rather than reflows.
   .has-white-logo is only ever printed in the transparent state (header.php
   will not render the white logo otherwise), which is why these rules need no
   --solid branch: the combination cannot occur. */
.site-header.has-white-logo .custom-logo-link,
.site-header.has-white-logo .site-header__logo {
  opacity: 0;
  pointer-events: none;
}
.site-header__logo-white { opacity: 1; }
.site-header.is-scrolled .site-header__logo-white {
  opacity: 0;
  pointer-events: none;
}
.site-header.is-scrolled.has-white-logo .custom-logo-link,
.site-header.is-scrolled.has-white-logo .site-header__logo {
  opacity: 1;
  pointer-events: auto;
}

/* Header CTA — ghost over the hero, its normal fill once scrolled. Targets
   .gs-btn rather than a colour variant: which colour the CTA carries is a
   child-theme decision via gs_header_cta, and the ghost treatment has to apply
   whatever it picked. The Header setting "Use the Button Color over the hero"
   adds .site-header__cta--keep to opt out. */
.site-header:not(.is-scrolled):not(.site-header--solid) .site-header__actions .gs-btn:not(.site-header__cta--keep) {
  background: transparent;
  color: var(--gs-white);
  border: 2px solid rgba(255, 255, 255, .55);
}
.site-header:not(.is-scrolled):not(.site-header--solid) .site-header__actions .gs-btn:not(.site-header__cta--keep):hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .9);
}

/* Scrolled-only — size compaction. */
.site-header.is-scrolled .site-header__inner { height: 70px; }
.site-header.is-scrolled .site-header__logo-wrap img { height: calc(var(--gs-logo-h, 50px) * .8) !important; }
.site-header.is-scrolled .site-header__logo-text { font-size: 20px; }

/* Nav */
.site-header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.site-header__mobile-actions { display: none; }
.site-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  list-style: none;
}
.site-header__menu a {
  padding: 8px 13px;
  border-radius: var(--gs-radius-sm);
  color: var(--gs-white);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: background .15s, color .15s;
  display: block;
  text-shadow: var(--gs-text-shadow-hero);
}
.site-header__menu > li:hover > a,
.site-header__menu > li:focus-within > a,
.site-header__menu > li > a:hover {
  background: transparent;
  text-decoration: underline solid var(--gs-orange);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}

.site-header.is-scrolled .site-header__menu a,
.site-header--solid .site-header__menu a {
  color: var(--gs-text);
  text-shadow: none;
}
.site-header.is-scrolled .site-header__menu > li:hover > a,
.site-header.is-scrolled .site-header__menu > li:focus-within > a,
.site-header.is-scrolled .site-header__menu > li > a:hover,
.site-header--solid .site-header__menu > li:hover > a,
.site-header--solid .site-header__menu > li:focus-within > a,
.site-header--solid .site-header__menu > li > a:hover {
  background: transparent;
  color: var(--gs-text);
}

/* Dropdown sub-menus */
.site-header__menu li { position: relative; }

/* Caret indicator on items with children — down triangle */
.site-header__menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  vertical-align: middle;
  transition: transform .2s ease;
}

.site-header__menu .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: var(--gs-white);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--gs-shadow);
  padding: 8px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index: 10;
}
/* Invisible bridge to keep the dropdown open when crossing the gap from the parent */
.site-header__menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.site-header__menu li:hover > .sub-menu,
.site-header__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Sub-menu link styling — always dark on white, regardless of header state */
.site-header__menu .sub-menu {
  gap: 0;
}
.site-header__menu .sub-menu a,
.site-header.is-scrolled .site-header__menu .sub-menu a,
.site-header--solid .site-header__menu .sub-menu a {
  color: var(--gs-text);
  text-shadow: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 0;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.site-header__menu .sub-menu a:hover,
.site-header.is-scrolled .site-header__menu .sub-menu a:hover,
.site-header--solid .site-header__menu .sub-menu a:hover {
  background: var(--gs-orange);
  color: var(--gs-white);
}

/* Nested (3rd-level) drops open to the right */
.site-header__menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: 4px;
}

@media (max-width: 1280px) {
  .site-header__menu a { font-size: 14px; }
}

.site-header__mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.site-header__mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gs-white);
  border-radius: 2px;
  transition: transform .25s ease, background .2s, opacity .2s;
}
.site-header.is-scrolled .site-header__mobile-toggle span,
.site-header--solid .site-header__mobile-toggle span {
  background: var(--gs-navy);
}

/* The header is fixed, so every page clears it — including ones opening on a
   hero. Those used to be exempted (padding-top: 0) so a full-bleed hero could
   run under the transparent header; with the header always solid that just
   hid the top of the hero behind it.

   Driven off --gs-header-h, the same token .site-header__inner uses, so the
   two cannot drift. The old mobile override hard-coded 70px while the header
   stayed 100px, leaving 30px of content behind it. */
.site-main { padding-top: var(--gs-header-h); }
body.gs-header-transparent .site-main:has(> .hero-carousel:first-child),
body.gs-header-transparent .site-main:has(> .news-insights:first-child) { padding-top: 0; }

/* WP admin bar — push fixed header below the bar when logged in.
   Above 782px: bar is position:fixed @ 32px tall.
   600–782px:   bar is position:fixed @ 46px tall.
   ≤ 600px:     bar is position:absolute (scrolls away with page) — leave header at top:0. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
}

/* ── FOOTER ── */
.site-footer {
  .gs-cookie-settings {
    font-size: 14px;
    text-decoration: none;
    &:hover {
      color: #FFFFFF;
      text-decoration: underline;
    }
  }
  #ot-sdk-btn.ot-sdk-show-settings {
    padding: 0px;
    font-size: 14px;
    background-color: transparent;
    border: none;
    color: #FFFFFF;
    &:hover, &:active {
      color: #FFFFFF;
      text-decoration: underline;
      background-color: transparent;
    }
  }
}
#onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler):not(.ot-close-icon):not(#filter-btn-handler):not(.ot-remove-objection-handler):not(.ot-obj-leg-btn-handler):not([aria-expanded]):not(.ot-link-btn), #onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-active-leg-btn {
    background-color: var(--gs-blue);
    border-color: var(--gs-blue);
    color: #FFFFFF;
    border-radius: 50px;
}
#onetrust-consent-sdk #onetrust-pc-btn-handler, 
#onetrust-consent-sdk #onetrust-pc-btn-handler.cookie-setting-link, 
#onetrust-consent-sdk #ot-dialog-cancel-handler,
#onetrust-consent-sdk #onetrust-accept-btn-handler, 
#onetrust-banner-sdk #onetrust-reject-all-handler, 
#onetrust-banner-sdk #ot-dialog-confirm-handler {
  border-radius: 50px;
}
@media only screen and (min-width: 426px) and (max-width: 896px) {
  body #onetrust-banner-sdk #onetrust-policy {
        margin-bottom: 1.25em;
    }
}
@media (min-width: 550px) {
  body #onetrust-banner-sdk .ot-sdk-three.ot-sdk-columns, 
  body #onetrust-pc-sdk .ot-sdk-three.ot-sdk-columns, 
  body #ot-sdk-cookie-policy .ot-sdk-three.ot-sdk-columns {
        width: 33%;
    }
}
@media only screen and (min-width: 890px) {
  body #onetrust-banner-sdk #onetrust-button-group {
        display: flex;
        align-items: baseline;
        flex-direction: column;
    }
}
@media only screen and (min-width: 1400px) {
  body #onetrust-banner-sdk #onetrust-button-group {
        flex-direction: row;
    }
}

.site-footer {
  background: var(--gs-blue);
  color: var(--gs-white);
  padding-top: 64px;
}
.site-footer__inner {
  max-width: var(--gs-container);
  margin-inline: auto;
  padding-inline: 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
}
.site-footer__logo { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: 12px; }
.site-footer__logo img,
.site-footer__logo .custom-logo {
  width: 200px !important;
  max-width: 100%;
  height: auto !important;
  display: block;
}
/* Fallback only — when no white logo is set, tint the regular logo white */
.site-footer__logo .custom-logo {
  filter: brightness(0) invert(1);
}
.site-footer__logo-text { font-size: 18px; font-weight: 800; color: var(--gs-white); }
.site-footer__tagline { font-size: 13px; color: var(--gs-white); line-height: 1.6; max-width: 280px; }
.site-footer__compliance {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer__eho-logo {
  width: 70px;
  height: auto;
  display: block;
  flex-shrink: 0;
}
.site-footer__compliance-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--gs-white);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.3;
  margin: 0;
}
.site-footer__col-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-white);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 16px;
}
.site-footer__col-heading--stacked { margin-top: 28px; }
.site-footer__menu { list-style: none; display: flex; flex-direction: column; gap: 8px; line-height: 1.2em; padding: 0; margin: 0; }
.site-footer__menu a { color: var(--gs-white); text-decoration: none; font-size: 14px; transition: color .18s; }
.site-footer__menu a:hover { color: var(--gs-white); text-decoration: underline; }
.site-footer__phone { margin-top: 0; }
.site-footer__phone-label,
.site-footer__social-label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-white);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.site-footer__phone-number {
  display: inline-block;
  color: var(--gs-white);
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  transition: color .18s;
}
.site-footer__phone-number:hover { color: var(--gs-orange); }

.site-footer__social { margin-top: 20px; }
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gs-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .18s;
}
.site-footer__social-link:hover { color: var(--gs-orange); }
/* More than one link lives here now, so each takes its own row. fit-content
   keeps the hover target tight to the text, as inline-flex did with one. */
.site-footer__social-link { display: flex; width: -moz-fit-content; width: fit-content; }
.site-footer__social-link + .site-footer__social-link { margin-top: 10px; }
.site-footer__social-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.site-footer__bottom {
  background: var(--gs-navy);
}

.site-footer__bottom-inner {
  max-width: var(--gs-container);
  margin-inline: auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer__copyright { font-size: 14px; color: var(--gs-white); }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { font-size: 14px; color: var(--gs-white); text-decoration: none; }
.site-footer__legal a:hover { color: var(--gs-white); text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 768px) {
  /* Footer text — minimum font-weight of 600 for mobile readability.
     Heavier weights already in place (700+) are preserved. */
  .site-footer,
  .site-footer * { font-weight: 600; }
  .site-footer__col-heading,
  .site-footer__phone-label,
  .site-footer__social-label,
  .site-footer__phone-number { font-weight: 700; }

  .gs-container { padding-inline: 20px; }

  .site-header__inner { padding-inline: 20px; }

  .site-header__logo-wrap img,
  .site-header.is-scrolled .site-header__logo-wrap img { height: calc(var(--gs-logo-h, 50px) * .6) !important; }

  .site-footer__logo img,
  .site-footer__logo .custom-logo { width: 150px !important; }

  /* Mobile footer layout:
     Row 1: footer_col_1            | footer_col_2 (+ footer_col_3 menu stacked)
     Row 2: brand (logo + compliance) | phone + social */
  .site-footer { padding-top: 30px; }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-inline: 20px;
    padding-bottom: 30px;
  }
  .site-footer__inner .site-footer__col:nth-child(2) { order: 1; } /* footer_col_1 — col 1 row 1 */
  .site-footer__inner .site-footer__col:nth-child(3) { order: 2; } /* footer_col_2 + col_3 — col 2 row 1 */
  .site-footer__brand { order: 3; grid-column: 1; }                 /* col 1 row 2 */
  .site-footer__inner .site-footer__col:nth-child(4) { order: 4; } /* phone + social — col 2 row 2 */
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: 1; }
}

/* ── Mobile menu (≤ 1200px) ── */
@media (max-width: 1200px) {

  /* Show toggle (right-aligned), hide desktop actions */
  .site-header__mobile-toggle {
    display: flex;
    margin-left: auto;
    margin-right: 0;
  }
  .site-header__actions { display: none; }

  /* Contact button inside the mobile menu panel */
  .site-header__mobile-actions {
    display: flex;
    padding: 24px;
  }
  .site-header__mobile-actions .gs-btn {
    width: 100%;
    justify-content: center;
  }

  /* Nav becomes a full-width panel below the header */
  .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--gs-white);
    box-shadow: var(--gs-shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .site-header__nav.is-open {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .site-header.is-scrolled .site-header__nav.is-open {
    max-height: calc(100vh - 70px);
  }

  /* Menu items stack vertically */
  .site-header__menu {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
  }
  .site-header__menu > li {
    border-bottom: 1px solid var(--gs-border);
  }
  .site-header__menu > li:last-child { border-bottom: none; }
  .site-header__menu a {
    color: var(--gs-text);
    text-shadow: none;
    font-size: 20px;
    padding: 16px 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Override hover/focus underline on mobile — use color instead */
  .site-header__menu > li:hover > a,
  .site-header__menu > li:focus-within > a,
  .site-header__menu > li > a:hover,
  .site-header.is-scrolled .site-header__menu > li:hover > a,
  .site-header.is-scrolled .site-header__menu > li:focus-within > a,
  .site-header.is-scrolled .site-header__menu > li > a:hover {
    text-decoration: none;
    color: var(--gs-orange);
  }

  /* Caret indicator: push to the right, flip when open */
  .site-header__menu .menu-item-has-children > a::after {
    margin-left: auto;
  }
  .site-header__menu .menu-item-has-children.is-submenu-open > a::after {
    transform: rotate(180deg);
  }

  /* Submenu becomes inline accordion.
     Keep opacity:0 / visibility:hidden by default so crossing back to desktop
     doesn't trigger the desktop fade-out transition (it'd flash). */
  .site-header__menu .sub-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    border-left: 4px solid var(--gs-orange);
    transition: max-height .25s ease, opacity .15s ease, visibility .15s ease, margin .25s ease;
    z-index: auto;
  }
  .site-header__menu .sub-menu::before { display: none; }

  /* Disable hover-open on touch devices — JS uses .is-submenu-open instead */
  .site-header__menu li:hover > .sub-menu,
  .site-header__menu li:focus-within > .sub-menu {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
  }

  /* Open state — must come AFTER the hover rule to win source order */
  .site-header__menu li.is-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
    margin: 0 0 12px;
  }

  .site-header__menu .sub-menu a {
    color: var(--gs-muted);
    font-size: 13px;
    padding: 6px 0 6px 16px;
    border: none;
    border-radius: 0;
  }
  .site-header__menu .sub-menu a:hover,
  .site-header.is-scrolled .site-header__menu .sub-menu a:hover {
    background: transparent;
    color: var(--gs-orange);
  }

  /* Hamburger → X animation when open */
  .site-header__nav.is-open ~ .site-header__mobile-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header__nav.is-open ~ .site-header__mobile-toggle span:nth-child(2) {
    opacity: 0;
  }
  .site-header__nav.is-open ~ .site-header__mobile-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}


/* ── Fade-in-up animation ── */
@keyframes gs-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-triggered fade-up: starts hidden, JS adds .is-visible when in view */
[data-gs-fade-up] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
[data-gs-fade-up].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero slide content: animate on load with a small stagger.
   Uses 'backwards' fill mode so the initial hidden state is applied before the delay. */
.hero-carousel__slide.is-active .hero-carousel__tagline,
.hero-carousel__slide.is-active .hero-carousel__headline,
.hero-carousel__slide.is-active .hero-carousel__body,
.hero-carousel__slide.is-active .hero-carousel__ctas {
  animation: gs-fade-in-up .9s cubic-bezier(.4, 0, .2, 1) backwards;
}
.hero-carousel__slide.is-active .hero-carousel__tagline   { animation-delay: .1s; }
.hero-carousel__slide.is-active .hero-carousel__headline  { animation-delay: .2s; }
.hero-carousel__slide.is-active .hero-carousel__body      { animation-delay: .35s; }
.hero-carousel__slide.is-active .hero-carousel__ctas      { animation-delay: .5s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  /* Damp every animation/transition to near-zero. Durations stay non-zero so
     transitionend/animationend still fire for JS that depends on them
     (accordion height animation, carousel track moves). */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-gs-fade-up] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-carousel__slide.is-active .hero-carousel__tagline,
  .hero-carousel__slide.is-active .hero-carousel__headline,
  .hero-carousel__slide.is-active .hero-carousel__body,
  .hero-carousel__slide.is-active .hero-carousel__ctas {
    animation: none;
  }
}

/* ── 404 ─────────────────────────────────────────────────── */
.gs-404 {
  padding: clamp(80px, 12vw, 160px) 0;
}

.gs-404__inner {
  position: relative;
  text-align: center;
  max-width: 720px;
}

.gs-404__graphic {
  font-family: var(--gs-font-display);
  font-weight: 800;
  font-size: clamp(160px, 26vw, 320px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--gs-blue) 0%, var(--gs-blue-dark) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: .12;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.gs-404__eyebrow,
.gs-404__title,
.gs-404__text,
.gs-404__actions {
  position: relative;
  z-index: 1;
}

.gs-404__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gs-orange);
  margin-bottom: 14px;
}

.gs-404__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: var(--gs-navy);
  margin-bottom: 18px;
}

.gs-404__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gs-text);
  max-width: 540px;
  margin: 0 auto 32px;
}

.gs-404__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 540px) {
  .gs-404__graphic { font-size: 180px; }
  .gs-404__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
  .gs-404__actions .gs-btn { justify-content: center; }
}

/* ── Gravity Forms ── */
.gform_wrapper.gform-theme.gform-theme--foundation.gform-theme--framework { text-align: left; }
.gform-theme--foundation .gform-body { margin-top: 40px; }
.gform-theme--foundation .gform_fields {
  column-gap: 30px !important;
  row-gap: 20px !important;
}
.gform-theme--foundation .gfield select { text-align: left; }
.gform-theme--foundation .gfield--type-consent { text-align: left; }

/* Submit button — mirrors .gs-btn--primary (blue gradient, square, uppercase
   label with a trailing chevron).
   GF emits inline <style> rules scoped by ID (#gform_wrapper_N), which
   outrank a plain class selector. We use !important on visual props to
   override those plugin-generated rules without coupling to a form ID. */
.gform-theme--foundation .gform_footer,
.gform-theme--foundation .gform_page_footer,
.gform-theme--framework .gform_footer,
.gform-theme--framework .gform_page_footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 16px !important;
  flex-wrap: wrap;
  text-align: center;
}
.gform-theme--foundation .gform_page_footer {
  margin-top: 0 !important;
}
.gform-theme--foundation .gform_button,
.gform-theme--foundation .gform_next_button,
.gform-theme--foundation .gform_footer input[type="submit"],
.gform-theme--foundation .gform_page_footer input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  margin: 30px 0 0 !important;
  padding: 18px 34px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--gs-blue) 0%, var(--gs-blue-dark) 100%) !important;
  color: var(--gs-white) !important;
  font-family: var(--gs-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .1s;
}
.gform-theme--foundation .gform_button:hover,
.gform-theme--foundation .gform_next_button:hover,
.gform-theme--foundation .gform_footer input[type="submit"]:hover,
.gform-theme--foundation .gform_page_footer input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--gs-blue-dark) 0%, var(--gs-blue) 100%) !important;
  border-color: transparent !important;
  color: var(--gs-white) !important;
}
.gform-theme--foundation .gform_button:active,
.gform-theme--foundation .gform_next_button:active,
.gform-theme--foundation .gform_footer input[type="submit"]:active,
.gform-theme--foundation .gform_page_footer input[type="submit"]:active {
  transform: translateY(1px);
}
.gform-theme--foundation .gform_button::after,
.gform-theme--foundation .gform_next_button::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 5 16 12 9 19'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 5 16 12 9 19'/></svg>") no-repeat center / contain;
  transition: transform .2s ease;
}
.gform-theme--foundation .gform_button:hover::after,
.gform-theme--foundation .gform_next_button:hover::after {
  transform: translateX(4px);
}

/* Multi-step: Previous button — navy ghost/outline pill. Keeps a clear
   visual hierarchy with Next (orange gradient) as the primary action.
   Uses !important to win against GF's ID-scoped inline rules. */
.gform-theme--foundation .gform_previous_button,
.gform-theme--framework .gform_previous_button {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 30px 0 0 !important;
  padding: 16px 32px !important;
  border-radius: 0 !important;
  border: 2px solid var(--gs-navy) !important;
  background: transparent !important;
  color: var(--gs-navy) !important;
  font-family: var(--gs-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .1s;
}
.gform-theme--foundation .gform_previous_button:hover,
.gform-theme--framework .gform_previous_button:hover {
  background: var(--gs-navy) !important;
  color: var(--gs-white) !important;
}
.gform-theme--foundation .gform_previous_button:active,
.gform-theme--framework .gform_previous_button:active {
  transform: translateY(1px);
}
.gform-theme--foundation .gform_previous_button::before,
.gform-theme--framework .gform_previous_button::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 5 8 12 15 19'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 5 8 12 15 19'/></svg>") no-repeat center / contain;
  transition: transform .2s ease;
}
.gform-theme--foundation .gform_previous_button:hover::before,
.gform-theme--framework .gform_previous_button:hover::before {
  transform: translateX(-4px);
}

/* Multi-step: page progress indicator (Steps style — numbered circles + labels).
   Renders a horizontal row of step pills with a connector line, an idle
   gray state, an active orange state, and a completed blue state. */
.gform-theme--foundation .gf_page_steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  counter-reset: gf-step;
}
.gform-theme--foundation .gf_step {
  position: relative;
  flex: 1 1 0;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  color: var(--gs-text);
  font-family: var(--gs-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Connector line — sits at the vertical center of the number circle and
   stretches from the previous circle to this one. First step has none. */
.gform-theme--foundation .gf_step::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 41%;
  left: -65%;
  height: 2px;
  background: var(--gs-border, color-mix(in srgb, var(--gs-blue) 18%, transparent));
  z-index: 0;
}
.gform-theme--foundation .gf_step:first-child::before { display: none; }
.gform-theme--foundation .gf_step_number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gs-gray-soft);
  color: var(--gs-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
  transition: background .2s, color .2s;
}
.gform-theme--foundation .gf_step_label {
  display: block;
  line-height: 1.3;
  color: inherit;
  word-wrap: break-word;
}
/* Active step — orange circle, navy label. */
.gform-theme--foundation .gf_step_active {
  color: var(--gs-navy);
}
.gform-theme--foundation .gf_step_active .gf_step_number {
  background: var(--gs-orange);
  color: var(--gs-white);
  box-shadow: 0 0 0 4px rgba(238, 117, 26, 0.18);
}
/* Completed step — blue circle (with a checkmark replacing the number),
   blue connector line filled in. */
.gform-theme--foundation .gf_step_completed .gf_step_number {
  background: var(--gs-blue);
  color: var(--gs-white);
}
.gform-theme--framework .gf_page_steps { margin-top: 40px; }
.gform-theme--framework .gf_step_number {
  background-color: white !important;
}
.gform-theme--framework .gf_step_active .gf_step_number {
  background-color: var(--gs-orange) !important;
  color: var(--gs-white) !important;
}
/* ── GF: Image Choice cards (scoped to #field_9_1 — the "Role" step) ──
   Each choice with an image becomes a full-bleed gradient-overlaid card
   with the label anchored at the bottom. Choices without an image
   (e.g. "Skip to general inquiry") become a centered ghost pill below
   the cards.

   The label format expected: <strong>Title</strong>Description text.
   The <strong> is set to display:block so the description flows below
   without needing a <br> (which GF's label sanitizer strips). */
/* Grid container — GF framework theme already sets .gfield_radio to grid
   but with its own column variables that constrain card width. Force
   50/50 columns spanning full available width. */
.gform-theme--framework #field_9_1 .ginput_container_image_choice {
  width: 100%;
}
.gform-theme--framework #field_9_1 .gfield_radio {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 767.98px) {
  .gform-theme--framework #field_9_1 .gfield_radio {
    grid-template-columns: 1fr !important;
  }
  .gform-theme--framework #field_9_1 .gchoice:has(img) {
    aspect-ratio: 16 / 9 !important;
  }
}

/* Image card */
.gform-theme--framework #field_9_1 .gchoice:has(img) {
  position: relative;
  width: 100%;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gform-theme--framework #field_9_1 .gchoice:has(img):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* GF wraps the image + label in inline spans by default, which keeps the
   card from filling the column. Force the wrappers to block-level + full
   width and height so the card and image can fill the aspect-ratio box. */
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gfield-image-choice-wrapper-outer {
  padding-block: 0 !important;
  padding-inline: 0 !important;
}
.gform-theme--framework #field_9_1 .gchoice .gfield-image-choice-wrapper-outer {
  display: block;
  width: 100%;
  height: 100%;
}
.gform-theme--framework #field_9_1 .gchoice .gfield-choice-image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

/* Image fills the entire 4:3 card via object-fit: cover. */
.gform-theme--framework #field_9_1 .gchoice img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 0 !important;
}

/* Gradient overlay — first card = orange, second = blue */
.gform-theme--framework #field_9_1 .gchoice:has(img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(238, 117, 26, 0.15) 0%, rgba(238, 117, 26, 0.92) 100%);
  pointer-events: none;
}
.gform-theme--framework #field_9_1 .gchoice:has(img):nth-of-type(2)::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gs-blue) 15%, transparent) 0%, color-mix(in srgb, var(--gs-blue) 92%, transparent) 100%);
}

/* Icon badge — circle backdrop with white SVG icon centered, mid-card
   left. Keyed off :nth-of-type() so each card gets the right icon. */
.gform-theme--framework #field_9_1 .gchoice:has(img)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}
/* Choice 1 — Homeowner: home icon */
.gform-theme--framework #field_9_1 .gchoice:has(img):nth-of-type(1)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/><path d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}
/* Choice 2 — Investor: trending-up icon */
.gform-theme--framework #field_9_1 .gchoice:has(img):nth-of-type(2)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 7h6v6'/><path d='m22 7-8.5 8.5-5-5L2 17'/></svg>");
}
/* On narrower viewports the 4:3 card height shrinks and the mid-card icon
   starts to crowd the bottom-anchored label. Pull the icon up to the top
   corner so it stays separated from the title/description. */
@media (max-width: 1023.98px) {
  .gform-theme--framework #field_9_1 .gchoice:has(img)::after {
    top: 20px;
    left: 20px;
    transform: none;
    width: 44px;
    height: 44px;
    background-size: 22px 22px;
  }
}

/* Hide native radio/checkbox visually but keep it accessible */
.gform-theme--framework #field_9_1 .gchoice:has(img) input[type="radio"],
.gform-theme--framework #field_9_1 .gchoice:has(img) input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Label sits over the gradient, anchored at the bottom of the card */
/* The inner wrapper handles the overlay layout (instead of the label).
   This way GF framework can change padding/position on the label all it
   wants — the wrapper stays absolutely pinned to the card, flex-anchored
   to the bottom. Both states (idle + selected) get the same treatment. */
.gform-theme--framework #field_9_1 .gchoice .gfield-image-choice-wrapper-inner,
.gform-theme--framework #field_9_1 .gchoice:has(input:checked) .gfield-image-choice-wrapper-inner {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 28px !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none;
}
/* Outer wrapper reset (also covers selected state) */
.gform-theme--framework #field_9_1 .gchoice .gfield-image-choice-wrapper-outer,
.gform-theme--framework #field_9_1 .gchoice:has(input:checked) .gfield-image-choice-wrapper-outer {
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* The label is now a normal flow child inside the bottom-anchored inner
   wrapper. No absolute positioning on the label — that's what was getting
   pulled around by the framework's selected-state rules. */
.gform-theme--framework #field_9_1 .gchoice:has(img) label,
.gform-theme--framework #field_9_1 .gchoice:has(img):has(input:checked) label {
  position: static !important;
  display: block !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto;
  color: var(--gs-white) !important;
  font-family: var(--gs-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  cursor: pointer !important;
}

/* Title (strong) — block-level so the description flows below it */
.gform-theme--framework #field_9_1 .gchoice:has(img) label strong {
  display: block;
  font-family: var(--gs-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  color: var(--gs-white);
}

/* Selected state — orange outline ring */
.gform-theme--framework #field_9_1 .gchoice:has(img):has(input:checked) {
  outline: 3px solid var(--gs-orange);
  outline-offset: 2px;
}

/* ── No-image choice (e.g. "Not Sure? Skip To General Inquiry") ── */
/* Sits below the image cards as a centered ghost pill. */
.gform-theme--framework #field_9_1 .gchoice:not(:has(img)) {
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: center;
  margin-top: 16px;
}
.gform-theme--framework #field_9_1 .gchoice:not(:has(img)) input[type="radio"],
.gform-theme--framework #field_9_1 .gchoice:not(:has(img)) input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.gform-theme--framework #field_9_1 .gchoice:not(:has(img)) label {
  display: inline-flex !important;
  align-items: center;
  padding: 14px 32px !important;
  border: 2px solid var(--gs-navy) !important;
  border-radius: 50px !important;
  background: transparent !important;
  color: var(--gs-navy) !important;
  font-family: var(--gs-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background .18s, color .18s;
}
.gform-theme--framework #field_9_1 .gchoice:not(:has(img)) label:hover,
.gform-theme--framework #field_9_1 .gchoice:not(:has(img)):has(input:checked) label {
  background: var(--gs-navy) !important;
  color: var(--gs-white) !important;
}

/* ── GF: #field_9_7 — single radio rendered as a centered ghost pill ── */
/* Same visual treatment as the no-image choice in field_9_1: navy outline
   pill, uppercase label, fills navy on hover/selected. */
.gform-theme--framework #field_9_7 .gfield_radio,
.gform-theme--framework #field_9_7 .ginput_container_radio {
  display: flex !important;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
}
.gform-theme--framework #field_9_7 .gchoice {
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}
.gform-theme--framework #field_9_7 .gchoice input[type="radio"],
.gform-theme--framework #field_9_7 .gchoice input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.gform-theme--framework #field_9_7 .gchoice label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 14px 32px !important;
  border: 1.5px solid color-mix(in srgb, var(--gs-blue) 20%, transparent) !important;
  border-radius: 50px !important;
  background: transparent !important;
  color: var(--gs-muted, rgba(17, 35, 55, 0.55)) !important;
  font-family: var(--gs-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background .18s, color .18s, border-color .18s;
}
.gform-theme--framework #field_9_7 .gchoice label:hover {
  border-color: var(--gs-navy) !important;
  color: var(--gs-navy) !important;
  background: transparent !important;
}

/* Centered, 18px field labels for the card-grid steps. */
.gform-theme--framework #field_9_10 .gfield_label,
.gform-theme--framework #field_9_11 .gfield_label,
.gform-theme--framework #field_9_15 .gfield_label {
  text-align: center !important;
  font-size: 20px !important;
  margin-bottom: 25px !important;
}

/* ── GF: #field_9_10 + #field_9_11 — checkbox fields rendered as card grids ── */
/* Same card style across both fields. Each card has a bold title
   (<strong>) and a description below. Native checkbox is hidden;
   selecting a card adds an orange border + tinted background.
   Column count differs per field: 9_11 ("Goals") is 3-col, 9_10 is 2-col.
   GF framework theme defaults form fields to half-width via its outer
   grid layout — both fields are forced to span the full width here. */
.gform-theme--framework #field_9_10,
.gform-theme--framework #field_9_11,
.gform-theme--framework #field_9_15 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}
.gform-theme--framework #field_9_10 .ginput_container_checkbox,
.gform-theme--framework #field_9_11 .ginput_container_checkbox,
.gform-theme--framework #field_9_15 .ginput_container_checkbox,
.gform-theme--framework #field_9_15 .ginput_container_radio {
  width: 100% !important;
  max-width: none !important;
}
.gform-theme--framework #field_9_10 .gfield_checkbox,
.gform-theme--framework #field_9_11 .gfield_checkbox,
.gform-theme--framework #field_9_15 .gfield_checkbox,
.gform-theme--framework #field_9_15 .gfield_radio {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  max-inline-size: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Per-field column count */
.gform-theme--framework #field_9_11 .gfield_checkbox {
  grid-template-columns: repeat(3, 1fr) !important;
}
.gform-theme--framework #field_9_10 .gfield_checkbox,
.gform-theme--framework #field_9_15 .gfield_checkbox,
.gform-theme--framework #field_9_15 .gfield_radio {
  grid-template-columns: repeat(2, 1fr) !important;
}

.gform-theme--framework #field_9_10 .gchoice,
.gform-theme--framework #field_9_11 .gchoice,
.gform-theme--framework #field_9_15 .gchoice {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid var(--gs-border, color-mix(in srgb, var(--gs-blue) 18%, transparent)) !important;
  border-radius: 12px !important;
  background: var(--gs-white) !important;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, box-shadow .18s, transform .18s;
}
.gform-theme--framework #field_9_10 .gchoice:hover,
.gform-theme--framework #field_9_11 .gchoice:hover,
.gform-theme--framework #field_9_15 .gchoice:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.gform-theme--framework #field_9_10 .gchoice input[type="checkbox"],
.gform-theme--framework #field_9_11 .gchoice input[type="checkbox"],
.gform-theme--framework #field_9_15 .gchoice input[type="checkbox"],
.gform-theme--framework #field_9_15 .gchoice input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.gform-theme--framework #field_9_10 .gchoice label,
.gform-theme--framework #field_9_11 .gchoice label,
.gform-theme--framework #field_9_15 .gchoice label {
  display: block !important;
  flex: 1 1 auto !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  width: 100% !important;
  cursor: pointer !important;
  font-family: var(--gs-font) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--gs-text) !important;
}
.gform-theme--framework #field_9_10 .gchoice label strong,
.gform-theme--framework #field_9_11 .gchoice label strong,
.gform-theme--framework #field_9_15 .gchoice label strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--gs-navy);
  margin-bottom: 4px;
}
/* Selected — orange border, light tinted bg, slight lift */
.gform-theme--framework #field_9_10 .gchoice:has(input:checked),
.gform-theme--framework #field_9_11 .gchoice:has(input:checked),
.gform-theme--framework #field_9_15 .gchoice:has(input:checked) {
  border-color: var(--gs-orange) !important;
  background: rgba(238, 117, 26, 0.06) !important;
  box-shadow: 0 4px 12px rgba(238, 117, 26, 0.12);
}

/* ── Icon badge (top-left of each card) for #field_9_10 + #field_9_11 ──
   Soft blue-tinted square holding a small SVG icon. Keyed off each
   choice's stable `.gchoice_9_X_N` class (not :nth-of-type) so the
   icons stay correctly mapped if you reorder choices in GF later. */
.gform-theme--framework #field_9_10 .gchoice::before,
.gform-theme--framework #field_9_11 .gchoice::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--gs-blue) 8%, transparent);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  pointer-events: none;
  z-index: 1;
}
/* Push the label text down so it doesn't sit under the icon. */
.gform-theme--framework #field_9_10 .gchoice label,
.gform-theme--framework #field_9_11 .gchoice label {
  padding: 64px 24px 20px 24px !important;
}
/* Per-choice icon background-image. Shared icons (the first four) are
   grouped between #field_9_10 and #field_9_11 so the SVG data URIs are
   defined once. */
.gform-theme--framework #field_9_10 .gchoice_9_10_1::before,
.gform-theme--framework #field_9_11 .gchoice_9_11_1::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/><path d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}
.gform-theme--framework #field_9_10 .gchoice_9_10_2::before,
.gform-theme--framework #field_9_11 .gchoice_9_11_2::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' x2='12' y1='2' y2='22'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>");
}
.gform-theme--framework #field_9_10 .gchoice_9_10_3::before,
.gform-theme--framework #field_9_11 .gchoice_9_11_3::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>");
}
.gform-theme--framework #field_9_10 .gchoice_9_10_4::before,
.gform-theme--framework #field_9_11 .gchoice_9_11_4::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9'/><path d='m18 15 4-4'/><path d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/></svg>");
}
.gform-theme--framework #field_9_11 .gchoice_9_11_5::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/><path d='m21 2-9.6 9.6'/><circle cx='7.5' cy='15.5' r='5.5'/></svg>");
}
.gform-theme--framework #field_9_11 .gchoice_9_11_6::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/></svg>");
}
.gform-theme--framework #field_9_11 .gchoice_9_11_7::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 7h6v6'/><path d='m22 7-8.5 8.5-5-5L2 17'/></svg>");
}
.gform-theme--framework #field_9_11 .gchoice_9_11_8::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 2 7l10 5 10-5-10-5z'/><path d='M2 12l10 5 10-5'/><path d='M2 17l10 5 10-5'/></svg>");
}

@media (max-width: 900px) {
  .gform-theme--framework #field_9_11 .gfield_checkbox {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 540px) {
  .gform-theme--framework #field_9_10 .gfield_checkbox,
  .gform-theme--framework #field_9_11 .gfield_checkbox,
  .gform-theme--framework #field_9_15 .gfield_checkbox,
  .gform-theme--framework #field_9_15 .gfield_radio {
    grid-template-columns: 1fr !important;
  }
}

.gform-theme--framework .gf_step_completed .gf_step_number::after {
  inset-block-start: -2px !important;
  inset-inline-start: -2px !important;
  background-color: var(--gs-blue) !important;
  border-color: var(--gs-blue) !important;
}
.gform-theme--foundation .gf_step_completed + .gf_step::before,
.gform-theme--foundation .gf_step_completed::before {
  background: var(--gs-blue);
}
/* Dark backgrounds — flip idle states to translucent white so the
   indicator stays visible. */

.gs-bg--navy .gform-theme--foundation .gf_step,
.gs-text--light .gform-theme--foundation .gf_step,
.gs-bg--dark .gform-theme--foundation .gf_step { color: rgba(255,255,255,0.75); }
.gs-bg--blue .gform-theme--foundation .gf_step, .gs-text--light .gform-theme--foundation .gf_step { color: rgba(255,255,255,0.75); }
.gs-bg--primary .gform-theme--foundation .gf_step, .gs-text--light .gform-theme--foundation .gf_step { color: rgba(255,255,255,0.75); }

.gs-bg--navy .gform-theme--foundation .gf_step_number,
.gs-text--light .gform-theme--foundation .gf_step_number,
.gs-bg--dark .gform-theme--foundation .gf_step_number {
  background: rgba(255,255,255,0.15);
  color: var(--gs-white);
}
.gs-bg--blue .gform-theme--foundation .gf_step_number, .gs-text--light .gform-theme--foundation .gf_step_number {
  background: rgba(255,255,255,0.15);
  color: var(--gs-white);
}
.gs-bg--primary .gform-theme--foundation .gf_step_number, .gs-text--light .gform-theme--foundation .gf_step_number {
  background: rgba(255,255,255,0.15);
  color: var(--gs-white);
}

.gs-bg--navy .gform-theme--foundation .gf_step::before,
.gs-text--light .gform-theme--foundation .gf_step::before,
.gs-bg--dark .gform-theme--foundation .gf_step::before { background: rgba(255,255,255,0.18); }
.gs-bg--blue .gform-theme--foundation .gf_step::before, .gs-text--light .gform-theme--foundation .gf_step::before { background: rgba(255,255,255,0.18); }
.gs-bg--primary .gform-theme--foundation .gf_step::before, .gs-text--light .gform-theme--foundation .gf_step::before { background: rgba(255,255,255,0.18); }

.gs-bg--navy .gform-theme--foundation .gf_step_active,
.gs-text--light .gform-theme--foundation .gf_step_active,
.gs-bg--dark .gform-theme--foundation .gf_step_active { color: var(--gs-white); }
.gs-bg--blue .gform-theme--foundation .gf_step_active, .gs-text--light .gform-theme--foundation .gf_step_active { color: var(--gs-white); }
.gs-bg--primary .gform-theme--foundation .gf_step_active, .gs-text--light .gform-theme--foundation .gf_step_active { color: var(--gs-white); }

/* Narrow screens — collapse labels to a more compact form */
@media (max-width: 640px) {
  .gform-theme--foundation .gf_page_steps { gap: 0; }
  .gform-theme--foundation .gf_step { font-size: 11px; padding: 0 4px; }
  .gform-theme--foundation .gf_step_number { width: 32px; height: 32px; font-size: 14px; }
  .gform-theme--foundation .gf_step::before { top: 15px; }
}

/* ── Mobile fixes: button wrapping, footer legal, TablePress ── */

/* .gs-btn carries white-space: nowrap above, which keeps short uppercase
   labels on one line. A long label on a narrow screen has nowhere to break, so
   the button runs past the edge of the viewport.

   Released only at mobile widths: a button that fits never wraps, so this
   costs nothing visually, but line-height has to come up from the base rule's
   1 or the two lines collide -- and that would change the height of every
   button on the site if it were not scoped. */
@media (max-width: 768px) {
  .gs-btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    line-height: 1.25;
  }
}

/* The footer's menu and bottom-inner already go column on mobile, which leaves
   the legal links as the one row still running horizontally. They sit
   comfortably side by side on a tablet, so this waits until the bottom bar is
   genuinely narrow. Scoped to that row on purpose: flex-direction on every
   footer descendant would also hit .site-footer__logo and
   .site-footer__social-link, both icon-beside-text rows meant to stay
   horizontal. */
@media (max-width: 480px) {
  .site-footer__legal {
    flex-direction: column;
    gap: 10px;
  }
}

/* The element that actually bleeds is marked by main.js, not chosen here:
   TablePress runs DataTables, which wraps the table in .dt-container after
   load, so the outermost element inside the content column is only knowable at
   runtime. Marking it means this works for a plain WYSIWYG table and a
   DataTables-wrapped one alike.

   !important is here for one reason: TablePress's own stylesheet sets
   `.tablepress { margin: 0 auto 1rem; width: 100% }` and is enqueued AFTER the
   theme, so at equal specificity it wins on source order. */
@media (max-width: 768px) {
  [data-gs-table-bleed] {
    max-width: none !important;
    margin-inline: -20px !important;
  }
  /* The scroller keeps its own inset so the first column still lines up with
     the body copy at rest; a nested table must not bleed a second time. */
  [data-gs-table-bleed] [data-gs-table-scroll] {
    margin-inline: 0 !important;
  }
  /* DataTables' other layout rows (search box, length menu, info, paging) ride
     inside the same wrapper. They are chrome rather than data, so they keep the
     body-copy inset instead of running to the viewport edge with the table. */
  [data-gs-table-bleed] > .dt-layout-row:not(.dt-layout-table) {
    padding-inline: 20px;
  }
}

/* Scroll hint — inserted by assets/js/main.js above any table that actually
   overflows. A horizontally scrolling table gives no sign it can be scrolled;
   worse once it bleeds to the viewport edge, where the cut-off column reads as
   the end of the content. Only rendered when the table really does overflow,
   so a table that fits gets nothing, and it fades out once the reader scrolls. */
.gs-table-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gs-blue);
  transition: opacity .3s ease;
}
.gs-table-hint svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.gs-table-hint.is-dismissed {
  opacity: 0;
}
.gs-bg--navy .gs-table-hint,
.gs-text--light .gs-table-hint,
.gs-bg--dark .gs-table-hint {
  color: var(--gs-white);
}
.gs-bg--blue .gs-table-hint, .gs-text--light .gs-table-hint {
  color: var(--gs-white);
}
.gs-bg--primary .gs-table-hint, .gs-text--light .gs-table-hint {
  color: var(--gs-white);
}

/* A scroller that is only reachable by dragging excludes keyboard users, so
   main.js makes an overflowing table focusable. Give that focus a visible ring. */
[data-gs-table-scroll]:focus-visible {
  outline: 2px solid var(--gs-blue);
  outline-offset: 2px;
}

/* TablePress tables, which can appear in any module rather than just the
   Universal Content body (whose own tables are handled in that block's CSS).
   TablePress 2.x already wraps its output, so the wrapper becomes the
   scroller; 1.x has no wrapper, so the table itself does, with the inner reset
   below keeping the two from nesting into a scroller within a scroller. */
.tablepress-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .tablepress {
    display: block;
    width: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Same viewport bleed as the Universal Content tables — see that block's
       CSS for why this is -20px rather than a vw calculation. */
    max-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .tablepress-table-wrapper {
    max-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .tablepress th,
  .tablepress td {
    min-width: 140px;
  }
  .tablepress-table-wrapper .tablepress {
    display: table;
    width: 100%;
    overflow-x: visible;
  }
}

/* ============================================================
   Custom footer — Theme Settings → Footer
   ============================================================
   Moved here from genstone-base-child together with the PHP that renders it.
   Leaving the styles behind was the bug: the markup came from this theme
   while the grid rules stayed in one child, so a site on the OTHER child
   rendered the configured columns as a single unstyled stack.

   Everything below is scoped to .site-footer--custom or to the .gs-footer-*
   classes only that footer emits, so the WP-menu footer is untouched.
   ============================================================ */

/* Mobile-first: one column, spans ignored. */
.site-footer--custom .site-footer__inner {
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.site-footer--custom .gs-footer-col {
  grid-column: auto;
  min-width: 0;
}

/* Tablet: fit as many ~200px columns as the width allows, never more than
   the configured count (there are only that many children). */
@media (min-width: 641px) {
  .site-footer--custom .site-footer__inner {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Desktop: honor the configured column count and per-column spans. */
@media (min-width: 961px) {
  .site-footer--custom .site-footer__inner {
    grid-template-columns: repeat(var(--gs-footer-cols, 4), minmax(0, 1fr));
    gap: 48px;
  }

  .site-footer--custom .gs-footer-col {
    grid-column: span var(--gs-footer-span, 1);
  }
}

/* Linked column heading — reads as the heading until hovered/focused. */
.site-footer__col-heading-link {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  transition: color 0.18s;
}

.site-footer__col-heading-link:hover,
.site-footer__col-heading-link:focus-visible {
  color: var(--gs-orange);
}

/* ── Content blocks within a column ── */
.gs-footer-block + .gs-footer-block {
  margin-top: 24px;
}

/* Image */
.gs-footer-block--image .gs-footer-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Caption beside the image ("Caption Beside Image" on the Image block).

   The flex children are the caption and EITHER the <img> or, when the image is
   linked, the <a> wrapping it -- so both are given the same sizing rather than
   targeting .gs-footer-image alone.

   The base rule above sets width:100% so a stacked image fills its block. In a
   flex row that would claim the whole width and leave the caption nothing, so
   the image sizes from its own intrinsic width here and the inline Max Width
   (moved onto the <img> by gs_child_footer_render_image) caps it. */
.gs-footer-block--image-inline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gs-footer-block--image-inline > a,
.gs-footer-block--image-inline > .gs-footer-image {
  flex: 0 1 auto;
  min-width: 0;
}

.gs-footer-block--image-inline > a {
  display: block;
  line-height: 0; /* no descender gap under the image inside the link */
}

.gs-footer-block--image-inline .gs-footer-image {
  width: auto;
  max-width: 100%;
}

/* Takes the space the image leaves, and drops the stacked layout's top gap --
   align-items: center already handles the vertical relationship. */
.gs-footer-block--image-inline .gs-footer-image__caption {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.gs-footer-image__caption {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--gs-white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* Links — the list itself inherits .site-footer__menu from the parent. */
.gs-footer-block--links .site-footer__col-heading--stacked:first-child {
  margin-top: 0;
}

.gs-footer-block--links .gs-footer-link--has-icon a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* Every menu link in the custom footer hovers orange. The parent's
   .site-footer__menu a:hover keeps the colour white and changes only the
   underline, so this is the hover cue for the whole footer rather than an
   icon-link special case.

   Icons need no rule of their own: their stroke is currentColor, so they turn
   with the text. At 0-3-1 this outranks the parent's 0-2-1 without
   !important. */
.site-footer--custom .site-footer__menu a:hover,
.site-footer--custom .site-footer__menu a:focus-visible {
  color: var(--gs-orange);
}

/* Icon links additionally drop the parent's hover underline. Colour is not
   repeated here -- the rule above already supplies it. */
.gs-footer-block--links .gs-footer-link--has-icon a:hover,
.gs-footer-block--links .gs-footer-link--has-icon a:focus-visible {
  text-decoration: none;
}

/* Long unbroken link text -- an email address is the usual culprit -- must be
   allowed to wrap, or it sets a min-content floor wider than its column and
   spills into the next one.

   Two things are needed together. `overflow-wrap: anywhere` permits a break
   mid-token AND, unlike `break-word`, lets that shrink the element's
   min-content width. `min-width: 0` clears the `auto` minimum a flex item
   carries, which would otherwise hold the text span at its unbroken width
   inside the inline-flex link.

   Applied to footer menu links generally, not just the ones with icons: any
   long address or URL has the same problem. */
.site-footer--custom .site-footer__menu a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-footer--custom .site-footer__menu a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gs-footer-link__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.gs-footer-link__icon svg {
  width: 18px;
  height: 18px;
}

/* Fill is opt-in, not blanket. A stroke icon carries fill="none" on the <svg>,
   and a CSS declaration outranks that presentation attribute -- so forcing
   fill: currentColor here painted every stroke icon solid. An outlined
   envelope became a filled white rectangle; a phone handset survived only
   because its silhouette still reads as a phone when solid.

   Filled icons still need the colour, since library SVGs often carry no fill
   of their own and would default to black on the dark footer. They opt in
   through the Icon Library's "Is Filled" toggle, the same flag the parent uses
   for grid-card icons. The wildcard covers path/rect/circle/polyline, which is
   what those SVGs are built from. */
.gs-footer-link__icon--filled svg,
.gs-footer-link__icon--filled svg * {
  fill: currentColor;
}

/* WYSIWYG */
.gs-footer-block--text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gs-white);
}

.gs-footer-block--text > :first-child {
  margin-top: 0;
}

.gs-footer-block--text > :last-child {
  margin-bottom: 0;
}

.gs-footer-block--text p {
  margin: 0 0 12px;
}

.gs-footer-block--text h2,
.gs-footer-block--text h3,
.gs-footer-block--text h4,
.gs-footer-block--text h5,
.gs-footer-block--text h6 {
  color: var(--gs-white);
  margin: 0 0 12px;
}

/* Links carry the same white as the surrounding copy, so weight is what marks
   them out now that the underline is gone. */
.gs-footer-block--text a {
  color: var(--gs-white);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s;
}

.gs-footer-block--text a:hover {
  color: var(--gs-orange);
}

/* The block's own heading keeps the footer heading spacing, and opts out of the
   generic WYSIWYG heading/link rules above (which would underline it). */
.gs-footer-block--text > .site-footer__col-heading {
  margin: 0 0 16px;
}

.gs-footer-block--text .site-footer__col-heading-link {
  color: inherit;
  /* Re-asserted because `.gs-footer-block--text a` sets 600 at a higher
     specificity than the generic `font: inherit` on the heading link, which
     would otherwise pull a linked heading down from the heading's own 700. */
  font-weight: inherit;
  text-decoration: none;
}

.gs-footer-block--text .site-footer__col-heading-link:hover,
.gs-footer-block--text .site-footer__col-heading-link:focus-visible {
  color: var(--gs-orange);
}

.gs-footer-block--text ul,
.gs-footer-block--text ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.gs-footer-block--text li {
  margin-bottom: 6px;
}

.gs-footer-block--text img {
  max-width: 100%;
  height: auto;
}