/* ============================================================
   Our Businesses / Ecosystem page — matches about-redesign vibe
   Relies on tokens + base from about-redesign.css
   ============================================================ */

/* ---------- Hero ---------- */
.biz-hero {
  padding-top: 172px;
}

.biz-hero .about-shell {
  width: min(1200px, 100%);
}

.biz-hero h1 {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 1.04;
}

.biz-hero h1 em {
  color: var(--about-orange);
  font-family: var(--about-display) !important;
  font-style: normal;
}

.biz-lede {
  margin: 26px 0 0;
  max-width: 600px;
  font-size: 19px;
  color: var(--about-muted);
}

.biz-hero-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
}

.biz-hero-strip figure {
  position: relative;
  height: 248px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--about-shadow);
}

.biz-hero-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.biz-hero-strip figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 18px 16px;
  background: linear-gradient(transparent, rgba(31, 12, 25, 0.82));
  color: #fff;
}

.biz-hero-strip figcaption strong {
  display: block;
  font-size: 16px;
}

.biz-hero-strip figcaption small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}

/* ---------- Section heads ---------- */
.biz-head {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}

.biz-head h2 {
  margin-top: 0;
}

.biz-head .biz-sub {
  margin: 16px auto 0;
  max-width: 640px;
  color: var(--about-muted);
  font-size: 18px;
  line-height: 1.5;
}

/* ---------- Feature rows (operating pillars) ---------- */
.biz-feature {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(30px, 4vw, 66px);
  align-items: center;
  margin-bottom: 30px;
}

.biz-feature:last-child {
  margin-bottom: 0;
}

.biz-feature-media {
  margin: 0;
  height: 472px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--about-shadow);
}

.biz-feature.reverse .biz-feature-media {
  order: 2;
}

.biz-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.biz-eyebrow {
  display: inline-block;
  color: var(--about-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.biz-feature-body h3 {
  margin-top: 16px;
  font-family: var(--about-display) !important;
  color: var(--about-maroon);
  font-size: clamp(30px, 2.7vw, 44px);
  font-weight: 500;
  line-height: 1.05;
}

.biz-feature-body > p {
  margin-top: 18px;
  max-width: 560px;
  color: var(--about-muted);
  font-size: 16px;
  line-height: 1.55;
}

.biz-feature-body > p + p {
  margin-top: 12px;
}

.biz-caps-title {
  margin: 30px 0 0;
  color: var(--about-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.biz-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.biz-caps li {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--about-ink);
  font-size: 15px;
  font-weight: 600;
}

.biz-caps .line-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

/* ---------- Per-business brand mark + explore CTA ---------- */
.biz-brandrow {
  display: flex;
  align-items: center;
  min-height: 54px;
  margin-bottom: 2px;
}

.biz-brandmark {
  height: 34px;
  width: auto;
  max-width: 196px;
  display: block;
}

.biz-brandmark.is-square {
  height: 54px;
  width: 54px;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(72, 38, 18, 0.18);
}

.biz-explore {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
  padding: 0 26px;
  min-height: 52px;
  border-radius: 999px;
  border: 1.6px solid var(--about-orange);
  background: transparent;
  color: var(--about-orange);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 280ms cubic-bezier(0.22, 1, 0.36, 1),
    color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.biz-explore span {
  font-size: 17px;
  line-height: 1;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.biz-explore:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .biz-explore:hover {
    background: var(--about-orange);
    color: #fff;
    box-shadow: 0 16px 32px rgba(237, 85, 36, 0.28);
  }
  .biz-explore:hover span {
    transform: translate(3px, -3px);
  }
}

/* ---------- Consumer brand cards ---------- */
.biz-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.biz-brand-card {
  display: grid;
  grid-template-rows: 320px auto;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--about-line);
  background: #fff;
  box-shadow: var(--about-shadow);
}

.biz-brand-card > figure {
  margin: 0;
  overflow: hidden;
}

.biz-brand-card > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.biz-brand-card-body {
  padding: 32px 34px 36px;
}

.biz-brand-logo {
  height: 36px;
  width: auto;
  margin-bottom: 18px;
}

.biz-brand-card h3 {
  margin-top: 12px;
  font-family: var(--about-display) !important;
  color: var(--about-maroon);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.08;
}

.biz-brand-card p {
  margin-top: 14px;
  color: var(--about-muted);
  font-size: 15px;
  line-height: 1.56;
}

/* ---------- Capability cards (private label / product dev / sourcing) ---------- */
.biz-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.biz-cap-card {
  position: relative;
  overflow: hidden;
  padding: 38px 34px 42px;
  border-radius: 22px;
  border: 1px solid var(--about-line);
  background: #fff;
  box-shadow: var(--about-shadow);
}

.biz-cap-card .card-icon {
  margin-bottom: 24px;
}

.biz-cap-card .biz-eyebrow {
  margin-bottom: 12px;
}

.biz-cap-card h3 {
  font-family: var(--about-display) !important;
  color: var(--about-maroon);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
}

.biz-cap-card p {
  margin-top: 16px;
  color: var(--about-muted);
  font-size: 15px;
  line-height: 1.56;
}

.biz-cap-card .biz-stat {
  display: block;
  margin-top: 24px;
  font-family: var(--about-display);
  font-size: 44px;
  line-height: 1;
  color: var(--about-orange);
}

.biz-cap-card .biz-stat small {
  display: block;
  margin-top: 6px;
  color: var(--about-muted);
  font-family: var(--about-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.biz-cap-card.maroon {
  border-color: transparent;
  background: linear-gradient(160deg, #7b0f50, #560833);
}

.biz-cap-card.green {
  border-color: transparent;
  background: linear-gradient(160deg, #184f3b, #0f3328);
}

.biz-cap-card.maroon h3,
.biz-cap-card.green h3 {
  color: #fff;
}

.biz-cap-card.maroon p,
.biz-cap-card.green p {
  color: rgba(255, 255, 255, 0.82);
}

.biz-cap-card.green .biz-stat small {
  color: rgba(255, 255, 255, 0.7);
}

.biz-cap-card.maroon .card-icon,
.biz-cap-card.green .card-icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ---------- CTA ---------- */
.biz-cta {
  background:
    radial-gradient(circle at 80% 18%, rgba(237, 85, 36, 0.16), transparent 32%),
    linear-gradient(150deg, var(--about-plum), #2c0820);
}

.biz-cta .about-shell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.biz-cta h2 {
  color: #fff !important;
  max-width: 18ch;
}

.biz-cta p {
  margin-top: 16px;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 17px;
}

.biz-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px;
  min-height: 56px;
  border-radius: 999px;
  background: var(--about-orange);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.biz-cta-btn:hover {
  transform: translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .biz-feature,
  .biz-feature.reverse {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .biz-feature.reverse .biz-feature-media {
    order: 0;
  }
  .biz-feature-media {
    height: 360px;
  }
  .biz-brand-grid {
    grid-template-columns: 1fr;
  }
  .biz-cap-grid {
    grid-template-columns: 1fr;
  }
  .biz-hero-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .biz-cta .about-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .biz-hero {
    padding-top: 134px;
  }
  .biz-hero-strip {
    grid-template-columns: 1fr;
  }
  .biz-caps {
    grid-template-columns: 1fr;
  }
  .biz-feature-media {
    height: 280px;
  }
}

/* ---------- Card motion: hover + reveal ---------- */
.biz-feature-media,
.biz-hero-strip figure,
.biz-brand-card > figure {
  overflow: hidden;
}

.biz-feature-media img,
.biz-hero-strip figure img,
.biz-brand-card > figure img {
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.biz-brand-card,
.biz-cap-card {
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .biz-feature-media:hover img,
  .biz-hero-strip figure:hover img {
    transform: scale(1.05);
  }
  .biz-brand-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 46px 100px rgba(72, 38, 18, 0.2);
  }
  .biz-brand-card:hover > figure img {
    transform: scale(1.05);
  }
  .biz-cap-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 48px 104px rgba(72, 38, 18, 0.26);
  }
}

/* Card reveal — a touch more pronounced than the text reveal */
.motion-ready .biz-brand-card.about-scale,
.motion-ready .biz-cap-card.about-scale,
.motion-ready .biz-feature-media.about-scale,
.motion-ready .biz-hero-strip figure.about-scale {
  transform: translate3d(0, 34px, 0) scale(0.965);
}

.motion-ready .biz-brand-card.about-scale.is-visible,
.motion-ready .biz-cap-card.about-scale.is-visible,
.motion-ready .biz-feature-media.about-scale.is-visible,
.motion-ready .biz-hero-strip figure.about-scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* ============================================================
   Ecosystem — "source to shelf" horizontal journey
   default = clean vertical stack (also the no-JS / mobile fallback)
   .is-horizontal (added by JS on desktop) = pinned side-scroll
   ============================================================ */

/* ---- intro (normal section above the journey) ---- */
.eco-journey-head {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(56px, 7vw, 92px) 24px clamp(6px, 1.4vw, 14px);
}
.eco-journey-head h2 {
  margin: 0;
  font-family: var(--about-display) !important;
  color: var(--about-maroon);
  font-size: clamp(28px, 2.9vw, 44px);
  font-weight: 500;
  line-height: 1.08;
}
.eco-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--about-orange);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.eco-kicker::before,
.eco-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(237, 85, 36, 0.55);
}

/* ---- journey shell ---- */
.eco-journey {
  position: relative;
  overflow: hidden;
  /* edges match the page paper so the band reads as one continuous section */
  background:
    radial-gradient(ellipse 56% 46% at 50% 48%, rgba(237, 85, 36, 0.05), transparent 72%),
    linear-gradient(180deg, #fbf7ef 0%, #f4ecdc 48%, #fbf7ef 100%);
}

.eco-rail {
  display: none;
}

/* ---- track + panels: DEFAULT vertical stack ---- */
.eco-track {
  display: flex;
  flex-direction: column;
  gap: clamp(42px, 6vw, 84px);
  padding: clamp(10px, 2vw, 26px) clamp(22px, 5vw, 70px) clamp(46px, 6vw, 88px);
}
.eco-panel {
  flex: 0 0 auto;
  width: 100%;
}
.eco-panel-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: clamp(30px, 4vw, 66px);
  align-items: center;
}

.eco-panel-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--about-shadow);
}
.eco-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eco-panel-num {
  position: absolute;
  left: 24px;
  top: 14px;
  z-index: 2;
  font-family: var(--about-display);
  font-size: clamp(56px, 5.6vw, 100px);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

.eco-panel-logo {
  height: 46px;
  width: auto;
  max-width: 210px;
  display: block;
  margin-bottom: 22px;
}
/* Kallada wordmark is wider (two-line lockup) — let it keep full height */
.eco-logo-kallada {
  max-width: 240px;
}
.eco-panel-logo.is-square {
  height: 58px;
  width: 58px;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(72, 38, 18, 0.16);
}

.eco-panel-cat {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  color: var(--eco-accent, var(--about-orange));
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eco-panel-cat::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--eco-accent, var(--about-orange));
}

.eco-panel-body h3 {
  margin: 0;
  font-family: var(--about-display) !important;
  color: var(--about-maroon);
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.04;
}
.eco-panel-body > p {
  margin: 16px 0 0;
  max-width: 520px;
  color: var(--about-muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.eco-panel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.eco-panel-pills li {
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--about-line);
  color: var(--about-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.eco-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 30px;
  padding: 0 30px;
  min-height: 56px;
  border-radius: 999px;
  background: var(--about-orange);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(237, 85, 36, 0.26);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eco-panel-cta span {
  font-size: 18px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.eco-panel-cta:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .eco-panel-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(237, 85, 36, 0.38);
  }
  .eco-panel-cta:hover span {
    transform: translateX(5px);
  }
  .eco-panel-media:hover img {
    transform: scale(1.05);
  }
}

.eco-hint {
  display: none;
}

/* ============================================================
   .is-horizontal — desktop pinned side-scroll (added by JS)
   ============================================================ */
.eco-journey.is-horizontal {
  height: 100vh;
  height: 100dvh; /* tracks the actual usable viewport (browser UI / short laptops) */
  display: flex;
  flex-direction: column;
}

.eco-journey.is-horizontal .eco-journey-head {
  flex: 0 0 auto;
  padding: clamp(72px, 9vh, 100px) 24px 0;
}
.eco-journey.is-horizontal .eco-journey-head h2 {
  font-size: clamp(23px, 2.3vw, 34px);
}
.eco-journey.is-horizontal .eco-rail {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: clamp(12px, 2vh, 24px);
  padding: 0 40px;
}
.eco-rail-list {
  display: flex;
  align-items: center;
  width: min(720px, 92vw);
  margin: 0;
  padding: 0;
  list-style: none;
}
.eco-rail-list .step {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--about-muted);
  transition: color 320ms ease;
}
.eco-rail-list .step b {
  font-family: var(--about-display);
  font-size: 19px;
  line-height: 1;
  color: var(--about-muted);
  transition: color 320ms ease;
}
.eco-rail-list .step span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eco-rail-list .seg {
  flex: 1;
  height: 2px;
  margin: 0 16px;
  background: rgba(109, 15, 77, 0.16);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.eco-rail-list .seg i {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: var(--fill, 0%);
  background: var(--about-orange);
}
.eco-rail-list .step.done,
.eco-rail-list .step.done b {
  color: var(--about-maroon);
}
.eco-rail-list .step.active,
.eco-rail-list .step.active b {
  color: var(--about-orange);
}

.eco-journey.is-horizontal .eco-track {
  flex: 1;
  flex-direction: row;
  gap: 0;
  padding: 0;
  will-change: transform;
}
.eco-journey.is-horizontal .eco-panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
}
.eco-journey.is-horizontal .eco-panel-inner {
  width: min(1160px, 86vw);
  padding-bottom: 2vh;
}
.eco-journey.is-horizontal .eco-panel-media {
  aspect-ratio: auto;
  height: min(58vh, 540px);
}

.eco-journey.is-horizontal .eco-hint {
  display: inline-flex;
  position: absolute;
  right: 38px;
  bottom: 22px;
  z-index: 5;
  align-items: center;
  gap: 9px;
  color: var(--about-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eco-hint .arrow {
  font-size: 15px;
  animation: ecoNudge 1.5s ease-in-out infinite;
}
@keyframes ecoNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* ---- short-viewport laptops: compress the pinned panel so nothing is clipped ---- */
@media (min-width: 981px) and (max-height: 860px) {
  .eco-journey.is-horizontal .eco-journey-head { padding-top: clamp(62px, 7vh, 84px); }
  .eco-journey.is-horizontal .eco-journey-head h2 { font-size: clamp(21px, 2vw, 30px); }
  .eco-journey.is-horizontal .eco-rail { margin-top: clamp(10px, 1.5vh, 18px); }
  .eco-journey.is-horizontal .eco-panel-inner { padding-bottom: 0; }
  .eco-journey.is-horizontal .eco-panel-media { height: min(50vh, 440px); }
  .eco-journey.is-horizontal .eco-panel-body h3 { font-size: clamp(26px, 2.4vw, 38px); }
  .eco-journey.is-horizontal .eco-panel-body > p { font-size: 15px; }
  .eco-journey.is-horizontal .eco-panel-pills { margin-top: 18px; }
  .eco-journey.is-horizontal .eco-panel-cta { margin-top: 22px; min-height: 50px; }
}
@media (min-width: 981px) and (max-height: 720px) {
  .eco-journey.is-horizontal .eco-journey-head { padding-top: 60px; }
  .eco-journey.is-horizontal .eco-journey-head h2 { font-size: 22px; }
  .eco-journey.is-horizontal .eco-rail { margin-top: 8px; }
  .eco-journey.is-horizontal .eco-panel-media { height: min(42vh, 340px); }
  .eco-journey.is-horizontal .eco-panel-logo { height: 38px; margin-bottom: 14px; }
  .eco-journey.is-horizontal .eco-panel-body h3 { font-size: 24px; }
  .eco-journey.is-horizontal .eco-panel-body > p { font-size: 14px; margin-top: 9px; }
  .eco-journey.is-horizontal .eco-panel-pills { margin-top: 13px; gap: 7px; }
  .eco-journey.is-horizontal .eco-panel-pills li { padding: 7px 13px; font-size: 12.5px; }
  .eco-journey.is-horizontal .eco-panel-cta { margin-top: 16px; min-height: 46px; }
  .eco-journey.is-horizontal .eco-hint { display: none; }
}

/* ---- stacked-mode responsive ---- */
@media (max-width: 980px) {
  .eco-panel-inner {
    grid-template-columns: 1fr;
  }
  .eco-panel-media {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 600px) {
  .eco-panel-logo {
    height: 40px;
  }
  .eco-panel-logo.is-square {
    height: 50px;
    width: 50px;
  }
  .eco-panel-num {
    font-size: 52px;
  }
}

/* v28 — retail panel: two CTAs side by side */
.eco-panel-cta-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.eco-panel-cta-row .eco-panel-cta { margin-top: 0; }

/* v30 — larger ecosystem heading per feedback */
.eco-journey-head h2 { font-size: clamp(34px, 3.8vw, 58px) !important; }
.eco-journey.is-horizontal .eco-journey-head h2 { font-size: clamp(30px, 3.1vw, 50px) !important; }

/* v40 — remove "Source to shelf" eyebrow + space out the step rail */
.eco-kicker { display: none !important; }
.eco-journey.is-horizontal .eco-rail { margin-top: clamp(30px, 5vh, 64px) !important; }
.eco-journey:not(.is-horizontal) .eco-rail { margin-top: clamp(24px, 3vw, 44px) !important; }
.eco-rail-list .seg { margin: 0 clamp(18px, 2.4vw, 36px) !important; }
.eco-rail-list .step { gap: 12px !important; }

/* v41 — remove the 01..05 step rail entirely */
.eco-rail { display: none !important; }

/* v46 — Retail panel: Tajriba + Tayn logos side by side above the heading */
.eco-panel-body .eco-panel-logos {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  margin-bottom: 22px;
}
.eco-panel-body .eco-panel-logos img { height: 42px; width: auto; display: block; }
.eco-panel-body .eco-panel-logos .eco-logo-tayn { height: 56px; }
.eco-journey.is-horizontal .eco-panel-body .eco-panel-logos { margin-bottom: 14px; }
.eco-journey.is-horizontal .eco-panel-body .eco-panel-logos img { height: 34px; }
.eco-journey.is-horizontal .eco-panel-body .eco-panel-logos .eco-logo-tayn { height: 48px; }

/* v49 — center the WHOLE block (heading + panel) vertically as one group, so
   "The businesses that move the ecosystem" heading always sits in the visible
   middle of the section while scrolling (never pinned at the top under the nav) */
.eco-journey.is-horizontal {
  justify-content: center !important;
  box-sizing: border-box;
  padding-top: clamp(48px, 7vh, 104px) !important;  /* nudge the centered block down a bit */
}
.eco-journey.is-horizontal .eco-journey-head {
  padding-top: 0 !important;
  padding-bottom: clamp(34px, 5vh, 68px) !important;  /* breathing room between heading and carousel */
}
.eco-journey.is-horizontal .eco-track { flex: 0 0 auto !important; }
.eco-journey.is-horizontal .eco-panel {
  height: auto !important;
  align-items: center !important;
}
.eco-journey.is-horizontal .eco-panel-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
.eco-journey.is-horizontal .eco-panel-media { height: min(56vh, 520px) !important; }
@media (min-width: 981px) and (max-height: 820px) {
  .eco-journey.is-horizontal .eco-panel-media { height: min(50vh, 420px) !important; }
}

/* v53 — vertical divider between the Tajriba and Tayn logos */
.eco-panel-body .eco-panel-logos { gap: clamp(14px, 1.6vw, 22px); }
.eco-panel-body .eco-panel-logos .eco-logo-sep {
  flex: 0 0 auto;
  width: 1px;
  align-self: center;
  height: 34px;
  background: rgba(109, 15, 77, 0.22);
}
.eco-journey.is-horizontal .eco-panel-body .eco-panel-logos .eco-logo-sep { height: 28px; }

/* Short-viewport fit: the horizontal ecosystem scroller tracks 100dvh, but its
   head padding floor eats into shallow screens. Trim it so the heading + rail
   stay visible on laptops/TVs with browser chrome + an OS taskbar. */
@media (min-width: 769px) and (max-height: 780px) {
  .eco-journey.is-horizontal .eco-journey-head { padding-top: clamp(40px, 5vh, 84px); }
}
@media (min-width: 769px) and (max-height: 620px) {
  .eco-journey.is-horizontal .eco-journey-head { padding-top: clamp(30px, 4vh, 60px); }
  .eco-journey.is-horizontal .eco-journey-head h2 { font-size: clamp(20px, 2vw, 30px); }
}

/* ============================================================
   v55 — short-viewport ecosystem page.
   (a) Hero heading: shrink on shallow screens so it clears the nav.
   (b) Horizontal ecosystem scroll: now enabled down to ~520px height
       (see ecosystem.js). Keep the "the ecosystem" head clear of the
       fixed nav and compact the pinned panel so a slide fits without
       clipping or reverting to the vertical stack.
   ============================================================ */
/* Hero top padding is handled by about-redesign.css (keeps it below the nav).
   Keep the heading width-based (readable on wide screens) with only a small
   trim on short heights — don't let it collapse from vh sizing. */
@media (min-width: 769px) and (max-height: 760px) {
  .biz-hero h1 { font-size: clamp(44px, 4.4vw, 68px); }
}
@media (min-width: 769px) and (max-height: 620px) {
  .biz-hero h1 { font-size: clamp(40px, 4vw, 60px); }
}

/* The base horizontal head sets padding-top:0, so when the section pins the
   "the ecosystem" title lands at y=0 under the ~99px fixed nav. Clear the nav
   on every horizontal screen (fixes the overlap on desktop and short laptops). */
.eco-journey.is-horizontal .eco-journey-head {
  padding-top: clamp(106px, 12vh, 132px) !important;
  padding-bottom: clamp(10px, 1.6vh, 24px) !important;
}
@media (min-width: 981px) and (max-height: 820px) {
  .eco-journey.is-horizontal .eco-journey-head { padding-top: 106px !important; }
  .eco-journey.is-horizontal .eco-journey-head h2 { font-size: clamp(34px, 3.4vw, 48px) !important; }
}
/* Very shallow: compact the whole pinned panel so a slide fits the screen. */
@media (min-width: 981px) and (max-height: 660px) {
  .eco-journey.is-horizontal .eco-journey-head { padding-top: 104px !important; padding-bottom: 8px !important; }
  .eco-journey.is-horizontal .eco-journey-head h2 { font-size: clamp(30px, 3vw, 42px) !important; }
  .eco-journey.is-horizontal .eco-panel-media { height: min(38vh, 280px) !important; }
  .eco-journey.is-horizontal .eco-panel-body h3 { font-size: clamp(20px, 3.2vh, 28px) !important; }
  .eco-journey.is-horizontal .eco-panel-body > p { font-size: 13px !important; margin-top: 7px !important; line-height: 1.4 !important; }
  .eco-journey.is-horizontal .eco-panel-pills { margin-top: 10px !important; gap: 6px !important; }
  .eco-journey.is-horizontal .eco-panel-pills li { padding: 6px 11px !important; font-size: 12px !important; }
  .eco-journey.is-horizontal .eco-panel-logo { height: 30px !important; margin-bottom: 8px !important; }
  .eco-journey.is-horizontal .eco-panel-num { font-size: clamp(40px, 8vh, 72px) !important; }
}