/* ============================================================
   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; }
}

/* Anchor links. The header is fixed, so a jump to #something would land with
   the top of the section hidden under it. scroll-padding-top on the page makes
   every anchor target, an ACF section id, a heading, a plain #id, stop below
   the header with a little air: the header's height, plus the top bar when
   there is one, plus the admin bar for logged-in editors, plus a 24px gap.
   --gs-anchor-gap is the gap, if a site wants more or less. */
:root {
  --gs-anchor-gap: 24px;
  --gs-anchor-offset: calc(var(--gs-header-h, 100px) + var(--gs-anchor-gap));
}
:root:has(.gs-topbar) {
  --gs-anchor-offset: calc(var(--gs-header-h, 100px) + var(--gs-topbar-h, 38px) + var(--gs-anchor-gap));
}
html { scroll-padding-top: var(--gs-anchor-offset); }
@media screen and (min-width: 783px) {
  :root:has(body.admin-bar) { scroll-padding-top: calc(var(--gs-anchor-offset) + 32px); }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
  :root:has(body.admin-bar) { scroll-padding-top: calc(var(--gs-anchor-offset) + 46px); }
}
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 in the brand colors: an outline in Primary or Secondary that fills
   with that color on hover. Both read from the Theme Settings brand colors. */
.gs-btn--ghost-primary,
.gs-btn--ghost-secondary {
  background: transparent;
  color: var(--gs-ghost-c);
  border-color: var(--gs-ghost-c);
}
.gs-btn--ghost-primary   { --gs-ghost-c: var(--gs-blue); }
.gs-btn--ghost-secondary { --gs-ghost-c: var(--gs-orange); }
.gs-btn--ghost-primary:hover,
.gs-btn--ghost-primary:focus-visible,
.gs-btn--ghost-secondary:hover,
.gs-btn--ghost-secondary:focus-visible {
  background: var(--gs-ghost-c);
  color: var(--gs-white);
  border-color: var(--gs-ghost-c);
}

/* White background — for a call to action sitting on a blue or navy section
   where an outline would read as secondary. The text is the chosen color
   (Primary or Secondary from Theme Settings; palette colors are in
   inc/brand-palette.php) and on hover the button fills with that color under
   white text. .gs-btn--white is the old name, kept as Primary. */
.gs-btn--white,
.gs-btn--white-primary,
.gs-btn--white-secondary {
  background: var(--gs-white);
  color: var(--gs-white-c, var(--gs-blue));
  border-color: var(--gs-white);
}
.gs-btn--white-secondary { --gs-white-c: var(--gs-orange); }
.gs-btn--white:hover,
.gs-btn--white:focus-visible,
.gs-btn--white-primary:hover,
.gs-btn--white-primary:focus-visible,
.gs-btn--white-secondary:hover,
.gs-btn--white-secondary:focus-visible {
  background: var(--gs-white-c, var(--gs-blue));
  color: var(--gs-white);
  border-color: var(--gs-white-c, var(--gs-blue));
}

/* Large CTA size — uppercase, big padding */
.gs-btn--lg {
  --gs-btn-arrow: 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  --gs-btn-pad-y: 18px;
  --gs-btn-pad-x: 28px;
  gap: 14px;
}
/* Trailing chevron on every CTA link, not only the large ones. Anchors only: the
   <button> and submit versions (form submits, flip-card toggles) are actions,
   not calls to action, and the download button has its own icon. :where() keeps
   this at the specificity of the large-size rule, so the new-tab icon below
   still replaces it. */
.gs-btn--lg::after,
:where(a).gs-btn:where(:not(.gs-btn--download))::after {
  content: "";
  width: var(--gs-btn-arrow, 12px);
  height: var(--gs-btn-arrow, 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='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,
:where(a).gs-btn:where(:not(.gs-btn--download)):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[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; }
}


/* ── 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;
  /* A module's Eyebrow Color (Design tab) sets --gs-eyebrow-c on the element;
     otherwise Branding → Module Eyebrow Color. */
  color: var(--gs-eyebrow-c, var(--gs-module-eyebrow, var(--gs-text-dark)));
  margin-bottom: 14px;
}
.gs-eyebrow--light { color: var(--gs-eyebrow-c, 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-eyebrow-ul, var(--gs-orange)); /* a module's Eyebrow Underline Color */
  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;
}
/* Tighter than .gs-heading-xl, which shares the -0.02em above. */
.gs-heading-lg {
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4vw + 0.5rem, 4.5rem);
  font-weight: 700;
  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;
}
/* GF emits an empty "spacer gfield" (span 6) after half-width fields. Left
   visible it takes the other half of the row, so half-width fields stack one
   per row instead of sitting side by side. */
.gform-theme--framework .gform_fields > .spacer { display: none !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:not([class*="gfield--type-text"]) .gfield_label,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gfield_label,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]),
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]),
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}
.gform-theme--framework #field_9_10:not([class*="gfield--type-text"]) .ginput_container_checkbox,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .ginput_container_checkbox,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .ginput_container_checkbox,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .ginput_container_radio {
  width: 100% !important;
  max-width: none !important;
}
.gform-theme--framework #field_9_10:not([class*="gfield--type-text"]) .gfield_checkbox,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gfield_checkbox,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .gfield_checkbox,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gfield_checkbox {
  grid-template-columns: repeat(3, 1fr) !important;
}
.gform-theme--framework #field_9_10:not([class*="gfield--type-text"]) .gfield_checkbox,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .gfield_checkbox,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .gfield_radio {
  grid-template-columns: repeat(2, 1fr) !important;
}

.gform-theme--framework #field_9_10:not([class*="gfield--type-text"]) .gchoice,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gchoice,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice:hover,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gchoice:hover,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .gchoice:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.gform-theme--framework #field_9_10:not([class*="gfield--type-text"]) .gchoice input[type="checkbox"],
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gchoice input[type="checkbox"],
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .gchoice input[type="checkbox"],
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice label,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gchoice label,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice label strong,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gchoice label strong,
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice:has(input:checked),
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gchoice:has(input:checked),
.gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice::before,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice label,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice_9_10_1::before,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice_9_10_2::before,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice_9_10_3::before,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gchoice_9_10_4::before,
.gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .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:not([class*="gfield--type-text"]) .gfield_checkbox {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 540px) {
  .gform-theme--framework #field_9_10:not([class*="gfield--type-text"]) .gfield_checkbox,
  .gform-theme--framework #field_9_11:not([class*="gfield--type-text"]) .gfield_checkbox,
  .gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .gfield_checkbox,
  .gform-theme--framework #field_9_15:not([class*="gfield--type-text"]) .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); }

/* Gray gradient background — the idle gray circles and pale connector vanish
   into it, so give the idle steps a white disc with a navy edge, a darker
   connector and stronger labels. Active (orange) and completed (blue) keep
   their own colors. */
.gs-bg--light .gform-theme--foundation .gf_step { color: var(--gs-navy); }
.gs-bg--light .gform-theme--foundation .gf_step::before { background: rgba(10, 37, 64, .35); }
.gs-bg--light .gform-theme--foundation .gf_step:not(.gf_step_active):not(.gf_step_completed) .gf_step_number {
  background-color: var(--gs-white) !important;
  color: var(--gs-navy);
  box-shadow: 0 0 0 1px rgba(10, 37, 64, .35);
}
.gs-bg--light .gform-theme--foundation .gf_step_completed::before,
.gs-bg--light .gform-theme--foundation .gf_step_completed + .gf_step::before { background: var(--gs-blue); }

/* 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);
  }

  /* Under Construction footer: the last column, when it doesn't fill the row,
     sits against the right edge instead of directly after the one before it. */
  .site-footer--custom .gs-footer-col--end {
    grid-column: span var(--gs-footer-span, 1) / -1;
  }
  /* ...and the columns are centered vertically against each other. */
  .site-footer--custom .site-footer__inner--uc {
    align-items: center;
  }
}

/* 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;
}


/* Opt-in for any other module: add `gs-list-disc` to the list (or a wrapper
   around it) under Advanced → Additional CSS Class(es). */
ul.gs-list-disc,
.gs-list-disc ul {
  list-style: disc outside;
  padding-left: 1.25em;
}

ol.gs-list-disc,
.gs-list-disc ol {
  list-style: decimal outside;
  padding-left: 1.25em;
}

.gs-list-disc ul ul { list-style-type: circle; }
.gs-list-disc ul ul ul { list-style-type: square; }

/* Opt-out. The element-qualified selectors matter: a bare `.gs-list-none`
   (0,1,0) would lose to the container rules above (0,1,1) when the class
   sits on the list element itself. */
ul.gs-list-none,
ol.gs-list-none,
.gs-list-none ul,
.gs-list-none ol {
  list-style: none;
  padding-left: 0;
}

/* ============================================================
   Third-party form embeds (Quickbase)

   The embedded form is cross-origin, so the page cannot measure its
   content height — the browser blocks access to the frame's document,
   and Quickbase does not postMessage its height out. There is no way to
   size this automatically from here; the only options are a height
   generous enough that the form never needs its own scrollbar, or
   cooperation from the embedded page (see assets/js/main.js).

   So: one tall height per breakpoint, in one place. If the form is
   scrolling internally, raise the value for that breakpoint. Whitespace
   below the form means it is too tall.

   Applies to `.gs-embed-frame` and to `#myIframe`, the id used by the
   inline script on the Pre-Application Check List page. The CSS height
   overrides that iframe's hard-coded height="2130" attribute.
   ============================================================ */

:root {
  --gs-embed-h: 2400px;
}

@media (max-width: 1024px) {
  :root { --gs-embed-h: 3000px; }
}

@media (max-width: 768px) {
  /* The mobile form (dfid=14) stacks its fields, so it runs much taller. */
  :root { --gs-embed-h: 3800px; }
}

.gs-embed-frame,
#myIframe {
  display: block;
  width: 100%;
  height: var(--gs-embed-h, 2400px);
  border: 0;
  /* Once JS receives a real height this is replaced by an inline style. */
}

/* The embed sits inside a WYSIWYG <p>; drop the paragraph spacing so the
   frame is not pushed around by body-copy margins. */
.gs-body-copy p:has(> #myIframe),
.gs-body-copy p:has(> .gs-embed-frame) {
  margin: 0;
}

/* ============================================================
   Gravity Forms — progress bar indicator

   Gravity Forms offers two page-progress indicators on a multi-step form,
   and they emit completely different markup:

     Steps        → .gf_page_steps / .gf_step   (numbered circles)
     Progress Bar → .gf_progressbar / .gf_progressbar_percentage

   The Steps styling above carried no rules for the progress bar. So a form
   set to "Progress Bar" falls back to Gravity Forms' stock look while a
   form set to "Steps" picks up the brand styling, which is why two
   multi-step forms on the same build can look unrelated.

   These rules give the progress bar the same treatment, so either
   setting is presentable out of the box.

   NOTE: never set width on .gf_progressbar_percentage — Gravity Forms
   writes the live percentage there as an inline style, and any width
   declared here would fight it.
   ============================================================ */

.gform_wrapper .gf_progressbar_wrapper {
  margin: 0 0 40px;
  padding: 0;
}

.gform_wrapper .gf_progressbar_title {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--gs-font-display, var(--gs-font));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gs-blue);
}

/* The track. GF appends a colour variant class (gf_progressbar_blue etc.);
   the two-class selector below overrides whichever one is set. */
.gform_wrapper .gf_progressbar,
.gform_wrapper .gf_progressbar.gf_progressbar_blue,
.gform_wrapper .gf_progressbar.gf_progressbar_gray,
.gform_wrapper .gf_progressbar.gf_progressbar_green,
.gform_wrapper .gf_progressbar.gf_progressbar_orange,
.gform_wrapper .gf_progressbar.gf_progressbar_red,
.gform_wrapper .gf_progressbar.gf_progressbar_custom {
  height: 10px;
  border-radius: 999px;
  background: var(--gs-gray-soft);
  overflow: hidden;
  box-shadow: none;
}

/* The fill — orange gradient, matching the submit/next buttons. */
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage.percentbar_blue,
.gform_wrapper .gf_progressbar_percentage.percentbar_gray,
.gform_wrapper .gf_progressbar_percentage.percentbar_green,
.gform_wrapper .gf_progressbar_percentage.percentbar_orange,
.gform_wrapper .gf_progressbar_percentage.percentbar_red,
.gform_wrapper .gf_progressbar_percentage.percentbar_custom {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gs-orange), var(--gs-orange-dark));
  transition: width 0.35s ease;
}

/* GF prints the "50%" label inside the fill. At 10px tall there is no room
   for it, and the number is already in the title above. */
.gform_wrapper .gf_progressbar_percentage span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dark sections — lighten the track and title the same way .gf_step is
   handled on dark backgrounds. */
.gs-bg--blue .gform_wrapper .gf_progressbar,
.gs-bg--navy .gform_wrapper .gf_progressbar,
.gs-bg--dark .gform_wrapper .gf_progressbar {
  background: rgba(255, 255, 255, 0.18);
}

.gs-bg--blue .gform_wrapper .gf_progressbar_title,
.gs-bg--navy .gform_wrapper .gf_progressbar_title,
.gs-bg--dark .gform_wrapper .gf_progressbar_title {
  color: var(--gs-white);
}

@media (max-width: 640px) {
  .gform_wrapper .gf_progressbar_wrapper { margin-bottom: 28px; }
  .gform_wrapper .gf_progressbar_title { font-size: 12px; }
}

/* ============================================================
   Gravity Forms — Image Choice cards

   The treatment above is scoped to `#field_9_1` — form 9, field 1, the
   "Role" step on genstonecompanies.com. On any other form or field ID none
   of those rules match, so the field would fall back to Gravity Forms'
   stock radio list. The ID rules outrank these, so form 9 is unchanged.

   These are the same rules keyed to `.gfield--type-image_choice`
   instead, so any image choice field on any form gets the card layout.

   Deliberately NOT ported: the `#field_9_1` `::after` icon badge, which uses
   :nth-of-type() to put a house icon on choice 1 and a chart icon on
   choice 2. Those are specific to that form's Homeowner/Investor
   options and would be wrong on every other field.

   Label format the card expects: <strong>Title</strong>Description.
   The <strong> is block-level so the description flows beneath it
   without a <br>, which GF's label sanitizer strips.
   ============================================================ */

/* Grid — GF's framework theme sets .gfield_radio to grid with its own
   column variables that constrain card width; override to a plain 50/50. */
.gform-theme--framework .gfield--type-image_choice .ginput_container_image_choice {
  width: 100%;
}

.gform-theme--framework .gfield--type-image_choice .gfield_radio,
.gform-theme--framework .gfield--type-image_choice .gfield_checkbox {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
}

/* The card itself */
.gform-theme--framework .gfield--type-image_choice .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 0.25s ease, box-shadow 0.25s ease;
}

.gform-theme--framework .gfield--type-image_choice .gchoice:has(img):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* GF wraps image + label in inline spans, which stops the card filling the
   column — force them block-level at full size. */
.gform-theme--framework .gfield--type-image_choice .gchoice .gfield-image-choice-wrapper-outer,
.gform-theme--framework .gfield--type-image_choice .gchoice .gfield-choice-image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

.gform-theme--framework .gfield--type-image_choice .gchoice img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 0 !important;
}

/* Gradient overlay. Alternating brand colours by odd/even so it scales to
   any number of choices, rather than a fixed first/second.
   color-mix keeps these tied to the brand tokens instead of hard-coding
   the rgba values. */
.gform-theme--framework .gfield--type-image_choice .gchoice:has(img)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gs-orange) 15%, transparent) 0%,
    color-mix(in srgb, var(--gs-orange) 92%, transparent) 100%
  );
}

.gform-theme--framework .gfield--type-image_choice .gchoice:has(img):nth-of-type(even)::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%
  );
}

/* Hide the native control — the whole card is the hit area. */
.gform-theme--framework .gfield--type-image_choice .gchoice input[type="radio"],
.gform-theme--framework .gfield--type-image_choice .gchoice input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* The inner wrapper owns the overlay layout rather than the label, so GF's
   selected-state rules can move the label around without breaking the
   anchoring. Both idle and checked states get the same treatment. */
.gform-theme--framework .gfield--type-image_choice .gchoice .gfield-image-choice-wrapper-inner,
.gform-theme--framework .gfield--type-image_choice .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;
}

.gform-theme--framework .gfield--type-image_choice .gchoice .gfield-image-choice-wrapper-outer,
.gform-theme--framework .gfield--type-image_choice .gchoice:has(input:checked) .gfield-image-choice-wrapper-outer {
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.gform-theme--framework .gfield--type-image_choice .gchoice:has(img) label,
.gform-theme--framework .gfield--type-image_choice .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;
}

.gform-theme--framework .gfield--type-image_choice .gchoice:has(img) label strong {
  display: block;
  font-family: var(--gs-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--gs-white);
}

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

/* A choice with no image (e.g. "Skip to general inquiry") becomes a
   centred ghost pill spanning the full grid width, below the cards. */
.gform-theme--framework .gfield--type-image_choice .gchoice:not(:has(img)) {
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: center;
  margin-top: 16px;
}

.gform-theme--framework .gfield--type-image_choice .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 0.18s, color 0.18s;
}

.gform-theme--framework .gfield--type-image_choice .gchoice:not(:has(img)) label:hover,
.gform-theme--framework .gfield--type-image_choice .gchoice:not(:has(img)):has(input:checked) label {
  background: var(--gs-navy) !important;
  color: var(--gs-white) !important;
}

@media (max-width: 767.98px) {
  .gform-theme--framework .gfield--type-image_choice .gfield_radio,
  .gform-theme--framework .gfield--type-image_choice .gfield_checkbox {
    grid-template-columns: 1fr !important;
  }
  .gform-theme--framework .gfield--type-image_choice .gchoice:has(img) {
    aspect-ratio: 16 / 9 !important;
  }
  .gform-theme--framework .gfield--type-image_choice .gchoice .gfield-image-choice-wrapper-inner {
    padding: 20px !important;
  }
  .gform-theme--framework .gfield--type-image_choice .gchoice:has(img) label strong {
    font-size: 22px;
  }
}

/* ============================================================
   Header — top bar and search
   Rendered by inc/header-render.php through the header hooks. Moved here
   from genstone-base-child, where it was the only copy — so a site on any
   other child got the markup unstyled.
   ============================================================ */

/* ── Top bar ──
   .site-header is position:fixed at top:0, so a bar left in
   normal flow sits underneath it — which is exactly what happened. The bar is
   pinned above the header instead, and everything that offsets for the header
   gains the bar's height on top.

   Every one of those rules is a sibling selector off .gs-topbar, so none of it
   applies when the bar is switched off: .gs-topbar, .site-header,
   .gs-header-search and .site-main are all children of #page.

   z-index sits above the header's 200 so the sites dropdown falls over the
   nav rather than behind it. */
:root { --gs-topbar-h: 38px; }

.gs-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--gs-blue);
  color: var(--gs-white);
  font-size: 13px;
  line-height: 1.2;
}
.gs-topbar ~ .site-header { top: var(--gs-topbar-h); }
.gs-topbar ~ .site-main { padding-top: calc(var(--gs-header-h) + var(--gs-topbar-h)); }

/* Mirrors the header's own admin-bar offsets: 32px above 782, 46px between
   600 and 782, and nothing at or below 600 where the bar scrolls away. */
body.admin-bar .gs-topbar { top: 32px; }
body.admin-bar .gs-topbar ~ .site-header { top: calc(32px + var(--gs-topbar-h)); }
@media screen and (max-width: 782px) {
  body.admin-bar .gs-topbar { top: 46px; }
  body.admin-bar .gs-topbar ~ .site-header { top: calc(46px + var(--gs-topbar-h)); }
}
@media screen and (max-width: 600px) {
  body.admin-bar .gs-topbar { top: 0; }
  body.admin-bar .gs-topbar ~ .site-header { top: var(--gs-topbar-h); }
}
.gs-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Flush left and right rather than inside .gs-container: the dropdown is
     meant to sit against the edge of the screen. */
  padding: 0 20px;
  min-height: 38px;
}
/* Holds the right-hand items over when there is no dropdown to push them. */
.gs-topbar__spacer { flex: 1 1 auto; }

.gs-topbar__sites { position: relative; }
.gs-topbar__sites-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.gs-topbar__caret {
  width: 13px;
  height: 13px;
  transition: transform .2s ease;
}
.gs-topbar__sites-toggle[aria-expanded="true"] .gs-topbar__caret { transform: rotate(180deg); }

.gs-topbar__sites-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  min-width: 315px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--gs-white);
  border-radius: 0 0 var(--gs-radius-sm) var(--gs-radius-sm);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.gs-topbar__sites-menu[hidden] { display: none; }
.gs-topbar__sites-menu a {
  display: block;
  padding: 9px 18px;
  color: var(--gs-text-dark);
  font-weight: 600;
  text-decoration: none;
}
.gs-topbar__sites-menu a:hover,
.gs-topbar__sites-menu a:focus-visible {
  background: var(--gs-light);
  color: var(--gs-blue);
}

.gs-topbar__items {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gs-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.gs-topbar__link:hover { text-decoration: underline; }
.gs-topbar__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
/* The bar is 38px tall, so the shared button has to come down to fit it. */
.gs-topbar .gs-btn.gs-topbar__btn {
  min-height: 0;
  padding: 6px 16px;
  font-size: 12px;
}

@media (max-width: 767.98px) {
  /* The dropdown is the useful half on a phone; the items wrap awkwardly and
     duplicate what the mobile menu already offers. */
  .gs-topbar__items { display: none; }
  .gs-topbar__inner { justify-content: flex-start; }
}

/* ── Search ── */
/* .site-header__actions was a plain block — it only ever held one button.
   With the search icon beside it the two would sit on the text baseline
   instead of centred on each other. */
.site-header__actions,
.site-header__mobile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Each is hidden at its own breakpoint above; display:flex here would
   otherwise revive them. */
@media (max-width: 1200px) {
  .site-header__actions { display: none; }
}
@media (min-width: 1200.02px) {
  .site-header__mobile-actions { display: none; }
}
/* In the mobile drawer the header stacks its actions full width. Keep the
   icon beside the button rather than stretched across the row. */
@media (max-width: 1200px) {
  .site-header__mobile-actions {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .site-header__mobile-actions .gs-btn { flex: 1 1 auto; }
  .site-header__mobile-actions .gs-header-search__toggle { flex: 0 0 auto; }
}

.gs-header-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gs-blue);
  cursor: pointer;
}
.gs-header-search__toggle svg { width: 25px; height: 25px; }
.gs-header-search__toggle:hover { color: var(--gs-navy); }
.gs-header-search__toggle:focus-visible {
  outline: 3px solid var(--gs-orange);
  outline-offset: 2px;
  border-radius: var(--gs-radius-sm);
}

/* Slides out from under the header rather than over it: the panel is behind
   the masthead in the stacking order and simply reveals below its edge. */
/* Fixed just under the header for the same reason the bar is: in normal flow
   it landed at the top of the document, behind the fixed header. z-index below
   the header's 200 so it still reads as sliding out from under it.

   top tracks the header's own height, and the compact --gs-header-h-scrolled
   value once the page has scrolled, so the panel stays welded to the header's
   bottom edge rather than floating away from it. */
.gs-header-search {
  position: fixed;
  top: var(--gs-header-h);
  left: 0;
  right: 0;
  z-index: 199;
  background: var(--gs-white);
  border-bottom: 1px solid var(--gs-border, rgba(0, 0, 0, .1));
  box-shadow: 0 12px 24px rgba(0, 0, 0, .10);
  overflow: hidden;
}
.gs-header-search[hidden] { display: none; }
/* Resting value only. The real top is set in main.js from the header's
   measured bottom edge, which is the only thing that survives the compact
   header, the top bar and the admin bar's three breakpoints at once. */

.gs-header-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
  /* A search box does not want the full container width — at 1680px the field
     ran the width of the screen for a few words of query. */
  max-width: 680px;
  margin-inline: auto;
  padding: 16px 40px;
}
.gs-header-search__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--gs-border, rgba(0, 0, 0, .18));
  border-radius: var(--gs-radius-sm);
  font-size: 16px;
}
.gs-header-search__field:focus-visible {
  outline: 2px solid var(--gs-blue);
  outline-offset: 0;
  border-color: var(--gs-blue);
}
.gs-header-search__submit,
.gs-header-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--gs-radius-sm);
  cursor: pointer;
}
.gs-header-search__submit {
  background: var(--gs-blue);
  color: var(--gs-white);
}
.gs-header-search__submit:hover { background: var(--gs-navy); }
.gs-header-search__close {
  background: none;
  color: var(--gs-text-dark);
}
.gs-header-search__close:hover { color: var(--gs-blue); }
.gs-header-search__submit svg,
.gs-header-search__close svg { width: 19px; height: 19px; }

@media (max-width: 767.98px) {
  .gs-header-search__form { padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-topbar__caret { transition: none; }
}


/* Inline headline styling (genstone_inline_heading() in inc/setup.php),
   available on every module headline that carries .gs-inline-styled.
   Any element carrying an hl- class (a <mark> or a <span>) is recolored; a bare
   <mark> uses the accent color. --hl is the color and --hl-ink the text on it
   when it is drawn as a highlighter (.hl-marker). Weight classes are
   fw-100…fw-900. Branding palette colors add their own hl-pal-{slug} in
   inc/brand-palette.php. */
.gs-inline-styled mark { background: none; }
.gs-inline-styled mark,
.gs-inline-styled [class*="hl-"] { color: var(--hl, var(--gs-orange)); }
.gs-inline-styled .hl-primary   { --hl: var(--gs-blue); --hl-ink: var(--gs-white); }
.gs-inline-styled .hl-secondary { --hl: var(--gs-orange); --hl-ink: var(--gs-white); }
.gs-inline-styled .hl-navy      { --hl: var(--gs-navy); --hl-ink: var(--gs-white); }
.gs-inline-styled .hl-white     { --hl: var(--gs-white); --hl-ink: var(--gs-navy); }
.gs-inline-styled .hl-marker {
  background: var(--hl, var(--gs-orange));
  color: var(--hl-ink, var(--gs-white));
  padding: 0 .2em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.gs-inline-styled .fw-100 { font-weight: 100; }
.gs-inline-styled .fw-200 { font-weight: 200; }
.gs-inline-styled .fw-300 { font-weight: 300; }
.gs-inline-styled .fw-400 { font-weight: 400; }
.gs-inline-styled .fw-500 { font-weight: 500; }
.gs-inline-styled .fw-600 { font-weight: 600; }
.gs-inline-styled .fw-700 { font-weight: 700; }
.gs-inline-styled .fw-800 { font-weight: 800; }
.gs-inline-styled .fw-900 { font-weight: 900; }

/* ── Gravity Forms: multi-step "contact flow" (form CSS class gs-flow) ──
   Step 1 is two cards of radio choices (the JS in main.js advances on pick),
   step 3 is a merge-tag summary. Scoped to .gs-flow so other forms are
   untouched. */
.gform-theme--foundation .gform-field-label__text { color: var(--gs-blue); } /* Primary */
.gs-flow .gs-flow-title {
  margin: 0 0 12px;
  font-size: var(--gs-h2);
  line-height: 1.1;
  font-weight: 800;
  color: #000;
}
.gs-flow .gs-flow-lead {
  max-width: 62ch;
  margin: 0 0 8px;
  font-size: var(--gs-body-size);
  color: var(--gs-text);
}
.gs-flow .gs-flow-card,
.gs-flow .gs-flow-card.gfield {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-lg);
  background: #fafbfd;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.gs-flow .gs-flow-card:hover,
.gs-flow .gs-flow-card:focus-within,
.gs-flow .gs-flow-card:has(input:checked) {
  border-color: var(--gs-blue);
  background: color-mix(in srgb, var(--gs-blue) 4%, var(--gs-white));
  box-shadow: var(--gs-shadow-sm);
}
/* Card header: icon disc + title */
.gs-flow .gs-flow-card > .gfield_label {
  position: relative;
  display: flex;
  align-items: center;
  float: left; /* keeps the legend inside the fieldset border instead of straddling it */
  width: 100%;
  min-height: 72px;
  margin: 0 0 12px;
  padding: 0 0 0 88px;
  font-size: var(--gs-h4);
  font-weight: 800;
  line-height: 1.2;
  color: var(--gs-navy);
}
.gs-flow .gs-flow-card > .gfield_label::before,
.gs-flow .gs-flow-card > .gfield_label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translateY(-50%);
  border-radius: 50%;
}
.gs-flow .gs-flow-card > .gfield_label::before {
  background: var(--gs-orange); /* Secondary */
}
.gs-flow .gs-flow-card > .gfield_label::after {
  background-color: var(--gs-white); /* line art */
  -webkit-mask: var(--gs-flow-icon) center / 36px 36px no-repeat;
  mask: var(--gs-flow-icon) center / 36px 36px no-repeat;
}
.gs-flow .gs-flow-card--explore {
  --gs-flow-icon: 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='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 10h4'/><path d='M19 7V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3'/><path d='M20 21a2 2 0 0 0 2-2v-3.851c0-1.39-2-2.962-2-4.829V8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v11a2 2 0 0 0 2 2z'/><path d='M22 16H2'/><path d='M4 21a2 2 0 0 1-2-2v-3.851c0-1.39 2-2.962 2-4.829V8a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v11a2 2 0 0 1-2 2z'/><path d='M9 7V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3'/></svg>");
}
.gs-flow .gs-flow-card--ready {
  --gs-flow-icon: 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='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/><path d='M12 11h.01'/><path d='M16 11h.01'/><path d='M8 11h.01'/></svg>");
}
.gs-flow .gs-flow-card .gfield_description {
  clear: both;
  margin: 0 0 20px;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gs-text);
}
/* Choice rows — whole row is the button, radio dot hidden */
.gs-flow .gs-flow-card .gfield_radio {
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
}
.gs-flow .gs-flow-card .gchoice {
  display: block !important;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.gs-flow .gs-flow-card .gchoice input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.gs-flow .gs-flow-card .gchoice label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-white);
  box-shadow: var(--gs-shadow-sm);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gs-text-dark);
  transition: border-color .18s, background .18s, transform .1s;
}
.gs-flow .gs-flow-card .gchoice label::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background-color: var(--gs-muted);
  -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' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center / contain no-repeat;
  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' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center / contain no-repeat;
  transition: transform .18s, background-color .18s;
}
.gs-flow .gs-flow-card .gchoice:hover label,
.gs-flow .gs-flow-card .gchoice input:focus-visible + label {
  border-color: var(--gs-blue);
}
.gs-flow .gs-flow-card .gchoice:hover label::after {
  background-color: var(--gs-blue);
  transform: translateX(3px);
}
.gs-flow .gs-flow-card .gchoice input:checked + label {
  border-color: var(--gs-blue);
  background: color-mix(in srgb, var(--gs-blue) 8%, var(--gs-white));
}
.gs-flow .gs-flow-card .gchoice input:focus-visible + label {
  outline: 2px solid var(--gs-blue);
  outline-offset: 2px;
}
/* Step 1 advances on pick — hide Next until something is already selected
   (the user came back with Back). */
.gs-flow .gform_page:has(.gs-flow-card):not(:has(.gs-flow-card input:checked)) .gform_page_footer {
  display: none !important;
}
.gs-flow .gform_page:has(.gs-flow-card) .gform_page_footer .gform_next_button {
  margin-top: 24px !important;
}
/* ── Step 1: the two big "intent" options ── */
.gs-flow .gs-flow-intent .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px !important;
}
.gs-flow .gs-flow-intent .gchoice,
.gs-flow .gs-flow-list .gchoice {
  display: block !important;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.gs-flow .gs-flow-intent .gchoice input[type="radio"],
.gs-flow .gs-flow-list .gchoice input[type="radio"],
.gs-flow .gs-flow-list .gchoice input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.gs-flow .gs-flow-intent .gchoice label {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 140px;
  margin: 0;
  padding: 28px 28px 28px 128px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-lg);
  background: #fafbfd;
  font-size: var(--gs-h4);
  font-weight: 800;
  line-height: 1.2;
  color: #000;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.gs-flow .gs-flow-intent .gchoice label::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--gs-orange); /* Secondary */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 36px 36px;
}
.gs-flow .gs-flow-intent .gchoice:nth-child(1) label::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='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 10h4'/><path d='M19 7V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3'/><path d='M20 21a2 2 0 0 0 2-2v-3.851c0-1.39-2-2.962-2-4.829V8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v11a2 2 0 0 0 2 2z'/><path d='M22 16H2'/><path d='M4 21a2 2 0 0 1-2-2v-3.851c0-1.39 2-2.962 2-4.829V8a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v11a2 2 0 0 1-2 2z'/><path d='M9 7V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3'/></svg>");
}
.gs-flow .gs-flow-intent .gchoice:nth-child(2) label::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='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/><path d='M12 11h.01'/><path d='M16 11h.01'/><path d='M8 11h.01'/></svg>");
}
/* Third option ("I'm not sure"): a help-circle icon, and a card on its own row
   sits centered under the other two at one column's width. It has no
   Step 2 list, so Gravity Forms skips "What You Need" for it. */
.gs-flow .gs-flow-intent .gchoice:nth-child(3) label::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='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3'/><path d='M12 17h.01'/></svg>");
}
.gs-flow .gs-flow-intent .gchoice:nth-child(odd):last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 20px) / 2); /* one column wide (20px = the grid gap) */
}
@media (max-width: 640px) {
  .gs-flow .gs-flow-intent .gchoice:nth-child(odd):last-child { width: 100%; }
}

/* ── Step 2: the choice list for the chosen path ── */
.gs-flow .gs-flow-list > .gfield_label {
  float: left; /* keeps the legend inside the fieldset */
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--gs-h3);
  font-weight: 800;
  line-height: 1.15;
  color: #000;
}
.gs-flow .gs-flow-list > .gfield_label .gform-field-label__text { color: #000; } /* beats the global primary label color */
.gs-flow .gs-flow-intent .gfield_required,
.gs-flow .gs-flow-list .gfield_required { display: none; } /* a pick step cannot be skipped, so no "(Required)" */
.gs-flow .gs-flow-list .gfield_description {
  clear: both;
  max-width: 62ch;
  margin: 0 0 40px;
  padding: 0;
  font-size: var(--gs-body-size);
  line-height: 1.5;
  color: var(--gs-text);
}
.gs-flow .gs-flow-list .gfield_radio,
.gs-flow .gs-flow-list .gfield_checkbox {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}
.gs-flow .gs-flow-list .gchoice label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-white);
  box-shadow: var(--gs-shadow-sm);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gs-text-dark);
  transition: border-color .18s, background .18s;
}

/* Chevron + hover/selected states shared by both steps */
.gs-flow .gs-flow-intent .gchoice label::after,
.gs-flow .gs-flow-list .gchoice label::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background-color: var(--gs-muted);
  -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' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center / contain no-repeat;
  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' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center / contain no-repeat;
  transition: transform .18s, background-color .18s;
}
.gs-flow .gs-flow-intent .gchoice:hover label,
.gs-flow .gs-flow-list .gchoice:hover label,
.gs-flow .gs-flow-intent .gchoice input:focus-visible + label,
.gs-flow .gs-flow-list .gchoice input:focus-visible + label {
  border-color: var(--gs-blue);
}
.gs-flow .gs-flow-intent .gchoice:hover label {
  background: color-mix(in srgb, var(--gs-blue) 4%, var(--gs-white));
  box-shadow: var(--gs-shadow-sm);
}
.gs-flow .gs-flow-intent .gchoice:hover label::after,
.gs-flow .gs-flow-list .gchoice:hover label::after {
  background-color: var(--gs-blue);
  transform: translateX(3px);
}
.gs-flow .gs-flow-intent .gchoice input:checked + label,
.gs-flow .gs-flow-list .gchoice input:checked + label {
  border-color: var(--gs-blue);
  background: color-mix(in srgb, var(--gs-blue) 8%, var(--gs-white));
}
.gs-flow .gs-flow-intent .gchoice input:focus-visible + label,
.gs-flow .gs-flow-list .gchoice input:focus-visible + label {
  outline: 2px solid var(--gs-blue);
  outline-offset: 2px;
}
/* Step 2 is multi-select: a tick box where step 1 has a chevron. */
.gs-flow .gs-flow-list .gchoice label::after {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--gs-muted);
  border-radius: 5px;
  background: var(--gs-white) center / 14px 14px no-repeat;
  -webkit-mask: none;
  mask: none;
  transform: none !important;
}
.gs-flow .gs-flow-list .gchoice:hover label::after { background-color: var(--gs-white); border-color: var(--gs-blue); }
.gs-flow .gs-flow-list .gchoice input:checked + label::after {
  border-color: var(--gs-blue);
  background-color: var(--gs-blue);
  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='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
/* Step 1 advances on pick, step 2 needs at least one tick — hide Next until a
   visible choice is selected. Back stays. */
.gs-flow .gform_page:has(.gs-flow-intent, .gs-flow-list):not(:has(:is(.gs-flow-intent, .gs-flow-list):not(.gfield_visibility_hidden):not([style*="display: none"]):not([style*="display:none"]) input:checked)) .gform_next_button {
  display: none !important;
}
@media (max-width: 640px) {
  .gs-flow .gs-flow-intent .gfield_radio,
  .gs-flow .gs-flow-list .gfield_radio,
  .gs-flow .gs-flow-list .gfield_checkbox { grid-template-columns: minmax(0, 1fr); }
  .gs-flow .gs-flow-intent .gchoice label { min-height: 112px; padding: 20px 20px 20px 104px; }
  .gs-flow .gs-flow-intent .gchoice label::before { left: 20px; width: 64px; height: 64px; }
}

.gs-flow .gf_step_completed { cursor: pointer; }
.gs-flow .gf_step_completed:hover .gf_step_label { text-decoration: underline; }
.gs-flow .gf_step_completed:focus-visible {
  outline: 2px solid var(--gs-blue);
  outline-offset: 4px;
  border-radius: var(--gs-radius-sm);
}
/* Review step */
.gs-flow .gs-flow-summary {
  margin: 24px 0 0;
  border-top: 1px solid var(--gs-border);
}
.gs-flow .gs-flow-summary > div {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gs-border);
}
.gs-flow .gs-flow-summary dt {
  font-weight: 700;
  color: var(--gs-navy);
}
.gs-flow .gs-flow-summary dd {
  margin: 0;
  color: var(--gs-text-dark);
  overflow-wrap: anywhere;
}
.gs-flow .gs-flow-consent .gfield_description,
.gs-flow .gs-flow-consent .gfield_consent_description,
.gs-flow .gfield--type-consent .gfield_consent_description {
  max-height: none !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  overflow: visible !important;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--gs-text);
}
.gs-flow .gs-flow-consent a { color: var(--gs-blue); text-decoration: underline; }
.gs-flow .gs-flow-thanks { padding: 32px 0; text-align: center; }
.gs-flow .gs-flow-thanks p { font-size: var(--gs-body-size); }
@media (max-width: 640px) {
  .gs-flow .gs-flow-card { padding: 20px; }
  .gs-flow .gs-flow-summary > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Visibility helpers — add to a module's Extra CSS Class. Mobile is below 768px.
   The editor keeps the module visible (dimmed, with a notice) so it can still be edited. */
.hideModule:not(.editor-styles-wrapper .hideModule) { display: none !important; }
@media (max-width: 767.98px) { .hideModule-mobile:not(.editor-styles-wrapper .hideModule-mobile) { display: none !important; } }
@media (min-width: 768px) { .hideModule-desktop:not(.editor-styles-wrapper .hideModule-desktop) { display: none !important; } }
.editor-styles-wrapper :is(.hideModule, .hideModule-mobile, .hideModule-desktop) {
  position: relative;
  outline: 2px dashed #b45309;
  outline-offset: -2px;
}
.editor-styles-wrapper :is(.hideModule, .hideModule-mobile, .hideModule-desktop)::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 6px 12px;
  font: 600 12px/1.4 system-ui, sans-serif;
  color: #fff;
  background: #b45309;
  pointer-events: none;
}
.editor-styles-wrapper .hideModule::before { content: "Hidden on the front end (hideModule, set in Section Settings)"; }
.editor-styles-wrapper .hideModule-mobile::before { content: "Hidden on mobile (below 768px) on the front end (hideModule-mobile, set in Section Settings)"; }
.editor-styles-wrapper .hideModule-desktop::before { content: "Hidden on desktop (768px and up) on the front end (hideModule-desktop, set in Section Settings)"; }

/* ── Under Construction header (inc/under-construction.php) ──
   The banner is a fixed bar above the header (it reuses .gs-topbar, so the
   header and page offsets follow it; a script keeps --gs-topbar-h equal to its
   height). Inside the header: logo left, click-to-call phone right. Only
   rendered while the header is stripped (body.gs-under-construction). */
.gs-under-construction .site-header__inner,
.gs-landing-page .site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.gs-uc-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  padding: 8px 24px;
  text-align: center;
  font-size: var(--gs-uc-banner-size, 20px);
  background: var(--gs-uc-banner-bg, var(--gs-navy));
  color: var(--gs-uc-banner-color, #fff);
}
.gs-uc-banner__text {
  font-size: inherit;
  font-weight: var(--gs-uc-banner-weight, 700);
  line-height: 1.3;
  color: inherit;
}
.gs-uc-phone {
  grid-column: 2;
  justify-self: end;
  font-weight: 700;
  white-space: nowrap;
  color: var(--gs-navy);
  text-decoration: none;
}
.gs-uc-phone:hover { text-decoration: underline; }

/* Landing page logos (inc/landing-page.php): the main logo, then any extras, in one
   row. They reuse .site-header__logo-wrap for the logo height and the scrolled
   shrink, so the grid that stacks the standard logo's white copy is switched off. */
.gs-lp-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--gs-lp-logo-gap, 60px);
  padding-block: var(--gs-lp-pad-t, 0px) var(--gs-lp-pad-b, 0px);
}
.gs-lp-logos > * { grid-area: auto; }
.gs-lp-logo { display: inline-flex; align-items: center; }
/* The scrolled state changes the logo's min-height, the row's padding and the bar's height; ease all of them the same
   .25s the header already uses, so the logos shrink with the bar instead of jumping. */
.gs-lp-logos { transition: padding-block .25s ease, gap .25s ease; }
.gs-lp-logos .gs-lp-logo__img { transition: height .25s ease, min-height .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .gs-lp-logos,
  .gs-lp-logos .gs-lp-logo__img { transition: none; }
}
/* Per-logo Min Height (desktop only): min-height beats the header's forced height, so the logo grows and the width follows.
   Once scrolled the header compacts from 100px to 70px, so the minimum scales by the same ratio and is capped to fit the
   compact bar (an 80px logo becomes 56px); logos keep their size relative to each other. */
@media (min-width: 641px) {
  .gs-lp-logos .gs-lp-logo__img { min-height: var(--gs-lp-logo-min, 0px); }
  .site-header.is-scrolled .gs-lp-logos .gs-lp-logo__img { min-height: min(calc(var(--gs-lp-logo-min, 0px) * .7), 62px); }
  /* The compact bar follows the logos (set in wp_head by gs_lp_head_css), and the padding scales with it. */
  .gs-landing-page .site-header.is-scrolled .site-header__inner { height: var(--gs-lp-header-h-s, 70px); }
  .site-header.is-scrolled .gs-lp-logos { padding-block: calc(var(--gs-lp-pad-t, 0px) * .7) calc(var(--gs-lp-pad-b, 0px) * .7); }
}
/* Centered: logos in the middle track, phone stays in the last one. */
.gs-lp-logos--center .site-header__inner { grid-template-columns: 1fr auto 1fr; }
.gs-lp-logos--center .gs-lp-logos { grid-column: 2; justify-content: center; }
.gs-lp-logos--center .gs-uc-phone { grid-column: 3; }
@media (max-width: 640px) {
  .gs-lp-logos { gap: 6px min(var(--gs-lp-logo-gap, 16px), 16px); }
  .gs-lp-logos .gs-lp-logo__img { max-width: 100%; height: min(var(--gs-logo-h, 50px), 36px) !important; }
  /* Not enough room to center beside the phone number: logos left, as usual. */
  .gs-lp-logos--center .site-header__inner { grid-template-columns: 1fr auto; }
  .gs-lp-logos--center .gs-lp-logos { grid-column: 1; justify-content: flex-start; }
  .gs-lp-logos--center .gs-uc-phone { grid-column: 2; }
}
@media (max-width: 640px) {
  .gs-uc-banner { padding: 6px 14px; gap: 4px 10px; font-size: min(var(--gs-uc-banner-size, 20px), 1rem); }
  .gs-uc-banner .gs-btn { padding: 6px 12px; font-size: .75rem; }
}