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

/* Brand palette (2026 guide), ink-led: ink (--black), cream, stone (--ice),
   steel (--sky), deep blue (--primary), yellow (--orange).
   Ink and the two warm neutrals carry the site; the page alternates cream and
   stone bands with solid ink anchor sections. Steel is the brand blue from the
   logo, but the guide never fills an area with it — it is type, stroke, icon
   and graphic accent only, plus text on dark bands (6.2:1). It is 2.4:1 on
   light grounds, so text-level blue on light is deep blue, which is why that
   token is still named --primary. Yellow is reserved for primary CTA buttons
   and always carries ink text; nothing decorative uses it.
   --gensales-ice keeps its name (≈67 call sites) but is no longer a blue tint:
   it is now the warm stone band. --line is the one neutral hairline, replacing
   ~30 near-duplicate blue borders. --on-dark is body copy on ink (9.3:1). */
:root {
  --gensales-primary: #2F5577;
  --gensales-primary-dark: #1F3D57;
  --gensales-sky: #7FAFC8;
  --gensales-black: #232A35;
  --gensales-charcoal: #3A4250;
  --gensales-white: #FFFFFF;
  --gensales-ice: #ECEAE4;
  --gensales-ice-dark: #E2DFD7;
  --gensales-cream: #F7F6F1;
  --gensales-line: #DFDCD4;
  --gensales-line-strong: #C9C5BA;
  --gensales-on-dark: #C7CDD6;
  --gensales-orange: #F2C94C;
  --gensales-orange-dark: #E0B432;
}

html {
  scroll-behavior: smooth;
}

/* The theme and menuzord paint these white; the brand ground is cream. */
body,
.bg-white,
.menuzord,
.menuzord-menu > li > .megamenu,
.menuzord-menu ul.dropdown {
  background-color: var(--gensales-cream);
}

.bg-white {
  background-color: var(--gensales-cream) !important;
}

/* The theme's body copy (#777) and bare links (#999) are 4.1:1 and 2.6:1 on
   cream. Same specificity as the theme's rules, so any classed text or link
   keeps its own colour. */
body {
  color: #56646e;
}

a {
  color: var(--gensales-primary);
}

a:hover,
a:focus {
  color: var(--gensales-primary-dark);
}

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

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

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

  /* Seven items plus a CTA is a lot for Bootstrap's 1170px container, so the
     desktop nav runs at 13px with tight gutters to keep everything on one
     row without the CTA spilling past the container edge. Padding plus gap
     puts ~24px between labels — a readable cluster, and far less than the
     ~44px the theme's own margins produced. */
  .menuzord-menu > li > a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  #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(--gensales-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(--gensales-charcoal);
  }

  /* Two classes so the ink text beats `.gs-sticky-cta > a { color: #fff }`;
     white on yellow is 1.6:1. */
  .gs-sticky-cta > .gs-sticky-cta-schedule,
  .gs-sticky-cta > .gs-sticky-cta-schedule:hover,
  .gs-sticky-cta > .gs-sticky-cta-schedule:focus {
    background-color: var(--gensales-orange);
    color: var(--gensales-black);
  }

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

  .gs-sticky-cta-call:hover,
  .gs-sticky-cta-call:focus,
  .gs-sticky-cta-schedule:hover,
  .gs-sticky-cta-schedule:focus {
    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: 6px;
    padding-right: 6px;
  }
  /* The GS logo is wider than the old wordmark-only mark, and the seven-item
     row first goes horizontal at ~1008px with very little room to spare. Buy
     the space back from the brand gutter rather than by shrinking the logo. */
  #menuzord .menuzord-brand {
    margin-right: 24px;
  }
}

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

/* Standalone CTA button */
.gs-nav-cta {
  display: inline-block;
  background-color: var(--gensales-orange);
  color: var(--gensales-black);
  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(--gensales-orange-dark);
  color: var(--gensales-black);
  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;
  }
  /* style.min.css fills the last menu item #ff5722; this is that item. */
  .menuzord-responsive .menuzord-menu > li.gs-nav-cta-mobile > a,
  .menuzord-responsive .menuzord-menu > li.gs-nav-cta-mobile > a:hover,
  .menuzord-responsive .menuzord-menu > li.gs-nav-cta-mobile > a:focus {
    background-color: var(--gensales-orange);
    color: var(--gensales-black);
    font-weight: 700;
  }
}

/* The full logo carries the "We Open. You Close." tagline under the wordmark,
   so it is ~19% taller per unit of wordmark than the plain lockup was. Sized
   here and nowhere else: every earlier copy of this rule sat above the file's
   base declaration at the same specificity and was overridden by it. */
.menuzord .nav-logo {
  max-height: 49px;
  width: auto;
}

@media (min-width: 1200px) {
  .menuzord .nav-logo {
    max-height: 51px;
  }
}

/* Between 901px and 1199px the seven-item row has almost no slack, so the
   logo runs at the width the old lockup occupied rather than its own. */
@media (min-width: 901px) and (max-width: 1199px) {
  .menuzord .nav-logo {
    max-height: 44px;
  }
}

@media (min-width: 901px) and (max-width: 991px) {
  .menuzord .nav-logo {
    max-height: 43px;
  }
}

.menuzord-menu > li > a {
  transition: color 0.2s ease;
}

/* --------------------------------------------------------------------------
   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 in the GenSales orange instead, which
   matches the nav CTA and the blog category pills.

   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(--gensales-black);
  font-weight: 700;
}

/* The skin fills every hovered item #6890a2; repaint it in brand ink, which
   carries cream text (ink on steel was the old pairing). */
.menuzord.default .menuzord-menu > li:hover > a,
.menuzord.default .menuzord-menu ul.dropdown li:hover > a,
.menuzord.default .menuzord-menu > li.active:hover > a {
  background: var(--gensales-black);
  color: var(--gensales-cream);
}

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

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

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

  /* The brand and the toggle are floated left/right, so the toggle drops to its
     own row the moment they cannot share the line. The GS logo is ~220px at
     the 49px height cap, which a 320px viewport still cannot hold beside a
     60px toggle. Cap the logo against the viewport so it scales down instead
     of wrapping; max-height still governs once there is room. */
  .menuzord-responsive .nav-logo {
    max-width: calc(100vw - 120px);
  }
}

/* --------------------------------------------------------------------------
   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: var(--gensales-cream);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.gs-announce-head {
  margin: 0;
  padding: 13px 20px;
  background: var(--gensales-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(--gensales-black);
  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 steel, 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: var(--gensales-sky);
  color: var(--gensales-black);
  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(--gensales-sky);
  color: var(--gensales-black);
  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: var(--gensales-cream);
  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(--gensales-black);
}

.gs-hero-form-lead {
  margin: 0 0 22px;
  color: #62707a;
  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(--gensales-line);
  border-radius: 6px;
  background-color: var(--gensales-white);
  color: var(--gensales-black);
  box-shadow: none;
}

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

.gs-hero-form .form-control::placeholder {
  color: #62707a;
  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: #56646e;
  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(--gensales-ice);
  border-bottom: 1px solid var(--gensales-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;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #56646e;
}

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

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

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


/* --------------------------------------------------------------------------
   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. The marks carry their own brand colour: several of
   them (Comcast Business, Google, Clutch, BBB) use colour to separate the
   wordmark from its device, and greyscaling the row cost more legibility than
   the calmer palette was worth.
   -------------------------------------------------------------------------- */

.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: 74px;
  padding: 0 16px;
  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;
}

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

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

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

@media (min-width: 992px) {
  .gs-logo-item {
    flex-basis: 12.5%;
    max-width: 12.5%;
    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%;
  }
}


/* --------------------------------------------------------------------------
   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: var(--gensales-cream);
}

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

/* 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(--gensales-line);
  border-radius: 8px;
  background: var(--gensales-cream);
  color: var(--gensales-black);
  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: var(--gensales-cream);
  color: var(--gensales-black);
  box-shadow: 0 8px 20px rgba(31, 36, 39, 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(--gensales-ice);
  color: var(--gensales-primary);
  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(--gensales-black);
  color: var(--gensales-white);
}

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

/* --------------------------------------------------------------------------
   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(--gensales-black);
  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.08) 0%,
      rgba(242, 201, 76, 0) 68%
    ),
    radial-gradient(
      820px 520px at 4% 96%,
      rgba(127, 175, 200, 0.3) 0%,
      rgba(127, 175, 200, 0) 70%
    ),
    linear-gradient(
      104deg,
      rgba(12, 19, 25, 0.95) 0%,
      rgba(12, 19, 25, 0.9) 42%,
      rgba(12, 19, 25, 0.74) 78%,
      rgba(12, 19, 25, 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.08) 0%,
        rgba(242, 201, 76, 0) 70%
      ),
      linear-gradient(
        180deg,
        rgba(12, 19, 25, 0.93) 0%,
        rgba(12, 19, 25, 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: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(31, 36, 39, 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(31, 36, 39, 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(--gensales-cream);
  color: var(--gensales-primary);
  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(--gensales-ice-dark);
}

.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: #62707a;
  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(--gensales-black);
  border-color: var(--gensales-black);
  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(--gensales-black);
}

/* 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(--gensales-black);
  color: var(--gensales-cream);
  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(--gensales-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(--gensales-black);
}

/* 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".
   -------------------------------------------------------------------------- */

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

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

/* Yellow marks a conversion action, not every button. A button earns it by
   asking for the meeting — linking to contact, jumping to the apply form,
   opening the booking page, or submitting a form. Buttons that merely move you
   to another page (Our Approach, Industries, Visit the Blog) stay deep blue,
   which is what keeps the site from reading as all-yellow.

   The last four selectors are the on-ink exception: a navigation button on a
   dark band would vanish in deep blue, so it takes the yellow back. */
.btn-custom[href*="contact"],
.btn-custom[href*="#apply"],
.btn-custom[href*="tidycal"],
button.btn-custom,
input.btn-custom,
.gs-contact-cta,
.layer-overlay .btn-custom,
.b2b-band-dark .btn-custom,
.industries-market-band .btn-custom,
.gs-band-solid .btn-custom {
  background-color: var(--gensales-orange) !important;
  border-color: var(--gensales-orange) !important;
  color: var(--gensales-black) !important;
}

.btn-custom[href*="contact"]:hover,
.btn-custom[href*="contact"]:focus,
.btn-custom[href*="#apply"]:hover,
.btn-custom[href*="#apply"]:focus,
.btn-custom[href*="tidycal"]:hover,
.btn-custom[href*="tidycal"]:focus,
button.btn-custom:hover,
button.btn-custom:focus,
input.btn-custom:hover,
input.btn-custom:focus,
.gs-contact-cta:hover,
.gs-contact-cta:focus,
.layer-overlay .btn-custom:hover,
.layer-overlay .btn-custom:focus,
.b2b-band-dark .btn-custom:hover,
.b2b-band-dark .btn-custom:focus,
.industries-market-band .btn-custom:hover,
.industries-market-band .btn-custom:focus,
.gs-band-solid .btn-custom:hover,
.gs-band-solid .btn-custom:focus {
  background-color: var(--gensales-orange-dark) !important;
  border-color: var(--gensales-orange-dark) !important;
  color: var(--gensales-black) !important;
}

/* Inner-page hero CTA: ink rather than yellow.

   `.inner-header` is the hero on b2b, industries, our-approach, about,
   careers and blog-post. It is deliberately narrower than `.layer-overlay`,
   which also matches the homepage growth band and the about parallax band —
   those are mid-page, not heroes, and keep the yellow.

   Deep blue on a dark hero photo is only ~2.5:1 against the scrim, so unlike
   the same button on a light band this one keeps a light border to hold its
   edge. Equal specificity to the yellow rules above (0,2,0), so this has to
   stay after them to win. */
.inner-header .btn-custom,
.inner-header .btn-custom:link,
.inner-header .btn-custom:visited {
  background-color: var(--gensales-primary) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: var(--gensales-white) !important;
}

.inner-header .btn-custom:hover,
.inner-header .btn-custom:focus,
.inner-header .btn-custom:active {
  background-color: var(--gensales-primary-dark) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  color: var(--gensales-white) !important;
}

/* Homepage hero CTA: deep blue, matching the inner-page heroes above and the
   navigation buttons elsewhere on the site.

   Unlike those, this one sits on the cream form card rather than on the hero
   photo, so it needs no border — deep blue on cream 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 "Schedule a Call" is a separate
   component (.gs-nav-cta) and stays yellow. */
.gs-hero-form .btn-custom,
.gs-hero-form .btn-custom:link,
.gs-hero-form .btn-custom:visited {
  background-color: var(--gensales-primary) !important;
  border-color: var(--gensales-primary) !important;
  color: var(--gensales-white) !important;
}

.gs-hero-form .btn-custom:hover,
.gs-hero-form .btn-custom:focus,
.gs-hero-form .btn-custom:active {
  background-color: var(--gensales-primary-dark) !important;
  border-color: var(--gensales-primary-dark) !important;
  color: var(--gensales-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: var(--gensales-cream);
  border-color: #fff;
  color: var(--gensales-black);
}

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

/* The theme skin paints this #6890a2 (~4.0:1 on white). Brand primary
   keeps the hue and clears 4.5:1. */
.text-theme-colored2 {
  color: var(--gensales-primary) !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,
[class*="overlay-theme-colored"] .text-theme-colored2,
.gs-band-solid .text-theme-colored2,
.text-white .text-theme-colored2,
.banner-text .text-theme-colored2,
.header-big-text .text-theme-colored2,
.footer .text-theme-colored2 {
  color: var(--gensales-sky) !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(--gensales-primary);
  outline-offset: 2px;
}

/* Skip link (markup in header.php).

   Bootstrap's .sr-only-focusable reveals the link by returning it to the normal
   flow — `position: static` — which shoves the whole page down by the height of
   the link the moment it takes focus. Pinning it over the header instead keeps
   the layout still, so `position` has to beat that rule rather than merely
   follow it. The !important on the outline is the same workaround used by
   .gs-rail-item and the footer links further down this file: style-main carries
   a blanket `:active,:focus{outline:0 !important}` that kills any plain outline.
   z-index clears the sticky mobile CTA, which sits at 9000. */
.gs-skip-link:focus {
  position: absolute !important;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--gensales-black);
  color: var(--gensales-cream);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid var(--gensales-orange) !important;
  outline-offset: 2px;
}

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

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

.form-control:focus {
  border-color: var(--gensales-primary);
  box-shadow: 0 0 0 3px rgba(47, 85, 119, 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(--gensales-line);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gensales-primary);
  background: var(--gensales-ice);
  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(--gensales-ice-dark);
  color: var(--gensales-black);
  text-decoration: none;
}

.gs-cat-filter a.active {
  background: var(--gensales-black);
  border-color: var(--gensales-black);
  color: var(--gensales-cream);
}

.gs-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(31, 36, 39, 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(31, 36, 39, 0.12);
}

.gs-post-thumb {
  display: block;
  overflow: hidden;
  background: var(--gensales-black);
  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(--gensales-primary);
  margin-bottom: 10px;
}

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

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

.gs-post-title a {
  color: var(--gensales-black);
}

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

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

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

.gs-post-more {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  color: var(--gensales-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(--gensales-black);
  font-weight: 500;
  padding-left: 18px;
  border-left: 3px solid var(--gensales-black);
  margin-bottom: 26px;
}

.gs-article p {
  overflow-wrap: break-word;
  color: var(--gensales-charcoal);
  line-height: 1.75;
  margin-bottom: 18px;
  font-size: 16px;
  text-align: left;
}

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

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

/* --------------------------------------------------------------------------
   Blog index — pager (blog.php)
   -------------------------------------------------------------------------- */

.gs-pager {
  margin-top: 10px;
  text-align: center;
}

.gs-pager-count {
  margin: 0 0 14px;
  font-size: 14px;
  color: #56646e;
}

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

.gs-pager-list li {
  margin: 0;
}

.gs-pager-list a,
.gs-pager-now,
.gs-pager-off,
.gs-pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  text-decoration: none;
}

.gs-pager-list a {
  color: var(--gensales-primary);
  background: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
}

.gs-pager-list a:hover,
.gs-pager-list a:focus {
  background: var(--gensales-ice-dark);
  color: var(--gensales-primary-dark);
  border-color: var(--gensales-line-strong);
}

.gs-pager-list a:focus-visible {
  outline: 3px solid var(--gensales-primary);
  outline-offset: 2px;
}

/* Current page: ink on yellow, the one place the CTA colour is allowed. */
.gs-pager-now {
  background: var(--gensales-orange);
  border: 1px solid var(--gensales-orange-dark);
  color: var(--gensales-black);
}

.gs-pager-off {
  background: transparent;
  border: 1px solid var(--gensales-line);
  color: var(--gensales-line-strong);
}

.gs-pager-gap {
  min-width: 24px;
  padding: 0 2px;
  color: var(--gensales-line-strong);
}

@media (max-width: 480px) {
  .gs-pager-list {
    gap: 4px;
  }
  .gs-pager-list a,
  .gs-pager-now,
  .gs-pager-off {
    min-width: 44px;
    padding: 0 8px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Blog article — CMS (WYSIWYG) content
   The editor in blog-cms.php can emit headings, lists, quotes, code, rules and
   links, none of which .gs-article styled when posts were plain paragraphs.
   -------------------------------------------------------------------------- */

.gs-article h2,
.gs-article h3,
.gs-article h4 {
  color: var(--gensales-black);
  line-height: 1.3;
  margin: 38px 0 14px;
}

.gs-article h2 { font-size: 26px; }
.gs-article h3 { font-size: 21px; }
.gs-article h4 { font-size: 18px; }

.gs-article > *:first-child { margin-top: 0; }

.gs-article ul,
.gs-article ol {
  color: var(--gensales-charcoal);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 18px;
  padding-left: 24px;
}

.gs-article li { margin-bottom: 8px; }
.gs-article li > ul,
.gs-article li > ol { margin: 8px 0 0; }

.gs-article a {
  color: var(--gensales-primary);
  text-decoration: underline;
  /* Some imported citations use a 300-character URL as the link text, which
     would push the article wider than a phone screen. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.gs-article a:hover,
.gs-article a:focus { color: var(--gensales-primary-dark); }

.gs-article strong { color: var(--gensales-black); font-weight: 600; }

.gs-article blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gensales-primary);
  font-size: 18px;
  line-height: 1.65;
  font-style: italic;
  color: var(--gensales-charcoal);
}

.gs-article blockquote p:last-child { margin-bottom: 0; }

.gs-article pre {
  background: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  color: var(--gensales-black);
}

.gs-article code {
  background: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 14px;
  color: var(--gensales-black);
}

.gs-article pre code { background: none; border: 0; padding: 0; }

.gs-article hr {
  border: 0;
  border-top: 1px solid var(--gensales-line-strong);
  margin: 32px 0;
}

.gs-article img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 8px 0 18px;
}

/* Tables. ~20 imported articles carry comparison tables; the wrapper is added
   by tools/blog-import.php because the body is stored content. */
.gs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 22px;
  border: 1px solid var(--gensales-line);
  border-radius: 4px;
}

.gs-article table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
}

.gs-article th,
.gs-article td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gensales-line);
  line-height: 1.6;
}

.gs-article th {
  background: var(--gensales-ice);
  color: var(--gensales-black);
  font-weight: 600;
  white-space: nowrap;
}

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

.gs-article tbody tr:nth-child(even) td {
  background: var(--gensales-cream);
}

/* TL;DR box, above the article body. */
.gs-article-summary {
  background: var(--gensales-ice);
  border-left: 3px solid var(--gensales-black);
  border-radius: 0 6px 6px 0;
  padding: 20px 22px;
  margin: 0 0 28px;
}

.gs-article-summary-h {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gensales-black);
}

.gs-article-summary p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gensales-charcoal);
}

/* --------------------------------------------------------------------------
   Blog article — FAQ accordion (js/blog-faq.js)
   -------------------------------------------------------------------------- */

.gs-faq { margin-top: 42px; }

.gs-faq-title {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gensales-black);
  margin: 0 0 18px;
}

.gs-faq-item {
  border-bottom: 1px solid var(--gensales-line);
}

.gs-faq-item:first-of-type { border-top: 1px solid var(--gensales-line); }

.gs-faq-q { margin: 0; font-size: inherit; font-weight: inherit; }

.gs-faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 16px 4px;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--gensales-black);
  cursor: pointer;
}

.gs-faq-btn:hover { color: var(--gensales-primary-dark); }

.gs-faq-btn:focus-visible {
  outline: 3px solid var(--gensales-primary);
  outline-offset: -3px;
}

.gs-faq-btn .fa {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--gensales-primary);
  transition: transform .18s ease;
}

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

.gs-faq-a { padding: 0 4px 18px; }

.gs-faq-a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gensales-charcoal);
}

/* --------------------------------------------------------------------------
   Blog CMS preview bar (blog-post.php?preview=<id>)
   Only ever rendered for a signed-in CMS user.
   -------------------------------------------------------------------------- */

.gs-preview-bar {
  background: var(--gensales-black);
  color: var(--gensales-on-dark);
  padding: 12px 0;
}

.gs-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.gs-preview-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.gs-preview-status strong {
  color: var(--gensales-orange);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.gs-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.gs-preview-actions form { margin: 0; }

.gs-preview-reject {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gs-preview-reject input[type="text"] {
  min-height: 44px;
  min-width: 190px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--gensales-black);
  background: #fff;
  border: 1px solid var(--gensales-line-strong);
  border-radius: 4px;
}

.gs-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--gensales-on-dark);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
  cursor: pointer;
}

.gs-preview-btn:hover,
.gs-preview-btn:focus {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.gs-preview-btn:focus-visible {
  outline: 3px solid var(--gensales-orange);
  outline-offset: 2px;
}

.gs-preview-btn-go {
  background: var(--gensales-orange);
  border-color: var(--gensales-orange-dark);
  color: var(--gensales-black);
}

.gs-preview-btn-go:hover,
.gs-preview-btn-go:focus {
  background: var(--gensales-orange-dark);
  color: var(--gensales-black);
}

.gs-preview-btn-back {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

@media (max-width: 767px) {
  .gs-article h2 { font-size: 22px; }
  .gs-article h3 { font-size: 19px; }
  .gs-article blockquote { font-size: 16px; padding-left: 15px; }
  .gs-article-summary { padding: 16px 18px; }
  .gs-faq-btn { font-size: 16px; padding: 14px 2px; }
  .gs-faq-title { font-size: 19px; }

  .gs-preview-row { align-items: stretch; }
  .gs-preview-actions { flex-direction: column; align-items: stretch; }
  .gs-preview-reject { flex-direction: column; align-items: stretch; }
  .gs-preview-reject input[type="text"] { min-width: 0; width: 100%; }
  .gs-preview-btn { width: 100%; }
}

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

/* --------------------------------------------------------------------------
   Our Approach — the six-stage process

   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(--gensales-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 — see the section comment in our-approach.php.

   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(--gensales-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(--gensales-black);
}

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

.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. Same workaround as the
   footer link ring further down this file. */
.gs-rail-item:focus-visible {
  outline: 2px solid var(--gensales-orange) !important;
  outline-offset: 2px;
}

.gs-rail-marker {
  position: absolute;
  left: 0;
  top: 22px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gensales-sky);
  border-radius: 50%;
  background: var(--gensales-black);
  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(--gensales-sky);
  transition: color 0.18s ease;
}

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

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

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

.gs-rail-active .gs-rail-marker {
  top: 19px;
  background: var(--gensales-sky);
  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(--gensales-white);
}

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

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

.gs-panel {
  display: none;
  flex-direction: column;
  background: var(--gensales-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(--gensales-primary);
}

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

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

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

.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(--gensales-sky);
  border-radius: 50%;
  background: var(--gensales-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(--gensales-primary);
  color: var(--gensales-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(--gensales-black);
  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(--gensales-sky);
}

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

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

button.gs-tl-item:focus-visible {
  outline: 2px solid var(--gensales-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(--gensales-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(--gensales-black);
}

.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(--gensales-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(--gensales-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(--gensales-primary);
  color: var(--gensales-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  vertical-align: middle;
}

.gs-grade-b {
  background: var(--gensales-sky);
  color: var(--gensales-black);
}

.gs-grade-c {
  background: var(--gensales-orange);
  color: var(--gensales-black);
}

/* 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(--gensales-line-strong);
  color: var(--gensales-black);
}

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

/* 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(--gensales-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(--gensales-sky);
  color: var(--gensales-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(--gensales-black);
}

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

.gs-dm-record {
  list-style: none;
  margin: 0 0 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--gensales-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(--gensales-sky);
  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(--gensales-black);
}

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

/* The two touchpoint facts rescued from the SALT CRM screenshot. .gs-stat is
   sized for the full-width overview strip and is far too large inside a panel,
   so this scopes the same idea down rather than duplicating the component. */
.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(--gensales-line);
  border-radius: 8px;
  background: var(--gensales-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(--gensales-primary);
}

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

/* Stage 6: the sample funnel, rebuilt as bars because the SALT original is a
   screenshot carrying the SALT logo. Nothing comparable exists in the theme. */
.gs-funnel-figure {
  margin: 24px 0 0;
}

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

.gs-funnel li + li {
  margin-top: 10px;
}

/* Label and count share a line above the bar. Keeping the count out of the bar
   is what lets the bar stay proportional: the final stage is ~1% of the first,
   and a bar wide enough to hold "21" would have to be ten times its true
   length. */
.gs-funnel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
}

.gs-funnel-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gensales-black);
}

.gs-funnel-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gensales-primary);
}

.gs-funnel-track {
  display: block;
  border-radius: 4px;
  background: var(--gensales-ice);
}

/* 2px keeps the smallest stage visible as a mark rather than rounding away. */
.gs-funnel-bar {
  display: block;
  min-width: 2px;
  height: 10px;
  border-radius: 4px;
  background: var(--gensales-primary);
}

.gs-funnel-figure figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  font-style: italic;
  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(--gensales-line);
  background: var(--gensales-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(--gensales-primary);
}

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

.gs-panel-next:hover {
  color: var(--gensales-black);
}

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

/* Callout for the expanded SALT capabilities note */
.gs-capability-note {
  background: var(--gensales-cream);
  border: 1px solid var(--gensales-line);
  border-left: 4px solid var(--gensales-black);
  border-radius: 4px;
  padding: 20px 24px;
  color: var(--gensales-charcoal);
  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(--gensales-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(--gensales-black);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--gensales-black);
}

/* 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: var(--gensales-cream);
  border: 1px solid var(--gensales-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(--gensales-line);
}

.gs-compare thead th:first-child {
  color: #56646e;
  background: var(--gensales-ice);
}

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

.gs-compare td {
  padding: 14px 20px;
  font-size: 15px;
  border-bottom: 1px solid var(--gensales-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: #62707a;
}

.gs-compare td:last-child {
  color: var(--gensales-black);
  font-weight: 600;
  background: var(--gensales-ice);
}

.gs-compare td:last-child .fa {
  color: var(--gensales-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: #62707a;
}

/* 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(--gensales-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: #56646e;
    margin-bottom: 4px;
  }

  .gs-compare td:last-child::before {
    color: var(--gensales-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: var(--gensales-cream);
  border: 1px solid var(--gensales-line);
  border-left: 3px solid var(--gensales-primary);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(31, 36, 39, 0.04);
  padding: 30px 28px;
}

.gs-quote-text {
  position: relative;
  padding-left: 28px;
  color: var(--gensales-charcoal);
  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(--gensales-primary);
  font-family: Georgia, serif;
}

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

.gs-quote-company {
  display: block;
  margin: 0;
  color: var(--gensales-primary);
  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 var(--gensales-line);
}

.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(--gensales-ice);
  color: var(--gensales-primary);
  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(--gensales-black);
}

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

#industries .list-icon a:hover,
#industries .list-icon a:focus {
  color: var(--gensales-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(--gensales-black);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gensales-black);
  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: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
  border-top: 3px solid var(--gensales-sky);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(31, 36, 39, 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: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(31, 36, 39, 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(--gensales-line);
  border-radius: 6px;
  background-color: var(--gensales-white);
  color: var(--gensales-black);
  box-shadow: none;
}

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

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

.gs-form-card .form-control::placeholder {
  color: #62707a;
  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(--gensales-black);
}

.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(--gensales-charcoal);
  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(--gensales-primary);
}

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

.gs-contact-list a {
  color: var(--gensales-charcoal);
  font-weight: 600;
}

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

/* --------------------------------------------------------------------------
   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(--gensales-line-strong);
  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(--gensales-black);
}

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

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

/* 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(--gensales-line);
  border-radius: 50px;
  background: var(--gensales-cream);
  color: var(--gensales-charcoal);
  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(--gensales-primary);
}

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

#apply .gs-check-tile:has(input:checked) {
  border-color: var(--gensales-primary);
  background: var(--gensales-ice);
  box-shadow: 0 1px 2px rgba(31, 36, 39, 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(--gensales-line);
  border-radius: 6px;
  background-color: var(--gensales-white);
  font-size: 13px;
  color: #62707a;
}

#apply input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 16px;
  border: 0;
  border-radius: 5px;
  background-color: var(--gensales-black);
  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(--gensales-black);
  color: var(--gensales-cream);
}

/* 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(--gensales-black);
  border-radius: 0 8px 8px 0;
  background: var(--gensales-ice);
  font-size: 17px;
  font-weight: 600;
  color: var(--gensales-black);
  line-height: 1.5;
}

#apply .gs-highlight-stat strong {
  color: var(--gensales-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(--gensales-black);
  transition: box-shadow 0.25s ease;
}

#apply .gs-form-card:hover {
  box-shadow: 0 10px 26px rgba(31, 36, 39, 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 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(--gensales-line);
}

#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: var(--gensales-cream);
  border: 2px solid var(--gensales-line);
  color: #62707a;
  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: #56646e;
}

#apply .gs-form-step-tab-active .gs-form-step-num {
  background: var(--gensales-black);
  border-color: var(--gensales-black);
  color: var(--gensales-cream);
}

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

#apply .gs-form-step-tab-done .gs-form-step-num {
  background: var(--gensales-ice);
  border-color: var(--gensales-primary);
  color: var(--gensales-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(--gensales-line);
  color: #62707a !important;
}

#apply .gs-form-step-actions [data-step-back]:hover {
  border-color: var(--gensales-black);
  color: var(--gensales-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(--gensales-line);
  border-radius: 8px;
  background: var(--gensales-ice);
}

/* --------------------------------------------------------------------------
   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(--gensales-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(--gensales-line);
  border-radius: 12px;
  background: var(--gensales-ice);
}

/* 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(--gensales-ice);
  color: var(--gensales-primary) !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(--gensales-sky);
  font-family: Georgia, serif;
}

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

   The theme footer is flat #151515 with #808080 text — about 3.7:1, under the
   4.5:1 floor, and off-brand. This is the navy treatment: a diagonal gradient
   lit from the top right, a decorative wave (images/footer-wave.svg) low in
   the panel, and a cyan hairline along the top edge.

   Note the background lives here rather than on a data-bg-color attribute:
   custom.js applies that attribute as inline `background: <color> !important`
   (js/custom.js), a shorthand that would wipe the gradient and the wave.
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  color: var(--gensales-on-dark);
  background-color: var(--gensales-black);
  background-image: url("../images/footer-wave.svg"),
    linear-gradient(115deg, var(--gensales-black) 0%, var(--gensales-black) 42%, var(--gensales-primary-dark) 72%, var(--gensales-primary) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, center center;
  background-size: 100% 100%, cover;
}

/* Cyan hairline across the top edge, brightest left of centre. */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(127, 175, 200, 0) 0%, var(--gensales-sky) 22%, #b9d4e2 45%, rgba(127, 175, 200, 0.35) 75%, rgba(127, 175, 200, 0) 100%);
}

.footer a {
  color: var(--gensales-on-dark);
  transition: color 0.2s ease;
}

.footer a:focus,
.footer a:hover,
.footer a:active {
  color: #fff;
}

/* --- Column headings ---------------------------------------------------- */

/* Reuses the theme's line-bottom-theme-colored2 bar and restyles it: the
   skin's muted tone is invisible on navy, and the reference sets these in
   spaced caps rather than the theme's sentence case. */
.footer .gs-footer-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 26px;
  padding-bottom: 16px;
}

.footer .gs-footer-title::after {
  background-color: var(--gensales-sky);
  width: 48px;
  height: 3px;
}

/* The tagline under the logo reads as a kicker, not a column head. */
.footer .gs-footer-title-sm {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--gensales-on-dark);
  margin-bottom: 30px;
}

.footer .gs-footer-logo {
  display: block;
  width: 100%;
  max-width: 225px;
  height: auto;
  margin-bottom: 22px;
}

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

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

.gs-footer-contact > li {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.gs-footer-contact > li:last-child {
  margin-bottom: 0;
}

/* A fixed tile keeps the address, phone and email text on one left edge no
   matter how tall each row runs. */
.gs-footer-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 16px;
  border-radius: 50%;
  background-color: rgba(127, 175, 200, 0.16);
  border: 1px solid rgba(127, 175, 200, 0.3);
  color: #fff;
}

.gs-footer-icon .fa {
  font-size: 16px;
  line-height: 1;
}

/* <address> italicises by default in every browser. */
.gs-footer-address {
  font-style: normal;
  line-height: 1.7;
  margin: 0;
}

.gs-footer-tagline {
  line-height: 1.75;
  margin-bottom: 26px;
  max-width: 30em;
}

/* --- Useful links ------------------------------------------------------- */

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

.gs-footer-links li + li a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Full-row links: the whole 46px band is the target, and the chevron sits
   hard right regardless of label length. Replaces the per-<li> inline
   padding, which gave a ~31px target. */
.gs-footer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.gs-footer-links a .fa {
  font-size: 12px;
  color: var(--gensales-sky);
  transition: transform 0.2s ease;
}

.gs-footer-links a:hover {
  padding-left: 6px;
}

.gs-footer-links a:hover .fa {
  transform: translateX(3px);
}

/* --- Column dividers ---------------------------------------------------- */

/* Hairlines between columns, faded at both ends so they read as separators
   rather than a table. Only where the columns actually sit side by side. */
@media (min-width: 992px) {
  .gs-footer-col + .gs-footer-col {
    position: relative;
  }

  .gs-footer-col + .gs-footer-col::before {
    content: "";
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.12) 82%, rgba(255, 255, 255, 0));
  }

  .gs-footer-col + .gs-footer-col .widget {
    padding-left: 30px;
  }
}

/* --- Bottom bar --------------------------------------------------------- */

.footer .footer-bottom {
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gs-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.gs-footer-legal {
  padding-left: 0;
}

/* The short rule left of the legal links, as in the reference. */
.gs-footer-legal > li {
  position: relative;
  padding-left: 26px;
}

.gs-footer-legal > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 18px;
  margin-top: -9px;
  background-color: rgba(255, 255, 255, 0.18);
}

/* --- Responsive --------------------------------------------------------- */

/* Bootstrap 3's .text-right is not responsive, so the legal link stayed hard
   right under the copyright once the two columns stacked. (The theme's own
   .sm-text-center cannot help: utility-classes.css writes its media queries
   as `and(max-width:991px)` with no space, which is invalid, so none of the
   sm-* or xs-* utilities apply anywhere on the site.) */
@media (max-width: 991px) {
  .gs-footer-bottom,
  .gs-footer-bottom .text-right {
    text-align: center;
  }

  .gs-footer-bottom .col-md-6:first-child {
    margin-bottom: 10px;
  }

  .gs-footer-legal > li {
    padding-left: 0;
  }

  .gs-footer-legal > li::before {
    display: none;
  }

  /* Stacked columns need the separation the gutter gave them side by side. */
  .gs-footer-row > .gs-footer-col {
    margin-bottom: 34px;
  }

  .gs-footer-row > .gs-footer-col:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .footer .gs-footer-logo {
    max-width: 189px;
  }

  .footer .gs-footer-title {
    letter-spacing: 2.5px;
  }

  /* The wave is drawn for a wide panel; at phone widths it would be sliced
     into meaningless diagonals, so let the gradient carry the panel alone. */
  .footer {
    background-image: linear-gradient(160deg, var(--gensales-black) 0%, var(--gensales-black) 45%, var(--gensales-primary-dark) 100%);
  }
}

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

.gs-faq-accordion .gs-faq-item {
  border: 1px solid var(--gensales-line);
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: none;
}

.gs-faq-accordion .panel-heading {
  background: var(--gensales-cream);
  border-radius: 4px;
  padding: 0;
}

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

.gs-faq-accordion .panel-title a:hover,
.gs-faq-accordion .panel-title a:focus {
  color: var(--gensales-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(--gensales-charcoal);
  line-height: 1.6;
}

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

/* The deep blue 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(--gensales-sky) !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: var(--gensales-cream);
  border-color: #fff;
  color: var(--gensales-black);
}

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

.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(--gensales-cream);
  color: var(--gensales-primary);
  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,
  .footer a,
  .gs-footer-links a,
  .gs-footer-links a .fa,
  .gs-rail-title,
  .gs-rail-marker,
  .gs-tl-item-title,
  .gs-panel-nav {
    transition: none;
  }

  /* The pane swap arrives whole rather than fading up into place. */
  .gs-panel-active {
    animation: none;
  }

  /* The nudge on hover, not just its easing. */
  .gs-footer-links a:hover {
    padding-left: 0;
  }

  .gs-footer-links a:hover .fa {
    transform: none;
  }

  .gs-post-card,
  .gs-post-thumb img {
    transition: none;
  }

  .gs-post-card:hover,
  .gs-post-card:hover .gs-post-thumb img {
    transform: none;
  }
}

/* Shared footer: clear hierarchy, grouped navigation, and direct contact. */
#footer.gs-site-footer { background: radial-gradient(ellipse at 95% 0, #2f5577 0, transparent 52%), var(--gensales-black); color: var(--gensales-on-dark); }
#footer.gs-site-footer:before { display: none; }
.gs-site-footer > .container { padding-top: 60px; padding-bottom: 0; }
.gs-footer-intro { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 42px; border-bottom: 1px solid #ffffff24; }
/* Button-only variant (our-approach.php): nothing on the left, so keep the
   button where the eye already expects it instead of letting it fall left. */
.gs-footer-intro-cta-only { justify-content: flex-end; }
#footer .gs-footer-eyebrow { color: var(--gensales-sky); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.7px; margin: 0 0 17px; }
#footer .gs-footer-intro h2 { margin: 0; color: #fff; font-size: clamp(30px,3.1vw,44px); letter-spacing: -1.3px; line-height: 1.22; }
#footer .gs-footer-intro h2 span { color: var(--gensales-sky); }
#footer .gs-footer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 28px; flex-shrink: 0; padding: 16px 24px; border-radius: 8px; background: var(--gensales-orange); color: var(--gensales-black); font-size: 14px; font-weight: 600; transition: background .2s; }
#footer .gs-footer-cta:hover,
#footer .gs-footer-cta:focus { background: var(--gensales-orange-dark); color: var(--gensales-black); }
.gs-footer-grid { display: grid; grid-template-columns: 1.35fr .9fr .85fr 1.2fr; gap: 38px; padding: 45px 0; }
#footer .gs-footer-logo { width: 216px; max-width: 100%; height: auto; margin-bottom: 20px; }
/* Same id specificity as the rule above: the `.footer .gs-footer-logo`
   max-width:210px at the 767px breakpoint is outranked by it and so never
   applied. Restated here so the intended mobile cap actually takes effect. */
@media (max-width: 767px) { #footer .gs-footer-logo { width: 189px; } }
.gs-footer-brand p { font-size: 13px; line-height: 1.9; margin-bottom: 20px; max-width: 300px; }
.gs-footer-social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#footer .gs-footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ffffff24; border-radius: 6px; color: var(--gensales-on-dark); font-size: 15px; transition: background .2s, border-color .2s, color .2s; }
#footer .gs-footer-social a:hover, #footer .gs-footer-social a:focus { background: var(--gensales-sky); border-color: var(--gensales-sky); color: var(--gensales-black); }
#footer .gs-footer-heading { margin: 4px 0 19px; font-size: 13px; font-weight: 600; letter-spacing: .4px; color: #fff; }
.gs-footer-menu { list-style: none; margin: 0; padding: 0; }
#footer .gs-footer-menu a { display: inline-flex; align-items: center; min-height: 40px; color: var(--gensales-on-dark); font-size: 13px; }
#footer .gs-footer-menu a:hover, #footer .gs-footer-base a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
#footer .gs-footer-contact-link { display: flex; gap: 12px; align-items: center; min-height: 40px; color: var(--gensales-on-dark); font-size: 13px; }
.gs-footer-reach .fa { color: var(--gensales-sky); width: 16px; flex-shrink: 0; }
.gs-footer-reach address { display: flex; gap: 12px; font-style: normal; font-size: 12px; line-height: 1.9; margin: 13px 0 10px; }
.gs-footer-reach address .fa { padding-top: 6px; }
.gs-footer-hours { font-size: 11px; margin-left: 28px; color: var(--gensales-on-dark); }
.gs-footer-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff24; padding: 22px 0; font-size: 11px; color: var(--gensales-on-dark); }
.gs-footer-base p { margin: 0; }
.gs-footer-base > div { display: flex; align-items: center; gap: 28px; }
#footer .gs-footer-base a { display: inline-flex; align-items: center; min-height: 36px; color: var(--gensales-on-dark); gap: 10px; }
#footer a:focus-visible { outline: 2px solid var(--gensales-sky) !important; outline-offset: 5px; border-radius: 3px; }
@media (max-width: 1199px) { .gs-footer-grid { gap: 24px; grid-template-columns: 1.1fr .9fr .9fr 1.2fr; } }
@media (max-width: 991px) {
  .gs-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
  .gs-footer-base { align-items: flex-start; }
}
@media (max-width: 575px) {
  .gs-site-footer > .container { padding-top: 40px; }
  .gs-footer-intro { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 32px; }
  #footer .gs-footer-cta { width: 100%; justify-content: space-between; }
  #footer .gs-footer-eyebrow { font-size: 10px; line-height: 1.8; }
  .gs-footer-grid { gap: 26px 16px; padding: 32px 0; }
  .gs-footer-brand, .gs-footer-reach { grid-column: 1/-1; }
  #footer .gs-footer-heading { margin-bottom: 12px; }
  #footer .gs-footer-menu a { min-height: 44px; font-size: 12px; }
  .gs-footer-base { flex-direction: column; gap: 8px; padding: 20px 0 24px; }
  .gs-footer-base > div { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { #footer .gs-footer-cta { transition: none; } }
@media (max-width: 575px) {
  .gs-footer-base > div { padding-right: 48px; }
}

/* --------------------------------------------------------------------------
   Our Approach — banner scrim, stat strip, numbered channel cards

   The September review cut three sections and five process steps from this
   page. These rules are what stops the shorter page reading as a page with
   holes in it; none of them introduce a new component family.
   -------------------------------------------------------------------------- */

/* The banner carries a real photograph rather than the flat 90% navy wash the
   other inner headers use, so the overlay is a gradient: dark enough top and
   bottom to hold the eyebrow, headline and CTA, lighter across the middle so
   the picture is still legible underneath. White text on the lightest band
   measures ~6.8:1 even where the photograph goes pure white beneath it. */
.layer-overlay.gs-hero-scrim::before {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(35, 42, 53, 0.88) 0%,
    rgba(35, 42, 53, 0.74) 48%,
    rgba(35, 42, 53, 0.86) 100%
  );
}

/* The four figures used to sit beside a column of framing prose. With the
   prose cut they would read as a stray row under the banner, so they become a
   card that laps it — the same white-card-over-dark-ground move the process
   section makes further down. The container's own top padding goes, or the
   negative margin just eats it instead of the banner. */
#overview > .container.gs-section-tight {
  padding-top: 0;
}

.gs-stat-strip {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  padding: 34px 20px 10px;
  background: var(--gensales-ice);
  border: 1px solid var(--gensales-line);
  border-radius: 12px;
  box-shadow: 0 112px 40px rgba(31, 36, 39, 0.1);
}

.gs-stat-strip .gs-stat {
  margin-bottom: 24px;
}

/* Only from 992px, where the row is a fixed four across; below that it
   re-wraps to two and a divider would land mid-row. Same reasoning as the
   dividers on #proof and #about above. */
@media (min-width: 992px) {
  .gs-stat-strip .gs-stat + .gs-stat {
    border-left: 1px solid var(--gensales-line);
  }
}

/* No overlap on phones and small tablets: the banner is taller relative to
   the viewport there, and a lapped card pulls the figures over the CTA. */
@media (max-width: 991px) {
  #overview > .container.gs-section-tight {
    padding-top: 44px;
  }
  .gs-stat-strip {
    margin-top: 0;
    padding: 28px 12px 4px;
  }
}

/* Beyond the Call runs two cards where the homepage runs numbered services;
   the numeral keeps them reading as a pair of channels rather than two
   unrelated panels. Decorative, hence aria-hidden on the span. */
.gs-card-numbered {
  position: relative;
}

.gs-card-num {
  position: absolute;
  top: 20px;
  right: 26px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--gensales-line);
}

/* Six stages leave the rail well short of where eleven left it, so the 500px
   floor on the panel now creates dead space rather than preventing it. */
@media (min-width: 992px) {
  .gs-panel {
    min-height: 440px;
  }
  .gs-panel-body {
    padding: 28px 38px 10px;
    line-height: 1.7;
  }
}

/* The panel swap animates on every click, which is exactly the kind of motion
   the preference exists to suppress. The panel still swaps — it just arrives
   rather than sliding. The smooth scroll that goes with it is gated in the
   page's own script. */
@media (prefers-reduced-motion: reduce) {
  .gs-panel-active {
    animation: none;
  }
  .gs-card-numbered {
    transition: none;
  }
}

/* A dark band with no photograph behind it. The navy is the same colour the
   .overlay-theme-colored-9 wash resolves to, so a solid band and an overlaid
   one sit at identical value down the page. */
.gs-band-solid {
  background-color: var(--gensales-black);
}

/* The skin's teal-navy wash (rgba 16,37,46) predates the brand ink; repaint
   it so photo bands and solid bands resolve to the same #232A35. */
.layer-overlay.overlay-theme-colored-8::before {
  background-color: rgba(35, 42, 53, 0.8);
}

.layer-overlay.overlay-theme-colored-9::before {
  background-color: rgba(35, 42, 53, 0.9);
}

/* The closing CTA carries the border that separates it from the footer grid,
   and .gs-site-footer > .container adds 60px above it. On a page that hides the
   CTA (contact.php) the grid would otherwise open on roughly 105px of nothing. */
.gs-footer-plain .gs-footer-grid {
  padding-top: 0;
}


/* --------------------------------------------------------------------------
   Split hero: copy on the left, a handwritten sign-off on the right.
   First built for B2B Lead Generation; shared by Industries, Our Approach and
   About. Pair with `inner-header layer-overlay` on a photo banner; a page
   with no photo overrides the ::before scrim in its own stylesheet.
   -------------------------------------------------------------------------- */
.gs-split-hero {
  background-color: var(--gensales-black);
  background-position: center;
  background-size: cover;
}

/* Darkest behind the headline, lifting toward the right where the script
   line sits. */
.gs-split-hero.layer-overlay::before {
  background: linear-gradient(100deg, rgba(35, 42, 53, 0.94) 0%, rgba(47, 85, 119, 0.86) 50%, rgba(47, 85, 119, 0.55) 100%);
}

.gs-split-hero .container {
  padding-top: 72px;
  padding-bottom: 72px;
}

.gs-split-hero-row { display: flex; flex-wrap: wrap; align-items: center; }

.gs-split-hero .gs-hero-eyebrow {
  margin: 0 0 14px;
  color: var(--gensales-sky);
}

.gs-split-hero-title {
  margin: 0 0 18px;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.gs-split-hero-title span {
  display: block;
  color: var(--gensales-sky);
}

.gs-split-hero-lead {
  max-width: 600px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.6;
}

.gs-split-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.gs-split-hero-actions .btn { margin: 0 28px 12px 0; }

.gs-split-hero-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.gs-split-hero-secondary:hover,
.gs-split-hero-secondary:focus { color: #fff; text-decoration: none; }

.gs-split-hero-secondary small {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 400;
}

.gs-split-hero-secondary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gs-split-hero-secondary:hover .gs-split-hero-secondary-icon,
.gs-split-hero-secondary:focus .gs-split-hero-secondary-icon {
  background: var(--gensales-cream);
  color: var(--gensales-black);
}

/* Handwritten sign-off. A system script stack rather than a web font: one
   decorative line doesn't justify another font request on every visit. */
.gs-split-hero-script {
  position: relative;
  margin: 0;
  padding-bottom: 18px;
  color: #fff;
  font-family: "Bradley Hand", "Segoe Script", "Segoe Print", "Comic Neue", cursive;
  font-size: 32px;
  line-height: 1.25;
  text-align: right;
  transform: rotate(-8deg);
}

.gs-split-hero-script::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 150px;
  height: 3px;
  border-radius: 3px;
  background: var(--gensales-sky);
}

@media (max-width: 1199px) {
  .gs-split-hero-title { font-size: 40px; }
  .gs-split-hero-script { font-size: 28px; }
}

@media (max-width: 991px) {
  /* Bootstrap's col-md-* have no width below 992px; inside the flex row that
     lets a column shrink to its content. Stacked columns take the full row. */
  .gs-split-hero-row > [class*="col-"] { width: 100%; }
  /* Copy runs full width once stacked, so the scrim can't lighten rightward. */
  .gs-split-hero.layer-overlay::before { background: rgba(35, 42, 53, 0.93); }
  .gs-split-hero .container { padding-top: 56px; padding-bottom: 56px; }
  .gs-split-hero-title { font-size: 36px; }
}

@media (max-width: 767px) {
  .gs-split-hero .container { padding-top: 44px; padding-bottom: 44px; }
  .gs-split-hero-title { font-size: 30px; }
  .gs-split-hero-lead { font-size: 16px; }
}

@media (max-width: 479px) {
  .gs-split-hero-actions .btn { width: 100%; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-split-hero-secondary-icon { transition: none; }
}


/* --------------------------------------------------------------------------
   Careers: layout pass to the approved mockup

   Layers onto the shared .gs-split-hero and the #apply / #sdr-quotes blocks
   above; every rule is scoped to a careers-* hook so no other page moves.
   -------------------------------------------------------------------------- */

/* Hero. The SDR sits on the right of the frame, so the scrim lifts further
   than the shared gradient to keep her face in view behind the script line. */
.careers-hero {
  background-position: right center;
}

.careers-hero.layer-overlay::before {
  background: linear-gradient(90deg, rgba(35, 42, 53, 0.96) 0%, rgba(47, 85, 119, 0.9) 42%, rgba(47, 85, 119, 0.4) 72%, rgba(47, 85, 119, 0.12) 100%);
}

/* One line, "TEAM" in the accent — the shared title stacks its span. */
.careers-hero-title span {
  display: inline;
}

.careers-hero .gs-hero-pills {
  justify-content: flex-start;
  margin: 0 0 30px;
}

.careers-hero .gs-hero-pills .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gensales-sky);
  color: var(--gensales-black);
  font-size: 11px;
}

.careers-hero .gs-hero-pills .gs-hero-pill-alt {
  background: var(--gensales-sky);
}

.careers-hero-aside {
  position: relative;
  align-self: stretch;
  min-height: 320px;
}

.careers-hero-aside .gs-split-hero-script {
  display: inline-block;
  margin-top: 10px;
  text-align: left;
}

.careers-hero-card {
  position: absolute;
  right: 15px;
  bottom: -30px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(47, 85, 119, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.careers-hero-card .fa {
  margin-right: 14px;
  font-size: 26px;
}

/* Cover scaling at desktop widths centres her face behind the headline, so
   the photo is sized to the band's height and docked right; the navy ground
   of .gs-split-hero fills the rest under the darkest part of the scrim. */
@media (min-width: 992px) {
  .careers-hero {
    background-size: auto 115%;
    background-repeat: no-repeat;
  }

  /* Stops measured from the right edge, not in %: the photo is ~830px wide at
     this band height, so solid navy to 770px from the right covers its left
     edge and the seam never shows, whatever the viewport width. */
  .careers-hero.layer-overlay::before {
    background: linear-gradient(90deg, rgba(47, 85, 119, 1) 0%, rgba(47, 85, 119, 1) calc(100% - 770px), rgba(47, 85, 119, 0.35) calc(100% - 420px), rgba(47, 85, 119, 0.1) 100%);
  }
}

@media (max-width: 991px) {
  .careers-hero.layer-overlay::before { background: rgba(35, 42, 53, 0.9); }
}

/* Comparably strip: hairline dividers between the four medallions once they
   sit on one row. */
@media (min-width: 992px) {
  .careers-awards .gs-award-item + .gs-award-item {
    border-left: 1px solid var(--gensales-line);
  }
}

/* Role copy. The theme paints .list-icon ticks charcoal; the mockup carries
   them in the accent. */
#apply .list-icon.theme-colored li i {
  color: var(--gensales-primary);
}

#apply .gs-quals-box {
  border-color: var(--gensales-line);
  background: var(--gensales-ice);
}

#apply .gs-highlight-stat {
  display: flex;
  align-items: center;
  border: 1px solid var(--gensales-line-strong);
  border-radius: 8px;
  font-size: 15px;
}

#apply .gs-highlight-stat .fa {
  flex: 0 0 auto;
  margin-right: 16px;
  color: var(--gensales-primary);
  font-size: 28px;
}

/* Testimonials: prev/next either side of the lead quote. */
.careers-quote-carousel {
  position: relative;
}

.careers-quote-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--gensales-line);
  border-radius: 50%;
  background: var(--gensales-cream);
  color: var(--gensales-black);
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(31, 36, 39, 0.08);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.careers-quote-nav:hover,
.careers-quote-nav:focus {
  border-color: var(--gensales-sky);
  color: var(--gensales-primary);
}

.careers-quote-nav:focus-visible {
  outline: 2px solid var(--gensales-primary);
  outline-offset: 2px;
}

.careers-quote-prev { left: -50px; }
.careers-quote-next { right: -50px; }

.careers-quote-in {
  animation: careers-quote-fade 0.35s ease;
}

@keyframes careers-quote-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Below 1200px there is no gutter outside the card for the arrows, so they
   drop to the card's bottom corners, level with the centred attribution. */
@media (max-width: 1199px) {
  .careers-quote-nav {
    top: auto;
    bottom: 30px;
    margin-top: 0;
  }
  .careers-quote-prev { left: 30px; }
  .careers-quote-next { right: 30px; }
}

@media (max-width: 767px) {
  .careers-quote-prev { left: 22px; }
  .careers-quote-next { right: 22px; }
}

/* Rated platforms: one white band rather than the tinted panel. */
.careers-people .gs-logo-panel {
  background: var(--gensales-ice);
}

@media (prefers-reduced-motion: reduce) {
  .careers-quote-in { animation: none; }
  .careers-quote-nav { transition: none; }
}

/* Below 768px Bootstrap gives col-sm-6 no width, and inside .gs-card-row's
   flex row each SDR card shrank to its own label — six cards of six widths. */
@media (max-width: 767px) {
  #our-sdrs .gs-card-row > [class*="col-"] {
    width: 100%;
  }
}

/* Our SDRs band. It used to point at sales-call-office-1920d.webp, a
   grey placeholder, so the overlay sat on nothing and read as a flat charcoal
   block. Now the team photo under the hero's navy, with the mockup's dot grid
   fading in from both edges (masked clear behind the cards). */
#our-sdrs {
  background-color: var(--gensales-black);
  background-position: center;
  background-size: cover;
}

#our-sdrs.layer-overlay::before {
  background-color: rgba(47, 85, 119, 0.88);
}

#our-sdrs::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

#our-sdrs > .container {
  position: relative;
  z-index: 1;
}

/* The theme's .text-theme-colored2 (#6890a2, !important) sits at ~2.5:1 on
   this navy; the hero eyebrow's light blue clears 4.5:1. */
#our-sdrs .section-title h3 .text-theme-colored2 {
  color: var(--gensales-sky) !important;
}


/* --------------------------------------------------------------------------
   Blog: layout pass to the approved mockup

   Layers onto the shared .gs-split-hero, .gs-cat-filter and .gs-post-card;
   every rule is scoped to a blog-* hook so the article page and any other
   card grid stay as they are.
   -------------------------------------------------------------------------- */

/* The shared title drops its span to a second line; here it runs on. */
.blog-hero-title span { display: inline; }

.blog-hero-keywords {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.blog-hero-keywords li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.6px;
  line-height: 2.1;
  text-transform: uppercase;
}

.blog-hero-keywords::after {
  content: "";
  display: inline-block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  background: var(--gensales-sky);
}

/* Pills on the left, search on the right; the search moves above the pills
   once there's no room for both on one line. */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
}

/* The hero already closes the section above; the shared 80px+ top padding
   left a dead band before the filters. */
#blog .gs-section { padding-top: 36px; }

.blog-toolbar .gs-cat-filter {
  flex: 1 1 0;
  justify-content: flex-start;
  gap: 8px;
}

.blog-toolbar .gs-cat-filter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 12px;
  color: var(--gensales-black);
}

/* Must restate the light colour, not just drop this rule: the toolbar's own
   `.blog-toolbar .gs-cat-filter a` above ties the base `.gs-cat-filter a.active`
   on specificity and comes later, so without this the active pill inherits the
   dark text and disappears against its dark background. */
.blog-toolbar .gs-cat-filter a.active { color: var(--gensales-cream); }

.blog-toolbar .gs-cat-filter a:focus-visible,
.blog-search .form-control:focus {
  outline: 2px solid var(--gensales-primary);
  outline-offset: 2px;
}

.blog-search {
  position: relative;
  flex: 0 0 200px;
  margin: 0;
}

.blog-search .fa {
  position: absolute;
  top: 50%;
  left: 14px;
  color: #62707a;
  transform: translateY(-50%);
  pointer-events: none;
}

.blog-search .form-control {
  height: 44px;
  padding-left: 38px;
  border: 1px solid var(--gensales-line);
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
}

.blog-search .form-control::placeholder { color: #62707a; }

.blog-card .gs-post-meta { color: #62707a; }
.blog-card .gs-post-title a { color: var(--gensales-black); }
.blog-card .gs-post-title a:hover,
.blog-card .gs-post-title a:focus { color: var(--gensales-primary); }

@media (max-width: 1199px) {
  .blog-search { order: -1; flex-basis: 100%; }
}


/* --------------------------------------------------------------------------
   Contact: layout pass to the approved mockup

   Layers onto the shared .gs-split-hero, .gs-hero-pills, .gs-contact-card and
   .gs-form-card; every rule is scoped to a contact-* hook because the
   homepage uses the same two cards and should not move.
   -------------------------------------------------------------------------- */

/* Faint dot grid down the left edge — texture, not content. */
.contact-hero::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 0;
  width: 80px;
  background-image: radial-gradient(rgba(127, 175, 200, 0.35) 1.2px, transparent 1.6px);
  background-size: 16px 16px;
  pointer-events: none;
}

.contact-hero .container { position: relative; z-index: 1; }

/* Eyebrow framed by short rules either side. */
.contact-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-hero-eyebrow::before,
.contact-hero-eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
}

.contact-hero .gs-split-hero-title { font-size: 52px; }

.contact-hero-pills {
  justify-content: flex-start;
  margin: 30px 0 0;
  gap: 14px;
}

.contact-hero-pills li {
  padding: 0;
  border: 0;
  background: none;
}

.contact-hero-pills a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  background: rgba(35, 42, 53, 0.35);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact-hero-pills a:hover,
.contact-hero-pills a:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
}

.contact-hero-pills .fa { font-size: 17px; }

.contact-hero-pills a:focus-visible,
.contact-call-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.contact-hero-script::after { background: #fff; }

/* Details card */
/* The hero and the phone band already bracket the cards; the shared 80px
   above and below left dead bands. The bottom is 10px because both columns
   carry mb-30 for the stacked mobile layout. */
#contact .contact-section { padding-top: 40px; padding-bottom: 10px; }

.contact-details-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
}

.contact-card-title,
.contact-form-title {
  margin: 0 0 16px;
  color: var(--gensales-black);
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.contact-card-title { font-size: 30px; }
.contact-form-title { font-size: 26px; }

.contact-details-card > p:not(.gs-form-eyebrow):not(.contact-details-tagline) {
  color: #55636d;
  font-size: 16px;
  line-height: 1.6;
}

.contact-details-list { margin-top: 26px; }

.contact-details-list > li {
  align-items: center;
  padding-bottom: 20px;
  color: var(--gensales-charcoal);
  font-size: 15px;
}

.contact-details-list .contact-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 24px;
  border-radius: 50%;
  background: var(--gensales-ice);
  color: var(--gensales-primary);
  font-size: 18px;
}

.contact-details-list a { color: var(--gensales-black); font-weight: 500; }

.contact-details-name {
  color: var(--gensales-black);
  font-weight: 700;
}

/* Sign-off pinned to the foot of the card, which the flex row stretches to
   the form card's height. */
.contact-details-tagline {
  position: relative;
  margin: auto 0 0;
  padding-top: 52px;
  border-top: 1px solid var(--gensales-line);
  color: var(--gensales-black);
  font-style: italic;
  line-height: 1.5;
}

.contact-details-list + .contact-details-tagline { margin-top: 30px; }

.contact-details-tagline::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--gensales-black);
}

/* Form card: icon inside each field. */
.contact-form-card { padding: 30px 26px; }

.contact-field { position: relative; }

.contact-field > .fa {
  position: absolute;
  top: 23px;
  left: 16px;
  z-index: 2;
  color: #62707a;
  font-size: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

.contact-field-textarea > .fa { top: 23px; }

.contact-field .form-control { padding-left: 44px; }

.contact-field textarea.form-control {
  padding-top: 12px;
  resize: vertical;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.contact-form-card .contact-actions .btn {
  height: 50px;
  line-height: 50px;
  padding: 0 32px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.contact-actions .btn .fa { margin-right: 10px; }

.contact-reset {
  border: 1px solid var(--gensales-line);
  background: var(--gensales-cream);
  color: var(--gensales-black);
}

.contact-reset:hover,
.contact-reset:focus {
  border-color: var(--gensales-black);
  background: var(--gensales-ice-dark);
  color: var(--gensales-black);
}

/* Phone band. The theme pads every `section > .container` 80px top and
   bottom; the band carries its own padding on .contact-call-inner. */
.contact-call-band > .container { padding-top: 0; padding-bottom: 0; }

.contact-call-band {
  position: relative;
  background-color: var(--gensales-primary);
  background-position: center 30%;
  background-size: cover;
}

.contact-call-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(47, 85, 119, 0.9);
}

.contact-call-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 28px 0;
}

.contact-call-icon {
  display: inline-flex;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
}

.contact-call-copy {
  flex: 1 1 auto;
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.contact-call-eyebrow {
  margin: 0 0 4px;
  color: var(--gensales-on-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.contact-call-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}

.contact-call-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--gensales-cream);
  color: var(--gensales-black);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(35, 42, 53, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-call-btn:hover,
.contact-call-btn:focus {
  color: var(--gensales-black);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(35, 42, 53, 0.28);
}

.contact-call-btn .fa-phone { color: var(--gensales-primary); font-size: 20px; }
.contact-call-btn .fa-angle-right { margin-left: 8px; color: var(--gensales-primary); font-size: 20px; }

@media (max-width: 1199px) {
  .contact-hero .gs-split-hero-title { font-size: 44px; }
}

@media (max-width: 991px) {
  .contact-hero::after { display: none; }
  .contact-hero .gs-split-hero-title { font-size: 38px; }
}

@media (max-width: 767px) {
  .contact-hero .gs-split-hero-title { font-size: 32px; }
  .contact-hero-pills { gap: 10px; }
  .contact-card-title { font-size: 26px; }
  .contact-details-list .contact-icon { margin-right: 16px; }
  .contact-form-title { font-size: 23px; }
  .contact-call-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 36px 0;
  }
  .contact-call-copy { padding-left: 0; border-left: 0; }
  .contact-call-copy h2 { font-size: 22px; }
}

@media (max-width: 479px) {
  .contact-actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-pills a,
  .contact-call-btn { transition: none; }
  .contact-call-btn:hover,
  .contact-call-btn:focus { transform: none; }
}

/* ==========================================================================
   Testimonial carousel (.gs-feedback-carousel, driven by js/home-feedback.js).
   Shared by the homepage and the B2B page; each page styles its own cards.
   Owl-child rules carry .owl-carousel (added by the JS) so they outrank the
   plugin's own `.owl-carousel .owl-nav button.owl-next` / `.owl-theme` rules.
   ========================================================================== */
.gs-feedback-carousel:not(.owl-loaded) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gs-feedback-carousel.owl-carousel .owl-stage,
.gs-feedback-carousel.owl-carousel .owl-item,
.gs-feedback-carousel .item { display: flex; }
.gs-feedback-carousel .item { width: 100%; padding: 2px 0 14px; }
.gs-feedback-carousel.owl-carousel .owl-nav { margin: 0; }
.gs-feedback-carousel.owl-carousel .owl-nav button { position: absolute; top: calc(50% - 44px); width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--gensales-line); border-radius: 50%; background: var(--gensales-cream) !important; padding: 0 !important; opacity: 1; color: var(--gensales-black); font-size: 27px; box-shadow: 0 4px 14px rgba(34,78,112,.05); }
.gs-feedback-carousel.owl-carousel .owl-nav button.owl-prev { left: -58px; }
.gs-feedback-carousel.owl-carousel .owl-nav button.owl-next { right: -58px; }
.gs-feedback-carousel.owl-carousel .owl-nav button:hover { background: var(--gensales-ice-dark) !important; color: var(--gensales-primary); }
.gs-feedback-carousel.owl-carousel .owl-nav .disabled { opacity: .45; cursor: default; }
.gs-feedback-carousel.owl-carousel .owl-dots { display: flex; justify-content: center; margin: 0; }
.gs-feedback-carousel.owl-carousel .owl-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; cursor: pointer; }
.gs-feedback-carousel.owl-carousel .owl-dot span { width: 12px; height: 12px; margin: 0; background: var(--gensales-line-strong); }
.gs-feedback-carousel.owl-carousel .owl-dot.active span { background: var(--gensales-primary); }
.gs-feedback-carousel.owl-carousel .owl-dot:focus-visible { outline: 3px solid var(--gensales-primary); outline-offset: 2px; }
.gs-feedback-carousel.owl-carousel .owl-nav button i { color: var(--gensales-black); font-size: 26px; }
@media (max-width: 1299px) {
  .gs-feedback-carousel { padding: 0 36px; }
  .gs-feedback-carousel.owl-carousel .owl-nav button.owl-prev { left: -12px; }
  .gs-feedback-carousel.owl-carousel .owl-nav button.owl-next { right: -12px; }
}
@media (max-width: 991px) {
  .gs-feedback-carousel:not(.owl-loaded) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .gs-feedback-carousel { padding: 0; }
  .gs-feedback-carousel:not(.owl-loaded) { grid-template-columns: 1fr; }
  .gs-feedback-carousel.owl-carousel .owl-nav { display: flex; justify-content: space-between; height: 44px; }
  .gs-feedback-carousel.owl-carousel .owl-nav button { position: static; }
  .gs-feedback-carousel.owl-carousel .owl-dots { margin: -44px 50px 0; }
}

/* --------------------------------------------------------------------------
   Our Approach: testimonial slider and the split "Proven Process" band.
   The slider reuses .gs-feedback-carousel (data-items="1"); these rules only
   give it the single-card fallback and the serif quote Industries uses.
   -------------------------------------------------------------------------- */
.gs-approach-quotes:not(.owl-loaded) { display: block; }
.gs-approach-quotes:not(.owl-loaded) .item + .item { display: none; }
.gs-approach-quotes.owl-carousel .owl-nav button { top: calc(50% - 30px); }
.gs-approach-quotes .gs-quote-card { border: 1px solid var(--gensales-line); border-radius: 12px; box-shadow: 0 2px 10px rgba(11, 33, 59, 0.04); }
.gs-approach-quotes .gs-quote-text { color: var(--gensales-primary); font-family: Georgia, serif; font-size: 18px; font-style: italic; }
.gs-approach-quotes blockquote footer { color: inherit; font-size: inherit; }
.gs-approach-quotes blockquote footer::before { content: none; }
.gs-approach-quotes .gs-quote-company { color: var(--gensales-primary); }

/* Same split as the footer CTA (.gs-footer-intro), so the two closing bands
   line up. var(--gensales-sky) is the footer's light blue: deep blue fails 4.5:1 on ink. */
.gs-cta-split { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.gs-cta-split-copy { max-width: 620px; }
.gs-cta-split .gs-hero-eyebrow { color: var(--gensales-sky); font-size: 11px; letter-spacing: 1.7px; }
.gs-cta-split h2 { margin: 0 0 14px; color: #fff; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; }
.gs-cta-split h2 span { color: var(--gensales-sky); }
.gs-cta-split p { margin: 0; color: rgba(255, 255, 255, 0.82); }
.gs-cta-split .btn { flex-shrink: 0; }
.gs-cta-split .btn .fa { transition: transform 0.2s ease; }
.gs-cta-split .btn:hover .fa,
.gs-cta-split .btn:focus .fa { transform: translateX(3px); }

@media (max-width: 767px) {
  .gs-cta-split { flex-direction: column; align-items: flex-start; gap: 24px; }
  .gs-cta-split .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-cta-split .btn .fa { transition: none; }
}

/* Our Approach focus states. The rail had its own ring; the panel prev/next,
   rail heading and the shared carousel arrows fell back to whatever the theme
   reset left, which is nothing on most buttons. */
.gs-rail-heading:focus-visible,
.gs-panel-nav:focus-visible,
.gs-feedback-carousel.owl-carousel .owl-nav button:focus-visible {
  outline: 3px solid var(--gensales-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Blog post hero (blog-post.php)

   Each post's featured image sits behind the title instead of the one stock
   photo all 253 posts used to share. The darkening comes from .gs-hero-scrim
   above — dark top and bottom, lighter across the middle so the photograph is
   still readable. These rules must stay after .gs-split-hero.layer-overlay
   (line ~5321): that selector has equal specificity and would otherwise win.
   -------------------------------------------------------------------------- */

.gs-post-hero {
  /* Held until the image paints, and shows through if one ever 404s. */
  background-color: var(--gensales-black);
}

/* The category eyebrow is steel blue elsewhere, which only clears 4.5:1 against
   a flat dark band. Over a photo scrim it measures 2.6-4.2:1 depending on the
   picture, and featured images are CMS-uploaded so a light one is not
   hypothetical. White measures 6.2:1 at the scrim's lightest point; the
   uppercase, letterspacing and weight already mark this as an eyebrow. */
.gs-post-hero .gs-post-cat-light {
  color: #fff;
}

/* ==========================================================================
   Lead form captcha (includes/lead-form-security.php)
   ========================================================================== */

.gs-captcha {
  margin-bottom: 15px;
}

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

/* Google renders the widget at a fixed 304px. The narrowest form card gives it
   375 - 30 (container) - 56 (card padding) = 289px, so it would overflow 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;
    height: 73px;
  }
}