/* ============================================================
   SITE NAV
   Fixed-positioned at the top of the viewport — lives outside
   .hero in the DOM so it sits in the document's top-level
   stacking context (z-index: 10 beats every later section).
   Left = logo. Right = icons + CTA.
   ============================================================ */
a.bn__arrow {
    display: none;
}
.page.page-id-1902 .ar-video{
	height:700px;
}
.page.page-id-1902 section.video_section {
    background: var(--neutral-soft-grey);
    padding: var(--responsive-spacing-80) var(--margin-margin) var(--responsive-spacing-80) ;
}
section.video_section .ar-video:after{
    background: var(--neutral-soft-grey) !important;

}
.page.page-id-1902 .bn__pixels{
	display:none;
}
.page-id-5058 .ecosystem__logo {
       display: block;
    object-fit: cover;
    max-width: 95%;
    height: 80%;
}
.page.page-id-1902 .bn__content {
    position: relative;
    z-index: 2;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-120) var(--margin-margin) var(--space-40);
    min-height: 0;
}
.page.page-id-1902 .bn {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
}
.page.page-id-1902 section.media:nth-of-type(4) span.media__dot.media__dot--active {
    background: #fff !important;
}
.page.page-id-1902 section.wwd-caps .wwd-caps__inner{
	gap:0;
}.page.page-id-1902 section.wwd-caps .wwd-caps__inner h2{
	margin-bottom:32px;
}

.page.page-id-1902 .sp-cta::before {
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
}
.page.page-id-2070 .ar-video__media {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
}
section.video_section  .ar-video:after {
    position: absolute;
    content: "";
    background: #fff;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    z-index: 9;
}
p.ar-video__description {
    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-white);
}
button.ar-play-btn.video_single {
    border: none;
}

button.ar-play-btn.video_single img {
    width: 100%;
}
a.nav__logo {
    width: 100%;
    max-width: 200px;
}
.philosophy-image {
    display: flex;
    flex-direction: column;
gap: var(--space-80);    align-items: baseline;
}

.philosophy-image img.philosophy-img {
    height: 200px;
    object-fit: contain;
    width: 200px;
}
/* REQUIRED CONTAINER */
.nav__actions {
  position: relative;
  display: flex;
  align-items: center;
}

/* SEARCH ICON */
.nav__icon--search {
  position: relative;
  z-index: 1001;
  cursor: pointer;
}
.ecosystem__row:hover span.sp-impact__row-em {
    color: var(--brand-neural-mint);
}

/* SEARCH BOX */
.nav__search {
  background: #00000091 !important;
  position: absolute;

  /* anchor to search icon */
  top: 50%;
   /* distance from icon */
  right: 100%;
  width: 320px;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(10px);
  transition: all 0.25s ease;
  z-index: 9999;
}

/* INPUT */
.nav__search input {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.1);
  outline: none;
  font-size: 14px;
  background: #00000091;
  padding: 15px;
  color:#fff;
}

/* RESULTS */
.nav__search-results {
  margin-top: 8px;
  max-height: 500px;
  overflow-y: auto;
background: #010101b5;
    color: #fff;
}

.nav__search-results a,.nav__search-results p {
  display: block;
  padding: 20px 10px;

  font-size: 14px;
  color: #fff;
  text-decoration: none;

  border-radius: 6px;
  transition: 0.2s ease;
}

.nav__search-results a:hover {
  background: rgba(0,0,0,0.05);
}

/* SHOW STATE */
.nav__search.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  height:50px;
}
button.nav__icon.nav__icon--search {
    background: var(--neutral-deep-black-60);
    padding: 15px;
}
.mobile-menu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    background: #000;
    z-index: 9999;
    transition: all .4s ease;
    padding: 100px 40px;
    overflow-y: auto;
}

.mobile-menu.active{
    right: 0;
}

.mobile-menu-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-list li{
    margin-bottom: 20px;
}

.mobile-menu-list a{
    color: #fff;
    text-decoration: none;
    font-size: 32px;
    font-weight: 600;
}
.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;
}

/* Toggled by JS once the user has scrolled past the nav's own height.
   Glassmorphism: deep-black tint @ 60% + blur + saturation pop.        */
.nav--scrolled {
  background-color: var(--neutral-deep-black-60);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Desktop-only · slimmer vertical padding → shorter glass bar.
   Tablet + mobile keep the larger --responsive-spacing-24.        */
@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 {
  /* SVG file is a self-contained 52×52 chip — includes background.
     The button just provides the click target + alignment.        */
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.nav__icon img,
.nav__icon svg {
  display: block;
}

/* Show the desktop hamburger by default; mobile swaps via @media below. */
.nav__icon .nav__icon-mobile { display: none; }

/* Chip background rect inside each inline SVG — fades out when the
   nav switches to its glass-morphism state. The transition lives on
   the rect so both directions animate smoothly.                      */
.nav__chip {
  transition: fill-opacity 320ms ease;
}
.nav--scrolled .nav__chip { fill-opacity: 0; }


/* ============================================================
   HERO
   Full-bleed section. Placeholder gradient (will swap for image).
   Overlay: left = eyebrow + title, right = lead + body copy.
   ============================================================ */
.hero{
    position:relative;
    overflow:hidden;
}

.hero__bg-media{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
}

video.hero__bg-media{
    object-fit:cover;
}

iframe.hero__bg-media{
    position:absolute;
    top:50%;
    left:50%;
    width:100vw;
    height:56.25vw;
    min-width:177.77vh;
    min-height:100vh;
    transform:translate(-50%, -50%);
    pointer-events:none;
}

.hero__inner{
    position:relative;
    z-index:9;
}


.hero {
  position: relative;
  height: 60dvh; 
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--responsive-spacing-120) var(--margin-margin) var(--responsive-spacing-60);
  background-color: var(--neutral-deep-black);
  overflow: hidden;   /* clip the over-tall parallax bg */
}

/* Parallax banner · positioned absolutely + behind all children via z-index: -1.
   Height 150% so the bottom doesn't show empty space when transform translates it down. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9 !important;

     background: rgba(0, 0, 0, 0.4); /* 60% black overlay */


    transform: translate3d(0, var(--parallax-y, 0px), 0);
    will-change: transform;
}


/* .hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--neutral-black);
  opacity: var(--hero-darken, 0);
  pointer-events: none;
  will-change: opacity;
}
 */
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-14);
}

/* ── Top row · 12-column layout grid (from UI Kit · 02 grid)
   Headline stack: columns 1–7 · Lead statement: column 8 → end. */
.hero__top {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
/*   gap: var(--grid-gutter); */
  align-items: end;
}

.hero__copy      { grid-column: 1 / 14; }
.hero__lead-wrap { grid-column: 9 / -1; }

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero__eyebrow {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h1);
  line-height: var(--lh-h1);
  color: var(--neutral-white);
}

.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);
  color: var(--neutral-white);
}

.hero__lead-wrap {
  /* the lead sits at the bottom of the right column, aligned with
     the baseline of "Tell Our Story" on the left.                 */
}

.hero__lead {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
  color: var(--neutral-white);
}

/* ── Full-width divider ── */
.hero__divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--neutral-white-20);
  display:none;	
}

/* ── Bottom row · 12-column layout grid
   Body copy: columns 1–7 · Scroll indicator: column 8 → end (right-aligned). */
.hero__bottom {
      display: flex;
    justify-content: space-between;
    gap: var(--grid-gutter);
    align-items: start;
}

.hero__body   { grid-column: 1 / 9; }
.hero__scroll { grid-column: 8 / -1; justify-self: end; }

.hero__body {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: var(--neutral-white);
}

/* ── Scroll-down indicator (pixel arrow, right column, baseline-aligned) ── */
.hero__scroll {
  justify-self: end;
  display: inline-flex;
  align-items: center;
}

.hero__scroll img {
  display: block;
	display:none;
}
article.highlights__mcard {
    display: none;
}

/* Mobile-only arrow lives inside .hero__top — hidden on desktop + tablet.
   Mobile @media (≤719px) shows it and positions it in column 4.          */
.hero__scroll--mobile {
  display: none;
}


/* ============================================================
   COMPONENTS — pulled from the UI Kit specs verbatim.
   These should later be extracted to a shared components.css.
   ============================================================ */


/* ── Pixel arrow icon (placeholder) ─────────────────────────
   Width = space-14, height derives from SVG aspect ratio.
   Swap the inner <svg> for the user-provided SVG when ready.
   ----------------------------------------------------------- */

.pixel-arrow {
  display: inline-block;
  width: var(--space-14);
  flex-shrink: 0;
  color: currentColor;
}

/* Mobile */
@media (max-width: 767px) {
		.page.page-id-1902 .ar-video {
    height: 100% !important;
}
	.page.page-id-1902 .ar-video__media {
    width: 100% !important;
    height: 100% !important;
    position: relative;
}

.page.page-id-1902 .ar-video__bg {
    display: none !important;
}

.page.page-id-1902 .ar-video::before {
    display: none;
}
	
	footer.media__foot {
    margin-top: 20px;
}
	  .page.page-id-3447  .platform__mobile-nav {
       
        z-index: 99;
    }

  .pixel-arrow {
    width: var(--space-8);
  }
}
.pixel-arrow svg {
  width: 100%;
  height: auto;
  fill: currentColor;
  display: block;
}


/* ── Primary CTA · two-compartment chassis ────────────────
   Padding values give the exact 50px / 46px chassis from spec
   without hard-coding heights — see UI Kit · 06 buttons.

.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 bg variant — translucent deep-black chassis · used on dark images */
.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);
}

/* When the nav is in its glass state, the Connect CTA loses its own
   chassis bg — it sits naked on the glass. Hover still highlights the
   arrow chip in mint via the rule above.                              */
.nav--scrolled .nav__actions .cta-primary--light,
.nav--scrolled .nav__actions .cta-primary--light:hover {
  background: transparent;
}

/* Dark bg variant — solid mint chassis · for use on black sections */
.cta-primary--dark           { background: var(--brand-neural-mint); }
.cta-primary--dark .cta-primary__text  { color: var(--neutral-black); }
.cta-primary--dark .cta-primary__arrow { color: var(--neutral-black); }
.cta-primary--dark:hover .cta-primary__arrow {
  background: var(--neutral-black);
  color: var(--brand-neural-mint);
}


/* ============================================================
   CORNER PIXEL RULE · section transitions
   Every section paints 2 corner pixels at its top and 2 at its
   bottom. The color = the bg color of the adjacent section
   (above for top, below for bottom). Creates a stitched
   transition effect between sections of different colors.

   Per-section CSS vars override:
     --pixel-top    · color of the section above (default: transparent)
     --pixel-bottom · color of the section below (default: transparent)
   ============================================================ */

.case, .manifesto, .philosophy, .exception, .highlights, .awards, .impact, .ecosystem, .partners, .testimonials, .media, .site-footer {
  position: relative;
}



.partners__ticker {
  margin-top: var(--space-48);
  overflow: hidden;
  /* Figma: the logos sit in a 920px window, not full width — the
     decorative squares fill the right side of the panel.            */
  max-width: 920px;
}

.partners__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: partners-ticker 15s linear infinite;
}

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

/* Pause when the user hovers the panel */
.partners__ticker:hover .partners__track {
  animation-play-state: paused;
}

.partners__track img {
    height: 70px;
    width: auto;
    flex-shrink: 0;
    margin-right: var(--responsive-spacing-40);
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.6);
} 

/* Set repeats 4× in the markup, so one set = 25% of the track. Shifting
   by exactly one set loops seamlessly and leaves 3 sets to fill the view. */
@keyframes partners-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}
.case__counter {
  display: flex;
  align-items: center;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_xs);
  color: var(--neutral-medium-grey);
  margin-right: var(--space-8);
}
.case__counter-current { color: var(--brand-dark-teal); }

/* ── Card · cols 1–6 ── */
.case__card {
  grid-column: 1 / 7;
  background: var(--neutral-soft-grey);
  color: var(--neutral-black);
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--responsive-spacing-32);
  /* Fixed height (matches the image) so the slide fits one screen. */
  height: var(--case-card-h);
}

.case__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Category row · mint marker + label */
.case__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.case__category-mark {
  display: inline-block;
  width: var(--space-12);
  height: var(--space-12);
  background: var(--brand-dark-teal);
  flex-shrink: 0;
}

.case__category-text {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_xs);
  color: var(--neutral-black);
}
.case::before, .manifesto::before, .philosophy::before,
.exception::before, .highlights::before, .awards::before, .impact::before, .ecosystem::before, .partners::before, .testimonials::before, .media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--space-20);
  pointer-events: none;
  z-index: 5;
  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;
  background-size: var(--space-20) var(--space-20);
  background-repeat: no-repeat;
}
.highlights__panel.partners:after {
    display: none;
}
article.highlights__card {
    margin-bottom: 20px;
}

article.highlights__card span.pixel-arrow svg rect {
    fill: #fff;
}article.highlights__card {
/*     border-bottom: 1px solid var(--neutral-charcoal); */
/*     padding-bottom: 20px; */
}

.highlights__card:hover span.pixel-arrow svg rect {
    fill: #000 !important;
}

.highlights__card:hover span {
  color: #00fac2 !important;
}

.highlights__panel.partners:before {
    background-position: top right !important;
}
.site-footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-20);
    pointer-events: none;
    z-index: 5;
    background-image: linear-gradient(#00FAC2, #00FAC2), linear-gradient(#00FAC2, #00FAC2);
    background-position: bottom right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}
.home .site-footer::before{
	display:none;
}
.home .case {
    --pixel-top: var(--neutral-black);
    --pixel-bottom: var(--neutral-black);
}
figure.case__media img {
    position: relative;
}

figure.case__media:after {
    position: absolute;
    content:"";
    top: 0;
    right: 0;
    background: #fff;
    width: 20px;
    height: 20px;
}
figure.case__media:before {
    position: absolute;
    content:"";
    top: 5%;
    right: 3%;
    background: #fff;
    width: 20px;
    height: 20px;
    z-index: 3;
}

.case::after, .manifesto::after, .philosophy::after,
.exception::after, .highlights::after, .awards::after, .impact::after, .ecosystem::after, .partners::after, .testimonials::after, .media::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--space-20);
  pointer-events: none;
  z-index: 5;
  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;
  background-size: var(--space-20) var(--space-20);
  background-repeat: no-repeat;
}

/* Per-section pixel colors based on adjacent section bg.
   Banner (.hero) is exempt — rule starts from .case.        */
.case       { --pixel-top: var(--neutral-black); --pixel-bottom: var(--neutral-white); }
.manifesto  { --pixel-top: var(--neutral-white); --pixel-bottom: var(--neutral-black); }
.philosophy {
    --pixel-top: var(--neutral-white);
    --pixel-bottom: #1a1a1a;
}.exception  { --pixel-top: var(--neutral-black); --pixel-bottom: var(--neutral-black); }
.highlights {
    --pixel-top: var(--neutral-black);
    --pixel-bottom: var(--neutral-soft-grey);
}.awards     { --pixel-top: var(--neutral-black); --pixel-bottom: var(--neutral-black); }
.impact     { --pixel-top: var(--neutral-soft-grey); --pixel-bottom: var(--neutral-deep-black); }
.ecosystem  { --pixel-top: var(--neutral-black); --pixel-bottom: var(--neutral-soft-grey); }
.partners    { --pixel-top: var(--neutral-deep-black); --pixel-bottom: var(--neutral-black); }
.testimonials { --pixel-top: var(--neutral-soft-grey); --pixel-bottom: var(--neutral-soft-grey); }
.media         { --pixel-top: var(--neutral-black); --pixel-bottom: var(--neutral-deep-black); }
.site-footer   { --pixel-top: var(--neutral-soft-grey); }


/* ============================================================
   SECTION 2 · CASE STUDY (2nd fold · Healthcare)
   All values pulled from Figma node 1131:3779.
   Card + image are a 50/50 horizontal split with NO gap —
   they touch, then sit inside the page's margin/margin gutters.
   ============================================================ */

.case {
  background: var(--neutral-white);
  padding: var(--responsive-spacing-80) var(--margin-margin) ;
  /* Card + image height · viewport-relative so the whole case study
     always lands within a single screen. Per-breakpoint overrides in
     the responsive blocks keep the stacked tablet/mobile layout in
     one screen too. */
/*   --case-card-h: clamp(340px, 56vh, 560px); */
}
.hero::before {
background-image:linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.15) 100%
);
	z-index: 9;}

/* .case__inner · scaled element. JS updates --case-scale 0.7 → 1.0 as
   the section scrolls in. transform-origin keeps it growing from its
   visual center. position: relative anchors the absolute .case__pager.
   isolation: isolate contains the ::after overlay's z-index here.    */
.case__inner {
  position: relative;
  /* top-anchored: zoomed-out version's top edge stays at the same Y as
     the full-sized version, content grows downward as scale → 1.0.   */
  transform-origin: center top;
  will-change: transform;
  transition: transform 80ms linear;   /* sub-frame smoothing */
  isolation: isolate;
}

/* Glassmorphism "emerging from frosted shadow" overlay.
   Same deep-black tint + blur recipe as the floating nav (consistency).
   JS sets --case-overlay-opacity 1 → 0 in lockstep with the zoom (eased)
   so the content reveals from frosted darkness to full clarity exactly
   when the zoom animation ends.                                       */
.case__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--neutral-black-80);   /* heavier dark glass */
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 80ms linear;
}

/* Section grid · horizontal flex carousel on ALL breakpoints.
   Each .case__slide is calc(100% − 20px) wide so the next slide peeks 20px. */
.case__grid {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.case__grid::-webkit-scrollbar { display: none; }

/* Slide · holds one case study (card + media side-by-side via 12-col grid). */
.case__slide {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: 0;
  flex: 0 0 100%;          /* full-width slide · no peek */
  scroll-snap-align: start;
 height : 400px;	
}

/* Dot indicators · hidden on desktop + tablet, shown on mobile via @media.
   Sit below the carousel as a section-level row.                          */
.case__dots {
  display: none;
  justify-content: center;
  gap: var(--space-8);
  padding-top: var(--responsive-spacing-32);
}

/* Section-level prev/next pager · position: absolute so it never moves
   with the horizontal carousel scroll.
   20px gap from the soft-grey card's right edge AND from its bottom.
   Card right edge sits at exactly 50% of section width (cols 1–6 of 12).
   Section has 0 bottom padding, so card bottom = section bottom.        */
.case__pager {
  position: absolute;
  display: inline-flex;
  gap: var(--responsive-spacing-12);
  bottom: var(--space-20);
  right:  calc(50% + var(--space-20));
  z-index: 4;
}
.case__pager-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* ── Card · cols 1–6 ── */
.case__card {
  grid-column: 1 / 7;
  background: var(--neutral-soft-grey);
  color: var(--neutral-black);
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--responsive-spacing-32);
  /* Fixed height (matches the image) so the slide fits one screen. */
  height: var(--case-card-h);
}

.case__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Category row · mint marker + label */
.case__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.case__category-mark {
  display: inline-block;
  width: var(--space-12);
  height: var(--space-12);
  background: var(--brand-dark-teal);
  flex-shrink: 0;
	display:none;
}

.case__category-text {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-tags);
  line-height: var(--lh-tags);
  color: var(--neutral-black);
}

/* Description block · title + subtitle, gap: space-8 */
.case__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 90%;	
}

.case__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
  color: var(--neutral-black);
}

.case__sub {
  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-slate-grey);
}

/* Card footer · Read More + pager */
.case__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.case__pager {
  display: flex;
  gap: var(--responsive-spacing-12);
}

/* ── Media · 39million.jpg · cols 7–12 ── */
.case__media {
  grid-column: 7 / -1;
  margin: 0;
  /* Fixed height (matches the card) instead of an aspect ratio, so the
     image never grows tall enough to push the slide past one screen. */
  height: var(--case-card-h);
  overflow: hidden;
  position: relative;   /* anchor for the mobile Read-More overlay */
}

/* Mobile-only Read More CTA · lives inside .case__media, only shown ≤719px.
   Hidden on desktop + tablet — the original CTA in .case__foot is shown. */
.case__cta--mobile {
  display: none;
}

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

/* Pixel arrow flipped for "previous" pager */
.pixel-arrow--flip {
  transform: scaleX(-1);
}

/* ============================================================
   SECTION 6 · HIGHLIGHTS (stacked cards on black)
   Figma: 1131:3853 (Container)
   ============================================================ */

.highlights {
  position: relative;
  background: var(--neutral-deep-black);
  /* Section padding includes the margin/margin sides so
     cards stay within the 12-col content area (1320 wide).
     Hover bg never extends past the margins.              */
  padding: var(--responsive-spacing-80) var(--margin-margin);
}
.highlights__card--bottom{
    display:flex;
    align-items:stretch;
    gap:0;
	margin-top: 4%;
}


.highlights__card--bottom .highlights__image{
    width:50%;
    object-fit:cover;
}
article.highlights__card--bottom.excerpt img {
    opacity: 1;
}
article.highlights__card--bottom.excerpt  {
    opacity: 1;
    padding: 0 var(--margin-margin);
}

article.highlights__card--bottom.excerpt p {
    color: #000;
}
.highlights__card--bottom .highlights__panel{
    width:50%;
    background:#00fac2;
    color:#000;
    display:flex;
    align-items:center;
    padding:24px;
}

@media(max-width:767px){
    .highlights__card--bottom{
        flex-direction:column;
    }

    .highlights__card--bottom .highlights__image,
    .highlights__card--bottom .highlights__panel{
        width:100%;
    }
     .highlights__mcard {
    display: block;
  }

  /* Image banner · full width, fixed 145px (Figma h-145.09px)      */
  .highlights__m-media {
    position: relative;
    width: 100%;
    height: 145px;
    overflow: hidden;
    margin: 0;   /* reset the default <figure> 40px inline margin */
  }
  .highlights__m-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Notched corner pixels · black squares on the image's light
     corners blend into the black section bg → carved-corner effect.
     Top-right + bottom-left, matching the Figma pixel placement.   */
  .highlights__m-pixel {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--neutral-black);
    z-index: 2;
  }
  .highlights__m-pixel--tr { top: 0;    right: 0; }
  .highlights__m-pixel--bl { bottom: 0; left:  0; }

  /* Text + arrow row · pt-40 = gap from image · pb-20 = gap to divider */
  .highlights__m-row {
    display: flex;
    align-items: center;
    gap: var(--space-20);
    padding: var(--responsive-spacing-40) 0 var(--space-20) 0;
  }
  .highlights__m-text {
    flex: 1 1 0;
    min-width: 0;
    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);
  }
  .highlights__m-text sup {
    font-size: 0.5em;
    vertical-align: super;
    line-height: 0;
  }
  .highlights__m-row .cta-arrow { flex: 0 0 auto; }

  /* Divider · full-width charcoal line                            */
  .highlights__m-divider {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--neutral-charcoal);
  }
}
/* Corner pixels now handled by the shared CORNER PIXEL RULE above */

.highlights__list {
  display: flex;
  flex-direction: column;
gap: var(--space-48);
}

/* Each card uses the 12-col layout grid (from UI Kit · 02).
   Panel (text + hover bg): cols 1–7 · Image: cols 6–12 (overlap) ·
   Arrow: col 12 (right-aligned).
   All three share grid-row 1 — they stack via z-index.            */
.highlights__card {
  position: relative;
  min-height: 160px;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-template-rows: 1fr;
  gap: var(--grid-gutter);
  align-items: center;
  /* Internal 60 px each side — extra inset on top of the section margin.
     Text starts 60 px from card's bg-left, arrow ends 60 px from bg-right. */
  padding: 0 var(--space-60);
  transition: background 200ms ease;
  /* Whole card reads as one clickable target — the arrow CTA inside is
     the actual link, but the bg-darkening hover invites the click across
     the full row, so the cursor follows suit. */
  cursor: pointer;
}

/* HOVER BG · extends across the full card box.
   60 px card padding keeps text 60 px from box left
   and arrow 60 px from box right.                        */
.highlights__card:hover {
  background: var(--neutral-black);
}

/* Mint pixel · top-left of card (which is at the content area edge) */
.highlights__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--space-16);
  height: var(--space-16);
  background: var(--brand-neural-mint);
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 4;
}

.highlights__card:hover::before {
  opacity: 1;
}

/* PANEL · plain text wrapper (no bg of its own) */
.highlights__panel {
  grid-column: 1 / 7;
  grid-row: 1;
  display: flex;
  align-items: center;
  z-index: 1;
}

/* IMAGE · starts at col 7, ends at col 11.5 (overlaps panel edge).
   Grid span is cols 7–12 (6 cols natural); width 75% = 4.5 cols.
   Assets: ballet.jpg · agents.jpg · fortune.jpg                       */
/* .highlights__image {
  grid-column: 7 / -1;
  grid-row: 1;
  z-index: 2;
  width: 75%;
  justify-self: start;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  align-self: center;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
} */

.highlights__image {
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36%;
    height: 194px;
    object-fit: cover;
    /* object-position: center; */
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}


.highlights__card:hover .highlights__image {
  opacity: 1;
}

/* ARROW · col 12, sits above the image */
.highlights__card .cta-arrow {
  grid-column: 12 / -1;
  grid-row: 1;
  z-index: 3;
  justify-self: end;
}

/* Stretched-link pattern · the arrow CTA's invisible ::after spans the
   entire card so clicking ANYWHERE on the card row triggers the link.
   Honest cursor:pointer + real click target across the full hover area.
   The image already has pointer-events: none, the panel text is just a
   <p>, so nothing else competes for clicks — no extra z-index gymnastics
   needed. The ::after sits above the existing layers but the visible
   arrow stays untouched because it's the same <a>. */
.highlights__card .cta-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

.highlights__card:hover .cta-arrow--dark {
  background: var(--neutral-white);
  color: var(--neutral-black);
}
article.highlights__card--bottom.excerpt p.highlights__text{
      font-size: var(--font-body_l);

}
.highlights__text {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
  color: var(--neutral-white);
}

/* Key phrase highlights to neon mint when the card is hovered (desktop). */
.highlights__hl { color: inherit; transition: color 200ms ease; }
.highlights__card:hover .highlights__hl { color: var(--brand-neural-mint); }

.highlights__card .cta-arrow {
  grid-column: 12 / -1;
  justify-self: end;
}

.highlights__text sup {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
}

.highlights__separator {
  margin: var(--space-48) 0;
  border: 0;
  border-top: 1px solid var(--neutral-charcoal);
}


/* ============================================================
   SECTION 7 · AWARDS / ANALYST VALIDATION
   Soft-grey bg, h2 title, 3 white cards in 12-col grid,
   text-only secondary CTAs below.
   ============================================================ */

.awards {
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

.awards__title {
/*   margin: 0 0 var(--responsive-spacing-80); */
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-black);
}

/* 3 cards in row · use the 12-col grid with 20 px gap.
   Each card spans 4 cols.                              */
.awards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-bottom: var(--space-80);
}

.awards__card {
  position: relative;
  background: var(--neutral-white);
  /* 20 px on all four sides */
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 446px;
  gap: var(--responsive-spacing-32);
}

/* Mint pixel · pinned to the top-right corner of the card */
.awards__card::before {
 content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--space-20);
    height: var(--space-20);
    background: var(--neutral-soft-grey);
}
.awards__card:hover::before {
  background: #00FAC2; /* Change to your desired color */
}
.awards__card:hover::before {
  opacity: 1;
}
.awards__card {
    position: relative;
    overflow: hidden;
    height: 280px;
    padding: 30px;
}

.awards__logo {
    position: absolute;
    bottom: 30px;
    left: 30px;
    transition: transform .5s ease;
}

.awards__content {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 20px;

    transform: translateY(120%);
    transition: transform .5s ease;
}

/* Hover */
.awards__card:hover .awards__logo {
    transform: translateY(-150px);
}

.awards__card:hover .awards__content {
    transform: translateY(0);
}
/* Logo · vertically centered, left-aligned to card padding */
.awards__logo {

  max-width: 60%;
  max-height: 35%;
  object-fit: contain;
  pointer-events: none;
}

.awards__num {
  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-slate-grey);
}

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

/* CTA row · 4 text-only secondary CTAs.
   First CTA pins to col 1, last CTA pins to col 12 (right edge),
   gaps between are equal — flex space-between handles this.       */
.awards__ctas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-20);
}
.page.page-id-1902 section.media:nth-of-type(4) {
    background: var(--neutral-black);
}
.page.page-id-1902 section.media:nth-of-type(4) a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta span.cta-primary__arrow {
    background: #fff;
}
.page.page-id-1902 section.media:nth-of-type(4) a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta span.cta-primary__arrow span.pixel-arrow {
    color: #000;
}
.page.page-id-1902 section.media:nth-of-type(4) span.cta-primary__text {
    color: var(--neutral-black);
}
.page.page-id-1902 section.media:nth-of-type(4) h2.media__title {
    color: var(--neutral-white);
}
.page.page-id-1902 section.media:nth-of-type(4) a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta:hover span.cta-primary__arrow {
    background: var(--brand-neural-mint);
}

.page.page-id-1902 section.media:nth-of-type(4)  a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta {
    background: #fff;
}
.page.page-id-1902 section.media:nth-of-type(4) a.cta-primary.cta-primary--solid-dark.promo-grid__card-cta:hover span.cta-primary__arrow span.pixel-arrow {
    color: var(--neutral-black);;
}
.page.page-id-1902 section.media:nth-of-type(4) p.media__caption {
    color: var(--neutral-white);
}
.page.page-id-1902 section.media:nth-of-type(4) .media__image::after{
    background:  var(--neutral-black);
}

.awards__ctas .cta-secondary {
  padding: 0;
}


/* ============================================================
   SECTION 13 · FOOTER
   ============================================================ */

.site-footer {
  background: var(--neutral-deep-black);
  padding: var(--responsive-spacing-60) var(--margin-margin);
  color: var(--neutral-medium-grey);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

.site-footer__head {
  font-family: var(--typeface-primary);
	margin-top: 0;
    margin-bottom: 16px;
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-h3);
  color: var(--neutral-white-60);
  letter-spacing: 0.06em;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.site-footer__list a {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-s);
  line-height: var(--lh-s);
  color: var(--neutral-white);
  transition: color 200ms ease;
}

.site-footer__list a:hover {
  color: var(--neutral-white);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-top: var(--responsive-spacing-32);
  padding-top: var(--space-32);
  border-top: 1px solid var(--neutral-charcoal);
}

.site-footer__copy {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-s);
  line-height: var(--lh-s);
  color: var(--neutral-medium-grey);
}

.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-32);
}

.site-footer__legal a {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-s);
  line-height: var(--lh-s);
  color: var(--neutral-white-60);
  transition: color 200ms ease;
}

.site-footer__legal a:hover {
  color: var(--neutral-white);
}


/* ============================================================
   SECTION 12 · MEDIA (Recent Media and Ideas)
   ============================================================ */

.media {
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

.media__title {
  margin: 0 0 var(--space-32);
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-black);
}

.media__filters {
  display: none;
  gap: var(--space-32);
  margin-bottom: var(--space-32);
}

.media__filter {
  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);
  padding-bottom: var(--space-8);
  border-bottom: 2px solid transparent;
}

.media__filter--active {
  font-weight: var(--weight-bold);
  color: var(--neutral-black);
  border-bottom-color: var(--brand-neural-mint);
}

/* 4 columns · cards align to the TOP of the row by default.
   Card 3 specifically is bottom-aligned to create the asymmetric
   staggered layout from the reference design.                   */
.media__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-32);
  align-items: start;
  margin-bottom: var(--responsive-spacing-48);
}
.page-id-1902 .media__grid{
	  margin-bottom: 0 !important ;
}
.media__card {
  display: flex;
    flex-direction: column;
    gap: var(--space-24);
    height: 420px;
}

/* Card 3 hangs from the bottom of the row (asymmetric design) */


.media__image {
  position: relative;
  margin: 0;
}

.media__image img {
  width: 100%;
    min-height: 250px; 
	    max-height: 250px; 
	object-fit:cover;
	display: block;
}

/* 20×20 soft-grey "notch" cut at the top-right of every card image
   (same as section bg, so it reads as a corner removed)         */
.media__image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-20);
  height: var(--space-20);
  background: var(--neutral-white);
}

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

.media__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.media__pagination {
  display: flex;
  gap: var(--space-8);
}

.media__dot {
  width: var(--space-8);
  height: var(--space-8);
  background: var(--neutral-light-grey);
}

.media__dot--active {
    background: var(--neutral-black);
    width: var(--space-16);
}
.media__pager {
  display: flex;
  gap: var(--space-8);
}


/* ============================================================
   SECTION 11 · TESTIMONIALS (Don't Just Take Our Word for It)
   ============================================================ */

.testimonials {
  background: var(--neutral-black);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

.testimonials__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-32);
  margin-bottom: var(--responsive-spacing-32);
}

.testimonials__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-white);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

.testimonials__card {
  padding: 0 var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-32);
  border-right: 1px solid var(--neutral-deep-black);
}


.testimonials__card:first-child { padding-left: 0; }
.testimonials__card:last-child  { border-right: none; padding-right: 0; }

/* Quote icon · grayscale default, mint on row hover.
   The SVG file is built in mint; we suppress saturation by default. */
.testimonials__quote {
  display: block;
  width: 34px;
  height: 30px;
  filter: grayscale(1);
  transition: filter 200ms ease;
}

.testimonials__card:hover .testimonials__quote { filter: grayscale(0); }

.testimonials__text {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_xs);
  color: var(--neutral-medium-grey);
  flex: 1;
  transition: color 200ms ease;
}

.testimonials__card:hover .testimonials__text { color: var(--neutral-white); }

.testimonials__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonials__name {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-bold);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_s);
  color: var(--neutral-medium-grey);
  transition: color 200ms ease;
}

.testimonials__card:hover .testimonials__name { color: var(--neutral-white); }

.testimonials__title-org {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_xs);
  color: var(--neutral-medium-grey);
}

.testimonials__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--responsive-spacing-80);
}

.testimonials__counter {
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-body_s);
  line-height: var(--lh-body_xxs);
  color: var(--neutral-medium-grey);
}

.testimonials__counter-current { color: var(--brand-neural-mint); }

.testimonials__pager {
  display: flex;
  gap: var(--space-16);
}



/* Pager arrows now use cta-arrow--dark from the UI Kit. */


/* ============================================================
   SECTION 10 · PARTNERS
   Soft-grey section · dark panel with title + 4 logos + pixel
   pattern on right · 3 text-only CTAs below the panel.
   ============================================================ */

.partners {
  background: var(--neutral-soft-grey);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

/* Dark panel · holds title + logos · pattern overlays right edge */
.partners__panel {
  position: relative;
  background: var(--neutral-deep-black);
  padding: var(--responsive-spacing-60);
  overflow: hidden;
}

.partners__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-white);
	width:50%;
}

@media (max-width: 767px) {
   .partners__title {
	width:100%;
}
}


.partners__accent {
  color: var(--brand-neural-mint);
}

/* Logo row · 4 partner logos, evenly spaced, 48 px below title */
.partners__logos {
  display: flex;
  align-items: center;
  gap: var(--responsive-spacing-80);
  margin-top: var(--space-48);
}

.partners__logos img {
  /* Aspect ratio preserved by setting height only + width auto */
  height: 12vh;
  min-height: 12vh;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.6);  /* render logos as a unified light grey */
}
.page-id-5058 .ecosystem__row:hover .ecosystem__text {
  color: #fff;
}

/* Pixel pattern · right side of panel, overlapping outside edge */
.partners__pattern {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
}

/* 3 CTAs below the panel · spread across the section width */
.partners__ctas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--responsive-spacing-80);
}


/* ============================================================
   SECTION 9 · ECOSYSTEM
   Black bg · left col (1–5) = title + body + Anthropic logo,
   right col (6–12) = 4 icon rows with separator lines.
   ============================================================ */

.ecosystem {
  background: var(--neutral-deep-black);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

.ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: stretch;
}

/* ── LEFT (cols 1–6) ── */
.ecosystem__left {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ecosystem__head {
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-32);
}

.ecosystem__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-white);
}

.ecosystem__accent {
  color: var(--brand-neural-mint);
}

.ecosystem__body {
  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-light-grey);
}

/* Anthropic wordmark (PNG) · max 3 cols wide (half of left section) */
.ecosystem__logo {
  display: block;
  max-width: 35%;
  height: auto;
}

/* ── RIGHT (cols 7–12) ── */
.ecosystem__right {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
}

.ecosystem__row {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--space-32) var(--space-32) var(--space-32) var(--space-20);
  gap: var(--space-32);
  border-bottom: 1px solid var(--neutral-charcoal);
  transition: background 200ms ease;
}

.ecosystem__row:first-child { border-top: 1px solid var(--neutral-charcoal); }

/* Hover · darker panel bg + mint pixel top-right */
.ecosystem__row:hover {
  background: var(--neutral-black);
}
.page.page-id-3447 .ecosystem__row:hover{
	  background: var(--brand-neural-mint);

}
.page.page-id-3447 .ecosystem__row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: none !important;
}
.page.page-id-3447 .ecosystem__row:hover p.heading_ecosystem {
    color: #000;
    font-weight: bold;
}

.page.page-id-3447 .ecosystem__row:hover::before{
	background: #000;
}
.page.page-id-3447 .ecosystem__row:hover .ecosystem__text {
    color: #000;
}
.ecosystem__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-16);
  height: var(--space-16);
  background: #000;
  transition: opacity 200ms ease;
}

.ecosystem__row:hover::before {
  background: var(--brand-neural-mint);
}

.ecosystem__icon {
  flex-shrink: 0;
  /* ~90% of one 12-col grid column at the 1440 design width.
     Anchored as a flat vw so it scales smoothly across viewports. */
  width: 38px;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  object-fit: contain;
  /* Mint highlight inside the SVG is suppressed by default
     and revealed on row hover.                                */
  filter: grayscale(1);
  transition: filter 200ms ease;
}

.ecosystem__row:hover .ecosystem__icon {
  filter: grayscale(0);
}

.ecosystem__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);
     width: 85%;
}


/* ============================================================
   SECTION 8 · IMPACT
   Black bg · centered title · grid: left text + image + right.
   ============================================================ */

/* Outer section · scroll runway for the sticky pin.
   Slightly taller than the pin so sticky has engagement duration.       */
.impact {
  background: var(--neutral-black);
  position: relative;
  height: calc(100vh + 2000px); /* 100vh pin + 2000px runway ≈ 667px per slide */
}

/* Pin · sticks to top of viewport when scrolled into.
   Inherits the original padding so visible layout matches the prior
   design when the pin is engaged. Title sits at top, slides fill rest. */
.impact__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--neutral-black);
  padding: var(--responsive-spacing-120) var(--margin-margin);
  display: flex;
  flex-direction: column;
}

.impact__title {
  margin: 0 0 var(--responsive-spacing-80);
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-white);
  text-align: center;
  flex-shrink: 0;
}

/* Slide stack · all slides are absolute-positioned inset:0 of the
   slides container, which fills the remaining vertical space in the
   pin via flex:1. Each slide is a flex container so its grid content
   centers vertically.                                                  */
.impact__slides {
  position: relative;
  flex: 1;
}

.impact__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 0;
  display: flex;
  align-items: center;
}

.impact__slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* 12-col grid · left (1-3) · image (4-9) · right (10-12) */
.impact__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: center;
}

/* ── Awwwards-level entrance choreography ─────────────────────────────
   Each visual element animates independently with overlapping timing
   when the slide becomes active. The opacity cross-fade above is just
   the master swap; everything below is the layered motion language.
   Curves: cubic-bezier(0.16, 1, 0.3, 1) = "expo out" — feels alive but
   never bouncy. Used consistently for cohesion.
   ────────────────────────────────────────────────────────────────── */

/* Image · subtle scale settle (the pixel cloud handles the reveal). */
.impact__image {
  position: relative;
}

/* Image stays static during slide changes — only the pixel cloud
   animates over it. No zoom/scale, no transition. */
.impact__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Pixel cloud overlay ──────────────────────────────────────────
   49 absolute squares positioned in a 7×7 grid by JS over the image
   area. JS toggles each square's display in random stagger to form
   the "cloud" wipe. Color matches section bg so the image appears to
   dissolve into the void during transition.
   ─────────────────────────────────────────────────────────────── */
.impact__pixel-grid {
  position: absolute;
  pointer-events: none;
  z-index: 10;        /* above all slides */
}

.impact__pixel {
  position: absolute;
  display: none;
  background: var(--neutral-black);
}

/* Headline (left) · word-by-word stagger. Starts AFTER cloud midpoint
   (active class is added at ~350ms, words appear as pixels uncover). */
.impact__left .word {
  display: inline-block;
  transform: translateY(48px);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity   500ms ease;
  transition-delay: calc(200ms + var(--word-i, 0) * 50ms);
}

.impact__slide--active .impact__left .word {
  transform: translateY(0);
  opacity: 1;
}

/* Paragraph (right) · faster cadence, slightly later. */
.impact__right .impact__lead .word {
  display: inline-block;
  transform: translateY(28px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity   400ms ease;
  transition-delay: calc(280ms + var(--word-i, 0) * 24ms);
}

.impact__slide--active .impact__right .impact__lead .word {
  transform: translateY(0);
  opacity: 1;
}

/* Standalone CTA (direct child of .impact__right) · final beat.
   The direct-child selector means inline impact__cta links inside a
   paragraph (e.g. slide 3's AAVA link) don't get this entrance
   animation — they ride with the words.                          */
.impact__right > .impact__cta {
  display: inline-block;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity   400ms ease;
  transition-delay: 700ms;
}

.impact__slide--active .impact__right > .impact__cta {
  transform: translateY(0);
  opacity: 1;
}

/* Reduced motion · skip all the choreography. */
@media (prefers-reduced-motion: reduce) {
  .impact__slide,
  .impact__left .word,
  .impact__right .impact__lead .word,
  .impact__right .impact__cta {
    transition: none;
    animation: none;
    transform: none;
    opacity: 1;
    clip-path: none;
  }
  .impact__slide:not(.impact__slide--active) { display: none; }
}

.impact__left {
  grid-column: 1 / 4;
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
  color: var(--neutral-white);
}

.impact__image {
  grid-column: 4 / 10;
  margin: 0;
}

.impact__image img {
  width: 100%;
  height: auto;
  display: block;
}

.impact__right {
  grid-column: 10 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

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

/* CTA · "Engineering to the Power of AI" · mint by default
   (the cta-secondary--dark variant defaults to white; override
   to mint here since this is a brand-accented link)         */
.impact__cta {
  color: var(--brand-neural-mint);
}



/* ────── Secondary CTA · text + arrow, no chassis
   Copied verbatim from uikit.css (UI Kit · 06 buttons).
   Variant 'light' = black text + arrow, hover dark-teal.
   Variant 'dark'  = white text + arrow, hover mint.        */

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-16) 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-cta);
  line-height: var(--lh-cta);
  transition: color 200ms ease;
}


@media (max-width: 767px) {
	.page-id-3447 section.platform:after{
		bottom:-9px !important;
	}
  .cta-secondary {
   	width:85%;
  }
}

.cta-secondary--light          { color: var(--neutral-black); }
.cta-secondary--light:hover    { color: var(--brand-dark-teal); }

.cta-secondary--dark     { color: var(--brand-neural-mint); }

/* Composable modifier · adds underline to the secondary CTA.
   Combine with --light or --dark.                            */
/* .cta-secondary--underline      { text-decoration: underline; text-underline-offset: 4px; } */


/* ────── Arrow-only CTA (icon chip)
   Copied verbatim from uikit.css (UI Kit · 06 buttons).
   Variant 'light' = white box / black arrow, hover inverts.
   Variant 'dark'  = deep-black box / white arrow, hover mint. */

.cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 50px;
  transition: background 200ms ease, color 200ms ease;
}

@media (max-width: 767px) {
 .cta-arrow {
     width: 35px;
    height: 35px;
}
}



.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-white);      color: var(--neutral-black); }
.cta-arrow--light:hover    { background: var(--neutral-black);      color: var(--neutral-white); }


/* ============================================================
   SECTION 3 · MANIFESTO STATEMENT
   Figma: 1131:3820 (Container)
   ============================================================ */

.manifesto {
  background: var(--neutral-white);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

.manifesto__inner {
  display: flex;
  flex-direction: column;
}
/* Image-free mobile version is hidden on desktop (shown ≤719px). */
.manifesto__inner--mobile { display: none; }

.manifesto__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.manifesto__text,
.manifesto__line {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-light-grey);
}

.manifesto__text--accent {
  color: var(--neutral-deep-black);
}

/* Inline image · Figma frame is 277×82. Real assets now wired in. */
.manifesto__image {
  display: inline-block;
  width: 277px;
  height: 82px;
  object-fit: cover;
  flex-shrink: 0;
}


/* ── Scroll-driven character reveal ──────────────────────────
   JS (at end of home.html) wraps each text character and each
   inline image in a <span class="char"> with --i (its index) and
   --total on .manifesto. A scroll listener sets --reveal: 0..1 on
   .manifesto as the section moves through the viewport. The per-
   char reveal math below interpolates each letter's opacity off
   those vars — no per-frame JS, no color-mix.

   Math:
     normalized   = i / total                  (0 → 1 across letters)
     threshold    = normalized × 0.875         (leave 0.125 fade-window
                                                at the end so letter N-1
                                                still finishes by reveal=1)
     char-reveal  = clamp(0,
                          (reveal − threshold) × 8,
                          1)
   ── */
.manifesto .char {
  --normalized:  calc(var(--i, 0) / var(--total, 100));
  --threshold:   calc(var(--normalized) * 0.875);
  --char-reveal: clamp(
                   0,
                   calc((var(--reveal, 0) - var(--threshold)) * 8),
                   1
                 );
  transition: opacity 120ms linear, filter 120ms linear;
  will-change: opacity;
}

/* Text characters · base color = deep-black, opacity drives the fade.
   Pre-reveal letter is invisible (opacity 0) · post-reveal = full black. */
.manifesto span.char {
  color: var(--neutral-deep-black);
  opacity: var(--char-reveal);
}

/* Inline images · fade from invisible + full greyscale → full color. */
.manifesto img.char {
  opacity: var(--char-reveal);
  filter:  grayscale(calc((1 - var(--char-reveal)) * 100%));
}

/* Reduced-motion: reveal everything instantly. */
@media (prefers-reduced-motion: reduce) {
  .manifesto         { --reveal: 1; }
  .manifesto .char   { transition: none; }
}


/* ============================================================
   SECTION 4 · PHILOSOPHY (sticky left + scrolling right)
   Figma: 1131:3831 (Main Container)
   ============================================================ */

/* Outer wrapper — 600px visible pin + 1000px scroll runway = 1600px.
   The pin sticks for the full 1000px giving ~250px per paragraph step.
   The section below becomes visible as soon as the runway is exhausted. */
.philosophy {
  --philosophy-steps: 5;
  position: relative;
  height: 800px;
  background: var(--neutral-black);
	padding-top:40px;
}

/* Pin · position: sticky so it naturally anchors at the viewport top
   while the tall section scrolls past it. 600px is the fixed visible
   height of the section box.                                           */
.philosophy__pin {
  position: sticky;
  top: 0;
  background: var(--neutral-black);
  display: flex;
  align-items: center;
  padding: var(--responsive-spacing-40) var(--margin-margin);
}

/* 50 / 50 split with 20 px gap (per Figma + user spec). */
.philosophy__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: start;
}

/* Left · title block — no longer needs to be sticky (pin handles it). */
.philosophy__left {
  align-self: start;
}

.philosophy__title {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-white);
	    width: 85%
}

/* Right column is the "window" the stream slides through.
   All four mask stops (top fade band + solid + bottom fade) are set by
   JS based on paragraph positions. The CSS values are fallbacks. */
.philosophy__right {
  position: relative;
  overflow: hidden;
  height: var(--window-h, 80vh);
  -webkit-mask-image: linear-gradient(
                        to bottom,
                        transparent 0px,
                        black            var(--mask-top-end,    32px),
                        black            var(--mask-solid-end,  78%),
                        transparent      var(--mask-fade-end,  100%)
                      );
          mask-image: linear-gradient(
                        to bottom,
                        transparent 0px,
                        black            var(--mask-top-end,    32px),
                        black            var(--mask-solid-end,  78%),
                        transparent      var(--mask-fade-end,  100%)
                      );
}

/* Stream · stacked paragraphs · JS translates --stream-y on scroll
   so each paragraph passes through the window's top. transform is
   eased via a tiny transition for sub-frame smoothing.              */
.philosophy__stream {
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-32);
  transform: translateY(var(--stream-y, 0px));
  will-change: transform;
}

/* Word-by-word reveal · each .word inside a .philosophy__text fades in
   based on the paragraph's --approach (0..1) and its own --word-i.
   Approach is 0 when paragraph just enters the visible zone from the
   bottom, 1 when it sits at the top (active). The formula leaves a
   small fade window so the last word still resolves at approach = 1. */
.philosophy__text .word {
  --wt:          calc(var(--word-i, 0) / var(--word-total, 1));
  --threshold:   calc(var(--wt) * 0.75);
  --word-reveal: clamp(
                   0,
                   calc((var(--approach, 0) - var(--threshold)) * 4),
                   1
                 );
  display: inline-block;
  opacity: var(--word-reveal);
  transition: opacity 140ms ease-out;
}

.philosophy__text {
  margin: 0;
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_xl);
  color: var(--neutral-white-60);
}

.philosophy__text--active {
  color: var(--brand-neural-mint);
}

/* ============================================================
   SECTION 5 · EXCEPTION (mint banner with split statement)
   This section is the exception to the standard padding rule:
   it has 120 padding on BOTH top and bottom (gap to neighbours
   will be 120 + 120 = 240 instead of 120). Content area = 300px.
   Figma: 1131:3843 (Image)
   ============================================================ */

.exception {
  background-color: var(--brand-neural-mint);
  padding: var(--responsive-spacing-120) var(--margin-margin);
  /* Corner pixels now handled by the shared CORNER PIXEL RULE above */
}

/* 12-column grid (from UI Kit · 02 layout grid).
   Left text: cols 1–5 · Arrow: col 6 · Right text: cols 7–12.
   Inner content area is exactly 300 px tall.                  */
.exception__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: center;
  min-height: 300px;
}

.exception__left   { grid-column: 1 / 6; }
.exception__arrow  { grid-column: 6 / 7; justify-self: center; }
.exception__right  { grid-column: 7 / -1; }

.exception__left {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
  color: var(--neutral-black);
}

/* ── Rotating descriptor · "consulting boutique / software vendor / body shop"
   Single-line window with a vertical stack inside that translates up by 1lh
   per phrase. The 4th phrase is a duplicate of the 1st so the loop's 100% →
   0% jump is invisible.
   Per-keyframe timing: linear during dwells (no value change anyway),
   confident cubic-bezier on the transition segments.                       */
.exception__rotator {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  height: 1lh;
  line-height: 1;
}

.exception__rotator-inner {
  display: flex;
  flex-direction: column;
  animation: exception-rotate-phrases 9s infinite;
  will-change: transform;
}

.exception__phrase {
  display: block;
  height: 1lh;
  white-space: nowrap;
  line-height: inherit;
}

@keyframes exception-rotate-phrases {
  0%      { transform: translateY(0lh);  animation-timing-function: linear; }
  26.67%  { transform: translateY(0lh);  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  33.33%  { transform: translateY(-1lh); animation-timing-function: linear; }
  60%     { transform: translateY(-1lh); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  66.67%  { transform: translateY(-2lh); animation-timing-function: linear; }
  93.33%  { transform: translateY(-2lh); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%    { transform: translateY(-3lh); }
}

@media (prefers-reduced-motion: reduce) {
  .exception__rotator-inner    { animation: none; transform: translateY(0); }
  .exception__rotator          { height: auto; }
  .exception__phrase:not(:first-child) { display: none; }
}

.exception__right {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
  color: var(--neutral-black);
}

.exception__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-black);
}


/* ────── Primary CTA · solid-dark variant (Figma: Dark-CTA-Default)
   Solid dark chassis with white text + white arrow.
   Used on light backgrounds (e.g. soft-grey card).            */

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

/* Hover: arrow panel turns mint, glyph turns black */
.cta-primary--solid-dark:hover .cta-primary__arrow {
  background: var(--brand-neural-mint);
  color: var(--neutral-black);
}


/* ============================================================
   RESPONSIVE
   Tablet ≤ 1023px · Mobile ≤ 719px
   ============================================================ */

@media (max-width: 1023px) {
  .hero__top,
  .hero__bottom      { grid-template-columns: 1fr; gap: var(--responsive-spacing-24); }
  .hero__copy,
  .hero__lead-wrap,
  .hero__body        { grid-column: 1 / -1; }
  .hero__scroll      { grid-column: 1 / -1; justify-self: end; }

  /* Case section · stack card above image. Card sizes to its content
     and the image is height-capped so the stacked pair still fits one
     screen (overrides the side-by-side fixed height from the base rule). */
  .case__card,
  .case__media       { grid-column: 1 / -1; }
  .case__card        { height: auto; }
  .case__media       { height: clamp(220px, 34vh, 380px); }

  /* Manifesto · let images stay inline but smaller */
  .manifesto__image  { width: var(--space-120); height: var(--space-48); }

  /* Philosophy · stack columns at this breakpoint · pin still applies
     (the wrapper handles stickiness; left column is no longer sticky on its own). */
  .philosophy__grid  { grid-template-columns: 1fr; gap: var(--responsive-spacing-32); }

  /* Exception · stack vertically, arrow goes inline below left */
  .exception__inner  { grid-template-columns: 1fr; gap: var(--responsive-spacing-32); min-height: 0; }
  .exception__left,
  .exception__arrow,
  .exception__right  { grid-column: 1 / -1; }
  .exception__arrow  { justify-self: start; }

  /* Highlights · cards shrink, separator gap tightens */
  .highlights__card       { min-height: 0; padding: var(--responsive-spacing-24) 0; }
  .highlights__separator  { margin: 0; }

  /* Awards · stack 3 cards vertically on tablet */
  .awards__grid,
  .awards__ctas           { grid-template-columns: 1fr; }
  .awards__card           { min-height: 280px; }
}

@media (max-width: 719px) {
	.case {
    background: var(--neutral-white);
    padding: var(--responsive-spacing-80) var(--margin-margin) var(--responsive-spacing-120);
    --case-card-h: clamp(340px, 56vh, 560px);
}
.page.page-id-1902	.wwd-cap:after{
		width: 10px;
    height: 10px;
	}	
    article.highlights__mcard {
    display: block;
}
article.highlights__card--bottom.excerpt{
    padding:0 ;
}
article.highlights__card {
    display: none;
}
  .nav__actions      { gap: var(--space-8); }
  .hero              { min-height: 100vh; padding-bottom: var(--responsive-spacing-60); transform: none !important; }

  /* Corner transition pixels shrink to space-8 (8 px ≤ 10) on mobile */
  .case::before, .manifesto::before, .philosophy::before,
  .exception::before, .highlights::before, .awards::before,
  .impact::before, .ecosystem::before, .partners::before,
  .testimonials::before, .media::before, .site-footer::before,
  .case::after, .manifesto::after, .philosophy::after,
  .exception::after, .highlights::after, .awards::after,
  .impact::after, .ecosystem::after, .partners::after,
  .testimonials::after, .media::after, .site-footer::after {
    height: var(--space-20);
    background-size: var(--space-8) var(--space-8);
  }

  /* ====================================================
     MOBILE UX PASS · senior-designer review fixes.
     Only inside this @media block — desktop untouched.
     ==================================================== */

  /* CASE · tighter card */
  .case__card    { padding: var(--space-20); gap: var(--responsive-spacing-24); }

  /* MANIFESTO · images hidden on phones — text reveal animation only */
  .manifesto__inner  { gap: var(--space-16); width: 100%; overflow: hidden; }
  .manifesto__image  { display: none; }
  .manifesto__text,
  .manifesto__line   { font-size: var(--font-h3); line-height: var(--lh-h3); overflow-wrap: break-word; }

  /* EXCEPTION · drop the 300 px min-height (was creating empty space) */
  .exception__inner { min-height: 0; padding: var(--space-32) 0; }

  /* HIGHLIGHTS · hover-only image doesn't work on touch — remove,
     simplify layout to text + arrow side by side                  */
  .highlights__card                     { padding: var(--space-32) 0; }
  .highlights__card:hover               { background: transparent; }
  .highlights__card:hover::before       { opacity: 0; }
  .highlights__card:hover .cta-arrow--dark {
    background: var(--neutral-deep-black);
    color: var(--neutral-white);
  }
  
  .highlights__panel                    { grid-column: 1 / 9; }
  .highlights__card .cta-arrow          { grid-column: 9 / -1; }


  /* AWARDS · mobile carousel (Figma 527:5395)
       · cards scroll horizontally with snap, next card peeks
       · logos become visible and sit above the award text
       · dots below the track · CTAs stack vertically (gap-24)
       Mobile vertical rhythm is all 32px (title→cards→dots→CTAs).         */
  .awards__title { margin-bottom: var(--space-32); }

  .awards__grid {
    display: flex;
    flex-direction: row;
    gap: var(--space-12);
    margin-bottom: var(--space-32);   /* cards → dots */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .awards__grid::-webkit-scrollbar { display: none; }

  /* Card: fixed-ish width so the next one peeks; pt-0 so the number
     hugs the top (Figma inner pt-0, px-12, pb-12).                      */
  .awards__card {
    flex: 0 0 calc(100% - var(--space-40));
    min-height: 360px;
    padding: 0 var(--space-12) var(--space-12);
    justify-content: flex-start;
    gap: var(--space-32);
    scroll-snap-align: start;
  }

  /* Number hugs the top — restore a little top breathing room            */
  .awards__num { padding-top: var(--space-12); }

  /* Corner notch shrinks to 10px on mobile                               */
  .awards__card::before { width: 10px; height: 10px; }

  /* Logo: visible and in normal flow, pushed (with the text) to the
     bottom of the card via margin-top:auto — number stays at the top.   */
  .awards__logo {
    position: static;
    transform: none;
    opacity: 1;
    margin-top: auto;
    width: auto;
    max-width: 35%;
    height: auto;
    max-height: 116px;
  }

  /* Dots row under the track                                             */
  .awards__dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-32);   /* dots → CTAs */
  }
  .awards__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;       /* keep the square pixel aesthetic */
    background: var(--neutral-light-grey);
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    transition: width 200ms ease, height 200ms ease, background 200ms ease;
  }
  .awards__dot--active {
    width: 8px;
    height: 8px;
    background: var(--neutral-black);
  }

  /* CTAs stack vertically, gap-24                                        */
  .awards__ctas { flex-direction: column; gap: var(--space-24); align-items: flex-start; }

	
  /* IMPACT · 3-col grid becomes single column */
  .impact__grid                                    { grid-template-columns: 1fr; gap: var(--responsive-spacing-24); }
  .impact__left, .impact__image, .impact__right    { grid-column: 1 / -1; }
  .impact__title                                   { 
/* 	  margin-bottom: var(--responsive-spacing-32); */
	  margin-top : 20%;
	}

  
  /* ECOSYSTEM · mobile (Figma 527:5428): text on top, then a horizontal
     card carousel (rows → black cards), then a dots + logo bottom bar.
     Section becomes a column: [grid (text + carousel)] then [bottom bar],
     32px apart. The grid itself stacks text → carousel 60px apart.        */
  .ecosystem {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);          /* carousel → bottom bar */
    padding: var(--space-40) var(--margin-margin);
  }
  .ecosystem__grid {
    display: flex;
    flex-direction: column;
    gap: var(--responsive-spacing-60);   /* text → carousel */
  }
  /* Flatten left column so its head participates in the grid's flow;
     the desktop logo is hidden (a copy lives in the bottom bar).          */
  .ecosystem__left  { display: contents; }
  .ecosystem__logo  { display: none; }
  .ecosystem__head  { gap: var(--space-32); }

  /* Right column becomes the scroll-snap carousel track                   */
  .ecosystem__right {
    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;
  }
  .ecosystem__right::-webkit-scrollbar { display: none; }

  /* Each row → a black card: icon on top, text below, mint corner notch   */
  .ecosystem__row {
    flex: 0 0 calc(100% - var(--space-40));
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    gap: var(--space-40);
    padding: var(--space-40) var(--space-20) var(--space-20);
    min-height: 270px;
    background: var(--neutral-black);
    border: 0;
    scroll-snap-align: start;
  }
  .ecosystem__row:first-child { border-top: 0; }
  .ecosystem__row::before { width: 10px; height: 10px; opacity: 1; }  /* always-on mint notch */

  .ecosystem__icon {
    width: 38px;
    filter: grayscale(0);   /* coloured on mobile */
  }
  .ecosystem__text {
    font-size: var(--font-body_s);
    line-height: var(--lh-body_xxs);
  }

  /* Bottom bar · dots (left) + Anthropic logo (right)                     */
  .ecosystem__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ecosystem__dots { display: flex; align-items: center; gap: 6px; }
  .ecosystem__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--neutral-medium-grey);
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    transition: width 200ms ease, height 200ms ease, background 200ms ease;
  }
  .ecosystem__dot--active { width: 8px; height: 8px; background: var(--neutral-white); }
  .ecosystem__bar-logo { display: block; height: 14px; width: auto; } 
	
 /* PARTNERS · Figma 527:5445 · ticker stays a single scrolling line,
     hide decorative pattern, stack CTAs.                                  */
  .partners__panel                       { padding: var(--space-40) var(--space-20); }  /* Figma px-20 py-40 */
  .partners__panel::before               { width: 10px; height: 10px; }                 /* 10px notch on mobile */
  .partners__ticker                      { margin-top: var(--space-32); }               /* title → logos gap-32 */
  .partners__track img                   { height: 60px; margin-right: var(--space-40); }
  .partners__pattern                     { display: none; }
  .partners__ctas                        { flex-direction: column; gap: var(--space-24); align-items: flex-start; margin-top: var(--responsive-spacing-32); }


  /* TESTIMONIALS · swipe-able carousel, cards aligned to section margins.
     Card width leaves a small peek of the next card.                       */
  .testimonials__head        { flex-direction: column; gap: var(--space-24); align-items: flex-start; margin-bottom: var(--responsive-spacing-48); }
  .testimonials__grid        {
    display: flex;
    gap: var(--space-20);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .testimonials__grid::-webkit-scrollbar { display: none; }
  .testimonials__card  {
    scroll-snap-align: start;
    padding: 0;
    border-right: none;
  }
  .testimonials__foot        { margin-top: var(--responsive-spacing-48); }
  /* Highlight the FIRST card always (active state visible on first swipe) */
  .testimonials__card:first-child .testimonials__quote { filter: grayscale(0); }
  .testimonials__card:first-child .testimonials__text,
  .testimonials__card:first-child .testimonials__name  { color: var(--neutral-white); }
@media (max-width: 767px) {

    .media__grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        gap: 0 !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .media__grid::-webkit-scrollbar {
        display: none;
    }

           .media__card {
                       flex: 0 0 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            scroll-snap-align: start;
            margin-right: 10px;
        }
}
  /* MEDIA · swipe-able carousel, cards aligned to section margins.
     ~80% card width so the next card peeks.                          */
  .media__grid               {
    display: flex;
    gap: var(--space-20);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .media__grid::-webkit-scrollbar { display: none; }
  .media__card               {
    flex: 0 0 80%;
    scroll-snap-align: start;
    align-self: start;   /* reset the asymmetric desktop offset */
	gap: var(--space-12);  
	height : 390px; 
  }
  .media__card:nth-child(3)  { align-self: start; }

  /* Filter tabs scroll horizontally too — easy with no wrap */
  .media__filters            {
    overflow-x: auto;
    padding-bottom: var(--space-8);
    gap: var(--space-16);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .media__filters::-webkit-scrollbar { display: none; }
  .media__filter             { flex-shrink: 0; }
  .media__caption            { font-size: var(--font-body_s); line-height: var(--lh-body_s); }

  /* HIGHLIGHTS · mint pixel always visible (was hover-only) */
  .highlights__card::before  { opacity: 1; }

  /* AWARDS · show logo + mint pixel without hover */
  .awards__card::before      { opacity: 1; }
  .awards__logo              { opacity: 1; }

  /* ECOSYSTEM · reveal the mint accent inside the icon (was hover-only) */
  .ecosystem__icon           { filter: grayscale(0); }

  /* FOOTER · 2-col stack, bottom row stacks */
  .site-footer__cols    { grid-template-columns: 1fr 1fr; gap: var(--responsive-spacing-32) var(--space-20); }
  .site-footer__bottom  { flex-direction: column; align-items: flex-start; gap: var(--space-16);         border: none !important;
        margin: 0 !important;}
  .site-footer__legal   { flex-wrap: wrap; gap: var(--space-12) var(--space-20); }

  /* Mobile nav: only the hamburger menu shows. Hide search + Connect CTA. */
  .nav__icon--search,
  .nav__actions .cta-primary { display: none; }

  /* Mobile menu icon swap: hide desktop SVG, show mobile SVG */
  .nav__icon .nav__icon-desktop { display: none; }
  .nav__icon .nav__icon-mobile  { display: block; }

  /* Mobile · hero layout becomes a 2-column grid at the .hero__inner level
       Col 1 (9fr ≈ 90%): eyebrow+title header, lead, body — stacked rows
       Col 2 (1fr ≈ 10%): scroll arrow · spans the lead + body rows
     We flatten .hero__top and .hero__bottom with display:contents so their
     children participate directly in .hero__inner's grid.                 */
  .hero__top,
  .hero__bottom {
    display: contents;
  }

/*   .hero__inner {
    display: grid;
    grid-template-columns: 9fr 1fr;
    column-gap: var(--grid-gutter);
    row-gap: var(--responsive-spacing-14);
  } */

  /* Explicit placement on the grid */
  .hero__copy           { grid-column: 1 / -1; grid-row: 1; }
  .hero__lead-wrap      { grid-column: 1;      grid-row: 2; align-self: end; }
  .hero__body           {
    grid-column: 1; grid-row: 3;
    /* Pull body up by 30% of the row-gap → tightens the lead→body gap only */
    margin-top: calc(var(--responsive-spacing-32) * -0.3);
  }
  .hero__scroll--mobile {
	          order: 3;
    display: inline-flex;
    grid-column: 2;
    grid-row: 2 / 4;            /* spans lead row + body row */
    justify-self: end;
    align-self: end;            /* aligned to the bottom of the body row */
  }
  .hero__divider        { display: none; }

  /* Hide the original arrow inside hero__bottom — the mobile duplicate
     in col 2 is the one shown at this breakpoint. */
  .hero__bottom > .hero__scroll { display: none; }

  /* Mobile · hero shrinks to 99.99% of the dynamic viewport.
     vh fallback first, dvh second (modern browsers override). */
  .hero {
    min-height: 60vh;
    min-height: 60dvh;
  }

  /* Mobile-specific banner — swap the .hero::before image only.
     Gradient overlay + sizing + position + parallax all unchanged. */
  .hero::before {
    background-image:
      linear-gradient(
        180deg,
        var(--neutral-deep-black-60) 0%,
        transparent 25%,
        transparent 60%,
        var(--neutral-black) 100%
      ),
      url("./images/banner_mobile.jpg");
  }

  /* Mobile · Primary CTA shrinks:
       overall chassis height → fixed 40px (compartments stretch + center)
       pixel arrow → −40% size                                       */
  .cta-primary                { height: var(--space-40); }              /* 40px chassis */
  .cta-primary .pixel-arrow   { width: calc(var(--space-14) * 0.6); }   /* 14 → 8.4px */

  /* Case section · tighter card padding · Read More moves onto the image.
     Image keeps the tablet 16/9 aspect ratio (inherited from the
     max-width: 1023px block above) — only the CTA position changes.
     min-height restores the room the (now-hidden) .case__foot used to take. */
  .case__card        {
    padding: var(--responsive-spacing-32);
    gap: var(--responsive-spacing-40);
    min-height: calc(var(--space-120) * 2 + var(--space-60));   /* 300px · white space ↓ to ~60% */
  }
  /* Shorter image cap on phones so card + image still land in one screen. */
  .case__media       { height: clamp(170px, 26vh, 240px); }
  .case__cta--mobile {
    display: inline-flex;
    position: absolute;
    left:   var(--space-20);
    bottom: 20%;
    z-index: 1;
  }

  /* CASE carousel (mobile)
       · .case__grid is already a flex carousel (default rule above)
       · each slide stacks card → media vertically instead of side-by-side
       · section-level pager hides on mobile — dots take over navigation.   */
  .case__slide {
    display: flex;
    flex-direction: column;
	  height: 525px;
        flex: 0 0 90%;
        margin-right: 10px;
  }
	.home .case {
/*     padding-right: 0; */
}

  .case__pager { display: none; }
      .case__dots {
        display: flex;
        position: absolute;
        top: 100%;
        margin-bottom: 10px;
    }
  .case__dots  { display: flex; }
  .case__dot {
    width:  var(--space-8);
    height: var(--space-8);
    padding: 0;
    border: 0;
    background: var(--neutral-light-grey);
    cursor: pointer;
    transition: background 200ms ease;
  }
  .case__dot--active { background: var(--neutral-black); }

  /* Manifesto · hide inline images on mobile, let text flow naturally.
     Stack each phrase as its own block in a column, equal gaps everywhere:
       inner   → space-8 between rows
       row     → space-8 between phrases inside a row
     Net result: every visible line has the same vertical rhythm.        */
 
	
  /* Manifesto · phones use the dedicated image-free version; its phrases
     flow inline as one wrapping sentence. Desktop version is hidden. */
  .manifesto__inner--desktop { display: none; }
  .manifesto__inner--mobile  { display: block; width: 100%; overflow: hidden; }
  .manifesto__inner--mobile .manifesto__text,
  .manifesto__inner--mobile .manifesto__line { display: inline; overflow-wrap: break-word; }

  /* Philosophy · tighter gaps */
  .philosophy__stream { gap: var(--responsive-spacing-32); }
  /* Window height is set dynamically by JS — no mobile override needed. */
}



/* Footer  */
.site-footer__top{
      display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-footer__brand{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.site-footer__social{
    display:flex;
    gap:20px;
}


.site-footer__legal{
    display:flex;
    gap:30px;
	padding-top:1%;
}

.impact__controls { display: none; }

.impact__dots {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.impact__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  background: var(--neutral-white-60);
  cursor: pointer;
  transition: width 200ms ease, height 200ms ease, background 200ms ease;
}
.impact__dot--active {
  width: 8px;
  height: 8px;
  background: var(--neutral-white);
}
.impact__nav {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.impact__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: var(--space-14) var(--space-16);
  background: var(--neutral-deep-black);
  color: var(--neutral-white);
  border: 0;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.impact__nav-btn:hover { background: var(--brand-neural-mint); color: var(--neutral-black); }
.impact__nav-btn--prev .pixel-arrow { transform: rotate(180deg); }


@media (max-width: 719px) {
  .impact { height: auto; }
  .impact__pin {
    position: static;
    height: auto;
    min-height: 0;
    padding: var(--responsive-spacing-0) var(--margin-margin);
  }
  .impact__title { margin-bottom: var(--responsive-spacing-120); text-align: left; }

  /* All slides share ONE grid cell, so the track is always as tall as the
     TALLEST slide — the height never fluctuates as you navigate. Only the
     active slide is visible; the others stay in flow (visibility:hidden)
     to hold the height. Content is top-aligned so the image/heading sit at
     the same position on every slide (no jump). */
  .impact__slides {
    flex: none;
    display: grid;
  }
  .impact__slide {
    grid-area: 1 / 1;
    position: static;
    inset: auto;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
  .impact__slide--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* No entrance/pixel-cloud animation on mobile — instant swap. */
  .impact__pixel-grid { display: none; }
  .impact__left .word,
  .impact__right .impact__lead .word,
  .impact__right > .impact__cta {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .impact__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-20);
    margin-top: var(--responsive-spacing-40);
    flex-shrink: 0;
	margin-bottom: var(--responsive-spacing-20)
  }
}
@media (min-width: 1024px) {
  .impact__right { padding-left: var(--space-20); }
}

/* ════════════════════════════════════════════════════════════════════
   AWARDS · MOBILE (≤719px) · STATIC CARDS — no animation
   Full, self-contained override (last in the cascade so it wins).
   Cards are static: number top, logo + caption at the bottom — all
   visible at rest. No hover reveal, no transforms, no transitions.
   Horizontal scroll-snap carousel + dots (Figma 527:5395 / 527:5401).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 719px) {
  .awards__title { margin-bottom: var(--space-32); }

  /* Horizontal carousel track (swipe-only; not an animation) */
  .awards__grid {
    display: flex;
    flex-direction: row;
    gap: var(--space-12);
    margin-bottom: var(--space-32);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .awards__grid::-webkit-scrollbar { display: none; }

  /* Card · 341px wide so ~9px of the next card peeks past the gap-12.
     Number top, logo + caption pushed to the bottom (justify flex-start
     + logo margin-top:auto). Static height, content always visible.     */
  .awards__card {
    position: relative;
    flex: 0 0 calc(100% - var(--space-20));
    min-height: 378px;
    height: auto;
    padding: 0 var(--space-12) var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-32);
    overflow: hidden;
    scroll-snap-align: start;
  }

  /* Corner notch · 10px soft-grey pixel, top-right */
  .awards__card::before { width: 10px; height: 10px; }

  /* Number · body_m slate-grey, hugs the top */
  .awards__num {
    padding-top: var(--space-12);
    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-slate-grey);
  }

  /* Logo · STATIC, on top of the caption, pushed to the card bottom.
     Explicitly kill the desktop hover transform + transition.           */
  .awards__logo {
    position: static;
    transform: none;
    opacity: 1;
    transition: none;
    margin-top: auto;
    width: auto;
    max-width: 70%;
    height: auto;
    max-height: 116px;
    object-fit: contain;
    object-position: left center;
    pointer-events: none;
  }

  /* Caption · STATIC, directly below the logo, always visible.
     body_l charcoal (Figma I527:5401;1218:870).                         */
  .awards__content {
    position: static;
    transform: none;
    opacity: 1;
    transition: none;
    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-charcoal);
  }

  /* Belt-and-braces · no movement even if a hover/focus fires on touch */
  .awards__card:hover .awards__logo,
  .awards__card:hover .awards__content,
  .awards__card:focus-within .awards__logo,
  .awards__card:focus-within .awards__content {
    transform: none;
  }

  /* Dots · square pixels under the track, pinned to the LEFT edge (Figma
     527:5404 shows the indicator left-aligned, not centered). width:100% +
     justify-content:flex-start + margin-right:auto force left alignment even
     if a parent tries to center the row.                                  */
  .awards__dots {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: var(--space-32);
    margin-right: auto;
  }
  .awards__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--neutral-light-grey);
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
  }
  .awards__dot--active {
    width: 8px;
    height: 8px;
    background: var(--neutral-black);
  }

  /* CTAs stack vertically */
  .awards__ctas {
    flex-direction: column;
    gap: var(--space-24);
    align-items: flex-start;
  }
}


/* ════════════════════════════════════════════════════════════════════
   ROOT BOX MODEL · mirror home.css
   home-new.css was missing this reset. Without border-box, every section
   that uses `padding: … margin-margin` (and the awards mobile cards with
   their padding) computes as content+padding and overflows the viewport —
   which collapses the awards carousel's next-card peek on mobile.
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }

/* Awards · mobile · ensure a clear peek of the next card (Figma 527:5401).
   Card is a touch under full width so the next card shows ~20px past the
   gap; scroll-snap keeps it tidy. */
@media (max-width: 719px) {
  .awards__card { flex: 0 0 calc(100% - var(--space-32)); }
}


/* The reused home.css .manifesto carries home's neighbor colors. In AAVA
   it sits banner(dark) → manifesto(white) → platform(white): black notch
   biting down from the banner, no band at the white→white join below.   */
.manifesto { --pixel-top: var(--neutral-black); --pixel-bottom: transparent; }

/* AAVA manifesto reveal · GREY → BLACK on scroll (Figma 641:9559).
   home.css reveals each char by fading opacity 0 → 1 (invisible → black).
   AAVA instead keeps every char visible in light-grey and darkens it to
   black as it's revealed — a colour interpolation driven by the same
   --char-reveal (0..1) the reveal script already sets. Scoped to aava.css
   so the home manifesto keeps its fade-in. */
.manifesto span.char {
  opacity: 1;
  color: color-mix(
            in srgb,
            var(--neutral-black) calc(var(--char-reveal) * 100%),
            var(--neutral-light-grey)
          );
}

/* Start every phrase grey too (the accent's black is only the revealed
   end-state now; the reveal handles the darkening). */
.manifesto__text--accent { color: var(--neutral-light-grey); }

body .cta-arrow--ghost       { background: transparent; color: var(--brand-neural-mint); !important }



.page-id-222 .hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--responsive-spacing-32);
  padding: var(--responsive-spacing-120) var(--margin-margin) var(--responsive-spacing-80);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.65) 30%,
    rgba(0, 0, 0, 0.25) 65%,
    rgba(0, 0, 0, 0) 100%
);
}
.page-id-222 .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;     
    background-color: var(--neutral-deep-black);
    overflow: hidden;
    isolation: isolate;
}
@media (max-width: 719px) {
   .page-id-222 .hero__inner {
        display: grid;
        grid-template-columns: 9fr 1fr;
        column-gap: var(--grid-gutter);
        row-gap: var(--responsive-spacing-32);
    }
	.philosophy-image img.philosophy-img {
   display:none;
}
}

.page-id-10 section.manifesto {
    --pixel-bottom: 0;
}

.page-id-10 section.case {
    --pixel-top: none;
    padding-top: 0;
}

.page-id-1643 .hero {
    position: relative;
    height: 70dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--responsive-spacing-120) var(--margin-margin) var(--responsive-spacing-80);
    background-color: var(--neutral-deep-black);
    overflow: hidden;
    isolation: isolate;
}

@media (max-width: 719px) {
    .page-id-1643 .hero {
        min-height: 70vh !important;
        max-height: 70vh !important;
    }
}

.page-id-1643  .hero__inner {
    display: block;
}
.page-id-1643  .hero__top {
    grid-template-columns: repeat(var(--grid-columns), fr);
}

.page-id-1258 .hero {
    position: relative;
    height: 60dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--responsive-spacing-120) var(--margin-margin) var(--responsive-spacing-80);
    background-color: var(--neutral-deep-black);
    overflow: hidden;
    isolation: isolate;
}

/*  */

.dbi,
.dbi *,
.dbi *::before,
.dbi *::after {
  box-sizing: border-box;
}

.dbi {
  background: var(--neutral-black);
  padding: var(--responsive-spacing-80) var(--margin-margin);
}

.dbi .dbi__title {
  margin: 0 0 var(--responsive-spacing-32);
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
  color: var(--neutral-white);
}

/* ── Track · horizontal scroll-snap carousel of pages ────────
   Each .dbi__page is one full-width "screen" of cards.
   With a single page (≤3 cards on desktop) there's nothing to
   scroll — the pager/dots stay hidden and it just reads as a
   static row. More pages become reachable by drag / pager / dots. */
.dbi .dbi__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dbi .dbi__track::-webkit-scrollbar { display: none; }

/* ── Page · holds however many cards fit one view (JS decides how
   many go in each page) and divides the width evenly between them.
   scroll-snap-align makes each page a full stop for the track.    */
.dbi .dbi__page {
  flex: 0 0 100%;
  display: flex;
  align-items: stretch;
  gap: var(--space-24);
  scroll-snap-align: start;
}

/* ── Card ────────────────────────────────────────────────────
   flex:1 1 0% splits its page's width evenly among however many
   cards share that page. min-width:0 lets it shrink below the
   image's intrinsic width instead of overflowing the flex item. */
.dbi .dbi-card {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  height: 450px;
  overflow: hidden;
  cursor: pointer;
  will-change: flex-grow;
  transition: flex-grow 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover-grow choreography — desktop only. Scoped to :hover on the
   PAGE (not the whole track), so growing one card only ever
   redistributes space among its own page-siblings — never fights
   with a neighboring page or the track's own overflow scroll.    */
@media (min-width: 1024px) {
  .dbi .dbi__page:hover .dbi-card {
    flex-grow: 0.8;
  }
  .dbi .dbi__page:hover .dbi-card:hover {
    flex-grow: 1.8;
  }
}

.dbi .dbi-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dbi .dbi-card:hover .dbi-card__image {
  transform: scale(1.04);
}

/* Bottom-up scrim so the caption stays legible over any image. */
.dbi .dbi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

.dbi .dbi-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--responsive-spacing-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);

}

/* No width constraint — the heading just wraps naturally to whatever
   width its card currently has: one line when the card is hovered
   (wide), two lines when it's a narrow, non-hovered sibling. That's
   the same behavior as the reference design.                        */
.dbi .dbi-card__heading {
  margin: 0;
  font-family: var(--typeface-primary);
  font-weight: var(--weight-plain-regular);
  font-size: var(--font-body_l);
  line-height: var(--lh-body_l);
  color: var(--neutral-white);
}

/* ── Reveal-on-hover content · body copy + CTA ──────────────── */
/* max-height:0 + overflow:hidden means this takes up NO space at all
   while hidden — not just invisible. That's the key fix: previously
   (opacity:0 while still `display:flex`) it stayed in the layout, so
   a narrow sibling card would force this hidden text to re-wrap into
   many more lines, inflating its height and — since the overlay is
   bottom-anchored — silently pushing the heading upward even though
   nothing about it was visibly changing. Collapsing it to zero height
   when hidden means a non-hovered card's height is just its heading,
   full stop, so every non-hovered card's heading lands at the exact
   same spot regardless of how much extra text it's hiding.           */
.dbi .dbi-card__extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 440px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: max-height 500ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 400ms ease,
              transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0ms, 0ms, 0ms;
}

.dbi .dbi-card:hover .dbi-card__extra {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms, 150ms, 150ms;
}


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

.dbi .dbi-card__cta {
  display: inline-flex;
  width: fit-content;
  color: var(--brand-neural-mint);
  font-family: var(--typeface-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--font-cta);
  line-height: var(--lh-cta);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 200ms ease;
}

.dbi .dbi-card__cta:hover {
  color: var(--neutral-white);
}

/* Inline variant — sits mid-sentence inside a .dbi-card__body
   paragraph (card 3's "AAVA is our agentic AI platform").       */
.dbi .dbi-card__cta--inline {
  display: inline;
}

/* ── Dot indicators · the only navigation control, on every
   breakpoint. Shown whenever there's more than one page
   (.dbi--paged set by JS).                            */
.dbi .dbi__dots {
  display: none;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--responsive-spacing-32);
}

.dbi.dbi--paged .dbi__dots {
  display: flex;
}

.dbi .dbi__dot {
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  border: 0;
  background: var(--neutral-slate-grey,#555);
  cursor: pointer;
  transition: background 200ms ease;
}

.dbi .dbi__dot--active {
  background: var(--neutral-light-grey,#ccc);
	  width: var(--space-8);
  height: var(--space-8);
	
}

/* Reduced motion · skip the grow/shrink and reveal animation. */
@media (prefers-reduced-motion: reduce) {
  .dbi .dbi-card,
  .dbi .dbi-card__image,
  .dbi .dbi-card__extra {
    transition: none;
  }
  .dbi .dbi__track {
    scroll-behavior: auto;
  }
}

/* ───────────────────────────── TABLET / MOBILE ─────────────────────────────
   One card per page (JS groups them 1-per-page below 1024px), so
   flex:1 1 0% already makes each card fill its page — drag/swipe +
   dots only (no pager, no hover-grow — there's no hover on touch).
   Body copy/CTA always visible.
   ----------------------------------------------------------------- */
/* ───────────────────────── TABLET / MOBILE ───────────────────────── */

@media (max-width: 1023px) {

  .dbi .dbi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    background: var(--neutral-deep-black);
    overflow: hidden;
  }

  /* Image comes on top */
  .dbi .dbi-card__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transform: none !important;
  }

  /* Remove desktop hover overlay */
  .dbi .dbi-card::before {
    display: none;
  }

  /* Content comes below image */
  .dbi .dbi-card__overlay {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    padding: var(--responsive-spacing-32);
    background: var(--neutral-deep-black);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .dbi .dbi-card__heading {
    margin: 0;
    max-width: 100%;
  }

  /* Show description + CTA always on mobile */
  .dbi .dbi-card__extra {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    max-width: 100%;
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
  }

  .dbi .dbi-card__body {
    margin: 0;
  }

  .dbi .dbi-card__cta {
    display: inline-flex;
    width: fit-content;
  }

  /* Dots visible */
  .dbi .dbi__dots {
    display: flex !important;
  }

}


/* ───────────────────────── SMALL MOBILE ───────────────────────── */

@media (max-width: 768px) {

  .dbi .dbi-card__image {
    height: 220px;
  }
	.page-id-5058 .ecosystem__logo {
    max-width: 100%;
}
	.page-id-3447 .dbi .dbi-card__heading{
		height:auto !important;
	}
  .dbi .dbi-card__overlay {
    padding: 24px 0;
	  gap:0;
  }
	.page.page-id-3447 article.dbi-card:after {
    position: absolute;
    content: "";
    background: var(--neutral-black);
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
}

}
/*  */
.page.page-id-1902 section.video_section:before{
	   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: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}
.page-id-1902 section.case: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;
}

section.video_section: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;
}

section.video_section {
    position: relative;
}

.page-id-1902 .philosophy::after {
    display: none;
}

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

.page-id-1902 section.dbi: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: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page-id-1902 .partners::after {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}

.page-id-1902 section.media {
    background: #fff;
}

.page-id-1902 .media::before {
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4) !important;
}
.page.page-id-1902 section.media:nth-of-type(4)::after, .page.page-id-1902 section.media:nth-of-type(4)::before {
    background-image: linear-gradient(#1a1a1a, #1a1a1a), linear-gradient(#1a1a1a, #1a1a1a);
}
.page-id-1902 .site-footer::before {
    display: none;
}


.page-id-1902 article.dbi-card: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 right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

/*  AAva 3*/
.page-id-1940 .mutiple-video__slide::before{
	background-position:top right !important;
}
.page-id-1940 .mutiple-video__slide::after{
	display:none;
}
span.cta-primary__arrow {
    background: var(--brand-neural-mint);
    color: #000 !important;
}
.page-id-1940 section.ecosystem {
    background: var(--neutral-black);
}
.page-id-1940 .ecosystem__row:hover {
    background: var(--neutral-deep-black);
}
.page-id-1940 .ecosystem__row li {
    list-style-type: square;
    margin-top: 10px;
}

.page-id-1940 .ecosystem__row ul {
    padding-left: 20px;
}
.page-id-1940 .trust__rows {
    display: none;
}

.page-id-1940 span.trust__icon {
    display: none;
}

.page-id-1940 .trust__list {
    flex-direction: row;
    gap: 0;
}

.page-id-1940 span.trust__divider {
    display: none;
}
.page-id-1940 .wwd-comm__inner {
    flex-direction: row;
}
@media (max-width: 719px){
	.page-id-1940 .wwd-comm__inner {
    flex-direction: column;
}
	.page-id-1940 .trust__list {
    flex-direction: column;
    gap: 0;
}
}
.page-id-1940  .ecosystem__row a {
    margin-top: 15px;
}
.page-id-1940 .ecosystem__row {
    align-items: flex-start;
}


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

.page-id-1940 section.platform: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-1940 section.platform.platform: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-id-1940 .mutiple-video::after {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) !important;
}

.page-id-1940 section.aava-gap {
    position: relative;
}

.page-id-1940 section.aava-gap: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-1940 .ecosystem::before {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}

.page-id-1940 section.aava-gap: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: top left, top right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

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

.page-id-1940 section#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(#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-1940 section#studios:before {
    content: "";
    position: absolute;
    bottom: -9px;
    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-1940 .work-cta::before {
    display: none;
}

@media (min-width: 1024px) {
.page-id-1940 .ecosystem__head {
    display: flex;
    flex-direction: column;
    gap: var(--responsive-spacing-32);
    position: sticky;
    top: 15%;
}
}

.page-id-2070 .section.video_section {
    background: var(--neutral-white);
    padding: var(--responsive-spacing-80) var(--margin-margin);
}

.nav__actions a.cta-primary.cta-primary--light:hover {background: var(--neutral-deep-black-60);}

.nav__actions a.cta-primary.cta-primary--light:hover span.cta-primary__arrow {
    background:var(--brand-neural-mint) !important;
}

.nav__actions a.cta-primary.cta-primary--light:hover span.cta-primary__arrow span.pixel-arrow {
    color: var(--neutral-deep-black);
}
.nav__icon--menu:hover .nav__toggle-state--hamburger .nav__chip {
    fill: var(--brand-neural-mint) !important;
    fill-opacity: 1 !important;
}
.page-id-1902 span.cta-primary__arrow {
    background: var(--neutral-deep-black );
    color: var(--neutral-white);
}

.page-id-1902 .cta-primary--solid-dark .pixel-arrow {
    color: var(--neutral-white);
}
.page-id-1902 .sp-cta .ctas a.cta-primary.cta-primary--mint.sp-cta__btn:hover {
    color: #fff;
}
.page-id-1902 .wwd-cap {
    position: relative;
}

.page-id-1902 .wwd-cap:after {
    position: absolute;
    content: "";
    background: #f4f4f4;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
}
.page-id-1902  .sp-cta .ctas span.cta-primary__arrow {
    background: var(--brand-neural-mint);
}
.page-id-1902 .sp-cta .ctas a.cta-primary.cta-primary--mint.sp-cta__btn:hover span.pixel-arrow {
    color: #000;
}

.page-id-1902  .cta-primary:hover .pixel-arrow{
    color: var(--neutral-black);
}

.page-id-1902 .cta-arrow--light {
    background: var(--neutral-white);
    color: var(--neutral-black);
}
.page-id-1902 .cta-arrow--dark {
    background: transparent;
    color: var(--neutral-white);
}
 @media (min-width: 1024px) {
.highlights-card-wrap {
    border-bottom: 1px solid var(--neutral-charcoal);
   padding: var(--responsive-spacing-40) 0 ;
}
}


 @media (max-width: 768px) {
.nav img {
    max-width: 59%;
    display: block;
}
button.nav__icon.nav__icon--search {
    background: var(--neutral-deep-black-60);
    padding: 6px;
}
	 button#menu-toggle {
    padding: 6px;
    background: var(--neutral-deep-black-60);
    display: flex;
    align-items: center;
    justify-content: center;
}

span.nav__toggle-state.nav__toggle-state--hamburger {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
	 .page-id-1902 section.media  nav.media__pager{
     display: none !important; 
}
.media__image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--space-12);
  height: var(--space-12);
  background: var(--neutral-soft-grey);
}
.page.page-id-1902  .hero {
    position: relative;
    overflow: hidden;
}
	     .hero > * {
        z-index: 9999999 !important;
    }
	 .hero::before {
		 z-index:99;
		 background:linear-gradient(180deg, var(--neutral-deep-black-60) 0%, transparent 25%, transparent 60%, var(--neutral-black) 100%), var(--hero-bg) !important;
		 
		 }
.page.page-id-1902 .hero::before {
content: "";
position: absolute;
inset: 0;
background: #000;
z-index: 9999999 !important;
pointer-events: none;
}

.page.page-id-1902 .hero > * {
    z-index: 2;
}
	 figure.case__media:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    background: #fff;
    width: 10px;
    height: 10px;
}

figure.case__media:before {
    position: absolute;
    content: "";
    top: 5%;
    right: 3%;
    background: #fff;
    width: 10px;
    height: 10px;
    z-index: 9;
}
	 .case::after, .manifesto::after, .philosophy::after,
.exception::after, .highlights::after, .awards::after, .impact::after, .ecosystem::after, .partners::after, .testimonials::after, .media::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  z-index: 5;
  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;
  background-size: var(--space-20) var(--space-20);
  background-repeat: no-repeat;
}
	 .ecosystem__icon {
    flex-shrink: 0;
    width: 38px;
    aspect-ratio: 1 / 1;
    height: auto;
    display: block;
    object-fit: contain;
    filter: grayscale(1);
    transition: filter 200ms ease;
    margin-left: 5%;
}
	ul#menu-terms-of-use {
    display: flex;
    flex-wrap: wrap;
}

footer.site-footer {
    padding: 20px !important;
}


}


.page-id-1902 .hero {
    position: relative;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--responsive-spacing-120) var(--margin-margin) var(--responsive-spacing-80);
    background-color: var(--neutral-deep-black);
    overflow: hidden;
}
.page-id-1902 a.cta-arrow.cta-arrow--dark.wwd-cap__arrow {
    display: none;
}
  .wwd-caps__inner_title {
    font-family: var(--typeface-primary);
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    color: var(--neutral-black);
        margin: 0 0 var(--responsive-spacing-60);
}
.page-id-1902  .wwd-caps__inner_title {
    font-family: var(--typeface-primary);
    font-weight: var(--weight-plain-regular);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    color: var(--neutral-black);
        margin: 0;
	text-align: center;
}
.page.page-id-1902 section.dbi: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, var(--pixel-bottom, #f4f4f4)), linear-gradient(#f4f4f4, var(--pixel-bottom, #f4f4f4));
    background-position: bottom left, bottom right;
    background-size: var(--space-20) var(--space-20);
    background-repeat: no-repeat;
}

.page.page-id-1902 section.wwd-caps:before {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}

.page.page-id-1902 section.ecosystem:before {
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
}
.page.page-id-1902  section.media:nth-of-type(10)::before {
    background-image:linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
}

.page.page-id-1902 section.partners:before {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}
.page.page-id-1902  section.media:nth-of-type(10)::after {
    background-image: linear-gradient(#f4f4f4, #f4f4f4), linear-gradient(#f4f4f4, #f4f4f4);
}
.page-id-1902 .hero__divider {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--neutral-white-20);
    display: none;
}
.page-id-1902 .wwd-cap:hover:after {
    background-color: var(--brand-dark-teal) !important;
}
.page-id-1902  .media__image {
    overflow: hidden;
}
.media__card:hover .media__image::after{
	    background-color: var(--brand-neural-mint) !important;

}
.page-id-1902  .media__image img {
    display: block;
    width: 100%;
    transition: transform 0.5s ease;
}

.page-id-1902  .media__image:hover img {
    transform: scale(1.08);
}
.page-id-1902 .media__card:hover .media__image::after {
    background-color: vvar(--brand-neural-mint) !important;
}
.page-id-1902 .wwd-cap:hover  .wwd-cap__desc {
    color: var(--brand-dark-teal) !important;
}
/* BASE */
.typing {
  display: block;
  overflow: hidden;
  white-space: nowrap;

  /* 🔥 KEY FIX */
  width: 100%;
  max-width: 0;
}

/* FIRST LINE */
.line1 {
  animation: typing1 2s steps(60, end) forwards;
  font-size: 50px !important;
}

/* SECOND LINE */
.line2 {
  color: #008567;
  animation: typing2 2s steps(75, end) 2s forwards;
  font-size: 50px;
}

/* ✅ ANIMATION */
@keyframes typing1 {
  from { max-width: 0; }
  to { max-width: 100%; }
}

@keyframes typing2 {
  from { max-width: 0; }
  to { max-width: 100%; }
}
/* THIRD LINE */
.line3 {
  animation: typing3 2s steps(40, end) 4s forwards;
      color: #008567;
    font-size:50px;
}

/* ANIMATION */
@keyframes typing3 {
  from { max-width: 0; }
  to { max-width: 100%; }
}

.page-id-5058 .ecosystem__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-soft-grey);
    width: 100%;
}