/* ============================================================
   Genstone — Global Styles
   Shared: reset, typography, layout helpers, nav, footer, buttons.
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, video { display: block; max-width: 100%; }
body {
  font-family: var(--gs-font);
  font-size: 16px;
  color: var(--gs-text);
  line-height: 1.65;
  background-color: var(--gs-white);
  background-image:
    radial-gradient(circle at top right, rgba(0, 86, 158, 0.18) 0%, transparent 70%),
    radial-gradient(circle at bottom right, rgba(0, 86, 158, 0.18) 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 ── */
h1, h2, h3, h4 {
  font-family: var(--gs-font-display);
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--gs-h1); }
h2 { font-size: var(--gs-h2); line-height: 1.15; }
h3 { font-size: var(--gs-h3); line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: var(--gs-h4); line-height: 1.25; color: var(--gs-slate-gray); }

strong, b { font-weight: 800; }

/* ── Accessibility ── */
.skip-link { position: absolute; top: -100px; left: 0; }
.skip-link:focus { top: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ── 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; }
.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(150deg,
      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(150deg,
      #1B2D6E 0%,
      #1f3273 8%,
      #233a7d 15%,
      #2a468e 22%,
      #2e5099 32%,
      #2d5aa3 42%,
      #2c5fa8 50%,
      #2d5aa3 58%,
      #2e5099 68%,
      #2a468e 78%,
      #233a7d 85%,
      #1f3273 92%,
      #1B2D6E 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--blue,
.gs-bg--navy,
.gs-bg--dark { 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); }

/* ── Buttons ── */
.gs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px 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); }

.gs-btn--primary {
  background: var(--gs-orange);
  color: var(--gs-white);
  border: 0;
  text-transform: uppercase;
}
.gs-btn--primary:hover { background: var(--gs-orange-dark); }

.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); }

.gs-btn--ghost-navy {
  background: transparent;
  color: var(--gs-navy);
  border-color: var(--gs-navy);
}

/* Blue color variant — paired with --primary or --lg, gradient bg */
.gs-btn--blue {
  background: linear-gradient(135deg, var(--gs-blue) 0%, var(--gs-blue-dark) 100%);
  color: var(--gs-white);
  border-color: transparent;
  text-transform: uppercase;
}
.gs-btn--blue:hover {
  background: linear-gradient(135deg, var(--gs-blue-dark) 0%, var(--gs-blue) 100%);
  border-color: transparent;
}

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

/* When --lg is paired with --primary, use the orange gradient for visual parity with hero CTA */
.gs-btn--lg.gs-btn--primary {
  background: linear-gradient(135deg, var(--gs-orange) 0%, var(--gs-orange-dark) 100%);
  border-color: transparent;
}
.gs-btn--lg.gs-btn--primary:hover {
  background: linear-gradient(135deg, var(--gs-orange-dark) 0%, var(--gs-orange) 100%);
  border-color: transparent;
}
.gs-btn--ghost-navy:hover { background: var(--gs-navy); color: var(--gs-white); }

/* ── Eyebrow label ── */
.gs-eyebrow {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gs-blue);
  margin-bottom: 14px;
}
.gs-eyebrow--light { color: var(--gs-white); }
.gs-eyebrow::after {
  content: "";
  position: absolute;
  height: 14px;
  width: 100%;
  max-width: 160px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
  background-color: var(--gs-orange);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 15' fill='none' preserveAspectRatio='none'><path d='M0.112489 7.62587C44.2792 2.62587 145.812 -4.37413 198.612 7.62587C176.779 5.79253 131.212 3.22585 123.612 7.62587C127.112 6.47738 144.112 11.1259 147.112 12.1259' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 15' fill='none' preserveAspectRatio='none'><path d='M0.112489 7.62587C44.2792 2.62587 145.812 -4.37413 198.612 7.62587C176.779 5.79253 131.212 3.22585 123.612 7.62587C127.112 6.47738 144.112 11.1259 147.112 12.1259' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
  z-index: -1;
}

/* ── 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-navy);
  line-height: 1.12;
}
.gs-heading-lg {
  font-size: clamp(2rem, 4vw + 0.5rem, 4.5rem);
  font-weight: 800;
  color: var(--gs-text-dark);
  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: 100px;
  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: 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-white);
  text-shadow: var(--gs-text-shadow-hero);
  transition: color .25s ease, font-size .25s ease;
}
.site-header.is-scrolled .site-header__logo-text,
.site-header--solid .site-header__logo-text {
  color: var(--gs-navy);
  text-shadow: none;
}

/* Default (transparent over hero): show white logo, hide colored */
.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; }

/* 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);
}
.site-header.is-scrolled .site-header__logo-white,
.site-header--solid .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,
.site-header--solid.has-white-logo .custom-logo-link,
.site-header--solid.has-white-logo .site-header__logo {
  opacity: 1;
  pointer-events: auto;
}

/* Scrolled-only — size compaction. */
.site-header.is-scrolled .site-header__inner { height: 70px; }
.site-header.is-scrolled .site-header__logo-wrap img { height: 40px !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);
}

/* Header CTA — ghost-style over the hero, swaps to solid orange when the
   header is scrolled OR rendered in solid mode. */
.site-header:not(.is-scrolled):not(.site-header--solid) .site-header__actions .gs-btn--primary {
  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--primary:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .9);
}

/* Pages without a hero first need top spacing so content isn't behind the fixed header */
.site-main { padding-top: 100px; }
.site-main:has(> .hero-carousel:first-child),
.site-main:has(> .news-insights:first-child) { padding-top: 0; }
@media (max-width: 768px) {
  .site-main { padding-top: 70px; }
}

/* 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 {
  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); }
.site-footer__social-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.site-footer__bottom {
  background: var(--gs-navy);
  border-top: 1px solid rgba(255,255,255,.08);
}
.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: 30px !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__secondary,
.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__secondary { animation-delay: .4s; }
.hero-carousel__slide.is-active .hero-carousel__ctas      { animation-delay: .5s; }
.hero-carousel__statements-wrap {
  animation: gs-fade-in-up .9s cubic-bezier(.4, 0, .2, 1) .65s backwards;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  [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__secondary,
  .hero-carousel__slide.is-active .hero-carousel__ctas,
  .hero-carousel__statements-wrap {
    animation: none;
  }
}

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

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

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

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

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

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

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

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

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

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

/* Submit button — mirrors .hero-carousel__ctas .gs-btn--primary (orange
   gradient pill with uppercase label + 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: 16px 32px !important;
  border-radius: 50px !important;
  border: 2px solid transparent !important;
  background: linear-gradient(135deg, var(--gs-orange) 0%, var(--gs-orange-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-orange-dark) 0%, var(--gs-orange) 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: 50px !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, rgba(0, 86, 158, 0.18));
  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, rgba(0, 86, 158, 0.15) 0%, rgba(0, 86, 158, 0.92) 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 rgba(0, 86, 158, 0.2) !important;
  border-radius: 50px !important;
  background: transparent !important;
  color: var(--gs-muted, rgba(17, 35, 55, 0.55)) !important;
  font-family: var(--gs-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: background .18s, color .18s, border-color .18s;
}
.gform-theme--framework #field_9_7 .gchoice label:hover {
  border-color: var(--gs-navy) !important;
  color: var(--gs-navy) !important;
  background: transparent !important;
}

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

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

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

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

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

.gform-theme--framework .gf_step_completed .gf_step_number::after {
  inset-block-start: -2px !important;
  inset-inline-start: -2px !important;
  background-color: var(--gs-blue) !important;
  border-color: var(--gs-blue) !important;
}
.gform-theme--foundation .gf_step_completed + .gf_step::before,
.gform-theme--foundation .gf_step_completed::before {
  background: var(--gs-blue);
}
/* Dark backgrounds — flip idle states to translucent white so the
   indicator stays visible. */
.gs-bg--blue .gform-theme--foundation .gf_step,
.gs-bg--navy .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_number,
.gs-bg--navy .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::before,
.gs-bg--navy .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_active,
.gs-bg--navy .gform-theme--foundation .gf_step_active,
.gs-bg--dark .gform-theme--foundation .gf_step_active { color: var(--gs-white); }

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