/* ============================================================
   ASCENDION · SOFTWARE PRODUCTS AI — page styles
   Figma: T3-Software Products AI (739:5854).
   Every value flows from tokens.css. Built section by section.

   Built:
     1 · Hero (banner)
     2 · AI Is Eating Software Product Engineering
   ============================================================ */

/* ───────────────────────────── Reset ───────────────────────────── */

/* Whoi we are */.acf-curved-carousel {
  width: 100%;
  height: 360px;
  overflow: hidden;
  position: relative;
  --v-offset: 60px;
  --curve-height: 160px;
}

.acf-curved-carousel:before,
.acf-curved-carousel:after {
  content: "";
  display: block;
  background: #f4f4f4;
  width: calc(100% + 2 * var(--v-offset));
  height: var(--curve-height);
  position: absolute;
  border-radius: 50%;
  left: calc(-1 * var(--v-offset));
  right: calc(-1 * var(--v-offset));
  z-index: 1;
}
.acf-curved-carousel:before {
  top: calc(-0.6 * var(--curve-height));
}
.acf-curved-carousel:after {
  bottom: calc(-0.6 * var(--curve-height));
}

.acf-curved-carousel .wrapper {
  display: flex;
  width: max-content;
  animation: scroll 150s linear infinite;
}

.acf-curved-carousel:hover .wrapper {
  animation-play-state: paused;
}

.acf-curved-carousel .wrapper img {
  flex: 0 0 auto;
  width: 320px;
  height: 360px;
  margin-right: 32px;
  object-fit: cover;
}
.page-id-2514 section#slider_section {
    padding-left: 0;
    padding-right: 0;
    background: #f4f4f4;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acf-curved-carousel .wrapper {
    animation: none;
  }
}

/* ESG */
.page.page-id-2438 .fwt__text {
    font-size: var(--font-body_l);
    line-height: var(--lh-body_l);
}

.page.page-id-2438 .fwt:nth-of-type(2) {
    background-color: #fff;
    padding: var(--responsive-spacing-40) var(--margin-margin) var(--responsive-spacing-80);
	position:relative;
}

.page-id-1258 .sp-cta::before{
    top: 0;
    background-image: linear-gradient(#000000, #000000), linear-gradient(#000000, #000000);
    background-position: top left, top right;
}

.page.page-id-2438 .bn__pixels {
    background: #fff;
}

.page.page-id-2438 section.fwt{
	position:relative;
}
.page.page-id-2438 section.agents-studios:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-position: bottom left, bottom right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-2438 section.fwt:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
    background-position: bottom left, bottom right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-2438 .wwd-comm__inner {
    flex-direction: row;
    gap: var(--responsive-spacing-120);
    align-items: baseline;
}

.page.page-id-2438 .agents-studios__content-wrap {
    display: none;
}


.page.page-id-2438 .agents-studios__ctas-row {
    display: none;
}

.page.page-id-2438 section.agents-studios {
    padding-bottom: 0;
}

.page.page-id-2438 .fwt:first-child {
    background-color: #ffffff;
}
.page.page-id-2438 section.awards {
    padding-top: 0;
}


.page.page-id-2438 section.awards:before {
    display: none;
}


.page.page-id-2438 section.fwt {
    padding-bottom: 0;
}

.page.page-id-2438 .awards__ctas {
    justify-content: start;
}
/* GHG Inventory Table - Page 2438 only */
.page.page-id-2438 table {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    background: #fff;
}

.page.page-id-2438 table tr:first-child td {
    background-color: #008c70 !important;
    color: #ffffff !important;
    font-weight: 500;
}

.page.page-id-2438 table td {
    padding: 18px 16px !important;
    border: 1px solid #e6e6e6 !important;
    font-size: var(--font-body_s);
    line-height: 1.5;
    vertical-align: middle;
    color: #333333;
}

/* Column widths */
.page.page-id-2438 table td:nth-child(1) {
    width: 45% !important;
}

.page.page-id-2438 table td:nth-child(2) {
    width: 30% !important;
}

.page.page-id-2438 table td:nth-child(3) {
    width: 25% !important;
}

/* Remove Elementor/global table styles */
.page.page-id-2438 table p {
    margin: 0 !important;
}

.page.page-id-2438 table strong {
    font-weight: 600;
}


/* Mobile Responsive */
@media (max-width: 767px) {
.page-id-2070 .pe-work__dots {
    display: none;
}

    .page.page-id-2438 table {
        display: block;
        overflow-x: auto;
        white-space: normal;
        -webkit-overflow-scrolling: touch;
    }

    .page.page-id-2438 table tbody {
        display: table;
        width: 700px;
    }

    .page.page-id-2438 table td {
        padding: 14px 12px !important;
        font-size: 13px;
    }

    .page.page-id-2438 table td:nth-child(1) {
        width: 45% !important;
    }

    .page.page-id-2438 table td:nth-child(2) {
        width: 30% !important;
    }

    .page.page-id-2438 table td:nth-child(3) {
        width: 25% !important;
    }
}
.page.page-id-2438 a.cta-secondary.cta-secondary--light.cta-secondary--underline {
    background: var(--neutral-black);
    color: #fff;
    text-decoration: none;
	gap:0;
	width: fit-content;
}
.page.page-id-2438 a.cta-secondary.cta-secondary--light.cta-secondary--underline:hover span.cta-primary__arrow {
    background: var(--brand-neural-mint);
}

.page.page-id-2438 a.cta-secondary.cta-secondary--light.cta-secondary--underline:hover span.cta-primary__arrow span.pixel-arrow {
    color: #000 !important;
}
.page.page-id-2438 a.cta-secondary.cta-secondary--light.cta-secondary--underline span.cta-primary__arrow {
    background: #000;
    padding: 14px 16px;
}
.page.page-id-2438 span.pixel-arrow {
    color: #fff !important;
}
/* ESG */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--neutral-white);
  font-family: var(--typeface-secondary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { scroll-behavior: smooth; }
/* tab anchors land below the fixed nav */
#overview, #impact, #capabilities, #case-studies, #insights { scroll-margin-top: var(--space-80); }
body { background: var(--neutral-deep-black); }

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


/* ============================================================
   SITE NAV  (shared with home — fixed glass bar)
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--responsive-spacing-24) var(--margin-margin);
  background-color: transparent;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition:
    background-color 320ms ease,
    backdrop-filter 320ms ease,
    -webkit-backdrop-filter 320ms ease;
}

.nav--scrolled {
  background-color: var(--neutral-black-80);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
	height: 60px;
}

@media (min-width: 1024px) {
  .nav {
    padding-top:    var(--responsive-spacing-12);
    padding-bottom: var(--responsive-spacing-12);
  }
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  color: var(--neutral-white);
}
.nav__logo svg { height: var(--space-32); width: auto; fill: currentColor; display: block; }

.nav__actions { display: flex; align-items: center; gap: var(--space-12); }

.nav__icon { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.nav__icon img, .nav__icon svg { display: block; }
.nav__icon .nav__icon-mobile { display: none; }
.nav__close { display: none; }   /* shown only when the mega menu is open */

.nav__chip { transition: fill-opacity 320ms ease; }
.nav--scrolled .nav__chip { fill-opacity: 0; }


/* ============================================================
   SHARED COMPONENTS  (pulled from the UI Kit / home)
   ============================================================ */

/* Pixel arrow icon */
.pixel-arrow { display: inline-block; width: var(--space-14); flex-shrink: 0; color: currentColor; }
.pixel-arrow svg { width: 100%; height: auto; fill: currentColor; display: block; }

/* Primary CTA · two-compartment chassis */
.cta-primary { display: inline-flex; align-items: stretch; }
.cta-primary__text {
  display: flex;
  align-items: center;
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-cta);
  line-height: var(--lh-cta);
  color: var(--neutral-white);
}
.cta-primary__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-14) var(--space-16);
  color: var(--neutral-white);
}

/* Light variant — translucent deep-black chassis (on the hero image) */
.cta-primary--light       { background: var(--neutral-deep-black-60); transition: background 320ms ease; }
.cta-primary--light:hover { background: var(--neutral-deep-black); }
.cta-primary--light:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }
.nav--scrolled .nav__actions .cta-primary--light,
.nav--scrolled .nav__actions .cta-primary--light:hover { background: transparent; }

/* Solid-dark variant — solid deep-black chassis, white text + arrow */
.cta-primary--solid-dark { background: var(--neutral-deep-black); }
.cta-primary--solid-dark .cta-primary__text  { color: var(--neutral-white); }
.cta-primary--solid-dark .cta-primary__arrow { color: var(--neutral-white); }
.cta-primary--solid-dark:hover .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); }

/* Secondary CTA · text + arrow, no chassis */
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-20);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-cta);
  line-height: var(--lh-cta);
	text-decoration: underline;
}
.cta-secondary--light       { color: var(--neutral-black); }
.cta-secondary--light:hover { color: var(--brand-dark-teal); }
.cta-secondary--dark        { color: var(--brand-neural-mint); }
.cta-secondary--light .pixel-arrow {
    color: var(--brand-dark-teal);
}
.cta-secondary--light:hover .pixel-arrow {
  color: var(--neutral-black);
}
/* .cta-secondary--underline   { text-decoration: underline; text-underline-offset: 4px; } */

/* Arrow-only CTA (icon chip) */
.cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 50px;
  transition: background 200ms ease, color 200ms ease;
}
.cta-arrow--dark        { background: var(--neutral-deep-black); color: var(--neutral-white); }
.cta-arrow--dark:hover  { background: var(--brand-neural-mint);  color: var(--neutral-black); }
.cta-arrow--light       { background: var(--neutral-black);      color: var(--neutral-white); }
.cta-arrow--light:hover { background: var(--brand-neural-mint);      color: var(--neutral-black); }


/* ============================================================
   CORNER PIXEL RULE · section transitions
   Each section paints 2 corner pixels top + 2 bottom, colored by
   the adjacent section's bg (--pixel-top / --pixel-bottom).
   ============================================================ */
.sp-hero, .sp-eating, .sp-impact, .sp-capabilities,
.sp-platforms, .sp-insights, .sp-cta, .site-footer {
  position: relative;
}

.sp-eating::before, .sp-impact::before, .sp-capabilities::before,
.sp-platforms::before, .sp-insights::before, .sp-cta::before,
.sp-hero::after, .sp-eating::after, .sp-impact::after, .sp-capabilities::after,
.sp-platforms::after, .sp-insights::after, .sp-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--space-20);
  pointer-events: none;
  z-index: 5;
  background-repeat: no-repeat, no-repeat;
  background-size: var(--space-20) var(--space-20);
}
.sp-eating::before, .sp-impact::before, .sp-capabilities::before,
.sp-platforms::before, .sp-insights::before, .sp-cta::before {
  top: 0;
  background-image:
    linear-gradient(var(--pixel-top, transparent), var(--pixel-top, transparent)),
    linear-gradient(var(--pixel-top, transparent), var(--pixel-top, transparent));
  background-position: top left, top right;
}
.sp-hero::after, .sp-eating::after, .sp-impact::after, .sp-capabilities::after,
.sp-platforms::after, .sp-insights::after, .sp-cta::after {
  bottom: 0;
  background-image:
    linear-gradient(var(--pixel-bottom, transparent), var(--pixel-bottom, transparent)),
    linear-gradient(var(--pixel-bottom, transparent), var(--pixel-bottom, transparent));
  background-position: bottom left, bottom right;
}

/* Per-section pixel colors (stitched notch effect, per Figma) */
.sp-hero         { --pixel-bottom: var(--neutral-white); }
.sp-eating       { --pixel-top: var(--neutral-white);      --pixel-bottom: var(--neutral-white); }
.sp-impact       { --pixel-top: var(--neutral-white);      --pixel-bottom: var(--neutral-white); }
.sp-capabilities { --pixel-top: var(--neutral-white);      --pixel-bottom: var(--neutral-white); }
.sp-platforms    { --pixel-top: var(--neutral-white);      --pixel-bottom: var(--neutral-white); }
.sp-insights     { --pixel-top: var(--neutral-deep-black); --pixel-bottom: var(--neutral-deep-black); }
.sp-cta          { --pixel-top: var(--neutral-white); }


/* ============================================================
   SECTION 1 · HERO  (Figma I739:5854;1386:3952)
   ============================================================ */
.sp-hero {
  background-color: var(--neutral-deep-black);
  overflow: hidden;
  isolation: isolate;
  /* Hero fills a full screen · vh fallback first, dvh for mobile chrome */
  min-height: 90dvh;
  display: flex;
  flex-direction: column;
  /* top padding clears the fixed nav; bottom padding lifts the title */
  padding: calc(var(--responsive-spacing-120) + var(--space-40)) var(--margin-margin) var(--responsive-spacing-80);
}
.tabs-nav {
  position: sticky;
  top: 0;
  z-index: 9999;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 50px;

  width: 100%;
  height: 80px;
  padding: 0 60px;

  background: #f5f5f5;
  border-bottom: 1px solid #dcdcdc;
}

.tabs-nav a {
  text-decoration: none;
  color: #5b5b5b;
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
  transition: all 0.3s ease;
  height: 80px;
  display: flex;
  align-items: center;
}

.tabs-nav a:hover {
  color: #111;
}

.tabs-nav a.active {
  color: #111;
  font-weight: 500;
}

.tabs-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #008567;
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .tabs-nav {
    gap: 35px;
    padding: 0 30px;
  }
}

@media (max-width: 768px) {
	
	.sp-hero {					
  min-height: 45dvh;
	}	
		
  .tabs-nav {
    gap: 24px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .tabs-nav a {
    font-size: 15px;
  }
}

/* Full-bleed background image + top→bottom darkening gradient */
.sp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.55) 100%),
    url("images/sp-hero-banner.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.sp-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* breadcrumb top · title bottom */
  gap: var(--responsive-spacing-40);
}

/* Breadcrumb */
.sp-hero__crumbs {
  display: inline-flex;
  align-items: center;
  gap: var(--responsive-spacing-12);
  padding: var(--responsive-spacing-12);
}
.sp-hero__crumb {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_xxs);
  line-height: var(--lh-body_xxs);
  color: var(--neutral-white);
}
.sp-hero__crumb--current { color: var(--neutral-light-grey);display: flex;
    align-items: end; }
.sp-hero__crumb sup { font-size: 0.64em; }
.sp-hero__crumb-dot {
  width: 6px;
  height: 6px;
  background: var(--brand-neural-mint);
  flex-shrink: 0;
}

/* Title · "Software Products" + mint "AI" */
.sp-hero__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.01em;
  color: var(--neutral-white);
}
.sp-hero__title-ai {
  font-size: 0.5em;
  color: var(--brand-neural-mint);
  vertical-align: super;
}


/* ============================================================
   SECTION 2 · AI IS EATING SOFTWARE PRODUCT ENGINEERING
   (Figma I739:5854;1386:3965)
   ============================================================ */
.sp-eating {
  background: var(--neutral-white);
  /* top margin removed · the sticky tab menu sits flush at the section top */
  padding: var(--responsive-spacing-80) var(--space-20);
}.platform-ad__text h2 sup {
  font-size: var(--sup-font-size, 0.45em);
  top: var(--sup-top, -0.7em);
  position: relative;
}

.platform-ad__text p {
  color: var(--neutral-white);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_m);
  line-height: var(--lh-body_m);
  margin-bottom: var(--space-24);
  max-width: var(--measure-body, 900px);
}

/* ==========================================
   PLATFORM AD SECTION
========================================== */

.platform-ad {
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-80) var(--space-60);
}

.platform-ad__content {
  margin: 0;

  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
/*   gap: var(--space-60); */
  align-items: center;
}

.platform-ad__text h2 {
  color: var(--neutral-black);
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-32);
}

.platform-ad__text h2 sup {
  font-size: var(--sup-font-size, 0.45em);
  top: var(--sup-top, -0.7em);
  position: relative;
}

.platform-ad__text p {
  color: var(--neutral-deep-black);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_m);
  line-height: var(--lh-body_m);
  margin-bottom: var(--space-24);
  max-width: var(--measure-body, 900px);
}

.platform-ad__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);

  margin-top: var(--space-20);
  padding: var(--space-14) var(--space-16);

  background: var(--neutral-deep-black);
  color: var(--neutral-white);

  font-family: var(--typeface-secondary);
  font-size: var(--font-cta);
  font-weight: var(--weight-medium);
  transition: all 0.3s ease;
}

.platform-ad__btn:hover {
  background: var(--neutral-black);
}

.platform-ad__icon {
  display: grid;
  grid-template-columns: repeat(2, var(--space-6));
  gap: var(--space-2);
}

.platform-ad__icon span {
  width: var(--space-6);
  height: var(--space-6);
  background: var(--neutral-white);
}

.platform-ad__icon span:nth-child(3) {
  grid-column: 2;
}

.platform-ad__image {
  height:306px;
  overflow: hidden;
}

.platform-ad__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .platform-ad__image {
    height: var(--platform-ad-image-h-tablet, 220px);
  }
}

@media (max-width: 768px) {
  .platform-ad__image {
    height: var(--platform-ad-image-h-mobile, 180px);
  }
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {
  .platform-ad {
    padding: var(--responsive-spacing-60) var(--space-40);
  }

  .platform-ad__content {
    gap: var(--space-40);
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
  .platform-ad {
    padding: var(--space-40) var(--space-20);
  }

  .platform-ad__content {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .platform-ad__image {
    order: 2;
	height: 100%;  
  }

  .platform-ad__text h2 {
    margin-bottom: var(--space-20);
  }

  .platform-ad__text p {
    margin-bottom: var(--space-16);
  }

  .platform-ad__btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

  .platform-ad__text h2 {
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
  }

  .platform-ad__text p {
    font-size: var(--font-body_m);
  }

  .platform-ad__btn {
    font-size: var(--font-body_s);
    padding: var(--space-12) var(--space-14);
  }
}
.pb-0{
	padding-bottom:0;
}
/* Sticky section tab menu · stays pinned while scrolling through the
   second section, scrolls horizontally if the tabs overflow.
   Active tab = teal underline (Figma 739:5485). */
.sp-eating__nav {
  position: sticky;
	z-index:99 !important;
  /* sit just below the fixed site nav so the menu stays visible while it
     pins through the whole second section */
  top: var(--space-80);
  z-index: 4;
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
  background: var(--neutral-white);
  border-bottom: 1px solid var(--neutral-light-grey);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sp-eating__nav::-webkit-scrollbar { display: none; }
.sp-eating__tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--space-20) var(--space-8);
  margin-bottom: -1px;                 /* sit the underline on the nav border */
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_xxs);
  line-height: var(--lh-body_xxs);
  color: var(--neutral-slate-grey);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.sp-eating__tab:hover { color: var(--neutral-black); }
.sp-eating__tab--active {
  color: var(--neutral-charcoal);
  border-bottom-color: var(--brand-dark-teal);
}

.sp-eating__inner {
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-40);
}

/* Heading row · title left, dark CTA right (bottom-aligned) */
.sp-eating__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-48);
}
.sp-eating__title {
  margin: 0;
  max-width: 873px;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-black);
}
.sp-eating__title-accent { color: var(--brand-dark-teal); }
.sp-eating__cta { flex-shrink: 0; }
.sp-eating__cta .cta-primary__text sup { font-size: 0.64em; }

/* Content rows */
.sp-eating__rows {
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-20);
}

/* Row 1 · text card (flex 1) + image (fixed-ish) */
.sp-eating__row--split { display: flex; gap: 0; align-items: stretch; }
.sp-eating__row--split .sp-eating__card { flex: 0 0 50%; min-width: 0; }
.sp-eating__media {
  position: relative;
  margin: 0;
  flex: 0 0 50%;
  overflow: hidden;
}
.page-id-3730 .sp-eating__media {
  position: relative;
  margin: 0;
  flex: 0 0 47%;
  overflow: hidden;
}
.sp-eating__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Row 2 · two equal cards */
.sp-eating__row--duo { display: flex; gap: 0; align-items: stretch; }
.sp-eating__row--duo .sp-eating__card { flex: 1 1 0; min-width: 0; }

/* Card · soft-grey block */
.sp-eating__card {
  position: relative;
  background: var(--neutral-soft-grey);
  color: var(--neutral-black);
  padding: var(--responsive-spacing-40);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--responsive-spacing-24);
}
.sp-eating__card-title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.01em;
  color: var(--neutral-black);
}
.sp-eating__card-body {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-black);
}
.sp-eating__card-body strong { font-weight: var(--weight-bold); }

/* Stat card · big number + body, vertically centered */
.sp-eating__card--stat { justify-content: center; gap: var(--space-20); }
.sp-eating__stat {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-black);
}
.sp-eating__card--stat .sp-eating__card-body {
  font-size: var(--font-body_m);
  line-height: var(--lh-body_m);
}

/* Mint card · headline only, centered */
.sp-eating__card--mint { background: var(--brand-neural-mint); justify-content: center; }

/* Corner pixels on cards/media (white = section bg notch) */
.sp-eating__pixel {
  position: absolute;
  width: var(--space-20);
  height: var(--space-20);
  background: var(--neutral-white);
  z-index: 2;
}
.sp-eating__pixel--tr { top: 0;    right: 0; }
.sp-eating__pixel--bl { bottom: 0; left:  0; }


/* ============================================================
   SECTION 3 · BUSINESS IMPACT FROM CODE  (I739:5854;1386:3983)
   ============================================================ */
.sp-impact {
  background: var(--neutral-black);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}
.sp-impact__inner {
  display: flex;
  gap: var(--space-48);
  align-items: stretch;
}
.sp-impact__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.sp-impact__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-white);
}
.sp-impact__title-accent { color: var(--brand-neural-mint); }
.sp-impact__lead {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_m);
  line-height: var(--lh-body_m);
  color: var(--neutral-light-grey);
}

.sp-impact__list {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-impact__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--responsive-spacing-40);
  padding: var(--space-32) var(--space-32) var(--space-32) var(--space-20);
  border-bottom: 1px solid var(--neutral-charcoal);
  transition: background 200ms ease;
}

/* Row hover · charcoal bg, key phrase turns mint, mint corner pixel
   appears top-right (Figma — the highlighted impact row). */
.sp-impact__row:hover { background: var(--neutral-charcoal); }
.sp-impact__row:hover .sp-impact__row-em { color: var(--brand-neural-mint); }
.sp-impact__row::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-20);
  height: var(--space-20);
  background: var(--brand-neural-mint);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.sp-impact__row:hover::after { opacity: 1; }
.sp-impact__row-em { transition: color 200ms ease; }

/* Carousel pagination dots · shown only on mobile (≤719px) */
.sp-impact__dots,
.sp-insights__dots { display: none; }
.sp-impact__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-light-grey);
}
.sp-impact__icon svg,
.sp-impact__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.sp-impact__row-text {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-medium-grey);
}
/* .sp-impact__row-em { color: var(--neutral-white); } */


/* ============================================================
   SECTION 4 · FOUR CAPABILITIES  (I739:5854;1386:4053)
   Sticky stacking rows.
   ============================================================ */
.sp-capabilities {
  background: var(--neutral-white);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}
.sp-capabilities__inner { display: flex; flex-direction: column;}
.sp-capabilities__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-black);
}
.sp-capabilities__title-accent { color: var(--brand-dark-teal); }

.sp-capabilities__rows { display: flex; flex-direction: column; }

/* Each row sticks under the nav so they stack on scroll */
.sp-cap {
  position: sticky;
  top: var(--space-120);
  display: flex;
  gap: var(--responsive-spacing-20);
  align-items: stretch;
  padding-top: var(--responsive-spacing-48);
  background: var(--neutral-white);
}
.sp-cap__head {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-32);
}
.sp-cap__name {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.01em;
  color: var(--neutral-black);
	width:75%;
}
.sp-cap__num {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h6);
  line-height: var(--lh-h6);
  letter-spacing: -0.01em;
  color: var(--brand-dark-teal);
}
.sp-cap__panel {
  flex: 1 1 0;
  min-width: 0;
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-24);
}
.sp-cap__desc {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-black);
}
.sp-cap__media {
  position: relative;
  margin: 0;
  height: 324px;
  overflow: hidden;
}
.sp-cap__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cap__pixel {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-20);
  height: var(--space-20);
  background: var(--neutral-soft-grey);
  z-index: 2;
}


/* ============================================================
   SECTION 5 · PLATFORMS DELIVER VALUE  (I739:5854;1499:5513)
   ============================================================ */
.page-id-2070 .sp-platforms {
  background: var(--neutral-black);
  padding: var(--responsive-spacing-60) var(--margin-margin);
}

.sp-platforms {
  background: var(--neutral-black);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}
.sp-platforms__inner { display: flex; flex-direction: column; gap: var(--space-40); }
.sp-platforms__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--responsive-spacing-40);
}
.sp-platforms__title {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-white);
}
.sp-platforms__title-accent { color: var(--brand-neural-mint); }
.sp-platforms__cta { flex-shrink: 0; }

.sp-platforms__cards { display: flex; align-items: stretch; }

/* Card · muted by default, first card is "active" (full contrast) */
.sp-pcard {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: 0 var(--responsive-spacing-40);
  border-right: 1px solid var(--neutral-deep-black);
  color: var(--neutral-slate-grey);
  transition: color 200ms ease;
}
.sp-pcard:first-child { padding-left: 0; }
.sp-pcard:last-child  { padding-right: 0; border-right: 0; }

.sp-pcard__tags { display: flex; gap: var(--space-12); align-items: center; }
.sp-pcard__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border: 0.5px solid currentColor;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  letter-spacing: 0.01em;
  color: inherit;
}
.sp-pcard__body {
  flex: 1 1 0;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-32);
}
.sp-pcard__tags {
    display: none;
}
.sp-pcard__quote {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: inherit;
}
.page-id-2070 .sp-pcard__quote {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: inherit;
}
.sp-pcard__sub {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: inherit;
}
.sp-pcard__tag { transition: color 200ms ease, background 200ms ease, border-color 200ms ease; }
.sp-pcard__sub { transition: color 200ms ease; }
.sp-pcard__cta { align-self: flex-start; }

/* Active state · white copy + mint brand tag.
   Applies to the default-active card, AND dynamically to whichever card
   is hovered: hovering the row dims every card, then the hovered one
   lights up (so only one card reads as active at a time).             */
.sp-pcard--active,
.sp-pcard:hover {
  color: var(--neutral-white);
}
.sp-pcard--active .sp-pcard__sub,
.sp-pcard:hover .sp-pcard__sub {
  color: var(--neutral-soft-grey);
}
.sp-pcard--active .sp-pcard__tag--brand,
.sp-pcard:hover .sp-pcard__tag--brand {
  /* background: var(--brand-neural-mint); */
  border-color: var(--brand-neural-mint);
  color: var(--brand-neural-mint);
}

/* While hovering the row, the default-active card dims unless it's the
   one being hovered. */
.sp-platforms__cards:hover .sp-pcard--active:not(:hover) {
  color: var(--neutral-slate-grey);
}
.sp-platforms__cards:hover .sp-pcard--active:not(:hover) .sp-pcard__sub {
  color: var(--neutral-slate-grey);
}
.sp-platforms__cards:hover .sp-pcard--active:not(:hover) .sp-pcard__tag--brand {
  background: transparent;
  border-color: currentColor;
  color: var(--neutral-slate-grey);
}


/* ============================================================
   SECTION 6 · INSIGHTS FROM OUR WORK  (I739:5854;1386:4134)
   ============================================================ */
.sp-insights {
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}
.sp-insights__inner { display: flex; flex-direction: column; gap: var(--space-40); }
.sp-insights__title {
  margin: 0;
  text-align: left;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-black);
}
.sp-insights__title-accent { color: var(--brand-dark-teal); }

.sp-insights__grid { display: flex; gap: var(--space-20); align-items: flex-start; }
.sp-icard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.sp-icard__media {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.sp-icard__media--tall  { height: 332px; }
.sp-icard__media--short { height: 250px; }
.sp-icard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-icard__pixel {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-20);
  height: var(--space-20);
  background: var(--neutral-soft-grey);
  z-index: 2;
}
.sp-icard__arrow { position: absolute; right: 0; bottom: 0; z-index: 2; }
/* Arrow button gets the brand-mint highlight when the whole card is hovered
   (not just the button). Figma: hovering an insight card activates its CTA. */
.sp-icard:hover .sp-icard__arrow,
.sp-icard:hover .sp-icard__pixel {
  background: var(--brand-neural-mint);
  color: var(--neutral-black);
}

.sp-icard__caption {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-black);
}


/* ============================================================
   SECTION 7 · CTA BANNER  (I739:5854;1442:4743)
   ============================================================ */
.cta-primary--mint { background: var(--brand-neural-mint); }
.cta-primary--mint .cta-primary__text  { color: var(--neutral-black); }
.cta-primary--mint .cta-primary__arrow { color: var(--neutral-black); }
.cta-primary--mint:hover .cta-primary__arrow { background: var(--neutral-black); color: var(--brand-neural-mint); }

.sp-cta {
  position: relative;
  overflow: hidden;
  background: var(--neutral-deep-black);
}
.sp-cta::before {
  /* keep the corner-pixel rule's ::before — bg image is a separate layer */
}
.sp-cta__inner {
  position: relative;
  z-index: 1;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-14);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}
/* Background photo layer */
.sp-cta::after {
  content: none;   /* override generic pixel ::after positioning below */
}
.sp-cta {
  /* Desktop · landscape banner (Figma 739:5854 · Main container) */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, transparent 100%),
    url("images/sp-cta-cockpit.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.sp-cta__headline {
  margin: 0;
  max-width: 488px;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-white);
}
.sp-cta__headline-accent { color: var(--brand-neural-mint); }
.sp-cta__btn { align-self: flex-start; }

.platform-ad {
    background: var(--neutral-soft-grey);
    padding: var(--responsive-spacing-60) var(--margin-margin);
}

.page-id-3966 .platform-ad__text h2 {
    color: var(--neutral-black);
    font-family: var(--typeface-primary);
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    letter-spacing: -0.01em;
    margin: 0;
    margin-bottom: var(--space-32);
}
/* ============================================================
   RESPONSIVE  ·  Tablet ≤1023px · Mobile ≤719px
   ============================================================ */
@media (max-width: 1023px) {
  .sp-eating__head        { flex-direction: column; align-items: flex-start; gap: var(--responsive-spacing-24); }
  .sp-eating__row--split,
  .sp-eating__row--duo    { flex-direction: column; }
  .sp-eating__media       { flex-basis: auto; max-width: none; height: 320px; }

  .sp-impact__inner       { flex-direction: column; gap: var(--responsive-spacing-40); }

  /* keep the desktop sticky-stacking animation on tablet/mobile too */
  .sp-cap                 { position: sticky; top: var(--space-120); flex-direction: column; gap: var(--responsive-spacing-24); }
  .sp-cap__head           { flex: none; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-16); }
  .sp-cap__name           { flex: 1 1 auto; min-width: 0; }
  .sp-cap__num            { flex: 0 0 auto; white-space: nowrap; }

  .sp-platforms__head     { flex-direction: column; align-items: flex-start; gap: var(--responsive-spacing-24); }
  .sp-platforms__cards    { flex-direction: column; gap: var(--responsive-spacing-40); }
  .sp-pcard               { padding: 0 0 var(--responsive-spacing-40); border-right: 0; border-bottom: 1px solid var(--neutral-slate-grey); }
  .sp-pcard:last-child    { border-bottom: 0; padding-bottom: 0; }
  .sp-pcard__body         { min-height: 0; }

  .sp-insights__grid      { flex-direction: column; gap: var(--responsive-spacing-40); }
  .sp-icard__media--short { height: 332px; }

  .site-footer__top       { flex-direction: column; gap: var(--responsive-spacing-48); }
  .site-footer__logo      { height: 72px; }
  .site-footer__cols      { grid-template-columns: 1fr 1fr; gap: var(--responsive-spacing-40) var(--grid-gutter); }
}

@media (max-width: 719px) {
  .nav__icon--search,
  .nav__actions .cta-primary { display: none; }
  .nav__icon .nav__icon-desktop { display: none; }
  .nav__icon .nav__icon-mobile  { display: block; }

  /* Corner transition pixels shrink to 10px on mobile (Figma Mob pixels) */
  .sp-eating::before, .sp-impact::before, .sp-capabilities::before,
  .sp-platforms::before, .sp-insights::before, .sp-cta::before,
  .sp-hero::after, .sp-eating::after, .sp-impact::after, .sp-capabilities::after,
  .sp-platforms::after, .sp-insights::after, .sp-cta::after {
    height: 10px;
    background-size: 10px 10px;
  }

  /* AI IS EATING · title + CTA stacked (CTA hugs its text, left-aligned);
     cards stack full-width, image ~246px (Figma 739:5460).               */
  .sp-eating__head        { gap: var(--space-20); }
  .sp-eating__cta         { width: auto; align-self: flex-start; }
  .sp-eating__cta .cta-primary__text { font-size: var(--font-cta); }
  .sp-eating__media       { height: 246px; }
  .sp-eating__card--mint  { padding: var(--space-32) var(--space-20); }

  /* BUSINESS IMPACT · the icon list becomes a horizontal scroll carousel
     (text block sits above it — Figma 739:5503).                          */
  .sp-impact__list {
    display: flex;
    flex: none;            /* reset desktop flex:1 1 0 so overflow-x doesn't collapse height */
    flex-direction: row;
    gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sp-impact__list::-webkit-scrollbar { display: none; }
  .sp-impact__row {
    flex: 0 0 calc(100% - var(--space-40));   /* ~341px card · next peeks */
    scroll-snap-align: start;
    gap: var(--space-20);
    padding: var(--space-20) var(--space-12);
  }
  /* icon stays 80px on mobile per Figma 739:5506 */

  /* CAPABILITIES · name + number stay on one row above the panel */
  .sp-cap__head           { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-16); }
  .sp-cap__media          { height: 220px; }

  /* PLATFORMS · testimonial cards become a horizontal scroll carousel
     (Figma 739:5692 · w-341 cards).                                        */
  .sp-platforms__cards {
    flex-direction: row;
    gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: stretch;
  }
  .sp-platforms__cards::-webkit-scrollbar { display: none; }
  /* ~341px card, next peeks (Figma 739:5701 · w-341, gap-12).
     Fixed tall height so every card matches (no fluctuation); CTA pins
     to the bottom via the body growing to fill.                         */
  .sp-pcard {
    flex: 0 0 calc(100% - var(--space-20));
    min-height: 350px;
    gap: var(--space-24);
    padding: 0;
    border-right: 0;
    border-bottom: 0;
    scroll-snap-align: start;
	border-right: 1px solid #1A1A1A;
  }
  /* body grows to fill the card so the CTA sits at the bottom; content
     stays top-aligned with gaps (flex-start avoids the space-between
     overlap the desktop layout produced on mobile).                     */
  .sp-pcard__body {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: space-between;
    gap: var(--space-24);
  }
  .sp-pcard__cta .cta-primary__text { font-size: var(--font-cta); }

  /* INSIGHTS · 3 image cards become a horizontal scroll carousel
     (Figma 739:5747 · w-341 cards, image 332px, caption below).         */
  .sp-insights__grid {
    flex-direction: row;
    gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sp-insights__grid::-webkit-scrollbar { display: none; }
  .sp-icard {
    flex: 0 0 calc(100% - var(--space-20));   /* ~341px · next peeks */
    scroll-snap-align: start;
  }
  .sp-icard__media,
  .sp-icard__media--tall,
  .sp-icard__media--short { height: 332px; }   /* uniform image height */
  .sp-icard__pixel        { width: 10px; height: 10px; }
  .sp-icard__caption      { font-size: var(--font-body_s); }

  /* Carousel pagination dots · square, active page = 8px (Figma MobIndicator).
     Impact = dark-bg variant · Insights = light-bg variant.               */
  .sp-impact__dots,
  .sp-insights__dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-32);
  }
  .sp-impact__dot,
  .sp-insights__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    transition: width 200ms ease, height 200ms ease, background 200ms ease;
  }
	
  .sp-impact__dot          { background: var(--neutral-slate-grey); }
  .sp-impact__dot--active  { width: 8px; height: 8px; background: var(--neutral-light-grey); }
  .sp-insights__dot         { background: var(--neutral-light-grey); }
  .sp-insights__dot--active { width: 8px; height: 8px; background: var(--neutral-deep-black); }

  /* CTA banner · 440px tall, content top-aligned, narrow headline column
     over the image (Figma 739:5773 · h-440, items-start, text w-237).    */
  .sp-cta__inner {
    min-height: 450px;
    justify-content: flex-end;
    padding: var(--space-40) var(--margin-margin);
  }
	 .page-id-842  .sp-cta__inner {
        min-height: 450px;
        justify-content: flex-end;
        padding: var(--space-40) var(--margin-margin);
    }
	.page-id-3447 .platform__text {
 
    height: 80px;
}
  .sp-cta__headline { max-width: 100%; }
  .sp-cta__btn .cta-primary__text { font-size: var(--font-cta); }
  /* Mobile · portrait banner + diagonal gradient (Figma 739:5773) */
  .sp-cta {
    background-image:
      linear-gradient(144.7deg, rgba(0,0,0,0.95) 1%, rgba(0,0,0,0) 68%),
      url("images/sp-cta-cockpit-mobile.jpg");
  }

  .site-footer__cols      { grid-template-columns: 1fr 1fr; gap: var(--responsive-spacing-40) var(--space-20); }
  .site-footer__bottom    { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .site-footer__legal     { flex-wrap: wrap; gap: var(--space-12) var(--space-20); }
}

/* ==========================================
   IMPACT SECTION
========================================== */

.impact-section {
    background: var(--neutral-light-grey);
    padding: var(--responsive-spacing-80) var(--space-40);
}

/* ==========================================
   TOP CONTENT
========================================== */

.impact-top {
    max-width: var(--measure-section, 1400px);
    margin: 0 auto var(--space-40);

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-48);
    align-items: center;
}

.impact-heading h2 {
    color: var(--neutral-black);
    font-family: var(--typeface-primary);
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    letter-spacing: -0.01em;
}

.impact-heading span {
    color: var(--brand-dark-teal);
}

.impact-copy p {
    color: var(--neutral-deep-black);
    font-family: var(--typeface-secondary);
    font-weight: var(--weight-regular);
    font-size: var(--font-body_m);
    line-height: var(--lh-body_m);
    max-width: var(--measure-narrow, 460px);
}

/* ==========================================
   GRID
========================================== */

.impact-grid {
    max-width: var(--measure-section, 1400px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-14, 14px);
}

/* ==========================================
   CARD
========================================== */

.impact-card {
    background: var(--neutral-white);

    min-height: var(--impact-card-h, 92px);
    padding: var(--space-20, 20px) var(--space-22, 22px);

    display: flex;
    align-items: center;

    gap: var(--space-14, 14px);

    transition: all 0.3s ease;
}

.impact-card:hover {
    transform: translateY(calc(var(--space-2, 2px) * -1));
}

/* ==========================================
   ICON
========================================== */

.impact-icon {
    position: relative;
    width: var(--space-28, 28px);
    height: var(--space-28, 28px);
    flex-shrink: 0;
}

.impact-icon img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
    transition: opacity 0.25s ease;
}

.icon-hover {
    opacity: 0;
}

.impact-card:hover .icon-default {
    opacity: 0;
}

.impact-card:hover .icon-hover {
    opacity: 1;
}

/* ==========================================
   CONTENT
========================================== */

.impact-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.impact-card__content h3 {
    margin-bottom: var(--space-4, 4px);

    color: var(--neutral-black);

    font-family: var(--typeface-secondary);
    font-size: var(--font-body_s, 15px);
    font-weight: var(--weight-semibold, 600);
    line-height: 1.25;
}

.impact-card__content p {
    margin: 0;

    color: var(--neutral-charcoal);

    font-family: var(--typeface-secondary);
    font-size: var(--font-body_xxs, 12px);
    font-weight: var(--weight-regular);
    line-height: 1.4;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

    .impact-section {
        padding: var(--responsive-spacing-60) var(--space-32);
    }

    .impact-top {
        grid-template-columns: 1fr;
        gap: var(--space-24);
        margin-bottom: var(--space-32);
    }

    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12, 12px);
    }

    .impact-card {
        min-height: var(--impact-card-h-tablet, 88px);
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .impact-section {
        padding: var(--responsive-spacing-48) var(--space-20);
    }

    .impact-top {
        gap: var(--space-16, 16px);
        margin-bottom: var(--space-24, 24px);
    }

    .impact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10, 10px);
    }

    .impact-heading h2 {
        font-size: var(--font-h3);
        line-height: var(--lh-h3);
    }

    .impact-copy p {
        font-size: var(--font-body_s);
        max-width: 100%;
    }

    .impact-card {
        min-height: var(--impact-card-h-mobile, 82px);
        padding: var(--space-16, 16px) var(--space-18, 18px);
        gap: var(--space-12, 12px);
    }

    .impact-icon {
        width: var(--space-24, 24px);
        height: var(--space-24, 24px);
    }

    .impact-card__content h3 {
        font-size: var(--font-body_s, 14px);
        margin-bottom: var(--space-3, 3px);
    }

    .impact-card__content p {
        font-size: var(--font-body_xxs, 11px);
        line-height: 1.35;
    }
	
	.sp-eating__pixel {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 2;
}
}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .impact-section {
        padding: var(--responsive-spacing-40) var(--space-16);
    }

    .impact-heading h2 {
        font-size: var(--font-h4);
        line-height: var(--lh-h4);
    }

    .impact-copy p {
        font-size: var(--font-body_s);
    }

    .impact-card {
        min-height: var(--impact-card-h-small, 78px);
        padding: var(--space-14, 14px) var(--space-16, 16px);
    }

    .impact-card__content h3 {
        font-size: var(--font-body_xxs, 13px);
    }

    .impact-card__content p {
        font-size: var(--font-caption, 10px);
    }
}

.page-id-708 section.ecosystem {
    background: var(--neutral-black);
}


.page-id-708 section.ecosystem:before {
    background-image: linear-gradient(#ffffff, #f5f8ff), linear-gradient(#ffffff, #fafbff);
}

.page-id-708 .ecosystem__row:first-child {
    border-top: 0;
}

.page-id-708 p.ecosystem__text {
    font-size: var(--font-body_s);
}

.page-id-708 img.ecosystem__icon {
    width: 80px;
}
.page-id-708  .ecosystem__row:hover {
    background: var(--neutral-deep-black);
}
section.sp-hero {
    background-size: cover;
}
p.sp-hero__description {
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-h6);
    line-height: 0;
    letter-spacing: -0.01em;
    color: var(--neutral-white);
}
/* ── Section shell ─────────────────────────────────────────── */
.pe-work {
  position: relative;
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}
.pe-work__inner {
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-48);
}

/* ── Heading row · title left, lead right ──────────────────── */
.pe-work__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--responsive-spacing-60);
}
.pe-work__title {
  flex: 0 1 auto;
  max-width: 48%;
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--neutral-black);
}
.pe-work__accent { color: var(--brand-dark-teal); }
.pe-work__lead {
  flex: 0 1 480px;
  margin: 0;
  align-self: start;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_m);
  line-height: var(--lh-body_m);
  color: var(--neutral-charcoal);
}

/* ── Stat-card grid · 3 columns ────────────────────────────── */
.pe-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

/* ── Stat card · icon + (value + label) + corner pixel ─────── */
.pe-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-32);
  min-height: 164px;
  background: var(--neutral-white);
  padding: var(--space-20);
  overflow: hidden;
}
.pe-stat__icon {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: var(--neutral-black);
}
.pe-stat__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 200ms ease;
}
.pe-stat__icon-hover { opacity: 0; }
.pe-stat__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.pe-stat__value {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: var(--neutral-black);
}
.pe-stat__label {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-black);
}
/* soft-grey corner notch (Figma "Base- Pixels- single usage -cards") */
.pe-stat__pixel {
  position: absolute;
	top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--neutral-soft-grey);
	 transition: background 200ms ease;
}

/* ── Hover · icon detail + text shift to brand dark-teal ───── */
.pe-stat:hover .pe-stat__icon-default  { opacity: 0; }
.pe-stat:hover .pe-stat__icon-hover    { opacity: 1; }
.pe-stat:hover .pe-stat__pixel         { background: var(--brand-dark-teal); }
.pe-stat__value, .pe-stat__label      { transition: color 200ms ease; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .pe-work__head  { flex-direction: column; gap: var(--responsive-spacing-24); }
  .pe-work__title { max-width: none; }
  .pe-work__lead  { flex: none; align-self: flex-start; }
  .pe-work__grid  { grid-template-columns: repeat(2, 1fr); }
}


/* ── Carousel dots (hidden on desktop, shown on mobile) ─────── */
.pe-work__dots {
  display: none;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: var(--responsive-spacing-24);
}
.pe-work__dot {
  width: 8px;
  height: 8px;
  background: var(--neutral-charcoal);
  opacity: 0.25;
  flex-shrink: 0;
  transition: opacity 200ms ease, background 200ms ease;
}
.pe-work__dot--active {
  background: var(--neutral-black);
  opacity: 1;
}

@media (max-width: 719px) {
  /* Horizontal scroll carousel */  .sp-impact__dot,
  .sp-platforms__dot          {background: var(--neutral-slate-grey);}
  .sp-impact__dot--active,
  
button.sp-platforms__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width 200ms ease, height 200ms ease, background 200ms ease;
}

button.sp-platforms__dot.sp-platforms__dot--active {
    width: 8px;
    height: 8px;
    background: var(--neutral-light-grey);
}

.sp-platforms__dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-32);
}
  .pe-work__grid {
    display: flex;
    flex-direction: row;
/*     margin-left: calc(-1 * var(--margin-margin)); */
    margin-right: calc(-1 * var(--margin-margin));
    padding-left: var(--margin-margin);
    padding-right: var(--margin-margin);
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-12);
  }
  .pe-work__grid::-webkit-scrollbar { display: none; }

  .pe-stat {
    flex: 0 0 70%;
    width: 95%;
    min-height: 140px;
    padding: var(--space-20) var(--space-16);
    scroll-snap-align: start;
  }

  .pe-stat__pixel { width: 10px; height: 10px; }

  .pe-work__dots { display: flex; }
}

.page-id-797 section.platform-ad {background: var(--neutral-white);}


@media (max-width: 768px) {
  .page-id-708 .ecosystem__row {
        flex: 0 0 calc(100% - var(--space-20));
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* gap: var(--space-40); */
        padding: var(--space-20);
        min-height: 120px;
        background: var(--neutral-black);
        height: 120px;
        border: 0;
        scroll-snap-align: start;
        border-bottom: 1px solid #333333;
    }
	section.video_section .ar-video:after {
    position: absolute;
    content: "";
    background: #000;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    z-index: 9;
}
.page-id-2070 .ar-video__corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: block;
    width: 10px;
    height: 10px;
    background: var(--neutral-white);
}
}

@media (max-width: 719px) {
   .page-id-797 .sp-cta__btn .cta-primary__text {
        font-size: var(--font-caption);
    }
   .page-id-797 .sp-cta__inner {
        min-height: 440px;
        justify-content: flex-end;
        padding: var(--responsive-spacing-60);
}
}

.page-id-1040 .platform-ad__text p {
  color: var(--neutral-black);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_m);
  line-height: var(--lh-body_m);
  margin-bottom: var(--space-24);
  max-width: var(--measure-body, 900px);
}

.page-id-1040 .platform-ad__text h2 {
    color: var(--neutral-black);
    font-family: var(--typeface-primary);
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    letter-spacing: -0.01em;
    margin: 0;
    margin-bottom: var(--space-32);
}

.page-id-1040 .platform-ad__content {
    align-items: self-start;
}

/* .page-id-1783 .sp-pcard {
    flex: none;
    width: 450px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    padding: 0 var(--responsive-spacing-40);
    border-right: 1px solid var(--neutral-deep-black);
    color: var(--neutral-slate-grey);
    transition: color 200ms ease;
} */

@media (max-width: 719px) {
 width: 350px;
}

.page-id-797 .bn__pixels {
    position: relative;
    z-index: 2;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--neutral-white);
}
.page-id-708 .bn__pixels {
    position: relative;
    z-index: 2;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--neutral-white);
}

.page-id-2070 .pe-stat__label {
    margin: 0;
    font-family: var(--typeface-secondary);
    font-weight: var(--weight-regular);
    font-size: var(--font-body_l);
    line-height: var(--lh-body_l);
    color: var(--neutral-black);
    width: 80%;
}

.page-id-2070 .fwt__inner {
    align-items: center;
    justify-content: center;
    display: flex;
}

.page-id-2070 .trust__lead {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: var(--neutral-light-grey);
}

.page-id-2070 .pe-work__lead {
    flex: 0 0 50%;
    margin: 0;
    align-self: start;
    font-family: var(--typeface-secondary);
    font-weight: var(--weight-regular);
    font-size: var(--font-body_l);
    line-height: var(--lh-body_l);
    color: var(--neutral-charcoal);
}

.page-id-2514 .fwt__text {
    margin: 0;
    padding-top: 0;
    font-family: var(--typeface-primary);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    color: var(--neutral-white);
}

.page-id-2514 .fwt {
    padding: var(--responsive-spacing-60) var(--margin-margin);
    background: var(--neutral-black);
}