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

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
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: 190px;
  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: 290px;
  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: 17px;
  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);
}

@media (max-width: 900px) {
  .site-header .header-inner {
    position: relative;
  }

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

  .site-header .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 24px 22px;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 14px 28px rgba(0,0,0,0.12);
    z-index: 1000;
  }

  .site-header .main-nav.is-open {
    display: flex;
  }

  .site-header .main-nav > a,
  .site-header .main-nav .nav-item > a {
    display: block;
    padding: 13px 0;
    margin: 0;
  }

  .site-header .nav-item {
    display: block;
  }

  .site-header .dropdown {
    display: block;
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 8px 14px;
    min-width: 0;
  }

  .site-header .dropdown a {
    padding: 8px 0;
  }
}

/* === 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: relative;
    z-index: 1000;
  }

  .site-header .header-inner {
    position: relative;
  }

  .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('https://www.fortuitas.com/hubfs/Fortuitas_2019/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;
}

/* Seven diagonal hairlines, pure CSS - no image/SVG asset */
.page-hero-eyebrow-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.page-hero-eyebrow-mark i {
  display: block;
  width: 1.5px;
  height: 24px;
  background: #9aa3ab;
  transform: skewX(-40deg);
  font-style: normal;
  flex: 0 0 auto;
}


.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: 31px 0 28px;
}

.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: 1.8px;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}

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

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

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

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

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

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

/* === Strategy Green Asset Fix === */
.service-bar-item img[src$="strategy-green.png"] {
  width: 76px;
  height: 76px;
  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(6px);
}

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

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

.clients-hero-eyebrow .page-hero-eyebrow-mark i {
  background: rgba(255, 255, 255, 0.6);
}

.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 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: 17px;
  line-height: 1.6;
}

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

/* 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-featured-copy {
    text-align: center;
  }

  .clients-featured-tags {
    align-items: center;
  }

  .clients-featured-tags li {
    text-align: left;
  }

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


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

@media (max-width: 980px) {
  .clients-grid {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .clients-grid {
    width: min(1180px, 100% - 28px);
  }
}

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

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