/* Ecosystem landing page — cleaned
   Preserves final cascade choices from the working file, while removing repeated historical overrides. */

body.ecosystem{
  --eco-ink: #16352b;
  --eco-ink-soft: #385247;
  --eco-muted: #5f6f66;

  --eco-surface: rgba(255,255,255,0.86);
  --eco-surface-2: rgba(255,255,255,0.72);

  --eco-border: rgba(22,53,43,0.12);
  --eco-border-soft: rgba(22,53,43,0.08);
  --eco-border-strong: rgba(22,53,43,0.20);

  --eco-green: #174c39;
  --eco-green-2: #275b46;
  --eco-olive: #7e8b4f;

  --eco-r-sm: 10px;
  --eco-r-md: 14px;
  --eco-r-lg: 18px;
  --eco-r-xl: 24px;
  --eco-r-pill: 999px;

  --eco-shadow-1: 0 8px 24px rgba(22,53,43,0.06);
  --eco-shadow-2: 0 18px 36px rgba(22,53,43,0.10);

  --eco-max: 1600px;
}

/* Quarto page reset */
body.ecosystem #quarto-content,
body.ecosystem #quarto-document-content,
body.ecosystem main.content,
body.ecosystem .page-layout-article,
body.ecosystem .page-columns,
body.ecosystem .page-full{
  min-width: 0;
}

body.ecosystem .page-columns,
body.ecosystem .page-full{
  display: block !important;
  grid-template-columns: 1fr !important;
}

body.ecosystem .ecosystem-page-wrap{
  width: 100%;
  max-width: var(--eco-max);
  margin: 0 auto;
  padding: 0 28px 48px;
}

body.ecosystem .ecosystem-main{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Hero */
body.ecosystem .sub-hero-ecosystem{
  background: url("../assets/heroimg1.png") center / cover no-repeat;
  padding-block: 2.5rem 2rem;
}

body.ecosystem .ecosystem-hero-inner{
  max-width: var(--eco-max);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, 0.98fr);
  gap: 28px;
  align-items: center;
}

body.ecosystem .ecosystem-hero-copy .sub-hero-title{
  color: white;
  margin-bottom: 0.85rem;
  line-height: 1.02;
  max-width: 11ch;
}

body.ecosystem .ecosystem-hero-copy .sub-hero-subtitle{
  color: white;
  font-size: 1.25rem;
  line-height: 1.45;
  max-width: 36ch;
  margin-bottom: 1rem;
}

body.ecosystem .ecosystem-hero-art img{
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 24px;
}

body.ecosystem .ecosystem-trust-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.8rem;
}

body.ecosystem .ecosystem-trust-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  min-height: 52px;
  border-radius: var(--eco-r-pill);
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--eco-border);
  box-shadow: var(--eco-shadow-1);
}

body.ecosystem .ecosystem-trust-icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(126,139,79,0.12);
  color: var(--eco-green);
  flex-shrink: 0;
}

body.ecosystem .ecosystem-trust-text{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--eco-ink);
}

/* Intro */
body.ecosystem .ecosystem-intro{
  margin: 1rem 0 1.2rem;
}

body.ecosystem .ecosystem-section-kicker{
  margin: 0 0 0.85rem;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eco-green);
}

body.ecosystem .ecosystem-stage-strip{
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(210px, 1fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

body.ecosystem .ecosystem-stage-strip::before{
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 48px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(23,76,57,0.05),
    rgba(23,76,57,0.22),
    rgba(126,139,79,0.20),
    rgba(23,76,57,0.05));
  z-index: -1;
}

body.ecosystem .ecosystem-stage-card{
  appearance: none;
  border: 1px solid var(--eco-border);
  background: rgba(255,255,255,0.66);
  border-radius: 22px;
  min-height: 150px;
  min-width: 0;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

body.ecosystem .ecosystem-stage-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--eco-shadow-1);
}

body.ecosystem .ecosystem-stage-card.is-active{
  transform: translateY(-2px);
  background: linear-gradient(180deg, #1b5b44, #174c39);
  border-color: rgba(255,255,255,0.12);
  box-shadow: var(--eco-shadow-2);
}

body.ecosystem .ecosystem-stage-badge{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  background: var(--eco-green);
  border: 2px solid rgba(255,255,255,0.16);
  flex: 0 0 auto;
}

body.ecosystem .ecosystem-stage-card.is-active .ecosystem-stage-badge{
  background: rgba(255,255,255,0.16);
}

body.ecosystem .ecosystem-stage-icon{
  color: var(--eco-green);
  font-size: 1.15rem;
  line-height: 1;
}

body.ecosystem .ecosystem-stage-card.is-active .ecosystem-stage-icon{
  color: #fff;
}

body.ecosystem .ecosystem-stage-label{
  display: block;
  font-size: 1.02rem;
  line-height: 1.22;
  font-weight: 800;
  color: var(--eco-ink);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

body.ecosystem .ecosystem-stage-card.is-active .ecosystem-stage-label{
  color: #fff;
}

/* Detail panel */
body.ecosystem .ecosystem-detail{
  background:
    radial-gradient(circle at top left, rgba(126,139,79,0.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border: 1px solid var(--eco-border);
  border-radius: 28px;
  padding: 20px;
  box-shadow: var(--eco-shadow-1);
  margin-bottom: 20px;
}

body.ecosystem .ecosystem-detail-main{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.95fr) minmax(220px, 0.55fr);
  gap: 18px;
  align-items: start;
}

body.ecosystem .ecosystem-detail-title{
  margin: 0 0 10px;
  font-size: clamp(2rem, 2.2vw, 3rem);
  line-height: 1.03;
  font-weight: 900;
  color: var(--eco-ink);
}

body.ecosystem .ecosystem-detail-kicker{
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--eco-green);
}

body.ecosystem .ecosystem-detail-text{
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--eco-ink-soft);
}

body.ecosystem .ecosystem-detail-list{
  margin: 0 0 16px;
  padding-left: 1.2rem;
  color: var(--eco-ink-soft);
}

body.ecosystem .ecosystem-detail-list li{
  margin-bottom: 0.45rem;
  line-height: 1.45;
}

body.ecosystem .ecosystem-detail-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.ecosystem .ecosystem-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border-radius: var(--eco-r-pill);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 800;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

body.ecosystem .ecosystem-cta.primary{
  background: var(--eco-green);
  color: #fff;
}

body.ecosystem .ecosystem-cta.primary:hover{
  background: var(--eco-green-2);
  transform: translateY(-1px);
}

body.ecosystem .ecosystem-cta.secondary{
  background: rgba(255,255,255,0.85);
  color: var(--eco-ink);
  border-color: var(--eco-border);
}

body.ecosystem .ecosystem-cta.secondary:hover{
  background: #fff;
  transform: translateY(-1px);
}

body.ecosystem .ecosystem-detail-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 14px;
  min-width: 0;
}

body.ecosystem .ecosystem-mini-card{
  background: rgba(255,255,255,0.76);
  border: 1px solid var(--eco-border-soft);
  border-radius: 20px;
  padding: 12px;
  min-width: 0;
  box-shadow: none;
}

body.ecosystem .ecosystem-mini-title{
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--eco-ink);
}

body.ecosystem .ecosystem-mini-card img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--eco-border-soft);
  background: rgba(0,0,0,0.03);
}

body.ecosystem .ecosystem-detail-links{
  display: grid;
  gap: 10px;
  align-content: start;
}

body.ecosystem .ecosystem-detail-links a{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px;
  text-decoration: none;
  color: var(--eco-ink);
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--eco-border-soft);
  border-radius: 16px;
  font-weight: 700;
  box-shadow: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

body.ecosystem .ecosystem-detail-links a:hover{
  background: #fff;
  transform: translateY(-1px);
  box-shadow: var(--eco-shadow-1);
}

body.ecosystem .ecosystem-detail-links i{
  color: var(--eco-green);
}

/* Evidence / why section */
body.ecosystem .ecosystem-why-flow{
  position: relative;
  margin: 56px 0 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.ecosystem .ecosystem-why-flow::before{
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: 5.2rem !important;
  bottom: -1.8rem !important;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248,250,246,0.55), rgba(255,255,255,0)) !important;
}

body.ecosystem .ecosystem-why-head{
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: 34px;
  align-items: start !important;
  padding-bottom: 22px !important;
  margin-bottom: 22px !important;
  border-bottom: 1px solid rgba(22,53,43,0.08) !important;
}

body.ecosystem .ecosystem-why-head h2,
body.ecosystem .ecosystem-impact-copy h2{
  margin: 0;
  max-width: 760px;
  color: var(--eco-ink);
  font-size: clamp(1.8rem, 2.4vw, 3rem);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.035em;
}

body.ecosystem .ecosystem-why-head p{
  margin: 0;
  color: var(--eco-ink-soft);
  font-size: 1.06rem;
  line-height: 1.55;
}

body.ecosystem .ecosystem-why-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, 0.58fr) !important;
  gap: 26px !important;
  align-items: stretch;
}

body.ecosystem .ecosystem-why-mosaic{
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-auto-rows: 150px !important;
  gap: 12px !important;
}

body.ecosystem .ecosystem-why-mosaic::before{
  content: "";
  position: absolute;
  inset: 22px 10px 10px 10px !important;
  z-index: -2;
  pointer-events: none;
  opacity: 0.18 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='73' viewBox='0 0 84 73'%3E%3Cg fill='none' stroke='%23174c39' stroke-opacity='0.42' stroke-width='1'%3E%3Cpath d='M21 2 39 12.5v21L21 44 3 33.5v-21z'/%3E%3Cpath d='M63 2 81 12.5v21L63 44 45 33.5v-21z'/%3E%3Cpath d='M42 38 60 48.5v21L42 80 24 69.5v-21z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 84px 73px !important;
  background-position: 12px 6px !important;
  mask-image:
    radial-gradient(circle at 23% 34%, black 0 15%, transparent 30%),
    radial-gradient(circle at 56% 56%, black 0 18%, transparent 34%),
    radial-gradient(circle at 82% 28%, black 0 13%, transparent 28%) !important;
  -webkit-mask-image:
    radial-gradient(circle at 23% 34%, black 0 15%, transparent 30%),
    radial-gradient(circle at 56% 56%, black 0 18%, transparent 34%),
    radial-gradient(circle at 82% 28%, black 0 13%, transparent 28%) !important;
}

body.ecosystem .ecosystem-why-mosaic::after{
  content: "";
  position: absolute;
  inset: 88px 8% 80px 8% !important;
  z-index: -3;
  pointer-events: none;
  opacity: 0.26 !important;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(23,76,57,0.12) 7% 34%, transparent 34% 43%, rgba(23,76,57,0.10) 43% 70%, transparent 70%),
    linear-gradient(180deg, transparent 0 30%, rgba(23,76,57,0.08) 30% 58%, transparent 58% 72%, rgba(23,76,57,0.06) 72% 100%);
}

body.ecosystem .ecosystem-why-tile{
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0;
  padding: 0 !important;
  border-radius: 24px !important;
  border: 1px solid rgba(22,53,43,0.085) !important;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 12px 30px rgba(22,53,43,0.055) !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.ecosystem .ecosystem-why-tile:hover{
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,0.94) !important;
}

body.ecosystem .ecosystem-why-tile::after,
body.ecosystem .ecosystem-why-tile > i{
  display: none !important;
}

body.ecosystem .ecosystem-why-thumb{
  width: 100% !important;
  max-width: none !important;
  height: 42% !important;
  min-height: 86px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(23,76,57,0.06) !important;
  position: relative;
  overflow: hidden;
}

body.ecosystem .ecosystem-why-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.28));
  pointer-events: none;
}

body.ecosystem .ecosystem-why-thumb img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  opacity: 0.98 !important;
  filter: saturate(0.9) contrast(0.98) !important;
}

body.ecosystem .ecosystem-why-number{
  position: absolute;
  top: 14px !important;
  left: 18px !important;
  right: auto !important;
  z-index: 5 !important;
  color: #fff !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.46) !important;
}

body.ecosystem .ecosystem-why-tile h3,
body.ecosystem .ecosystem-why-tile p{
  padding-left: 20px !important;
  padding-right: 20px !important;
}

body.ecosystem .ecosystem-why-tile h3{
  margin: 18px 0 8px !important;
  max-width: 18rem;
  font-size: 1.1rem;
  line-height: 1.18;
  font-weight: 950;
  color: var(--eco-ink);
}

body.ecosystem .ecosystem-why-tile p{
  margin: 0 0 20px !important;
  color: var(--eco-muted);
  font-size: 0.98rem;
  line-height: 1.42;
}

/* Mosaic tile placement */
body.ecosystem .tile-field{
  grid-column: 1 / span 3 !important;
  grid-row: 1 / span 2 !important;
  min-height: auto !important;
}

body.ecosystem .tile-field .ecosystem-why-thumb{
  height: 48% !important;
  min-height: 170px !important;
}

body.ecosystem .tile-field .ecosystem-why-body{
  display: grid !important;
  grid-template-columns: minmax(155px, 0.42fr) minmax(0, 0.58fr) !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 20px 22px 22px !important;
}

body.ecosystem .tile-field .ecosystem-why-body h3,
body.ecosystem .tile-field .ecosystem-why-body p{
  padding: 0 !important;
  margin: 0 !important;
}

body.ecosystem .tile-field h3{
  font-size: clamp(1.45rem, 1.55vw, 2rem) !important;
  max-width: 14ch !important;
}

body.ecosystem .tile-field .ecosystem-why-body p{
  font-size: 0.95rem !important;
  line-height: 1.48 !important;
}

body.ecosystem .tile-labs{
  grid-column: 4 / span 2 !important;
  grid-row: 1 !important;
}

body.ecosystem .tile-library{
  grid-column: 6 / span 2 !important;
  grid-row: 1 / span 2 !important;
  background: rgba(245,247,242,0.9) !important;
}

body.ecosystem .tile-library .ecosystem-why-thumb{
  height: 42% !important;
  min-height: 130px !important;
}

body.ecosystem .tile-library h3{
  max-width: none !important;
  font-size: 1.08rem !important;
  line-height: 1.17 !important;
  margin-top: 18px !important;
}

body.ecosystem .tile-library p{
  font-size: 0.94rem !important;
  line-height: 1.42 !important;
  margin-bottom: 18px !important;
}

body.ecosystem .tile-models{
  grid-column: 4 / span 2 !important;
  grid-row: 2 / span 2 !important;
  background: rgba(250,251,248,0.88) !important;
}

body.ecosystem .tile-models .ecosystem-why-thumb{
  height: 48% !important;
  min-height: 150px !important;
}

body.ecosystem .tile-open{
  grid-column: 1 / span 2 !important;
  grid-row: 3 / span 2 !important;
}

body.ecosystem .tile-open .ecosystem-why-thumb{
  height: 46% !important;
  min-height: 120px !important;
}

body.ecosystem .tile-open h3{
  margin-top: 16px !important;
}

body.ecosystem .tile-open p{
  font-size: 0.91rem !important;
  line-height: 1.4 !important;
  margin-bottom: 18px !important;
}

body.ecosystem .tile-decisions{
  grid-column: 3 / span 5 !important;
  grid-row: 4 !important;
  min-height: 150px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 0.62fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: rgba(248,250,246,0.94) !important;
}

body.ecosystem .tile-decisions .ecosystem-why-thumb{
  order: initial !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 150px !important;
  margin: 0 !important;
}

body.ecosystem .tile-decisions h3{
  grid-column: 2 !important;
  align-self: end !important;
  max-width: 18rem !important;
  margin: 0 0 6px !important;
  padding: 0 26px 0 24px !important;
}

body.ecosystem .tile-decisions p{
  grid-column: 2 !important;
  align-self: start !important;
  max-width: 28rem !important;
  margin: 0 !important;
  padding: 0 26px 0 24px !important;
  font-size: 0.96rem !important;
  line-height: 1.42 !important;
}

/* Preview/video panel */
body.ecosystem .ecosystem-preview-panel{
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(22,53,43,0.96), rgba(23,76,57,0.92));
  color: #fff;
  box-shadow: 0 24px 54px rgba(22,53,43,0.17);
  overflow: hidden;
}

body.ecosystem .ecosystem-preview-kicker{
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eco-green);
}

body.ecosystem .ecosystem-preview-panel .ecosystem-preview-kicker{
  color: rgba(255,255,255,0.78);
}

body.ecosystem .ecosystem-preview-media img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--eco-border-soft);
}

body.ecosystem .ecosystem-preview-panel .ecosystem-preview-media img{
  aspect-ratio: 4 / 3.1;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
}

body.ecosystem .ecosystem-preview-meta h3{
  margin: 12px 0 6px;
  font-size: 1rem;
  font-weight: 900;
  color: var(--eco-ink);
}

body.ecosystem .ecosystem-preview-panel .ecosystem-preview-meta h3{
  color: #fff;
  font-size: 1.22rem;
}

body.ecosystem .ecosystem-preview-meta p{
  margin: 0 0 12px;
  color: var(--eco-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

body.ecosystem .ecosystem-preview-panel .ecosystem-preview-meta p{
  color: rgba(255,255,255,0.76);
}

body.ecosystem .ecosystem-preview-panel .ecosystem-cta.secondary{
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}

body.ecosystem .ecosystem-video-frame{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
}

body.ecosystem .ecosystem-video-frame video,
body.ecosystem .ecosystem-video-frame iframe{
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,0.22) !important;
}

body.ecosystem .ecosystem-preview-fallback{
  display: none !important;
}

body.ecosystem .ecosystem-video-note{
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  line-height: 1.48;
}

/* Impact section */
body.ecosystem .ecosystem-impact-editorial{
  margin: 0 0 26px;
  padding: 32px 0 10px;
  border-top: 1px solid var(--eco-border-soft);
}

body.ecosystem .ecosystem-impact-copy{
  display: grid;
  grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr) !important;
  gap: 28px;
  align-items: start !important;
  margin-bottom: 26px;
}

body.ecosystem .ecosystem-impact-ribbon{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--eco-border-soft);
  background: rgba(255,255,255,0.48);
}

body.ecosystem .ecosystem-impact-item{
  position: relative;
  padding: 24px 22px;
  min-height: 188px;
  background: transparent;
}

body.ecosystem .ecosystem-impact-item + .ecosystem-impact-item{
  border-left: 1px solid var(--eco-border-soft);
}

body.ecosystem .ecosystem-impact-item i{
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 1.6rem;
  color: var(--eco-green);
  background: rgba(23,76,57,0.08);
}

body.ecosystem .ecosystem-impact-item h3{
  margin: 0 0 8px;
  color: var(--eco-ink);
  font-size: 1.05rem;
  line-height: 1.18;
  font-weight: 950;
}

body.ecosystem .ecosystem-impact-item p{
  margin: 0;
  color: var(--eco-muted);
  font-size: 0.94rem;
  line-height: 1.42;
}

body.ecosystem .ecosystem-impact-item:nth-child(even){
  transform: translateY(18px);
}

body.ecosystem .ecosystem-impact-item:nth-child(odd)::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(126,139,79,0.42);
}

body.ecosystem .ecosystem-impact-graphic,
body.ecosystem .impact-hex{
  display: none !important;
}

/* Closing */
body.ecosystem .ecosystem-closing{
  margin-top: 18px;
}

body.ecosystem .ecosystem-closing-inner{
  background: linear-gradient(90deg, #163f31, #174c39 55%, #245340);
  padding: 22px 28px;
  border-radius: 22px;
  text-align: center;
}

body.ecosystem .ecosystem-closing-inner h2{
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 900;
  color: #fff;
}

body.ecosystem .ecosystem-closing-integrated{
  margin-top: 42px;
}

body.ecosystem .ecosystem-closing-integrated .ecosystem-closing-inner{
  position: relative;
  overflow: hidden;
  padding: 28px 32px;
}

body.ecosystem .ecosystem-closing-integrated .ecosystem-closing-inner::before{
  content: "";
  position: absolute;
  inset: auto 28px 22px 28px;
  height: 1px;
  background: rgba(255,255,255,0.32);
}

/* Responsive */
@media (max-width: 1450px){
  body.ecosystem .ecosystem-stage-strip{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  body.ecosystem .ecosystem-detail-main{
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.95fr);
  }

  body.ecosystem .ecosystem-detail-links{
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
  }

  body.ecosystem .ecosystem-why-layout{
    grid-template-columns: 1fr !important;
  }

  body.ecosystem .ecosystem-preview-panel{
    max-width: none;
  }

  body.ecosystem .ecosystem-impact-ribbon{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.ecosystem .ecosystem-impact-item:nth-child(even){
    transform: none;
  }

  body.ecosystem .ecosystem-impact-item:nth-child(4){
    border-left: 0;
  }

  body.ecosystem .ecosystem-impact-item:nth-child(n+4){
    border-top: 1px solid var(--eco-border-soft);
  }
}

@media (max-width: 1100px){
  body.ecosystem .ecosystem-hero-inner{
    grid-template-columns: 1fr;
  }

  body.ecosystem .ecosystem-stage-strip{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  body.ecosystem .ecosystem-detail-main{
    grid-template-columns: 1fr;
  }

  body.ecosystem .ecosystem-detail-cards{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  body.ecosystem .ecosystem-detail-links{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  body.ecosystem .ecosystem-why-head,
  body.ecosystem .ecosystem-impact-copy{
    grid-template-columns: 1fr !important;
  }

  body.ecosystem .ecosystem-why-mosaic{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
  }

  body.ecosystem .tile-field,
  body.ecosystem .tile-labs,
  body.ecosystem .tile-library,
  body.ecosystem .tile-models,
  body.ecosystem .tile-open,
  body.ecosystem .tile-decisions{
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.ecosystem .tile-field .ecosystem-why-body{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.ecosystem .tile-decisions .ecosystem-why-thumb{
    width: 100% !important;
    height: 42% !important;
    min-height: 120px !important;
  }

  body.ecosystem .tile-decisions h3,
  body.ecosystem .tile-decisions p{
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: none !important;
  }

  body.ecosystem .tile-decisions h3{
    margin-top: 18px !important;
  }
}

@media (max-width: 700px){
  body.ecosystem .ecosystem-page-wrap,
  body.ecosystem .ecosystem-hero-inner{
    padding-left: 18px;
    padding-right: 18px;
  }

  body.ecosystem .ecosystem-stage-strip,
  body.ecosystem .ecosystem-detail-cards,
  body.ecosystem .ecosystem-detail-links,
  body.ecosystem .ecosystem-why-mosaic,
  body.ecosystem .ecosystem-impact-ribbon{
    grid-template-columns: 1fr !important;
  }

  body.ecosystem .ecosystem-why-flow{
    margin-top: 36px !important;
  }

  body.ecosystem .ecosystem-why-tile,
  body.ecosystem .tile-field,
  body.ecosystem .tile-labs,
  body.ecosystem .tile-library,
  body.ecosystem .tile-models,
  body.ecosystem .tile-open,
  body.ecosystem .tile-decisions{
    min-height: 260px !important;
  }

  body.ecosystem .ecosystem-impact-item,
  body.ecosystem .ecosystem-impact-item + .ecosystem-impact-item,
  body.ecosystem .ecosystem-impact-item:nth-child(n+4){
    border-left: 0;
    border-top: 1px solid var(--eco-border-soft);
  }

  body.ecosystem .ecosystem-impact-item:first-child{
    border-top: 0;
  }
}

body.ecosystem .ecosystem-preview-panel{
  padding: 18px;
  min-height: 100%;
  box-sizing: border-box;
}

body.ecosystem .ecosystem-video-frame{
  width: 100%;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 20px;
}

body.ecosystem .ecosystem-video-frame iframe,
body.ecosystem .ecosystem-video-frame video{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

body.ecosystem .ecosystem-preview-meta{
  padding-top: 4px;
}