/* ==========================================================================
   GS HVAC Leads UI/UX polish layer
   Loaded after the theme skin so these rules win without !important wars.
   ========================================================================== */

/* Brand palette — GenSales.

   This site now runs the GenSales palette rather than its own teal/cyan/orange
   one: ink #232A35, deep blue #2F5577, sky #7FAFC8, yellow #F2C94C, on warm
   cream and stone grounds. The values below are GenSales' verbatim.

   Sky is a graphic accent only: rules, icons, strokes, and type on dark bands.
   It is 2.4:1 on a light ground, so text-level accent on light is the deep
   blue (--accent-txt) and on dark it is sky (--accent-dk).

   Yellow is reserved for CTA buttons — the ones that ask for the meeting — and
   always carries ink text, never white: white on #F2C94C is 1.9:1. Orange used
   to double as an accent for eyebrows, bullets and icons; those all moved to
   the deep blue, because in the GenSales system nothing decorative is yellow.

   The theme skin (css/colors/theme-skin-color-set1.min.css) was recoloured to
   match GenSales' copy of the same file byte-for-byte. It is minified-only and
   vendor CSS ships no cache-bust, so header.php now version-stamps it; without
   that the recolour would sit unseen behind the .htaccess year-long cache. */
:root {
  /* Brand — these are the GenSales values verbatim. The token names keep the
     gshvac- prefix so the ~570 var() references in this site do not have to
     churn, but every value below is the same hex gensales.com ships. */
  --gshvac-ink: #232A35;         /* --gensales-black      */
  --gshvac-ink-soft: #3A4250;    /* --gensales-charcoal   */
  --gshvac-primary: #2F5577;     /* --gensales-primary    */
  --gshvac-primary-dark: #1F3D57;/* --gensales-primary-dark */
  --gshvac-accent: #7FAFC8;      /* --gensales-sky        */
  --gshvac-accent-txt: #2F5577;  /* sky is 2.4:1 on light, so text-level
                                    accent is the deep blue, as on GenSales */
  --gshvac-accent-dk: #7FAFC8;   /* --gensales-sky, used on dark bands */
  --gshvac-cta: #F2C94C;         /* --gensales-orange     */
  --gshvac-cta-dark: #E0B432;    /* --gensales-orange-dark */

  /* Neutrals — already the GenSales values */
  --gshvac-white: #FFFFFF;
  --gshvac-cream: #F7F6F1;
  --gshvac-stone: #ECEAE4;
  --gshvac-stone-dark: #E2DFD7;
  --gshvac-line: #DFDCD4;
  --gshvac-line-strong: #C9C5BA;
  --gshvac-on-dark: #C7CDD6;
  --gshvac-body: #505050;
}

/* Page ground. The theme paints body and .bg-silver-light a cool near-white;
   without these two rules the alternating bands stay cool no matter what the
   cards on top of them do. .bg-silver-light is used on five sections across
   index.php and our-process.php and is set by the theme with enough weight to
   need !important here. */
body,
.bg-white {
  background-color: var(--gshvac-cream);
}

.bg-silver-light,
.bg-lighter {
  background-color: var(--gshvac-stone) !important;
}

/* Brand typography. The bundled theme (css/style-main.min.css) hard-codes
   Montserrat on body and h1-h6; overriding here rather than editing that
   minified file keeps the theme bundle pristine and upgradeable. Crimson Text
   is the serif accent gshvacleads.com uses for pull quotes. */
body {
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* The nav becomes fixed once you scroll, so an anchor jump would otherwise
   land with the target tucked underneath it. Applies to the industry cards
   linked from the megamenu and to any in-page section link. */
.main-content section[id],
.gs-card-row > [class*="col-"][id] {
  scroll-margin-top: 100px;
}

/* Kill any theme preloader overlay outright — the site must never blank-screen
   on refresh, even if a cached template page or plugin injects one. */
#preloader,
.preloader,
.preloader-whirlpool {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide the template's demo style-switcher widget that the theme's plugin
   bundle self-injects (the small gear tab on the left edge). */
#style-switcher {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

/* Logo sizing. The GenSales lockup (same file as gensales.com) is ~4.5:1, so
   a 49px cap renders ~220px wide — the size GenSales itself runs. This has to
   stay above the breakpoint blocks below, which override it at equal
   specificity. */
.menuzord .nav-logo {
  max-height: 49px;
  max-width: 100%;
  width: auto;
}

/* Three-zone header: logo left, nav centred, CTA right.

   Flex rather than absolute positioning or a translate, because the megamenu
   is `position: absolute; width: 100%; left: 0` resolved against #menuzord —
   a transform on any ancestor would make it the new containing block and
   collapse the Industries dropdown to the width of its own <li>. Flex creates
   no containing block for absolutely positioned descendants, so #menuzord
   stays the reference and the megamenu keeps spanning the full header. */
@media (min-width: 901px) {
  #menuzord {
    position: relative;
    display: flex;
    align-items: center;
  }

  #menuzord .menuzord-brand {
    float: none;
    flex: 0 0 auto;
    margin: 0 45px 0 0;
  }

  /* Takes the free space between logo and CTA, and centres the items in it.
     The side margins are a floor on the separation from the logo and the CTA:
     without them the nav cluster is free to drift right up against either one
     whenever the labels happen to be wide. */
  #menuzord .menuzord-menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0 20px;
    float: none !important;
  }

  /* Floats are ignored on flex items, but clearing them keeps the intent
     obvious and avoids surprises if the menu ever leaves flex layout.
     flex-shrink:0 stops the browser squeezing items narrower than their text
     and breaking labels across two lines ("B2B Lead / Generation"). */
  #menuzord .menuzord-menu > li {
    float: none;
    flex: 0 0 auto;
  }

  /* style.min.css hangs a 30px right margin off every item, which spreads the
     seven labels across almost the whole bar and leaves the logo and CTA
     jammed into the container edges. Spacing is owned by the flex `gap` above
     instead, so it applies *between* items only — the trailing margin was also
     pushing the "centred" cluster half a gutter to the left. */
  #menuzord .menuzord-menu > li {
    margin-right: 0;
  }

  /* Three items plus a CTA leaves the 1170px container with room to breathe,
     so the labels get real separation instead of the tight gutters this nav
     inherited from when it carried seven. Padding plus the 16px gap puts
     ~40px between labels — distinct items, still one cluster, and the CTA
     stays inside the container edge. */
  .menuzord-menu > li > a {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .menuzord .nav-logo {
    max-height: 48px;
  }

  #menuzord .gs-nav-cta {
    flex: 0 0 auto;
    margin-left: 12px;
    font-size: 13px;
    padding: 11px 14px;
  }

  /* Text-only, not a button — the header has no width budget left over for a
     second button at this breakpoint (see the header responsive ladder note
     below), only for a compact click-to-call link. */
  #menuzord .gs-nav-phone {
    flex: 0 0 auto;
    margin-left: 30px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
  }

  #menuzord .gs-nav-phone:hover,
  #menuzord .gs-nav-phone:focus {
    color: var(--gshvac-primary);
    text-decoration: none;
  }

  /* The in-menu duplicate is only for the collapsed mobile menu. */
  .gs-nav-cta-mobile {
    display: none !important;
  }
}

/* Below 1200px the header is already at its documented width budget (see
   "Header responsive ladder" below) — the phone link is the first thing
   dropped, before the CTA button, since the sticky mobile bar and the
   footer both carry the phone number at those widths. */
@media (max-width: 1199px) {
  .gs-nav-phone {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Sticky mobile call-to-action bar (footer.php)
   -------------------------------------------------------------------------- */

.gs-sticky-cta {
  display: none;
}

@media (max-width: 900px) {
  .gs-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  }

  .gs-sticky-cta > a {
    flex: 1 1 50%;
    text-align: center;
    padding: 14px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
  }

  .gs-sticky-cta-call {
    background-color: var(--gshvac-ink);
  }

  .gs-sticky-cta-schedule {
    background-color: var(--gshvac-cta);
  }

  .gs-sticky-cta-call:hover,
  .gs-sticky-cta-call:focus,
  .gs-sticky-cta-schedule:hover,
  .gs-sticky-cta-schedule:focus {
    color: #fff;
    opacity: 0.9;
  }

  /* Room for the bar so it doesn't sit over the last section's content. */
  body {
    padding-bottom: 54px;
  }

  /* Clears the sticky bar instead of floating on top of it. */
  .scrollToTop {
    bottom: 64px !important;
  }
}

/* --------------------------------------------------------------------------
   Header responsive ladder

   Seven top-level items plus a logo and a CTA button need roughly 1075px of
   horizontal room. Bootstrap's container is only 970px wide between 992 and
   1199, and 750px below that, so the full three-zone header genuinely does
   not fit there. Rather than let the CTA overflow the viewport, each band
   drops the least essential element:

     >= 1200px  logo + centred nav + CTA button   (full layout)
     992-1199   CTA hidden; Contact carries the action
     901-991    CTA hidden, type and logo stepped down
     <= 900px   menuzord collapses to the hamburger, CTA moves inside it
   -------------------------------------------------------------------------- */

@media (min-width: 901px) and (max-width: 1199px) {
  #menuzord .gs-nav-cta {
    display: none;
  }
  .menuzord-menu > li > a {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .menuzord .nav-logo {
    max-height: 48px;
  }
}

/* 901-991: Bootstrap's container is only 750px here, which cannot hold seven
   items on one row at any legible size. Let the list drop to its own centred
   row beneath the logo rather than shrinking the type into illegibility. */
@media (min-width: 901px) and (max-width: 991px) {
  #menuzord {
    flex-wrap: wrap;
    justify-content: center;
  }
  #menuzord .menuzord-brand {
    margin: 10px 0 4px;
  }
  #menuzord .menuzord-menu {
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 6px;
  }
  .menuzord-menu > li > a {
    font-size: 13px;
    padding: 12px 10px;
  }
  .menuzord .nav-logo {
    max-height: 46px;
  }
}

/* Standalone CTA button */
.gs-nav-cta {
  display: inline-block;
  background-color: var(--gshvac-cta);
  color: var(--gshvac-ink);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.gs-nav-cta:hover,
.gs-nav-cta:focus {
  background-color: var(--gshvac-cta);
  color: var(--gshvac-ink);
  text-decoration: none;
}

/* Below the menuzord breakpoint the standalone button would collide with the
   hamburger, so the in-menu copy takes over. */
@media (max-width: 900px) {
  #menuzord .gs-nav-cta {
    display: none;
  }

  /* Leave room for the 60px hamburger: cap the width against the viewport so
     the logo scales down on the smallest phones instead of wrapping; the
     height cap still governs once there is room. */
  .menuzord .nav-logo {
    max-width: calc(100vw - 120px);
    max-height: 49px;
  }
  .menuzord-responsive .menuzord-menu > li.gs-nav-cta-mobile > a {
    color: var(--gshvac-primary);
    font-weight: 700;
  }
}

/* Nav item typography.

   The bundled theme (menuzord-megamenu.css) sets these links to 14px/600 in
   #888. Two problems with that: #888 on the white header bar is a 3.54:1
   contrast ratio, which fails WCAG AA for normal-size text, and the weight
   leaves the nav reading as body copy rather than navigation.

   Uppercase with open tracking matches the live gshvacleads.com nav
   ("OUR PROCESS / BLOGS / GET STARTED!") and gives the three items enough
   presence to hold the bar. The font-family is stated explicitly rather than
   left to inherit so the nav keeps the brand face even if the theme bundle is
   ever reordered ahead of this file. */
.menuzord-menu > li > a {
  color: var(--gshvac-ink);
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.menuzord-menu > li > a:hover,
.menuzord-menu > li > a:focus {
  color: var(--gshvac-primary);
}

/* The CTA is a sibling of the nav list, not part of it, so it needs the same
   treatment applied separately to sit on the same typographic baseline. */
.gs-nav-cta {
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Current-page indicator

   The theme ships an .active rule (theme-skin-color-set1) that fills the item
   with a solid #6890A2 block — pixel-identical to its own :hover state, so the
   page you are on is indistinguishable from whatever the pointer happens to be
   over. Reset the fill and mark the page with a deep blue rule instead. Yellow
   is not used here: in the GenSales system it belongs to CTA buttons only.

   The reset is deliberately not applied on :hover, so hovering the current
   item still gives the theme's fill and the nav behaves consistently across
   every item.
   -------------------------------------------------------------------------- */

.menuzord.default .menuzord-menu > li.active > a {
  background: transparent;
  color: var(--gshvac-ink);
  font-weight: 700;
}

.menuzord.default .menuzord-menu > li.active:hover > a {
  background: var(--gshvac-primary);
  color: #fff;
}

/* Desktop: a tab-style underline. The link box is the full height of the
   header bar (26px padding top and bottom), so an inset bottom shadow lands
   flush on the header's lower edge rather than floating under the text. */
@media (min-width: 901px) {
  #menuzord .menuzord-menu > li.active > a {
    box-shadow: inset 0 -3px 0 0 var(--gshvac-primary);
  }
}

/* Collapsed menu: items are full-width rows, where a 100%-wide underline reads
   as a divider rather than a marker. Accent the leading edge instead. */
@media (max-width: 900px) {
  .menuzord-responsive .menuzord-menu > li.active > a {
    box-shadow: inset 3px 0 0 0 var(--gshvac-primary);
  }
}

/* Keep the mobile toggle and logo on one comfortable row */
@media (max-width: 900px) {
  .menuzord-responsive .menuzord-brand {
    margin: 12px 0 12px 10px !important;
    float: left !important;
  }
  .menuzord-responsive .showhide {
    padding: 16px 14px 0 0;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Announcement card under the hero headline.

   A white card rather than a translucent pill: the Clutch medallions are
   printed artwork on a light ground, so they need an opaque panel to sit on
   or their edges dissolve into the hero photograph. */
.gs-announce {
  max-width: 460px;
  margin: 30px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.gs-announce-head {
  margin: 0;
  padding: 13px 20px;
  background: var(--gshvac-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.gs-announce-body {
  padding: 20px 24px 6px;
}

.gs-announce-text {
  margin: 0;
  color: var(--gshvac-ink);
  font-size: 17px;
  line-height: 1.45;
}

.gs-announce-badges {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.gs-announce-badges li {
  padding: 0 8px 10px;
}

.gs-announce-badges img {
  display: block;
  height: 130px;
  width: auto;
  max-width: 100%;
}

/* The card's own call to action, sitting on the hero rather than inside the
   card so the white panel stays purely about the award. */
.gs-announce-cta {
  max-width: 460px;
  margin: 22px auto 0;
}

.gs-announce-cta .btn {
  display: block;
  width: 100%;
  border-radius: 50px;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .gs-announce-head {
    font-size: 17px;
  }
  .gs-announce-text {
    font-size: 15px;
  }
  .gs-announce-badges img {
    height: 104px;
  }
  .gs-announce-cta .btn {
    font-size: 15px;
  }
}

/* The theme puts 100px of padding on .text-header itself. The home page's own
   spacing is owned by the hero row below, so it is zeroed there and left in
   place for any other page that still leans on it. */
@media (min-width: 768px) {
  #home .text-header {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.header-big-text .h-responsive {
  margin-bottom: 22px;
  line-height: 1.15;
}

.header-big-text .p-responsive {
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Home hero: split layout

   Copy on the left, consultation form on the right. The form previously ran
   as a full-width band directly under the hero, which stacked a second slab
   of near-black beneath the first and pushed the page's only conversion point
   off the first screen. Side by side, the two halves read as one composition
   and the form is visible on arrival.

   The row is a flex container so the form card can be vertically centred
   against copy of any length without a magic top margin.
   -------------------------------------------------------------------------- */

.gs-hero-row {
  padding: 76px 0 84px;
}

@media (min-width: 992px) {
  .gs-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 96px 0 104px;
  }
}

/* Left column. Left-aligned rather than centred: a centred column beside a
   left-aligned form card gives the eye two competing axes. */
.gs-hero-row .header-big-text {
  padding-top: 0;
  padding-bottom: 0;
  text-align: left;
}

@media (min-width: 992px) {
  .gs-hero-row .header-big-text {
    padding-right: 45px;
  }
}

/* The theme centres the H1 and sets it at 42px for a full-width hero; in a
   half-width column it needs to be a touch tighter to hold three words a
   line. */
.gs-hero-row .h-responsive {
  margin-top: 0;
  text-align: left;
}

.gs-hero-row .p-responsive {
  max-width: 560px;
  margin-left: 0;
  text-align: left;
}

/* Proof points under the deck. Check marks in the accent, copy in white at
   full opacity — a muted grey here reads as fine print rather than as the
   three facts the pitch rests on. */
.gs-hero-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  max-width: 560px;
}

.gs-hero-points li {
  position: relative;
  padding: 0 0 11px 30px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.gs-hero-points .fa {
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(242, 201, 76, 0.9);
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

/* Award proof strip. A translucent panel rather than the opaque white card
   this replaced: at half width the card was the loudest object in the hero
   and out-shouted the headline. The medallions carry their own light ground
   in the artwork, so they read fine on the tint. */
.gs-hero-awards {
  position: relative;
  max-width: 560px;
  margin-top: 32px;
  padding: 18px 20px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(2px);
}

.gs-hero-awards-flag {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--gshvac-cta);
  color: var(--gshvac-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.gs-hero-awards-body {
  display: flex;
  align-items: center;
}

.gs-hero-awards-badges {
  list-style: none;
  margin: 0 16px 0 0;
  padding: 0;
  display: flex;
  flex: 0 0 auto;
}

.gs-hero-awards-badges li + li {
  margin-left: 8px;
}

.gs-hero-awards-badges img {
  display: block;
  height: 76px;
  width: auto;
}

.gs-hero-awards-text {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 480px) {
  .gs-hero-awards-body {
    display: block;
  }
  .gs-hero-awards-badges {
    margin: 0 0 12px;
  }
}

/* --------------------------------------------------------------------------
   Home hero: consultation form card
   -------------------------------------------------------------------------- */

.gs-hero-form {
  margin-top: 44px;
  padding: 30px 28px 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

@media (min-width: 992px) {
  .gs-hero-form {
    margin-top: 0;
    padding: 34px 34px 32px;
  }
}

.gs-hero-form-title {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gshvac-ink);
}

.gs-hero-form-lead {
  margin: 0 0 22px;
  color: #505050;
  font-size: 14px;
  line-height: 1.55;
}

/* The theme's inputs are 34px tall with a 1px grey hairline — too slight to
   anchor a card that is the page's primary conversion point. */
.gs-hero-form .form-control {
  height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--gshvac-line-strong);
  border-radius: 6px;
  background-color: var(--gshvac-cream);
  color: var(--gshvac-ink);
  box-shadow: none;
}

.gs-hero-form .form-control:focus {
  background-color: #fff;
  border-color: var(--gshvac-primary);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.14);
}

.gs-hero-form .form-control::placeholder {
  color: #8b969d;
  opacity: 1;
}

.gs-hero-form .styled-select .form-control {
  padding-right: 34px;
}

.gs-hero-form .btn {
  height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 6px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.gs-hero-form-note {
  margin: 14px 0 0;
  color: #8b969d;
  font-size: 12.5px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Trust bar

   Awards sit directly under the hero rather than in a column beside the
   testimonials, where they previously needed an `mt-sm-90` nudge to line up.
   Source label above, award beneath, so the long award names stay readable
   instead of being squeezed onto one line.
   -------------------------------------------------------------------------- */

.gs-trust {
  background: var(--gshvac-cream);
  border-bottom: 1px solid var(--gshvac-line);
}

/* Overrides the theme's blanket `section > .container { padding: 80px 0 }` —
   this strip is deliberately slim. */
.gs-trust > .container {
  padding-top: 28px;
  padding-bottom: 24px;
}

/* The same small-caps label serves the client strip and the section eyebrows
   added on the homepage — a 12px grey category line above each headline, which
   is where ALL CAPS belongs. The headlines themselves are sentence case now
   (design review, GENSALES-1: everything being bold, centered and capitalised
   made the page "flat and hard to scan"). Deliberately grey rather than the
   orange .gs-hero-eyebrow uses: .section-title's h3 deck is already orange and
   two coloured blocks either side of a headline is the noise we removed. */
.gs-trust-title,
.gs-section-eyebrow {
  text-align: center;
  margin: 0 0 18px;
  /* .gs-trust-title is an <h2> on the homepage; inheriting the body face keeps
     it identical to the <p> eyebrows rather than picking up the heading font. */
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8a949b;
}

.gs-section-eyebrow {
  margin-bottom: 10px;
}

.gs-trust-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Fixed fractions rather than content-width, so the six awards land on one
   even row instead of five-plus-an-orphan. Ladder: 6 across, 3, then 2. */
.gs-trust-item {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 14px 14px;
  text-align: center;
}

@media (min-width: 768px) {
  .gs-trust-item {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 992px) {
  .gs-trust-item {
    flex-basis: 16.6666%;
    max-width: 16.6666%;
    padding-bottom: 0;
  }
  /* Hairline separators only once the row is guaranteed not to wrap, so no
     stray rule can end up at the start of a second line. */
  .gs-trust-item + .gs-trust-item {
    border-left: 1px solid var(--gshvac-line);
  }
}

.gs-trust-source {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gshvac-primary);
  margin-bottom: 3px;
}

.gs-trust-award {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gshvac-ink);
}


/* --------------------------------------------------------------------------
   Client / platform logo strips

   The marks arrive at wildly different aspect ratios (a 491x130 wordmark next
   to a 67x67 square), so they are capped on BOTH axes and centred in a fixed
   row height. Capping height alone would let the wide wordmarks run three
   times the width of the square ones; capping width alone would let the tall
   ones set the row height. Greyscale at rest keeps eight competing brand
   palettes from pulling focus off the copy, and lifts on hover.
   -------------------------------------------------------------------------- */

.gs-logo-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.gs-logo-item {
  flex: 0 0 50%;
  max-width: 50%;
  height: 64px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-logo-item img {
  max-width: 100%;
  max-height: var(--gs-logo-h, 40px);
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.gs-logo-item img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* Optical sizing, per mark.

   One shared height cap is the wrong instrument here: these files are not a
   set. A wide wordmark authored at 491x130 (Lumen) and a square crest at
   131x105 (American Eagle) hit the same 46px ceiling and came out looking
   nothing like the same weight — the crest shrank to an illegible smudge
   while the wordmark ran four times its width. Capping each mark to the
   height that gives it roughly the same optical mass puts the row in balance.
   Keyed off the filename via data-logo so the value lives here rather than in
   a style attribute in the template. */
.gs-logo-item[data-logo="american-eagle"] { --gs-logo-h: 62px; }
.gs-logo-item[data-logo="bei"]            { --gs-logo-h: 52px; }
.gs-logo-item[data-logo="brookaire"]      { --gs-logo-h: 26px; }
.gs-logo-item[data-logo="lumen"]          { --gs-logo-h: 30px; }
.gs-logo-item[data-logo="ciena"]          { --gs-logo-h: 27px; }
.gs-logo-item[data-logo="comcast-business"] { --gs-logo-h: 42px; }
.gs-logo-item[data-logo="transworld"]     { --gs-logo-h: 30px; }
.gs-logo-item[data-logo="ibex"]           { --gs-logo-h: 30px; }

.gs-logo-strip-sm .gs-logo-item {
  height: 60px;
}

/* Several of these marks are light grey to begin with (Comparably, Titan,
   Insights Success), so the 0.62 rest state the client strip uses washes them
   out to nothing. */
.gs-logo-strip-sm .gs-logo-item img {
  opacity: 0.78;
}

.gs-logo-item[data-logo="bbb"]             { --gs-logo-h: 44px; }
.gs-logo-item[data-logo="google"]          { --gs-logo-h: 26px; }
.gs-logo-item[data-logo="clutch"]          { --gs-logo-h: 22px; }
.gs-logo-item[data-logo="upcity"]          { --gs-logo-h: 24px; }
.gs-logo-item[data-logo="comparably"]      { --gs-logo-h: 42px; }
.gs-logo-item[data-logo="glassdoor"]       { --gs-logo-h: 20px; }
.gs-logo-item[data-logo="titan"]           { --gs-logo-h: 34px; }
.gs-logo-item[data-logo="insight-success"] { --gs-logo-h: 40px; }

/* Row counts are chosen against the fourteen client marks the homepage shows.
   Two up on the narrowest phones would run seven rows deep, so the strip steps
   to three as soon as there is room, and lands on seven across the desktop —
   two even rows, where 12.5% gave a row of eight and an orphaned six. */
@media (min-width: 480px) {
  .gs-logo-item {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 768px) {
  .gs-logo-item {
    flex-basis: 25%;
    max-width: 25%;
    height: 74px;
  }
}

@media (min-width: 992px) {
  .gs-logo-item {
    flex-basis: 14.2857%;
    max-width: 14.2857%;
    padding: 0 10px;
  }
}


/* --------------------------------------------------------------------------
   Award medallions

   Nine badges, so the row counts are chosen to divide evenly and avoid an
   orphan: 2 across on phones, 3 on tablets, then 9 abreast on desktop where
   there is room for a single unbroken row.
   -------------------------------------------------------------------------- */

.gs-award-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gs-award-item {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 12px 28px;
  text-align: center;
}

.gs-award-item img {
  display: block;
  margin: 0 auto 12px;
  height: 94px;
  width: auto;
  max-width: 100%;
}

.gs-award-caption {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: #5a656d;
}

@media (min-width: 768px) {
  .gs-award-item {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}

/* Four abreast, one even row. The homepage now shows four medallions rather
   than nine (see $homeAwards in index.php), so the old 20% basis — five up then
   four orphaned below — would leave a ragged row with 456px of dead air beside
   it. About Us still renders all nine and sets its own 33.3333% basis under
   .gs-award-grid-lg further down this file, so it is unaffected by this value. */
@media (min-width: 992px) {
  .gs-award-item {
    flex-basis: 25%;
    max-width: 25%;
    padding: 0 14px 30px;
  }
  .gs-award-item img {
    height: 110px;
  }
}


/* The homepage rating strip carries four wordmarks, not the eight the shared
   .gs-logo-item basis is sized for — at 12.5% each they sat in the middle
   third of the container looking like an afterthought, and Comparably's light
   grey artwork washed out entirely at that size. Scoped to #proof so the
   eight-mark strips on /about and /careers keep the shared sizing. */
@media (min-width: 992px) {
  #proof .gs-logo-strip-sm .gs-logo-item {
    flex-basis: 25%;
    max-width: 25%;
  }
}

#proof .gs-logo-strip-sm .gs-logo-item img {
  opacity: 0.9;
}


/* --------------------------------------------------------------------------
   Industries: icon + label tiles

   These were PNG lockups with the industry name baked in as white pixels,
   which pinned the section to a dark ground and rendered every label as a
   ~10px bitmap. Live text and a font glyph read at any size, respond to a
   hover, and survive a zoom — and with the artwork gone the section can sit
   on white, which breaks up what was three dark bands running back to back
   (calling stats, industries, closing CTA).
   -------------------------------------------------------------------------- */

.gs-industries {
  background: #fff;
}

/* The longest label — "Construction & Contractors" — has to hold one line in
   a 263px column at 1200px and up; tracking is what busts that budget rather
   than the type size, so it stays low. */
.gs-industries .gs-industry-heading {
  color: var(--gshvac-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--gshvac-primary);
}

/* Bootstrap's container drops to 970px here, leaving the column just 213px —
   too tight for the label at any size that still reads as a heading with
   tracking on it. Below 992px the columns are half- or full-width and the
   label has room to spare, so no further step is needed. */
@media (min-width: 992px) and (max-width: 1199px) {
  .gs-industries .gs-industry-heading {
    font-size: 11px;
    letter-spacing: 0;
  }
}

.gs-industry-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gs-industry-tiles > li {
  margin-bottom: 8px;
}

.gs-industry-tile {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  background: #fff;
  color: var(--gshvac-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, transform 0.2s ease;
}

.gs-industry-tile:hover,
.gs-industry-tile:focus {
  border-color: transparent;
  background: #fff;
  color: var(--gshvac-ink);
  box-shadow: 0 8px 20px rgba(35, 42, 53, 0.12);
  transform: translateY(-2px);
}

.gs-industry-icon {
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 12px;
  border-radius: 9px;
  background: var(--gshvac-stone);
  color: var(--gshvac-accent-txt);
  font-size: 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* FontAwesome hard-sets `font: … 14px/1 FontAwesome` on .fa, so the glyph
   ignores the tile's size unless told to inherit it. */
.gs-industry-icon .fa {
  font-size: inherit;
  line-height: 1;
}

.gs-industry-tile:hover .gs-industry-icon,
.gs-industry-tile:focus .gs-industry-icon {
  background: var(--gshvac-cta);
  color: var(--gshvac-ink);
}

.gs-industry-label {
  flex: 1 1 auto;
}


/* --------------------------------------------------------------------------
   Dark stat band: lead paragraph and source line
   -------------------------------------------------------------------------- */

.gs-band-lead {
  max-width: 780px;
  margin: 14px auto 0;
  line-height: 1.7;
}

/* The stat row above carries a -30px bottom margin, which swallowed this
   line's own margin and left the citation hanging off the middle column as
   though it belonged to that one figure. Padding survives the collapse. */
.gs-band-source {
  margin: 0;
  padding-top: 40px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.gs-band-source a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

.gs-band-source a:hover {
  color: var(--gshvac-primary);
}


/* Hero eyebrow above the H1 */
.gs-hero-eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Sections: give parallax/dark sections a dark fallback color so slow image
   loads never flash white.
   -------------------------------------------------------------------------- */

.parallax,
.inner-header {
  background-color: var(--gshvac-ink);
}

/* --------------------------------------------------------------------------
   Hero background

   #home carries the photo (intro-bkg-1920d.webp). Painting an opaque colour
   onto .text-header hides it, so the scrim is a gradient instead — it keeps
   the headline legible while the image still reads through. The flat colour
   stays on #home itself purely as a load-time fallback.
   -------------------------------------------------------------------------- */

/* The theme points this at the pre-darkened `-1920d` cut, which under the
   scrim below left the hero as a flat black rectangle with no photograph in
   it at all. The undarkened cut plus a gradient does the same job while the
   image still reads. The small-screen `-440d` cut the theme sets under 768px
   is left alone: there is no undarkened 440 to swap to, and the stacked
   layout wants the heavier ground anyway. */
#home {
  background-color: var(--gshvac-ink);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 769px) {
  #home {
    background-image: url("../images/resized/webp/intro-bkg-1920.webp");
  }
}

/* The photograph is a dark subject on a dark ground, and the part of it that
   carries any light — the pinstripe suit — falls on the left, exactly where
   the headline sits. Lifting the scrim far enough to show it puts white type
   over mid-grey; keeping the type legible flattens the photo to black. So the
   photo is treated as texture and the hero is built as a deliberate brand
   ground instead: two soft accent washes (warm top right, brand blue bottom
   left) over a near-opaque tinted base. That reads as designed rather than as
   an underexposed picture, and it gives the white form card something with
   depth to sit on. */
#home .text-header {
  background-color: transparent;
  background-image:
    radial-gradient(
      1000px 560px at 76% 12%,
      rgba(242, 201, 76, 0.2) 0%,
      rgba(242, 201, 76, 0) 68%
    ),
    radial-gradient(
      820px 520px at 4% 96%,
      rgba(47, 85, 119, 0.3) 0%,
      rgba(47, 85, 119, 0) 70%
    ),
    linear-gradient(
      104deg,
      rgba(35, 42, 53, 0.95) 0%,
      rgba(35, 42, 53, 0.9) 42%,
      rgba(35, 42, 53, 0.74) 78%,
      rgba(35, 42, 53, 0.66) 100%
    );
}

/* Below 992px the columns stack and the copy runs the full width, so the
   angled pass would leave the lower half of the text on bare photo. */
@media (max-width: 991px) {
  #home .text-header {
    background-image:
      radial-gradient(
        700px 420px at 88% 6%,
        rgba(242, 201, 76, 0.18) 0%,
        rgba(242, 201, 76, 0) 70%
      ),
      linear-gradient(
        180deg,
        rgba(35, 42, 53, 0.93) 0%,
        rgba(35, 42, 53, 0.88) 100%
      );
  }
}

/* Lift the headline off the photo without darkening the whole scrim. */
.header-big-text .h-responsive,
.header-big-text .p-responsive {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Keep banner text above the .layer-overlay ::before tint, which otherwise
   stacks over the heading and greys it out. */
.inner-header .container,
.parallax .container {
  position: relative;
  z-index: 2;
}

/* Inner banner: matched height.

   Banner height is content-driven, so a page with short banner copy (Blog:
   one heading plus one line) came out ~120px shallower than Contact's, which
   carries an eyebrow and a row of pills. Moving between the two shifted the
   fold noticeably. This modifier pins the shallow banners to the Contact
   banner's measured height and centres the copy inside it, rather than
   padding the markup out with filler.

   Left off below 768px on purpose: there the Contact banner is taller only
   because its pill row wraps onto three lines, and reserving that space on a
   two-line banner would read as an empty band on a phone. */
@media (min-width: 768px) {
  .inner-header.gs-inner-header-matched .container {
    min-height: 387px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 992px) {
  .inner-header.gs-inner-header-matched .container {
    min-height: 403px;
  }
}

/* --------------------------------------------------------------------------
   Cards (services, process steps, industries)
   -------------------------------------------------------------------------- */

/* One surface for every card on the site — services, process steps, quotes,
   contact, blog. A hairline plus a barely-there resting shadow reads as a
   raised panel; an outline alone made the cards look like empty table cells. */
.gs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(35, 42, 53, 0.04);
  padding: 34px 28px;
  height: 100%;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(35, 42, 53, 0.12);
  border-color: transparent;
}

.gs-card .fa {
  transition: transform 0.25s ease;
}

/* Service icons sit in a tinted tile rather than floating as bare glyphs, so
   the five cards start on one strong shape instead of five silhouettes of
   different widths. */
.gs-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--gshvac-stone);
  color: var(--gshvac-accent-txt);
  font-size: 24px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

/* FontAwesome's base rule hard-sets `font: … 14px/1 FontAwesome` on .fa, so the
   glyph ignores the tile's size unless it is told to inherit it. */
.gs-card-icon .fa {
  font-size: inherit;
  line-height: 1;
}

.gs-card:hover .gs-card-icon {
  background: var(--gshvac-stone);
}

.gs-card:hover > .fa,
.gs-card:hover .gs-card-icon {
  transform: scale(1.12);
}

.gs-card h4 {
  margin: 18px 0 12px;
  line-height: 1.3;
}

.gs-card p {
  color: #505050;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Push the "Learn More" link to the bottom edge so it lines up across cards
   whose body copy runs to different lengths. */
.gs-card > a:last-child {
  margin-top: auto;
}

/* The next-step cell that closes the services grid. Inverted so it reads as
   an action rather than as a sixth service. */
.gs-card-cta {
  background: var(--gshvac-ink);
  border-color: var(--gshvac-ink);
  justify-content: center;
}

.gs-card-cta h4 {
  margin-top: 0;
  color: #fff;
}

.gs-card-cta p {
  color: rgba(255, 255, 255, 0.78);
}

/* The button is the card's last child, so the shared `margin-top: auto` rule
   above would shove it to the foot of a card whose content is deliberately
   centred. */
.gs-card-cta > .btn:last-child {
  margin-top: 6px;
  align-self: flex-start;
}

.gs-card-cta:hover {
  border-color: var(--gshvac-ink);
}

/* Equal-height card rows without inline min-heights. Centring lets a row of
   five wrap to a balanced 3 + 2 without grid offsets. */
.gs-card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Every cell in these rows carries mb-30, including the ones on the last
   visual row, so that 30px landed on top of the section's own bottom padding
   and read as a void. Absorbing one row of it on the container keeps all the
   inter-card gutters intact — zeroing the last child instead would leave the
   final row sitting lower than its neighbours whenever the row is full. */
.gs-card-row,
.gs-stat-row {
  margin-bottom: -30px;
}

/* The trailing "See the full…" / "Visit the blog" rows carry mt-10, which the
   negative margin above cancels out — the button ended up touching the cards.
   Padding rather than margin because the utility class is !important. */
.gs-card-row + .row {
  padding-top: 40px;
}

.gs-card-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.gs-card-row > [class*="col-"] > .gs-card,
.gs-card-row > [class*="col-"] > .gs-post-card,
.gs-card-row > [class*="col-"] > .gs-quote-card {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Numbered step cards (How It Works)

   Reuses .gs-card for the frame and hover so the process row sits in the same
   visual family as the services row above it.
   -------------------------------------------------------------------------- */

.gs-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gshvac-cta);
  color: var(--gshvac-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

/* The figures are data, not section headings — marking them up as <h2> put
   six same-level headings inside every stats block and broke the outline. They
   are plain paragraphs now, styled to read as the display numbers they are. */
.gs-stat p.gs-stat-value {
  font-size: 40px;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
  max-width: none;
  line-height: 1.1;
  font-family: inherit;
}

.gs-stat p {
  color: #666;
  max-width: 170px;
  margin: 0 auto;
  line-height: 1.45;
}

.gs-stat-dark p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 260px;
  margin: 0 auto;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .gs-stat p.gs-stat-value {
    font-size: 32px;
  }
}

/* Six stats across sit on wildly different baselines because the labels run
   to different line counts. Flex rows align the tops and keep the numbers on
   one line regardless of label length. */
.gs-stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gs-stat-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Hairline dividers group the figures as one instrument panel instead of six
   loose numbers. Only from 992px up, where each block's column count is fixed
   and known: six across in the proof section, three across in the dark
   calling band. Below that the rows re-wrap and a divider would land mid-row. */
@media (min-width: 992px) {
  #proof .gs-stat + .gs-stat,
  #about .gs-stat + .gs-stat {
    border-left: 1px solid var(--gshvac-line);
  }
  .cta-1a .gs-stat:not(:nth-child(3n + 1)) {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* The theme justifies every .font-16 block, which opens ugly rivers of
   whitespace in narrow columns like the testimonial carousel. `inherit`
   rather than `left` so a .font-16 block inside a centred container (the
   blog post meta line, for one) still centres with its parent. */
.font-16 {
  text-align: inherit;
}

.testimonial .comment p,
.gs-card p {
  text-align: left;
}

/* --------------------------------------------------------------------------
   Section rhythm

   Section padding was set ad hoc per block (pt-60/pb-40 here, nothing at all
   on testimonials and contact), so the page read as unevenly spaced. One
   scale applied by class keeps the vertical rhythm consistent, and the
   headline/sub-headline pair gets a single predictable gap.
   -------------------------------------------------------------------------- */

/* Selectors carry `section >` to outrank the theme's own
   `section > .container { padding: 80px 0 }` (0,1,1). Without it .gs-section
   lost every specificity contest and did nothing — including its mobile
   step-down, so phones were still paying the full desktop 80px. */
.gs-section,
section > .container.gs-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.gs-section-tight,
section > .container.gs-section-tight {
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (max-width: 767px) {
  .gs-section,
  section > .container.gs-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
  .gs-section-tight,
  section > .container.gs-section-tight {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

.section-title {
  margin-bottom: 46px;
}

/* Section headings shared the hero's 42px, so nothing read as subordinate.
   Stepping them down re-establishes h1 > h2 > h3.

   Scoped to headings only — the theme also uses a bare .title on testimonial
   company names, which would otherwise blow up to heading size. */
h2.title,
.banner-text h2 {
  font-size: 34px;
  line-height: 1.2;
  /* Negative, not positive. Letterspacing opens up caps; at 34px sentence case
     the same 0.5px reads slack. */
  letter-spacing: -0.2px;
}

@media (max-width: 767px) {
  h2.title,
  .banner-text h2 {
    font-size: 27px;
  }
}

/* A short accent rule under every section heading. It does the work the old
   all-caps-plus-coloured-subtitle pairing was doing on its own: marks where a
   section starts without another block of coloured type competing with the
   headline. Scoped to .section-title so the parallax banner headings, which
   sit on photography and need no extra furniture, are left alone. */
.section-title .title {
  margin-bottom: 20px;
  padding-bottom: 18px;
  position: relative;
}

.section-title .title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--gshvac-cta);
}

/* The sub-headline ran the full 1140px container, so the two-line ones broke
   at awkward points and read as body copy rather than a deck. A measure of
   about 70 characters keeps them to balanced lines at every width. */
.section-title h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 0 auto;
  max-width: 760px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* --------------------------------------------------------------------------
   Accent system

   The page ran two unrelated accents: every primary CTA was .btn-custom
   (#84b3c5 pale blue, ~2.1:1 against its white label — it read as disabled)
   while the nav CTA was orange. Settling it as blue = brand, orange = action
   gives one consistent signal for "this is the thing to click".

   Orange now marks a conversion action rather than every button. A button
   earns it by asking for the meeting — linking to contact or jumping to the
   consultation form. Buttons that merely move you to another page (Our
   Process, the blog index, back to home) take the brand teal, which is what
   stops the page reading as a wall of orange.
   -------------------------------------------------------------------------- */

.btn-custom,
.btn-custom:link,
.btn-custom:visited {
  background-color: var(--gshvac-primary) !important;
  border-color: var(--gshvac-primary);
  color: var(--gshvac-white) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
  background-color: var(--gshvac-primary-dark) !important;
  border-color: var(--gshvac-primary-dark);
  color: var(--gshvac-white) !important;
}

/* Conversion actions keep the orange. The last selector is the on-ink
   exception: a navigation button sitting on a dark parallax hero would sink
   into the scrim in teal, so it takes the orange back — same rule the
   GenSales site runs. */
.btn-custom[href*="contact"],
.btn-custom[href*="#consultation"],
button.btn-custom,
input.btn-custom,
.layer-overlay .btn-custom {
  background-color: var(--gshvac-cta) !important;
  border-color: var(--gshvac-cta) !important;
  color: var(--gshvac-ink) !important;
}

.btn-custom[href*="contact"]:hover,
.btn-custom[href*="contact"]:focus,
.btn-custom[href*="#consultation"]:hover,
.btn-custom[href*="#consultation"]:focus,
button.btn-custom:hover,
button.btn-custom:focus,
input.btn-custom:hover,
input.btn-custom:focus,
.layer-overlay .btn-custom:hover,
.layer-overlay .btn-custom:focus {
  background-color: var(--gshvac-cta-dark) !important;
  border-color: var(--gshvac-cta-dark) !important;
  color: var(--gshvac-ink) !important;
}

/* Homepage hero CTA: deep blue, matching the GenSales hero form and the
   navigation buttons elsewhere on the site.

   Unlike the conversion buttons above, this one sits on the light form card
   rather than on the hero photo, so it needs no border — deep blue on the card
   separates on its own. Beats `button.btn-custom` on specificity (0,2,0 vs
   0,1,1), so the conversion yellow does not apply here. The header's CTA is a
   separate component and stays yellow. */
.gs-hero-form .btn-custom,
.gs-hero-form .btn-custom:link,
.gs-hero-form .btn-custom:visited {
  background-color: var(--gshvac-primary) !important;
  border-color: var(--gshvac-primary) !important;
  color: var(--gshvac-white) !important;
}

.gs-hero-form .btn-custom:hover,
.gs-hero-form .btn-custom:focus,
.gs-hero-form .btn-custom:active {
  background-color: var(--gshvac-primary-dark) !important;
  border-color: var(--gshvac-primary-dark) !important;
  color: var(--gshvac-white) !important;
}

/* The closing band is already orange-adjacent; keep its button inverted so it
   doesn't disappear into the background. */
.bg-theme-colored2 .btn-default {
  background-color: #fff;
  border-color: #fff;
  color: var(--gshvac-ink);
}

.bg-theme-colored2 .btn-default:hover {
  background-color: var(--gshvac-ink);
  border-color: var(--gshvac-ink);
  color: #fff;
}

/* Sky is 2.4:1 on a light ground — far under the 4.5:1 floor for body-sized
   text — so text-level accent on light is the deep blue instead. That is
   7.22:1 on cream and 6.50:1 on stone. */
.text-theme-colored2 {
  color: var(--gshvac-accent-txt) !important;
}

/* On dark backgrounds the original lighter tone has plenty of contrast, so
   keep it there rather than muddying the stats. */
.gs-stat-dark .text-theme-colored2,
.banner-text .text-theme-colored2,
.header-big-text .text-theme-colored2,
.footer .text-theme-colored2 {
  color: var(--gshvac-accent-dk) !important;
}

.btn-custom:hover,
.btn-default:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Visible keyboard focus everywhere */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
  outline: 2px solid var(--gshvac-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
  border-color: var(--gshvac-primary);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.15);
}

/* --------------------------------------------------------------------------
   Icon lists (awards, proven results, industries)

   The theme floats the icon and lets the text run beside it, so a wrapped
   second line returns to x=0 and sits *under* the icon instead of lining up
   with the first line. Making the row a flex pair gives a proper hanging
   indent: the icon holds its column and every line of text aligns.
   -------------------------------------------------------------------------- */

/* Applied to every icon list rather than opted into per list, so any list
   added later gets the correct wrap for free. The theme already gives the
   icon a 28px box with a 10px right margin, which becomes the flex gutter. */
.list-icon > li {
  display: flex;
  align-items: flex-start;
}

.list-icon > li > i {
  flex: 0 0 auto;
}

.list-icon > li > span {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.gs-cat-filter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.gs-cat-filter > li {
  display: inline-block;
}

.gs-cat-filter a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--gshvac-line);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gshvac-accent-txt);
  background: #fff;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gs-cat-filter a:hover,
.gs-cat-filter a:focus {
  background: var(--gshvac-cream);
  color: var(--gshvac-ink);
  text-decoration: none;
}

.gs-cat-filter a.active {
  background: var(--gshvac-cta);
  border-color: var(--gshvac-primary);
  color: var(--gshvac-ink);
}

.gs-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(35, 42, 53, 0.04);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gs-post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(35, 42, 53, 0.12);
}

.gs-post-thumb {
  display: block;
  overflow: hidden;
  background: var(--gshvac-ink);
  aspect-ratio: 16 / 9;
}

.gs-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gs-post-card:hover .gs-post-thumb img {
  transform: scale(1.05);
}

.gs-post-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 24px;
}

.gs-post-cat {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gshvac-primary);
  margin-bottom: 10px;
}

.gs-post-cat-light {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gshvac-accent);
}

.gs-post-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.gs-post-title a {
  color: var(--gshvac-ink);
}

.gs-post-title a:hover {
  color: var(--gshvac-primary);
  text-decoration: none;
}

.gs-post-meta {
  margin: 0 0 12px;
  font-size: 13px;
  color: #8a949b;
}

.gs-post-excerpt {
  color: #505050;
  line-height: 1.6;
  margin-bottom: 16px;
}

.gs-post-more {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  color: var(--gshvac-primary);
}

/* Article body. The hero is cropped to a consistent 16:9 band — the source
   photos are portrait-ish and at full height they push the whole article
   below the fold. */
.gs-article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 28px;
}

.gs-article-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--gshvac-ink);
  font-weight: 500;
  padding-left: 18px;
  border-left: 3px solid var(--gshvac-primary);
  margin-bottom: 26px;
}

.gs-article p {
  color: var(--gshvac-primary-dark);
  line-height: 1.75;
  margin-bottom: 18px;
  font-size: 16px;
  text-align: left;
}

/* Migrated posts carry real section headings and lists (see
   includes/blog-posts.php), not just paragraphs. Sized to sit clearly below
   the article title without competing with it. */
.gs-article-heading {
  color: var(--gshvac-ink);
  font-size: 24px;
  line-height: 1.3;
  margin: 34px 0 14px;
}

.gs-article-subheading {
  color: var(--gshvac-ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  margin: 26px 0 10px;
}

.gs-article-list {
  color: var(--gshvac-primary-dark);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 18px;
  padding-left: 22px;
}

.gs-article-list li {
  margin-bottom: 8px;
}

.gs-article-cta {
  margin-top: 36px;
  background: var(--gshvac-cream);
  border-radius: 6px;
  padding: 28px;
}

.gs-article-cta p {
  color: #505050;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Our Process — the six-stage process (ported from GenSales Our Approach)

   One object, two panes: a dark sidebar carrying the sequence as a vertical
   timeline, and a white pane holding whichever stage is selected. The two
   halves are joined inside a single 1px var(--gshvac-line) frame, so the
   block reads as one unit on the cream page rather than as two cards.

   The sidebar is the section's only dark surface, which is why the band behind
   it is plain.

   Below 992px the nav collapses to its first entry, the sidebar becomes a
   plain dark intro, and every panel stacks, so no copy is trapped behind a
   click.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .gs-approach {
    display: flex;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--gshvac-line);
    border-radius: 4px;
    /* Clips the sidebar's square corners to the frame. It also rules out
       position: sticky on the nav, which is the trade for one joined block. */
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(35, 42, 53, 0.05);
  }
  .gs-approach > [class*="col-"] {
    float: none;
    padding-left: 0;
    padding-right: 0;
  }
  .gs-pane-col {
    display: flex;
    flex-direction: column;
  }
}

/* Sidebar ---------------------------------------------------------------- */

.gs-rail-col {
  background: var(--gshvac-ink);
}

.gs-rail-wrap {
  padding: 38px 32px 42px;
}

.gs-rail-eyebrow {
  display: block;
  margin-bottom: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gshvac-accent);
}

.gs-rail {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The line runs marker-centre to marker-centre behind the whole sequence. */
.gs-rail::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: rgba(127, 175, 200, 0.4);
}

.gs-rail li + li {
  margin-top: 2px;
}

.gs-rail-item {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 0 11px 32px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.gs-rail-item:focus {
  outline: 0;
}

/* Navy would vanish against the sidebar, so the ring is the brand yellow. The
   !important is not decoration: style-main carries `:active,:focus{outline:0
   !important}`, which kills any plain outline here. */
.gs-rail-item:focus-visible {
  outline: 2px solid var(--gshvac-cta) !important;
  outline-offset: 2px;
}

.gs-rail-marker {
  position: absolute;
  left: 0;
  top: 22px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gshvac-accent);
  border-radius: 50%;
  background: var(--gshvac-ink);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.gs-rail-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gshvac-accent);
  transition: color 0.18s ease;
}

.gs-rail-desc {
  display: none;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gshvac-on-dark);
}

.gs-rail-item:hover .gs-rail-title {
  color: var(--gshvac-white);
}

.gs-rail-item.gs-rail-active {
  padding-top: 8px;
  padding-bottom: 20px;
}

.gs-rail-active .gs-rail-marker {
  top: 19px;
  background: var(--gshvac-accent);
  box-shadow: 0 0 0 4px rgba(127, 175, 200, 0.18);
}

.gs-rail-active .gs-rail-title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gshvac-white);
}

.gs-rail-active .gs-rail-desc {
  display: block;
}

/* Detail panes ----------------------------------------------------------- */

.gs-panel {
  display: none;
  flex-direction: column;
  background: var(--gshvac-white);
  /* Keeps a short stage from looking stubby beside the full-height nav. */
  min-height: 520px;
}

.gs-panel-active {
  display: flex;
  animation: gsPanelFade 0.25s ease;
}

@keyframes gsPanelFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.gs-panel-head {
  padding: 38px 40px 0;
}

.gs-panel-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.gs-panel-step {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gshvac-primary);
}

.gs-panel-phase {
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--gshvac-stone);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gshvac-primary);
}

.gs-panel-title {
  margin: 0 0 14px;
  font-size: 31px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gshvac-ink);
}

.gs-panel-lead {
  max-width: 44em;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #62707a;
}

.gs-panel-body {
  flex: 1 1 auto;
  padding: 30px 40px 12px;
}

.gs-panel p {
  color: #62707a;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Timeline columns ------------------------------------------------------- */

/* Both phase columns end on the same line, as the reference does, whichever
   one runs longer. */
@media (min-width: 768px) {
  .gs-tl-grid-phases {
    display: flex;
  }
  .gs-tl-grid-phases > .gs-tl-col {
    display: flex;
    flex-direction: column;
  }
  .gs-tl-grid-phases .gs-tl-track {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  /* The list draws the rail, so it has to stretch with the track it sits in.
     Without this, a column carrying a trailing note makes its neighbour's
     track taller than its list and the bottom end-cap floats free of the
     line. */
  .gs-tl-grid-phases .gs-tl-list {
    flex: 1 1 auto;
  }
}

.gs-tl-col-title {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gshvac-ink);
}

.gs-tl-col-sub {
  margin: 0 0 6px;
  font-size: 14px;
  color: #62707a;
}

/* The track carries the rail: a line down the middle of the list's gutter,
   with an open marker at each end of the run. */
.gs-tl-track {
  position: relative;
  padding: 16px 0;
}

.gs-tl-track::before,
.gs-tl-track::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gshvac-accent);
  border-radius: 50%;
  background: var(--gshvac-white);
}

.gs-tl-track::before {
  top: 0;
}

.gs-tl-track::after {
  bottom: 0;
}

.gs-tl-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
}

.gs-tl-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -9px;
  bottom: -9px;
  width: 2px;
  background: rgba(127, 175, 200, 0.55);
}

.gs-tl-list li {
  position: relative;
  padding-left: 32px;
}

.gs-tl-list li + li {
  margin-top: 18px;
}

/* Same technique as the old check-mark bullet: one pseudo-element, no extra
   markup per item. */
.gs-tl-list li::before {
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gshvac-primary);
  color: var(--gshvac-white);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.gs-tl-item {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
}

.gs-tl-item-title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--gshvac-ink);
  transition: color 0.18s ease;
}

.gs-tl-item-text {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #62707a;
}

/* Sub-points under a timeline item, for the items that break down further.
   .gs-tl-list li and its ::before are descendant selectors, so a nested item
   has to be talked out of the 22px chevron badge rather than into a dot —
   otherwise it reads as a second top-level step. */
.gs-tl-list .gs-tl-sub {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.gs-tl-list .gs-tl-sub li {
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.55;
  color: #62707a;
}

.gs-tl-list .gs-tl-sub li + li {
  margin-top: 4px;
}

.gs-tl-list .gs-tl-sub li::before {
  content: "";
  top: 9px;
  left: 2px;
  width: 4px;
  height: 4px;
  background: var(--gshvac-accent);
}

/* The overview items double as jumps into their stage. */
button.gs-tl-item {
  min-height: 44px;
  cursor: pointer;
}

button.gs-tl-item:hover .gs-tl-item-title,
button.gs-tl-item:focus .gs-tl-item-title {
  color: var(--gshvac-primary);
}

button.gs-tl-item:focus {
  outline: 0;
}

button.gs-tl-item:focus-visible {
  outline: 2px solid var(--gshvac-primary) !important;
  outline-offset: 3px;
}

/* Longer copy below the rail, for the stages that carry it. */
.gs-panel-extra {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--gshvac-line);
}

.gs-panel-hint {
  margin: 22px 0 0;
  color: #62707a;
  font-size: 14px;
  font-style: italic;
}

.gs-panel-extra .gs-panel-hint {
  margin-bottom: 0;
}

/* A stage whose whole panel is written as copy has no rail above it, so
   .gs-panel-extra lands as the body's first child and its divider would draw
   straight under the panel header. */
.gs-panel-body > .gs-panel-extra:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Sub-headings inside panel copy, at the same step as .gs-tl-col-title so a
   stage written as prose and one written as a rail read at the same level. */
.gs-panel-extra h4 {
  margin: 28px 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gshvac-ink);
}

.gs-panel-extra h4:first-child {
  margin-top: 0;
}

/* Stage 2: list sources, filtering and the internal database. */
.gs-listbuild img {
  max-width: 100%;
  height: auto;
}

.gs-listbuild ul.list.check-circle li:before {
  color: var(--gshvac-primary);
}

.gs-listbuild-logos {
  margin: 0;
}

/* The source strip is a single 1091x46 image — a 24:1 band that falls to a few
   pixels tall on a phone. Below 768px the names are set as text instead
   (hidden-xs / visible-xs-block on the markup), so nothing is lost and the
   strip never has to be scrolled or squinted at. */
.gs-panel-extra .gs-listbuild-sources {
  margin: 0;
  font-weight: 600;
  color: var(--gshvac-primary);
}

.gs-listbuild-db {
  margin-top: 4px;
}

.gs-listbuild-db img {
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .gs-listbuild-db img {
    margin-top: 14px;
  }
}

/* Stages 3-5: the lettered qualification badge. Nothing in the theme sets a
   letter in a disc — .gs-tl-list li::before is a fixed chevron glyph — and the
   badge is needed in three places (the grading ladder, the nurture cadence and
   the sample records), which is what makes it a component rather than a one-off.
   Every fill is a brand token and each clears 4.5:1 against its own text, though
   the letter is decorative: it is repeated in the wording beside it, so the
   badges are aria-hidden and nothing depends on colour alone. */
.gs-grade {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--gshvac-primary);
  color: var(--gshvac-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  vertical-align: middle;
}

.gs-grade-b {
  background: var(--gshvac-accent);
  color: var(--gshvac-ink);
}

.gs-grade-c {
  background: var(--gshvac-cta);
  color: var(--gshvac-ink);
}

/* Disqualified reads as grey rather than as a fourth accent — it is the one
   tier that is not a live target. */
.gs-grade-d {
  background: var(--gshvac-line-strong);
  color: var(--gshvac-ink);
}

/* Stage 3: the graded-account ladder. */
.gs-grade-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gs-grade-list > li + li {
  margin-top: 20px;
}

.gs-grade-head {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--gshvac-ink);
}

/* The body and situation lines hang under the label rather than under the
   badge, so the block reads as one entry. */
.gs-grade-body,
.gs-grade-note {
  margin: 0;
  padding-left: 36px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #62707a;
}

.gs-grade-note {
  margin-top: 4px;
  font-size: 13.5px;
}

.gs-qual-chart {
  margin: 26px 0 0;
  text-align: center;
}

.gs-qual-chart img {
  max-width: 100%;
  height: auto;
}

/* Stage 4: sample decision-maker records. A thin layer over .gs-card, which
   carries the frame, the equal-height flex column and the radius; it has no
   avatar or footer treatment of its own, and its 34px padding is too generous
   for a third-width card sitting inside the panel. */
.gs-dm-card {
  padding: 22px 18px;
  text-align: center;
}

/* .gs-card lifts on hover because those cards are links. A sample record is
   not clickable, so the lift would promise an interaction that is not there. */
.gs-dm-card:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(31, 36, 39, 0.04);
  border-color: var(--gshvac-line);
}

/* .gs-card is a flex column, so a fixed-width child is a flex item and
   text-align on the card cannot centre it — it has to centre itself. */
.gs-dm-avatar {
  align-self: center;
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gshvac-accent);
  color: var(--gshvac-white);
  font-size: 24px;
  line-height: 54px;
}

.gs-dm-card .gs-dm-name {
  margin: 12px 0 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gshvac-ink);
}

.gs-dm-card .gs-dm-role {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
}

.gs-dm-card .gs-dm-role span {
  font-weight: 700;
  color: var(--gshvac-primary);
}

.gs-dm-record {
  list-style: none;
  margin: 0 0 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--gshvac-line);
  text-align: left;
}

/* Sample addresses are long and the column is narrow at the sm breakpoint. */
.gs-dm-record li {
  font-size: 13px;
  line-height: 1.5;
  color: #62707a;
  word-break: break-word;
}

.gs-dm-record li + li {
  margin-top: 6px;
}

.gs-dm-record .fa {
  width: 18px;
  margin-right: 5px;
  color: var(--gshvac-accent);
  text-align: center;
}

/* Pinned to the foot so the badge lines up across all three cards, whose
   records run to different heights. */
.gs-dm-card .gs-dm-grade {
  margin: auto 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gshvac-ink);
}

/* Stage 5: nurture cadence beside the year calendar. */
.gs-cadence-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gs-cadence-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
}

.gs-cadence-list .gs-grade {
  flex: 0 0 26px;
}

.gs-cadence-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #62707a;
}

.gs-cadence-row img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Stage 5: the two touchpoint facts, scaled down for use inside a panel. */
.gs-touch-stats {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.gs-touch-stats li {
  flex: 1 1 200px;
  padding: 16px 18px;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  background: var(--gshvac-cream);
}

.gs-touch-stats li + li {
  margin-left: 16px;
}

.gs-touch-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gshvac-primary);
}

.gs-touch-label {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #62707a;
}

/* col-sm-* has already stacked by here, so what is left is the gap the float
   layout no longer provides. */
@media only screen and (max-width: 767px) {
  .gs-grade-grid > [class*="col-"] + [class*="col-"] {
    margin-top: 20px;
  }

  .gs-cadence-row img {
    margin-top: 18px;
  }

  .gs-touch-stats li + li {
    margin-left: 0;
    margin-top: 14px;
  }
}

/* Stage-to-stage navigation, pinned to the foot of the pane. */
.gs-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 16px 40px;
  border-top: 1px solid var(--gshvac-line);
  background: var(--gshvac-cream);
}

.gs-panel-foot .gs-panel-hint {
  margin: 0 20px 0 0;
}

.gs-panel-nav {
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #62707a;
  cursor: pointer;
  transition: color 0.18s ease;
}

.gs-panel-nav:hover {
  color: var(--gshvac-primary);
}

.gs-panel-next {
  margin-left: auto;
  color: var(--gshvac-primary);
  text-align: right;
}

.gs-panel-next:hover {
  color: var(--gshvac-ink);
}

.gs-panel-prev .fa {
  margin-right: 8px;
}

.gs-panel-next .fa {
  margin-left: 8px;
}

@media (max-width: 1199px) {
  .gs-rail-wrap {
    padding: 32px 24px 36px;
  }
  .gs-panel-head {
    padding: 32px 30px 0;
  }
  .gs-panel-body {
    padding: 26px 30px 10px;
  }
  .gs-panel-foot {
    padding: 16px 30px;
  }
  .gs-panel-title {
    font-size: 27px;
  }
}

/* Stack the panes once the two-column layout gets tight. The nav collapses to
   its first entry: with every panel on screen there is nothing left to choose,
   and the entry's own copy still has to be read. */
@media (max-width: 991px) {
  /* Stacked, the sidebar's dark fill would otherwise run into the row's
     gutters and sit wider than the panels beneath it. */
  .gs-approach {
    margin-left: 0;
    margin-right: 0;
  }
  .gs-approach > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
  .gs-rail-col {
    border-radius: 4px 4px 0 0;
  }
  .gs-rail-wrap {
    padding: 28px 22px 30px;
  }
  .gs-rail-eyebrow {
    margin-bottom: 18px;
  }
  .gs-rail::before,
  .gs-rail-marker {
    display: none;
  }
  .gs-rail li + li {
    display: none;
  }
  .gs-rail-item,
  .gs-rail-item.gs-rail-active {
    padding: 0;
    cursor: default;
  }
  .gs-rail-active .gs-rail-title {
    font-size: 21px;
  }
  .gs-panel {
    display: flex;
    min-height: 0;
    border: 1px solid var(--gshvac-line);
    border-top: 0;
  }
  .gs-panel-head {
    padding: 26px 24px 0;
  }
  .gs-panel-body {
    padding: 22px 24px 8px;
  }
  .gs-panel-title {
    font-size: 22px;
  }
  .gs-panel-lead {
    font-size: 15.5px;
  }
  /* Every line of the phase columns is repeated by the stacked stages below,
     which leaves the overview pane with nothing but its head. */
  #gs-panel-overview .gs-panel-body {
    display: none;
  }
  #gs-panel-overview .gs-panel-head {
    padding-bottom: 26px;
  }
  .gs-panel-foot {
    display: none;
  }
}

@media (max-width: 767px) {
  .gs-tl-col + .gs-tl-col {
    margin-top: 26px;
  }
}

/* With six stages the 520px floor on the panel would leave dead space beside
   the rail on desktop. */
@media (min-width: 992px) {
  .gs-panel {
    min-height: 440px;
  }
  .gs-panel-body {
    padding: 28px 38px 10px;
    line-height: 1.7;
  }
}

/* The rail had its own ring; the panel prev/next buttons fell back to
   whatever the theme reset left, which is nothing on most buttons. */
.gs-panel-nav:focus-visible {
  outline: 3px solid var(--gshvac-primary) !important;
  outline-offset: 2px;
}

/* The pane swap arrives whole rather than fading up into place. */
@media (prefers-reduced-motion: reduce) {
  .gs-rail-title,
  .gs-rail-marker,
  .gs-tl-item-title,
  .gs-panel-nav {
    transition: none;
  }
  .gs-panel-active {
    animation: none;
  }
}

/* Callout for the expanded SALT capabilities note */
.gs-capability-note {
  background: #fff;
  border: 1px solid var(--gshvac-line);
  border-left: 4px solid var(--gshvac-primary);
  border-radius: 4px;
  padding: 20px 24px;
  color: var(--gshvac-primary-dark);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Award medallions, large (About Us)

   Same component as the nine-abreast row on the home page, but the awards are
   the point of the section here rather than a supporting strip — so it drops
   to three across on desktop, which also divides the nine badges into clean
   rows with no orphan, and the artwork roughly doubles in size.
   -------------------------------------------------------------------------- */

.gs-award-grid-lg .gs-award-item {
  padding: 0 16px 32px;
}

.gs-award-grid-lg .gs-award-item img {
  height: 110px;
  margin-bottom: 14px;
}

.gs-award-caption strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--gshvac-primary);
  margin-bottom: 3px;
}

@media (min-width: 768px) {
  .gs-award-grid-lg .gs-award-item {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 992px) {
  .gs-award-grid-lg .gs-award-item {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    padding: 0 20px 36px;
  }
  .gs-award-grid-lg .gs-award-item img {
    height: 130px;
  }
  .gs-award-grid-lg .gs-award-caption {
    font-size: 14px;
  }
  .gs-award-grid-lg .gs-award-caption strong {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   About Us: company story and the build-vs-buy comparison
   -------------------------------------------------------------------------- */

/* The one-line beat in the founder story ("He believed the same principles
   should apply to sales"). A full paragraph treatment buries it; the rule and
   the size lift it without turning it into a blockquote it is not. */
.gs-story-pull {
  margin: 26px 0;
  padding-left: 18px;
  border-left: 3px solid var(--gshvac-primary);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--gshvac-ink);
}

/* separate + 0 spacing rather than collapse, so the 8px radius can actually
   clip the header fills. */
.gs-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  overflow: hidden;
}

.gs-compare th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gshvac-line);
}

.gs-compare thead th:first-child {
  color: #8a949b;
  background: var(--gshvac-cream);
}

.gs-compare thead th:last-child {
  color: var(--gshvac-primary);
  background: var(--gshvac-cta);
}

.gs-compare td {
  padding: 14px 20px;
  font-size: 15px;
  border-bottom: 1px solid var(--gshvac-line);
  vertical-align: top;
  width: 50%;
}

.gs-compare tbody tr:last-child td {
  border-bottom: 0;
}

/* Left column is the cost side of the trade, so it is muted — the eye should
   land on what arrives already done. */
.gs-compare td:first-child {
  color: #505050;
}

.gs-compare td:last-child {
  color: var(--gshvac-ink);
  font-weight: 600;
  background: var(--gshvac-cream);
}

.gs-compare td:last-child .fa {
  color: var(--gshvac-primary);
  margin-right: 10px;
}

/* Its own class rather than .font-16 + .text-center: .font-16 sets
   text-align: inherit at equal specificity and later in this file, so it wins
   and the line renders left-aligned under the centred table. */
.gs-compare-note {
  font-size: 16px;
  text-align: center;
  color: #505050;
}

/* Two columns of prose do not survive phone width — they either overflow the
   viewport or wrap to one word per line. Restack as labelled cards instead,
   with each cell's data-label standing in for the column header. */
@media (max-width: 767px) {
  .gs-compare,
  .gs-compare tbody,
  .gs-compare tr,
  .gs-compare td {
    display: block;
    width: 100%;
  }

  .gs-compare thead {
    display: none;
  }

  .gs-compare tr {
    border-bottom: 1px solid var(--gshvac-line);
    padding: 8px 0;
  }

  .gs-compare tbody tr:last-child {
    border-bottom: 0;
  }

  .gs-compare td {
    border-bottom: 0;
    padding: 10px 18px;
  }

  .gs-compare td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8a949b;
    margin-bottom: 4px;
  }

  .gs-compare td:last-child::before {
    color: var(--gshvac-primary);
  }
}


/* --------------------------------------------------------------------------
   Client quotes (About Us)
   -------------------------------------------------------------------------- */

.gs-quote-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* The card is a <blockquote>, and Bootstrap gives that element a 17.5px
     font size and a bottom margin of its own. Both are reset here so the
     markup can stay semantic without the card growing a size of its own. */
  margin: 0;
  font-size: inherit;
  background: #fff;
  border: 1px solid var(--gshvac-line);
  border-left: 3px solid var(--gshvac-accent-txt);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(35, 42, 53, 0.04);
  padding: 30px 28px;
}

.gs-quote-text {
  position: relative;
  padding-left: 28px;
  color: var(--gshvac-primary-dark);
  line-height: 1.65;
  margin-bottom: 18px;
  flex: 1 1 auto;
}

.gs-quote-text::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 44px;
  line-height: 1;
  color: var(--gshvac-primary);
  font-family: "Crimson Text", Georgia, serif;
}

.gs-quote-author {
  display: block;
  margin: 0;
  font-weight: 700;
  color: var(--gshvac-ink);
}

.gs-quote-company {
  display: block;
  margin: 0;
  color: var(--gshvac-accent-txt);
  font-size: 14px;
}

/* Attribution block on the home page carousel. The two lines used to sit
   loose at the foot of the card with nothing holding them; an initials disc
   gives them a fixed anchor and a second point of colour, and the hairline
   separates the attribution from the quote it belongs to.

   Scoped to .gs-quote-by so the About Us cards, which mark the same two lines
   up as bare paragraphs, are untouched. */
.gs-quote-by {
  display: flex;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid #eef1f3;
}

.gs-quote-avatar {
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 13px;
  border-radius: 50%;
  background: var(--gshvac-stone);
  color: var(--gshvac-accent-txt);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* The same disc when a headshot has been supplied instead of initials. Only
   the properties an <img> needs on top of the rule above: crop rather than
   squash a photo that is not perfectly square, and drop the type-centring
   that has nothing to left to centre. */
img.gs-quote-avatar {
  object-fit: cover;
  object-position: center top;
}

.gs-quote-meta {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}

/* The lead testimonial, given a pull-quote treatment so it reads as the
   section's headline rather than as the first of ten equal cards. */
.gs-quote-feature {
  border-left-width: 4px;
  padding: 38px 40px;
  text-align: center;
}

.gs-quote-feature .gs-quote-text {
  padding-left: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--gshvac-ink);
}

/* Centred, the hanging quote mark of the default card has nothing to hang
   off — so it sits above the text as an ornament instead. */
.gs-quote-feature .gs-quote-text::before {
  position: static;
  display: block;
  margin-bottom: -6px;
  font-size: 52px;
}

@media (min-width: 768px) {
  .gs-quote-feature {
    padding: 44px 64px;
  }
  .gs-quote-feature .gs-quote-text {
    font-size: 21px;
  }
}

/* The theme's default link grey sits around 3:1 on white — fine for a nav
   item, too light for a four-column list that is doing real navigation work. */
#industries .list-icon a {
  color: var(--gshvac-primary-dark);
}

#industries .list-icon a:hover,
#industries .list-icon a:focus {
  color: var(--gshvac-primary);
}

/* Section label above each industry column */
.gs-industry-heading {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gshvac-ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gshvac-primary);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Contact

   The address lines carried inline `white-space: nowrap`, so on a phone the
   street line could not wrap and pushed the whole document ~23px wider than
   the viewport — the page scrolled sideways and clipped every section.
   -------------------------------------------------------------------------- */

.gs-address-line {
  display: block;
  padding-left: 40px;
  white-space: normal;
}

/* Homepage contact card. Built on its own rather than on the theme's
   .contact-details so the icon column can be a real flex gutter — the theme
   floats its icons, which drops any wrapped line (the street address) back to
   x=0 underneath the marker. */
.gs-contact-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--gshvac-line);
  border-top: 3px solid var(--gshvac-primary);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(35, 42, 53, 0.04);
  padding: 30px 28px;
}

/* The two contact columns hold cards of different natural heights, so without
   a flex row the panels end on different baselines. Scoped with `>` so the
   form's own inner .row grids are left alone, and to 992px up because the
   columns are col-md-*: below that breakpoint Bootstrap gives them no width,
   and flex items with no width would shrink-wrap side by side instead of
   stacking full-bleed. */
@media (min-width: 992px) {
  #contact > .container > .row {
    display: flex;
    flex-wrap: wrap;
  }

  #contact > .container > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }
}

/* Same surface as the details panel, minus its orange top rule — two rules
   side by side would read as two competing headings. */
.gs-form-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(35, 42, 53, 0.04);
  padding: 30px 28px;
}

/* Same field treatment as the hero card, so the page has one input style
   rather than a designed one at the top and the theme default at the foot. */
.gs-form-card .form-control {
  padding: 10px 14px;
  border: 1px solid var(--gshvac-line-strong);
  border-radius: 6px;
  background-color: var(--gshvac-cream);
  color: var(--gshvac-ink);
  box-shadow: none;
}

.gs-form-card input.form-control {
  height: 46px;
}

.gs-form-card .form-control:focus {
  background-color: #fff;
  border-color: var(--gshvac-primary);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.14);
}

.gs-form-card .form-control::placeholder {
  color: #8b969d;
  opacity: 1;
}

.gs-form-card .btn {
  height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 6px;
  line-height: 46px;
}

.gs-contact-card h4,
.gs-form-card h4 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  color: var(--gshvac-ink);
}

.gs-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gs-contact-list > li {
  display: flex;
  align-items: flex-start;
  padding-bottom: 14px;
  color: var(--gshvac-primary-dark);
  line-height: 1.6;
}

.gs-contact-list > li:last-child {
  padding-bottom: 0;
}

.gs-contact-list > li > .fa {
  flex: 0 0 26px;
  margin-top: 4px;
  color: var(--gshvac-primary);
}

.gs-contact-list > li > span {
  flex: 1 1 auto;
}

.gs-contact-list a {
  color: var(--gshvac-primary-dark);
  font-weight: 600;
}

.gs-contact-list a:hover {
  color: var(--gshvac-primary);
}

/* The phone number is the one line in this panel a visitor acts on rather than
   reads, so it sits a step above the rest of the list instead of inside the
   same grey run. */
.gs-contact-list a.gs-contact-phone {
  font-size: 18px;
  font-weight: 700;
  color: var(--gshvac-ink);
}

.gs-contact-list a.gs-contact-phone:hover {
  color: var(--gshvac-primary);
}

/* Supporting link under the address. Small on purpose — it helps the people
   who want it without competing with the number above. */
.gs-contact-list a.gs-contact-sub {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--gshvac-accent-txt);
}

/* Reassurance under the submit button, matching the hero form's note. */
.gs-contact-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #586675;
}

/* Lead form captcha (includes/lead-form-security.php). Both homepage forms
   group the widget with the button in one .form-group to keep the panel
   compact, so the gap between them is set here; contact.css zeroes it where
   the widget has its own .form-group. */
.gs-captcha {
  margin-bottom: 15px;
}

/* Google renders the checkbox at a fixed 304x78 once its iframe lands.
   Reserving the height up front keeps the submit button from jumping down the
   page while the script loads. */
.gs-captcha .g-recaptcha {
  min-height: 78px;
}

.gs-captcha-error {
  margin-top: 12px;
  margin-bottom: 0;
}

/* The fixed 304px widget would overflow the narrowest form cards and take the
   page with it. Scaling from the top-left keeps it inside the card; the height
   is reset to the scaled value so the transform does not leave a gap under it. */
@media (max-width: 400px) {
  .gs-captcha .g-recaptcha {
    transform: scale(0.93);
    transform-origin: 0 0;
    min-height: 0;
    height: 73px;
  }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

/* The theme's owl init reads data-nav through jQuery .data(), so the old
   data-nav="hidden" evaluated truthy and the arrows were drawn anyway, landing
   on top of the quote text. Carousels now pass data-nav="false", which .data()
   coerces to a real boolean; this is a guard in case one is missed. */
.owl-carousel-2col .owl-nav,
.owl-carousel-3col .owl-nav {
  display: none;
}

/* With the arrows gone, the dots are the only affordance — give them room and
   the brand colour so it is obvious there is more than one quote. */
.owl-carousel-2col .owl-dots,
.owl-carousel-3col .owl-dots {
  margin-top: 30px;
  text-align: center;
}

.owl-carousel-2col .owl-dots .owl-dot span,
.owl-carousel-3col .owl-dots .owl-dot span {
  background: var(--gshvac-stone-dark);
  transition: background-color 0.2s ease;
}

.owl-carousel-2col .owl-dots .owl-dot.active span,
.owl-carousel-2col .owl-dots .owl-dot:hover span,
.owl-carousel-3col .owl-dots .owl-dot.active span,
.owl-carousel-3col .owl-dots .owl-dot:hover span {
  background: var(--gshvac-cta);
}

/* Owl sets an inline width on each .item's parent but not a height, so cards
   in the same frame end at different depths. Stretching the stage row keeps a
   short quote and a long one on the same baseline. */
.owl-carousel-2col .owl-stage,
.owl-carousel-3col .owl-stage {
  display: flex;
}

.owl-carousel-2col .owl-item,
.owl-carousel-3col .owl-item {
  display: flex;
}

.owl-carousel-2col .owl-item > .item,
.owl-carousel-3col .owl-item > .item {
  display: flex;
  width: 100%;
}

.owl-carousel-2col .owl-item .gs-quote-card,
.owl-carousel-3col .owl-item .gs-quote-card {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Careers: application form

   The only form on the site with checkboxes and a file input, both of which
   render as bare browser chrome by default — everything below the eyebrow is
   scoped to #apply so it can't leak onto any other page's form.
   -------------------------------------------------------------------------- */

/* The eyebrow is the exception: it labels a panel rather than the application
   form specifically, so the contact page's details card reuses it instead of
   declaring a second identical rule. Unscoped for that reason. */
.gs-form-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gshvac-primary);
}

#apply .gs-form-section-label {
  margin: 26px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--gshvac-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #9aa7ae;
}

/* Department: chip-style checkboxes, same raised-tile language as the
   industry tiles rather than bare browser checkboxes. */
#apply .gs-check-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#apply .gs-check-tile {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--gshvac-line);
  border-radius: 50px;
  background: #fff;
  color: var(--gshvac-primary-dark);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#apply .gs-check-tile input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--gshvac-primary);
}

#apply .gs-check-tile:hover {
  border-color: var(--gshvac-primary);
}

#apply .gs-check-tile:has(input:checked) {
  border-color: var(--gshvac-primary);
  background: var(--gshvac-cta);
  box-shadow: 0 1px 2px rgba(35, 42, 53, 0.04);
}

/* Resume upload: style the button half of the native control rather than
   replace it, so the field stays a real file input with no JS required. */
#apply input[type="file"] {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed var(--gshvac-line-strong);
  border-radius: 6px;
  background-color: var(--gshvac-cream);
  font-size: 13px;
  color: #505050;
}

#apply input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 16px;
  border: 0;
  border-radius: 5px;
  background-color: var(--gshvac-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#apply input[type="file"]::file-selector-button:hover {
  background-color: var(--gshvac-cta);
}

/* Consent: the legal copy previously ran as bare grey paragraphs with a
   default checkbox underneath each — indistinguishable from body copy. A
   tinted panel groups each notice with the checkbox it governs. */
#apply .gs-consent-box {
  padding: 18px 20px;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  background: var(--gshvac-cream);
}

#apply .gs-consent-box + .gs-consent-box {
  margin-top: 14px;
}

#apply .gs-consent-box p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #505050;
}

#apply .gs-consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gshvac-ink);
  cursor: pointer;
}

#apply .gs-consent-box input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 17px;
  height: 17px;
  accent-color: var(--gshvac-primary);
}

#apply .gs-consent-note {
  margin: 14px 2px 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a949b;
}

/* Tenure stat pulled out of the body copy so it reads as a proof point
   rather than another line of the paragraph above it. */
#apply .gs-highlight-stat {
  margin: 26px 0;
  padding: 16px 22px;
  border-left: 3px solid var(--gshvac-primary);
  border-radius: 0 8px 8px 0;
  background: var(--gshvac-cta);
  font-size: 17px;
  font-weight: 600;
  color: var(--gshvac-ink);
  line-height: 1.5;
}

#apply .gs-highlight-stat strong {
  color: var(--gshvac-primary);
}

/* The form is the page's primary conversion point, so it gets the same top
   accent treatment `.gs-contact-card` uses elsewhere — safe here because,
   unlike the contact page, nothing sits beside it that would compete with a
   second accented card. */
#apply .gs-form-card {
  border-top: 3px solid var(--gshvac-primary);
  transition: box-shadow 0.25s ease;
}

#apply .gs-form-card:hover {
  box-shadow: 0 10px 26px rgba(35, 42, 53, 0.08);
}

/* Groups "Additional Qualifications" as its own panel rather than letting it
   run on directly from the checklist above it. */
/* --------------------------------------------------------------------------
   Careers: 3-step application wizard

   14 required fields plus a resume and two consent checks in one unbroken
   scroll was the single biggest thing working against this page — long forms
   measurably lose applicants. Splitting into three short steps (Your Info /
   Role & Resume / About You) keeps every field the mailer still requires,
   just fewer of them on screen at once. JS in careers.php shows one
   .gs-form-step at a time; #apply .gs-form-step-hidden is what it toggles,
   so the form still degrades to one long page if JS fails to load.
   -------------------------------------------------------------------------- */

#apply .gs-form-step-hidden {
  display: none;
}

#apply .gs-form-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

/* Connecting line behind the three numbered circles. */
#apply .gs-form-steps::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 2px;
  background: var(--gshvac-stone);
}

#apply .gs-form-step-tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  text-align: center;
}

#apply .gs-form-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gshvac-line-strong);
  color: #8d9aa2;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#apply .gs-form-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9aa7ae;
}

#apply .gs-form-step-tab-active .gs-form-step-num {
  background: var(--gshvac-cta);
  border-color: var(--gshvac-primary);
  color: var(--gshvac-ink);
}

#apply .gs-form-step-tab-active .gs-form-step-label {
  color: var(--gshvac-ink);
}

#apply .gs-form-step-tab-done .gs-form-step-num {
  background: var(--gshvac-cta);
  border-color: var(--gshvac-primary);
  color: var(--gshvac-primary);
}

#apply .gs-form-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

#apply .gs-form-step-actions .btn {
  margin: 0;
}

/* Next/Submit always docks right, whether or not a Back button is present
   beside it. */
#apply .gs-form-step-actions [data-step-next],
#apply .gs-form-step-actions [type="submit"] {
  margin-left: auto;
}

#apply .gs-form-step-actions [data-step-back] {
  background: transparent !important;
  border: 1px solid var(--gshvac-line-strong);
  color: #505050 !important;
}

#apply .gs-form-step-actions [data-step-back]:hover {
  border-color: var(--gshvac-primary);
  color: var(--gshvac-primary) !important;
}

/* Pagination shrank the form card to roughly a third of the right column's
   height, which would otherwise strand it at the top with a long run of dead
   space beside it. Same sticky treatment as .gs-rail-wrap on Our Approach:
   the row and column are flexed so the column matches its sibling's height,
   giving the sticky card somewhere to travel as the page scrolls. */
@media (min-width: 992px) {
  #apply > .container > .row {
    display: flex;
    flex-wrap: wrap;
  }

  #apply > .container > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }

  #apply .gs-form-card {
    /* .gs-form-card's shared height:100% rule (written for the contact
       page, where two cards of similar length sit side by side) would
       otherwise stretch this card to match the flexed column above and
       leave sticky nothing to travel within. */
    height: auto;
    position: sticky;
    top: 110px;
  }
}

/* The theme's .list-icon relies purely on the icon's 5px top/bottom margin
   for vertical rhythm, so a wrapped two-line item crowds the single-line
   item right after it. */
#apply .list-icon > li {
  margin-bottom: 6px;
}

#apply .gs-quals-box {
  padding: 22px 24px;
  border: 1px solid var(--gshvac-line);
  border-radius: 8px;
  background: var(--gshvac-cream);
}

/* --------------------------------------------------------------------------
   Careers hero: quick-fact pills + CTA

   Surfaces three of the "Our SDRs" facts in the hero itself so the value
   proposition doesn't require a scroll, and gives the banner a direct path
   into the form instead of ending on a paragraph.
   -------------------------------------------------------------------------- */

.gs-hero-pills {
  list-style: none;
  margin: 28px 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.gs-hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.gs-hero-pills .fa {
  color: var(--gshvac-primary);
  font-size: 14px;
}

/* Icon tile centred over the heading, matching the service-card treatment
   used everywhere else the icon tile appears — those are all left-aligned,
   so the centring here is scoped to this text-centred combination only.

   .gs-card's own `text-align: left` and Bootstrap's .text-center are both
   single-class selectors, and this file loads after bootstrap.min.css — so
   the card won last and the copy stayed left-aligned under a centred icon.
   Restating it at .gs-card.text-center settles the tie the way the markup
   asked for. */
.gs-card.text-center {
  text-align: center;
}

.gs-card.text-center .gs-card-icon {
  align-self: center;
  margin: 0 auto;
}

/* Rated-platform strip: contained in a light panel instead of floating
   directly on the section's white background. */
.gs-logo-panel {
  padding: 28px 20px 14px;
  border: 1px solid var(--gshvac-line);
  border-radius: 12px;
  background: var(--gshvac-cream);
}

/* This page has exactly 4 Comparably badges, where the shared
   .gs-award-grid-lg's 3-across desktop layout (tuned for About Us's 9) left
   3 on one row and an orphan centred alone on the next, with a wide gap of
   dead air beside both. 4-across uses the row evenly with no leftover. */
@media (min-width: 768px) {
  .gs-trust .gs-award-grid-lg .gs-award-item {
    flex-basis: 25%;
    max-width: 25%;
  }
}

/* .gs-quote-feature centres its text, but .gs-quote-by is a flex row that
   otherwise docks left regardless of that — centre the row itself so the
   avatar and name sit under the pull-quote instead of hugging its edge. */
.gs-quote-by-feature {
  justify-content: center;
}

/* Small role badge under each testimonial quote, in place of the plain
   company line the shared .gs-quote-company carries on other pages. */
.gs-quote-role {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--gshvac-stone);
  color: var(--gshvac-accent-txt) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.testimonial .comment p {
  position: relative;
  padding-left: 28px;
}

.testimonial .comment p::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 42px;
  line-height: 1;
  color: var(--gshvac-primary);
  font-family: "Crimson Text", Georgia, serif;
}

/* --------------------------------------------------------------------------
   Footer

   The theme leaves footer copy at the global body #777, which is 2.6:1 on the
   ink panel — the washed-out look. Everything here re-establishes
   contrast, gives the three columns one shared rhythm, and brings the links
   and social row up to a real touch target.
   -------------------------------------------------------------------------- */

.footer {
  color: var(--gshvac-accent); /* 6.1:1 on the ink footer */
}

.footer a {
  color: var(--gshvac-accent); /* 6.1:1 on ink; links sit a step brighter than body copy */
  transition: color 0.2s ease;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
  color: var(--gshvac-primary);
}

/* Footer wordmark: the GenSales light-on-dark lockup, at the 216px GenSales
   runs in its own footer. width/height on the tag reserve the box;
   height:auto keeps the ratio when it shrinks below 216px. */
.footer .footer-logo {
  width: 216px;
  max-width: 100%;
  height: auto;
}

/* 18px leaves "Commercial Business Growth Partners" cramped when it wraps at
   col-md-5, so trade a point of size for line-height. */
.footer .widget-title {
  font-size: 17px;
  line-height: 1.35;
}

/* <address> is italic by UA default; it is used here for the NAP block, not
   for emphasis. */
.footer .footer-address {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 12px;
  border: 0;
}

/* The theme puts 10px margin + 10px padding on every ul.list row, which
   spreads the footer lists over far more height than they need. */
.footer .widget ul.list li {
  margin-bottom: 0;
  padding-bottom: 3px;
  line-height: 1.65;
}

/* Fixed icon column so phone/email/website text starts on one edge instead of
   drifting with each glyph's own width. */
.footer .footer-contact .fa {
  width: 18px;
  margin-right: 7px;
  text-align: center;
  color: var(--gshvac-accent);
}

/* The phone and email links are what a mobile visitor actually reaches for. */
.footer .footer-contact a {
  display: inline-block;
  padding: 5px 0;
}

/* Useful Links: the dashed #333 border the theme uses for .dark is invisible
   on teal, and the rows were 24px tall. */
.footer .list-border li {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
  padding: 0;
  margin-bottom: 0;
}

.footer .list-border li:last-child {
  border-bottom: 0;
}

.footer .list-border li a {
  display: block;
  padding: 11px 2px;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer .list-border li a:hover {
  padding-left: 6px;
}

/* Social row: the theme ships bare 32px glyphs. Circled 40px boxes with an
   8px gutter clear the 44px target and read as buttons rather than icons. */
.footer .footer-social a {
  width: 40px;
  height: 40px;
  line-height: 38px;
  margin: 0 8px 8px 0;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.35); /* 3.2:1 as a non-text boundary */
  border-radius: 50%;
  color: var(--gshvac-accent);
}

.footer .footer-social a:hover,
.footer .footer-social a:focus {
  background-color: var(--gshvac-cta);
  border-color: var(--gshvac-primary);
  color: var(--gshvac-ink);
}

.footer .footer-bottom {
  /* The bottom bar is charcoal, a step lighter than the footer above it, and
     sky lands at 4.27:1 there. --on-dark clears the floor at 6.3:1. */
  color: var(--gshvac-on-dark);
}

/* Stacked columns read as one centred block; right-aligning a single link
   under a left-aligned copyright line does not. */
@media (max-width: 767px) {
  .footer .footer-copyright,
  .footer .footer-bottom-links {
    text-align: center;
  }
  .footer .footer-bottom-links {
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   FAQ accordion (index.php)
   -------------------------------------------------------------------------- */

.gs-faq-accordion .gs-faq-item {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: none;
}

.gs-faq-accordion .panel-heading {
  background: #fff;
  border-radius: 4px;
  padding: 0;
}

.gs-faq-accordion .panel-title a {
  display: block;
  padding: 16px 20px;
  color: var(--gshvac-primary-dark);
  font-weight: 600;
  font-size: 16px;
}

.gs-faq-accordion .panel-title a:hover,
.gs-faq-accordion .panel-title a:focus {
  color: var(--gshvac-primary);
  text-decoration: none;
}

.gs-faq-accordion .panel-title a .fa {
  transition: transform 0.2s ease;
}

.gs-faq-accordion .panel-title a[aria-expanded="true"] .fa {
  transform: rotate(180deg);
}

.gs-faq-accordion .panel-body {
  padding: 0 20px 18px;
  color: var(--gshvac-primary-dark);
  line-height: 1.6;
}

/* Button-triggered variant (Our Process and the homepage). Shared here so the
   two accordions cannot drift; was scoped to .process-page in process.css. */
.gs-faq-accordion .gs-faq-item {
  border-color: var(--gshvac-line);
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(47, 85, 119, 0.045);
}

.gs-faq-accordion .panel-title button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 20px;
  text-align: left;
  color: var(--gshvac-primary-dark);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

.gs-faq-accordion .panel-title button .fa {
  color: var(--gshvac-primary);
  transition: transform 0.2s ease;
}

.gs-faq-accordion .panel-title button[aria-expanded="true"] .fa {
  transform: rotate(180deg);
}

.gs-faq-accordion .panel-collapse > .panel-body {
  border-top: 0;
  color: var(--gshvac-primary);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Careers: proportions

   Design review on /careers: the credibility artwork (award medallions, review
   logos) and the card icons were reading as the loudest things on the page,
   above the copy they exist to support, and the SDR cards were sized for a
   paragraph they do not carry. Everything below is a size cap on an existing
   component, scoped to the section that needs it, in the same idiom as the
   #apply and #proof blocks above.
   -------------------------------------------------------------------------- */

/* Medallion strip, small. The -lg variant this strip used to carry is sized
   for About Us, where the wall of nine badges IS the section; here four badges
   sit under a one-line label and 110px made them the tallest thing above the
   fold after the banner. */
.gs-award-grid-sm .gs-award-item {
  padding: 0 14px 22px;
}

.gs-award-grid-sm .gs-award-item img {
  height: 76px;
  margin-bottom: 10px;
}

/* Four badges divide as 2x2 or 4-across, never 3 — the shared basis steps to
   33.3333% at 768px, which would strand the fourth alone on a second row. */
@media (min-width: 768px) and (max-width: 991px) {
  .gs-award-grid-sm .gs-award-item {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .gs-award-grid-sm .gs-award-item img {
    height: 86px;
  }
}

/* SDR cards. .gs-card is dimensioned for a service card — icon tile, heading,
   a paragraph, a link. These carry a heading alone, so the 58px tile and the
   34px padding left each card mostly empty and made six of them a taller block
   than the section above. Sized down to sit as a label under a small mark. */
#our-sdrs .gs-card {
  justify-content: center;
  padding: 24px 20px;
}

#our-sdrs .gs-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 17px;
}

#our-sdrs .gs-card h4 {
  margin-top: 14px;
  font-size: 15px;
}

/* Testimonials. The lead quote's attribution disc is shared with the small
   cards at 42px, which reads as an afterthought under a 21px pull-quote. */
#sdr-quotes .gs-quote-feature .gs-quote-avatar {
  flex-basis: 68px;
  width: 68px;
  height: 68px;
  font-size: 22px;
}

/* .gs-quote-meta grows to fill the attribution row, which cancels the
   `justify-content: center` .gs-quote-by-feature sets: the disc stayed pinned
   to the far left edge of the pull-quote with the name floating alone in the
   middle. Sized to its content, the pair centres as one unit. */
#sdr-quotes .gs-quote-by-feature .gs-quote-meta {
  flex: 0 1 auto;
  text-align: left;
}

/* The four supporting quotes moved from a 2x2 grid to one row of four, so each
   card is roughly half its old width — the body copy and the hanging quote
   mark are stepped down to match rather than letting the cards run long. */
#sdr-quotes .gs-card-row .gs-quote-text {
  font-size: 13.5px;
  line-height: 1.6;
  padding-left: 22px;
}

#sdr-quotes .gs-card-row .gs-quote-text::before {
  font-size: 34px;
  top: -4px;
}

#sdr-quotes .gs-card-row .gs-quote-card {
  padding: 24px 22px;
}

#sdr-quotes .gs-card-row .gs-quote-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  font-size: 12px;
}

#sdr-quotes .gs-card-row .gs-quote-author {
  font-size: 14px;
}


/* --------------------------------------------------------------------------
   Dark sections

   The site alternates light and dark bands, but every dark band so far had to
   re-state the same overrides inline (text-white on the heading, and nothing
   at all for the deck, which left var(--gshvac-accent-txt) sub-headlines sitting on navy at
   about 2:1). One marker class on the <section> carries the whole treatment,
   so a dark band is declared rather than assembled.

   Pairs with the theme's own .parallax.layer-overlay.overlay-theme-colored-9
   for the ground; this only handles what sits on top of it.
   -------------------------------------------------------------------------- */

/* Deliberately scoped to the section's own heading block and to copy sitting
   directly on the band — NOT a blanket descendant rule. A dark band can carry
   light cards (the process rail and its detail panel are white), and a
   `.gs-section-dark h3` would paint those cards' headings white on white. */
.gs-section-dark .section-title .title,
.gs-section-dark > .container > .row > [class*="col-"] > h2,
.gs-section-dark > .container > .row > [class*="col-"] > h3,
.gs-section-dark > .container > .row > [class*="col-"] > h4 {
  color: #fff;
}

.gs-section-dark .section-title h3 {
  color: rgba(255, 255, 255, 0.82);
}

.gs-section-dark > .container > .row > [class*="col-"] > p {
  color: rgba(255, 255, 255, 0.85);
}

/* var(--gshvac-accent-txt) is tuned for white grounds; on navy it needs the lighter tone the
   banner and footer already use. */
.gs-section-dark .section-title .text-theme-colored2,
.gs-section-dark > .container > .row > [class*="col-"] > p .text-theme-colored2 {
  color: var(--gshvac-accent-dk) !important;
}

/* Same inversion the closing band gets: on a dark ground the theme's default
   button would otherwise read as a second orange CTA competing with the
   primary one. */
.gs-section-dark .btn-default {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.gs-section-dark .btn-default:hover,
.gs-section-dark .btn-default:focus {
  background-color: #fff;
  border-color: #fff;
  color: var(--gshvac-ink);
}

/* --------------------------------------------------------------------------
   Cards on dark sections

   Same frame as .gs-card — one radius, one padding scale, one hover — with
   the surface and type inverted, so a dark band's cards stay part of the same
   component family instead of becoming a second card style.
   -------------------------------------------------------------------------- */

.gs-card-dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.gs-card-dark:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(127, 175, 200, 0.55);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.gs-card-dark h4 {
  color: #fff;
}

.gs-card-dark p {
  color: rgba(255, 255, 255, 0.78);
}

.gs-card-dark .gs-card-icon {
  background: rgba(127, 175, 200, 0.14);
  color: var(--gshvac-accent);
}

.gs-card-dark:hover .gs-card-icon {
  background: rgba(127, 175, 200, 0.22);
}

/* --------------------------------------------------------------------------
   Stat icons

   A small tile above each figure, at roughly two-thirds the service card's
   icon size — the number is the message, the icon only labels what kind of
   number it is.
   -------------------------------------------------------------------------- */

.gs-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* .gs-stat-row makes each cell a flex column, where the parent's
     text-center no longer centres a fixed-width child. */
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gshvac-stone);
  color: var(--gshvac-accent-txt);
  font-size: 17px;
}

/* FontAwesome hard-sets `font: … 14px/1 FontAwesome` on .fa. */
.gs-stat-icon .fa {
  font-size: inherit;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Motion sensitivity
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .gs-card,
  .btn,
  .gs-card .fa,
  .gs-logo-item img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   CTA band

   The divider band treatment (navy plus the dotted call-path motif) lived only
   in css/home.css, scoped to `.home-page` — and css/home.css is loaded by the
   homepage alone. An inner page reusing `.home-growth-band` therefore got no
   background whatsoever: just the bare `.layer-overlay::before` tint over a
   transparent band, which put white banner copy on mid-grey at about 2.9:1,
   under the 4.5:1 floor. Lifting it here, unscoped, lets any page carry the
   band and keeps one definition of what the band looks like.

   css/home.css still has its own copy for `.home-growth-band` and
   `.home-calling-band`; folding those onto this class is a homepage change and
   is deliberately left out of scope here.
   -------------------------------------------------------------------------- */

.gs-cta-band {
  background-color: var(--gshvac-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 420'%3E%3Cg fill='none' stroke='%237FAFC8' stroke-width='2' stroke-linecap='round' stroke-dasharray='1 10' opacity='.35'%3E%3Cpath d='M-90 330C90 150 230 410 500 245S835 70 1010 180 1290 405 1500 145'/%3E%3Cpath d='M-100 352C80 172 235 432 510 267S840 92 1020 202 1300 427 1510 167'/%3E%3Cpath d='M-110 374C70 194 240 454 520 289S845 114 1030 224 1310 449 1520 189'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-size: cover;
}

/* The theme's default overlay is rgba(17,17,17,.5), which greys the navy out.
   A light brand-tinted scrim keeps the motif readable underneath the copy. */
.gs-cta-band:before {
  background: rgba(35, 42, 53, 0.2);
}

/* --------------------------------------------------------------------------
   Footer: four columns

   Brand / Quick Links / Our Services / Get In Touch. The NAP moves into the
   contact column, so .footer-address is now a block inside a .footer-contact
   row rather than a column-level element and needs its own inline alignment.
   -------------------------------------------------------------------------- */

.footer .footer-blurb {
  color: var(--gshvac-accent); /* 6.1:1 on the ink footer */
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 340px;
}

/* Fixed icon column. Inline-block plus a calc() width does not survive the
   whitespace between the glyph and the block that follows it — the three
   address lines wrapped back underneath the map marker. A flex row gives the
   same 18px gutter without depending on the source whitespace, and lines the
   email and phone rows up on the same edge. */
.footer .footer-contact > li {
  display: flex;
}

.footer .footer-contact > li > .fa {
  flex: 0 0 18px;
  /* Cancels the 5px the links carry, so glyph and label share a baseline. */
  padding-top: 5px;
}

.footer .footer-contact .footer-address {
  flex: 1 1 auto;
  margin-bottom: 0;
  min-width: 0;
  padding-top: 5px;
}