/* White studio setting for the data-driven company matching cube. */
body[data-design="ecosystem"] .matching-hero {
  --hero-gutter: max(5.5%, calc((100% - 1530px) / 2));
  background: #fff; min-height: 0; padding: 32px var(--hero-gutter) 80px;
  display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); align-items: center; isolation: isolate;
}
.matching-hero .hero-copy { padding-top: 0; max-width: 610px; min-width: 0; }
.matching-hero .eyebrow { color: #476581; font-size: 12px; letter-spacing: 1.65px; }
.matching-hero h1 { font-size: clamp(3.1rem,4.5vw,4.75rem); line-height: 1.07; letter-spacing: -.055em; margin-bottom: 27px; }
.matching-hero h1 em { color: #145baa; }
.matching-hero .lead { font-size: 18px; max-width: 410px; line-height: 1.75; color: #536477; }
.matching-hero .button { margin-top: 14px; gap: 24px; }
.matching-principles { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 31px; padding: 0; list-style: none; font-size: 12px; color: #526b82; }
.matching-principles li { display: flex; align-items: center; gap: 7px; }
.matching-principles li:before { content: '+'; color: #2979bc; font-size: 17px; line-height: 1; }
/* Keep the artwork in the content grid so wide windows cannot pull it away from the copy. */
.matching-stage { position: relative; width: 110%; max-width: 660px; min-width: 0; justify-self: center; margin: -40px -5% -60px; aspect-ratio: 1; }
/* Feather the visual into the white text area; retain crisp detail at the cube. */
.matching-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(90deg, #0000 0%, #00000005 4%, #00000029 9%, #00000099 16%, #000 27%, #000 83%, #000000db 88%, #00000066 94%, #0000 100%);
  -webkit-mask-image: linear-gradient(90deg, #0000 0%, #00000005 4%, #00000029 9%, #00000099 16%, #000 27%, #000 83%, #000000db 88%, #00000066 94%, #0000 100%);
}
.matching-art:before { content: ''; position: absolute; inset: 12% 3% 13%; background: radial-gradient(ellipse, #eaf3fc 0%,#f6faff88 44%,#fff0 70%); }
.matching-art:after { content: ''; position: absolute; height: 5%; width: 48%; left: 26%; bottom: 15%; background: #668bb121; filter: blur(16px); border-radius: 50%; }
.robot-hand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 4; will-change: transform; mask-image: linear-gradient(#000 0%,#000 72%,#0000 97%); }
.robot-hand-left { clip-path: inset(0 42.5% 0 0); transform-origin: 17% 83%; }
.robot-hand-right { clip-path: inset(0 0 0 57.5%); transform-origin: 87% 76%; }
.matching-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.matching-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 4; display: none; }
.scene-fallback .matching-poster, .matching-stage:not(.scene-ready) .matching-poster { display: block; }
.scene-fallback .robot-hand, .scene-fallback .matching-canvas { visibility: hidden; }
.scene-heading { position: absolute; top: 8%; left: 18%; right: 10%; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #526d88; font-size: 12px; letter-spacing: 1.5px; z-index: 5; }
.scene-heading span:last-child { color: #8294a8; letter-spacing: .6px; font-size: 12px; }
.match-callout { position: absolute; z-index: 5; padding: 13px 17px; background: #ffffffed; border: 1px solid #dce8f3; border-radius: 7px; box-shadow: 0 10px 32px #29577d0b; max-width: 190px; }
.match-callout small { display: block; color: #617b94; font-size: 12px; margin-bottom: 4px; }
.match-callout strong { display: block; color: #153d62; font-size: 14px; font-weight: 600; }
.match-demand { left: 3%; top: 32%; }
.match-opportunity { right: 4%; top: 58%; border-color: #afd5ec; }
.match-opportunity small { color: #126594; }
.matching-caption { position: absolute; left: 23%; right: 10%; bottom: 10%; z-index: 6; }
.matching-progress { display: flex; gap: 8px; margin-bottom: 12px; }
.matching-progress i { width: 30px; height: 3px; background: #dfe8f1; border-radius: 2px; }
.matching-progress i.active { background: #247fbd; }
.matching-state { margin: 0 0 6px; font-family: var(--display); font-size: 17px; line-height: 1.4; color: #193e61; letter-spacing: -.02em; }
.matching-state span { color: #7390a9; font-family: var(--body); font-size: 12px; margin-right: 10px; letter-spacing: .5px; }
.matching-caption>small { display: block; font-size: 12px; color: #6d7e90; }
.matching-hero .hero-footer { left: var(--hero-gutter); right: var(--hero-gutter); align-items: center; gap: 12px; padding-top: 19px; border-top: 1px solid #e5ebf2; bottom: 24px; }
.matching-hero .hero-footer>span { font-size: 12px; letter-spacing: 1.3px; }
@media(min-width:851px) { body[data-design="ecosystem"] .header { height: 84px; } }
/* Widen the square artwork independently of the compact content row. */
@media(min-width:1101px) {
  .matching-stage { width:132%; max-width:860px; height:560px; aspect-ratio:auto; margin:0 -16%; }
  .matching-art { inset:-96px 0 auto; aspect-ratio:1;
    mask-image:linear-gradient(90deg,#0000 0%,#00000029 9%,#00000099 16%,#000 27%,#000 83%,#000000db 88%,#00000066 94%,#0000 100%),linear-gradient(#000 0%,#000 66%,#0000 78%);
    -webkit-mask-image:linear-gradient(90deg,#0000 0%,#00000029 9%,#00000099 16%,#000 27%,#000 83%,#000000db 88%,#00000066 94%,#0000 100%),linear-gradient(#000 0%,#000 66%,#0000 78%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .matching-stage .approved-hero-note { left:62%; right:4%; bottom:12px; }
}
@media(max-width:1100px) {
  body[data-design="ecosystem"] .matching-hero { padding-top: 36px; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
  .matching-hero h1 { font-size: clamp(3.1rem,5.25vw,4.3rem); }
  .matching-stage { width: 110%; margin-top: -24px; margin-bottom: -24px; }
  .match-callout { padding: 10px 12px; max-width: 162px; }
  .match-demand { left: 5%; top: 29%; }
  .matching-hero .lead { max-width: 330px; font-size: 17px; }
}
@media(max-width:760px) {
  body[data-design="ecosystem"] .matching-hero { display: flex; flex-direction: column; min-height: 0; padding: 36px 6% 95px; }
  .matching-hero .hero-copy { padding-top: 0; max-width: 580px; }
  .matching-hero h1 { font-size: clamp(2.9rem,8.8vw,4rem); }
  .matching-hero .eyebrow { margin-bottom: 21px; font-size: 12px; letter-spacing: 1.1px; }
  .matching-hero .lead { max-width: 470px; font-size: 17px; }
  .matching-principles { margin-top: 23px; gap: 8px 16px; }
  .matching-stage { position: relative; top: auto; right: auto; width: 114%; max-width: 690px; flex-shrink: 0; margin: 5px -7% 0; align-self: center; }
  .scene-heading { top: 6%; left: 12%; right: 12%; }
  .match-demand { top: 28%; left: 5%; }
  .match-opportunity { right: 5%; }
  .match-callout { padding: 10px 12px; max-width: 165px; }
  .matching-caption { bottom: 1%; left: 12%; right: 12%; }
  .matching-hero .hero-footer { left: 6%; right: 6%; flex-wrap: wrap; }
  .matching-hero .hero-footer>span:first-child { width: 100%; }
  .matching-hero .hero-footer>span:nth-child(2) { display: block; }
  .matching-hero .hero-footer>a { margin-left: auto; }
}
@media(max-width:430px) {
  .matching-hero .button { font-size: 14px; gap: 16px; padding: 15px 18px; }
  .scene-heading span:last-child { display: none; }
  .scene-heading { top: 4%; }
  .match-callout { padding: 8px 10px; max-width: 139px; }
  .match-callout strong { font-size: 12px; }
  .match-callout small { font-size: 12px; margin-bottom: 2px; }
  .match-demand { top: 23%; left: 4%; }
  .match-opportunity { top: 63%; right: 5%; }
  .match-callout { display: none; }
  .matching-state { font-size: 15px; }
  .matching-caption { left: 10%; right: 9%; bottom: -1%; }
  .matching-stage { margin-bottom: 17px; }
}
@media(prefers-reduced-motion:reduce) { .robot-hand { will-change: auto; } }

/* Keep the smaller side-by-side composition clear of overlapping callouts. */
@media(min-width:761px) and (max-width:950px) {
  .matching-hero .match-callout { display: none; }
}

/* Approved river-version wording, paired with the current robotic artwork. */
.approved-hero-note>span { display:block; color:#526d88; font-size:12px; letter-spacing:1.5px; margin-bottom:10px; }
.approved-hero-note>p { color:#193e61; font-size:23px; line-height:1.3; margin:0; }
@media(min-width:951px) { .approved-hero-note { left:35%; } }
@media(max-width:760px) {
  .matching-hero h1 { font-size:clamp(2.5rem,8.8vw,4rem); }
  .matching-stage { margin-bottom:42px; }
  .approved-hero-note>p { font-size:20px; }
}

@media(min-width:761px) and (max-width:950px) {
  .approved-hero-note { bottom:0; }
}