@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap');
:root {
  --ink: #444444;
  --muted: #666666;
  --line: #e7e7e7;
  --bg: #f6f8fb;
  --white: #ffffff;
  --accent: #f37735;
  --blue: #377fbf;
  --green-sat: #5fbc39;
  --purple: #72308e;
}

* { box-sizing: border-box; }
/* overflow-x: hidden here would force overflow-y to compute to auto per
   spec, which breaks position: sticky on .site-header below - clip
   prevents the same horizontal overflow without that side effect. */
html, body { overflow-x: clip; }
body { margin: 0; font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif; color: var(--ink); background: var(--white); line-height: 1.5; }
a { color: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 5px 6px rgba(0,0,0,.10);
}

.header-inner {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-left: 0;
  padding-right: 0;
}

/* Aligns the header's left/right edges with the hero container width used
   site-wide (see .ecommerce-hero .container / .home-hero-inner below), so
   the logo lines up with the H1's left edge and the last nav item lines
   up with the hero's right edge - identically on every page. */
.header-inner {
  width: min(1170px, calc(100% - 40px));
}

@media (min-width: 1650px) {
  .header-inner {
    width: min(1440px, calc(100% - 40px));
  }
}

@media (min-width: 981px) {
  /* Cancels the last nav link's own right-side padding/margin (used for
     equal click targets and the hover-underline effect) so its visible
     text lands flush with the container edge, matching the logo's left
     edge on the other side. */
  .site-nav > a:last-child {
    margin-right: 0;
    padding-right: 0;
  }
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.site-logo img {
  display: block;
  width: 214px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #A2A2A2;
}

.site-nav > a,
.site-nav .nav-item > a {
  display: inline-flex;
  align-items: center;
  min-height: 92px;
  padding: 29px 10px 28px;
  margin: 0 12px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  color: #A2A2A2;
}

/* "WHAT WE DO" has no href (it only reveals its dropdown on hover/tap),
   so it needs an explicit pointer cursor - real links get one for free. */
.has-dropdown > a[role="button"] {
  cursor: pointer;
}

.site-nav > a::before,
.site-nav .nav-item > a::before {
  position: absolute;
  content: "";
  height: 10px;
  width: 0;
  bottom: 0;
  left: 0;
  background: #377FBF;
  transition: width .5s ease;
}

.site-nav > a:hover,
.site-nav .nav-item:hover > a,
.site-nav .nav-item:focus-within > a {
  color: #555555;
}

.site-nav > a:hover::before,
.site-nav .nav-item:hover > a::before,
.site-nav .nav-item:focus-within > a::before {
  width: 100%;
}

.nav-item { position: relative; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 12px;
  width: auto;
  min-width: 300px;
  background: #377FBF;
  padding: 25px 0;
  box-shadow: none;
  opacity: 0;
  transform: translateY(0);
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu a {
  display: block;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 21px;
  line-height: 27px;
  font-weight: 500;
  color: #ffffff;
  background: transparent;
  letter-spacing: .5px;
  text-transform: none;
  white-space: normal;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
  color: #555555;
  background: #ffffff;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 3px;
  background: #377FBF;
  margin: 5px 0;
  border-radius: 2px;
}

/* Hamburger icon color is intentionally static — no hover/focus/active color change. */

.hero { background: linear-gradient(135deg, #eef5fa 0%, #ffffff 70%); padding: 92px 0 104px; }
.hero-inner { max-width: 860px; }
.eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
/* === Global heading system (reusable site-wide: H1 = page headline, H2 = section title) === */
h1 {
  margin: 0;
  padding: 0;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 60px;
  line-height: 1.125;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

h2 {
  margin: 0 0 22px;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0;
}
.hero-copy { max-width: 700px; font-size: 21px; color: var(--muted); margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.button.primary { background: var(--accent); color: var(--white); }
.button.secondary { border: 1px solid var(--line); color: var(--ink); background: var(--white); }
.section { padding: 72px 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--white); box-shadow: 0 12px 30px rgba(21,34,56,.06); }
.card h2 { margin-top: 0; }
.card p { color: var(--muted); }
.page-shell { padding: 80px 0; min-height: 55vh; }
/* Footer: modeled after the current Fortuitas.com footer */
.site-footer {
  margin-top: 0;
  background: #ffffff;
  color: var(--ink);
}

.footer-newsletter-row {
  padding: 54px 0 32px;
  text-align: left;
}

.footer-newsletter-row h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  color: #555555;
}

.footer-main {
  border-top: 1px solid #eeeeee;
  padding: 34px 0 38px;
  background: #ffffff;
}

.footer-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.footer-logo img {
  display: block;
  width: 214px;
  height: auto;
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #777777;
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
}

.footer-meta a {
  color: #777777;
  text-decoration: none;
}

.footer-meta a:hover,
.footer-meta a:focus {
  color: #377FBF;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.footer-social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #8c8c8c;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.footer-social a:hover,
.footer-social a:focus {
  background: #377FBF;
}

@media (max-width: 980px) {
  .header-inner { min-height: 72px; padding-left: 0; padding-right: 0; }
  .site-logo img { width: 180px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #377FBF;
    border-top: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 12px 25px rgba(0,0,0,.12);
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    font-size: 16px;
    line-height: 22px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav > a,
  .site-nav .nav-item > a {
    min-height: auto;
    padding: 15px 15px;
    margin: 0;
    color: #ffffff;
  }
  .site-nav > a::before,
  .site-nav .nav-item > a::before { display: none; }
  .site-nav > a:hover,
  .site-nav .nav-item:hover > a,
  .site-nav .nav-item:focus-within > a { color: #A7CB00; }
  .nav-item { width: 100%; }
  .dropdown-menu {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border-top: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
    display: none;
    background: transparent;
  }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu { display: block; }
  .dropdown-menu a {
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    padding: 15px 15px 15px 45px;
    position: relative;
  }
  .dropdown-menu a::before {
    content: "›";
    position: absolute;
    left: 24px;
    top: 13px;
    color: #A7CB00;
    font-size: 22px;
    line-height: 22px;
  }
  .dropdown-menu a:hover,
  .dropdown-menu a:focus { background: transparent; color: #A7CB00; }
  .grid-3 { grid-template-columns: 1fr; }
  .hero { padding: 64px 0; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 28px, 1180px); }
  .site-logo img { width: 160px; }
  .footer-main-inner { flex-direction: column; text-align: center; gap: 20px; }
  .footer-meta { flex-direction: column; gap: 8px; }
  .footer-social { justify-content: center; }
  .footer-newsletter-row { text-align: center; padding: 42px 0 26px; }
}

/* === Corrected Fortuitas Footer - scoped === */

.site-footer.fortuitas-footer {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

.site-footer .footer-newsletter {
  background: #f4f4f4;
  padding: 38px 0 40px;
}

.site-footer .footer-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
}

.site-footer .footer-newsletter h2 {
  margin: 0;
  color: #333;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
}

.site-footer .footer-newsletter-form {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer .footer-newsletter-form input {
  width: 520px;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid #bcbcbc;
  border-radius: 2px;
  background: #fff;
  padding: 0 18px;
  color: #555;
  font-size: 18px;
  font-family: inherit;
}

.site-footer .footer-newsletter-form button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #9ac400;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transform: rotate(-8deg);
}

.site-footer .footer-main {
  background: #2799b7;
  color: #fff;
  padding: 86px 0 90px;
}

.site-footer .footer-main-inner {
  display: grid;
  grid-template-columns: auto 2px auto 1fr;
  align-items: center;
  column-gap: 30px;
}

.site-footer .footer-logo {
  display: inline-flex;
  align-items: center;
}

.site-footer .footer-logo img {
  display: block;
  width: 214px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.site-footer .footer-divider {
  width: 2px;
  height: 68px;
  background: #9ac400;
}

.site-footer .footer-meta {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.site-footer .privacy-link {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.site-footer .privacy-link:hover {
  text-decoration: underline;
}

.site-footer .copyright {
  display: block;
  color: #fff;
}

.site-footer .footer-social {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.site-footer .footer-social a {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  color: #2799b7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
}

.site-footer .footer-social a:hover {
  background: rgba(255,255,255,0.75);
}

.site-footer .footer-social a[aria-label="LinkedIn"] span {
  font-size: 25px;
  letter-spacing: -1px;
}

@media (max-width: 900px) {
  .site-footer .footer-newsletter-inner {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .site-footer .footer-newsletter-form {
    width: 100%;
    justify-content: center;
  }

  .site-footer .footer-newsletter-form input {
    width: min(520px, 80vw);
  }

  .site-footer .footer-main-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    justify-items: center;
  }

  .site-footer .footer-divider {
    width: 80px;
    height: 2px;
  }

  .site-footer .footer-meta {
    align-items: center;
  }

  .site-footer .footer-social {
    justify-content: center;
  }
}

/* === Mobile menu fix === */
.nav-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  z-index: 1001;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  margin: 5px 0;
  background: #222;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* === FINAL mobile nav fix - targets actual .site-nav markup === */
.nav-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  margin: 5px 0;
  background: #377FBF;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 980px) {
  .site-header {
    /* position: sticky from the base rule above is left in place here -
       it was previously overridden to relative, which also disabled
       stickiness on mobile. Sticky still works fine as the positioning
       context for the absolutely-positioned .site-nav dropdown below. */
    z-index: 1000;
  }

  .site-header .nav-toggle {
    display: block !important;
  }

  .site-header .site-nav {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #377FBF !important;
    border-top: 1px solid rgba(255,255,255,.2) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.16) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    z-index: 1001 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    clip-path: inset(0 0 100% 0) !important;
    transition: clip-path 0.28s cubic-bezier(.4,0,1,1), visibility 0s linear 0.28s !important;
  }

  .site-header .site-nav.is-open {
    visibility: visible !important;
    pointer-events: auto !important;
    clip-path: inset(0 0 0 0) !important;
    transition: clip-path 0.34s cubic-bezier(0,0,.2,1), visibility 0s linear 0s !important;
  }

  .site-header .site-nav > a,
  .site-header .site-nav .nav-item > a {
    display: block !important;
    color: #ffffff !important;
    padding: 15px 18px !important;
    margin: 0 !important;
    min-height: auto !important;
    line-height: 1.35 !important;
  }

  .site-header .site-nav > a::before,
  .site-header .site-nav .nav-item > a::before {
    display: none !important;
  }

  .site-header .has-dropdown > a {
    position: relative !important;
  }

  .site-header .has-dropdown > a::after {
    content: "›" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-58%) rotate(0deg) !important;
    transform-origin: center !important;
    color: #A7CB00 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    transition: transform 0.26s ease !important;
  }

  .site-header .has-dropdown.is-open > a::after {
    transform: translateY(-58%) rotate(90deg) !important;
  }

  .site-header .nav-item {
    width: 100% !important;
  }

  .site-header .dropdown-menu {
    position: static !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
    overflow: hidden !important;
    max-height: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.24s cubic-bezier(.4,0,1,1), visibility 0s linear 0.24s !important;
  }

  .site-header .has-dropdown.is-open .dropdown-menu {
    visibility: visible !important;
    max-height: 178px !important;
    padding: 0 0 8px 0 !important;
    pointer-events: auto !important;
    transition: max-height 0.32s cubic-bezier(0,0,.2,1), visibility 0s linear 0s !important;
  }

  .site-header .dropdown-menu a {
    display: block !important;
    color: #ffffff !important;
    padding: 10px 18px 10px 42px !important;
  }

  .site-header .dropdown-menu a:hover,
  .site-header .site-nav > a:hover,
  .site-header .site-nav .nav-item > a:hover {
    color: #A7CB00 !important;
  }
}

/* === Homepage Hero Typography + CTA Fix === */

/* Temporary live-site font references for visual matching.
   Later we can replace Lane Narrow with a licensed/self-hosted option. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;500;600;700;900&display=swap');

@font-face {
  font-family: 'Lane - Narrow';
  src: url('../fonts/Lane-Narrow.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  color: #555555;
}

/* === Reusable secondary-page hero ===
   Simple title (+ optional intro paragraph) hero for interior pages,
   deliberately not a copy of .home-hero - that one is unique to the
   homepage (background photo, phone mockup, plus-grid). This is sized
   to match .home-hero's desktop height (min-height: 545px) so hero
   height reads consistently across the site, and reuses the same blue
   divider-bar detail (::after) to tie the two together visually. Add
   class="page-hero" to any page's own hero section along with a
   heading and, optionally, a <p>. */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  min-height: 545px;
  padding: 80px 0;
  text-align: center;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #377FBF;
}

/* eCommerce page's divider bar matches its purple CTA-strip motif
   (#72308E) instead of the default blue used by other pages. */
.ecommerce-hero::after {
  background: #72308E;
}

.page-hero p {
  margin: 24px auto 0;
  max-width: 700px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .page-hero {
    min-height: 380px;
    padding: 60px 0;
  }
}

@media (max-width: 560px) {
  .page-hero {
    min-height: 300px;
    padding: 48px 0;
  }
}

/* === Split secondary-page hero (eyebrow/title/copy/CTA + visual) ===
   Reusable two-column variant of .page-hero: a left column with an
   eyebrow label, H1, copy and single CTA button, and a right column
   pairing an image with a .plus-grid accent. Not specific to the
   eCommerce page - any secondary page needing a "copy next to a
   screenshot" hero can reuse this same structure. */
.page-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: min-content 1fr;
  grid-template-areas:
    "eyebrow visual"
    "copy    visual";
  align-items: start;
  column-gap: 60px;
  row-gap: 0;
  width: 100%;
  text-align: left;
}

/* eyebrow's row is pinned to min-content so it can never be stretched to
   help fit the spanning .page-hero-visual image; copy's row is the
   flexible (1fr) track that absorbs all of that extra height instead.
   Without this, the grid would split the extra height across both rows
   (or all of it into eyebrow's row), pushing either the H1 away from the
   eyebrow or a wall of empty space above "SERVICES" - both invisible
   when the H1 happens to wrap to 2 lines (eCommerce), but visible for a
   single-line H1 (Integration). Any leftover height now lands below the
   button, where it's invisible. */
.page-hero-eyebrow {
  grid-area: eyebrow;
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 6px;
  color: #999999;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.page-hero-copy {
  grid-area: copy;
}

/* Prod's real diagonal-hairline graphic (assets/images/title_line.png),
   stretched to fill each context's box the same way prod's own CSS does
   (background-size: 100% 100%, non-uniform). The <i> children are the
   older pure-CSS stand-in kept only for markup/dash-count compatibility -
   hidden now that the real asset is in place. Width here matches the
   7-dash stand-in's rendered footprint so page layouts don't shift. */
.page-hero-eyebrow-mark {
  display: inline-block;
  width: 64.5px;
  height: 24px;
  background: url('../images/title_line.png') no-repeat center / 100% 100%;
  flex: 0 0 auto;
}

.page-hero-eyebrow-mark i {
  display: none;
}

.services-hero-eyebrow .page-hero-eyebrow-mark {
  width: 54px;
}

/* Prod uses a different graphic (forward-green-slash.png) for the
   "SERVICES" eyebrow on these three sub-pages specifically, rather than
   the generic title_line.png hairline used elsewhere. */
.ecommerce-hero .page-hero-eyebrow-mark,
.integration-hero .page-hero-eyebrow-mark,
.erp-hero .page-hero-eyebrow-mark {
  background-image: url('../images/forward-green-slash.png');
}


.page-hero-copy p {
  margin: 24px 0 32px;
  max-width: 480px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

.page-hero-visual {
  grid-area: visual;
  align-self: center;
  position: relative;
}

.page-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .page-hero-split {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "eyebrow"
      "visual"
      "copy";
    text-align: center;
    column-gap: 0;
    row-gap: 40px;
  }

  .page-hero-visual {
    align-self: auto;
  }

  .page-hero-eyebrow {
    justify-content: center;
    gap: 40px;
    margin-bottom: 0;
  }

  .page-hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }
}

.home-hero {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  padding: 285px 0 265px;
}

.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #377FBF;
}

.home-hero-inner {
  display: block;
}

/* Matches the eCommerce hero's container width exactly (rather than the
   site's flat 1180px .container), so both heroes - and the header, which
   uses this same width - stay visually consistent site-wide. */
.home-hero-inner {
  width: min(1170px, calc(100% - 40px));
}

@media (min-width: 1650px) {
  .home-hero-inner {
    width: min(1440px, calc(100% - 40px));
  }
}

.home-hero-mobile-photo {
  display: contents;
}

.home-hero-copy {
  width: 590px;
  max-width: 100%;
}

.home-hero p {
  width: 590px;
  max-width: 100%;
  margin: 65px 0 88px;
  padding: 10px 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.hero-button {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-width: 300px;
  padding: 22px 62px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: all ease .5s;
}

.hero-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.hero-button:hover::after {
  left: 120%;
}

.hero-button-green {
  background: #A7CB00;
}

.hero-button-blue {
  background: #377FBF;
}

.hero-button:hover,
.hero-button:focus {
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 1200px) {
  .home-hero {
    padding: 220px 0 210px;
  }
}

@media (max-width: 900px) {
  .home-hero {
    padding: 140px 0 150px;
  }

  .home-hero h1 {
    font-size: 48px;
    line-height: 1.2;
  }

  .home-hero p {
    margin: 40px 0 60px;
    font-size: 20px;
  }

  .hero-button {
    min-width: 250px;
    font-size: 24px;
    padding: 18px 42px;
  }
}

@media (max-width: 560px) {
  .home-hero {
    padding: 92px 0 110px;
  }

  .home-hero-mobile-photo {
    width: calc(100% + 28px);
    margin: 0 -14px 0;
  }

  .home-hero-copy {
    width: calc(100% + 28px);
    margin: -30px -14px 0;
    padding: 30px 14px 0;
  }

  .home-hero h1 {
    font-size: 40px;
    line-height: 1.25;
  }

  .home-hero p {
    margin: 28px 0 38px;
    font-size: 18px;
    line-height: 1.55;
  }

  .home-hero-actions {
    display: block;
  }

  .hero-button {
    width: 100%;
    min-width: 0;
    margin-bottom: 12px;
    font-size: 22px;
    padding: 17px 30px;
  }
}

/* === CTA Size + Layout Fix === */

.home-hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
}

.hero-button {
  min-width: 220px;
  padding: 14px 28px;
  font-size: 18px;
  border-radius: 6px;
}

@media (max-width: 560px) {
  .home-hero-actions {
    flex-wrap: wrap;
  }
}

/* === Corrected Hero Background Full Package === */

@media (min-width: 981px) {
  .home-hero {
    /* Padding scaled up to match the eCommerce hero's actual rendered
       height (650.6px / 718.7px at its own container-width breakpoints),
       not the old flat 545px, keeping hero height consistent site-wide. */
    padding-top: 168px;
    padding-bottom: 191px;
    min-height: 650px;
    background-color: #ffffff;
    background-image: url('../images/hero-banner-background.webp');
    background-repeat: no-repeat;
    background-position: right -60px top;
    background-size: 100% auto;
  }

  .home-hero::before {
    display: none;
  }

  .home-hero-inner {
    min-height: 0;
    display: flex;
    align-items: flex-start;
  }

  .home-hero-copy {
    width: 680px;
    max-width: 680px;
    padding: 0;
  }

  .home-hero h1 {
    white-space: nowrap;
    font-size: 44px;
    line-height: 1.16;
    color: #377FBF;
  }

  .home-hero p {
    width: 575px;
    margin: 36px 0 44px;
    color: #555555;
    font-size: 20px;
    line-height: 1.5;
  }

  .home-hero-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
  }

  .hero-button {
    min-width: 220px;
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 6px;
  }
}

/* Matches the eCommerce hero's own height at its >=1650px container
   breakpoint (718.7px), keeping hero height consistent site-wide. */
@media (min-width: 1650px) {
  .home-hero {
    padding-top: 200px;
    padding-bottom: 228px;
    min-height: 719px;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .home-hero h1 {
    font-size: 40px;
  }

  .home-hero-copy {
    width: 620px;
    max-width: 620px;
  }

  .home-hero p {
    width: 540px;
  }
}

@media (max-width: 980px) {
  .home-hero {
    background-image: none;
    padding: 0 0 56px;
  }

  .home-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .home-hero-mobile-photo {
    display: block;
    position: relative;
    width: calc(100% + 40px);
    margin: 0 -20px 0;
    aspect-ratio: 8 / 5;
    max-height: 280px;
    overflow: visible;
    background-image: url('../images/hero-banner-background.webp');
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: 100% 15%;
  }

  .home-hero-mobile-photo .hero-phone {
    display: block;
    position: absolute;
    left: 16%;
    right: auto;
    bottom: -20px;
    top: auto;
    transform: translateX(-50%);
    z-index: 3;
  }

  .home-hero-mobile-photo .phone-device {
    width: 130px;
    height: 281px;
    border-radius: 22px;
    padding: 17px 4px 4px;
  }

  .home-hero-mobile-photo .phone-device::before {
    top: 8px;
    width: 30px;
    height: 8px;
  }

  .home-hero-mobile-photo .phone-device::after {
    top: 10px;
    left: calc(50% + 10px);
    width: 3px;
    height: 3px;
  }

  .home-hero-mobile-photo .phone-screen {
    border-radius: 16px;
    border-width: 1px;
  }

  .home-hero-copy {
    position: relative;
    z-index: 5;
    background: #ffffff;
    width: calc(100% + 40px);
    max-width: none;
    margin: -30px -20px 0;
    padding: 30px 20px 0;
  }

  .home-hero-copy h1,
  .home-hero-copy p,
  .home-hero-copy .home-hero-actions {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-hero p {
    width: auto;
    max-width: 480px;
  }

  .home-hero-actions {
    justify-content: center;
  }
}

/* === Modern white phone frame with dynamic randomized screen === */

.home-hero {
  position: relative;
  overflow: hidden;
}

.home-hero-inner {
  position: relative;
}

.hero-phone {
  position: absolute;
  right: 20%;
  bottom: -255px;
  z-index: 3;
  pointer-events: none;
  animation: heroPhoneModernSlide 1050ms cubic-bezier(.22,.9,.28,1) 220ms both;
}

.phone-device {
  width: 238px;
  height: 514px;
  border-radius: 40px;
  position: relative;
  padding: 31px 8px 8px;
  background:
    linear-gradient(90deg, #d8d8d8 0%, #f9f9f9 8%, #ffffff 28%, #ffffff 72%, #ececec 92%, #c9c9c9 100%);
  border: 1px solid rgba(165,165,165,0.92);
  box-shadow:
    0 28px 56px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.9),
    inset 0 0 0 3px rgba(235,235,235,0.8);
}

/* Small modern black pill, intentionally subtle */
.phone-device::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 54px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050505;
  z-index: 8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* tiny sensor highlight */
.phone-device::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 18px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #315b70 0%, #111 65%, #000 100%);
  z-index: 9;
}

.phone-notch {
  display: none !important;
}

.phone-screen {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 29px;
  border: 1.5px solid rgba(0,0,0,0.72);
  box-sizing: border-box;
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

@keyframes heroPhoneModernSlide {
  from {
    opacity: 0;
    transform: translateY(255px);
  }
  to {
    opacity: 1;
    transform: translateY(24px);
  }
}

/* === Reusable plus-grid accent animation ===
   Site-wide utility: a 5x5 grid of "+" marks that fade/slide in on a
   diagonal stagger (each .plus's delay is driven by --i, set inline per
   dot: style="--i:N"). Grid sizing/dot styling/animation live here on
   .plus-grid so any page can reuse the same effect. Where the grid is
   positioned (offset, display breakpoint, stacking) is specific to each
   placement - .hero-plus-grid below is the homepage hero's placement;
   a different page would pair .plus-grid with its own placement class
   instead of touching this block. */
.plus-grid {
  grid-template-columns: repeat(5, 20px);
  grid-template-rows: repeat(5, 20px);
  gap: 16px;
  pointer-events: none;
}

.plus-grid .plus {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-8px, 8px);
  animation: plusGridFadeIn 420ms ease-out both;
  animation-delay: calc(900ms + (var(--i) * 45ms));
}

.plus-grid .plus svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: #9aa3ab;
}

@keyframes plusGridFadeIn {
  from {
    opacity: 0;
    transform: translate(-8px, 8px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* === Hero plus-grid placement (desktop only) === */
.hero-plus-grid {
  display: none;
}

@media (min-width: 981px) {
  .home-hero-actions {
    position: relative;
  }

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

  .hero-plus-grid {
    display: grid;
    position: absolute;
    left: -76px;
    top: -10px;
    z-index: 0;
  }
}

@media (max-width: 1180px) {
  .hero-phone {
    right: 11%;
    bottom: -250px;
  }

  .phone-device {
    width: 218px;
    height: 471px;
  }
}

@media (max-width: 980px) {
  .hero-phone {
    display: none;
  }
}

/* === Services Bar Exact SVG Icons === */
.services-bar {
  background: #f2f2f2;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #dddddd;
  padding: 16px 0 13px;
}

.services-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 40px;
}

.service-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
}

.service-bar-item .service-icon,
.service-bar-item img {
  width: 47px;
  height: 47px;
  display: block;
  margin-bottom: 3px;
  object-fit: contain;
  overflow: visible;
}

.service-bar-item:hover span {
  color: #377fbf;
}

@media (max-width: 760px) {
  .services-bar-inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .service-bar-item {
    font-size: 10px;
  }

  .service-bar-item .service-icon,
  .service-bar-item img {
    width: 40px;
    height: 40px;
  }
}

/* === Strategy/Support Correction === */
.service-bar-item img,
.service-bar-item .service-icon {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

/* === Strategy Green Asset Fix === */
.service-bar-item img[src$="strategy-green.png"] {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

/* === Services Bar Fortuitas Tight Spacing === */
.services-bar .service-bar-item .service-icon,
.services-bar .service-bar-item img {
  margin-bottom: 6px !important;
}

.services-bar .service-bar-item span {
  margin-top: 2px;
}


/* === Strategy Icon Vertical Alignment Fix === */
.services-bar .service-bar-item:nth-child(2) .service-icon,
.services-bar .service-bar-item:nth-child(2) img {
  transform: translateY(3px);
}

/* === Services Bar Hover State === */
.services-bar .service-bar-item {
  cursor: pointer;
}

.services-bar .service-bar-item span {
  color: #555555 !important;
}

/* Inline SVG icons: turn the entire icon green on hover/focus */
.services-bar .service-bar-item:hover .service-icon path,
.services-bar .service-bar-item:hover .service-icon rect,
.services-bar .service-bar-item:hover .service-icon polygon,
.services-bar .service-bar-item:hover .service-icon polyline,
.services-bar .service-bar-item:hover .service-icon circle,
.services-bar .service-bar-item:hover .service-icon line,
.services-bar .service-bar-item:focus .service-icon path,
.services-bar .service-bar-item:focus .service-icon rect,
.services-bar .service-bar-item:focus .service-icon polygon,
.services-bar .service-bar-item:focus .service-icon polyline,
.services-bar .service-bar-item:focus .service-icon circle,
.services-bar .service-bar-item:focus .service-icon line {
  fill: #A7CB00 !important;
  stroke: #A7CB00 !important;
  transition: fill 180ms ease, stroke 180ms ease;
}

/* PNG icons: approximate the Fortuitas hover green */
.services-bar .service-bar-item:hover img,
.services-bar .service-bar-item:focus img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(94%) saturate(1019%) hue-rotate(29deg) brightness(97%) contrast(101%);
  transition: filter 180ms ease;
}

/* Text intentionally does NOT change color on hover */
.services-bar .service-bar-item:hover span,
.services-bar .service-bar-item:focus span {
  color: #555555 !important;
}


/* === Services Bar Bottom Shadow === */
.services-bar {
  position: relative;
  z-index: 4;
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.16);
}


/* === Footer Final Polish === */
.fortuitas-footer{margin:0;padding:0;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif}
.fortuitas-footer .footer-newsletter{background:#f3f3f3;padding:36px 0 38px}
.fortuitas-footer .footer-newsletter-inner{display:flex;align-items:center;justify-content:center}
.fortuitas-footer .footer-newsletter h2{margin:0;color:#333;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-size:30px;line-height:1.2;font-weight:300}
.fortuitas-footer .footer-main{background:#1f9bc9;padding:70px 0 66px}
.fortuitas-footer .footer-main-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
.fortuitas-footer .footer-logo{display:inline-flex;align-items:center;padding-right:34px;border-right:2px solid #A7CB00}
.fortuitas-footer .footer-logo img{display:block;width:214px;max-width:100%;height:auto}
.fortuitas-footer .footer-meta{display:flex;flex-direction:column;justify-content:center;gap:3px;color:#fff;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.25;font-weight:400}
.fortuitas-footer .privacy-link{color:#fff;text-decoration:none;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.2;font-weight:400}
.fortuitas-footer .privacy-link:hover{color:#fff;text-decoration:none}
.fortuitas-footer .copyright{color:#fff;font-family:"Source Sans Pro",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.2;font-weight:400}
.fortuitas-footer .footer-social{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.fortuitas-footer .footer-social a{width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(184,224,239,.95);color:#1f9bc9;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:25px;line-height:1;font-weight:700;transition:background-color 180ms ease,color 180ms ease,transform 180ms ease}
.fortuitas-footer .footer-social a span{display:block;transform:translateY(-1px)}
.fortuitas-footer .footer-social a:nth-child(3) span{font-size:22px;font-weight:700}
.fortuitas-footer .footer-social a:hover,.fortuitas-footer .footer-social a:focus{background:#A7CB00;color:#1f9bc9;transform:translateY(-1px)}
@media(max-width:900px){.fortuitas-footer .footer-main-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px}.fortuitas-footer .footer-logo{padding-right:0;padding-bottom:20px;border-right:0;border-bottom:2px solid #A7CB00}.fortuitas-footer .footer-social{justify-content:center}}


/* === Footer Spacing Fix === */
.fortuitas-footer .footer-newsletter {
  display: block !important;
}

.fortuitas-footer .footer-meta {
  gap: 0px !important;
}

.fortuitas-footer .privacy-link {
  margin-bottom: 2px;
}

.fortuitas-footer .copyright {
  margin-top: 0px;
}

/* === Footer Newsletter Final Layout === */
.fortuitas-footer .footer-newsletter {
  display: block !important;
  background: #f3f3f3;
  padding: 36px 0 38px;
}

.fortuitas-footer .footer-newsletter-inner {
  display: grid !important;
  grid-template-columns: auto minmax(360px, 540px);
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.fortuitas-footer .footer-newsletter h2 {
  margin: 0 22px 0 0;
  color: #333333;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 300;
  white-space: nowrap;
}

.fortuitas-footer .footer-newsletter-form {
  width: 100%;
}

/* === HubSpot embedded newsletter form (legacy form editor, portal 3875073) === */
.hs-newsletter-embed .hs-form {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0;
  width: 100%;
}

.hs-newsletter-embed fieldset {
  max-width: none !important;
  width: 100% !important;
  margin: 0;
  flex: 1 1 auto;
}

.hs-newsletter-embed .hs-form-field {
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}

.hs-newsletter-embed .hs-form-field label,
.hs-newsletter-embed legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hs-newsletter-embed .input {
  margin: 0 !important;
}

.hs-newsletter-embed input[type="email"],
.hs-newsletter-embed input[type="text"] {
  width: 100% !important;
  height: 50px;
  border: 1px solid #9e9e9e;
  background: #ffffff;
  color: #555555;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  padding: 0 18px;
  box-sizing: border-box;
  outline: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

.hs-newsletter-embed .hs_submit,
.hs-newsletter-embed .actions {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

.hs-newsletter-embed input[type="submit"],
.hs-newsletter-embed button[type="submit"],
.hs-newsletter-embed .hs-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent url('/assets/images/newsletter-icon.png') no-repeat center / 53px 53px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 -8px !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.hs-newsletter-embed input[type="submit"]:hover,
.hs-newsletter-embed input[type="submit"]:focus-visible,
.hs-newsletter-embed button[type="submit"]:hover,
.hs-newsletter-embed button[type="submit"]:focus-visible,
.hs-newsletter-embed .hs-button:hover,
.hs-newsletter-embed .hs-button:focus-visible {
  transform: scale(1.1);
}

.hs-newsletter-embed .hs-error-msgs {
  position: absolute;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #cc0000;
}

.hs-newsletter-embed .hs-error-msgs label {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  margin: 0;
  color: #cc0000 !important;
}

.hs-newsletter-embed .submitted-message {
  color: #333333;
  font-size: 16px;
}

.fortuitas-footer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .fortuitas-footer .footer-newsletter-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .fortuitas-footer .footer-newsletter h2 {
    margin: 0 auto !important;
    max-width: 480px;
    white-space: normal;
    text-align: center !important;
    color: #333333 !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif !important;
    line-height: 1.3 !important;
  }

  .fortuitas-footer .footer-newsletter-form {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .hs-newsletter-embed .hs-form {
    gap: 10px;
  }
}


/* === Global scroll-reveal animation ===
   Reusable site-wide utility: add class="reveal-on-scroll" to any element
   (optionally plus "reveal-delay-1" to stagger it slightly behind a
   sibling) and assets/js/global.js's IntersectionObserver adds "is-visible"
   the first time it enters the viewport. Elements physically translate
   upward while fading in, landing at their resting position - the same
   fade+slide language as the hero phone's heroPhoneModernSlide animation
   (same easing curve), rather than a clip-path mask/wipe. Currently used
   by the eCommerce/Integration/ERP home sections, but not tied to them. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s cubic-bezier(.22, .9, .28, 1), transform .8s cubic-bezier(.22, .9, .28, 1);
}

.reveal-on-scroll.reveal-delay-1 {
  transition-delay: .15s;
}

.reveal-on-scroll.reveal-delay-2 {
  transition-delay: .3s;
}

.reveal-on-scroll.reveal-delay-3 {
  transition-delay: .45s;
}

/* Slower variant for above-the-fold uses (e.g. a hero visual), where the
   IntersectionObserver fires almost immediately on load - the default .8s
   reads as an abrupt snap instead of a deliberate reveal when there's no
   scroll to space it out. */
.reveal-on-scroll.reveal-slow {
  transition-duration: 1.8s;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Home eCommerce Section === */
.ecommerce-home-section {
  background: #ffffff;
  padding: 92px 0 98px;
}

.ecommerce-home-inner {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 72px;
  align-items: center;
}

.ecommerce-home-image {
  position: relative;
  overflow: visible;
}

/* Dashed line decoration */
.ecommerce-home-image::after {
  content: "";
  position: absolute;
  left: -30px;
  bottom: 60px;
  width: 260px;
  height: 30px;
  background: url("/assets/images/dashed-line.webp") no-repeat left center / contain;
  pointer-events: none;
}

/* Plus signs */
.ecommerce-home-image::before {
  content: "+ + + + +\A+ + + + +\A+ + + + +\A+ + + + +\A+ + + + +";
  position: absolute;
  bottom: 0px;
  right: -45px;
  color: #e2ebb5;
  font-size: 16px;
  letter-spacing: 10px;
  line-height: 2.2;
  white-space: pre;
  pointer-events: none;
  z-index: 0;
}


.ecommerce-home-image img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
}

.ecommerce-image-link {
  position: relative;
  display: inline-block;
  max-width: 620px;
  line-height: 0;
  text-decoration: none;
}

.ecommerce-image-link img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

.ecommerce-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(167, 203, 0, .48);
  mix-blend-mode: multiply;
  transition: opacity .22s ease;
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

.ecommerce-image-link:hover::after,
.ecommerce-image-link:focus-visible::after {
  opacity: 1;
}

.ecommerce-home-copy {
  padding-top: 8px;
}

.ecommerce-home-copy p {
  max-width: 590px;
  margin: 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.58;
  font-weight: 400;
}

.ecommerce-home-copy p a {
  color: #A7CB00;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.ecommerce-feature-list {
  margin-top: 58px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.ecommerce-feature-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  column-gap: 26px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .2px;
  text-decoration: none;
}

.ecommerce-feature-item:hover,
.ecommerce-feature-item:focus-visible {
  color: #555555;
  text-decoration: none;
}

.ecommerce-feature-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}

@media (max-width: 1020px) {
  .ecommerce-home-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .ecommerce-home-image {
    order: 1;
  }

  .ecommerce-home-copy {
    order: 2;
  }

  .ecommerce-home-copy h2 {
    text-align: center;
  }

  .ecommerce-home-image img {
    margin: 0 auto;
    max-width: 560px;
  }

  .ecommerce-image-link {
    display: block;
    max-width: 560px;
    margin: 0 auto;
  }

  .ecommerce-home-image::before,
  .ecommerce-home-image::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .ecommerce-home-section {
    padding: 62px 0 70px;
  }

  .ecommerce-home-copy h2 {
    font-size: 44px;
  }

  .ecommerce-home-copy p {
    font-size: 17px;
  }

  .ecommerce-feature-item {
    grid-template-columns: 58px 1fr;
    gap: 18px;
    font-size: 19px;
  }

  .ecommerce-feature-icon {
    width: 48px;
    height: 48px;
  }
}


/* === eCommerce page (ecommerce.html) === */
.ecommerce-hero-plus-grid {
  display: grid;
  position: absolute;
  left: -40px;
  top: 12px;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .ecommerce-hero-plus-grid {
    display: none;
  }
}

.ecommerce-capabilities {
  background: #ffffff;
  padding: 90px 0 100px;
}

/* Matches production's .row-fluid .wrapper width (1170px) for this
   section, rather than the site's usual 1180px container. Widens to
   1440px at >=1650px viewports, matching production's own breakpoint.
   Applied to the hero too so both sections stay center-aligned. */
.ecommerce-hero .container,
.ecommerce-capabilities .container {
  width: min(1170px, calc(100% - 40px));
}

@media (min-width: 1650px) {
  .ecommerce-hero .container,
  .ecommerce-capabilities .container {
    width: min(1440px, calc(100% - 40px));
  }
}

.ecommerce-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ecommerce-capability {
  padding: 0 40px;
}

.ecommerce-capability:first-child {
  padding-left: 0;
}

.ecommerce-capability:last-child {
  padding-right: 0;
}

.ecommerce-capability:not(:last-child) {
  border-right: 1px solid #e0e0e0;
}

.ecommerce-capability-icon {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.ecommerce-capability-title {
  margin: 0;
  padding: 30px 0 25px;
  color: #252525;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 33px;
  font-weight: 400;
  letter-spacing: normal;
}

.ecommerce-capability p {
  margin: 0;
  padding: 0 0 35px 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 27px;
}

@media (max-width: 900px) {
  .ecommerce-capabilities {
    padding: 60px 0 70px;
  }

  .ecommerce-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .ecommerce-capability {
    padding: 32px 0;
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0;
  }

  .ecommerce-capability:first-child {
    padding-top: 0;
  }

  .ecommerce-capability:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}


/* === eCommerce CTA Strip === */
.ecommerce-cta-strip {
  background: #72308E;
  padding: 26px 60px;
}

.ecommerce-cta-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.ecommerce-cta-strip h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}

.ecommerce-cta-strip h2 strong {
  font-weight: 700;
}

.ecommerce-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 66px;
  padding: 20px 48px;
  background: #A7CB00;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.ecommerce-cta-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.ecommerce-cta-button:hover::after,
.ecommerce-cta-button:focus-visible::after {
  left: 120%;
}

.ecommerce-cta-button:hover,
.ecommerce-cta-button:focus-visible {
  background: #97B900;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 760px) {
  .ecommerce-cta-strip {
    padding: 34px 0;
  }

  .ecommerce-cta-strip-inner {
    width: min(100% - 28px, 1180px);
    flex-direction: column;
    gap: 22px;
    text-align: center;
    justify-content: center;
  }

  .ecommerce-cta-strip h2 {
    font-size: 26px;
    text-align: center;
  }

  .ecommerce-cta-button {
    min-width: 0;
    min-height: auto;
    padding: 14px 32px;
    font-size: 18px;
  }
}


/* === Integration page (services-integrations.html) === */
.integration-hero .container,
.integration-capabilities .container {
  width: min(1170px, calc(100% - 40px));
}

@media (min-width: 1650px) {
  .integration-hero .container,
  .integration-capabilities .container {
    width: min(1440px, calc(100% - 40px));
  }
}

.integration-hero-plus-grid {
  display: grid;
  position: absolute;
  left: -40px;
  top: 12px;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .integration-hero-plus-grid {
    display: none;
  }
}

.integration-capabilities {
  background: #ffffff;
  padding: 90px 0 100px;
}

.integration-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.integration-capability {
  padding: 0 40px;
}

.integration-capability:first-child {
  padding-left: 0;
}

.integration-capability:last-child {
  padding-right: 0;
}

.integration-capability:not(:last-child) {
  border-right: 1px solid #e0e0e0;
}

.integration-capability-icon {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.integration-capability-title {
  margin: 0;
  padding: 30px 0 25px;
  color: #252525;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 33px;
  font-weight: 400;
  letter-spacing: normal;
}

.integration-capability p {
  margin: 0;
  padding: 0 0 35px 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 27px;
}

@media (max-width: 900px) {
  .integration-capabilities {
    padding: 60px 0 70px;
  }

  .integration-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .integration-capability {
    padding: 32px 0;
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0;
  }

  .integration-capability:first-child {
    padding-top: 0;
  }

  .integration-capability:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* Bottom CTA strip on the Integration page itself - distinct from
   .integration-cta-strip above, which is the home page's teaser (reversed
   layout). This one mirrors .ecommerce-cta-strip's own-page layout, just
   with the site's default blue instead of eCommerce's purple. */
.integration-page-cta-strip {
  background: #377FBF;
  padding: 26px 60px;
}

.integration-page-cta-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.integration-page-cta-strip h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}

.integration-page-cta-strip h2 strong {
  font-weight: 700;
}

@media (max-width: 760px) {
  .integration-page-cta-strip {
    padding: 34px 0;
  }

  .integration-page-cta-strip-inner {
    width: min(100% - 28px, 1180px);
    flex-direction: column;
    gap: 22px;
    text-align: center;
    justify-content: center;
  }

  .integration-page-cta-strip h2 {
    font-size: 26px;
    text-align: center;
  }
}


/* === ERP page (services-erp-solutions.html) === */
.erp-hero::after {
  background: #F37735;
}

.erp-hero .container,
.erp-capabilities .container {
  width: min(1170px, calc(100% - 40px));
}

@media (min-width: 1650px) {
  .erp-hero .container,
  .erp-capabilities .container {
    width: min(1440px, calc(100% - 40px));
  }
}

.erp-hero-plus-grid {
  display: grid;
  position: absolute;
  left: -40px;
  top: 12px;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .erp-hero-plus-grid {
    display: none;
  }
}

.erp-capabilities {
  background: #ffffff;
  padding: 90px 0 100px;
}

.erp-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.erp-capability {
  padding: 0 40px;
}

.erp-capability:first-child {
  padding-left: 0;
}

.erp-capability:last-child {
  padding-right: 0;
}

.erp-capability:not(:last-child) {
  border-right: 1px solid #e0e0e0;
}

.erp-capability-icon {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.erp-capability-title {
  margin: 0;
  padding: 30px 0 25px;
  color: #252525;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 33px;
  font-weight: 400;
  letter-spacing: normal;
}

.erp-capability p {
  margin: 0;
  padding: 0 0 35px 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 27px;
}

@media (max-width: 900px) {
  .erp-capabilities {
    padding: 60px 0 70px;
  }

  .erp-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .erp-capability {
    padding: 32px 0;
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0;
  }

  .erp-capability:first-child {
    padding-top: 0;
  }

  .erp-capability:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}


/* === Clients page (clients.html) === */
.clients-hero {
  background-color: #EF8B00;
  background-image: none;
  padding: 64px 0 0;
  overflow: hidden;
}

.clients-hero-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 44px;
}

.clients-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-self: start;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Dark hero backgrounds (client story pages, and the non-client "SAAS
   Plus" pages Strategy/Support/Software that reuse this same eyebrow)
   use prod's dedicated white asset rather than the gray/sage one. */
.clients-hero-eyebrow .page-hero-eyebrow-mark {
  background-image: url('../images/title_line_white.png');
}

.clients-hero-top h1 {
  margin: 0;
  color: #ffffff;
  justify-self: center;
}

.clients-hero-top-spacer {
  justify-self: end;
}

.clients-hero-featured {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 60px;
  align-items: center;
  padding-bottom: 70px;
}

@media (min-width: 1440px) {
  .clients-hero-top,
  .clients-hero-featured {
    width: min(1440px, calc(100% - 40px));
  }
}

.clients-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

.clients-featured-label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 25px;
  background: #5FBB39;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 1440px) {
  .clients-featured-label {
    padding: 5px 30px;
    font-size: 21px;
    line-height: 42px;
  }
}

.clients-featured-copy h2,
.clients-featured-copy h3 {
  margin: 0 0 18px;
  color: #ffffff;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 400;
}

.clients-featured-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 1.5;
}

.clients-featured-tags {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.clients-featured-tags li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.clients-featured-tag-check {
  flex: 0 0 auto;
  width: 25px;
  height: 21px;
}

/* 2x2 checkmark layout for pages with exactly 4 tags side by side in
   pairs (e.g. the Software page's Software/Strategy/Services/Support). */
.clients-featured-tags-grid {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(2, auto);
  column-gap: 50px;
  row-gap: 15px;
}

.clients-featured-tags-grid li {
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
}

.clients-featured-tag-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.clients-featured-tag-link:hover,
.clients-featured-tag-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 480px) {
  .clients-featured-tags-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }
}

/* Optional "View Case Study" link below a case-study hero's checkmark
   tags, for pages that link out to a written case study. */
.clients-case-study-link {
  display: inline-block;
  margin-top: 24px;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 700;
  text-decoration: underline;
}

/* Wraps two "View Case Study"-style links on the same line, separated
   by a pipe, for pages that link out to more than one written case
   study (e.g. Whiskas' extranet + mobile app case studies). */
.clients-case-study-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.clients-case-study-links .clients-case-study-link {
  margin-top: 0;
  white-space: nowrap;
}

.clients-case-study-sep {
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 700;
}

/* Top padding matches .clients-grid's own row gap (10px, 8px <=1279px)
   so the space above the first row reads the same as the space between
   rows, instead of a much larger gap under the hero. */
.clients-grid-section {
  background: #ffffff;
  padding: 10px 0 100px;
}

@media (max-width: 1279px) {
  .clients-grid-section {
    padding-top: 8px;
  }
}

@media (max-width: 900px) {
  .clients-hero {
    padding-top: 48px;
  }

  .clients-hero-top {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    text-align: center;
    padding-bottom: 36px;
  }

  .clients-hero-eyebrow,
  .clients-hero-top h1 {
    justify-self: center;
  }

  .clients-hero-top-spacer {
    display: none;
  }

  .clients-hero-featured {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 56px;
  }

  .clients-grid-section {
    padding-bottom: 70px;
  }
}

/* Below ~480px a tag label like "eCommerce Development" wraps to 2 lines;
   top-align the checkmark there instead of centering it against the
   whole wrapped block. */
@media (max-width: 480px) {
  .clients-featured-tags li {
    align-items: flex-start;
  }
}

/* === Reusable case-study hero (e.g. /cragar-wheels) ===
   Case-study pages reuse the Clients page's own hero structure verbatim
   (.clients-hero/.clients-hero-top/.clients-hero-featured/.clients-featured-*)
   minus its "featured client" badge+title, so layout, spacing and
   typography stay identical and only need editing in one place. Each
   page adds a one-line color modifier class for its own background. */
.cragar-wheels-hero {
  background-color: #2A5AAC;
}

.chrom-tech-hero {
  background-color: #78AAD6;
}

.black-rock-wheels-hero {
  background-color: #EF8B00;
}

.t3expo-hero {
  background-color: #454545;
}

.carlisle-brand-tires-hero {
  background-color: #0069AC;
}

.jangle-ai-hero {
  background-color: #528BF4;
}

.itp-hero {
  background-color: #0747A6;
}

.toms-shoes-hero {
  background-color: #78AAD6;
}

.ingram-micro-hero {
  background-color: #5086CC;
}

.us-navy-hero {
  background-color: #005398;
}

.davidson-academy-hero {
  background-color: #531014;
}

.us-army-hero {
  background-color: #687645;
}

.us-marine-corps-hero {
  background-color: #d71e00;
}

.california-fish-and-wildlife-hero {
  background-color: #282F6D;
}

.state-of-california-hero {
  background-color: #FDBA2D;
}

.department-of-defense-hero {
  background-color: #4372A3;
}

.army-corps-of-engineers-hero {
  background-color: #91A799;
}

.powells-books-hero {
  background-color: #C75145;
}

.bragg-live-food-products-hero {
  background-color: #F2352F;
}

.creative-circle-hero {
  background-color: #11395D;
}

.oshman-family-jcc-hero {
  background-color: #4C5BBA;
}

.hundred-percent-hero {
  background-color: #909090;
}

.nass-hero {
  background-color: #9B377E;
}

.whiskas-hero {
  background-color: #B73DA2;
}

.pedigree-hero {
  background-color: #FFC512;
}

.swbc-hero {
  background-color: #00ABB5;
}

.mars-petcare-hero {
  background-color: #27AED6;
}

/* Strategy page hero - unlike the client case-study heroes, the photo
   here already has its green field baked directly into the source
   image (people/laptop on the left blending into flat #559D37 on the
   right), so it's just a plain CSS background instead of a separately
   positioned/measured element - the image itself guarantees the copy
   always sits on flat color, at any crop. */
.strategy-hero {
  position: relative;
  background-color: #559D37;
  background-image: url('../images/strategy-hero.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* Matches the other .clients-hero pages' own (content-driven)
     rendered height (~742px at 1920px wide) - this hero's copy is
     shorter (no checkmark tags), so without an explicit floor it
     rendered noticeably shorter than every other hero, cramping the
     CTA into less vertical space than it gets elsewhere. Centering
     the two rows vertically (rather than leaving them flush to the
     top) keeps the shorter copy from reading as stranded above a
     gap of empty green once the section is this much taller than its
     own content needs. */
  min-height: 742px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Copy sits in the flat-color right side baked into the photo (~60%
   of its width in the source image). No image/text collision math
   needed here (unlike the Software hero) since the photo doesn't
   need to resize independently of the section - it's one plain
   background covering the whole hero. */
.strategy-hero .clients-hero-featured {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0 20px 70px 58%;
}

.strategy-hero .clients-featured-copy {
  width: 100%;
  max-width: 560px;
}

.strategy-hero .clients-featured-copy p {
  font-size: 18px;
  line-height: 27px;
}

.strategy-hero .clients-featured-copy p + p {
  margin-top: 20px;
}

.strategy-hero .clients-featured-copy .hero-button {
  margin-top: 30px;
}

@media (max-width: 900px) {
  .strategy-hero .clients-hero-featured {
    padding: 0 20px 70px;
  }

  .strategy-hero .clients-featured-copy {
    max-width: none;
  }

  /* At phone/tablet aspect ratios, background-size: cover would need
     to crop this very wide (2.4:1) photo down to a tall, narrow strip
     to fill the box - showing an unpredictable, mostly-arbitrary
     sliver of it. Falling back to the flat green it blends into on
     the right keeps things legible and intentional-looking instead. */
  .strategy-hero {
    background-image: none;
  }
}

/* Blue divider bar marking the hero/services-bar boundary, matching
   the same accent used on the Integration page's .page-hero::after. */
.strategy-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #377FBF;
}

/* Strategy page's 3-column capabilities grid below the services bar,
   matching the same layout used on the Ecommerce/Integration/ERP pages. */
.strategy-capabilities .container {
  width: min(1170px, calc(100% - 40px));
}

@media (min-width: 1650px) {
  .strategy-capabilities .container {
    width: min(1440px, calc(100% - 40px));
  }
}

.strategy-capabilities {
  background: #ffffff;
  padding: 90px 0 100px;
}

.strategy-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.strategy-capability {
  padding: 0 40px;
}

.strategy-capability:first-child {
  padding-left: 0;
}

.strategy-capability:last-child {
  padding-right: 0;
}

.strategy-capability:not(:last-child) {
  border-right: 1px solid #e0e0e0;
}

.strategy-capability-icon {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.strategy-capability-title {
  margin: 0;
  padding: 30px 0 25px;
  color: #252525;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 33px;
  font-weight: 400;
  letter-spacing: normal;
}

.strategy-capability p {
  margin: 0;
  padding: 0 0 35px 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 27px;
}

@media (max-width: 900px) {
  .strategy-capabilities {
    padding: 60px 0 70px;
  }

  .strategy-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .strategy-capability {
    padding: 32px 0;
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0;
  }

  .strategy-capability:first-child {
    padding-top: 0;
  }

  .strategy-capability:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* Strategy page's closing CTA strip - same layout as the
   Ecommerce/Integration/ERP strips, but in the hero's own green/blue
   pair (rather than reusing their green button) since the button here
   links to the same booking flow as the hero's own CTA. */
.strategy-cta-strip {
  background: #559D37;
  padding: 26px 60px;
}

.strategy-cta-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.strategy-cta-strip h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}

.strategy-cta-strip h2 strong {
  font-weight: 700;
}

.strategy-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 66px;
  padding: 20px 48px;
  background: #377FBF;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.strategy-cta-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.strategy-cta-button:hover::after,
.strategy-cta-button:focus-visible::after {
  left: 120%;
}

.strategy-cta-button:hover,
.strategy-cta-button:focus-visible {
  background: #2E6BA0;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 760px) {
  .strategy-cta-strip {
    padding: 34px 0;
  }

  .strategy-cta-strip-inner {
    width: min(100% - 28px, 1180px);
    flex-direction: column;
    gap: 22px;
    text-align: center;
    justify-content: center;
  }

  .strategy-cta-strip h2 {
    font-size: 26px;
    text-align: center;
  }

  .strategy-cta-button {
    min-width: 0;
    min-height: auto;
    padding: 14px 32px;
    font-size: 18px;
  }
}

/* === Shopify Expert Developers landing page === */

.shopify-hero {
  overflow: visible;
  background-color: #377FBF;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  padding: 64px 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Small white pill hanging off the header/hero seam, matching prod's
   "Powered by Shopify" badge - it's page-specific, not part of the
   shared header partial, so it's anchored to this hero's own top
   edge instead (same visual effect: it straddles the boundary). */
.shopify-powered-by {
  position: absolute;
  top: -27px;
  left: 50%;
  /* Above the mobile .site-header (z-index: 1000) and its nav
     dropdown (1001), not just the desktop header (100). */
  z-index: 1002;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 15px;
  background: #ffffff;
  border-radius: 0 0 20px 20px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 14px;
  white-space: nowrap;
}

.shopify-powered-by img {
  height: 18px;
  width: auto;
}

@media (min-width: 768px) {
  .shopify-powered-by {
    top: -17px;
  }
}

@media (min-width: 1440px) {
  .shopify-hero {
    padding: 35px 0 30px;
    min-height: 675px;
  }
}

/* Decorative "+" dot grid over the hero photo, matching prod's
   .client_hero .square-box widget - a normal block-flow element
   (not absolutely positioned), offset from the hero row above it. */
.shopify-hero-dots {
  display: block;
  z-index: 0;
  margin-left: 26px;
  margin-top: 30px;
  width: 160px;
  height: 140px;
  pointer-events: none;
}

.square-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  height: 100%;
}

@keyframes squareBoxFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.square-box ul li {
  position: relative;
  display: inline-block;
  width: 20%;
  height: 17%;
  padding: 10px 0;
  margin: 0 0 0 -4px;
  text-align: center;
  opacity: 0;
  animation: squareBoxFadeIn 3s ease 0s 1 normal forwards;
}

.square-box svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  fill: rgba(255, 255, 255, 0.5);
}

@media (min-width: 1440px) {
  .square-box svg {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 900px) {
  .shopify-hero-dots {
    display: none;
  }
}

.shopify-hero-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: 60px;
}

.shopify-hero-eyebrow-col {
  margin-top: 24px;
}

/* Prod's eyebrow text on this page runs slightly larger/wider-tracked
   than the shared .clients-hero-eyebrow default used elsewhere, so it's
   overridden here rather than changed site-wide. */
.shopify-hero .clients-hero-eyebrow {
  font-size: 16px;
  letter-spacing: 8px;
  line-height: 1;
}

.shopify-hero-content-col {
  padding-left: 30px;
}

.shopify-hero-content-col h1 {
  margin: 0 0 18px;
  color: #ffffff;
}

.shopify-hero-content-col .clients-featured-copy p {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.6;
}

.shopify-hero-content-col .hero-button {
  margin-top: 30px;
}

@media (min-width: 900px) {
  .shopify-hero-row {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

@media (min-width: 1440px) {
  .shopify-hero-row {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
  }
}

.shopify-intro-section {
  background: #F1F1F1;
  padding: 60px 15px;
  text-align: center;
}

.shopify-intro-section h2 {
  margin: 0 0 12px;
}

.shopify-intro-section h3 {
  margin: 0 0 20px;
  color: #377FBF;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 400;
}

.shopify-intro-section p {
  margin: 0;
  padding: 10px 0;
  color: #555555;
  font-size: 20px;
  line-height: 1.5;
}

.shopify-feature-section {
  background: #ffffff;
  padding: 100px 0 90px;
}

.shopify-feature {
  display: flex;
  align-items: center;
  gap: 100px;
}

/* The text column is a fixed 580px, so the section needs more than
   the standard 1180px .container width or the image (the visual
   focal point) ends up smaller than the text block. */
@media (min-width: 1440px) {
  .shopify-feature {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
  }
}

/* .shopify-feature-reverse is applied to the outer <section>, not the
   flex container itself, so this has to reach through as a descendant
   selector rather than targeting the class directly. */
.shopify-feature-reverse .shopify-feature {
  flex-direction: row-reverse;
}

/* Prod's text column is a fixed 580px (.feature-textbox .richtext),
   with the image filling the remaining flexible space - not a 50/50
   split. */
.shopify-feature-image {
  flex: 1 1 0;
  min-width: 0;
}

.shopify-feature-image a {
  display: block;
}

.shopify-feature-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.shopify-feature-copy {
  flex: 0 0 580px;
  max-width: 100%;
}

.shopify-feature-copy h2 {
  margin: 0;
}

.shopify-feature-copy p {
  width: 580px;
  max-width: 100%;
  margin: 20px 0 0;
  color: #555555;
  font-size: 20px;
  line-height: 36px;
}

/* Mirrors the home page's .ecommerce-cta-strip family for consistency
   with the rest of the site, just recolored per section. */
.shopify-cta-strip {
  padding: 26px 60px;
}

.shopify-cta-strip-purple {
  background: #743D8D;
}

.shopify-cta-strip-blue {
  background: #377FBF;
}

.shopify-cta-strip-orange {
  background: #F37735;
}

.shopify-cta-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* Alternates left/right like the home page's CTA strips
   (.ecommerce-cta-strip / .integration-cta-strip / .erp-cta-strip). */
.shopify-cta-strip-blue .shopify-cta-strip-inner {
  flex-direction: row-reverse;
}

.shopify-cta-strip h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}

.shopify-cta-strip h2 strong {
  font-weight: 700;
}

.shopify-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 66px;
  padding: 20px 48px;
  background: #A7CB00;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.shopify-cta-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.shopify-cta-button:hover::after,
.shopify-cta-button:focus-visible::after {
  left: 120%;
}

.shopify-cta-button:hover,
.shopify-cta-button:focus-visible {
  background: #97B900;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 900px) {
  .shopify-feature,
  .shopify-feature-reverse .shopify-feature {
    flex-direction: column;
    gap: 32px;
  }

  .shopify-feature-image {
    flex: 0 0 auto;
    width: 100%;
  }

  .shopify-feature-copy {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .shopify-hero-content-col h1 {
    font-size: 36px;
    line-height: 1.2;
  }

  .shopify-intro-section h2,
  .shopify-feature-copy h2 {
    font-size: 29px;
    line-height: 38px;
  }

  .shopify-feature-section {
    padding: 50px 0;
    text-align: center;
  }

  .shopify-feature-copy p {
    width: auto;
    margin: 15px 0 25px;
    line-height: 26px;
  }
}

@media (max-width: 760px) {
  .shopify-cta-strip {
    padding: 34px 0;
  }

  .shopify-cta-strip-inner,
  .shopify-cta-strip-blue .shopify-cta-strip-inner {
    width: min(100% - 28px, 1180px);
    flex-direction: column;
    gap: 22px;
    text-align: center;
    justify-content: center;
  }

  .shopify-cta-strip h2 {
    font-size: 26px;
    text-align: center;
  }

  .shopify-cta-button {
    min-width: 0;
    min-height: auto;
    padding: 14px 32px;
    font-size: 18px;
  }
}

/* Flush-to-the-section top/bottom and zero cropping are both
   guaranteed structurally here (bottom: 0 anchor + aspect-ratio, no
   forced width/max-width to fight against), which is what several
   earlier attempts using a fixed or vw-based width couldn't pull off
   at the same time - those forced a specific width regardless of the
   section's actual (content-driven) height, so the box's shape didn't
   match the photo's own ratio and something had to crop or gap. What
   CSS alone can't do is keep the copy column from overlapping this
   now-variable-width photo, since its rendered width depends on the
   section's real height, which isn't known until layout - that's
   handled by a small script (assets/js/global.js) that measures the
   photo's actual width and sets the copy's offset to match, or hides
   the photo entirely if there's no longer room for both. */
.software-hero {
  background-color: #75378F;
  position: relative;
  padding: 60px 0 50px;
}

.software-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: auto;
  aspect-ratio: 1068 / 809;
  background-image: url('../images/software-1.png');
  background-size: cover;
  z-index: 0;
  /* Laid out (so JS can measure its width) but not painted until
     global.js confirms there's enough room for it alongside the copy
     text - avoids a flash of the photo overlapping the text before
     the script runs. */
  visibility: hidden;
}

.software-hero-image.is-ready {
  visibility: visible;
}

@media (max-width: 767px) {
  .software-hero-image {
    display: none;
  }
}

.software-hero .clients-hero-top,
.software-hero .clients-hero-featured {
  position: relative;
  z-index: 1;
}

.software-hero .clients-hero-featured {
  display: block;
  width: 100%;
  max-width: none;
  /* Overridden inline by global.js once it measures the photo's
     actual rendered width; this is just the pre-JS/no-JS fallback. */
  padding: 0 20px;
}

.software-hero .clients-featured-copy {
  width: 100%;
  max-width: calc(560px * var(--hero-scale));
}

/* Centered instead of flush against the (now hidden) photo - set by
   global.js whenever there's no longer room for the photo, matching
   production's own behavior of centering the copy block once it gives
   up trying to keep the photo alongside it. Wider than the normal
   photo-adjacent column (700px vs 560px) so it actually fills the
   hero instead of reading as a small block lost in a lot of purple;
   harmless at phone widths already narrower than that, where there's
   no slack space left to visibly center within. */
.software-hero .clients-featured-copy.is-centered {
  max-width: min(700px, 100%);
  margin: 0 auto;
}

/* Everything in the hero (H1, badge, heading, paragraph, checkmarks)
   scales together with the viewport - shrinking from 1x at 1600px
   wide down to a readable floor of 0.7x at 1120px and below, which is
   what buys enough room to keep the photo visible down through tablet
   widths instead of it just disappearing once the text stops wrapping
   any further; and growing back up to 1.8x by 2880px+ so larger
   screens don't just leave the extra width as dead purple space. Once
   the photo is hidden entirely (.is-stacked, set by global.js), the
   text no longer needs to stay shrunk down to whatever size it took
   to squeeze next to a photo that isn't there anymore, so this snaps
   back to a full, comfortable 1x regardless of viewport width. */
.software-hero {
  --hero-scale: clamp(0.7, calc(100vw / 1600px), 1.8);
}

@media (max-width: 767px) {
  .software-hero {
    --hero-scale: 0.7;
  }
}

.software-hero.is-stacked {
  --hero-scale: 1;
}

.software-hero .clients-hero-top h1 {
  font-size: calc(60px * var(--hero-scale));
}

.software-hero .clients-featured-copy h2 {
  font-size: calc(34px * var(--hero-scale));
}

.software-hero .clients-featured-copy p {
  font-size: calc(21px * var(--hero-scale));
}

.software-hero .clients-featured-tags-grid li {
  font-size: calc(21px * var(--hero-scale));
}

.software-hero .clients-featured-tag-check {
  width: calc(25px * var(--hero-scale));
  height: calc(21px * var(--hero-scale));
}

.software-hero .clients-featured-label {
  font-size: calc(21px * var(--hero-scale));
  padding: calc(5px * var(--hero-scale)) calc(30px * var(--hero-scale));
  line-height: calc(42px * var(--hero-scale));
}

/* Longer badge text ("SOFTWARE AS A SERVICE", "STRATEGY AS A
   SERVICE") wrapped to 2 lines on phones at the scaled size above,
   making the badge look tall/fat. The wide letter-spacing was a big
   part of what pushed it past one line, so that's cut back here too,
   not just the font-size. Applied to the shared badge component
   (rather than re-scoped per hero) so it covers every "___ as a
   Service" page, not just Software. */
@media (max-width: 600px) {
  .clients-hero .clients-featured-label {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 8px 14px;
    line-height: 18px;
  }
}

/* Left-align the eyebrow dash mark specifically for this hero on
   mobile, rather than the centered layout every other case-study
   hero uses. */
@media (max-width: 900px) {
  .software-hero .clients-hero-top {
    justify-items: start;
    text-align: left;
  }

  .software-hero .clients-hero-eyebrow {
    justify-self: start;
  }
}

/* Keeps the 2x2 checkmark layout on mobile instead of the single
   column every other .clients-featured-tags-grid usage falls back to
   below 480px. */
@media (max-width: 480px) {
  .software-hero .clients-featured-tags-grid {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, auto);
    column-gap: 20px;
  }
}

/* === Reusable case-study image slider ===
   Auto-advancing slider for a case-study hero's screenshots (e.g.
   Oshman Family JCC's Main/Fitness/Preschool sites). Works with any
   number of .case-study-slide elements - add more slides and dots in
   the markup and assets/js/global.js picks them up automatically. */
.case-study-slider {
  position: relative;
  overflow: hidden;
}

.case-study-slider-track {
  display: flex;
  transition: transform 600ms ease;
}

.case-study-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.case-study-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.case-study-slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.case-study-slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.case-study-slider-dot.is-active {
  background: #ffffff;
}


/* CTA typography refinement */
.cta-strip .cta-btn a,
.cta-stripbox .cta-btn a,
.cta-btn.green-btn a{
    font-family:'Lato', Arial, sans-serif !important;
    font-size:18px !important;
    font-weight:600 !important;
    letter-spacing:.5px !important;
    text-transform:uppercase !important;
    padding:18px 42px !important;
}



/* CTA Font Match v3 - removed, consolidated into main button rule */

/* === Integration Section === */
.integration-home-section {
  background: #f4f4f4;
  padding: 92px 0 98px;
}

.integration-home-inner {
  display: grid;
  grid-template-columns: .98fr 1.02fr;
  gap: 72px;
  align-items: center;
}

.integration-home-copy {
  padding-top: 8px;
}

.integration-home-copy p {
  max-width: 590px;
  margin: 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.58;
  font-weight: 400;
}

.integration-home-copy p a {
  color: #A7CB00;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.integration-feature-list {
  margin-top: 58px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.integration-feature-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  column-gap: 26px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .2px;
}

.integration-feature-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}

.integration-home-image img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-left: auto;
}

/* Integration CTA Strip - blue to match live site */
.integration-cta-strip {
  background: #377FBF;
  padding: 26px 60px;
}

.integration-cta-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.integration-cta-strip h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-align: right;
}

.integration-cta-strip h2 strong {
  font-weight: 700;
}

.integration-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 66px;
  padding: 20px 48px;
  background: #A7CB00;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.integration-cta-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.integration-cta-button:hover::after,
.integration-cta-button:focus-visible::after {
  left: 120%;
}

.integration-cta-button:hover,
.integration-cta-button:focus-visible {
  background: #97B900;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 1020px) {
  .integration-home-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .integration-home-image { order: 1; }
  .integration-home-copy { order: 2; }

  .integration-home-copy h2 {
    text-align: center;
  }

  .integration-home-image img {
    margin: 0 auto;
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  .integration-cta-strip-inner {
    flex-direction: column;
    gap: 22px;
    text-align: center;
    justify-content: center;
  }

  .integration-cta-strip h2 {
    font-size: 26px;
    text-align: center;
  }

  .integration-cta-button {
    min-width: 0;
    min-height: auto;
    padding: 14px 32px;
    font-size: 18px;
  }
}

@media (max-width: 560px) {
  .integration-home-section {
    padding: 62px 0 70px;
  }

  .integration-home-copy h2 {
    font-size: 44px;
  }

  .integration-home-copy p {
    font-size: 17px;
  }

  .integration-feature-item {
    grid-template-columns: 58px 1fr;
    gap: 18px;
    font-size: 19px;
  }

  .integration-feature-icon {
    width: 48px;
    height: 48px;
  }
}

/* === Integration Image — match eCommerce size + decorations === */

/* Integration image — match eCommerce size */
.integration-home-image img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-left: auto;
}

.integration-image-link {
  position: relative;
  display: block;
  max-width: 620px;
  margin-left: auto;
  line-height: 0;
  text-decoration: none;
}

.integration-image-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* Clip the image to the hex shape */
.integration-image-link img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

/* Green overlay on hover — covers exactly the clipped image area */
.integration-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(167, 203, 0, .48);
  mix-blend-mode: multiply;
  transition: opacity .22s ease;
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

.integration-image-link:hover::after,
.integration-image-link:focus-visible::after {
  opacity: 1;
}

/* //// and ++++ decorations */
.integration-image-decorations {
  position: relative;
  pointer-events: none;
}

/* Dashed line — matches eCommerce section */
/* Dashed line — pseudo-element on image container, matches HubSpot pattern */
.integration-home-image {
  position: relative;
}

.integration-home-image::after {
  content: "";
  position: absolute;
  left: -30px;
  bottom: 60px;
  width: 260px;
  height: 30px;
  background: url("/assets/images/dashed-line.webp") no-repeat left center / contain;
  pointer-events: none;
}

.integration-image-decorations {
  display: none;
}

/* integration-home-image needs overflow visible */
.integration-home-image {
  overflow: visible;
}

/* Plus signs via ::before on image container */
.integration-home-image::before {
  content:
    "+ + + + +\A+ + + + +\A+ + + + +\A+ + + + +\A+ + + + +";
  position: absolute;
  bottom: 0px;
  right: -45px;
  color: #e2ebb5;
  font-size: 16px;
  letter-spacing: 10px;
  line-height: 2.2;
  white-space: pre;
  pointer-events: none;
}

/* Integration plus signs — CSS text approach, bottom-left of hex */
.integration-home-image .square-box {
  display: none;
}

/* Feature items as links — no underline, no color change */
a.integration-feature-item {
  color: #555555;
  text-decoration: none;
}

a.integration-feature-item:hover,
a.integration-feature-item:focus-visible {
  color: #555555;
  text-decoration: none;
}

a.integration-feature-item span {
  text-decoration: none;
}

@media (max-width: 1020px) {
  .integration-image-link {
    display: block;
    max-width: 480px;
    margin: 0 auto;
  }

  .integration-home-image::before,
  .integration-home-image::after {
    display: none;
  }
}

/* === ERP Section === */
.erp-home-section {
  background: #ffffff;
  padding: 92px 0 98px;
}

.erp-home-inner {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 72px;
  align-items: center;
}

.erp-home-image {
  position: relative;
  overflow: visible;
}

.erp-home-image img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
}

.erp-image-link {
  position: relative;
  display: inline-block;
  max-width: 620px;
  line-height: 0;
  text-decoration: none;
}

.erp-image-link img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

.erp-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(167, 203, 0, .48);
  mix-blend-mode: multiply;
  transition: opacity .22s ease;
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

.erp-image-link:hover::after,
.erp-image-link:focus-visible::after {
  opacity: 1;
}

/* Dashed line decoration */
.erp-home-image::after {
  content: "";
  position: absolute;
  left: -30px;
  bottom: 60px;
  width: 260px;
  height: 30px;
  background: url("/assets/images/dashed-line.webp") no-repeat left center / contain;
  pointer-events: none;
}

/* Plus signs */
.erp-home-image::before {
  content:
    "+ + + + +\A+ + + + +\A+ + + + +\A+ + + + +\A+ + + + +";
  position: absolute;
  bottom: 0px;
  right: -45px;
  color: #e2ebb5;
  font-size: 16px;
  letter-spacing: 10px;
  line-height: 2.2;
  white-space: pre;
  pointer-events: none;
}

.erp-home-copy {
  padding-top: 8px;
}

.erp-home-copy p {
  max-width: 590px;
  margin: 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.58;
  font-weight: 400;
}

.erp-home-copy p a {
  color: #A7CB00;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.erp-feature-list {
  margin-top: 58px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.erp-feature-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  column-gap: 26px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .2px;
  text-decoration: none;
}

.erp-feature-item:hover,
.erp-feature-item:focus-visible {
  color: #555555;
  text-decoration: none;
}

.erp-feature-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}

/* ERP CTA Strip — orange like production site */
.erp-cta-strip {
  background: #F37735;
  padding: 26px 60px;
}

.erp-cta-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.erp-cta-strip h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
}

.erp-cta-strip h2 strong {
  font-weight: 700;
}

.erp-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 66px;
  padding: 20px 48px;
  background: #A7CB00;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.erp-cta-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.erp-cta-button:hover::after,
.erp-cta-button:focus-visible::after {
  left: 120%;
}

.erp-cta-button:hover,
.erp-cta-button:focus-visible {
  background: #97B900;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 1020px) {
  .erp-home-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .erp-home-image { order: 1; }
  .erp-home-copy { order: 2; }

  .erp-home-copy h2 {
    text-align: center;
  }

  .erp-home-image img {
    margin: 0 auto;
    max-width: 560px;
  }

  .erp-image-link {
    display: block;
    max-width: 560px;
    margin: 0 auto;
  }

  .erp-home-image::before,
  .erp-home-image::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .erp-cta-strip {
    padding: 26px 20px;
  }

  .erp-cta-strip-inner {
    flex-direction: column;
    gap: 22px;
    text-align: center;
  }

  .erp-cta-strip h2 {
    font-size: 22px;
    text-align: center;
  }

  .erp-cta-button {
    min-width: 0;
    min-height: auto;
    padding: 14px 32px;
    font-size: 18px;
  }
}

@media (max-width: 560px) {
  .erp-home-section {
    padding: 62px 0 70px;
  }

  .erp-home-copy h2 {
    font-size: 44px;
  }

  .erp-feature-item {
    grid-template-columns: 58px 1fr;
    gap: 18px;
    font-size: 19px;
  }

  .erp-feature-icon {
    width: 48px;
    height: 48px;
  }
}

/* === Home Clients Section === */
.clients-home-section {
  position: relative;
  background-color: #fbfbfb;
  background-image: radial-gradient(circle, #d8d8d8 1px, transparent 1px);
  background-size: 15px 15px;
  padding: 90px 0 100px;
  overflow: hidden;
}

.clients-home-section::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #d5d5d5;
  pointer-events: none;
}

.clients-home-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #377FBF;
  pointer-events: none;
}

.clients-heading,
.insights-heading {
  margin: 0 0 46px;
  text-align: center;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Side margin matches the grid's own row/column gap (8px below 1279px,
   see the gap-tightening rule further down) so the whitespace around
   the grid reads the same as the whitespace between tiles. */
@media (max-width: 980px) {
  .clients-grid {
    width: min(1180px, calc(100% - 16px));
    margin: 0 auto;
  }
}

.client-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  text-decoration: none;
  background: #eeeeee;
}

.client-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: filter .3s ease;
}

/* Green corner wedge, revealed on hover of this specific tile */
.client-tile::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 42%;
  background: #A7CB00;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 2;
}

.client-tile:hover::after,
.client-tile:focus-visible::after {
  opacity: 1;
}

.client-tile-arrow {
  position: absolute;
  /* Centered on the wedge's centroid (a right triangle's centroid sits
     1/3 of the way in from each edge, not at the corner) */
  right: 6%;
  bottom: 6%;
  width: 16%;
  aspect-ratio: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 3;
}

.client-tile-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.client-tile:hover .client-tile-arrow,
.client-tile:focus-visible .client-tile-arrow {
  opacity: 1;
}

/* When hovering the grid, dim/greyscale every tile except the one under the cursor */
.clients-grid:hover .client-tile img {
  filter: grayscale(1) brightness(1.15) contrast(.9) opacity(.6);
}

.clients-grid:hover .client-tile:hover img,
.clients-grid:hover .client-tile:focus-visible img {
  filter: none;
}

/* Placeholder tiles for grids awaiting real thumbnails (e.g. the
   Software page's services grid before its final images are supplied).
   Reuses .client-tile's sizing/hover wedge, just swaps the <img> for a
   centered label. */
.client-tile-placeholder-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9a9a;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Software page's partner/software logo grid. Most of the source
   images already have their own light-gray backing baked in at a
   square size, so the default .client-tile object-fit: cover crop
   (into the generous padding baked around each logo) works fine as
   for client screenshots. Acumatica's logo is a transparent, wide
   lockup with no baked-in background, so it needs object-fit: contain
   plus a matching gray background instead of being stretched/cropped
   like the square ones. */
.software-partner-tile.is-contain img {
  object-fit: contain;
  padding: 15%;
  background: #DDDDDD;
}

.clients-more-wrap {
  text-align: center;
  margin-top: 54px;
  position: relative;
  z-index: 1;
}

.clients-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 20px 46px;
  background: #A7CB00;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.clients-more-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.clients-more-button:hover::after,
.clients-more-button:focus-visible::after {
  left: 120%;
}

.clients-more-button:hover,
.clients-more-button:focus-visible {
  background: #97B900;
  color: #ffffff;
  text-decoration: none;
}

/* Gap tightening matches production breakpoints from the live HubSpot
   .client-box CSS. Tiles use a fixed 3:2 aspect-ratio (not a fixed px
   height) so they stay landscape-proportioned at every column width
   instead of turning portrait-tall on narrower columns. */
@media (max-width: 1279px) {
  .clients-grid {
    gap: 8px;
  }
}

@media (max-width: 1200px) {
  .clients-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Below 992px production breakpoints are unconfirmed — using a reasonable fallback */
@media (max-width: 991px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .clients-heading {
    font-size: 44px;
  }
}

/* === Home Insights Section === */
.insights-home-section {
  background: #ffffff;
  padding: 54px 0 98px;
}

/* Wider than the standard 1180px container so the cards read as large as
   production's, instead of being squeezed into the same width used by
   the hero/copy sections. */
.insights-home-section .container {
  width: min(1400px, calc(100% - 40px));
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.insights-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #f0f0f0;
  border: 1px solid transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  transition: box-shadow .5s ease, transform .5s ease, border-color .5s ease;
}

/* Matches production's .blog-feedcol:focus-within .blog-feedcolinner behavior */
.insights-card:hover,
.insights-card:focus-within {
  border-color: #bdbdbd;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, .2);
  transform: scale(1.07);
  z-index: 2;
}

.insights-card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
  color: inherit;
}

.insights-card-image {
  aspect-ratio: 2.35 / 1;
  background: #e2e2e2 no-repeat center / cover;
}

.insights-card-body {
  padding: 18px 20px 22px;
}

.insights-card-title {
  margin: 0 0 24px;
  color: #2b2b2b;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}

.insights-card-date {
  margin-bottom: 24px;
  color: #54A5F6;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.insights-card-excerpt {
  margin: 0 0 16px;
  color: #666666;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.insights-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.insights-card-avatar {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #c9c9c9 no-repeat center / cover;
  flex: 0 0 auto;
}

.insights-card-author {
  color: #444444;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 13px;
}

/* Corner wedge + arrow: blue by default, turns green on card hover/focus (matches production's .read-morelink behavior) */
.insights-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20%;
  height: 11%;
  background: #377FBF;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  transition: background-color .25s ease;
}

.insights-card:hover::after,
.insights-card:focus-within::after {
  background: #A7CB00;
}

.insights-card-arrow {
  position: absolute;
  right: 6.7%;
  bottom: 3.7%;
  width: 11%;
  aspect-ratio: 4 / 3;
  transform: translate(50%, 50%);
  z-index: 1;
  pointer-events: none;
}

.insights-card-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.insights-more-wrap {
  text-align: center;
  margin-top: 54px;
}

.insights-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 20px 46px;
  background: #A7CB00;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.insights-more-button::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  background: #ffffff;
  opacity: .2;
  transform: rotate(35deg);
  transition: all ease .7s;
}

.insights-more-button:hover::after,
.insights-more-button:focus-visible::after {
  left: 120%;
}

.insights-more-button:hover,
.insights-more-button:focus-visible {
  background: #97B900;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 1020px) {
  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .insights-heading {
    font-size: 44px;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }
}

/* === AI Readiness landing page === */
.ai-readiness-hero-eyebrow {
  margin-bottom: 16px;
  color: #999999;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.ai-readiness-hero::after {
  background: linear-gradient(to right, #377FBF 0 65%, #A7CB00 65% 100%);
}

@media (min-width: 981px) {
  .ai-readiness-hero {
    background-color: #ffffff;
    background-image: url('../images/hero-banner-background.webp');
    background-repeat: no-repeat;
    background-position: right -60px top;
    background-size: 100% auto;
  }
}

.ai-readiness-hero h1 {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.ai-readiness-hero-tagline {
  margin: 20px auto 0;
  max-width: 560px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-style: italic;
  line-height: 1.5;
}

.ai-readiness-hero-actions {
  justify-content: center;
  margin-top: 36px;
}

/* .hero-plus-grid positions itself relative to the nearest positioned
   ancestor. On the home hero that's the left-aligned .home-hero-actions
   itself, which puts the dots naturally beside the buttons. Here the
   actions row is centered, so the dots need their own ancestor sized to
   the button group - not the full-width row - or they'd float off in
   the row's left gutter instead of sitting next to the buttons. */
.ai-readiness-hero-buttons {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

.ai-readiness-problem-solution {
  background: #ffffff;
  padding: 90px 0 60px;
}

/* Narrower than the site's usual 1180px container: at wide viewports the
   right column's text doesn't reach a full-width container's right edge,
   which reads as the whole block being shifted left. Capping it tighter
   keeps the visible content closer to the actual center of the page. */
.ai-readiness-problem-solution .container,
.ai-readiness-why .container {
  width: min(1040px, calc(100% - 40px));
}

.ai-readiness-ps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 60px;
  text-align: left;
}

.ai-readiness-problem h2,
.ai-readiness-solution h2 {
  margin: 0 0 20px;
  color: #A7CB00;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ai-readiness-problem p,
.ai-readiness-solution > p {
  margin: 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

.ai-readiness-solution h3 {
  margin: 0 0 16px;
  color: #377FBF;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

.ai-readiness-steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ai-readiness-steps li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.ai-readiness-step-num {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #377FBF;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.ai-readiness-steps strong {
  display: block;
  margin-bottom: 4px;
  color: #2b2b2b;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.ai-readiness-steps p {
  margin: 0;
  color: #666666;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.ai-readiness-callout {
  position: relative;
  margin-top: 24px;
  padding: 24px 28px 24px 32px;
  border-radius: 10px;
  background: #081D42;
  overflow: hidden;
}

.ai-readiness-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #A7CB00;
}

.ai-readiness-callout p {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
}

.ai-readiness-diagram {
  margin-top: 28px;
}

.ai-readiness-diagram-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.ai-readiness-diagram-trigger img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(21, 34, 56, .10);
  transition: box-shadow ease .3s;
}

.ai-readiness-diagram-trigger:hover img,
.ai-readiness-diagram-trigger:focus-visible img {
  box-shadow: 0 18px 44px rgba(21, 34, 56, .18);
}

/* === Diagram lightbox === */
.ai-readiness-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  background: rgba(10, 20, 35, .85);
  cursor: pointer;
}

.ai-readiness-lightbox[hidden] {
  display: none;
}

.ai-readiness-lightbox-box {
  position: relative;
  max-width: 1100px;
  max-height: 100%;
}

.ai-readiness-lightbox-box img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.ai-readiness-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #377FBF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

@media (max-width: 560px) {
  .ai-readiness-lightbox-close {
    top: -14px;
    right: 0;
  }
}

.ai-readiness-why {
  background: #F1F6FA;
  padding: 60px 0 90px;
}

.ai-readiness-why-title {
  margin: 0 0 50px;
  text-align: center;
}

.ai-readiness-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}

.ai-readiness-why-lead {
  margin: 0 0 16px;
  color: #14213D;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.ai-readiness-why-copy p {
  margin: 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

.ai-readiness-experience h3 {
  margin: 0 0 20px;
  color: #A7CB00;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ai-readiness-tags {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 28px;
  margin: 0;
  padding: 0;
}

.ai-readiness-tag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #2b2b2b;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.ai-readiness-tag::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: #377FBF;
}

/* Matches the exact per-item dot colors from the source PDF/pptx
   (a per-row swap, not a plain odd/even alternation). */
.ai-readiness-tag:nth-child(2)::before,
.ai-readiness-tag:nth-child(3)::before,
.ai-readiness-tag:nth-child(6)::before {
  background: #A7CB00;
}

.ai-readiness-cta-strip {
  background: #14213D;
  padding: 60px 0;
}

.ai-readiness-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.ai-readiness-cta-strip h2 {
  margin: 0;
  max-width: 480px;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

.ai-readiness-cta-strip h2 strong {
  font-weight: 700;
}

.ai-readiness-cta-strip-actions {
  margin: 0;
}

@media (max-width: 900px) {
  .ai-readiness-ps-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .ai-readiness-why-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ai-readiness-cta-strip-inner {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .ai-readiness-tags {
    grid-template-columns: 1fr;
  }
}

/* === Contact page === */
.contact-hero {
  position: relative;
  padding-bottom: 70px;
  background: url("../images/contact/hero-banner.png") center top / cover no-repeat;
  text-align: center;
}

.contact-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(48px, 5.5vw, 72px);
}

.contact-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: var(--blue);
}

.contact-kicker {
  margin: 0 0 12px;
  color: #a7cb00;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.contact-full-div-line {
  width: 100%;
  height: 17px;
  background: url("../images/contact/divider-line.png") repeat-x center;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 56px auto 50px;
  max-width: 900px;
}

.contact-option {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 20px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(21,34,56,.06);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.contact-option:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(21,34,56,.10);
}

.contact-option-icon { width: 48px; height: 48px; display: grid; place-items: center; }
.contact-option-icon svg,
.contact-option-icon img { width: 100%; height: 100%; object-fit: contain; }
.contact-option-label { font-size: 15px; font-weight: 700; letter-spacing: 2px; }

.contact-option-email { color: var(--accent); }
.contact-option-email:hover,
.contact-option-email.is-active { border-color: var(--accent); }

.contact-option-meeting { color: var(--green-sat); }
.contact-option-meeting:hover,
.contact-option-meeting.is-active { border-color: var(--green-sat); }

.contact-option-phone { color: var(--purple); }
.contact-option-phone:hover,
.contact-option-phone.is-active { border-color: var(--purple); }

.contact-panel { position: relative; margin-top: 0; }

.contact-panel-close {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  color: white;
  font-size: 30px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  opacity: .9;
  transition: opacity .2s ease, background .2s ease;
}

.contact-panel-close:hover { opacity: 1; background: rgba(0,0,0,.4); }

.contact-panel-inner { max-width: 720px; padding: 56px 0; }
.contact-panel-inner-centered { text-align: center; }
.contact-panel-meeting .contact-panel-inner { padding: 30px 0; }

.contact-panel-email { background: var(--accent); }
.contact-panel-meeting { background: var(--green-sat); }
.contact-panel-phone { background: var(--purple); }

.contact-panel h2 { color: white; margin-bottom: 28px; }
.contact-panel-phone h2 { margin-bottom: 12px; }
.contact-panel-phone p { color: rgba(255,255,255,.85); }

.hubspot-form-loading,
.hubspot-form-error { color: white; }
.hubspot-form-error a { color: white; text-decoration: underline; }

.contact-panel-email h2 { text-align: center; text-transform: uppercase; }

/* CSS layer for the HubSpot form: gives correct sizing/layout on first
   paint. assets/js/contact.js's forceEmailFormStyles() only enforces
   colors and the submit button via inline styles at runtime - it never
   touches input/textarea width or padding, so without this block the
   fields fall back to HubSpot's own (much narrower) default styling. */
#hubspot-email-form,
#hubspot-email-form label,
#hubspot-email-form legend,
#hubspot-email-form .hs-field-desc,
#hubspot-email-form .hs-form-field,
#hubspot-email-form .hs-richtext,
#hubspot-email-form .legal-consent-container,
#hubspot-email-form .legal-consent-container p,
#hubspot-email-form .hs-error-msgs,
#hubspot-email-form .hs-error-msgs label { color: white !important; }
#hubspot-email-form label { display: block !important; margin-bottom: 6px !important; font-size: 15px !important; font-weight: 600 !important; }
#hubspot-email-form .hs-form-field { margin-bottom: 18px !important; }
#hubspot-email-form .legal-consent-container { font-size: 14px !important; line-height: 1.5 !important; margin-top: 16px !important; }
#hubspot-email-form .legal-consent-container a { color: white !important; }
#hubspot-email-form input,
#hubspot-email-form textarea,
#hubspot-email-form select { box-sizing: border-box; width: 100% !important; padding: 14px 16px !important; border: 0 !important; border-radius: 4px !important; font-family: inherit !important; font-size: 16px !important; color: #333 !important; }
#hubspot-email-form .hs-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  float: none !important;
  margin-top: 18px !important;
  padding: 17px 32px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #a7cb00 !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  cursor: pointer !important;
}
#hubspot-email-form .hs-button:hover { background: #91b000 !important; }

.contact-phone-number {
  display: inline-block;
  color: white;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 56px;
  font-weight: 400;
  text-decoration: none;
}

.meetings-iframe-container {
  background: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(21,34,56,.14);
  min-height: 650px;
}
.meetings-iframe-container iframe { width: 100%; border: 0; display: block; }

.contact-location-section { background: var(--bg); text-align: center; }

.contact-location-card {
  max-width: 480px;
  margin: 40px auto 0;
  padding: 0 0 40px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(21,34,56,.06);
  text-align: center;
  overflow: hidden;
}

.contact-location-photo { width: 100%; height: 220px; object-fit: cover; margin-bottom: 28px; }

.contact-location-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.contact-location-pin { width: 20px; height: auto; }
.contact-location-card p { margin-bottom: 14px; padding: 0 30px; }
.contact-location-phone { color: var(--blue); font-weight: 600; }

@media (max-width: 700px) {
  .contact-options { grid-template-columns: 1fr; }
  .contact-phone-number { font-size: 42px; }
}

/* === Support page === */
.support-hero {
  position: relative;
  background-color: #387FBF;
  background-image: url('../images/fortuitas_support_NEW.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 742px;
  display: flex;
  flex-direction: column;
  /* Unlike .strategy-hero, this page's copy is short enough (one short
     paragraph) that centering the whole flex column vertically shoved
     the eyebrow/H1 noticeably lower than every other .clients-hero page.
     Anchoring the top block to the top keeps it at the same position as
     the rest of the site, and the featured block below sits a fixed
     distance under it (rather than centering in the leftover height,
     which was still too far down) so it reads at roughly the same
     height as Strategy's badge/copy/CTA despite the shorter copy. */
  justify-content: flex-start;
}

.support-hero .clients-hero-featured {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  padding: 40px 20px 70px 60%;
}

.support-hero .clients-featured-copy {
  width: 100%;
  max-width: 560px;
}

.support-hero .clients-featured-copy p {
  font-size: 18px;
  line-height: 27px;
}

.support-hero .clients-featured-copy .hero-button {
  margin-top: 30px;
}

.support-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #5FBC39;
}

/* Small cluster of "+" marks over the subject's right shoulder in the
   hero photo, matching the reference design. Positioned as percentages
   of the hero box (rather than baked into the image) so it stays
   roughly aligned with the subject as background-size: cover crops the
   photo differently across viewport widths. */
.support-hero-sparkle {
  position: absolute;
  left: 9%;
  top: 46%;
  width: 130px;
  height: 170px;
  pointer-events: none;
}

.support-hero-sparkle i {
  position: absolute;
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-style: normal;
  line-height: 1;
}

.support-hero-sparkle i::before {
  content: "+";
}

.support-hero-sparkle i:nth-child(1) { left: 0;   top: 8%;  font-size: 15px; opacity: .55; }
.support-hero-sparkle i:nth-child(2) { left: 24%; top: 0;   font-size: 20px; opacity: .8; }
.support-hero-sparkle i:nth-child(3) { left: 52%; top: 14%; font-size: 13px; opacity: .5; }
.support-hero-sparkle i:nth-child(4) { left: 10%; top: 30%; font-size: 22px; opacity: .9; }
.support-hero-sparkle i:nth-child(5) { left: 40%; top: 38%; font-size: 15px; opacity: .6; }
.support-hero-sparkle i:nth-child(6) { left: 18%; top: 54%; font-size: 18px; opacity: .75; }
.support-hero-sparkle i:nth-child(7) { left: 46%; top: 60%; font-size: 13px; opacity: .5; }
.support-hero-sparkle i:nth-child(8) { left: 6%;  top: 74%; font-size: 20px; opacity: .85; }
.support-hero-sparkle i:nth-child(9) { left: 32%; top: 82%; font-size: 14px; opacity: .55; }

@media (max-width: 900px) {
  .support-hero .clients-hero-featured {
    padding: 0 20px 70px;
  }

  .support-hero .clients-featured-copy {
    max-width: none;
  }

  /* At phone/tablet aspect ratios, background-size: cover would crop
     this wide photo down to an unpredictable narrow strip - falling
     back to the flat blue it blends into on the right keeps things
     legible and intentional-looking instead. */
  .support-hero {
    background-image: none;
    /* The 742px desktop floor (sized to match the photo hero) left a
       large empty gap below the CTA once the content stacks to full
       width and the photo is gone - let the hero size to its own
       (now top-anchored, single-column) content instead. */
    min-height: 0;
  }

  .support-hero-sparkle {
    display: none;
  }
}

.support-cta-strip {
  background: #377FBF;
  padding: 26px 60px;
}

.support-cta-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.support-cta-strip h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}

.support-cta-strip h2 strong {
  font-weight: 700;
}

@media (max-width: 760px) {
  .support-cta-strip {
    padding: 34px 0;
  }

  .support-cta-strip-inner {
    width: min(100% - 28px, 1180px);
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* === About page === */
.about-hero {
  position: relative;
  background: #ffffff;
  padding: 64px 0 56px;
  text-align: center;
}

.about-hero-inner {
  width: min(900px, calc(100% - 40px));
}

.about-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 28px;
  text-align: left;
}

/* Prod sizes this eyebrow (and About's other two "5-dash"-style
   eyebrows, Our History / Leadership) the same as the Insights "OUR
   BLOG" eyebrow: 73x16 up to 1600px viewports, 87x17 above that, with
   matching font-size/letter-spacing tiers - not the narrower footprint
   these previously used with the pure-CSS hairline stand-in. */
.about-hero-eyebrow,
.our-history-eyebrow,
.leadership-eyebrow {
  font-size: 12px;
  letter-spacing: 6px;
}

.about-hero-eyebrow .page-hero-eyebrow-mark,
.our-history-eyebrow .page-hero-eyebrow-mark,
.leadership-eyebrow .page-hero-eyebrow-mark {
  width: 73px;
  height: 16px;
}

@media (min-width: 1601px) {
  .about-hero-eyebrow,
  .our-history-eyebrow,
  .leadership-eyebrow {
    font-size: 14px;
    letter-spacing: 8px;
  }

  .about-hero-eyebrow .page-hero-eyebrow-mark,
  .our-history-eyebrow .page-hero-eyebrow-mark,
  .leadership-eyebrow .page-hero-eyebrow-mark {
    width: 87px;
    height: 17px;
  }
}

.about-hero-mission {
  position: relative;
  display: inline-block;
  margin: 0 auto 20px;
}

.about-hero-mission h1 {
  font-size: 68px;
}

/* 5x5 grid of "+" marks, echoing the loose scattered clusters used on
   other page heroes (e.g. Support) but as a tidy grid here, since this
   hero sits on a plain white background rather than a photo. Animates
   in on its own, timed to start once the image/copy below (both
   .reveal-on-scroll.reveal-slow, ~1.8s) have finished revealing -
   not scroll-triggered, since this hero is above the fold and those
   reveals fire almost immediately on page load anyway. */
.about-hero-plus-grid {
  position: absolute;
  top: -6px;
  right: -210px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 22px;
  animation: aboutPlusReveal 1s ease-out 2.2s both;
}

.about-hero-plus-grid i {
  display: block;
  width: 18px;
  font-style: normal;
  font-size: 19px;
  line-height: 1;
  color: #cccccc;
  text-align: center;
}

.about-hero-plus-grid i::before {
  content: "+";
}

@keyframes aboutPlusReveal {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-plus-grid {
    animation: none;
    opacity: 1;
  }
}

.about-hero-image {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto 4px;
}

.about-hero-copy {
  max-width: 620px;
  margin: 0 auto;
  color: #555555;
  font-size: 22px;
  line-height: 1.6;
}

.about-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #377FBF;
}

@media (max-width: 900px) {
  .about-hero-plus-grid {
    display: none;
  }

  .about-hero-mission h1 {
    font-size: 56px;
  }
}

/* === About page: Core Values slider ===
   Auto-advancing 3-slide crossfade (Quality/Integrity/Service), each
   slide a giant faint watermark word behind a smaller solid heading,
   matching the production page. JS in assets/js/core-values-slider.js
   toggles .is-active every 3s with a 500ms crossfade; dots allow
   jumping directly to a slide. */
.core-values-slider {
  position: relative;
  background: #F1F1F1;
  border-top: 1px solid #EAEAEA;
  padding: 70px 0;
  text-align: center;
  overflow: hidden;
}

.core-values-kicker {
  margin: 0 0 36px;
  color: #C4C4C4;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .core-values-kicker {
    font-size: 24px;
  }
}

.core-values-track {
  position: relative;
  height: clamp(90px, 15vw, 200px);
}

.core-values-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.core-values-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.core-values-backtitle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: rgba(255, 255, 255, .55);
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: clamp(56px, 9.5vw, 128px);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.core-values-slide h2 {
  position: relative;
  margin: 0;
}

.core-values-heading {
  position: relative;
  z-index: 1;
  display: inline-block;
}

/* Small gray corner-bracket flourishes framing the H2 heading itself
   (not the giant watermark behind it), offset diagonally near its
   corners. Which two corners are used varies per slide, matching the
   production design (Quality: top-left/bottom-right, Integrity:
   top-right/bottom-left, Service: top-left/bottom-right). */
.core-values-bracket {
  position: absolute;
  width: 34px;
  height: 60px;
  border: 3px solid #C3C3C3;
}

.core-values-bracket-tl {
  top: -38px;
  left: -58px;
  border-bottom: 0;
  border-right: 0;
}

.core-values-bracket-br {
  bottom: -38px;
  right: -58px;
  border-top: 0;
  border-left: 0;
}

.core-values-bracket-tr {
  top: -38px;
  right: -58px;
  border-bottom: 0;
  border-left: 0;
}

.core-values-bracket-bl {
  bottom: -38px;
  left: -58px;
  border-top: 0;
  border-right: 0;
}

@media (max-width: 767px) {
  .core-values-bracket {
    width: 20px;
    height: 36px;
    border-width: 2px;
  }

  .core-values-bracket-tl,
  .core-values-bracket-tr {
    top: -20px;
  }

  .core-values-bracket-bl,
  .core-values-bracket-br {
    bottom: -20px;
  }

  .core-values-bracket-tl,
  .core-values-bracket-bl {
    left: -26px;
  }

  .core-values-bracket-tr,
  .core-values-bracket-br {
    right: -26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .core-values-slide {
    transition: none;
  }
}

.core-values-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.core-values-dot {
  appearance: none;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 2px solid #C3C3C3;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.core-values-dot.is-active {
  background: #999999;
  border-color: #999999;
}

/* === About page: Our History === */
.our-history-section {
  position: relative;
  background: #2797CC;
  padding: 150px 0;
}

.our-history-inner {
  width: min(705px, calc(100% - 40px));
  text-align: left;
}

.our-history-eyebrow {
  color: rgba(255, 255, 255, .8);
  margin-bottom: 40px;
}

/* Blue section background - use prod's dedicated white asset. */
.our-history-eyebrow .page-hero-eyebrow-mark {
  background-image: url('../images/title_line_white.png');
}

.our-history-copy {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 23px;
  line-height: 32px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: left;
}

.our-history-copy-lede {
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0;
}

@media (min-width: 1201px) and (max-width: 1600px) {
  .our-history-section {
    padding: 110px 0;
  }
}

@media (max-width: 900px) {
  .our-history-eyebrow {
    justify-content: flex-start;
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .our-history-section {
    padding: 70px 0;
  }

  .our-history-copy {
    font-size: 19px;
    line-height: 1.6;
  }
}

/* === About page: Leadership === */
.leadership-section {
  position: relative;
  background: #ffffff;
  padding: 100px 0;
  text-align: center;
}

.leadership-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #377FBF;
}

.leadership-eyebrow {
  margin-bottom: 40px;
}

.leadership-heading {
  max-width: 700px;
  margin: 0 auto 64px;
}

.leadership-copy {
  margin: 20px 0 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 1.5;
}

.leadership-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px 48px;
}

.leadership-member {
  width: 260px;
  scroll-margin-top: 110px;
}

.leadership-photo {
  width: 220px;
  height: 220px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
}

.leadership-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter .6s ease;
}

.leadership-member:hover .leadership-photo img,
.leadership-member:focus-within .leadership-photo img {
  filter: grayscale(0%);
}

.leadership-info {
  text-align: center;
}

.leadership-info h3 {
  margin: 0;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
}

.leadership-title {
  margin: 2px 0 0;
  color: #555555;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.leadership-member-toggle {
  display: block;
  border: 0;
  margin: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* === About page: Leadership detail panel ===
   Expands below the leadership grid when a member's photo is clicked
   (currently wired up for Jack Kurtz only). */
.leadership-panel {
  margin-top: 64px;
  text-align: left;
  scroll-margin-top: 110px;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .5s ease, transform .5s ease;
}

.leadership-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

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

.leadership-panel-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.leadership-panel-close {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  border: 0;
  background: none;
  padding: 8px;
  cursor: pointer;
  opacity: .65;
  transition: opacity .3s ease;
}

.leadership-panel-close:hover,
.leadership-panel-close:focus {
  opacity: .85;
}

.leadership-panel-close img {
  display: block;
  width: 32px;
  height: 32px;
  filter: brightness(0);
}

.leadership-panel-photo {
  flex: 0 0 320px;
  width: 320px;
}

.leadership-panel-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.leadership-panel-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 60px;
}

.leadership-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}

.leadership-panel-header .leadership-info {
  text-align: left;
}

.leadership-panel-hobbies {
  text-align: right;
}

.leadership-panel-hobbies-label {
  display: block;
  margin-bottom: 10px;
  color: #377FBF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.leadership-panel-hobbies-icons {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

.leadership-panel-hobbies-icons img {
  display: block;
  width: 28px;
  height: 28px;
}

.leadership-panel-bio p {
  margin: 0 0 20px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 1.6;
}

.leadership-panel-bio p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  /* Mobile reorders the panel to: name/title + close, photo, hobbies,
     bio - matching production. .leadership-panel-content and
     .leadership-panel-header are flattened via display:contents so
     their children become direct grid items and can be placed with
     grid-template-areas regardless of DOM nesting. */
  .leadership-panel-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name close"
      "photo photo"
      "hobbies hobbies"
      "bio bio";
    row-gap: 20px;
    column-gap: 16px;
  }

  .leadership-panel-content,
  .leadership-panel-header {
    display: contents;
  }

  .leadership-info {
    grid-area: name;
  }

  .leadership-panel-close {
    grid-area: close;
    position: static;
    align-self: start;
    padding: 0;
  }

  .leadership-panel-photo {
    grid-area: photo;
    width: 100%;
    flex-basis: auto;
  }

  .leadership-panel-hobbies {
    grid-area: hobbies;
    text-align: left;
  }

  .leadership-panel-hobbies-icons {
    justify-content: flex-start;
  }

  .leadership-panel-bio {
    grid-area: bio;
  }
}

@media (max-width: 900px) {
  .leadership-eyebrow {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .leadership-section {
    padding: 70px 0;
  }

  .leadership-heading {
    margin-bottom: 48px;
  }

  .leadership-grid {
    gap: 48px;
  }
}

/* === Services hub page (/services) === */
.services-hero {
  position: relative;
  background-color: #f4f4f4;
  background-image: url('../images/fortuitas_services_hub_NEW.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 110px 0;
}

.services-hero-inner {
  width: min(1180px, calc(100% - 40px));
}

.services-hero-eyebrow {
  margin-bottom: 28px;
}

.services-hero-copy {
  max-width: 560px;
}

.services-hero-copy p {
  margin: 20px 0 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 19px;
  line-height: 1.5;
}

.services-hero-checks {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.services-hero-check-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #333333;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
}

.services-hero-check-link:hover,
.services-hero-check-link:focus {
  text-decoration: none;
  color: #377FBF;
}

.services-hero-check-icon {
  flex: 0 0 auto;
  width: 23px;
  height: 19px;
}

.services-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 10px;
  background: #F37735;
}

.services-hub-section {
  background: #ffffff;
  padding: 90px 0 100px;
}

.services-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.services-hub-item {
  padding: 0 30px;
  text-align: center;
}

.services-hub-item:first-child {
  padding-left: 0;
}

.services-hub-item:last-child {
  padding-right: 0;
}

.services-hub-item:not(:last-child) {
  border-right: 1px solid #e0e0e0;
}

.services-hub-hex-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  width: 190px;
  height: 190px;
  text-decoration: none;
}

/* Shrink-wraps to the image's own rendered size (rather than
   stretching to fill the fixed-height slot above), so the hover glow
   - sized via inset:0 on this wrapper - lines up exactly with the
   visible image regardless of each source canvas's own aspect ratio. */
.services-hub-hex-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.services-hub-hex {
  display: block;
  width: 165px;
  height: auto;
}

/* eCommerce/Integration/ERP: the same clip-path polygon the homepage
   already uses for these exact images (.ecommerce-image-link img etc.)
   - not derived from each image's own alpha shape. Integration's
   source file has its hex point truncated flush against the top of
   its canvas (confirmed directly against the raw pixels: row 0 already
   has ~150px of opaque content, where a real point would start as a
   sliver of a few px) - production's polygon starts 5% down from the
   top, which crops past that truncated sliver before it's ever drawn,
   which is why it doesn't show up there. Deriving a mask from the
   image's own alpha (as this used to) faithfully reproduced the
   defect instead of hiding it. */
.services-hub-hex--clip {
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

.services-hub-hex-wrap:has(.services-hub-hex--clip)::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(167, 203, 0, .48);
  mix-blend-mode: multiply;
  transition: opacity .22s ease;
  clip-path: polygon(
    53% 5%,
    95% 28%,
    95% 75%,
    53% 97%,
    11% 75%,
    11% 28%
  );
}

/* AI Readiness isn't used on the homepage and has no equivalent
   production polygon, but its own alpha channel is clean (real
   margin around a properly-formed hex, no truncation), so masking
   from its own image is accurate here. */
.services-hub-hex-glow {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  background: #A7CB00;
  mix-blend-mode: multiply;
  transition: opacity .22s ease;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.services-hub-hex-link:hover .services-hub-hex-wrap::after,
.services-hub-hex-link:focus-visible .services-hub-hex-wrap::after,
.services-hub-hex-link:hover .services-hub-hex-glow,
.services-hub-hex-link:focus-visible .services-hub-hex-glow {
  opacity: 1;
}

.services-hub-item h2 {
  margin: 0 0 16px;
  font-size: 28px;
}

.services-hub-item p {
  margin: 0 0 18px;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
}

.services-hub-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 16px 32px;
  border-radius: 8px;
  background: #A7CB00;
  color: #ffffff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s ease;
}

.services-hub-cta:hover,
.services-hub-cta:focus {
  background: #97B900;
  color: #ffffff;
}

@media (max-width: 900px) {
  .services-hero-eyebrow {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .services-hero {
    padding: 64px 0;
    /* Drop the photo below tablet width - at this size it's mostly
       covered by the stacked text anyway, and a plain grey background
       reads more reliably than trying to keep the hero copy legible
       over whatever part of the photo remains visible. */
    background-image: none;
    background-color: #F1F1F1;
  }

  .services-hub-section {
    padding: 60px 0 70px;
  }

  .services-hub-grid {
    grid-template-columns: 1fr;
  }

  .services-hub-item {
    padding: 32px 0;
    border-right: none !important;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
  }

  .services-hub-item:first-child {
    padding-top: 0;
  }

  .services-hub-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* === Insights Article Detail Page === */
/* "Insights", body H2-H6 and the Related Articles heading below all use
   the same 'Lane - Narrow' display font already wired in site-wide for
   h1/h2 (see the @font-face above and its site-wide h1/h2 rules) -
   reused here rather than introducing a second, one-off font stack. */

/* Shared banner at the top of every Insights page: left-aligned "OUR BLOG"
   eyebrow plus a large centered "Insights" wordmark. On the listing page
   "Insights" is the page's real H1; on an article page it's purely
   decorative branding (the article's own title is the real H1 further
   down), so it's a <p aria-hidden> there instead. */
.insights-blog-hero {
  background: #F1F1F1;
  padding: 36px 0;
}

.insights-blog-hero-inner {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insights-blog-hero-eyebrow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 6px;
}

/* Matches prod's title_line.png sizing for this eyebrow specifically
   (prod's own two-tier size: 73x16 up to 1600px viewports, 87x17 above
   that) instead of the generic mark footprint used elsewhere. */
.insights-blog-hero-eyebrow .page-hero-eyebrow-mark {
  width: 73px;
  height: 16px;
}

@media (min-width: 1601px) {
  .insights-blog-hero-eyebrow {
    font-size: 14px;
    letter-spacing: 8px;
  }

  .insights-blog-hero-eyebrow .page-hero-eyebrow-mark {
    width: 87px;
    height: 17px;
  }
}

.insights-blog-hero-title {
  margin: 0;
  text-align: center;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 44px;
  line-height: 1.15;
  font-weight: 400;
}

.insights-post-featured {
  width: 100%;
  background: #F1F1F1;
}

/* Uses the site's standard 1180px .container width (not the narrower
   900px content card below), so the image visibly extends past the
   card by the same amount on both sides - both are centered on the
   same axis, so that overhang is symmetric. */
.insights-post-featured-inner {
  height: 420px;
  overflow: hidden;
  background: #e2e2e2;
}

.insights-post-featured img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .insights-post-share and .insights-post-main share this single grid
   cell so the icon column can float beside the card with zero effect
   on the card's own position/height - a block-flow sibling would still
   push the card down by its own height even positioned out to the
   side, which a shared grid cell avoids entirely. */
.insights-post-section {
  display: grid;
  padding: 0 0 20px;
}

.insights-post-section > * {
  grid-column: 1;
  grid-row: 1;
}

/* Pulls the white content card up over the bottom of the featured image
   band above, matching production's overlapping hero/card treatment.
   Centered independently at a fixed 900px (not the site's standard
   1180px .container) so it stays centered under the wider image band
   above - see .insights-post-featured-inner. */
.insights-post-main {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 40px));
  margin: -150px auto 0;
  background: #ffffff;
  padding: 40px 40px 0;
}

/* Positioned independently of .insights-post-main so it has no effect
   on that card's width or centering - just floats in the gutter to its
   left. The margin-left math places it flush against where the card's
   own left edge falls (see .insights-post-main's centered 900px width
   above): half the viewport, minus half the card width, minus this
   column's own width and its gap from the card. */
.insights-post-share {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 40px;
  margin: 20px 0 0 calc(50% - 450px - 32px - 40px);
  align-self: start;
  position: sticky;
  top: 112px;
}

.insights-post-share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #C4C4C4;
  text-decoration: none;
}

.insights-post-share a svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.insights-post-share a:hover,
.insights-post-share a:focus-visible {
  color: #A7CB00;
}

.insights-post-tag-pill {
  display: inline-block;
  min-width: 170px;
  margin: 0 0 18px -46px;
  padding: 5px 10px;
  border-radius: 4px;
  background: #377FBF;
  color: #ffffff;
  text-align: center;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 3px;
}

.insights-post-tag-pill span {
  color: #ffffff;
}

.insights-post-title {
  margin: 0 0 24px;
  text-align: left;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 400;
}

.insights-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.insights-post-avatar {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #c9c9c9 no-repeat center / cover;
  flex: 0 0 auto;
}

.insights-post-meta-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #666666;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.insights-post-author-name {
  color: #2b2b2b;
  font-weight: 700;
}

.insights-post-modified {
  color: #999999;
  font-style: italic;
}

.insights-post-author-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  margin: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* === Insights post: author bio lightbox ===
   A compact overlay version of the About page's leadership card - same
   photo/name/title/bio content, but centered as a floating modal with a
   small circular photo and smaller type instead of the full-width inline
   accordion panel used on About. */
body.author-modal-open {
  overflow: hidden;
}

.author-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
}

.author-modal.is-open {
  opacity: 1;
}

.author-modal[hidden] {
  display: none;
}

.author-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, .55);
}

.author-modal-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 8px;
  padding: 40px 32px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  transform: translateY(-12px);
  transition: transform .25s ease;
}

.author-modal.is-open .author-modal-card {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .author-modal,
  .author-modal-card {
    transition: none;
  }
}

.author-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  border: 0;
  background: none;
  padding: 8px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .3s ease;
}

.author-modal-close:hover,
.author-modal-close:focus {
  opacity: .85;
}

.author-modal-close img {
  display: block;
  width: 20px;
  height: 20px;
  filter: brightness(0);
}

.author-modal-photo {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #c9c9c9 no-repeat center / cover;
  flex: 0 0 auto;
  margin-bottom: 16px;
}

.author-modal-content {
  text-align: center;
}

.author-modal-name {
  margin: 0;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.author-modal-title {
  margin: 4px 0 0;
  color: #555555;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.author-modal-bio {
  margin: 16px 0 0;
  color: #555555;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.insights-post-body {
  color: #444444;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.75;
}

.insights-post-body p {
  margin: 0 0 24px;
}

.insights-post-body h2,
.insights-post-body h3,
.insights-post-body h4,
.insights-post-body h5,
.insights-post-body h6 {
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.3;
  margin: 40px 0 16px;
}

.insights-post-body h2 { font-size: 32px; }
.insights-post-body h3 { font-size: 24px; }
.insights-post-body h4 { font-size: 21px; }
.insights-post-body h5 { font-size: 18px; }
.insights-post-body h6 { font-size: 16px; }

.insights-post-body ul,
.insights-post-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.insights-post-body li {
  margin-bottom: 10px;
}

.insights-post-body a {
  color: #A7CB00;
  text-decoration: none;
}

.insights-post-body a:hover,
.insights-post-body a:focus-visible {
  color: #97B900;
}

.insights-post-inline-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px auto 28px;
  border-radius: 4px;
}

.insights-post-body .hs-embed-wrapper {
  margin: 8px 0 28px;
}

.insights-post-related-section {
  background: #F8F9FB;
  padding: 56px 0 70px;
  margin-top: 40px;
}

.insights-post-related-heading {
  margin: 0 0 32px;
  text-align: center;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
}

.insights-post-related-grid {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}

@media (max-width: 767px) {
  .insights-blog-hero-inner {
    flex-direction: column;
    gap: 10px;
  }

  .insights-blog-hero-eyebrow {
    position: static;
    transform: none;
    justify-content: center;
  }

  .insights-blog-hero-title {
    font-size: 34px;
  }

  .insights-post-featured-inner {
    height: 220px;
  }

  /* Below the grid's breakpoint, share and main go back to being
     normal stacked block children (share row above the card) instead
     of sharing a grid cell - grid-column/grid-row on the children are
     no-ops once the parent isn't display: grid. */
  .insights-post-section {
    display: block;
  }

  .insights-post-share {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin: 20px 0 0;
    position: sticky;
    top: 72px;
    background: rgba(255, 255, 255, .95);
    padding: 8px 0;
    z-index: 3;
  }

  .insights-post-main {
    margin-top: 0;
    padding: 0 4px;
  }

  .insights-post-tag-pill {
    margin-left: -8px;
  }

  .insights-post-title {
    font-size: 30px;
  }

  .insights-post-body {
    font-size: 16px;
  }

  .insights-post-body h2 { font-size: 25px; }
  .insights-post-body h3 { font-size: 21px; }

  .insights-post-related-grid {
    grid-template-columns: 1fr;
  }
}

/* === Insights Listing Page === */
.insights-index-hero {
  background: #F1F1F1;
  padding: 24px 0 8px;
  text-align: center;
}

.insights-index-hero h1 {
  margin: 0 0 16px;
  color: #377FBF;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 64px;
  font-weight: 400;
}

.insights-index-section {
  padding: 0 0 90px;
}

.insights-index-grid {
  margin-top: 36px;
}

/* Continues the hero's grey band behind the featured post specifically,
   rather than the white the rest of the listing section sits on. */
.insights-featured-section {
  background: #F1F1F1;
  padding: 24px 0 56px;
}

/* Matches prod's real "heropost" layout: a full-width photo with the
   white copy panel overlapping its bottom-right corner, and a blue
   "FEATURED" ribbon straddling the seam between the two. */
.insights-featured-card {
  position: relative;
  overflow: visible;
}

.insights-featured-card-image {
  width: 100%;
  height: 400px;
  background: #e2e2e2 no-repeat center / cover;
}

/* Prod's real large-tier (>1600px) value; every narrower container
   (which is every width this site actually renders at) uses 400px. */
@media (min-width: 1601px) {
  .insights-featured-card-image {
    height: 500px;
  }
}

.insights-featured-card-body {
  position: absolute;
  right: 16px;
  bottom: -72px;
  width: min(620px, 92%);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  padding: 40px 44px 32px;
  z-index: 2;
}

/* Prod's own real "FEATURED" ribbon (blue tag overlapping the photo/
   panel seam) rather than the plain date text the card showed before. */
.insights-featured-badge {
  position: absolute;
  top: -24px;
  right: 70px;
  background: #377FBF;
  color: #fff;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 4px;
  min-width: 170px;
  padding: 9px 10px;
  text-align: center;
  z-index: 3;
}

.insights-featured-card-title {
  position: relative;
  z-index: 3;
  margin: 20px 0 20px;
  font-family: 'Lane - Narrow', 'Arial Narrow', 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
}

.insights-featured-card-title a {
  color: #377FBF;
  text-decoration: none;
}

.insights-featured-card-meta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insights-featured-card-sub {
  color: #377FBF;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 14px;
}

/* Same corner wedge + arrow as the regular cards (.insights-card::after
   / .insights-card-arrow), scoped to the white panel specifically -
   blue by default, green on hover/focus of the whole featured card.
   Fixed pixel size rather than the small cards' percentages: this
   panel is much wider relative to its height than a small card, so
   the same percentages stretched the wedge out of proportion. */
.insights-featured-card-body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65px;
  height: 65px;
  background: #377FBF;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  transition: background-color .25s ease;
}

.insights-featured-card:hover .insights-featured-card-body::after,
.insights-featured-card:focus-within .insights-featured-card-body::after {
  background: #A7CB00;
}

.insights-featured-card-arrow {
  right: 9px;
  bottom: 9px;
  width: 26px;
  aspect-ratio: 1 / 1;
  transform: none;
  z-index: 4;
}

@media (max-width: 900px) {
  .insights-featured-badge {
    top: -20px;
    right: 24px;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 22px;
    min-width: 140px;
    padding: 7px 8px;
  }
}

@media (max-width: 767px) {
  .insights-index-hero h1 {
    font-size: 36px;
  }

  .insights-featured-card-image {
    height: 220px;
  }

  .insights-featured-card-body {
    position: static;
    width: 100%;
    padding: 28px;
  }

  .insights-featured-badge {
    top: -18px;
    right: 20px;
  }
}

/* Keyword search + category filter row that sits between the featured
   card and the article grid. Front-end only for now - no search/filter
   behavior is wired up yet. */
.insights-filter-section {
  background: #fff;
  padding: 40px 0;
}

.insights-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}

.insights-search-form {
  position: relative;
  width: 320px;
  max-width: 100%;
}

.insights-search-form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.insights-search-input {
  width: 100%;
  height: 50px;
  border: 2px solid #C4C4C4;
  border-radius: 4px;
  padding: 0 54px 0 15px;
  color: #696969;
  background: #fff;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.insights-search-input::placeholder {
  color: #A7CB00;
  letter-spacing: 1px;
}

.insights-search-input.has-error {
  border-color: #D0021B;
}

.insights-search-error {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 4px 0 0;
  color: #D0021B;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.insights-no-results {
  margin: 0;
  padding: 48px 0;
  color: #A7CB00;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.insights-loading-more {
  margin: 0;
  padding: 32px 0 0;
  color: #949494;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-align: center;
}

#insights-load-more-sentinel {
  height: 1px;
}

.insights-search-submit {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #A7CB00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insights-search-submit svg {
  width: 30px;
  height: 30px;
}

.insights-category-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: 200px;
}

.insights-category-heading {
  margin: 0;
  color: #333;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.insights-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insights-category-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 62px;
  padding: 0 12px;
  border: 2px solid #C4C4C4;
  border-radius: 4px;
  color: #A7CB00;
  font-family: 'Source Sans Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}

.insights-category-link:hover,
.insights-category-link:focus,
.insights-category-link.is-active:not([data-category="all"]) {
  background: #A7CB00;
  border-color: #A7CB00;
  color: #fff;
}

@media (max-width: 767px) {
  .insights-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .insights-search-form {
    width: 100%;
  }

  .insights-category-filter {
    margin-left: 0;
  }
}