.pea-item__bar > .pea-item__title {
    flex: 0 0 48%;
    max-width: 48%;
}

.pea-item__bar > .pea-item__tagline {
    flex: 0 0 40%;
    max-width: 40%;
}
.pea-item__bar_first {
    width: 100%;
    display: flex;
	justify-content: space-between;
    align-items: center;
    gap: var(--space-32);
    background: none;
}

span.pea-item__tagline {
    text-align: start;
}
.pea-item__bar > .pea-item__icn-box {
    max-width: 12%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}/* ============================================================
   ASCENDION · WHAT WE DELIVER — page styles
   Figma: What We Deliver (810:14366). Driven by tokens.css.

   Built:
     1 · Hero
     2 · Sticky section tabs + Overview (word-reveal heading, op-model banner)
     3 · Capabilities directory list
     4 · Where Engineers Become Masters of Craft
     5 · Multiple Communities (tabbed panel)
     6 · Circles Develop Engineers (dark accordion)
     7 · See What It's Like Inside a Circle (video)
     8 · Footer
   ============================================================ */

/* ───────────────────────────── Reset ───────────────────────────── */
.page.page-id-411 .bn__pixels {
    background: var(--neutral-soft-grey);
}



.page.page-id-411 section.wwd-engine: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);
    bottom: 0;
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(var(--pixel-bottom, #f4f4f4), var(--pixel-bottom, #f4f4f4));
    background-position: bottom left, bottom right;
}
.page.page-id-411 section.pea:after {
    background-image: linear-gradient(#000000, #000000), linear-gradient(var(--pixel-bottom, #000000), var(--pixel-bottom, #000000));
    background-position: bottom left, bottom right;
    content: "";
    position: absolute;
    left: 0;
    bottom: 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);
}
/* .page.page-id-411  section.pea:before {
    content: "";
    position: absolute;
    left: 0;
    top: 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);
    bottom: 0;
    background-image: linear-gradient(#fff, #fff), linear-gradient(var(--pixel-bottom, #fff), var(--pixel-bottom, #fff));
    background-position: bottom left, bottom right;
} */

.page.page-id-411 section.pea {
    position: relative;
	    background: var(--neutral-soft-grey);

}
/* Mobile */
@media (max-width: 767px) {
	.pea-item::before{
		background-size:10px 10px !important;
		height:10px !important;
	}
	.pea-item__bar_first {
    justify-content: space-evenly;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-32);
    background: none;
}

span.pea-item__tagline {
    text-align: center;
}

.pea-item__bar_first {
    display: block;
    padding: 0;
}

	.page-id-411 .pea-item__bar > .pea-item__title {
    flex: 2 0 100%;
    max-width: 78%;
}
	.page-id-411 .pea-image::before {
    width: 10px;
    height: 10px;
   
}
button.pea-item__bar {
    align-items: start;
}
	.pea-video::before,.pea-cta::before,.pea-stat::before,.pea-case::before,.pea-teaser:before,.pea-teaser:after{
		width:10px !important;
		height:10px !important;
	}
   .page-id-1758  .sp-cta__btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 35px 20px;
    }

  .page-id-1758  .sp-cta__btn .cta-primary__text {
        flex: 1;
        min-width: 0;      /* Important */
        white-space: normal;
        line-height: 1.4;
        word-break: break-word;
    }

    .page-id-1758 .sp-cta__btn .cta-primary__arrow {
        flex-shrink: 0;
    }
}
*, *::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; }
body { background: var(--neutral-deep-black); }
#overview, #capabilities, #communities, #products, #circles, #inside { scroll-margin-top: 120px; }
img { max-width: 100%; }
a   { text-decoration: none; color: inherit; }


/* ============================================================
   SITE NAV  (shared — fixed glass bar)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  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-deep-black-60);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
@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; }
.nav__chip { transition: fill-opacity 320ms ease; }
.nav--scrolled .nav__chip { fill-opacity: 0; }


/* ============================================================
   SHARED COMPONENTS
   ============================================================ */
.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; }
.pixel-arrow--down { transform: rotate(90deg); }

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

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

/* Arrow-only 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-black); color: var(--neutral-white); }
.cta-arrow--dark:hover  { background: var(--brand-neural-mint); color: var(--neutral-black); }
.cta-arrow--ghost       { background: transparent; color: var(--neutral-white); }
.cta-arrow--ghost:hover { background: var(--brand-neural-mint); color: var(--neutral-black); }

/* Pager buttons (shared with communities + reused name from industries) */
.iws-pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer;
  background: var(--neutral-black); color: var(--neutral-white);
  transition: background 200ms ease, color 200ms ease;
}
.iws-pager__btn:hover { background: var(--brand-neural-mint); color: var(--neutral-black); }
.iws-pager__btn .pixel-arrow { width: 11px; }
.iws-pager__btn--prev { transform: scaleX(-1); }


/* ============================================================
   SCROLL-REVEAL ANIMATION (IntersectionObserver toggles .is-in)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* word-by-word colour reveal heading */
.wwd-word { color: var(--neutral-light-grey); transition: color 360ms ease; }
.wwd-word.is-lit { color: var(--neutral-black); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .wwd-word { color: var(--neutral-black); transition: none; }
  html { scroll-behavior: auto; }
}


/* ============================================================
   CORNER PIXEL RULE · section transitions
   ============================================================ */
.wwd-hero, .wwd-overview, .wwd-caps, .wwd-masters,
.wwd-comm, .wwd-circles, .wwd-inside, .site-footer { position: relative; }

.wwd-overview::before, .wwd-caps::before, .wwd-masters::before, .wwd-comm::before,
.wwd-circles::before, .wwd-inside::before,
.wwd-hero::after, .wwd-overview::after, .wwd-caps::after, .wwd-masters::after,
.wwd-comm::after, .wwd-circles::after, .wwd-inside::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);
}
.wwd-overview::before, .wwd-caps::before, .wwd-masters::before, .wwd-comm::before,
.wwd-circles::before, .wwd-inside::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;
}
.wwd-hero::after, .wwd-overview::after, .wwd-caps::after, .wwd-masters::after,
.wwd-comm::after, .wwd-circles::after, .wwd-inside::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;
}
.wwd-hero     { --pixel-bottom: var(--neutral-white); }
.wwd-overview { --pixel-top: var(--neutral-white);      --pixel-bottom: var(--neutral-soft-grey); }
.wwd-caps     { --pixel-top: var(--neutral-soft-grey);  --pixel-bottom: var(--neutral-black); }
.wwd-masters  { --pixel-top: var(--neutral-soft-grey);  --pixel-bottom: var(--neutral-soft-grey); }
.wwd-comm     { --pixel-top: var(--neutral-black);       --pixel-bottom: var(--neutral-deep-black); }
.wwd-circles  { --pixel-top: var(--neutral-soft-grey);  --pixel-bottom: var(--neutral-deep-black); }
.wwd-inside   { --pixel-top: var(--neutral-deep-black);  --pixel-bottom: var(--neutral-deep-black); }


/* ============================================================
   SECTION 1 · HERO
   ============================================================ */
.wwd-hero {
  background-color: var(--neutral-deep-black);
  overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: calc(var(--responsive-spacing-120) + var(--space-40)) var(--margin-margin) var(--responsive-spacing-60);
}
.wwd-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%),
    url("images/wwd-hero.png");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.wwd-hero__inner {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--responsive-spacing-120);
}
.wwd-hero__crumbs { display: inline-flex; align-items: center; gap: var(--responsive-spacing-12); padding: var(--responsive-spacing-12) 0; }
.wwd-hero__crumb {
  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-white);
}
.wwd-hero__crumb-dot { width: 6px; height: 6px; background: var(--brand-neural-mint); flex-shrink: 0; }
.wwd-hero__foot { display: flex; flex-direction: column; gap: var(--responsive-spacing-20); }
.wwd-hero__title {
  margin: 0; max-width: 14ch;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-dis-1); line-height: var(--lh-dis-1); letter-spacing: -0.01em;
  color: var(--neutral-white);
}
.wwd-hero__title-accent { color: var(--brand-neural-mint); }
.wwd-hero__lead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); width: 100%; }
.wwd-hero__sub {
  margin: 0; max-width: 720px;
  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-white);
}
.wwd-hero__scroll { flex-shrink: 0; }


/* ============================================================
   SECTION 2 · STICKY TABS + OVERVIEW
   ============================================================ */
.wwd-overview { background: var(--neutral-white); padding: 0 0 var(--responsive-spacing-80); }

.wwd-tabs {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: var(--responsive-spacing-32); align-items: center;
  padding: var(--space-20) var(--margin-margin);
  background: var(--neutral-white);
  border-bottom: 1px solid var(--neutral-soft-grey);
  overflow-x: auto; scrollbar-width: none;
}
.wwd-tabs::-webkit-scrollbar { display: none; }
.wwd-tab {
  position: relative; white-space: nowrap; padding: var(--space-8) 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-slate-grey); transition: color 200ms ease;
}
.wwd-tab:hover { color: var(--neutral-black); }
.wwd-tab--active { color: var(--neutral-black); }
.wwd-tab--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand-neural-mint);
}

.wwd-overview__inner {
  display: flex; flex-direction: column; gap: var(--responsive-spacing-40);
  padding: var(--responsive-spacing-80) var(--margin-margin) 0;
}
.wwd-reveal-head {
  margin: 0; max-width: min(100%, 1120px);
  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;
}
.wwd-overview__sub {
  margin: 0; max-width: 32ch;
  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);
}

/* ============================================================
   SECTION 2b · ONE OPERATING MODEL · full-screen scroll carousel
   One screen split vertically · title 20% / carousel 70% / bar 10%.
   ============================================================ */
.wwd-engine {
  position: relative;
  height: 400vh;                 /* 4 slides × 100vh of scroll travel */
  background: var(--neutral-white);
}
.wwd-engine__pin {
  position: sticky; top: 50px;
  height: 95vh; height: 100dvh;
  overflow: hidden; isolation: isolate;
  background: var(--neutral-white);
  display: flex; flex-direction: column;
	gap: var(--space-20);
	    padding: var(--responsive-spacing-80) var(--margin-margin);
}

.wwd-engine__title {
  flex: 0 0 20%; min-height: 0;
  display: flex; align-items: center;
  margin: 0; 
/* 	padding: var(--responsive-spacing-24) var(--margin-margin) 0; */
  max-width: 720px;
  font-family: var(--typeface-secondary); font-weight: var(--weight-regular);
  font-size: var(--font-body_l); line-height: var(--lh-h3); letter-spacing: -0.01em;
  color: var(--neutral-black);
}

.wwd-engine__stage {
  flex: 0 0 70%; min-height: 0;
  position: relative; overflow: hidden;
/*   margin: 0 var(--margin-margin); */
  background: var(--neutral-black);
}
.wwd-engine__slides { position: absolute; inset: 0; }
.wwd-engine__slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none; z-index: 0;
  display: flex; align-items: center;
  padding: var(--responsive-spacing-48);
}
.wwd-engine__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.wwd-engine__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.wwd-engine__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0) 100%),
              linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 55%);
}
.wwd-engine__copy { position: relative; z-index: 1; max-width: none; }
/* Matches the design · one uniform white statement, both lines same size */
.wwd-engine__head {
  margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; color: var(--neutral-white);
}
/* per-slide entrance · copy lifts in when active */
.wwd-engine__copy { transform: translateY(40px); opacity: 0; transition: transform 700ms cubic-bezier(.16,1,.3,1) 220ms, opacity 600ms ease 220ms; }
.wwd-engine__slide.is-active .wwd-engine__copy { transform: none; opacity: 1; }

/* pixel-cloud overlay (JS fills with squares) · over the image only */
.wwd-engine__pixels { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.wwd-engine__pixel { position: absolute; display: none; background: var(--neutral-soft-grey); }

/* 10% · progress bar + counter band (below the image, never over it) */
.wwd-engine__bar {
  flex: 0 0 10%; min-height: 0;
  display: flex; align-items: center; gap: var(--space-24);
/*   padding: 0 var(--margin-margin); */
}
.wwd-engine__track { flex: 1 1 0; height: 2px; background: var(--neutral-light-grey); position: relative; }
.wwd-engine__fill { position: absolute; left: 0; top: 0; height: 100%; width: 25%; background: var(--brand-dark-teal); transition: width 500ms cubic-bezier(.16,1,.3,1); }
.wwd-engine__count {
  margin: 0; flex: 0 0 auto;
  font-family: var(--typeface-primary); font-size: var(--font-body_s); color: var(--neutral-slate-grey);
}
.wwd-engine__count span { color: var(--brand-dark-teal); }

@media (prefers-reduced-motion: reduce) {
  .wwd-engine { height: auto; }
  .wwd-engine__pin { position: static; height: auto; }
  .wwd-engine__title { flex: none; }
  .wwd-engine__stage { flex: none; height: 70vh; }
  .wwd-engine__slide { position: absolute; }
  .wwd-engine__copy { transform: none; opacity: 1; }
  .wwd-engine__pixels { display: none; }
  .wwd-engine__bar { flex: none; padding-top: var(--space-20); padding-bottom: var(--space-20); }
}


/* ============================================================
   SECTION 3 · CAPABILITIES DIRECTORY LIST
   ============================================================ */
.wwd-caps { background: var(--neutral-soft-grey); padding: var(--responsive-spacing-80) var(--margin-margin) }
.wwd-caps__inner { display: flex; flex-direction: column; }

.wwd-cap {
  display: flex; align-items: center; gap: var(--responsive-spacing-32);
  background: var(--neutral-white); padding: var(--responsive-spacing-32);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.wwd-cap.is-in:hover .cta-arrow--dark {
  background: var(--brand-neural-mint);
  color: var(--neutral-deep-black);
}

.wwd-cap:hover { transform: translateY(-2px);}
.wwd-cap__name {
  flex: 0 0 50%; margin: 0;
  font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3); line-height: var(--lh-h3); letter-spacing: -0.01em;
  color: var(--neutral-black);
}
.wwd-cap__name sup { font-size: 0.45em; vertical-align: super; }
.wwd-cap__desc {
  flex: 1 1 0; min-width: 0; 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-charcoal);
}
.wwd-cap__arrow { flex: 0 0 auto; align-self: center; width: 46px; height: 46px; }


/* ============================================================
   SECTION 4 · WHERE ENGINEERS BECOME MASTERS OF CRAFT
   ============================================================ */
.wwd-masters { background: var(--neutral-deep-black); padding: var(--responsive-spacing-80) var(--margin-margin); }
.wwd-masters__inner { display: flex; align-items: center; gap: var(--responsive-spacing-60); }
.wwd-masters__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--responsive-spacing-24); }
.wwd-masters__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);
}
.wwd-masters__title-accent { color: var(--brand-neural-mint); }
.wwd-masters__body {
  margin: 0; max-width: 520px;
  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-light-grey);
}
.wwd-masters__media { flex: 0 0 46%; margin: 0; overflow: hidden; aspect-ratio: 624 / 360; }
.wwd-masters__media img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   SECTION 5 · MULTIPLE COMMUNITIES (tabbed)
   ============================================================ */
.wwd-comm { background: var(--neutral-soft-grey); padding: var(--responsive-spacing-80) var(--margin-margin); }
.wwd-comm__inner { display: flex; flex-direction: column; gap: var(--responsive-spacing-24); }
.wwd-comm__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);
}
.wwd-comm__title-accent { color: var(--brand-neural-mint); }
.wwd-comm__sub {
  margin: 0;
  font-family: var(--typeface-secondary); font-size: var(--font-body_l); line-height: var(--lh-body_l);
  color: var(--neutral-charcoal);
}
.wwd-comm__tabsrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  border-bottom: 1px solid var(--neutral-light-grey); margin-top: var(--space-12);
}
.wwd-comm__tabs { display: flex; gap: var(--responsive-spacing-32); overflow-x: auto; scrollbar-width: none; }
.wwd-comm__tabs::-webkit-scrollbar { display: none; }
.wwd-comm__tab {
  position: relative; white-space: nowrap; background: none; border: 0; cursor: pointer;
  padding: var(--space-16) 0;
  font-family: var(--typeface-secondary); font-size: var(--font-body_s); line-height: var(--lh-body_s);
  color: var(--neutral-slate-grey); transition: color 200ms ease;
}
.wwd-comm__tab:hover { color: var(--neutral-black); }
.wwd-comm__tab--active { color: var(--neutral-black); }
.wwd-comm__tab--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--neutral-black);
}
.wwd-comm__pager { display: flex; gap: var(--space-8); flex-shrink: 0; }

.wwd-comm__panel {
  display: flex; align-items: stretch; min-height: 360px;
  background: var(--neutral-black); overflow: hidden; margin-top: var(--responsive-spacing-12);
}
.wwd-comm__copy {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--space-16); padding: var(--responsive-spacing-48);
}
.wwd-comm__pname {
  margin: 0; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; color: var(--neutral-white);
}
.wwd-comm__pdesc {
  margin: 0; max-width: 360px;
  font-family: var(--typeface-secondary); font-size: var(--font-body_s); line-height: var(--lh-body_s);
  color: var(--neutral-light-grey);
}
.wwd-comm__media { flex: 1 1 0; min-width: 0; margin: 0; position: relative; overflow: hidden; }
.wwd-comm__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wwd-comm__panel.is-switching .wwd-comm__copy,
.wwd-comm__panel.is-switching .wwd-comm__media img { opacity: 0; }
.wwd-comm__copy, .wwd-comm__media img { transition: opacity 280ms ease; }


/* ============================================================
   SECTION 6 · CIRCLES DEVELOP ENGINEERS (dark accordion)
   ============================================================ */
.wwd-circles { background: var(--neutral-deep-black); padding: var(--responsive-spacing-80) var(--margin-margin); }
.wwd-circles__inner { display: flex; align-items: flex-start; gap: var(--responsive-spacing-80); }
.wwd-circles__text { flex: 0 0 38%; display: flex; flex-direction: column; gap: var(--responsive-spacing-24);     position: sticky;
    top: 180px; }
.wwd-circles__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);
}
.wwd-circles__title-accent { color: var(--brand-neural-mint); }
.wwd-circles__sub {
  margin: 0; max-width: 360px;
  font-family: var(--typeface-secondary); font-size: var(--font-body_s); line-height: var(--lh-body_s);
  color: var(--neutral-medium-grey);
}
.wwd-circles__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }

/* dark accordion item */
.wwd-acc { border-bottom: 1px solid var(--neutral-charcoal); }
.wwd-acc--open { border-bottom-color: var(--brand-neural-mint); }
.wwd-acc__bar {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-24) 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.wwd-acc__name {
  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-white);
  transition: color 200ms ease;
}
.wwd-acc:not(.wwd-acc--open) .wwd-acc__name { color: var(--neutral-medium-grey); }
/* Bordered-box +/- icon · extracted from Figma "IcnGreen"
   (grey plus when closed · mint minus when open). */
.wwd-acc__icn { flex: 0 0 auto; width: 32px; height: 32px; color: var(--neutral-slate-grey); transition: color 200ms ease; }
.wwd-acc__icn svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.wwd-acc__icn-v { transition: opacity 200ms ease; }   /* vertical bar of the plus */
.wwd-acc--open .wwd-acc__icn { color: var(--brand-neural-mint); }
.wwd-acc--open .wwd-acc__icn-v { opacity: 0; }          /* → becomes a minus */
.wwd-acc__panel { overflow: hidden; max-height: 0; transition: max-height 340ms ease; }
.wwd-acc--open .wwd-acc__panel { max-height: 280px; }
.wwd-acc__text {
  margin: 0; padding-bottom: var(--space-24); max-width: 460px;
  font-family: var(--typeface-secondary); font-size: var(--font-body_s); line-height: var(--lh-body_s);
  color: var(--neutral-medium-grey);
}


/* ============================================================
   SECTION 7 · SEE WHAT IT'S LIKE INSIDE A CIRCLE
   ============================================================ */
.wwd-inside { background: var(--neutral-black); padding: var(--responsive-spacing-80) var(--margin-margin); }
.wwd-inside__inner { display: flex; align-items: center; gap: var(--responsive-spacing-60); }
.wwd-inside__text { flex: 0 0 34%; display: flex; flex-direction: column; gap: var(--responsive-spacing-32); align-items: flex-start; }
.wwd-inside__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);
}
.wwd-inside__title-accent { color: var(--brand-neural-mint); }
.wwd-inside__media {
  flex: 1 1 0; min-width: 0; margin: 0; position: relative; overflow: hidden; aspect-ratio: 16 / 9;
}
.wwd-inside__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease;
}
.wwd-inside__media:hover img { transform: scale(1.04); }
.wwd-inside__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; padding: 0; border: 0; cursor: pointer;
/*   background: var(--neutral-white-60); color: var(--neutral-black);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); */
  transition: background 220ms ease, transform 220ms ease;
}
/* .wwd-inside__play:hover { background: var(--brand-neural-mint); transform: translate(-50%, -50%) scale(1.08); } */
.wwd-inside__play svg { width: 63px; height: 63px; }



/* ============================================================
   RESPONSIVE  ·  Tablet ≤1023px · Mobile ≤719px
   ============================================================ */
@media (max-width: 1023px) {
  .wwd-cap            { flex-wrap: wrap; gap: var(--responsive-spacing-20); }
  .wwd-cap__name      { flex: 1 1 100%; }
  .wwd-cap__desc      { flex: 1 1 0; }

  .wwd-masters__inner { flex-direction: column; align-items: stretch; gap: var(--responsive-spacing-40); }
  .wwd-masters__media { flex: none; width: 100%; }

  .wwd-comm__panel    { flex-direction: column; min-height: 0; }
  .wwd-comm__copy     { order: 2; }
  .wwd-comm__media    { order: 1; height: 300px; }

  .wwd-circles__inner { flex-direction: column; gap: var(--responsive-spacing-40); }
  .wwd-circles__text  { flex: none;  position: static; }

  .wwd-inside__inner  { flex-direction: column; align-items: stretch; gap: var(--responsive-spacing-40); }
  /* column flex would collapse the 16:9 banner (flex-basis 0) → keep its
     intrinsic height so the video poster + play icon show on mobile */
  .wwd-inside__text   { flex: none; }
  .wwd-inside__media  { flex: none; width: 100%; aspect-ratio: 16 / 9; }

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

  .wwd-overview::before, .wwd-caps::before, .wwd-masters::before, .wwd-comm::before,
  .wwd-circles::before, .wwd-inside::before,
  .wwd-hero::after, .wwd-overview::after, .wwd-caps::after, .wwd-masters::after,
  .wwd-comm::after, .wwd-circles::after, .wwd-inside::after { height: 10px; background-size: 10px 10px; }

  .wwd-hero__lead     { flex-direction: column; align-items: flex-start; gap: var(--space-20); }

  .wwd-cap            { flex-direction: column; align-items: flex-start; position: relative;
                        padding: var(--space-20); }
  .wwd-cap__name      { flex: none; padding-right: 0; }
  /* arrow chip pinned to the bottom-right of the card (per mobile design) */
  .wwd-cap__arrow     { position: absolute; bottom: var(--space-20); right: var(--space-20); }

  .wwd-comm__copy     { padding: var(--space-24); }

  .wwd-inside__play   { width: 52px; height: 52px; }
  .wwd-inside__play svg { width: 20px; height: 20px; }

  .site-footer__cols  { grid-template-columns: 1fr; }
  .site-footer__legal { flex-direction: column; gap: var(--space-12); }
}
.page.page-id-411 section.platform-ad {
    background: var(--neutral-black);
}

.page.page-id-411 h2.wwd-masters__title.is-in {
    color: #fff;
}

.page.page-id-411 .platform-ad__image {
    height: 100%;
}

.page.page-id-411 section.platform-ad {
    position: relative;
}

.page.page-id-411 section.platform-ad:before {top: 0;background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(var(--pixel-top, #f4f4f4), var(--pixel-top, #f4f4f4));background-position: top left, top right;position: absolute;content: "";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);}

.page.page-id-411 section.platform-ad: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);
    bottom: 0;
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(var(--pixel-bottom, #f4f4f4), var(--pixel-bottom, #f4f4f4));
    background-posit;
    background-position: bottom left, bottom right;
}

.page.page-id-411 section#studios {
    position: relative;
}

.page.page-id-411 section#studios:before {
    top: 0;
    background-image: linear-gradient(#000000, #000000), linear-gradient(var(--pixel-top, #000000), var(--pixel-top, #000000));
    background-position: top left, top right;
    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);
}

.page.page-id-411 section#studios:after {
    background-image: linear-gradient(#000000, #000000), linear-gradient(var(--pixel-bottom, #000000), var(--pixel-bottom, #000000));
    background-position: bottom left, bottom right;
    content: "";
    position: absolute;
    left: 0;
    bottom: 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);
}

.page.page-id-411 .agents-studios__panel-info {
    background: var(--neutral-black);
    justify-content: center;
}
.page-id-411 .wwd-comm__title-accent{
	    color: var(--brand-dark-teal)
	
}
.page-id-411 .agents-studios__panel-text p,
.page-id-411 .agents-studios__panel-text h3  {
    color: #fff !important;
}
.page-id-411 .agents-studios__panel {
  position: relative; /* already set? if not, add this */
}

.page-id-411 .agents-studios__pixels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.page-id-411 .agents-studios__pixel {
  position: absolute;
  display: none;
  background: #0f0f0f; /* match your panel background or brand color */
}


.ctas {
    display: flex;
    gap: 20px;
}

.page.page-id-1040 section.sp-capabilities {
    position: relative;
    background: var(--neutral-white);
}

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

.page.page-id-1040 section.pe-work {
    position: relative;
    /* background: var(--neutral-whitw); */
}

.page.page-id-1040 section.pe-work:before {
    content: "";
    position: absolute;
    bottom: 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-1040 section.ecosystem:after {
    content: "";
    position: absolute;
    bottom: 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-1040 .sp-capabilities::before{
	top: 0;
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
    background-position: top left, top right;
}
.page.page-id-1040 section.pe-work:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-1040 section.ecosystem:before {
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
}

.page.page-id-1040 section.platform-ad {
    position: relative;
}



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

.page.page-id-1040  section.sp-hero:after,.page.page-id-1174  section.sp-hero:after {
    display: none;
}
.page.page-id-411 .platform-ad__text p {
    color: var(--neutral-white);
    margin: 0;
    max-width: 100%;
    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-light-grey);
}
.page.page-id-1040 .tabs-nav:after,  .tabs-nav:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    background-position: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}
.page-id-797 .sp-hero::after, .page-id-708 .sp-hero::after, .page-id-411 .sp-hero::after{
	display:none;
}
.page-id-411 .agents-studios {
    position: relative;
    background: var(--neutral-soft-grey);
    padding: var(--responsive-spacing-80) var(--margin-margin);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--responsive-spacing-40);
}

.page-id-222 .wwd-comm__inner {
    display: flex;
    flex-direction: row;
    gap: var(--responsive-spacing-24);
}

@media (max-width: 719px) {
.page-id-222 .wwd-comm__inner {
    flex-direction: column;
}
}

.page-id-222 .agents-studios__panel-text p,
.page-id-222 .agents-studios__panel-text h3 {
	color: var(--neutral-black);
}
.page-id-411 .manifesto::before{
	display:none;
}
.page-id-411 .site-footer::before{
	display:none !important;
}
.page-id-411 .manifesto::after{
    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;
}