@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; src: url('public/fonts/alegreya-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; src: url('public/fonts/alegreya-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; src: url('public/fonts/alegreya-sans-700.woff2') format('woff2'); }


/* --- SPS Core Styles --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Typography Normalization Scale */
  --text-sm: 1rem; /* 16px */
  --text-base: 1.15rem; /* ~18.4px */
  --text-lg: 1.3rem; /* ~21px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: clamp(24px, 4vw, 36px); 
  --text-3xl: clamp(32px, 5vw, 48px);
  --text-4xl: clamp(40px, 8vw, 72px);

  --red:        #C50E17;
  --red-dark:   #a80c13;
  --black:      #000000;
  --dark-bg:    #1e1e1e;
  --dark:       #1e1e1e;   /* used by page titles and breadcrumbs */
  --gray:       #3A3A3A;
  --off-white:  #F4F4F4;
  --white:      #FFFFFF;
  --border:     rgba(202,202,202,0.8);
  --radius-lg: clamp(22px, 4vw, 30px);   /* 45 - 0.92 */
  --radius-md:  17px;   /* 20 - 0.92 */
  --radius-sm:  11px;   /* 13 - 0.92 */
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
  --blog-pad-x: 100px;
}

html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* html (not body) is the viewport clipper: a body with overflow-x:hidden becomes a
   scroll container and breaks the position:sticky hero (.hs-sticky-wrapper). */
body { overflow-x: visible; }
@supports (overflow-x: clip) { body { overflow-x: clip; } }

body {
  font-family: 'Alegreya Sans', sans-serif;
  background: var(--off-white);
  color: var(--black);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
  max-width: 1580px;
  margin: 0 auto;
  padding: 0 100px;
}

.section-pad { padding: 90px 0; }

/* --- SPS Core Styles --- */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.label-bar {
  width: 4px;
  height: 19px;
  background: var(--black);
  border-radius: 2px;
  flex-shrink: 0;
  vertical-align: middle;
}
.label-bar.white { background: var(--white); }
.label-text {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--red);
  line-height: 1;
}

.section-title {
  font-size: var(--text-3xl); font-weight: 500;
  line-height: 1.06;
  color: var(--black);
  margin-bottom: 22px;
}
.section-title.white { color: var(--white); }

.section-body {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--gray);
  margin-bottom: 16px;
}
.section-body.white { color: rgba(255,255,255,0.88); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--black);
  transition: gap var(--transition);
}
.arrow-link:hover { gap: 16px; }
.arrow-link.white { color: var(--white); }
.arrow-link.white .arrow-icon { background-color: var(--white); }
.arrow-icon {
  font-size: 0;
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: var(--red);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
  transition: transform var(--transition), background-color var(--transition);
}
.arrow-icon.red { background-color: var(--red); }

/* Smaller arrow sizes inside cards */
.service-card-label .arrow-icon,
.cs-learn .arrow-icon,
.blog-learn .arrow-icon {
  width: 19px;
  height: 19px;
}
.service-card--see-more .arrow-icon {
  background-color: var(--white);
}

/* --- SPS Core Styles --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 32px;
  border-radius: var(--radius-md);
  font-family: 'Alegreya Sans', sans-serif;
  font-size: var(--text-lg);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.btn .arrow-icon { transition: transform var(--transition); }
.btn:hover .arrow-icon { transform: translateX(6px); }

/* Red filled CTA - darker on hover + lift shadow */
.btn-red {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(197,14,23,0.26);
}
.btn-red:hover {
  background: var(--red-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(168,12,19,0.38);
}
.btn-red:active { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(168,12,19,0.30); }

/* Ghost / outline button - fills white on hover */
.btn-outline {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--white);
  color: var(--gray);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.btn-outline:active { transform: translateY(-1px); }

.btn-outline-dark {
  background: transparent;
  border: 2px solid #292929;
  color: #292929;
  border-radius: var(--radius-md);
  padding: 14px 28px;
  box-shadow: none;
}
.btn-outline-dark:hover {
  background: linear-gradient(111.93deg,#292929 2.18%,#393939 96.85%);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Dark sign-up button */
.btn-dark {
  background: linear-gradient(111.93deg,#292929 2.18%,#393939 96.85%);
  color: var(--white);
  padding: 14px 28px;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.btn-dark:hover {
  background: linear-gradient(111.93deg,#1a1a1a 2.18%,#2a2a2a 96.85%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.full-w { width: 100%; margin-top: 8px; }

/* --- SPS Core Styles --- */
.sp-swal-popup {
  border-radius: 24px !important;
  padding: 32px 28px 28px !important;
  font-family: 'Alegreya Sans', sans-serif;
}
.sp-swal-popup .swal2-title {
  color: var(--dark-bg);
  font-weight: 700;
}
.sp-swal-popup .swal2-html-container {
  color: var(--gray);
}
.sp-swal-popup .swal2-icon.swal2-success.swal2-icon-show {
  margin-top: 0px;
}
.sp-swal-popup .swal2-actions {
  margin-top: 18px;
}
div:where(.swal2-container) div:where(.swal2-actions) {
  margin-bottom: 5px;
}
div:where(.swal2-container) h2:where(.swal2-title) {
  padding: 0 !important;
}
.sp-swal-popup .btn.btn-dark {
  min-width: 140px;
  cursor: pointer;
  border: none;
}

/* --- SPS Core Styles --- */
/* soft ease-out (fast start, long settle) reads calmer than a plain ease */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-up.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1; transform: translate(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
}
.delay-1 { transition-delay: 0.12s !important; }
.delay-2 { transition-delay: 0.24s !important; }
.delay-3 { transition-delay: 0.36s !important; }

/* --- SPS Core Styles --- */
.navbar { flex-shrink: 0;
  position: relative; z-index: 1000;
  width: 100%;
  background: var(--off-white);
  
}

.navbar-inner {
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 60px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.navbar-logo img { height: 68px; width: auto; object-fit: contain; }

.navbar-links { display: flex; align-items: center; gap: 2px; }

.nav-link {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--black);
  padding: 9px 15px;
  border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav-link:hover { background: rgba(0,0,0,0.05); }
.nav-link.active { color: var(--red); }

.navbar-cert img { height: 72px; width: auto; object-fit: contain; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.hamburger span {
  display: block; width: 26px; height: 2.5px;
  background: var(--black); border-radius: 2px; transition: var(--transition);
}

.mobile-menu {
  display: none; flex-direction: column;
  padding: 14px 24px 18px; gap: 2px; background: var(--off-white);
}
.mobile-menu.open { display: flex; }
.mobile-menu .nav-link { font-size: var(--text-base); padding: 10px 12px; }

/* --- SPS Core Styles --- */
.hero { position: relative; padding: 0 44px 0; }

.hero-bg { position: relative; border-radius: var(--radius-lg); overflow: hidden; }

.hero-img { width: 100%; height: 620px; object-fit: cover; display: block; }

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
}

.hero-content {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 100px 55px 100px;
}

.hero-title {
  font-size: var(--text-4xl); font-weight: 400; line-height: 1.07;
  color: var(--white); max-width: 900px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.25);
  letter-spacing: -0.01em; margin-bottom: 19px;
}

.hero-sub {
  font-size: var(--text-xl); font-weight: 400; line-height: 1.4;
  color: var(--white); max-width: 820px;
  letter-spacing: -0.01em; margin-bottom: 34px;
}
.hero-sub-mobile { display: none; }

.hero-btns {
  display: flex;
  align-items: stretch;    /* both buttons same height */
  gap: 18px;
  margin-bottom: 0;
}
.hero-btns .btn {
  min-width: 160px;
  white-space: nowrap; /* labels stay on one line; the bar's first column grows to fit (mobile overrides) */
  
  
  display: flex; align-items: center; justify-content: center;
}

/* Bottom bar: 3 equal cols so scroll mouse is truly centred */
.hero-bottom-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  margin-top: 0;
  gap: 20px;
}
.hero-bottom-left { /* spacer */ }

/* Animated scroll mouse indicator */
.hero-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-self: center;
  opacity: 0.75;
}
.scroll-mouse {
  width: 26px; height: 40px;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 12px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-top: 6px;
}
.scroll-wheel {
  width: 4px; height: 8px;
  background: var(--white);
  border-radius: 2px;
  animation: scrollWheel 1.6s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0.2; }
  61%  { transform: translateY(0);    opacity: 0; }
  62%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Trust badge - 2 rows, right-aligned */
.hero-trust {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  justify-self: end;
}
.stars { color: var(--white); font-size: var(--text-lg); letter-spacing: 3px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.hero-trust span { font-size: var(--text-base); color: var(--white); text-shadow: 0 4px 20px #000; white-space: nowrap; }

/* --- SPS Core Styles --- */
.who-we-are { background: var(--off-white); padding: 58px 0; }

.who-text-full { margin-top: 30px; }
  .who-we-are-list {
  color: #555;
  font-size: var(--text-base);
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  font-family: 'Alegreya Sans', sans-serif;
}
.who-we-are-list li {
  margin-bottom: 8px;
}
.who-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 70px; align-items: center;
}
.img-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px; height: 510px;
  }
.img-tall { border-radius: var(--radius-lg); overflow: hidden; height: 510px; }
.img-tall img { width: 100%; height: 100%; object-fit: cover; }
.img-stack {
    display: grid;
    grid-template-rows: 1.7fr 1.7fr 1fr;
    gap: 20px;
    min-height: 0;
  }
.img-top, .img-mid {
  border-radius: var(--radius-lg); overflow: hidden;
  min-height: 0;
}
.img-top img, .img-mid img { width: 100%; height: 100%; object-fit: cover; }
.img-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 20px;
    min-height: 0;
  }
.img-sm { border-radius: var(--radius-lg); overflow: hidden; min-height: 0; }
.img-sm img { width: 100%; height: 100%; object-fit: cover; }

#about-page .who-inner { align-items: start; }
#about-page .img-grid { height: auto; }
#about-page .img-tall { height: 466px; }
#about-page .img-stack { grid-template-rows: 1fr 1fr; height: 466px; }
/* --- SPS Core Styles --- */
.stats-section { padding: 0 100px; margin-bottom: 58px; }

.stats-card {
  background: linear-gradient(0deg,rgba(197,14,23,0.78),rgba(197,14,23,0.78)),
              url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=80') center/cover no-repeat;
  border-radius: var(--radius-lg);
  padding: 34px 80px;
  min-height: 193px;
  display: flex;
  align-items: center;
}

.stats-grid {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; width: 100%; gap: 40px; text-align: center;
}

.stat-item { display: flex; flex-direction: column; align-items: center; }

.stat-num-wrap {
  display: flex; align-items: baseline;
  justify-content: center; line-height: 1;
}

.stat-num, .stat-plus {
  font-size: var(--text-4xl); font-weight: 700; color: var(--white); line-height: 1; display: inline-block;
}
.stat-mn { font-size: 0.75em; }

.stat-label {
  font-size: 15px; font-weight: 500; color: var(--white);
  text-transform: uppercase; letter-spacing: 0; margin-top: 10px;
}

/* --- SPS Core Styles --- */
.section-title.center { text-align: center; }

/* Home middle sections (Why SP / Our Solutions / Industries) live in the
   "HOME MIDDLE SECTIONS" block at the end of this file. */

.cs-logo-box img[alt="ANCL"] { transform: scale(1.25); }

/* --- SPS Core Styles --- */
.expertise-section { padding: 0 44px; }

.expertise-card {
  background: url('public/images/card_background.webp') center/cover no-repeat;
  border-radius: var(--radius-lg);
  padding: 50px 55px;
  position: relative; overflow: hidden;
}
.expertise-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(28,28,28,0.96) 0%, rgba(44,44,44,0.82) 60%, rgba(58,58,58,0.70) 100%);
  border-radius: inherit;
}
/* Subtle noise texture overlay */
.expertise-card::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.expertise-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}

.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.service-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background-size: cover; background-position: center;
  height: 210px; cursor: pointer; transition: transform 0.2s ease;
}
.service-card:hover { transform: scale(1.02); }

.service-card-overlay {
  position: absolute; inset: 0; border-radius: var(--radius-lg);
  transition: background 0.2s ease;
}
.service-card-overlay.dark   { background: rgba(0,0,0,0.18); }
.service-card:hover .service-card-overlay.dark { background: rgba(0,0,0,0.45); }
.service-card-overlay.red-ov { background: rgba(197,14,23,0.7); }

.service-card-label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 20px;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; font-size: var(--text-lg); font-weight: 500; color: var(--white); text-align: center;
}

.expertise-text { position: relative; z-index: 1; }

/* --- SPS Core Styles --- */
.faq { background: var(--off-white); padding: 58px 0; }

/* Top row: heading left, intro text right */
.faq-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;          /* bottom-align so heading base meets intro base */
  margin-bottom: 18px;
}
.faq-top-left {}
.faq-top-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 36px;
}

/* Both lists in a perfectly aligned side-by-side row */
.faq-lists-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;        /* both lists start at exact same y */
}
.faq-left, .faq-right {}

.faq-intro {
  font-size: var(--text-base); font-weight: 400; line-height: 1.55;
  color: var(--gray); margin-bottom: 16px;
}

.faq-list { display: flex; flex-direction: column; gap: 11px; }

.faq-item {
  background: linear-gradient(140.25deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.3) 97.93%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition);
}
.faq-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.09); }

.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; cursor: pointer; font-size: var(--text-base); font-weight: 500;
  color: var(--black); gap: 14px;
}
.faq-q span:first-child { flex: 1; }

/* Icon is always a + sign; rotation makes it - */
.faq-icon {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.faq-icon::before,
.faq-icon::after {
  display: none;
}
.faq-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1v16M1 9h16' stroke='%23111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
}
/* Active state: rotate the whole icon 45deg to form a perfect X */
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0; overflow: hidden; font-size: var(--text-base); font-weight: 400;
  line-height: 1.6; color: var(--gray); padding: 0 18px;
  transition: max-height 0.4s ease, padding 0.3s ease; letter-spacing: 0.02em;
}
.faq-item.active .faq-a { max-height: 200px; padding: 0 18px 14px; }

/* --- SPS Core Styles --- */
.case-studies-section { padding: 0 44px 50px 44px; }

.case-studies-card {
  --cs-pad-x: 55px;
  background: url('public/images/card_background.webp') center/cover no-repeat;
  border-radius: var(--radius-lg);
  padding: 55px var(--cs-pad-x) 10px;
  position: relative; overflow: hidden;
}
.case-studies-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(23,23,23,0.97) 0%, rgba(38,38,38,0.86) 60%, rgba(52,52,52,0.76) 100%);
  border-radius: inherit;
}
.case-studies-card::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  border-radius: inherit; pointer-events: none; z-index: 0;
}
.case-studies-card > * { position: relative; z-index: 1; }
 
.cs-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start; margin-bottom: 0px;
}
.cs-header-right { display: flex; flex-direction: column; margin-top: 16px; }
 
/* Outer wrapper with horizontal fade-edge mask-image */
.cs-scroll-outer {
  position: relative;
  margin-left: calc(-1 * var(--cs-pad-x));
  margin-right: calc(-1 * var(--cs-pad-x));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--cs-pad-x), #000 calc(100% - var(--cs-pad-x)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--cs-pad-x), #000 calc(100% - var(--cs-pad-x)), transparent 100%);
}
 
.cs-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 10px;
  padding-top: 33px;
  padding-left: var(--cs-pad-x);
  padding-right: var(--cs-pad-x);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* NO scroll-snap - momentum JS handles snapping to card boundaries */
}
.cs-scroll-wrap::-webkit-scrollbar { display: none; }
.cs-scroll-wrap.grabbing { cursor: grabbing; }
.cs-scroll-wrap.is-scrolling { cursor: default; }

/* Disable hover effects and interactions during horizontal drag-scroll */
.cs-scroll-wrap.grabbing *,
.blog-scroll-wrap.grabbing * {
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* gap = 44px (double the old 22px) */
  display: flex;
  gap: 44px;
  padding: 0 2px;
}

}

/* Card width reduced so 3 fit with 44px gaps and visible gaps on sides */
.cs-card {
    background: linear-gradient(180deg,#171717 0%,#292929 100%);
    border-radius: var(--radius-lg);
    padding: 36px 36px 30px;
  position: relative;
  /* 3 cards with 2 - 44px gap = 88px total gap, cards take remaining */
  flex: 0 0 calc((100% - 88px) / 3);
  scroll-snap-align: start;
  transition: transform var(--transition);
  will-change: transform;
  display: flex;
  flex-direction: column;
}
.cs-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }

.cs-card-logo { position: absolute; top: -36px; left: 36px; }
.cs-logo-box {
  width: 72px;
  height: 72px;
  background: var(--white);
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.cs-client-logo {
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
}
.cs-placeholder-svg {
  width: 28px;
  height: 28px;
  color: var(--gray);
  stroke-width: 1.8;
  display: block;
  transition: color var(--transition), transform var(--transition);
}
.cs-card:hover .cs-placeholder-svg {
  color: var(--red);
  transform: scale(1.06);
}

.cs-card-text { font-size: var(--text-base); line-height: 1.6; color: var(--white); font-weight: 400; margin-bottom: 22px; }
.cs-card-divider {
  height: 0.3px;
  background: rgba(255,255,255,0.2);
  margin-bottom: 14px;
  margin-top: auto;
}
.cs-learn { font-size: var(--text-lg); font-weight: 500; }

.cs-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
}
.cs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
}
.cs-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}
.cs-dot.active {
  width: 24px;
  height: 8px;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.774);
}

/* --- SPS Core Styles --- */
.logos-section { padding: 26px 0; margin-bottom: 40px; overflow: hidden; background: var(--off-white); }

.logos-track-wrap { overflow: hidden; }
.logos-track {
  display: flex; align-items: center;
  width: max-content;
  animation: logoScroll 20s linear infinite;
}

@keyframes logoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item--img {
  flex-shrink: 0;
  display: flex; align-items: center;
}
.logo-strip-img {
  height: 62px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(30%) contrast(1.1);
  opacity: 0.85;
  transition: opacity var(--transition), filter var(--transition);
}
.logo-item--img:hover .logo-strip-img { opacity: 1; filter: grayscale(0%) contrast(1.1); }



/* --- SPS Core Styles --- */
.blogs-section { background: var(--off-white); padding: 54px 0 20px; }

.blogs-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start; margin-bottom: 25px;
}
.blogs-header-right { display: flex; flex-direction: column; margin-top: 32px; }

/* Category pills hidden */
.blog-cats { display: none; }

/* Scroll container */
.blog-scroll-outer {
  position: relative;
  margin-left: calc(-1 * var(--blog-pad-x));
  margin-right: calc(-1 * var(--blog-pad-x));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--blog-pad-x), #000 calc(100% - var(--blog-pad-x)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--blog-pad-x), #000 calc(100% - var(--blog-pad-x)), transparent 100%);
}

.blog-scroll-wrap {
  overflow-x: auto; overflow-y: visible;
  padding: 8px var(--blog-pad-x) 20px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* NO scroll-snap - momentum JS handles snapping to card boundaries */
}
.cs-scroll-wrap::-webkit-scrollbar { display: none; }
.cs-scroll-wrap.grabbing { cursor: grabbing; }
.cs-scroll-wrap.is-scrolling { cursor: default; }

/* Disable hover effects and interactions during horizontal drag-scroll */
.cs-scroll-wrap.grabbing *,
.blog-scroll-wrap.grabbing * {
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* gap = 44px (double the old 22px) */
.cs-cards-row {
  display: flex; /* momentum handles stopping at card boundaries in JS */
}

.cs-scroll-wrap a, .blog-scroll-wrap a,
.cs-scroll-wrap img, .blog-scroll-wrap img {
  -webkit-user-drag: none;
}
.blog-scroll-wrap::-webkit-scrollbar { display: none; }
.blog-scroll-wrap.grabbing { cursor: grabbing; }
.blog-scroll-wrap.is-scrolling { cursor: default; }

.blog-cards-row {
  display: flex;
  margin-right: calc(-1 * var(--cs-pad-x));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--cs-pad-x), #000 calc(100% - var(--cs-pad-x)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--cs-pad-x), #000 calc(100% - var(--cs-pad-x)), transparent 100%);
}
 
.cs-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 10px;
  padding-top: 33px;
  padding-left: var(--cs-pad-x);
  padding-right: var(--cs-pad-x);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* NO scroll-snap - momentum JS handles snapping to card boundaries */
}
.cs-scroll-wrap::-webkit-scrollbar { display: none; }
.cs-scroll-wrap.grabbing { cursor: grabbing; }
.cs-scroll-wrap.is-scrolling { cursor: default; }

/* Disable hover effects and interactions during horizontal drag-scroll */
.cs-scroll-wrap.grabbing *,
.blog-scroll-wrap.grabbing * {
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* gap = 44px (double the old 22px) */
.cs-cards-row {
  display: flex;
  gap: 44px;
  padding: 0 2px;
}

/* Card width reduced so 3 fit with 44px gaps and visible gaps on sides */
.cs-card {
  background: linear-gradient(180deg,#171717 0%,#292929 100%);
  border-radius: var(--radius-lg);
  padding: 36px 36px 30px;
  position: relative;
  /* 3 cards with 2 - 44px gap = 88px total gap, cards take remaining */
  flex: 0 0 calc((100% - 88px) / 3);
  scroll-snap-align: start;
  transition: transform var(--transition);
  will-change: transform;
  display: flex;
  flex-direction: column;
}
.cs-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }

.cs-card-logo { position: absolute; top: -36px; left: 36px; }
.cs-logo-box {
  width: 72px;
  height: 72px;
  background: var(--white);
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.cs-client-logo {
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
}
.cs-placeholder-svg {
  width: 28px;
  height: 28px;
  color: var(--gray);
  stroke-width: 1.8;
  display: block;
  transition: color var(--transition), transform var(--transition);
}
.cs-card:hover .cs-placeholder-svg {
  color: var(--red);
  transform: scale(1.06);
}

.cs-card-text { font-size: var(--text-base); line-height: 1.6; color: var(--white); font-weight: 400; margin-bottom: 22px; }
.cs-card-divider {
  height: 0.3px;
  background: rgba(255,255,255,0.2);
  margin-bottom: 14px;
  margin-top: auto;
}
.cs-learn { font-size: var(--text-lg); font-weight: 500; }

.cs-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
}
.cs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
}
.cs-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}
.cs-dot.active {
  width: 24px;
  height: 8px;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.774);
}

/* --- SPS Core Styles --- */
.logos-section { padding: 26px 0; overflow: hidden; background: var(--off-white); }

.logos-track-wrap { overflow: hidden; }
.logos-track {
  display: flex; align-items: center;
  width: max-content;
  animation: logoScroll 20s linear infinite;
}

@keyframes logoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item--img {
  flex-shrink: 0;
  display: flex; align-items: center;
}
.logo-strip-img {
  height: 62px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(30%) contrast(1.1);
  opacity: 0.85;
  transition: opacity var(--transition), filter var(--transition);
}
.logo-item--img:hover .logo-strip-img { opacity: 1; filter: grayscale(0%) contrast(1.1); }



/* --- SPS Core Styles --- */
.blogs-section { background: var(--off-white); padding: 54px 0 20px; }

.blogs-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start; margin-bottom: 25px;
}
.blogs-header-right { display: flex; flex-direction: column; margin-top: 32px; }

/* Category pills hidden */
.blog-cats { display: none; }

/* Scroll container */
.blog-scroll-outer {
  position: relative;
  margin-left: calc(-1 * var(--blog-pad-x));
  margin-right: calc(-1 * var(--blog-pad-x));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--blog-pad-x), #000 calc(100% - var(--blog-pad-x)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--blog-pad-x), #000 calc(100% - var(--blog-pad-x)), transparent 100%);
}

.blog-scroll-wrap {
  overflow-x: auto; overflow-y: visible;
  padding: 8px var(--blog-pad-x) 20px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* NO scroll-snap - momentum handles stopping at card boundaries in JS */
}

.cs-scroll-wrap a, .blog-scroll-wrap a,
.cs-scroll-wrap img, .blog-scroll-wrap img {
  -webkit-user-drag: none;
}
.blog-scroll-wrap::-webkit-scrollbar { display: none; }
.blog-scroll-wrap.grabbing { cursor: grabbing; }
.blog-scroll-wrap.is-scrolling { cursor: default; }

.blog-cards-row {
  display: flex;
  gap: 44px;
  padding: 0 2px;
}

/* Blog card - same dimensions as CS card */
.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 0 0 calc((100% - 88px) / 3);
  min-height: 358px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; flex-direction: column;
  will-change: transform;
  position: relative;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
.blog-card.hidden { display: none !important; }

/* Image ? increased by 20%: ~199px */
.blog-img {
  position: relative;
  height: 199px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .blog-img { height: 153px; }
}
.blog-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.11) 40%, rgba(0,0,0,0.36) 100%);
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.blog-card:hover .blog-img img { transform: scale(1.06); }

/* Category badge - bottom left of image */
.blog-cat-badge {
  position: absolute; bottom: 12px; left: 14px;
  background: rgba(20,20,20,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 18px !important;
  z-index: 2;
}


/* Card body  fills remaining height, consistent typography */
.blog-body {
  padding: 18px 22px 18px;    /* equal padding top/right/left/bottom - no extra space */
  display: flex; flex-direction: column; flex: 1;
  overflow: hidden;
}

.blog-meta {
  display: none;
}
.blog-date {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: 400; color: #888;  /* 16px per spec */
  font-family: 'Alegreya Sans', sans-serif;
}
.blog-read {
  font-size: var(--text-sm); font-weight: 400; color: #bbb;   /* 16px per spec */
  padding-left: 12px; border-left: 1px solid #e0e0e0;
  font-family: 'Alegreya Sans', sans-serif;
}

.blog-title {
  font-size: var(--text-base); font-weight: 700; line-height: 1.4;   /* 19px per spec */
  color: var(--black); margin-bottom: 10px;
  letter-spacing: -0.02em; flex-shrink: 0;
  font-family: 'Alegreya Sans', sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; height: calc(1.4em * 2);
}

/* Excerpt clamp styles globally for all blog cards */
.blog-card .blog-excerpt {
  font-size: var(--text-base); font-weight: 400; line-height: 1.6;
  color: var(--gray); margin: 0 0 11px 0;
  font-family: 'Alegreya Sans', sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(1.6em * 4); /* Force exactly 4 lines */
}

/* Force See More link to bottom left */
.blog-card .arrow-link {
  margin-top: auto;
  align-self: flex-start;
}

/* Read More arrow link styling inside blog cards */
.blog-learn {
  margin-top: 5px;
  align-self: flex-start;
  font-size: var(--text-lg);
  font-weight: 500;
}
.blog-learn .arrow-icon { transition: transform 0.3s ease; }
.blog-card:hover .blog-learn .arrow-icon { transform: translateX(4px); }

/* Make the entire blog card clickable via the arrow link */
.blog-card .arrow-link::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}


/* --- SPS Core Styles --- */
.contact-section {
  background: var(--off-white);
  padding: 20px 0 0;
}

.contact-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  grid-template-areas:
    "intro   center right"
    "options center right";
  gap: 0;
  align-items: end;
  min-height: unset;
}

.contact-intro { grid-area: intro; align-self: end; padding: 0 40px 0 0; }
.contact-options-col { grid-area: options; align-self: start; padding: 0 40px 21px 0; }


.contact-options { margin-top: 0px; display: flex; flex-direction: column; gap: 22px; }

.contact-option { display: flex; align-items: center; gap: 18px; }

.contact-icon-box {
  flex-shrink: 0; width: 72px; height: 72px;
  background: var(--white);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06), inset 0 2px 6px rgba(0,0,0,0.04);
  border-radius: 17px; display: flex; align-items: center; justify-content: center;
}
.contact-icon-box svg, .contact-icon-box img { width: 28px; height: 28px; object-fit: contain; }

.contact-opt-title { font-size: var(--text-lg); font-weight: 500; color: var(--black); margin-bottom: 2px; }
.contact-opt-sub   { font-size: var(--text-sm); font-weight: 400; color: var(--gray); }

/* -- COL 2: centre person image - aligned to form height -- */
.contact-col-centre {
  grid-area: center;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;        /* stretch full column height */
  padding: 60px 10px 0;       /* removed bottom padding to touch newsletter */
  margin-top: 0;
}

.contact-person-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  object-fit: contain;
  object-position: bottom;
  display: block;             /* ensure no inline gap */
  margin-top: auto;           /* push to bottom */
}

.contact-col-right { grid-area: right; padding: 0 0 21px 20px; align-self: center; }

.contact-form-card {
  background: linear-gradient(140.25deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.35) 97.93%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-radius: var(--radius-lg);
  padding: 38px 38px 44px;
}
.contact-form-title {
  font-size: var(--text-3xl); font-weight: 500; color: var(--black);
  margin-bottom: 8px; text-align: center;
}
.contact-form-sub {
  font-size: var(--text-base); font-weight: 400; line-height: 1.5;
  color: var(--gray); text-align: center; margin-bottom: 19px;
}
    .contact-form { padding: 0 10px; }

.contact-form { display: flex; flex-direction: column; gap: 11px; }
.form-input {
  width: 100%; padding: 14px 16px;
  background: linear-gradient(140.25deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.3) 97.93%);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: 'Alegreya Sans', sans-serif; font-size: var(--text-sm); color: var(--black);
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 5px rgba(0,0,0,0.05);
}
.form-input::placeholder { color: #999; }
.form-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(197,14,23,0.1); }
.form-textarea { resize: vertical; min-height: 115px; border-radius: var(--radius-md); margin-bottom: 6px; }

/* Newsletter styles shared (input used in newsletter section) */
.newsletter-input {
  flex: 1; padding: 14px 16px; background: rgba(255,255,255,0.9);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: 'Alegreya Sans', sans-serif; font-size: var(--text-sm); outline: none;
  box-shadow: 0 4px 5px rgba(0,0,0,0.05);
}
.newsletter-input::placeholder { color: #888; }
.newsletter-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }

/* --- SPS Core Styles --- */
.newsletter-section { padding: 0 100px; margin-bottom: 58px; margin-top: 0; }

.newsletter-card {
  background:
    linear-gradient(0deg, rgba(197,14,23,0.82), rgba(197,14,23,0.82)),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=80') center/cover no-repeat;
  border-radius: var(--radius-lg);
  padding: 34px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.newsletter-title { font-size: var(--text-3xl); font-weight: 500; line-height: 1.3; color: var(--white); }
.newsletter-sub   { font-size: var(--text-base); color: var(--white); margin-bottom: 18px; line-height: 1.45; opacity: 0.92; }
.newsletter-form  { display: flex; gap: 12px; align-items: center; }

/* --- SPS Core Styles --- */
.footer { padding: 0 44px 28px; }

.footer-card {
  background: url('public/images/card_background.webp') center/cover no-repeat;
  border-radius: var(--radius-lg);
  padding: 60px 55px 36px;
  position: relative; overflow: hidden;
}
.footer-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(23,23,23,0.97) 0%, rgba(38,38,38,0.86) 60%, rgba(52,52,52,0.76) 100%);
  border-radius: inherit;
}
.footer-card::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  border-radius: inherit; pointer-events: none; z-index: 0;
}
.footer-card > * { position: relative; z-index: 1; }

.footer-inner {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 80px; padding-bottom: 40px;
}
.footer-inner > .footer-col:nth-child(2) {
  margin-right: 80px;
}

.footer-logo {
  height: 54px;   /* 64px - 0.85 - 54px */
  width: auto; object-fit: contain;
  margin-bottom: 16px;
}

.footer-desc {
  font-size: var(--text-base); font-weight: 400; line-height: 1.4;
  color: var(--white); letter-spacing: 0.03em; margin-bottom: 22px;
}
.m-br { display: none; }

.footer-socials { display: flex; gap: 10px; }
.social-btn {
  width: 34px; height: 34px; background: var(--red); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.social-btn:hover {
  background: var(--red-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(168,12,19,0.5);
}

.back-to-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 24px;
  margin-bottom: 0;
  margin-left: auto;
}
.back-to-top-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.back-to-top-btn svg {
  animation: floatUp 1.5s ease-in-out infinite;
}
.footer-col-title { font-size: var(--text-lg); font-weight: 500; color: var(--white); margin-bottom: 22px; }

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.footer-links a {
  font-size: var(--text-base); font-weight: 400; color: var(--white);
  line-height: 1.7; opacity: 0.88; transition: opacity var(--transition), padding-left var(--transition);
}
.footer-links a:hover { opacity: 1; padding-left: 4px; }

.footer-contact-item {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: var(--text-base); font-weight: 400; color: var(--white); line-height: 1.5;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-copy { font-size: var(--text-sm); font-weight: 400; color: var(--white); }

.footer-legal { display: flex; gap: 26px; }
.footer-legal a, .footer-legal span {
  font-size: var(--text-sm); font-weight: 400; color: var(--white);
  text-decoration: none;
  opacity: 0.8; transition: opacity var(--transition);
}
.footer-legal a:hover { opacity: 1; }

/* --- SPS Core Styles --- */
@media (max-width: 1200px) {
  :root { --blog-pad-x: 36px; }
  .container { padding: 0 36px; }
  .hero-content { padding: 0 75px 45px; }
  .hero-title { font-size: var(--text-4xl); }
  .section-title { font-size: var(--text-2xl); }
  .stats-card { padding: 40px 50px; }
  .stat-num, .stat-plus { font-size: var(--text-4xl); }
  .expertise-card { padding: 50px 55px; }
  .case-studies-card {
    --cs-pad-x: 50px;
    padding: 75px var(--cs-pad-x) 15px;
  }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .newsletter-title { font-size: var(--text-2xl); }
  /* 2 cards on tablet - same formula as CS */
  .cs-card { flex: 0 0 calc((100% - 44px) / 2); }
  .blog-card { flex: 0 0 calc((100% - 44px) / 2); }
}

@media (max-width: 960px) {
  .cs-page-grid .cs-card { flex: 0 0 100% !important; }
  :root {
    --blog-pad-x: 24px;
    
    --radius-md: 12px;
    --radius-sm: 8px;
  }
  .navbar-links, .navbar-cert { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 0 16px; }
  
  .hero-img { height: 570px; }
  .hero-content { padding: 0 30px 30px; }
  .hero-title { font-size: var(--text-2xl); }
  .hero-sub { font-size: var(--text-sm); }
  .hero-sub-desktop { display: none; }
  .hero-sub-mobile { display: block; }
  
  .img-tall, .img-top, .img-mid, .img-sm, .service-card, .service-card-overlay { border-radius: var(--radius-lg); }
  .service-card-overlay.dark { background: rgba(0,0,0,0.45); }

  .who-text-full { margin-top: 30px; }
  .who-we-are-list {
  color: #555;
  font-size: var(--text-base);
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  font-family: 'Alegreya Sans', sans-serif;
}
.who-we-are-list li {
  margin-bottom: 8px;
}
  .who-inner { grid-template-columns: 1fr; gap: 36px; }
  .img-grid { display: none; } /* Hide About Us images on mobile */

  .stats-section { padding: 0 36px; margin-bottom: 16px; }
  .stats-card { padding: 36px 28px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .stat-num, .stat-plus { font-size: var(--text-4xl); }

  .expertise-section { padding: 0 16px; }
  .expertise-card { padding: 40px 28px; }
  .expertise-inner { grid-template-columns: 1fr; gap: 40px; }

  .cs-header { grid-template-columns: 1fr; gap: 28px; }
  .case-studies-section { padding: 40px 16px 40px 16px; }
  .case-studies-card {
    --cs-pad-x: 24px;
    padding: 65px var(--cs-pad-x) 15px;
  }
  /* 1 card on mobile, no gaps needed */
  .cs-cards-row { gap: 44px; }
  .cs-card { flex: 0 0 calc(100% - 30px); }

  .faq-top       { grid-template-columns: 1fr; gap: 20px; }
  .faq-lists-row { grid-template-columns: 1fr; gap: 12px; }

  .blogs-section .container { padding: 0 24px; }
  .blogs-header { grid-template-columns: 1fr; gap: 20px; }
  .blog-cards-row { gap: 28px; }
  .blog-card { flex: 0 0 calc(96% - 30px); }

  .contact-three-col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "right"
      "options";
    column-gap: 0;
    min-height: unset;
  }
  .contact-intro { padding: 0 0 18px; }
  .contact-options-col { 
    grid-area: options;
    padding: 0; align-self: end; margin-bottom: 0;
    position: relative; z-index: 2;
  }
  .contact-option { max-width: 70%; position: relative; z-index: 2; gap: 15px !important; } /* Prevent text from fully overlapping face */
  .contact-col-centre { 
    grid-area: options;
    display: flex; padding: 0;
    justify-self: end; align-self: end;
    width: 50%;
    z-index: 1; margin-right: -16px; margin-bottom: 0;
  }
  .contact-person-img { transform: translateX(-12.5%); }
}

.footer-logo {
  height: 54px;   /* 64px - 0.85 - 54px */
  width: auto; object-fit: contain;
  margin-bottom: 16px;
}

.footer-desc {
  font-size: var(--text-base); font-weight: 400; line-height: 1.4;
  color: var(--white); letter-spacing: 0.03em; margin-bottom: 22px;
}
.m-br { display: none; }

.footer-socials { display: flex; gap: 10px; }
.social-btn {
  width: 34px; height: 34px; background: var(--red); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.social-btn:hover {
  background: var(--red-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(168,12,19,0.5);
}

.back-to-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 24px;
  margin-bottom: 0;
  margin-left: auto;
}
.back-to-top-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.back-to-top-btn svg {
  animation: floatUp 1.5s ease-in-out infinite;
}
.footer-col-title { font-size: var(--text-lg); font-weight: 500; color: var(--white); margin-bottom: 22px; }

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.footer-links a {
  font-size: var(--text-base); font-weight: 400; color: var(--white);
  line-height: 1.7; opacity: 0.88; transition: opacity var(--transition), padding-left var(--transition);
}
.footer-links a:hover { opacity: 1; padding-left: 4px; }

.footer-contact-item {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: var(--text-base); font-weight: 400; color: var(--white); line-height: 1.5;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-copy { font-size: var(--text-sm); font-weight: 400; color: var(--white); }

.footer-legal { display: flex; gap: 26px; }
.footer-legal a, .footer-legal span {
  font-size: var(--text-sm); font-weight: 400; color: var(--white);
  text-decoration: none;
  opacity: 0.8; transition: opacity var(--transition);
}
.footer-legal a:hover { opacity: 1; }

/* --- SPS Core Styles --- */
@media (max-width: 1200px) {
  :root { --blog-pad-x: 36px; }
  .container { padding: 0 36px; }
  .hero-content { padding: 0 75px 45px; }
  .hero-title { font-size: var(--text-4xl); }
  .section-title { font-size: var(--text-2xl); }
  .stats-card { padding: 40px 50px; }
  .stat-num, .stat-plus { font-size: var(--text-4xl); }
  .expertise-card { padding: 50px 55px; }
  .case-studies-card {
    --cs-pad-x: 50px;
    padding: 75px var(--cs-pad-x) 15px;
  }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .newsletter-title { font-size: var(--text-2xl); }
  /* 2 cards on tablet - same formula as CS */
  .cs-card { flex: 0 0 calc((100% - 44px) / 2); }
  .blog-card { flex: 0 0 calc((100% - 44px) / 2); }
}

@media (max-width: 960px) {
  .case-studies-grid-section { padding: 20px 36px 0; }
  :root {
    --blog-pad-x: 24px;
    
    --radius-md: 12px;
    --radius-sm: 8px;
  }
  .navbar-links, .navbar-cert { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 0 16px; }
    .hero-img { height: 570px; }
  .hero-content { padding: 0 30px 30px; }
  .hero-title { font-size: var(--text-2xl); }
  .hero-sub { font-size: var(--text-sm); }
  .hero-sub-desktop { display: none; }
  .hero-sub-mobile { display: block; }
  
  .img-tall, .img-top, .img-mid, .img-sm, .service-card, .service-card-overlay { border-radius: var(--radius-lg); }
  .service-card-overlay.dark { background: rgba(0,0,0,0.45); }

  .who-text-full { margin-top: 30px; }
  .who-we-are-list {
  color: #555;
  font-size: var(--text-base);
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  font-family: 'Alegreya Sans', sans-serif;
}
.who-we-are-list li {
  margin-bottom: 8px;
}
  .who-inner { grid-template-columns: 1fr; gap: 36px; }
  .img-grid { display: none; } /* Hide About Us images on mobile */

  .stats-section { padding: 0 36px; margin-bottom: 16px; }
  .stats-card { padding: 36px 28px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .stat-num, .stat-plus { font-size: var(--text-4xl); }

  .expertise-section { padding: 0 16px; }
  .expertise-card { padding: 40px 28px; }
  .expertise-inner { grid-template-columns: 1fr; gap: 40px; }

  .cs-header { grid-template-columns: 1fr; gap: 28px; }
  .case-studies-section { padding: 40px 16px 40px 16px; }
  .case-studies-card {
    --cs-pad-x: 24px;
    padding: 65px var(--cs-pad-x) 15px;
  }
  /* 1 card on mobile, no gaps needed */
  .cs-cards-row { gap: 44px; }
  .cs-card { flex: 0 0 calc(100% - 30px); }

  .faq-top       { grid-template-columns: 1fr; gap: 20px; }
  .faq-lists-row { grid-template-columns: 1fr; gap: 12px; }

  .blogs-section .container { padding: 0 24px; }
  .blogs-header { grid-template-columns: 1fr; gap: 20px; }
  .blog-cards-row { gap: 28px; }
  .blog-card { flex: 0 0 calc(96% - 30px); }

  .contact-three-col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "right"
      "options";
    column-gap: 0;
    min-height: unset;
  }
  .contact-intro { padding: 0 0 18px; }
  .contact-options-col { 
    grid-area: options;
    padding: 0; align-self: end; margin-bottom: 0;
    position: relative; z-index: 2;
  }
  .contact-option { max-width: 70%; position: relative; z-index: 2; gap: 15px !important; } /* Prevent text from fully overlapping face */
  .contact-col-centre { 
    grid-area: options;
    display: flex; padding: 0;
    justify-self: end; align-self: end;
    width: 50%;
    z-index: 1; margin-right: -16px; margin-bottom: 0;
  }
  .contact-person-img { transform: translateX(-12.5%); }
  .contact-col-right { padding: 0 0 14px; margin: 0 -20px; }
  .contact-icon-box { width: 56px; height: 56px; border-radius: var(--radius-md); }
  .contact-icon-box svg, .contact-icon-box img { width: 22px; height: 22px; object-fit: contain; }


  .newsletter-section { padding: 0 36px; margin-bottom: 16px; }
  .newsletter-card { grid-template-columns: 1fr; gap: 24px; padding: 40px 28px; }

  .footer { padding: 0 16px 20px; }
  .footer-card { padding: 36px 24px 24px;  }
  .footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 640px) {
  .faq { padding: 16px 0; }
  .who-we-are { padding-top: 8px; padding-bottom: 16px; }
  .stats-section { padding: 16px 36px; }
  .expertise-section { padding: 24px 16px; }
  .case-studies-section { padding: 16px 16px 30px 16px; margin-bottom: 0; }
  .logos-section { padding: 16px 0; margin-bottom: 12px; }
  .blogs-section { padding: 16px 0 24px; margin-bottom: 0; }
  .contact-section { padding: 24px 0 0; }
  .newsletter-section { margin-bottom: 32px; }
  .hero-content { padding: 0 clamp(36px, 12vw, 64px) 24px; }
  .hero-title { font-size: var(--text-2xl); }
  .hero-sub { font-size: var(--text-base); }
  .hero-btns { flex-direction: row; flex-wrap: nowrap; gap: calc(8px + 5%); width: 100%; justify-content: flex-start; }
  /* longer primary label gets more room; text may wrap instead of overflowing */
  .hero-content .hero-btns .btn { width: auto; flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding-left: 12px; padding-right: 12px; font-size: var(--text-sm); }
  .hero-content .hero-btns .btn-red { flex-grow: 1.5; }
  .hero-bottom-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  .hero-scroll-indicator { display: none; }
  .hero-trust { display: none; } /* Hide hero trust section on mobile */
  .section-title { font-size: var(--text-lg); line-height: 1.24; margin-bottom: 12px; }
  .section-body { font-size: var(--text-sm); line-height: 1.28; margin-bottom: 16px; }
  
  /* Hide specific section intro texts on mobile only, but keep arrow links */
  .faq-intro,
  .cs-header-right .section-body,
  .blogs-header-right .section-body,
  .contact-intro .section-body {
    display: none;
  }
  .blogs-header, .cs-header, .faq-top { gap: 4px; }
  .blogs-header-right, .cs-header-right { margin-top: 0; }
  .faq-top-right { margin-top: 0; margin-bottom: 11px; }
  
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .stat-num, .stat-plus { font-size: var(--text-2xl); }
  .stat-label { font-size: 12px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service-card { height: 90px; }
  .service-card-label { font-size: var(--text-sm); padding: 8px; gap: 4px; line-height: 1.2; }
  .service-card-label svg { width: clamp(20px, 6vw, 28px); height: clamp(20px, 6vw, 28px); }
  .contact-form-card { padding: 20px 16px 24px; }
  .contact-form-title { font-size: var(--text-xl); margin-bottom: 4px; }
  .contact-form-sub { font-size: var(--text-base); padding: 8px 0 0px 0; margin-bottom: 12px; line-height: 1.43; }
  .newsletter-title { font-size: var(--text-lg); line-height: 1.24; }
  .newsletter-form { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .newsletter-input { width: auto; flex: 1; min-width: 0; }
  .newsletter-form .btn { width: auto; flex-shrink: 0; }

  /* Additional mobile typography polish */
  .arrow-icon { width: 21px; height: 21px; }
  .service-card-label .arrow-icon, .cs-learn .arrow-icon, .blog-learn .arrow-icon, .team-member-card .arrow-link .arrow-icon { width: 19px; height: 19px; } /* Preserve card arrow sizes */
  .arrow-link, .cs-learn, .blog-learn { font-size: var(--text-sm); }
  .faq-q { font-size: var(--text-sm); padding: 10px 18px; line-height: 1.33; }
  .faq-a { font-size: var(--text-sm); line-height: 1.44; }
  .faq-item.active .faq-a { padding: 0 18px 9px; }
  .faq-icon { width: 20px; height: 20px; background-size: 15px 15px; }
  
  .cs-card-text { font-size: var(--text-sm); margin-bottom: 12px; padding-top: 0; line-height: 1.52; }
  .cs-card { flex: 0 0 calc((100% - 30px) * 1.12); padding: 24px 27px 24px; }
  .cs-dots { margin-top: 18px; }
  .expertise-card { padding: 36px 20px; }
  .expertise-icon { margin-bottom: 16px; }
  .case-studies-card { padding: 36px var(--cs-pad-x) 9px; }
  .footer-card { padding: 24px 20px; }
  .blog-card { min-height: 309px; }
  .blog-img { height: 138px; }
  .blog-card .blog-excerpt { font-size: var(--text-sm); line-height: 1.37; height: calc(1.37em * 4); margin: 0 0 5px 0; }
  .blog-body { padding: 10px 18px 10px; }
  .blog-title { font-size: var(--text-sm); line-height: 1.33; margin-bottom: 5px; height: calc(1.33em * 2); }
  .blog-read, .blog-date, .blog-cat-badge { font-size: 12px; }
  .footer-desc { font-size: var(--text-sm); line-height: 1.43; }
  .footer-col-title { font-size: var(--text-sm); margin-bottom: 12px; line-height: 1.33; }
  .footer-links a, .footer-contact-item span { font-size: var(--text-sm); line-height: 1.61; }
  .footer-copy, .footer-legal a, .footer-legal span { font-size: var(--text-sm); }
  
  /* Layout specific sizes */
  .logo-strip-img { height: clamp(34px, 9.6vw, 48px); }
  .stats-card, .newsletter-card { 
    padding: 14px clamp(12px, 4vw, 16px) clamp(16px, 5vw, 20px); 
    gap: 12px; 
    min-height: 128px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
  }
  .newsletter-sub { display: none; }
  
  /* Fluid Radii for all major cards */
  
  
  /* Box scaling */
  .contact-icon-box { width: 34px; height: 34px; border-radius: 8px !important; }
  .contact-icon-box svg, .contact-icon-box img { width: 14px; height: 14px; object-fit: contain; }

  .cs-logo-box { width: 64px; height: 64px; }
  .cs-card-logo { top: -32px; left: 24px; }
  
  .contact-opt-title { font-size: var(--text-sm); }
  .contact-opt-sub { font-size: 13px; }

  /* Navbar */
  .navbar-inner { padding: 0 20px; }
  .navbar-logo img { height: 48px; }

  /* Forms & Buttons */
  .form-input, .newsletter-input { font-size: var(--text-sm); padding: clamp(8px, 2vw, 10px) clamp(10px, 3vw, 14px); }
  .form-textarea { min-height: 85px; margin-bottom: 0; }
  .btn, .hero-btns .btn, .newsletter-form .btn { padding: clamp(8px, 2.5vw, 10px) clamp(24px, 6vw, 36px); font-size: var(--text-base); height: auto; min-width: 0; }

  /* Contact Options Spacing */
  .contact-options-col { margin-bottom: 33px; }
  .contact-options { margin-top: 17px; }

  /* Footer adjustments */
  .footer-col:not(.footer-contact) { display: none; }
  .footer-inner { 
    display: flex; 
    flex-direction: column; 
    gap: 26px; 
    text-align: left;
    align-items: flex-start;
    position: relative;
    padding-bottom: 31px;
  }
  .footer-brand { display: contents; }
  .footer-logo { order: 1; height: 45px; margin: 16px 0 8px 0; display: block; align-self: flex-start; }
  .footer-desc { order: 2; margin: 0; font-size: var(--text-sm); line-height: 1.43; }
  .footer-desc br { display: none !important; }
  .footer .d-br { display: none; }
  .m-br { display: block; }
  .footer-col.footer-contact { order: 3; margin: 0; }
  .footer-socials { order: 4; justify-content: flex-start; margin-top: -12px; }
  
  .back-to-top-btn {
    position: absolute;
    right: 0;
    bottom: 28px;
    margin: 0;
  }
  
  .footer-bottom { padding-top: 14px; }
  .footer-legal { display: none; }
  .footer-contact-item { text-align: left; justify-content: flex-start; align-items: flex-start; margin-bottom: 12px; gap: 10px; }
  .footer-contact-item span { font-size: var(--text-sm); line-height: 1.33; }
  .footer-contact-item svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }

  /* Tweaks */
  .hero-img { height: 570px; object-position: 54% 25%; transform: scale(1.2) translate(0%, -5%); transform-origin: center; }
  .footer-card { padding: 20px 16px 16px; }
}

/* --- SPS Core Styles --- */
.page-header-wrapper { text-align: center; padding: 19px 20px 50px; }
.page-main-title { font-size: var(--text-3xl); font-weight: 500; color: var(--dark); margin-bottom: 13px; }
.page-main-sub { color: var(--black); max-width: 1200px; margin: 0 auto 21px; font-size: var(--text-lg); line-height: 1.4; }

/* --- SPS Core Styles --- */
.contact-breadcrumb { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 500; color: var(--dark); }
.contact-breadcrumb svg { width: 18px; height: 18px; fill: none; stroke: var(--dark); stroke-width: 2; stroke-linejoin: round; }
.contact-breadcrumb .bc-arrow { color: #999; display: inline-flex; }
.contact-breadcrumb .bc-arrow svg { width: 14px; height: 14px; stroke: #999 !important; stroke-width: 2.5; stroke-linecap: round; }
.contact-breadcrumb a { color: inherit; transition: color var(--transition); }
.contact-breadcrumb a:hover { color: var(--red); }
.contact-breadcrumb .bc-home { width: 16px; height: 16px; margin-right: -4px; }
.contact-breadcrumb .bc-active { color: var(--gray); font-weight: 400; }
.contact-info-cards { padding: 16px 20px 20px; max-width: 1200px; margin: 0 auto; }
.contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.contact-info-card { text-align: center; }
.contact-info-icon { margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.contact-info-card:hover .contact-info-icon { transform: translateY(-5px); }
.contact-info-icon img { width: 90px; height: 90px; object-fit: contain; }
.contact-info-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.contact-info-card p { color: #666; font-size: var(--text-base); }
.contact-info-card p a { transition: color var(--transition); }
.contact-info-card p a:hover { color: var(--red); }



@media (max-width: 768px) {
    .who-we-are-list {
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .who-text-full { margin-top: 0; }
  .page-header-wrapper { padding: 12px 20px 24px; }
  .page-main-title { line-height: 1.0; }
  .page-main-sub { line-height: 1.2; margin-bottom: 17px; }
  .page-main-sub + .contact-breadcrumb { padding-top: 5px !important; }
  .contact-info-grid { gap: 34px; }
  .contact-info-cards { padding-bottom: 38px; }
}

/* --- SPS Core Styles --- */
.blogs-grid-section { padding: 20px 0 48px; }
.blog-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-bottom: 40px;
}
.blog-page-grid .blog-card { width: 100%; margin: 0; display: flex; flex-direction: column; }
.blog-page-grid .blog-body { flex-grow: 1; display: flex; flex-direction: column; }
.blog-page-grid .blog-excerpt,
.blog-sidebar .blog-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide cards from the 10th onwards initially */
.blog-page-grid .blog-card:nth-child(n+10) { display: none; }
/* Show them when grid has .show-all */
.blog-page-grid.show-all .blog-card:nth-child(n+10) { display: flex; }

.load-more-wrapper { text-align: center; }
.load-more-wrapper .btn { padding-top: 18px; padding-bottom: 18px; height: auto; }
  @media (max-width: 960px) { .load-more-desktop { display: none !important; } .load-more-mobile { display: inline-flex !important; } }
@media (max-width: 1024px) { .blog-page-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }



@media (max-width: 768px) {
    .who-we-are-list {
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .who-text-full { margin-top: 0; } .blog-page-grid { grid-template-columns: 1fr; gap: 36px; } }


/* --- SPS Core Styles --- */
.blog-single-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; margin-bottom: 56px; }
.blog-article {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.blog-hero-img { width: 100%; object-fit: cover; max-height: 322px; }
.blog-single-cat-badge { top: auto; bottom: 25px; left: 25px; right: auto; font-size: 1rem; padding: 9px 18px; border-radius: 18px !important; }
.blog-article-inner { padding: 30px; }
.blog-single-title { font-size: var(--text-3xl); font-weight: 700; color: var(--dark); margin-bottom: 20px; line-height: 1.2; }
.blog-single-meta { display: flex; justify-content: space-between; align-items: center; color: #666; font-size: 1.1rem; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #ddd; }
.blog-single-meta .read-time { display: flex; align-items: center; gap: 8px; }
.blog-article-content { color: var(--black); font-size: 1.15rem; line-height: 1.5; }
.blog-article-content p { margin-bottom: 10px; }
.blog-article-content h3 { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin: 16px 0 4px; }
.blog-article-content a { color: var(--red); text-decoration: underline; }
.blog-sidebar { display: flex; flex-direction: column; gap: 42px; }
.blog-sidebar .blog-card { width: 100%; margin: 0; flex: none; height: max-content; }
@media (max-width: 1024px) {
  .blog-single-layout { grid-template-columns: 1fr; gap: 50px; }
  .blog-single-title { font-size: 2.2rem; }
}



@media (max-width: 768px) {
    .who-we-are-list {
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .who-text-full { margin-top: 0; }
  .contact-breadcrumb { padding: 30px 20px 5px !important; }
  .blog-single-header .contact-breadcrumb { padding-bottom: 45px !important; }
  .blog-single-layout { margin-bottom: 35px; }
  .blog-single-section .container { padding: 0 16px; }
  .blog-sidebar { display: none; }
  .blog-article-inner { padding: 20px 16px; }
  .blog-hero-img { max-height: 153px; }
  .blog-single-cat-badge { padding: 4px 14px; font-size: 0.85rem; bottom: 12px; left: 12px; }
  .blog-single-title { font-size: var(--text-2xl); line-height: 1.1; margin-bottom: 15px; }
  .blog-single-meta { font-size: 0.95rem; margin-bottom: 20px; padding-bottom: 15px; }
  .blog-article-content { font-size: 1rem; line-height: 1.35; }
  .blog-article-content p { margin-bottom: 8px; }
}





/* ========================================================================= */
/*                           ABOUT US PAGE                                   */
/* ========================================================================= */

.why-choose-us .wcu-item {
  transition: transform 0.3s ease;
}
.why-choose-us .wcu-item:hover {
  transform: translateX(5px);
}
.team-profiles .profile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 16px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.team-profiles .profile-card:hover {
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.team-profiles .social-btn-round {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.team-profiles .social-btn-round:hover {
  background: #3A3A3A;
}
.team-profiles .social-btn-round:hover img {
  filter: brightness(0) invert(1);
}



@media (max-width: 768px) {
    .who-we-are-list {
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .who-text-full { margin-top: 0; }

}


.profile-name {
  font-size: var(--text-xl);
  font-weight: 500;
  color: #3A3A3A;
  margin: 0;
  line-height: 1.2;
}
.profile-title {
  font-size: var(--text-base);
  font-weight: 400;
  color: #555;
  display: block;
  margin-top: 2px;
}



@media (max-width: 768px) {
    .who-we-are-list {
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .who-text-full { margin-top: 0; }
  .profile-name { font-size: var(--text-lg); }
  .profile-title { font-size: var(--text-sm); }
}



.visionary-card {
  background: url('public/images/card_background.webp') center/cover no-repeat;
  border-radius: var(--radius-lg);
  padding: 50px 55px;
  position: relative; overflow: hidden;
  display: flex; gap: 48px; flex-wrap: wrap;
}
.visionary-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(28,28,28,0.96) 0%, rgba(44,44,44,0.82) 60%, rgba(58,58,58,0.70) 100%);
  border-radius: inherit;
}
.visionary-card::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.visionary-card > * { position: relative; z-index: 1; }



@media (max-width: 768px) {
    .who-we-are-list {
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .who-text-full { margin-top: 0; }
  .visionary-card { padding: 40px 28px;  }
}











/* Mobile Overrides for WCU Timeline */
@media (max-width: 768px) {
    .who-we-are-list {
      margin-top: 16px;
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .who-text-full { margin-top: 0; }
  .desktop-br { display: none !important; }
  .wcu-mobile-text { font-size: var(--text-sm) !important; line-height: 1.4 !important; }
  .wcu-connector { height: 58px !important; margin: auto 0 !important; transform: translateY(7px); }
  .wcu-icon-img { margin-bottom: 0px !important; }
}



@media (max-width: 768px) {
  .who-we-are-list {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
  }
  .who-we-are-list li {
    margin-bottom: 4px !important;
  }
}



@media (max-width: 768px) {
  .who-we-are-list {
    font-size: var(--text-sm) !important;
  }
}



@media (max-width: 768px) {
  .stats-section { margin-bottom: 26px !important; }
    .visionary-section {
    padding: 0 20px 18px !important;
  }
  .visionary-card {
    flex-direction: column !important;
    padding: 30px 24px !important;
    
  }
  .visionary-card .reveal-right {
    display: none !important;
  }
}



@media (max-width: 768px) {
  .why-choose-us .wcu-item {
    margin-bottom: 14px !important;
  }
}



@media (max-width: 768px) {
  .visionary-card .reveal-left {
    min-width: 0 !important;
    width: 100% !important;
  }
}



@media (max-width: 768px) {
  .stats-section + .expertise-section {
    margin-top: -20px !important;
  }
}



@media (max-width: 768px) {
  #about-page .stats-section {
      margin-top: -24px !important;
      margin-bottom: 26px !important;
    }
}






@media (max-width: 640px) {
  .who-mobile-img img { height: 180px !important; object-fit: cover; }
  .who-mobile-img { display: block; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 19px; }
}




@media (max-width: 640px) {
  #about-page .who-inner { gap: 34px !important; }
  #about-page .who-images, #about-page .img-grid { display: grid !important; }
  #about-page .img-grid { margin-bottom: 0px; gap: 8px; }
  #about-page .img-tall { height: 192px !important; }
  #about-page .img-stack { height: 192px !important; gap: 8px; }
}



@media (max-width: 768px) {
  #about-page .wcu-right {
    margin-top: -75px !important;
  }
}



@media (max-width: 768px) {
  #about-page .newsletter-section {
    margin-top: -35px !important;
  }
  
  #about-page .team-profiles {
    gap: 27px !important;
    
  }
  
  .profile-wrapper {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .profile-wrapper .profile-card {
    display: flex !important;
    background: #fff !important;
    border-radius: clamp(14px, 5vw, 24px) !important;
    padding: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .profile-wrapper .profile-card img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 14px !important;
  }

  .profile-wrapper > div:last-child {
    display: none !important;
  }
}




/* --- SPS Core Styles --- */
.team-grid-section {
    padding: 25px 100px 80px;
  }
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.team-member-card {
    display: flex;
    -webkit-tap-highlight-color: transparent;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px 24px 20px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  gap: 24px;
  align-items: flex-start;
  position: relative;
}
.team-img-wrap {
  width: 140px;
  height: 140px;
  background-color: #e5e5e5;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.team-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.team-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  line-height: 1.2;
}
.team-socials {
  display: flex;
  gap: 12px;
  position: absolute;
  top: 20px;
  right: 20px;
}
/* keep long names/titles clear of the absolutely positioned social buttons */
@media (min-width: 769px) {
  .team-member-card :is(.team-header, .team-title) { padding-right: 112px; }
}
.team-social-btn {
  width: 52px;
  height: 52px;
  background-color: var(--off-white);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.team-social-btn:hover {
  background: #3A3A3A;
  transform: translateY(-2px);
}
.team-social-btn:hover img {
  filter: brightness(0) invert(1);
}
.team-social-btn img {
  width: 20px;
  opacity: 0.8;
}
.team-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.team-title .pipe {
  display: inline-block;
  width: 3px;
  height: 0.8em;
  background-color: var(--black);
  border-radius: 18px !important;
  margin-right: 3px;
}
.team-desc {
  font-size: var(--text-base);
  color: #666;
  line-height: 1.6;
  margin-bottom: 13px;
}



@media (max-width: 768px) {
  .team-grid-section {
      padding: 18px 36px 40px;
    }
  .team-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .team-member-card {
    flex-direction: row;
    padding: 20px;
    gap: 16px;
    align-items: flex-start;
  }
  .team-img-wrap {
    width: 112px;
    height: 112px;
    border-radius: 12px;
    margin: 0;
  }
  .team-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .team-header { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 8px; }
  .team-name { font-size: var(--text-lg); margin-bottom: 0; }
  .team-title { font-size: 14px; }
  .team-title .pipe {
    display: none;
  }
  .team-socials {
    position: static;
    display: flex;
    gap: 12px;
    margin-top: 8px;
  }
  .team-desc {
    display: block !important;
    text-align: center;
    font-size: 14px;
    margin-bottom: 16px;
  }
  .team-member-card .arrow-link {
    display: inline-flex !important;
    margin-top: 0;
  }
}














/* Team Drill Down Page */
.team-member-details-section { padding: 0 100px; margin-bottom: 58px; margin-top: 0; }
.team-member-details-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
@media (max-width: 1024px) {
  .team-member-details-section { padding: 0 36px; margin-bottom: 16px; }
  .team-member-details-card { padding: 40px 28px; }
}
@media (max-width: 640px) {
  .team-member-details-section { padding: 0 16px; margin-bottom: 32px; }
  .team-member-details-card { padding: 20px; }
}

.team-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}
.team-details-name {
  font-size: 42px;
  font-weight: 700;
  color: #3A3A3A;
  margin: 0 0 8px;
}
.team-details-title {
  font-size: var(--text-lg);
  font-weight: 400;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-details-title .pipe {
  display: inline-block;
  width: 3.5px;
  height: 0.8em;
  background-color: #1a1a1a;
  border-radius: 18px !important;
  margin-right: 8px;
}
.team-details-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.team-details-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}
.team-details-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 500;
  color: #3a3a3a;
  text-decoration: none;
  background-color: transparent;
  padding: 0;
  transition: all 0.2s;
}
.team-details-email:hover {
  color: var(--red);
}

.team-details-content {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--black);
}
.team-details-content p {
  margin-bottom: 20px;
}
.team-details-content p:first-of-type {
  margin-top: 0;
}
.team-details-img-float {
  float: left;
  width: 260px;
  height: 260px;
  border-radius: 24px;
  object-fit: cover;
  background-color: #e5e5e5;
  margin: 0 40px 15px 0;
}
.team-details-content::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 992px) {
  .team-details-img-float {
    float: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 0 30px 0;
  }
}



@media (max-width: 768px) {
  .team-details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 19px;
  }
  .team-details-contact {
    align-items: center;
  }
  .team-details-name {
    font-size: 32px;
  }

}



@media (max-width: 768px) {
  #team-member-page .team-bc-current {
    display: none !important;
  }
}

.team-details-img-mobile { display: none; }



@media (max-width: 768px) {
  /* --- SPS Core Styles --- */
  .team-details-content { font-size: 1rem; line-height: 1.35; }
  .team-details-content p { margin-bottom: 8px; }

  #team-member-page .team-details-img-mobile {
    display: block !important;
    width: 100%;
    border-radius: 16px;
    margin: 4px 0;
    object-fit: cover;
  }
  #team-member-page .team-details-img-float {
    display: none !important;
  }
  #team-member-page .team-details-email {
    background-color: transparent !important;
    padding: 0 !important;
    
    
  }
  #team-member-page .team-details-contact {
    align-items: flex-start !important;
  }
  #team-member-page .team-details-socials {
    margin-top: 4px;
    
  }
  #team-member-page .team-details-name {
    font-size: 28px !important;
    font-weight: 700;
  }
  
  /* --- SPS Core Styles --- */
  .team-member-card {
    display: block !important;
    padding: 20px 20px 44px 20px !important; /* 80px bottom padding reserves space for the absolute bottom row */
    position: relative !important;
  }
  .team-img-wrap {
    float: left !important;
    width: 94px !important;
    height: 94px !important;
    border-radius: 11px !important;
    margin: 0 16px 16px 0 !important; /* Just standard margins now */
  }
  .team-info { display: block !important; }
  .team-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  .team-name { 
    font-size: var(--text-lg) !important; 
    font-weight: 700 !important;
    margin-bottom: 0 !important; 
    margin-top: 0 !important;
    line-height: 1.1 !important;
  }
  .team-title { 
    font-size: var(--text-sm) !important; 
    font-weight: 700 !important;
    margin-top: 3px !important;
  }
  .team-socials {
    display: none !important;
    position: absolute !important;
    right: 20px !important;
    bottom: 20px !important;
    top: auto !important; 
    width: auto !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    gap: 10px !important;
  }
  .team-member-card .team-social-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
  }
  .team-member-card .team-social-btn img {
    width: 16px !important;
  }
  .team-desc { 
    clear: left !important;
    font-size: 1rem !important; 
    line-height: 1.35 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Bottom space is handled by card padding */
    text-align: left !important;
  }
  .team-member-card .arrow-link { 
    display: inline-flex !important;
    position: absolute !important;
    left: 20px !important;
    bottom: 6px !important;
    height: 42px !important;
    align-items: center !important;
  }
}

/* comprehensive fix for mobile tap highlight on team cards */
@media (max-width: 768px) {
  .team-member-card, .team-member-card *, .team-member-details-card, .team-member-details-card * {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    outline: none !important;
  }
  .team-member-card:active, .team-member-details-card:active {
    background: var(--white) !important;
    opacity: 1 !important;
  }
}

/* Global Mobile Anti-Selection & Tap Highlight Fix */
@media (max-width: 768px) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  
  /* Must allow selection in form inputs so users can type */
  input, textarea, select {
    -webkit-user-select: auto !important;
    user-select: auto !important;
  }
}

/* Force 14px gap between Team cards on Mobile */
@media (max-width: 768px) {
  .team-grid {
    gap: 34px !important;
  }
}

/* Change FAQ reveal to slide up instead of left/right on mobile */
@media (max-width: 768px) {
  .faq .reveal-left, .faq .reveal-right {
    transform: translateY(36px) !important;
  }
  .faq .reveal-left.visible, .faq .reveal-right.visible {
    transform: translate(0) !important;
  }

  /* Fix newsletter form overflow on mobile */
  .newsletter-form { width: 100%; }
  .newsletter-form { gap: 10px !important; }
  .newsletter-input { padding: 6px 10px !important; font-size: 13px !important; border-radius: 11px !important; }
  .newsletter-form .btn { padding: 6px 12px !important; font-size: var(--text-sm) !important; border-radius: 11px !important; }

}
/* Desktop Socials inside profile-card */
.desktop-socials { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.desktop-socials .social-btn-round { 
  width: 60px; height: 60px; 
  background-color: var(--off-white); 
  border-radius: 18px !important; 
  display: flex; align-items: center; justify-content: center;
  transition: 0.3s;
}
.desktop-socials .social-btn-round:hover { background-color: #3A3A3A; transform: translateY(-2px); }
.desktop-socials .social-btn-round:hover img { filter: brightness(0) invert(1); }
@media (max-width: 960px) {
  .desktop-socials { display: none !important; }
}



/* Hide extra mobile social icons on desktop view */
@media (min-width: 961px) {
  .profile-wrapper > div:last-child {
    display: none !important;
  }
}


/* Drill-down paragraph spacing */
.team-details-content p {
  margin-bottom: 17px; /* Reduced by ~36% from standard 26px line-height spacing */
}
.team-details-content p:last-child {
  margin-bottom: 0;
}


/* Push contact intro down in web view only */
@media (min-width: 961px) {
  .contact-intro {
    position: relative;
    top: -10px;
  }
}


/* Push wcu-left down slightly in web view only on About page */
@media (min-width: 961px) {
  #about-page .wcu-left,
  #about-page .wcu-right {
    position: relative;
    top: 10px;
  }
}


/* Email Toast Notification */
#email-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#email-toast.show {
  opacity: 1;
  visibility: visible;
}

/* --- SPS Core Styles --- */

/* White Case Study Cards (for Case Studies Page) */
.cs-card-white {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
}
.cs-card-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.cs-card-white .cs-card-logo {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.cs-card-white .cs-card-text {
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}
.cs-card-white .cs-card-divider {
  width: 100%;
  height: 1px;
  background: #eee;
  margin-bottom: 15px;
}
.cs-card-white .cs-learn {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cs-card-white .cs-learn .arrow-icon {
  color: var(--red);
}

/* 7 Line Text Clamp */
.text-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

/* Flex layout for case studies to match home page exactly */
.case-studies-grid-section { padding: 20px 100px 0; }

.cs-page-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 44px;
  row-gap: 44px;
  margin-bottom: 40px;
}




/* --- SPS Core Styles --- */
.cs-details-page { background: var(--off-white); }
.cs-details-header { padding-top: 0; }

.cs-details-hero-wrap {
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 60px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}

.cs-details-hero {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}


.cs-details-content-section {
  padding-bottom: 0;
  margin-bottom: 40px;
}
.cs-details-content-section .cs-content-block:last-child {
  margin-bottom: 0;
}


/* Title Block */
.cs-details-title-block {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 60px;
  row-gap: 30px;
  margin-bottom: 40px;
  background: var(--white);
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.04);
  align-items: start;
}
.cs-logo-cell {
  padding-right: 40px;
}
.cs-meta-cell {
  padding-right: 40px;
}
.cs-details-logo {
  max-width: 140px;
}
.cs-title-cell {
  /* Title aligned with logo */
}
.cs-details-h1 { font-size: var(--text-3xl); color: #111; margin-bottom: 0; line-height: 1.15;
  font-weight: 700;
}
.cs-overview-text {
  font-size: var(--text-base);
  color: #444;
  line-height: 1.5;
}

/* Content Blocks (60/40 Split) */
.cs-content-block {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: stretch;
  }
.cs-content-left {
  flex: 0 0 calc(60% - 20px);
  background: var(--white);
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}
.cs-content-right {
    flex: 0 0 calc(40% - 20px);
    background: var(--white);
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
  }
.cs-block-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
  }

.cs-block-title {
  font-size: var(--text-xl);
  color: #111;
  margin-bottom: 25px;
  font-weight: 700;
}
.cs-block-text {
  font-size: var(--text-base);
  color: #444;
  line-height: 1.5;
}
.cs-block-text ul {
  padding-left: 20px;
  margin-top: 20px;
}
.cs-block-text li {
  margin-bottom: 12px;
}

/* Fix bottom padding optical illusion by removing margin from last child */
.cs-content-left > :last-child,
.cs-overview-cell > :last-child,
.cs-meta-cell > :last-child,
.cs-block-text > :last-child,
.cs-block-text ul > li:last-child {
  margin-bottom: 0 !important;
}


/* Mobile Overrides */
@media (max-width: 960px) {
  .cs-details-title-block {
    grid-template-columns: 1fr;
    padding: 30px;
    row-gap: 20px;
  }
  .cs-content-block {
    flex-direction: column;
    padding: 30px;
    gap: 30px;
  }
  .cs-logo-cell, .cs-meta-cell {
    border-right: none;
    padding-right: 0;
  }
  .cs-title-cell {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
  .cs-content-left, .cs-content-right {
    flex: 1;
    width: 100%;
    padding: 30px;
  }
  .cs-content-right {
    padding: 0; /* image wrapper doesn't need padding */
  }
}

  /* --- SPS Core Styles --- */
@media (max-width: 960px) {
  .case-studies-grid-section {
    padding-left: 36px !important;
    padding-right: 36px !important;
    padding-top: 20px !important;
  }
  .cs-page-grid {
    column-gap: 0 !important;
    row-gap: 44px !important;
    margin-bottom: 50px !important;
  }
  .cs-page-grid .cs-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}




/* --- SPS Core Styles --- */
.ui-pipe { flex-shrink: 0;
  display: inline-block;
  width: 4px;
  height: 19px;
  border-radius: 2px;
  background-color: var(--red);
  margin-right: 8px;
  vertical-align: middle;
}
.ui-pipe.pipe-white { background-color: var(--white); }
.ui-pipe.pipe-gray { background-color: #888; }
.ui-pipe.pipe-team { height: 16px; width: 3px; min-width: 3px; max-width: 3px; margin-right: 3px; transform: translateY(-1px); }

/* --- SPS Core Styles --- */
.cs-get-in-touch-card {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background: #fafafa;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.cs-get-in-touch-card .git-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #222;
  margin-bottom: 30px;
}
.cs-get-in-touch-card .git-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}
.cs-get-in-touch-card .git-icon {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.04);
  color: #333;
}
.cs-get-in-touch-card .git-text h5 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #111;
  margin: 0 0 4px 0;
}
.cs-get-in-touch-card .git-text p {
  font-size: var(--text-sm);
  color: #666;
  margin: 0;
  line-height: 1.4;
}
.cs-get-in-touch-card .git-link {
  margin-top: 15px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s ease;
}
.cs-get-in-touch-card .git-link:hover {
  gap: 12px;
}

.cs-label {
  font-size: 14px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 700;
}
.cs-value {
  font-size: var(--text-lg);
  color: #111;
  font-weight: 500;
  margin-bottom: 25px;
}

.cs-tech-h4 {
  font-size: var(--text-base);
  color: #111;
  margin-top: 24px;
  margin-bottom: 8px;
  font-weight: 700;
}
.cs-block-text > .cs-tech-h4:first-child {
  margin-top: 0;
}
.why-choose-us .wcu-item {
  transition: transform 0.3s ease;
}
.why-choose-us .wcu-item:hover {
  transform: translateX(5px);
}
.team-profiles .profile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wcu-connector {
  width: 2px;
  background-color: #5D5D5D;
  flex-grow: 1;
  position: relative;
  margin: 10px 0;
}
.wcu-connector::before,
.wcu-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #5D5D5D;
}
.wcu-connector::before {
  top: -4px;
}
.wcu-connector::after {
  bottom: -4px;
}
@media (max-width: 768px) {
  .wcu-connector {
    height: auto !important;
    margin: 10px 0 !important;
    transform: none !important;
  }
}
.why-choose-us .wcu-item {
  padding-bottom: 25px;
}
.why-choose-us .wcu-item:last-child {
  padding-bottom: 0;
}
.wcu-connector {
  margin: 12px 0 !important;
}
@media (max-width: 768px) {
  .wcu-connector {
    margin: 12px 0 !important;
  }
}
.why-choose-us .wcu-item {
  padding-bottom: 0 !important;
}
.why-choose-us .wcu-text {
  padding-bottom: 20px;
}
.why-choose-us .wcu-item:last-child .wcu-text {
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .why-choose-us .wcu-text {
    padding-bottom: 12px !important;
  }
  .wcu-connector {
    margin: 8px 0 !important;
  }
}
.wcu-connector {
  margin: 24px 0 !important;
}
@media (max-width: 768px) {
  .wcu-connector {
    margin: 16px 0 !important;
  }
}
@media (max-width: 768px) {
  .wcu-connector {
    margin: 28px 0 !important;
  }
}
@media (max-width: 768px) {
  .why-choose-us .wcu-text {
    padding-bottom: 4px !important;
  }
}
@media (max-width: 768px) {
  .why-choose-us .wcu-mobile-text {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 768px) {
  .wcu-connector {
    margin: 22px 0 !important;
  }
}
@media (max-width: 768px) {
  .why-choose-us .wcu-right .wcu-mobile-text {
    margin-bottom: 24px !important;
  }
}
@media (max-width: 768px) {
  .why-choose-us .wcu-item:hover {
    transform: none !important;
  }
}
@media (max-width: 768px) {
  .why-choose-us .wcu-right .wcu-mobile-text {
    margin-bottom: 12px !important;
  }
  .team-profiles {
    margin-top: 20px !important;
  }
}
@media (max-width: 768px) {
  .team-profiles {
    margin-top: 32px !important;
  }
}
@media (min-width: 769px) {
  .why-choose-us .wcu-text {
    transform: translateY(8px);
  }
}
@media (min-width: 769px) {
  .why-choose-us .wcu-right p:first-of-type {
    margin-bottom: 10px !important;
  }
}
@media (max-width: 992px) {
  .wcu-left, .wcu-right {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}
/* ========================================================================= */
/*                   LARGE MONITOR & 4K SCALING                              */
/* ========================================================================= */
@media (min-width: 1900px) {
  body {
    zoom: 1.25;
  }
}

@media (min-width: 2500px) {
  body {
    zoom: 1.65;
  }
}

@media (min-width: 3800px) {
  body {
    zoom: 2.4;
  }
}
/* Smooth loading: each page's <head> works out the exact zoom before anything is drawn
   (the stepped media queries above remain as the fallback when JavaScript is off). */
html.sps-zoom body { zoom: var(--sps-zoom); }
html { background: var(--off-white); } /* no white flash before the page body is drawn */

/* Soft fade between pages instead of a hard redraw (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: ease; }
/* Only an opacity fade (no movement), so this also suits people who turn off motion */

.navbar-logo img { height: 61px !important; }
.footer-logo { height: 49px !important; }

@media (max-width: 768px) {
  .navbar-logo img { height: 43px !important; }
  .footer-logo { height: 41px !important; }
}
@media (max-width: 768px) {
  .footer-desc,
  .footer-socials,
  .footer-contact {
    padding-left: 16px !important;
  }
}
@media (max-width: 768px) {
  .footer-desc,
  .footer-socials,
  .footer-contact {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
@media (max-width: 768px) {
  .back-to-top-btn {
    right: 8px !important;
  }
}
@media (max-width: 768px) {
  .contact-form-sub {
    font-size: var(--text-sm) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (min-width: 769px) {
  .hero-content .section-label {
    margin-left: 15px !important;
  }
}
@media (max-width: 768px) {
  .hero-title {
    line-height: 1.25 !important;
    letter-spacing: 0.5px !important;
    word-spacing: 2px !important;
  }
}
@media (max-width: 768px) {
  .hero-content {
    padding-bottom: 88px !important;
  }
}
@media (max-width: 768px) {
  .hero-content {
    padding-bottom: 88px !important;
  }
}
@media (min-width: 769px) {
  .hero-content .section-label {
    margin-left: 0 !important;
  }
}
@media (min-width: 993px) {
  .hero-content .section-label {
    margin-left: -14px !important;
  }
}
@media (min-width: 993px) {
  .hero-content .section-label {
    margin-left: 0 !important;
  }
}
@media (min-width: 993px) {
  .hero-content .section-label {
    margin-left: 3px !important;
  }
}
@media (min-width: 993px) {
  .hero-content .section-label {
    margin-left: 6px !important;
  }
}
@media (max-width: 768px) {
  .label-text {
    font-size: var(--text-sm) !important;
  }
}
@media (max-width: 768px) {
  .label-bar {
    height: 16px !important;
  }
}
@media (max-width: 768px) {
  .label-bar.white {
    width: 3.8px !important;
  }
}
@media (min-width: 993px) {
  .hero-content {
    justify-content: center !important;
  }
}
@media (min-width: 993px) {
  .hero-content {
    padding-top: 68px !important;
  }
}
/* Desktop hero: copy centred vertically, left edge on the page grid (100px, same as\n   .container). The card keeps its 620px height, which the
   page zoom (<html data-fit-height="716"> = navbar 96 + hero 620) relies on. */
@media (min-width: 993px) {
  .hero-content { padding: 48px 100px !important; }
}


@media (min-width: 993px) {
  .hero-title {
    margin-bottom: 25px !important;
  }
  p.hero-sub {
    margin-bottom: 40px !important;
  }
}@media (min-width: 993px) {
  .hero-scroll-indicator {
    transform: translateY(22px) !important;
  }
}

@media (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
}

/* FAQ Mobile See More */
@media (min-width: 769px) {
  .faq-see-more-wrap { display: none !important; }
}
@media (max-width: 768px) {
  .faq-right {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s ease-in-out, opacity 0.5s ease-in-out;
  }
  .faq-lists-row.show-all .faq-right {
    max-height: 1500px;
    opacity: 1;
  }
  .faq-lists-row.show-all .faq-see-more-wrap {
    display: none;
  }
}

/* --- SPS Core Styles --- */
@media (max-width: 960px) {
  .solutions-focus-grid,
  .growth-grid,
  .solutions-split-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .solutions-focus-grid .reveal-right img {
    margin-top: 20px;
  }
}

/* Engine Cards */
.engine-card {
  position: relative;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.03);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  height: 100%;
}
.engine-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.08);
}
.engine-card .logo-bottom-right {
  position: absolute;
  right: 28px;
  bottom: 28px;
  max-height: 48px;
  width: auto;
  z-index: 1;
  transition: transform 0.4s ease;
}
.engine-card:hover .logo-bottom-right {
  transform: scale(1.08);
}
/* Download Link Animation */
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
}
.download-link svg {
  color: var(--red);
  transition: transform 0.3s ease;
}
.download-link:hover svg {
  transform: translateY(4px);
}




.platform-logo-box img {
  max-width: 70%;
  max-height: 70%;
}
.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

@media (max-width: 768px) {
  .text-clamp-3 {
    -webkit-line-clamp: 6 !important;
  }
  .hero-content .section-label { margin-bottom: 8px !important; }
  .hero-content .label-bar { transform: translateY(-9px); }
  .hero-content .label-text { display: inline-block; transform: translateY(3px); }
  .hero-content .hero-title { margin-bottom: 16px !important; }
  .hero-content .hero-sub { margin-bottom: 24px !important; }
}
.hs-track { overflow-anchor: none !important; }

html, body { overflow-anchor: none !important; }

/* --- SPS Core Styles --- */
@keyframes heroSlideUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

html:not(.hero-static) .hs-card:nth-of-type(1) .hero-content > * {
  opacity: 0;
  animation: heroSlideUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html:not(.hero-static) .hs-card:nth-of-type(1) .hero-content .section-label {
  animation-delay: 0.1s;
}
html:not(.hero-static) .hs-card:nth-of-type(1) .hero-content .hero-title {
  animation-delay: 0.25s;
}
html:not(.hero-static) .hs-card:nth-of-type(1) .hero-content .hero-sub {
  animation-delay: 0.4s;
}
html:not(.hero-static) .hs-card:nth-of-type(1) .hero-content .hero-bottom-bar {
  animation-delay: 0.55s;
}


/* Back to top tooltip */
@media (hover: hover) and (pointer: fine) {
  .back-to-top-btn {
    position: relative;
  }
  .back-to-top-btn::before {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: var(--gray);
    color: #fff;
    padding: 8px 18px;
    border-radius: 9999px; /* full pill radius */
    font-size: 16px; /* normal body font size */
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .back-to-top-btn::after {
    content: '';
    position: absolute;
    right: calc(100% + 8px); /* exactly aligns the tail to the bubble */
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 6px; /* standard right-pointing CSS triangle */
    border-color: transparent transparent transparent var(--gray);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
  }
  .back-to-top-btn:hover::before,
  .back-to-top-btn:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}


/* --- LENIS SMOOTH SCROLL --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --- Contact Options Hover Animation --- */
.contact-option {
  cursor: pointer;
  transition: transform 0.3s ease;
}
@media (hover: hover) {
  .contact-option:hover {
    transform: translateX(8px);
  }
  .contact-option:hover .contact-icon-box {
    transform: scale(1.08);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1), inset 0 2px 6px rgba(0,0,0,0.04);
  }
}




/* ===================================================================
   NAV DROPDOWN - Our Solutions
   =================================================================== */
.has-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret,
.has-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: -14px;
  min-width: 230px; padding-top: 12px;
  transform: translateY(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1100;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-panel {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex; flex-direction: column; gap: 2px;
}
.dropdown-link {
  display: block;
  padding: 11px 20px;
  border-radius: 16px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: var(--text-base);
  color: var(--black);
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.dropdown-link:hover { background: var(--off-white); }
.dropdown-link.active { color: var(--red); }
/* two groups side by side: industries | platforms */
.nav-dropdown-panel--grouped { display: grid; grid-template-columns: auto auto; gap: 6px; padding: 10px; }
.dropdown-group { display: flex; flex-direction: column; gap: 2px; min-width: 210px; }
.dropdown-group + .dropdown-group { border-left: 1px solid rgba(0, 0, 0, 0.06); padding-left: 6px; }
.dropdown-group-label {
  padding: 8px 20px 6px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a8a8a;
}
.dropdown-link--platform { display: flex; flex-direction: column; gap: 1px; padding-top: 9px; padding-bottom: 9px; }
.dropdown-link-tag { font-size: 14px; color: #8a8a8a; transition: color 0.25s ease; }
.dropdown-link--platform:hover .dropdown-link-tag { color: var(--gray); }
.dropdown-link { transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.dropdown-link:hover { transform: translateX(2px); }
.mobile-sublabel {
  padding: 12px 12px 4px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a8a8a;
}
/* Mobile menu dropdown */
.mobile-dropdown-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-dropdown-head .nav-link { flex: 1; }
.mobile-caret-btn {
  background: none; border: none; cursor: pointer;
  padding: 10px 14px; border-radius: 12px; color: var(--black);
  display: flex; align-items: center;
}
.mobile-caret-btn:hover { background: rgba(0, 0, 0, 0.05); }
.mobile-dropdown.open > .mobile-dropdown-head .nav-caret { transform: rotate(180deg); }
/* Industries / Platforms: collapsible groups inside Our Solutions */
.mobile-subgroup { display: flex; flex-direction: column; }
.mobile-subgroup-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 14px 9px 12px;
  background: none; border: none; border-radius: var(--radius-md); cursor: pointer;
  font-family: 'Alegreya Sans', sans-serif; font-size: var(--text-base); color: #555; text-align: left;
  transition: background var(--transition), color var(--transition);
}
.mobile-subgroup-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.mobile-subgroup-toggle .nav-caret { width: 14px; height: 14px; }
.mobile-subgroup.open > .mobile-subgroup-toggle { color: var(--black); }
.mobile-subgroup.open > .mobile-subgroup-toggle .nav-caret { transform: rotate(180deg); }
.mobile-subgroup-links { display: none; flex-direction: column; gap: 2px; padding: 2px 0 6px 16px; }
.mobile-subgroup.open > .mobile-subgroup-links { display: flex; }
.mobile-submenu {
  display: none; flex-direction: column; gap: 2px;
  margin: 0 0 8px 0; padding-left: 0;
}
.mobile-dropdown.open .mobile-submenu { display: flex; }
.mobile-sublink {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: var(--text-base); color: var(--black);
  padding: 9px 12px; border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition);
}
.mobile-sublink:hover { background: rgba(0, 0, 0, 0.05); }
.mobile-sublink.active { color: var(--red); }
/* --- About page: mobile layout for the solution sections --- */
@media (max-width: 640px) {
  /* Integrations: tighter cards, smaller logos */
  #integrated-ecosystems .section-header-flex { gap: 16px !important; margin-bottom: 24px !important; }
  #integrated-ecosystems .integrations-grid {
    grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 24px !important;
  }
  #integrated-ecosystems .integration-card { padding: 20px !important; border-radius: 18px !important; }
  #integrated-ecosystems .integration-card h4 { font-size: 17px !important; margin-bottom: 8px !important; }
  #integrated-ecosystems .integration-card .section-body { margin-bottom: 14px !important; }
  #integrated-ecosystems .int-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  #integrated-ecosystems .int-logo { height: 32px; }
  #integrated-ecosystems .int-tag { padding: 4px 12px; font-size: 13px; }
  #integrated-ecosystems .reveal-up[style*="margin-top: 56px"] { margin-top: 28px !important; }

  /* Stats: 2x2 grid, evenly spread */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 12px !important; }
}

/* --- Home page: mobile-only refinements --- */
@media (max-width: 768px) {
  /* Stats card: compact */
  .stats-card { min-height: 0 !important; padding: 16px 14px !important; gap: 0 !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px 8px !important; }
  .stat-num-wrap { line-height: 1; }
  .stat-label { margin-top: 3px !important; line-height: 1.2; }

  /* Hero: dots only, no arrows */
  .hs-arrows { display: none !important; }
  .hs-nav-vertical { right: 47px !important; }

  /* Hero: tagline closer to heading, bolder heading */
  .hero-content .section-label { margin-bottom: 2px !important; transform: translateY(6px); }
  .hero-content .hero-title { font-weight: 500 !important; }
}
/* --- Home page mobile: small gap tweaks --- */
@media (max-width: 768px) {
  .hs-nav-vertical { bottom: 49px !important; }
}

.mbr { display: none; }
@media (max-width: 768px) { .mbr { display: inline; } }

/* --- Case studies page: gap before newsletter (web) --- */
@media (min-width: 769px) {
  .case-studies-grid-section + .newsletter-section { margin-top: 64px; }
}
/* --- Hero dots: mobile size/spacing --- */
@media (max-width: 768px) {
  .hs-indicators { gap: 12px !important; }
  .hs-dot { width: 10px !important; height: 10px !important; }
  .hs-dot.active { width: 30px !important; height: 10px !important; border-radius: 5px !important; }
}

/* Mobile menu: Our Solutions sub-links nudged right, slightly lighter text */
.mobile-submenu { padding-left: 20px; }
.mobile-sublink { color: #555; }
.mobile-sublink.active { color: var(--red); }

/* Mobile hero: tagline slightly bigger, 4px closer to the bar, nudged 4px down (all cards) */
@media (max-width: 768px) {
  .hero-content .section-label .label-text { font-size: 17px !important; margin-left: -4px !important; }
  .hero-content .section-label { position: relative; top: 4px; }
}

/* Web view hero: description paragraph a little smaller (all cards) */
@media (min-width: 769px) {
  p.hero-sub.text-clamp-3 { font-size: calc(var(--text-xl) - 2px); }
}
.hero-br { display: none; }
/* Phone hero: smaller description and a single full-width call to action
   (Book a demo is desktop/tablet only) */
@media (max-width: 768px) {
  .hero-content p.hero-sub.text-clamp-3 { font-size: 16px !important; line-height: 1.45 !important; }
  .hero-content .hero-btns { width: 100%; }
  .hero-content { padding-bottom: 32px !important; } /* was 88px for slide dots that no longer exist */
  /* the card fits the visible screen (svh excludes the browser toolbar) under the
     96px navbar with a small gap below it; never shorter than the copy needs */
  .home-page .hs-pin,
  .home-page .hero-img { height: clamp(440px, calc(100svh - 96px - 20px), 570px) !important; }
  /* frame the man pointing, the man in the white shirt and the monitor
     (right half of hero_01.webp) instead of the zoomed-in centre */
  .home-page .hero-img { object-position: 65% center !important; transform: none !important; }
  .hero-content .hero-btns .btn:not(.btn-red) { display: none !important; }
  /* same size as the contact form's Submit Message button; natural width */
  .hero-content .hero-btns .btn-red {
    flex: 0 0 auto !important; width: auto !important;
    height: 41px !important; padding: 0 24px !important;
    white-space: nowrap !important; font-size: var(--text-base) !important;
    border-radius: 12px !important;
  }
}
/* Hero copy: headline and description break where the HTML says (<br class="hero-br">) */
@media (min-width: 769px) {
  .hero-content .hero-title {
    font-size: clamp(40px, 4.3vw, 64px);
    line-height: 1.08;
    max-width: none;
  }
  .hero-br { display: inline; }
  /* one rhythm for label -> headline -> text -> buttons, label flush with the copy */
  .hero-content .section-label { margin-left: 0 !important; margin-bottom: 22px !important; }
  .hero-content .hero-title { margin-bottom: 22px !important; letter-spacing: -0.015em; font-size: clamp(38px, 4.6vw, 68px); }
  .hero-content p.hero-sub.text-clamp-3 { margin-bottom: 36px !important; color: rgba(255, 255, 255, 0.86); }
  .hero-content p.hero-sub.text-clamp-3 {
    font-size: var(--text-lg);
    line-height: 1.5;
    max-width: none;
  }
}

/* =====================================================================
   HOME MIDDLE SECTIONS
   Industries (light) -> What We Automate (dark) -> Why SP Solutions (light)
   -> Core Platforms (dark) -> How an Engagement Works (light). One spacing scale, one icon-tile treatment,
   and dark-card content aligned to the .container gutter.
   ===================================================================== */
:root {
  --home-space: clamp(40px, 4.5vw, 64px);   /* vertical padding of the light bands */
  --home-head-gap: clamp(32px, 3.6vw, 52px); /* header -> grid */
  --home-gutter: 100px;                      /* mirrors .container padding */
  --home-band-x: 44px;                       /* dark band outer inset */
}
@media (max-width: 1200px) {
  :root { --home-gutter: 36px; --home-band-x: 16px; }
}

/* Shared: section header (title left, intro right, baseline-aligned) */
.band-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px 60px; align-items: end;
  margin-bottom: var(--home-head-gap);
}
.band-header .section-title,
.band-header .section-body { margin-bottom: 0; }
.band-header .section-body { max-width: 56ch; }
.band-header .section-title,
.split-intro .section-title { text-wrap: balance; }
.band-header .cs-header-right { margin-top: 0; }
/* title only (long client heading): one column, readable line length */
.band-header--single { grid-template-columns: 1fr; }
.band-header--single .section-title { max-width: 34ch; }

/* Shared: white icon tile used by all three sections */
.icon-tile {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform var(--transition);
}
.icon-tile img { width: 26px; height: 26px; object-fit: contain; }

/* items aren't links, so hover is just a gentle lift of the icon */
.point-item:hover .icon-tile,
.offer-card:hover .icon-tile,
.feature-card:hover .icon-tile,
#visibility-enhancement li:hover .icon-tile,
#empowering-people li:hover .icon-tile { transform: translateY(-3px); }

/* ---------- Light split sections (Why SP Solutions, Industries) ---------- */
.why-sp, .automate-band,
.industries-band { padding: var(--home-space) 0; }

/* intro takes the free space on the left, the points sit towards the right
   (pulled in a little from the edge so they don't feel pushed into the corner) */
.split-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 1201px) {
  .split-inner .point-grid { margin-right: clamp(12px, 1.5vw, 28px); }
}
.split-intro .section-body { max-width: 50ch; }
.split-intro .section-body:last-child { margin-bottom: 0; }

/* equal column widths in both sections so the icons line up vertically */
.point-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(max-content, 244px));
  gap: 40px clamp(40px, 4vw, 64px);
}
.point-item { display: flex; align-items: center; gap: 18px; }

/* multi-word titles are hand-broken into two lines (last word on line two) */
.point-title {
  font-size: var(--text-lg); font-weight: 500; line-height: 1.3;
  color: var(--black); white-space: nowrap;
}
.industry-link { color: inherit; text-decoration: none; transition: color .2s; }
/* Industries We Serve: the whole row is the link; an arrow slides in on hover */
.industries-band .point-item:has(.industry-link) { position: relative; cursor: pointer; }
/* industries without a page aren't links, so no hover change at all */
.industries-band .point-item:not(:has(.industry-link)):hover .icon-tile { background: var(--white) !important; transform: none !important; }
.industries-band .point-item:not(:has(.industry-link)):hover .icon-tile img { filter: none !important; }
.industries-band .industry-link::after { content: ''; position: absolute; inset: -8px; }
.industries-band .industry-arrow {
  flex-shrink: 0; width: 18px; height: 18px; margin-left: -6px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.industries-band .point-item:hover .industry-link,
.industries-band .point-item:focus-within .industry-link { color: var(--red); }
.industries-band .point-item:hover .industry-arrow,
.industries-band .point-item:focus-within .industry-arrow { opacity: 1; transform: translateX(0); }
.industries-band .industry-link:focus-visible { outline: none; }
.industries-band .point-item:has(.industry-link:focus-visible) { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 12px; }
/* no arrows on phones / touch screens */
@media (hover: none), (max-width: 768px) {
  .industries-band .industry-arrow { display: none; }
}

/* ---------- Why SP Solutions (light cards, 3 x 2) ----------
   Light twin of the What We Automate .offer-card: icon beside title,
   description full width below. */
.why-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.why-card {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr;
  column-gap: 18px; row-gap: 18px; align-items: center;
  padding: 30px 32px 32px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform var(--transition), box-shadow var(--transition);
}
/* page is off-white, so cards are white and the tile flips to off-white */
.why-card .icon-tile { background: var(--off-white); border-color: transparent; box-shadow: none; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07); }
.why-card:hover .icon-tile { transform: translateY(-3px); }
.why-card-title { font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--black); margin: 0; }
.why-card-desc { grid-column: 1 / -1; align-self: start; font-size: var(--text-base); line-height: 1.6; color: var(--gray); margin: 0; }

/* ---------- How an Engagement Works (dark band, numbered steps) ----------
   Desktop: 4 steps in a row; a grey rounded number box centred above each card,
   joined centre-to-centre by a dashed connector that draws in on load, with a
   small pulse travelling along it. A plain step icon sits inside each card.
   Each step has --i (0-3) for staggered load animations.
   Tablet: 2 x 2.  Mobile: vertical timeline, icon box on the left. */
.steps {
  --step-gap: 24px; --badge: 60px;
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--step-gap);
}
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.step.reveal-up { transition-delay: calc(var(--i, 0) * 0.14s); }

/* connector: from this box's right edge to the next (centred) box */
.step:not(:last-child)::after {
  content: ''; position: absolute;
  top: calc(var(--badge) / 2 - 1px); height: 2px;
  left: calc(50% + var(--badge) / 2 + 12px);
  right: calc(var(--badge) / 2 + 12px - 50% - var(--step-gap));
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 8px, transparent 8px 14px);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(0.45s + var(--i, 0) * 0.14s);
}
.step.visible:not(:last-child)::after { transform: scaleX(1); }
/* pulse dot that travels along the connector once it has drawn */
.step:not(:last-child)::before {
  content: ''; position: absolute; z-index: 1;
  top: calc(var(--badge) / 2 - 3px); left: calc(50% + var(--badge) / 2 + 12px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--white); box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); opacity: 0;
}
.step.visible:not(:last-child)::before {
  animation: step-pulse 3.2s ease-in-out infinite;
  animation-delay: calc(1.3s + var(--i, 0) * 0.5s);
}
@keyframes step-pulse {
  0%        { opacity: 0; left: calc(50% + var(--badge) / 2 + 12px); }
  10%, 62%  { opacity: 1; }
  75%, 100% { opacity: 0; left: calc(150% + var(--step-gap) - var(--badge) / 2 - 18px); }
}

/* rounded number box (site style: rounded square), a lighter grey than the band */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--badge); height: var(--badge); flex-shrink: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #4a4a4a 0%, #2a2a2a 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white); font-size: 18px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.step:not(.visible) .step-num { opacity: 0; }
/* pop in on load; "backwards" only holds the start frame during the delay,
   so hover transforms still work afterwards */
.step.visible .step-num {
  animation: step-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.14s);
}
@keyframes step-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.step:hover .step-num { transform: translateY(-3px) rotate(-4deg); background: var(--white); color: #171717; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4); }


/* dark glass card (same as .offer-card), centred: plain white icon, title, text */
.step-body {
  flex: 1; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 24px 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(23, 23, 23, 0.9) 0%, rgba(41, 41, 41, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.step:hover .step-body { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); }
.step-icon { width: 40px; height: 40px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: 0.9; transition: transform var(--transition), opacity var(--transition); }
.step:hover .step-icon { transform: translateY(-3px) scale(1.08); opacity: 1; }
.step-title { font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--white); margin: 0 0 10px; }
.step-desc { font-size: var(--text-base); line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .step.visible .step-num { animation: none; }
  .step:not(:last-child)::after { transition: none; transform: none; }
  .step:not(:last-child)::before { display: none; }
}

/* ---------- Our Solutions (dark) ---------- */
.solutions-band, .engagement { padding: 0 var(--home-band-x); }

/* Both homepage dark bands share padding so card content sits on the
   same left edge as .container content in the light bands. */
.solutions-band .expertise-card,
.engagement .expertise-card,
#products .expertise-card {
  padding: clamp(44px, 5vw, 72px) calc(var(--home-gutter) - var(--home-band-x));
}
#products.expertise-section { padding-left: var(--home-band-x); padding-right: var(--home-band-x); }
.solutions-band .expertise-card > *, .engagement .expertise-card > * { position: relative; z-index: 1; }

.offer-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* icon + two-line title side by side, description full width below */
.offer-card {
  position: relative;
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr;
  column-gap: 18px; row-gap: 18px; align-items: center;
  padding: 30px 32px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(23,23,23,0.9) 0%, rgba(41,41,41,0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.offer-card .icon-tile { border-color: transparent; }
/* type matches the case study / Core Platforms cards (.cs-card-client / .cs-card-text) */
.offer-title {
  font-size: 20px; font-weight: 500; line-height: 1.25;
  color: var(--white); margin: 0;
}
.offer-desc { grid-column: 1 / -1; align-self: start; font-size: var(--text-base); line-height: 1.6; color: var(--white); }

/* 6th tile: call to action completes the 3 x 2 grid */
/* Looks like the other cards at rest; red fades in on hover/focus. */
.offer-card--cta { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; isolation: isolate; }
.offer-card--cta::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--red) 0%, var(--red-dark) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.offer-card--cta:hover::before,
.offer-card--cta:focus-within::before { opacity: 1; }
.offer-card--cta .offer-cta-link .arrow-icon { background-color: var(--white); }
.offer-card--cta .offer-title { margin-top: 4px; }
.offer-cta-link { margin-top: auto; padding-top: 24px; font-size: var(--text-lg); }
.offer-cta-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* whole tile clickable */
.offer-cta-link:focus-visible { outline: none; }
.offer-card--cta:has(.offer-cta-link:focus-visible) { outline: 2px solid var(--white); outline-offset: 3px; }
.offer-card--cta:hover .offer-cta-link { gap: 16px; }


/* ---------- Trust strip (directly under the hero) ----------
   Not a card: sits on the page background so it doesn't stack against the
   hero card. Five items split by thin dividers; numbers live in the HTML and
   count up via the shared counter in script.js (.trust-num[data-target]). */
.trust-strip { padding: 0; }
.trust-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px 0;
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 8px; padding: 6px 18px;
}
.trust-item + .trust-item { border-left: 1px solid rgba(0, 0, 0, 0.1); }
.trust-value {
  display: inline-flex; align-items: baseline; justify-content: center;
  height: 48px;
  font-size: clamp(34px, 3.4vw, 46px); font-weight: 600; line-height: 1; color: var(--black);
}
.trust-unit { font-size: 0.5em; font-weight: 500; margin-left: 6px; }
.trust-plus { color: var(--red); margin-left: 2px; }
.trust-logo { height: 54px; width: auto; align-self: center; }
.trust-label { font-size: var(--text-sm); line-height: 1.35; color: var(--gray); max-width: 22ch; }

/* ---------- Three Platforms, One Partner (dark band) ----------
   One card per platform: header, one short paragraph, link. Subgrid keeps the
   paragraphs and links aligned across the three cards. */
#products .expertise-card > * { position: relative; z-index: 1; }
.platform-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px; row-gap: 0;
}
.platform-card {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  padding: 28px 28px 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(23, 23, 23, 0.9) 0%, rgba(41, 41, 41, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.platform-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); }
.platform-head { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; }
.platform-logo {
  flex-shrink: 0; width: 64px; height: 64px; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border-radius: var(--radius-md);
}
.platform-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.platform-name { font-size: 22px; font-weight: 500; color: var(--white); margin: 0 0 2px; }
.platform-tag { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); margin: 0; }
.platform-desc { font-size: var(--text-base); line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; }
.platform-link { align-self: end; padding-top: 22px; font-weight: 500; }
.platform-link .arrow-icon { transition: transform var(--transition); }
.platform-card:hover .platform-link .arrow-icon { transform: translateX(4px); }

@media (max-width: 960px) {
  .trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .trust-item:nth-child(4) { border-left: 0; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card { grid-row: auto; grid-template-rows: none; margin-bottom: 16px; }
  .platform-card:last-child { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; padding: 0; }
  .trust-item { padding: 4px 10px; }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item:nth-child(4) { border-left: 1px solid rgba(0, 0, 0, 0.1); }
  .trust-item--partner { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 12px; border-left: 0 !important; }
  .trust-value { height: 38px; font-size: 32px; }
  .trust-logo { height: 40px; }
  .trust-label { font-size: 13px; }
  .platform-card { padding: 22px 20px 24px; }
}

/* ---------- Homepage vertical rhythm ----------
   Every homepage section sits exactly --home-space below the previous one:
   sections drop their own top/bottom padding and margins and use one bottom
   margin instead. !important is needed to beat older per-breakpoint rules.
   Contact -> Newsletter is deliberately 0: the contact photo "stands" on the
   newsletter banner. */
.home-page :is(.stats-section, .trust-strip, .why-sp, .automate-band, .solutions-band, .industries-band,
  .expertise-section, .engagement, .faq, .case-studies-section, .logos-section, .contact-section) {
  padding-top: 0 !important; margin-top: 0 !important;
}
/* gap between the hero card and the trust strip below it */
.home-page .hs-track { margin-bottom: var(--home-space); }
.home-page :is(.who-we-are, .stats-section, .trust-strip, .why-sp, .automate-band, .solutions-band, .industries-band,
  .expertise-section, .engagement, .faq, .case-studies-section, .logos-section) {
  padding-bottom: 0 !important; margin-bottom: var(--home-space) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  /* stack: intro above its grid in both light sections */
  .split-inner { grid-template-columns: 1fr; gap: 36px; }
  .split-intro .section-body { max-width: 64ch; }
  .point-grid { grid-template-columns: repeat(3, max-content); justify-content: space-between; }
}

@media (max-width: 960px) {
  .band-header { grid-template-columns: 1fr; gap: 14px; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .point-grid { grid-template-columns: repeat(2, max-content); justify-content: start; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .step:nth-child(2n)::after, .step:nth-child(2n)::before { display: none; } /* no line from the end of a row */
}

@media (max-width: 640px) {
  .point-grid { grid-template-columns: 1fr; gap: 20px; }
  .industries-band .point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } /* labels are short */
  .point-item { gap: 12px; }
  .point-item .icon-tile { width: 44px; height: 44px; }
  .point-item .icon-tile img { width: 22px; height: 22px; }
  .point-title { font-size: var(--text-base); }

  .band-header { gap: 4px; }
  .solutions-band .expertise-card, .engagement .expertise-card,
  #products .expertise-card { padding-top: 36px; padding-bottom: 36px; }
  #products.expertise-section { padding-top: 0; padding-bottom: 0; }

  /* compact cards: icon beside title, description below */
  .offer-grid { grid-template-columns: 1fr; gap: 12px; }
  .offer-card { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 12px; padding: 20px; }
  .offer-card .icon-tile { width: 44px; height: 44px; }
  .offer-card .icon-tile img { width: 22px; height: 22px; }
  .offer-desc { font-size: var(--text-sm); line-height: 1.52; } /* = .cs-card-text on mobile */
  .offer-card--cta { display: flex; align-items: flex-start; }
  .offer-cta-link { padding-top: 14px; font-size: var(--text-base); }

  .why-grid { grid-template-columns: 1fr; gap: 12px; }
  .why-card { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 12px; padding: 20px; }
  .why-card .icon-tile { width: 44px; height: 44px; }
  .why-card .icon-tile img { width: 22px; height: 22px; }
  .why-card-title { font-size: var(--text-base); }
  .why-card-desc { font-size: var(--text-sm); line-height: 1.52; }

  /* vertical timeline */
  .steps { --badge: 46px; grid-template-columns: 1fr; gap: 16px; }
  .step { flex-direction: row; align-items: flex-start; gap: 14px; }
  .step-num { font-size: 15px; }
  .step:nth-child(2n)::after { display: block; }
  .step:not(:last-child)::after {
    left: calc(var(--badge) / 2 - 1px); right: auto; width: 2px; height: auto;
    top: calc(var(--badge) + 6px); bottom: -10px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 6px 11px);
    transform: scaleY(0); transform-origin: center top;
  }
  .step.visible:not(:last-child)::after { transform: scaleY(1); }
  .step:not(:last-child)::before { display: none; }
  .step-body { align-items: flex-start; text-align: left; padding: 16px 18px 18px; }
  .step-icon { width: 30px; height: 30px; margin-bottom: 10px; }
  .step:hover .step-body { transform: none; }
  .step-title { font-size: var(--text-base); margin-bottom: 6px; }
  .step-desc { font-size: var(--text-sm); line-height: 1.52; }
}

/* Shared card hover: the icon tile fills brand red and the line icon turns white.
   Same treatment as the product pages (brochure.css). */
.icon-tile { transition: transform var(--transition), background var(--transition); }
.icon-tile img { transition: filter var(--transition); }
.offer-card { transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
@media (hover: hover) {
  :is(.why-card, .offer-card, .point-item, .feature-card, #visibility-enhancement li, #empowering-people li, .wcu-item):hover .icon-tile { background: var(--red); border-color: transparent; }
  :is(.why-card, .offer-card, .point-item, .feature-card, #visibility-enhancement li, #empowering-people li, .wcu-item):hover .icon-tile img { filter: brightness(0) invert(1); }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .icon-tile { transition: none; }
  .point-item:hover .icon-tile, .offer-card:hover .icon-tile, .feature-card:hover .icon-tile,
  #visibility-enhancement li:hover .icon-tile, #empowering-people li:hover .icon-tile { transform: none; }
}


/* =====================================================================
   ABOUT: Efficiency Enhancement integration logos
   Logos are pre-cropped (integrated_system_logos/trimmed/) and each one
   sets --logo-h so they carry equal visual weight: wide wordmarks sit
   shorter, compact marks taller. A 3-column grid keeps them organised.
   ===================================================================== */
#integrated-ecosystems .integration-card { display: flex; flex-direction: column; }
#integrated-ecosystems .integration-card .section-body { margin-bottom: 20px; }
/* 4 columns: ERP and Logistics fill two rows, Banking one row + tags,
   so the three cards come out roughly the same height */
.int-logos {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 12px;
}
.int-logo {
  display: flex; align-items: center; justify-content: flex-start;
  height: 34px;
}
.int-logo img {
  height: var(--logo-h, 20px); width: auto; max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;          /* drops any white canvas onto the card */
}

.int-tags {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.int-tag {
  padding: 6px 14px;
  background: var(--off-white); border-radius: 999px;
  font-size: var(--text-sm); color: var(--black);
}

/* ---------- Content-width cards ----------
   The stats, newsletter and team profile cards line up with normal page
   content (.container): same 1580px maximum and same side padding at every
   screen size. Hero, dark band and footer cards are intentionally wider. */
.stats-section, .newsletter-section, .team-member-details-section {
  max-width: 1580px;
  margin-left: auto; margin-right: auto;
}
@media (min-width: 961px) and (max-width: 1200px) {
  .stats-section, .newsletter-section, .team-member-details-section { padding-left: 36px; padding-right: 36px; }
}

/* ---------- About: International Focus & Visibility Enhancement as dark gray cards ----------
   Same card and insets as "The Visionary" (.visionary-card). */
.dark-card-section { padding: 31px 44px; }
@media (max-width: 768px) {
  .dark-card-section { padding: 18px 20px; }
  /* .visionary-card hides its right column on phones (The Visionary's photos);
     in International Focus the right column is the text, so keep it */
  #international-focus .visionary-card .reveal-right { display: block !important; }
}
/* phones: the points turn into small cards - dark ones inside the dark card */
@media (max-width: 640px) {
  #visibility-enhancement.dark-card-section ul li {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
  #visibility-enhancement.dark-card-section ul li .icon-tile { background: var(--white); }
}

/* =====================================================================
   MOBILE & TABLET SPACING SYSTEM
   Two insets, mirroring desktop (where the dark bands are wider than the
   page content):
     --m-band      screen edge -> full-width bands: hero, dark cards, footer
     --m-gutter    screen edge -> page content: text, light cards, stats,
                   newsletter (a little further in than the bands)
     --m-card-pad  card edge  -> card content
   Loaded last on purpose: it replaces the per-section paddings above.
   ===================================================================== */
@media (max-width: 960px) {
  :root {
    --m-band: 24px;
    --m-gutter: 40px;
    --m-card-pad: 28px;
    --home-band-x: var(--m-band);
    --home-gutter: calc(var(--m-band) + var(--m-card-pad));
  }
  .container, .newsletter-section, .stats-section, .team-grid-section,
  .team-member-details-section { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .hero, .footer, .expertise-section, .solutions-band, .engagement, .dark-card-section,
  .visionary-section, .case-studies-section { padding-left: var(--m-band) !important; padding-right: var(--m-band) !important; }
  /* logo and hamburger lines sit on the band edge (the hamburger and menu links
     carry their own inner padding, hence the offsets) */
  .navbar-inner { padding-left: var(--m-band) !important; padding-right: calc(var(--m-band) - 2px) !important; } /* hamburger lines sit 6px inside the band edge */
  .mobile-menu { padding-left: calc(var(--m-band) - 12px) !important; padding-right: calc(var(--m-band) - 12px) !important; }
  .expertise-card, .visionary-card, .newsletter-card, .footer-card {
    padding-left: var(--m-card-pad) !important; padding-right: var(--m-card-pad) !important;
  }
  /* .hero-content spans the full screen width (not just the card), so add the band */
  .hero-content { padding-left: calc(var(--m-band) + var(--m-card-pad)) !important; padding-right: calc(var(--m-band) + var(--m-card-pad)) !important; }
  .case-studies-card { --cs-pad-x: var(--m-card-pad); }
  /* the contact form column had negative side margins that pushed it past the screen edge */
  .contact-col-right { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }

  /* Footer: brand, then the columns. script.js moves back-to-top into the social
     icons row at these widths, where it sits at the far right of that row. */
  .footer-card { padding-top: 32px !important; }
  .footer-desc, .footer-socials, .footer-contact { padding-left: 0 !important; padding-right: 0 !important; }
  .footer-inner { padding-right: 0; }
  .footer-socials { display: flex; align-items: center; align-self: stretch; width: 100%; }
  .footer-socials .back-to-top-btn {
    position: static !important; margin: 0 0 0 auto !important;
    top: auto !important; right: auto !important; bottom: auto !important;
  }
}@media (min-width: 641px) and (max-width: 960px) {
  .footer-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-inner > .footer-col:nth-child(2) { margin-right: 0; }
}
@media (max-width: 640px) {
  :root { --m-band: 16px; --m-gutter: 28px; --m-card-pad: 24px; --m-hero-pad: 30px; }
  /* logo artwork sits as far from the top edge as from the left edge
     (the logo image has ~7px of empty space on its left, none on top) */
  .footer-card { padding-top: calc(var(--m-hero-pad) + 7px) !important; padding-bottom: 20px !important; }
  /* hero and footer get a roomier inner inset than the other cards, kept equal */
  .hero-content { padding-left: calc(var(--m-band) + var(--m-hero-pad)) !important; padding-right: calc(var(--m-band) + var(--m-hero-pad)) !important; }
  .footer-card { padding-left: var(--m-hero-pad) !important; padding-right: var(--m-hero-pad) !important; }
  /* hamburger lines 28px from the screen edge (the button has 8px inner padding) */
  .navbar-inner { padding-right: calc(var(--m-band) + 4px) !important; }
  .footer-socials .back-to-top-btn { width: 40px; height: 40px; }
  .footer-logo { margin-top: 0 !important; }
}
@media (max-width: 360px) {
  :root { --m-band: 12px; --m-gutter: 22px; --m-card-pad: 20px; --m-hero-pad: 24px; }
}

/* =====================================================================
   DARK CARDS (cards inside the dark bands: What We Automate, Three Platforms,
   How an Engagement Works, Case Studies). Flat and minimal: a surface darker
   than the band with no outline, white line icons on a quiet glass tile.
   Hover raises the card with a soft drop shadow and turns the icon tile red.
   ===================================================================== */
.expertise-card :is(.offer-card, .platform-card, .step-body),
.case-studies-card .cs-card {
  background: rgba(0, 0, 0, 0.32);
  border: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .expertise-card :is(.offer-card, .platform-card):hover,
  .expertise-card .step:hover .step-body,
  .case-studies-card .cs-card:hover {
    background: rgba(0, 0, 0, 0.32);
    border: 0;
    transform: translateY(-6px);
    box-shadow: 0 26px 48px -16px rgba(0, 0, 0, 0.65);
  }
}
.expertise-card .offer-card--cta { background: rgba(0, 0, 0, 0.32); }
/* no hover lift while the case-study row is being dragged */
.case-studies-card .cs-scroll-wrap.grabbing .cs-card { transform: none !important; box-shadow: none !important; }
/* room inside the scroller so the raised card's shadow isn't clipped */
.case-studies-card .cs-scroll-wrap { padding-bottom: 34px; margin-bottom: -24px; }
/* icon tiles: white line icon on a glass square */
:is(.expertise-card, .visionary-card) .icon-tile {
  background: rgba(255, 255, 255, 0.08);
  border: 0; box-shadow: none;
}
:is(.expertise-card, .visionary-card) .icon-tile img { filter: brightness(0) invert(1); opacity: 0.92; }
@media (hover: hover) {
  .expertise-card :is(.offer-card, .platform-card):hover .icon-tile { background: var(--red); transform: none; }
  .expertise-card :is(.offer-card, .platform-card):hover .icon-tile img { opacity: 1; }
}

/* secondary text a step back from the titles */
.expertise-card :is(.offer-desc, .step-desc) { color: rgba(255, 255, 255, 0.72); }
.expertise-card .platform-desc { color: rgba(255, 255, 255, 0.75); }

/* step numbers: same glass tile; red on hover */
.expertise-card .step-num {
  background: rgba(255, 255, 255, 0.08);
  border: 0; box-shadow: none;
}
.expertise-card .step:hover .step-num { background: var(--red); color: var(--white); transform: none; box-shadow: none; }
.expertise-card .step:hover .step-icon { transform: none; }
@media (max-width: 640px) {
  #visibility-enhancement.dark-card-section ul li { background: rgba(0, 0, 0, 0.32); border: 0; box-shadow: none; }
  #visibility-enhancement.dark-card-section ul li .icon-tile { background: rgba(255, 255, 255, 0.08); }
}


/* ===================================================================
   About & Our Team pages (client rewrite, Oct 2026)
   Built on the sp-* section system from solutions-pages.css / solutions-v3.css.
   =================================================================== */

/* About: Partners sub-topic under International Focus, logo under its copy */
#international-focus .sp-topic-body .sp-sub { color: var(--gray); }
#international-focus .sp-topic-body .sp-sub + .section-body { margin-top: 12px; }
.about-partner-logo { display: block; height: 28px; width: auto; mix-blend-mode: multiply; }

/* About: Built to connect - one white card per system group */
.int-card {
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 24px;
  padding: 24px 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.015);
}
.int-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.int-card .int-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
@media (max-width: 960px) {
  .int-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
}
.int-card-title { font-size: var(--text-lg); font-weight: 700; color: var(--gray); line-height: 1.2; margin: 0 0 16px; }
@media (max-width: 640px) {
  .int-card { padding: 20px; border-radius: 18px; }
}

/* About: leadership photo strip linking to the Team page */
.leader-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.leader-chip { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.leader-chip img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 20px; background: #e5e5e5; margin-bottom: 10px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.leader-chip:hover img { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); }
.leader-chip-name { font-size: var(--text-base); font-weight: 700; color: var(--black); line-height: 1.2; }
.leader-chip-role { font-size: var(--text-sm); color: var(--gray); line-height: 1.3; }
#about-team .sp-topic-body > .arrow-link { margin-top: 28px; }

/* Team: leadership cards (photo, name, role, short bio, LinkedIn) */
.leader-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.leader-card {
  display: flex; align-items: flex-start; gap: 24px;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 24px;
  padding: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.015);
}
.leader-photo { width: 140px; height: 140px; flex-shrink: 0; object-fit: cover; border-radius: 16px; background: #e5e5e5; }
.leader-info { flex: 1; min-width: 0; }
.leader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.leader-name { font-size: var(--text-xl); font-weight: 700; color: var(--black); line-height: 1.2; margin: 0 0 4px; }
.leader-role { display: flex; align-items: center; gap: 5px; font-size: var(--text-base); font-weight: 500; color: var(--gray); line-height: 1.3; margin: 0; }
.leader-bio { font-size: var(--text-base); color: var(--gray); line-height: 1.5; margin: 0; }
.leader-head .team-social-btn { flex-shrink: 0; }
#careers .sp-topic-body > .arrow-link { margin-top: 20px; }

@media (max-width: 1200px) {
  .leader-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .leader-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 640px) {
  .leader-card { flex-direction: column; gap: 16px; padding: 20px; }
  .leader-photo { width: 96px; height: 96px; border-radius: 12px; }
  .leader-name { font-size: var(--text-lg); }
  .leader-head .team-social-btn { width: 42px; height: 42px; border-radius: 10px; }
}