.system-page { --system-accent: #4d8d7c; min-width: 0; background: var(--paper); }
.system-page .site-header { background: rgb(247 246 243 / 84%); }
.system-page-main { padding-top: var(--header-height); }
.system-page-hero {
  position: relative; min-height: 640px; overflow: hidden; display: grid; align-items: center; isolation: isolate;
  background-color: #f6f5f2;
  background-image:
    linear-gradient(90deg, rgb(246 245 242 / 100%) 0 38%, rgb(246 245 242 / 76%) 55%, rgb(246 245 242 / 8%) 78%),
    var(--system-banner-image, url("../images/regenerative-system.png"));
  background-position: center, 66% center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}
.system-page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(130deg, transparent 54%, color-mix(in srgb, var(--system-accent) 20%, transparent)); }
.system-page-hero::after { content: ""; position: absolute; z-index: -1; right: -12vw; bottom: -34vw; width: 68vw; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--system-accent) 28%, transparent); border-radius: 50%; }
.system-hero-inner { position: relative; padding-block: 60px; display: grid; align-items: center; }
.system-breadcrumb { margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 9px; color: #74757a; font-size: .55rem; }
.system-breadcrumb a:hover { color: var(--system-accent); }
.system-hero-copy { min-width: 0; max-width: 620px; }
.system-hero-copy .eyebrow { color: var(--system-accent); }
.system-hero-copy h1 { margin-bottom: 22px; font-size: clamp(4.5rem, 13vw, 8.4rem); }
.system-hero-copy > p:not(.eyebrow) { max-width: 500px; color: #45464c; font-size: .85rem; }
.system-hero-actions { margin-top: 31px; display: flex; flex-wrap: wrap; gap: 10px; }
.system-hero-seal { position: absolute; right: 3%; bottom: 10%; width: 118px; height: 118px; border: 1px solid color-mix(in srgb, var(--system-accent) 55%, transparent); border-radius: 50%; display: grid; place-items: center; color: var(--system-accent); background: rgb(255 255 255 / 28%); backdrop-filter: blur(12px); }
.system-hero-seal span { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; }
.system-hero-seal small { position: absolute; bottom: 19px; font-size: .44rem; font-weight: 700; letter-spacing: .13em; }
.system-intro { border-top: 1px solid rgb(16 17 22 / 7%); background: #f9f8f6; }
.system-intro-grid { padding-block: 78px; display: grid; gap: 50px; }
.system-intro-copy h2 { max-width: 660px; margin-bottom: 25px; font-size: clamp(3rem, 7vw, 5.3rem); }
.system-intro-copy > p:not(.eyebrow) { max-width: 620px; color: #58595f; font-size: .76rem; }
.system-principles { display: grid; gap: 9px; }
.principle-card { position: relative; min-height: 132px; padding: 24px 22px 22px 70px; border: 1px solid var(--line); background: rgb(255 255 255 / 45%); }
.principle-card > span { position: absolute; left: 21px; top: 24px; color: var(--system-accent); font-family: var(--font-display); font-size: 1.9rem; }
.principle-card h3 { margin: 0 0 7px; font-family: var(--font-body); font-size: .7rem; }
.principle-card p { margin: 0; color: #696a70; font-size: .59rem; }
.system-metrics { border-block: 1px solid var(--line); background: #f1efec; }
.system-metrics-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.system-metric { min-height: 116px; padding: 22px 15px; border-right: 1px solid var(--line); display: grid; place-content: center; text-align: center; }
.system-metric:nth-child(even) { border-right: 0; }
.system-metric strong { color: var(--system-accent); font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1; }
.system-metric span { margin-top: 6px; color: #66676d; font-size: .49rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.system-products { padding: 86px 0 102px; background: var(--paper); }
.system-products-head { margin-bottom: 38px; display: grid; gap: 22px; }
.system-products-head h2 { max-width: 700px; margin: 0; font-size: clamp(3.1rem, 7vw, 5.4rem); }
.system-products-head > p { max-width: 480px; margin: 0; color: #62636a; font-size: .69rem; }
.system-product-grid { border: 0; gap: 12px; }
.system-product-grid .product-card { border: 1px solid var(--line); border-radius: 7px; }
.system-product-grid .product-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); transform: scaleX(0); transition: var(--transition); }
.system-product-grid .product-card:hover::before { transform: scaleX(1); }
.other-systems { padding: 74px 0 86px; border-top: 1px solid var(--line); background: #f9f8f6; }
.other-systems-head { margin-bottom: 27px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.other-systems-head h2 { margin: 0; font-size: clamp(2.8rem, 6vw, 4.4rem); }
.other-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.other-system-card { min-height: 118px; padding: 16px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: rgb(255 255 255 / 45%); transition: var(--transition); }
.other-system-card:hover { border-color: var(--card-accent); background: white; transform: translateY(-3px); }
.other-system-card span { color: var(--card-accent); font-family: var(--font-display); font-size: 1.8rem; }
.other-system-card strong { font-size: .62rem; }
.other-system-card small { color: #77787c; font-size: .47rem; }
.system-page .precision-cta { border-radius: 0; }

@media (min-width: 600px) {
  .system-hero-seal { right: 8%; width: 148px; height: 148px; }
  .system-hero-seal span { font-size: 4rem; }
  .system-metrics-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .system-metric:nth-child(even) { border-right: 1px solid var(--line); }
  .system-metric:last-child { border-right: 0; }
  .system-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .other-system-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 800px) {
  .system-page-hero { min-height: 680px; }
  .system-intro-grid { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .system-products-head { grid-template-columns: 1fr auto; align-items: end; }
  .system-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system-product-grid .product-card { min-height: 430px; }
  .system-product-grid .product-card .photo-product { width: min(100%, 260px); }
}

@media (min-width: 1060px) {
  .system-hero-copy h1 { font-size: 8.2rem; }
  .system-hero-seal { right: 13%; bottom: 13%; width: 170px; height: 170px; }
  .system-hero-seal span { font-size: 4.7rem; }
  .other-system-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .system-page-hero {
    min-height: 650px;
    background-image:
      linear-gradient(90deg, rgb(246 245 242 / 100%) 0 55%, rgb(246 245 242 / 91%) 72%, rgb(246 245 242 / 42%) 100%),
      var(--system-banner-image, url("../images/regenerative-system.png"));
    background-position: center, 50% center;
    background-size: cover, auto 100%;
  }
  .system-hero-inner { padding-block: 46px; }
  .system-breadcrumb { margin-bottom: 28px; }
  .system-hero-copy { max-width: 100%; }
  .system-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(2.9rem, 15vw, 3.55rem);
    line-height: .88;
    overflow-wrap: normal;
    text-wrap: balance;
  }
  .system-hero-copy h1 [data-system-name] { display: inline-block; max-width: 100%; }
  .system-hero-copy > p:not(.eyebrow) { max-width: min(100%, 320px); }
  .system-hero-actions { width: min(100%, 320px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-hero-actions .button { min-width: 0; padding-inline: 9px; text-align: center; }
  .system-hero-seal { display: none; }
  .system-product-grid { grid-template-columns: 1fr; }
  .system-product-grid .product-card { min-height: 390px; }
}

/* Systems overview */
.systems-overview-page { min-width: 0; background: #e7e5e2; }
.systems-overview-page .site-header { background: rgb(245 243 240 / 78%); }
.systems-overview-hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: #f5f3f0;
}
.systems-overview-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(105deg, rgb(248 247 244 / 88%) 0 28%, rgb(248 247 244 / 42%) 43%, transparent 66%),
    url("../images/regenerative-system.png");
  background-position: center, 64% center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}
.systems-overview-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 79% 48%, rgb(255 255 255 / 26%), transparent 29%),
    linear-gradient(180deg, transparent 64%, rgb(245 243 240 / 28%));
}
.systems-overview-hero-inner { position: relative; padding: 40px 0 126px; }
.systems-overview-hero .system-breadcrumb { color: #74757a; }
.systems-overview-hero .system-breadcrumb a:hover { color: var(--violet); }
.systems-overview-hero-layout { display: grid; align-items: center; gap: 18px; }
.overview-hero-copy { position: relative; z-index: 2; max-width: 620px; }
.overview-hero-copy .eyebrow { color: var(--violet-dark); }
.overview-hero-copy h1 { max-width: 720px; margin-bottom: 22px; font-size: clamp(3.55rem, 17vw, 5.25rem); line-height: .86; text-wrap: balance; }
.overview-hero-copy > p:not(.eyebrow) { max-width: 470px; color: #34353b; font-size: clamp(.87rem, 1.25vw, 1rem); }
.systems-hero-carousel {
  --carousel-accent: var(--violet);
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  margin-inline: auto;
  touch-action: pan-y;
}
.systems-hero-stage {
  position: relative;
  width: 100%;
  height: clamp(280px, 82vw, 380px);
  isolation: isolate;
}
.systems-hero-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 7%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--carousel-accent) 22%, transparent), transparent 68%);
  filter: blur(16px);
  transform: translateX(-50%) scaleY(.54);
  transition: background-color 450ms ease;
}
.systems-hero-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% 2% 9%;
  border-radius: 32px;
  opacity: .72;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 24%, color-mix(in srgb, var(--carousel-accent) 72%, white) 0 4px, transparent 5px),
    radial-gradient(circle at 33% 72%, color-mix(in srgb, var(--carousel-accent) 58%, white) 0 5px, transparent 6px),
    radial-gradient(circle at 57% 19%, color-mix(in srgb, var(--carousel-accent) 48%, white) 0 4px, transparent 5px),
    radial-gradient(circle at 79% 66%, color-mix(in srgb, var(--carousel-accent) 66%, white) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 31%, color-mix(in srgb, var(--carousel-accent) 54%, white) 0 3px, transparent 4px),
    linear-gradient(31deg, transparent 0 31%, rgb(54 87 82 / 14%) 31.2% 31.5%, transparent 31.7% 100%),
    linear-gradient(145deg, transparent 0 47%, rgb(54 87 82 / 12%) 47.2% 47.5%, transparent 47.7% 100%);
}
.systems-hero-slide {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(24px, 0, 0) scale(.975);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.22, .72, .18, 1), visibility 0s linear 520ms;
  will-change: opacity, transform;
}
.systems-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}
.systems-hero-product {
  position: relative;
  z-index: 1;
  width: min(76%, 310px);
  height: 94%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 30px 28px rgb(18 35 32 / 18%));
  user-select: none;
  -webkit-user-drag: none;
}
.systems-hero-pagination {
  min-height: 44px;
  margin-top: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
}
.systems-hero-dot {
  flex: 1 1 36px;
  min-width: 0;
  max-width: 44px;
  width: auto;
  height: 44px;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.systems-hero-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgb(41 34 79 / 35%);
  transition: width 240ms ease, background-color 240ms ease;
}
.systems-hero-dot:hover::before { background: var(--carousel-accent); }
.systems-hero-dot[aria-current="true"]::before { width: 22px; background: var(--carousel-accent); }
.systems-hero-dot:focus-visible { outline: 2px solid var(--carousel-accent); outline-offset: -8px; border-radius: 999px; }
.overview-map { position: relative; z-index: 5; padding: 0 0 70px; background: var(--paper); }
.overview-discovery-panel { margin-top: -72px; padding-bottom: 45px; border-radius: 17px; }
.overview-discovery-panel .purpose-copy { padding-bottom: 0; }
.overview-discovery-panel .purpose-copy h2 { font-size: clamp(2.7rem, 6vw, 4.4rem); }
.overview-discovery-panel .systems-area { padding-bottom: 0; }
.overview-system-grid .system-card { min-height: 145px; }
.systems-overview-page .overview-system-banner {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(44 92 84 / 14%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 83% 19%, rgb(255 255 255 / 72%) 0 2px, transparent 3px),
    radial-gradient(circle at 67% 72%, rgb(255 255 255 / 62%) 0 4px, transparent 5px),
    radial-gradient(circle at 24% 78%, rgb(255 255 255 / 65%) 0 3px, transparent 4px),
    linear-gradient(120deg, #dce9e5 0%, #c9ddd7 47%, #ebf2f0 100%);
  box-shadow: 0 22px 48px rgb(31 48 45 / 10%);
}
.systems-overview-page .overview-system-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .75;
  background:
    radial-gradient(circle at 8% 22%, rgb(46 112 101 / 38%) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 64%, rgb(46 112 101 / 28%) 0 5px, transparent 6px),
    radial-gradient(circle at 51% 27%, rgb(46 112 101 / 31%) 0 3px, transparent 4px),
    radial-gradient(circle at 73% 57%, rgb(46 112 101 / 34%) 0 5px, transparent 6px),
    radial-gradient(circle at 94% 29%, rgb(46 112 101 / 28%) 0 4px, transparent 5px),
    linear-gradient(27deg, transparent 0 32%, rgb(44 93 84 / 15%) 32.2% 32.5%, transparent 32.7% 100%),
    linear-gradient(151deg, transparent 0 53%, rgb(44 93 84 / 13%) 53.2% 53.5%, transparent 53.7% 100%);
}
.systems-overview-page .overview-system-banner::after {
  content: none;
}
.overview-product-ensemble {
  position: absolute;
  z-index: 1;
  inset: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.overview-product-ensemble img {
  flex: 0 1 14.285%;
  width: 14.285%;
  min-width: 0;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 16px rgb(25 55 50 / 15%));
  user-select: none;
  -webkit-user-drag: none;
}
.overview-metrics { color: var(--ink); background: #efedea; border-block: 1px solid var(--line); }
.overview-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overview-metrics-grid > div { min-height: 130px; padding: 20px 8px; border-right: 1px solid var(--line); display: grid; place-content: center; text-align: center; }
.overview-metrics-grid > div:last-child { border-right: 0; }
.overview-metrics strong { color: var(--violet-dark); font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 500; line-height: 1; }
.overview-metrics span { margin-top: 7px; color: #66676d; font-size: .47rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.overview-organization { padding: 86px 0; background: #f8f7f5; }
.overview-organization-grid { display: grid; gap: 42px; }
.overview-organization h2 { margin-bottom: 23px; font-size: clamp(3.3rem, 7vw, 5.6rem); }
.overview-organization p { max-width: 620px; color: #5c5e64; font-size: .72rem; }
.overview-principles { display: grid; gap: 9px; }
.overview-principles article { padding: 22px; border: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; background: white; }
.overview-principles article > span { grid-row: 1 / 3; color: #9b8140; font-size: .55rem; font-weight: 700; }
.overview-principles h3 { margin: 0 0 5px; font-family: var(--font-body); font-size: .68rem; }
.overview-principles p { margin: 0; font-size: .58rem; }
.overview-blends-section { padding: 84px 0 100px; color: white; background: #0c1929; }
.overview-blends-head { margin-bottom: 33px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.overview-blends-head .eyebrow { color: #d0b258; }
.overview-blends-head h2 { margin: 0; font-size: clamp(3rem, 6vw, 5rem); }
.overview-blends-head .text-link { color: white; }
.overview-blends-grid { display: grid; gap: 9px; }
.overview-blend { position: relative; min-height: 190px; padding: 22px; border: 1px solid rgb(255 255 255 / 12%); background: rgb(255 255 255 / 4%); }
.overview-blend::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--blend-accent); }
.overview-blend > span { color: var(--blend-accent); font-size: .48rem; font-weight: 700; letter-spacing: .08em; }
.overview-blend h3 { margin: 22px 0 7px; color: white; font-family: var(--font-body); font-size: .78rem; }
.overview-blend p { margin-bottom: 19px; color: rgb(255 255 255 / 53%); font-size: .57rem; }
.overview-blend a { color: white; font-size: .54rem; }

@media (min-width: 600px) {
  .systems-overview-hero { min-height: 720px; }
  .systems-overview-hero-inner { padding-top: 50px; }
  .systems-hero-stage { height: 410px; }
  .overview-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-blends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .systems-overview-hero { min-height: 700px; }
  .systems-overview-hero::before {
    background-image:
      linear-gradient(90deg, rgb(248 247 244 / 90%) 0 22%, rgb(248 247 244 / 50%) 38%, transparent 59%),
      url("../images/regenerative-system.png");
  }
  .systems-overview-hero-inner { padding: 48px 0 132px; }
  .systems-overview-hero .system-breadcrumb { margin-bottom: 20px; }
  .systems-overview-hero-layout { grid-template-columns: minmax(0, 1.14fr) minmax(280px, .86fr); gap: clamp(8px, 2vw, 34px); }
  .overview-hero-copy { max-width: 720px; }
  .overview-hero-copy h1 { font-size: clamp(4.7rem, 8.6vw, 6.6rem); white-space: nowrap; }
  .systems-hero-carousel { width: min(100%, 480px); }
  .systems-hero-stage { height: clamp(390px, 47vw, 510px); }
}

@media (min-width: 800px) {
  .overview-organization-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .overview-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-blends-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1060px) {
  .systems-overview-hero { min-height: 700px; }
  .systems-overview-hero-layout { grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr); gap: 42px; }
  .overview-hero-copy h1 { font-size: clamp(5.7rem, 7.3vw, 7rem); }
  .systems-hero-carousel { width: min(100%, 520px); }
  .systems-hero-stage { height: 520px; }
  .systems-overview-page .overview-discovery-panel {
    padding: 0;
    overflow: hidden;
    grid-template-columns: minmax(280px, .48fr) minmax(0, 1.52fr);
    grid-template-rows: minmax(390px, auto) auto;
    gap: 0;
  }
  .systems-overview-page .overview-discovery-panel .purpose-copy {
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    padding: clamp(40px, 4vw, 62px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(115deg, rgb(255 255 255 / 91%), rgb(255 255 255 / 72%));
  }
  .systems-overview-page .overview-discovery-panel .systems-area { display: contents; }
  .systems-overview-page .overview-discovery-panel .systems-heading-row {
    z-index: 3;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: 29px 34px;
  }
  .systems-overview-page .overview-discovery-panel .systems-count { display: block; }
  .systems-overview-page .overview-system-banner {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 390px;
    height: 100%;
    margin: 0;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }
  .systems-overview-page .overview-product-ensemble { inset: 92px 18px 12px; }
  .systems-overview-page .overview-system-grid {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: rgb(255 255 255 / 46%);
  }
}

@media (min-width: 1280px) {
  .systems-overview-page .overview-system-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .overview-system-grid .system-card:nth-child(n+7) { display: flex; }
  .overview-system-grid .system-card:nth-child(6) { grid-column: auto; }
  .overview-system-grid .system-card { min-height: 130px; padding-inline: 5px; }
  .overview-system-grid .system-card strong { text-align: center; }
}

@media (max-width: 1059px) {
  .systems-overview-page .overview-discovery-panel { display: block; }
}

@media (min-width: 800px) and (max-width: 1059px) {
  .systems-overview-page .overview-discovery-panel .systems-area {
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }
  .systems-overview-page .systems-heading-row { margin-bottom: 16px; }
  .systems-overview-page .overview-system-banner {
    min-height: 320px;
    margin-bottom: 12px;
  }
  .systems-overview-page .overview-product-ensemble { inset: 16px; }
}

@media (max-width: 599px) {
  .systems-overview-hero-inner { padding-top: 42px; }
  .systems-overview-hero .system-breadcrumb { margin-bottom: 23px; }
  .overview-hero-copy .system-hero-actions { margin-top: 24px; }
  .systems-hero-carousel { margin-top: 7px; }
  .overview-discovery-panel { margin-top: -56px; padding-bottom: 32px; }
  .systems-overview-page .overview-discovery-panel .systems-area {
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .systems-overview-page .systems-heading-row { margin-bottom: 16px; }
  .systems-overview-page .overview-system-banner {
    min-height: clamp(286px, 86vw, 326px);
    margin-bottom: 12px;
  }
  .systems-overview-page .overview-product-ensemble {
    inset: 10px;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }
  .systems-overview-page .overview-product-ensemble img {
    flex-basis: 25%;
    width: 25%;
    height: 50%;
    object-position: center;
  }
  .systems-overview-page .overview-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .systems-overview-page .overview-system-grid .system-card {
    min-height: 104px;
    padding: 12px 6px;
    gap: 4px;
  }
  .systems-overview-page .overview-system-grid .system-symbol { font-size: 1.65rem; }
  .systems-overview-page .overview-system-grid .system-card strong {
    font-size: .55rem;
    line-height: 1.25;
    text-align: center;
  }
  .systems-overview-page .overview-system-grid .system-card small { font-size: .62rem; }
  .systems-overview-page .overview-system-grid .system-card em { display: none; }
  .systems-overview-page .overview-system-grid .system-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 8px) / 2);
    justify-self: center;
  }
  .overview-metrics-grid > div { min-height: 105px; }
  .overview-blends-head { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 360px) and (max-width: 599px) {
  .systems-overview-page .overview-system-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .systems-overview-page .overview-system-grid .system-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }
}

@media (min-width: 600px) and (max-width: 799px) {
  .systems-overview-page .overview-discovery-panel .systems-area {
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .systems-overview-page .systems-heading-row { margin-bottom: 16px; }
  .systems-overview-page .overview-system-banner {
    min-height: 300px;
    margin-bottom: 12px;
  }
  .systems-overview-page .overview-product-ensemble { inset: 14px; }
  .systems-overview-page .overview-system-grid { gap: 8px; }
  .systems-overview-page .overview-system-grid .system-card {
    min-height: 104px;
    padding: 12px 6px;
    gap: 4px;
  }
  .systems-overview-page .overview-system-grid .system-symbol { font-size: 1.65rem; }
  .systems-overview-page .overview-system-grid .system-card strong {
    font-size: .55rem;
    line-height: 1.25;
    text-align: center;
  }
  .systems-overview-page .overview-system-grid .system-card small { font-size: .62rem; }
  .systems-overview-page .overview-system-grid .system-card em { display: none; }
}

@media (max-width: 430px) {
  .overview-hero-copy h1 { font-size: clamp(3.35rem, 16.7vw, 4.35rem); }
  .systems-hero-stage { height: min(82vw, 320px); }
  .systems-hero-dot { max-width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .systems-hero-slide { transition: none; transform: none; will-change: auto; }
  .systems-hero-stage::before,
  .systems-hero-dot::before { transition: none; }
}