@font-face {
  font-family: "Funnel Display";
  src: url("assets/fonts/FunnelDisplay-wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }

  html.has-custom-cursor .hero__header a,
  html.has-custom-cursor .hero__header a * {
    cursor: pointer !important;
  }

  .b-cursor {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 65px;
    height: 65px;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    transition: opacity 160ms ease;
  }

  .b-cursor.is-visible {
    opacity: 1;
  }

  .b-cursor.is-over-header-link {
    opacity: 0;
  }

  .b-cursor__ring {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: translate3d(9.5px, 9.2px, 0);
    transform-origin: center;
  }

  .b-cursor__track,
  .b-cursor__progress {
    fill: none;
    stroke-width: 1.4;
  }

  .b-cursor__track {
    stroke: rgba(255, 255, 255, 0.25);
  }

  .b-cursor__progress {
    stroke: #fff;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 100ms linear;
  }

  .b-cursor__image {
    position: absolute;
    top: calc(50% - 2px);
    left: calc(50% - 2px);
    display: block;
    width: 27.72px;
    height: auto;
    user-select: none;
  }

  .b-cursor.is-pressed {
    transform-origin: center;
  }

  .b-cursor.is-pressed .b-cursor__ring {
    transform: translate3d(10.6px, 10.3px, 0) scale(0.88);
  }
}

.team {
  position: relative;
  width: 100%;
  min-height: 156svh;
  overflow: hidden;
  color: #f5fbff;
  background: linear-gradient(180deg, #0b0f1a 0%, #25334e 56%, #88969c 100%);
}

.team__rule {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: rgba(245, 251, 255, 0.62);
}

.team__rule--horizontal {
  top: 17.35%;
  left: 0;
  width: 100%;
  height: var(--b-line-thickness, 0.5px);
}

.team__rule--vertical {
  top: 17.35%;
  bottom: 0;
  left: 30.86%;
  width: var(--b-line-thickness, 0.5px);
}

.team__title {
  position: absolute;
  top: 25.2%;
  left: 6.25%;
  z-index: 2;
  display: flex;
  align-items: center;
  height: clamp(6.8rem, 8.1vw, 10rem);
  margin: 0;
  font-size: clamp(5rem, 8.15vw, 10rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.015em;
}

.team__members {
  position: absolute;
  z-index: 2;
  top: 25.2%;
  right: 4.7%;
  bottom: auto;
  left: 34.3%;
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: clamp(6.75rem, 11.34vw, 14.04rem);
}

.team__member {
  display: grid;
  grid-template-columns: clamp(6.8rem, 8.1vw, 10rem) minmax(24rem, 1.2fr) minmax(20rem, 0.9fr);
  align-items: center;
  gap: clamp(1.8rem, 3vw, 4rem);
  min-width: 0;
}

.team__portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  background: #f4f7fa;
}

.team__identity h3 {
  margin: 0 0 clamp(1rem, 2.2vw, 2.5rem);
  font-size: clamp(3rem, 4.15vw, 5.2rem);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.team__identity p {
  display: flex;
  align-items: baseline;
  gap: clamp(1.5rem, 2.6vw, 3rem);
  margin: 0;
  font-size: clamp(1.65rem, 2.3vw, 2.8rem);
  line-height: 1;
  white-space: nowrap;
}

.team__identity strong {
  font-weight: 300;
}

.team__identity span {
  font-size: 0.7em;
  font-weight: 300;
}

.team__history {
  margin: 0;
  font-size: clamp(1.35rem, 1.75vw, 2.2rem);
  font-weight: 300;
  line-height: 1.38;
}

@media (max-width: 900px) {
  .team {
    min-height: auto;
    padding: 8rem 7vw 7rem;
  }

  .team__rule--horizontal {
    top: 5rem;
  }

  .team__rule--vertical {
    display: none;
  }

  .team__title,
  .team__members {
    position: relative;
    inset: auto;
  }

  .team__title {
    margin: 0 0 5rem;
    font-size: clamp(4.5rem, 18vw, 8rem);
  }

  .team__members {
    display: grid;
    gap: 13.5rem;
  }

  .team__member {
    grid-template-columns: minmax(6rem, 24vw) 1fr;
    gap: 1.5rem 2rem;
  }

  .team__history {
    grid-column: 2;
  }

  .team__identity h3 {
    white-space: normal;
  }

  .team__identity p {
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    white-space: normal;
  }
}

/* Value outcomes: three centered infographics within the shared content gutter. */
.value__table.value__features {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: var(--layout-width);
  min-height: max(59svh, 560px);
  margin: 0 auto;
  padding: clamp(24px, 2.6vw, 50px) 0 clamp(72px, 7vw, 134px);
}

.value__feature {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(12px, 1.55vw, 30px);
  text-align: center;
}

@media (min-width: 901px) {
  .value__feature + .value__feature {
    position: relative;
  }

  .value__feature + .value__feature::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: max(var(--b-line-thickness), .5px);
    height: clamp(72px, 12svh, 130px);
    background: rgba(255, 255, 255, .58);
    content: "";
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .value__feature + .value__feature::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: var(--b-node-size);
    aspect-ratio: 1;
    border: 1px solid rgba(247, 251, 255, .8);
    background: #24324b;
    box-shadow: inset 0 0 0 3px #24324b, inset 0 0 0 5px #f7fbff;
    content: "";
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
}

.value__feature-graphic {
  display: block;
  width: min(80%, 336px);
  height: clamp(200px, min(16vw, 28.8svh), 328px);
  opacity: 0;
  object-fit: contain;
}

.value__feature-graphic.is-motion-ready {
  opacity: 1;
}

.value__feature-copy {
  width: 100%;
  margin-top: clamp(31.2px, 2.6vw, 49.4px);
}

.value__feature-copy h3 {
  margin: 0;
  color: #f5f8fb;
  font-size: var(--type-subtitle);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .03em;
}

.value__feature-copy p {
  margin: clamp(10px, .8vw, 15px) 0 0;
  color: rgba(235, 241, 247, .72);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .03em;
}

@media (max-width: 900px) {
  .value__table.value__features {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(54px, 14vw, 82px);
    padding: clamp(28px, 8vw, 48px) 0 clamp(72px, 18vw, 108px);
  }

  .value__feature {
    height: auto;
    padding: 0;
  }

  .value__feature-graphic {
    width: min(65.6vw, 344px);
    height: auto;
    max-height: none;
  }

  .value__feature-copy {
    margin-top: clamp(23.4px, 6.5vw, 36.4px);
  }
}

@media (max-width: 520px) {
  .team__member {
    grid-template-columns: 5.5rem 1fr;
  }

  .team__identity h3 {
    font-size: 2.25rem;
  }

  .team__identity p {
    font-size: 1.35rem;
  }

  .team__history {
    font-size: 1.1rem;
  }
}

.contact {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f5fbff;
  background: linear-gradient(
    180deg,
    #88969c 0%,
    #25334e 48%,
    #0b0f1a 100%
  );
}

.contact__content {
  width: min(90vw, 1120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-1.5svh);
}

.contact__title {
  margin: 0;
  color: inherit;
  font-size: clamp(28px, 2.55vw, 49px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0.005em;
  text-align: center;
}

.contact__button {
  position: relative;
  width: clamp(230px, 17vw, 326px);
  height: clamp(81px, 6.048vw, 116px);
  margin-top: clamp(44px, 3.55vw, 68px);
  display: grid;
  place-items: center;
  color: inherit;
  font-size: clamp(38px, 3.18vw, 61px);
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  isolation: isolate;
  transition: color 180ms ease;
}

.contact__button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: max(var(--b-line-thickness), 0.5px) solid rgba(245, 251, 255, 0.7);
  transform-origin: left top;
  transition:
    border-color 180ms ease,
    background-color 180ms ease;
}

.contact__button span {
  transition: none;
}

.contact__button:hover::before,
.contact__button:focus-visible::before {
  border-color: #ffffff;
  background: #f5fbff;
}

.contact__button:hover,
.contact__button:focus-visible {
  color: #0b0f1a;
}

.contact__button:focus-visible {
  outline: max(var(--b-line-thickness), 1px) solid rgba(255, 255, 255, 0.9);
  outline-offset: 6px;
}

@media (max-width: 720px) {
  .contact__content {
    width: min(88vw, 560px);
    transform: translateY(-2svh);
  }

  .contact__title {
    font-size: clamp(25px, 7vw, 38px);
  }

  .contact__button {
    width: min(72vw, 300px);
    height: clamp(77px, 24.3vw, 106px);
    margin-top: clamp(38px, 10vw, 58px);
    font-size: clamp(36px, 11vw, 54px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact__button::before,
  .contact__button span {
    transition: none;
  }
}

/* ROI */
.roi {
  position: relative;
  min-height: max(100svh, 900px);
  overflow: hidden;
  color: #f4fbff;
  background-color: #0b101a;
  background-image:
    linear-gradient(rgba(242, 249, 252, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 249, 252, 0.075) 1px, transparent 1px);
  background-size: 4vw 4vw;
}

.roi__cards {
  position: absolute;
  inset: 9% 4vw 21%;
}

.roi__card {
  position: absolute;
  width: 25%;
  height: 50%;
  overflow: visible;
  isolation: isolate;
  cursor: pointer;
  outline: none;
  transition:
    left 650ms cubic-bezier(0.22, 1, 0.36, 1),
    width 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.roi__clip {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border: max(var(--b-line-thickness), 0.5px) solid rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0);
  transition:
    border-color 320ms ease,
    background-color 320ms ease;
}

.roi__card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(-0.42vw - max(var(--b-line-thickness), 0.5px));
  left: calc(-0.42vw - max(var(--b-line-thickness), 0.5px));
  width: 0.7vw;
  aspect-ratio: 1;
  border: max(var(--b-line-thickness), 0.5px) solid rgba(255, 255, 255, 0.82);
  background: #0b101a;
  box-shadow: inset 0 0 0 0.16vw #f4fbff;
}

.roi__photo,
.roi__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.roi__photo {
  z-index: 0;
  background-image: var(--roi-photo);
  background-position: center;
  background-size: cover;
  transform: scale(1.04);
  transition: opacity 440ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.roi__shade {
  z-index: 1;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.76) 48%, rgba(0, 0, 0, 0) 100%);
  transition: opacity 440ms ease;
}

.roi__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.2vw, 44px);
  text-align: center;
  transition: align-items 320ms ease, padding 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.roi__icon {
  width: clamp(64px, 7vw, 136px);
  max-height: clamp(64px, 7vw, 136px);
  object-fit: contain;
  transition: width 520ms ease, transform 320ms ease, filter 320ms ease;
}

.roi__card h3 {
  margin: clamp(24px, 2vw, 40px) 0 0;
  font-size: clamp(18px, 1.7vw, 34px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
}

.roi__details {
  max-width: min(34vw, 650px);
  margin-top: clamp(20px, 2vw, 38px);
  opacity: 0;
  transform: translateX(-1.2vw);
  pointer-events: none;
  transition: opacity 300ms ease 80ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}

.roi__card:not(:hover):not(:focus-visible) .roi__details {
  position: absolute;
}

.roi__details strong,
.roi__details p {
  display: block;
  margin: 0;
}

.roi__details strong {
  font-size: clamp(24px, 2.25vw, 44px);
  font-weight: 300;
  line-height: 1.05;
}

.roi__details p {
  margin-top: clamp(10px, 0.9vw, 18px);
  font-size: clamp(14px, 1.2vw, 23px);
  line-height: 1.35;
}

.roi__card:hover,
.roi__card:focus-visible {
  z-index: 4;
}

.roi__card:is(:hover, :focus-visible) .roi__clip {
  border-color: rgba(255, 255, 255, 0.95);
}

.roi__card:is(:hover, :focus-visible) .roi__photo,
.roi__card:is(:hover, :focus-visible) .roi__shade,
.roi__card:is(:hover, :focus-visible) .roi__details {
  opacity: 1;
}

.roi__card:is(:hover, :focus-visible) .roi__photo {
  transform: scale(1);
}

.roi__card:is(:hover, :focus-visible) .roi__content {
  align-items: flex-start;
  text-align: left;
}

.roi__card:is(:hover, :focus-visible) .roi__details {
  transform: translateX(0);
}

.roi__card:is(:hover, :focus-visible) h3 {
  margin-top: clamp(14px, 1.2vw, 24px);
  font-size: clamp(18px, 1.45vw, 30px);
}

.roi__card--warehouse { left: 0; top: 0; --roi-photo: url("./assets/images/roi/b_warehouse.webp"); }
.roi__card--pharma { left: 50%; top: 0; --roi-photo: url("./assets/images/roi/b_coldchain.webp"); }
.roi__card--manufacturing { left: 25%; top: 50%; --roi-photo: url("./assets/images/roi/b_manu.webp"); }
.roi__card--cross { left: 75%; top: 50%; --roi-photo: url("./assets/images/roi/b_cross.webp"); }

.roi__card--warehouse:is(:hover, :focus-visible) { left: 0; width: 50%; }
.roi__card--pharma:is(:hover, :focus-visible) { left: 50%; width: 50%; }
.roi__card--manufacturing:is(:hover, :focus-visible) { left: 0; width: 50%; }
.roi__card--cross:is(:hover, :focus-visible) { left: 50%; width: 50%; }

.roi__title {
  position: absolute;
  left: 4vw;
  bottom: 2.5vw;
  z-index: 3;
  margin: 0;
  font-size: clamp(64px, 8.5vw, 164px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.025em;
}

@media (max-width: 760px) {
  .roi {
    min-height: 1120px;
    background-size: 40px 40px;
  }

  .roi__cards {
    position: relative;
    inset: auto;
    display: grid;
    gap: 18px;
    padding: 72px 20px 190px;
  }

  .roi__card,
  .roi__card--warehouse,
  .roi__card--pharma,
  .roi__card--manufacturing,
  .roi__card--cross {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 200px;
  }

  .roi__card--warehouse:is(:hover, :focus-visible),
  .roi__card--pharma:is(:hover, :focus-visible),
  .roi__card--manufacturing:is(:hover, :focus-visible),
  .roi__card--cross:is(:hover, :focus-visible) {
    left: auto;
    width: 100%;
  }

  .roi__details {
    max-width: 90%;
  }

  .roi__card::before {
    top: -5px;
    left: -5px;
    width: 8px;
    box-shadow: inset 0 0 0 2px #f4fbff;
  }

  .roi__title {
    left: 20px;
    right: 20px;
    bottom: 48px;
    font-size: clamp(54px, 16vw, 92px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roi__card,
  .roi__photo,
  .roi__shade,
  .roi__content,
  .roi__icon,
  .roi__details {
    transition: none;
  }
}

/* Scale */
.scale {
  position: relative;
  height: 380svh;
  min-height: 2400px;
  color: #f4fbff;
}

.scale__stage {
  --scale-content-top: calc(
    clamp(42px, 5.7vh, 92px) +
    clamp(285px, 25.2vw, 517px) +
    20px
  );
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #88969c 0%, rgba(136, 150, 156, .86) 5%, rgba(136, 150, 156, 0) 18%),
    linear-gradient(rgba(242, 249, 252, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 249, 252, 0.075) 1px, transparent 1px),
    radial-gradient(ellipse at 12% -8%, rgba(238, 248, 251, 0.38), transparent 54%),
    linear-gradient(180deg, #88969c 0%, #708195 31%, #31425d 61%, #0b0f1a 100%);
  background-size: auto, 4vw 4vw, 4vw 4vw, auto, auto;
}

.scale__header {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scale__title {
  position: absolute;
  top: clamp(42px, 5.7vh, 92px);
  left: clamp(30px, 2.45vw, 64px);
  width: min(42vw, 820px);
  margin: 0;
  font-size: clamp(64px, 5.65vw, 116px);
  font-weight: 300;
  line-height: 0.99;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scale__title span {
  display: block;
}

.scale__title-break {
  margin-top: 0.5em;
}

.scale__divider {
  position: absolute;
  top: var(--scale-content-top);
  left: 0;
  width: 100%;
  height: var(--b-line-thickness);
  min-height: 0.5px;
  background: rgba(255, 255, 255, 0.8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.35s cubic-bezier(0.65, 0, 0.35, 1) 0.52s;
}

.scale__list-viewport {
  position: absolute;
  top: var(--scale-content-top);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.scale__track {
  display: flex;
  width: max-content;
  height: 100%;
  gap: 9vw;
  padding: 5.2vh 8vw 4vh;
  will-change: transform;
}

.scale__item {
  flex: 0 0 43vw;
  min-width: 620px;
  opacity: 0;
  transform: translate3d(34px, 0, 0);
  transition: opacity 0.75s ease 1.45s, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 1.45s;
}

.scale__item-heading {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.2vw, 28px);
  min-height: clamp(54px, 5vw, 92px);
}

.scale__item-heading img {
  width: clamp(46px, 4.3vw, 86px);
  height: clamp(46px, 4.3vw, 86px);
  object-fit: contain;
}

.scale__icon {
  display: block;
  width: clamp(46px, 4.3vw, 86px);
  height: clamp(46px, 4.3vw, 86px);
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.scale__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.scale.is-entered .scale__icon path {
  animation: scale-icon-trim 1.14s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes scale-icon-trim {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.scale__item h3,
.scale__item p {
  margin: 0;
}

.scale__item h3 {
  font-size: clamp(38px, 3.45vw, 70px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.scale__lead {
  margin-top: clamp(42px, 6vh, 86px) !important;
  font-size: clamp(31px, 2.55vw, 52px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.scale__item > p:last-child {
  margin-top: clamp(22px, 3vh, 40px);
  font-size: clamp(18px, 1.45vw, 30px);
  font-weight: 300;
  line-height: 1.35;
  color: rgba(244, 251, 255, 0.92);
}

.scale__item:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .9);
  outline-offset: -1px;
}

.scale.is-entered .scale__title,
.scale.is-entered .scale__item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scale.is-entered .scale__divider {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .scale {
    height: 330svh;
    min-height: 2100px;
  }

  .scale__stage {
    background-size: auto, 9vw 9vw, 9vw 9vw, auto, 100% 100%;
    background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat;
  }

  .scale__title {
    top: 5vh;
    left: 6vw;
    width: 88vw;
    font-size: clamp(52px, 13vw, 88px);
  }

  .scale__divider,
  .scale__list-viewport {
    top: 49%;
  }

  .scale__track {
    gap: 18vw;
    padding: 6vh 9vw 4vh;
  }

  .scale__item {
    flex-basis: 82vw;
    min-width: 0;
  }

  .scale__item h3 {
    font-size: clamp(34px, 9vw, 58px);
  }

  .scale__lead {
    font-size: clamp(27px, 7vw, 46px);
  }

  .scale__item > p:last-child {
    font-size: clamp(16px, 4vw, 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scale__title,
  .scale__divider,
  .scale__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:root {
  color-scheme: dark;
  background: #11182a;
  font-family: "Funnel Display", Arial, sans-serif;
  font-synthesis: none;
  --design-scale: min(1vw / 19.2, 1vh / 10.8);
  --edge-x: clamp(34px, 4.42vw, 85px);
  --flow-ease: cubic-bezier(.2, .72, .18, 1);
  /* Concept B line system: 0.5px at a 1920px viewport. */
  --b-line-thickness: calc(100vw / 3840);
  --b-line-color: rgba(255, 255, 255, .88);
  --b-node-size: clamp(11px, min(.58594vw, 1.04167svh), 22.5px);
  /* 1920px artboard: 250px left/right safe margin. */
  --layout-gutter: clamp(24px, 13.020833vw, 500px);
  --layout-width: calc(100% - (var(--layout-gutter) * 2));
  --section-card-width: min(67vw, 2570px);
  --section-card-gutter: calc((100vw - var(--section-card-width)) / 2);
  --nav-logo-height: clamp(43.5px, 2.77vw, 53.2px);
  --nav-padding-block: clamp(30px, 2.1vw, 40px);
  --nav-height: calc(var(--nav-logo-height) + var(--nav-padding-block) + var(--nav-padding-block));
  --section-title-gap: clamp(32px, 2.1vw, 40px);
  --section-title-top: calc(var(--nav-height) + var(--section-title-gap));
  /* Five-level typography system. Hero h1 remains an intentional exception. */
  --type-display: clamp(64px, min(4.6875vw, 8.33333svh), 180px);
  --type-title: clamp(44px, min(2.96875vw, 5.27778svh), 114px);
  --type-subtitle: clamp(24px, min(1.5625vw, 2.77778svh), 60px);
  --type-body: clamp(16px, min(1.04167vw, 1.85185svh), 40px);
  --type-caption: clamp(13px, min(.78125vw, 1.38889svh), 30px);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: #11182a;
}

body {
  overflow-x: hidden;
  letter-spacing: .03em;
  font-weight: 300;
}

strong,
b {
  font-weight: 300;
}

main { background: #11182a; }

.b-line {
  background: var(--b-line-color);
}

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  color: #fff;
  background: #59647a;
}

.hero__image,
.hero__tone {
  position: absolute;
  inset: 0;
}

.hero__image {
  z-index: -3;
  background: url("assets/images/b_hero_img_2.webp") center top / cover no-repeat;
  transform: scale(1.018);
  will-change: transform;
  animation: image-enter 1.65s var(--flow-ease) both;
}

.hero__tone {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(3, 7, 14, .02) 35%, rgba(5, 9, 17, .22) 56%, rgba(5, 8, 14, .94) 100%),
    linear-gradient(90deg, rgba(3, 7, 14, .74) 0%, rgba(3, 7, 14, .28) 30%, transparent 62%);
  pointer-events: none;
}

.hero__header {
  position: absolute;
  top: clamp(30px, 2.65vw, 51px);
  left: clamp(34px, 3.55vw, 68px);
  z-index: 4;
}

.hero__header img {
  display: block;
  width: clamp(116px, 7.4vw, 142px);
  height: auto;
}

.hero__nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
  align-items: center;
  column-gap: clamp(32px, 3.125vw, 60px);
  margin-left: auto;
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1;
}

.hero__nav a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color 180ms ease;
}

.hero__nav a:hover,
.hero__nav a:focus-visible {
  color: #fff;
}

.hero__nav a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .72);
  outline-offset: 8px;
}

.hero__lead {
  position: absolute;
  z-index: 3;
  left: 4.4vw;
  right: 4.4vw;
  bottom: 6.3svh;
  width: auto;
  animation: copy-enter 1.15s var(--flow-ease) .16s both;
}

.hero h1 {
  margin: 0;
  font-size: clamp(62px, 5.8vw, 112px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 300;
  white-space: nowrap;
}

.partners {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  min-height: clamp(285px, 36svh, 450px);
  padding: clamp(42px, 4.8svh, 69px) 6vw;
  color: rgba(247, 251, 255, .7);
  background:
    linear-gradient(
      180deg,
      rgba(11, 15, 26, 0) 0%,
      rgba(11, 15, 26, .72) 50%,
      rgba(11, 15, 26, 0) 100%
    ),
    #25334e;
}

.partners__title {
  margin: 0 0 clamp(22px, 3svh, 36px);
  font-size: clamp(18px, 1.35vw, 26px);
  line-height: 1.2;
  font-weight: 300;
  text-align: center;
}

.partners__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(27.72px, 3.85vw, 73.92px);
  width: min(84vw, 1680px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.partners__item {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: clamp(56px, 5.5vw, 106px);
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(16px, 1.2vw, 23px);
}

.partners__item::before,
.partners__item::after {
  content: none;
}

.partners__item img {
  display: block;
  width: 105%;
  max-width: clamp(115.5px, 8.925vw, 172.2px);
  max-height: clamp(44.1px, 3.57vw, 69.3px);
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

/* Match the HYUNDAI wordmark height between Glovis and Mobis artwork. */
.partners__item img[src$="b_mobis.svg"] {
  transform: scale(.848);
}

.partners__item img[src$="b_glovis.svg"] {
  transform: scale(1.1);
}

.product-intro {
  --product-intro-copy-left: 15vw;
  --product-intro-beaver-size: min(28vw, 50.4svh, 595px);
  --product-intro-top-size: min(3.36vw, 6.048svh, 71.4px);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 180svh;
  min-height: 620px;
  overflow: clip;
  color: #fff;
  background: #5d6474;
}

.product-intro__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

.product-intro__image,
.product-intro__gradient {
  position: absolute;
  inset: 0;
}

.product-intro__image {
  z-index: -2;
  background: url("assets/images/b_productintro_img.webp") center center / cover no-repeat;
}

.product-intro__gradient {
  z-index: -1;
  background: linear-gradient(
    180deg,
    #0f1015 0%,
    rgba(0, 0, 0, .55) 50%,
    #151a25 100%
  );
  pointer-events: none;
}

.product-intro__beaver {
  position: absolute;
  z-index: 0;
  right: 15vw;
  bottom: 25%;
  width: var(--product-intro-beaver-size);
  max-height: 94%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}

/* Keep the perspective Beaver at the authored desktop size independently
   from the smaller top-view handoff image. */
.product-intro__beaver--front {
  width: var(--product-intro-beaver-size);
}

.product-intro__copy {
  position: absolute;
  z-index: 1;
  top: 25%;
  left: var(--product-intro-copy-left);
  width: 68vw;
  transform: none;
  text-align: left;
}

.product-intro__eyebrow {
  display: none;
  margin: 0 0 clamp(22px, 2.2vw, 42px);
  font-size: clamp(23px, 1.82vw, 36px);
  line-height: 1.15;
  letter-spacing: -.005em;
  font-weight: 300;
}

.product-intro h2 {
  margin: 0;
  font-weight: 300;
  letter-spacing: -.015em;
}

.product-intro__line {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 clamp(7px, .55vw, 11px);
  font-size: clamp(64px, 5.3vw, 106px);
  line-height: 1.05;
  white-space: nowrap;
}

.product-intro__line-mask,
.product-intro__line-text {
  display: block;
}

.product-intro__line-mask {
  overflow: hidden;
}

@media (min-width: 901px) {
  .product-intro__line-mask,
  .product-intro__line-text {
    width: max-content;
  }
}

.product-intro__line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--b-line-thickness);
  background: var(--b-line-color);
}

.product-intro__line--last {
  width: max-content;
  margin: clamp(20px, 2.3vw, 44px) 0 0;
}

.product-intro__line--middle {
  width: max-content;
  margin-top: clamp(12px, 1.15vw, 22px);
}

.product-intro__features {
  margin: clamp(28px, 2.2vw, 42px) 0 0;
  padding-left: 1.15em;
  color: #f5fbff;
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: .03em;
}

.product-intro__features li + li {
  margin-top: .22em;
}

.product-intro__line--last::before {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50vw - var(--product-intro-copy-left));
  width: var(--b-line-thickness);
  height: 70vh;
  background: var(--b-line-color);
  transform: translateX(-50%);
}

.product-intro.is-sequence-enabled .product-intro__beaver--front,
.product-intro.is-sequence-enabled .product-intro__eyebrow,
.product-intro.is-sequence-enabled .product-intro__features {
  opacity: 0;
}

.product-intro__beaver--top {
  z-index: 3;
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
  width: var(--product-intro-top-size);
  opacity: 0;
  object-position: center;
}

.product-intro.is-sequence-enabled .product-intro__line-text {
  opacity: 0;
  transform: translate3d(0, 112%, 0);
}

.product-intro.is-sequence-enabled .product-intro__line::after {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
}

.product-intro.is-sequence-enabled .product-intro__line--last::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
}

.product-intro.is-intro-running .product-intro__beaver--front {
  animation: product-intro-beaver-enter .82s cubic-bezier(.7, 0, .3, 1) both;
}

@keyframes product-intro-beaver-enter {
  from {
    opacity: 0;
    transform: translate3d(12vw, -12vh, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.product-intro.is-intro-running .product-intro__line::after {
  animation: product-intro-line-draw .48s var(--flow-ease) .35s both;
}

.product-intro.is-intro-running .product-intro__line--last::after {
  animation-delay: .48s;
}

.product-intro.is-intro-running .product-intro__line-text {
  animation: product-intro-title-rise .58s var(--flow-ease) .82s both;
}

.product-intro.is-intro-running .product-intro__line--last .product-intro__line-text {
  animation-delay: .95s;
}

.product-intro.is-intro-running .product-intro__eyebrow {
  animation: product-intro-eyebrow-in .4s ease .98s both;
}

.product-intro.is-intro-running .product-intro__features {
  animation: product-intro-eyebrow-in .4s ease 1.12s both;
}

.product-intro__line--last::before {
  display: none;
}

.product-intro.is-restored .product-intro__image,
.product-intro.is-restored .product-intro__gradient,
.product-intro.is-restored .product-intro__beaver--front,
.product-intro.is-restored .product-intro__eyebrow,
.product-intro.is-restored .product-intro__features,
.product-intro.is-restored .product-intro__line-text,
.product-intro.is-restored .product-intro__line::after {
  animation: none;
  opacity: 1;
}

.product-intro.is-restored .product-intro__line-text {
  transform: translate3d(0, 0, 0);
}

.product-intro.is-restored .product-intro__beaver--front {
  transform: none;
}

.product-intro__handoff {
  position: absolute;
  z-index: 2;
  top: calc(var(--product-intro-handoff-top, 61.5%) - var(--b-line-thickness));
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  pointer-events: none;
}

.product-intro__handoff-horizontal {
  position: absolute;
  top: 0;
  left: var(--product-intro-handoff-start, calc(50% - min(16vw, 300px)));
  width: var(--product-intro-handoff-width, min(16vw, 300px));
  height: var(--b-line-thickness);
  min-height: .5px;
  background: var(--b-line-color);
  transform: scaleX(var(--product-intro-horizontal, 0));
  transform-origin: left center;
}

.product-intro__handoff-node {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: var(--b-node-size);
  aspect-ratio: 1;
  border: 1px solid rgba(247, 251, 255, .8);
  background: #24324b;
  box-shadow: inset 0 0 0 3px #24324b, inset 0 0 0 5px #f7fbff;
  opacity: var(--product-intro-node-opacity, 0);
  transform: translate(-50%, -50%) scale(var(--product-intro-node-scale, .65));
}

.product-intro__handoff-vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--b-line-thickness);
  min-width: .5px;
  background: var(--b-line-color);
  transform: scaleY(var(--product-intro-vertical, 0));
  transform-origin: center top;
}

.product-intro.is-restored .product-intro__line::after {
  transform: scaleX(1);
}

@keyframes product-intro-background {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes product-intro-line-draw {
  from { opacity: 1; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes product-intro-title-rise {
  from { opacity: 0; transform: translate3d(0, 112%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes product-intro-eyebrow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes product-intro-vertical-draw {
  from { transform: translateX(-50%) scaleY(0); }
  to { transform: translateX(-50%) scaleY(1); }
}

.product {
  position: relative;
  height: 500svh;
  min-height: 3100px;
  background: linear-gradient(180deg, #1d1e26 0%, #151a25 100%);
}

/* Product sequence is preserved in markup but currently bypassed. */
.product.is-bypassed {
  display: none;
}

.product__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

.product__continuation-line {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--b-line-thickness);
  min-width: .5px;
  background: var(--b-line-color);
  transform: translateX(-50%);
  pointer-events: none;
}

.product__axis {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--b-line-thickness);
  background: transparent;
  transform: translateX(-50%);
}

.product__axis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--b-line-color);
  transform: scaleY(0);
  transform-origin: center top;
}

.product__axis span {
  position: absolute;
  left: 50%;
  display: block;
  width: clamp(12px, 1.05vw, 20px);
  aspect-ratio: 1;
  border: max(var(--b-line-thickness), .5px) solid var(--b-line-color);
  background: #171c27;
  box-shadow:
    inset 0 0 0 clamp(2px, .16vw, 3px) #171c27,
    inset 0 0 0 clamp(3px, .26vw, 5px) var(--b-line-color);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(.2);
}

.product__axis span:nth-child(1) { top: 25%; }
.product__axis span:nth-child(2) { top: 50%; }
.product__axis span:nth-child(3) { top: 75%; }

.product__axis.is-revealed::before {
  animation: none;
  transform: scaleY(var(--system-entry-line-progress, 1));
}

.product__axis.is-revealed span {
  animation: product-axis-marker-in .48s var(--flow-ease) both;
}

.product__axis.is-revealed span:nth-child(1) { animation-delay: .22s; }
.product__axis.is-revealed span:nth-child(2) { animation-delay: .5s; }
.product__axis.is-revealed span:nth-child(3) { animation-delay: .78s; }

@keyframes product-axis-draw {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes product-axis-marker-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(.2);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
}

.product__visual {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(92vw, 100svh);
  height: min(92vw, 100svh);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.2);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: top 450ms var(--flow-ease);
}

.product__visual.is-final-frame {
  top: 10%;
}

.product__visual.is-handed-off {
  opacity: 0 !important;
  visibility: hidden;
}

.product__sequence {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 180ms var(--flow-ease);
  user-select: none;
  pointer-events: none;
}

.product__sequence.is-active { opacity: 1; }

.product__handoff {
  position: fixed;
  z-index: 6;
  top: 10%;
  left: 50%;
  width: min(40vw, 850px);
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -50%, 0) scale(.14);
  transform-origin: center;
  pointer-events: none;
  will-change: top, opacity;
}

/* The Product Intro top-view itself is handed into System; no duplicate layer. */
.product__handoff {
  display: none !important;
}

.product-intro__beaver--top.is-system-handoff {
  position: fixed;
  z-index: 20;
  top: var(--system-handoff-y, 61.5vh);
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(40vw, 72svh, 850px);
  max-width: var(--layout-width);
  opacity: var(--system-handoff-opacity, 0) !important;
  transform: translate3d(-50%, -50%, 0) scale(.084) !important;
  transform-origin: center;
  pointer-events: none;
  will-change: top, left, opacity;
  transition:
    top 720ms cubic-bezier(.4, 0, .2, 1),
    opacity 420ms var(--flow-ease);
}

.product-intro__beaver--top.is-system-handoff.is-system-entry-positioning {
  transition: none !important;
}

.product-intro__beaver--top.is-system-handoff.is-system-entry-fade {
  transition: opacity 420ms var(--flow-ease);
}

.product__handoff.is-visible {
  visibility: visible;
}

.product__handoff img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.system {
  position: relative;
  height: 300svh;
  min-height: 1860px;
  background: linear-gradient(180deg, #151a25 0%, #0b0f1a 100%);
}

.system::before {
  content: "";
  position: absolute;
  z-index: 8;
  top: -3px;
  left: 50%;
  width: max(var(--b-line-thickness), 1px);
  height: 6px;
  background: var(--b-line-color);
  transform: translateX(-50%);
  pointer-events: none;
}

.system__stage {
  --system-line-thickness: max(var(--b-line-thickness), 1px);
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 50% 50%;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  color: #f8f9fb;
}

.system__stage.is-carry-triggered {
  z-index: 7;
}

.system__stage .product__axis {
  width: var(--system-line-thickness);
}

.system__stage .product__axis span {
  border-width: var(--system-line-thickness);
}

.system__copy {
  position: relative;
  height: 100%;
}

.system__branch {
  position: absolute;
  z-index: 4;
  top: 25%;
  left: 50%;
  width: 3.65%;
  height: var(--system-line-thickness);
  background: var(--b-line-color);
  transform: scaleX(0);
  transform-origin: left center;
}

.system__stage.is-carry-triggered .system__branch--carry {
  animation: system-branch-draw .38s var(--flow-ease) both;
}

@keyframes system-branch-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.system__text {
  position: absolute;
  top: 50%;
  left: calc(13.95vw + clamp(20.7px, 4.68vw, 90px));
  width: 38vw;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  transition: opacity 360ms var(--flow-ease);
  pointer-events: none;
}

.system__text.is-active {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

.system__text[data-system-text="0"] {
  top: 50%;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
}

.system__stage.is-carry-triggered .system__text[data-system-text="0"].is-active {
  opacity: 1;
}

.system__text-mask {
  overflow: hidden;
}

.system__text-mask--title {
  margin-bottom: clamp(28px, 4vw, 77px);
  padding-top: .05em;
  padding-bottom: .3em;
}

.system__text-mask--body {
  padding-left: clamp(18px, 1.35vw, 26px);
}

.system__text-mask h2,
.system__text-mask p {
  transform: none;
}

.system__stage.is-carry-triggered .system__text-mask h2,
.system__stage.is-carry-triggered .system__text-mask p {
  animation: none;
}

.system__text h2 {
  margin: 0 0 clamp(28px, 4vw, 77px);
  font-size: clamp(116px, 14.2vw, 273px);
  line-height: .82;
  letter-spacing: -.025em;
  font-weight: 300;
}

.system__text-mask h2 {
  margin: 0;
  line-height: 1.08;
}

.system__text-mask--body p {
  font-family: "Funnel Display", Arial, sans-serif;
  font-weight: 300;
}

.system__text p {
  margin: 0;
  font-size: clamp(25px, 2.05vw, 39px);
  line-height: 1.48;
  letter-spacing: 0;
  font-weight: 300;
}

.system__rail {
  position: absolute;
  z-index: 3;
  top: 12%;
  bottom: 12%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: var(--b-line-thickness);
  background: var(--b-line-color);
  transform: translateX(-50%);
}

.system__rail span {
  width: clamp(12px, 1.05vw, 20px);
  aspect-ratio: 1;
  border: max(var(--b-line-thickness), .5px) solid var(--b-line-color);
  background: #171c27;
  box-shadow: inset 0 0 0 clamp(2px, .16vw, 3px) #171c27,
              inset 0 0 0 clamp(3px, .26vw, 5px) var(--b-line-color);
}

.system__rail i {
  display: block;
  width: clamp(8px, .62vw, 12px);
  height: var(--b-line-thickness);
  background: var(--b-line-color);
}

.system__visual {
  position: relative;
  height: 100%;
}

.system__visual.is-replaying .system__scene {
  opacity: 0 !important;
  transition: none;
}

.system__frame {
  position: absolute;
  top: 8.5%;
  right: 5.2%;
  bottom: 8.5%;
  left: 7.3%;
  border: 0;
  overflow: hidden;
}

.system__frame-draw {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.system__frame-line {
  position: absolute;
  display: block;
  background: var(--b-line-color);
  box-shadow: 0 0 clamp(3px, .26vw, 5px) rgba(136, 150, 156, .34);
}

.system__frame-line--left-lower {
  top: 16.7%;
  bottom: 0;
  left: 0;
  width: var(--system-line-thickness);
  transform: scaleY(0);
  transform-origin: center top;
}

.system__frame-line--bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--system-line-thickness);
  transform: scaleX(0);
  transform-origin: left center;
}

.system__frame-line--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--system-line-thickness);
  transform: scaleY(0);
  transform-origin: center bottom;
}

.system__frame-line--top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--system-line-thickness);
  transform: scaleX(0);
  transform-origin: right center;
}

.system__frame-line--left-upper {
  top: 0;
  left: 0;
  width: var(--system-line-thickness);
  height: 16.7%;
  transform: scaleY(0);
  transform-origin: center top;
}

.system__stage.is-frame-triggered .system__frame-line--left-lower {
  animation: system-frame-line-y .066s linear .084s both;
}

.system__stage.is-frame-triggered .system__frame-line--bottom {
  animation: system-frame-line-x .08s linear .15s both;
}

.system__stage.is-frame-triggered .system__frame-line--right {
  animation: system-frame-line-y .08s linear .23s both;
}

.system__stage.is-frame-triggered .system__frame-line--top {
  animation: system-frame-line-x .08s linear .31s both;
}

.system__stage.is-frame-triggered .system__frame-line--left-upper {
  animation: system-frame-line-y .024s linear .39s both;
}

@keyframes system-frame-line-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes system-frame-line-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.system__frame::before {
  content: none;
}

.system__stage.is-carry-triggered .system__frame::before {
  animation: none;
}

.system__inner-frame {
  position: absolute;
  z-index: 0;
  top: 4.8%;
  left: 25%;
  width: 50%;
  height: 17%;
  border: var(--system-line-thickness) solid var(--b-line-color);
  opacity: 0;
}

.system__stage.is-frame-triggered .system__inner-frame {
  animation: system-inner-frame-in .08s var(--flow-ease) .434s both;
}

@keyframes system-inner-frame-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.system__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: none;
  transition: opacity 520ms ease;
}

.system__scene.is-active {
  opacity: 1;
  transform: none;
}

.system__scene[data-system-scene="0"].is-active {
  opacity: 0;
}

.system__stage.is-carry-triggered .system__scene[data-system-scene="0"].is-active {
  opacity: 1;
}

.system__scene img { position: absolute; object-fit: contain; }

.system__term-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.system__term {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--flow-ease);
}

.system__term.is-active {
  z-index: 1;
  opacity: 1;
}

.system__term[data-system-term="0"].is-active {
  opacity: 0;
}

.system__stage.is-carry-triggered .system__term[data-system-term="0"].is-active {
  opacity: 1;
}

/* Temporarily reveal the directly-built mechanism beneath the term composites. */
.system__term,
.system__term.is-active,
.system__stage.is-carry-triggered .system__term[data-system-term="0"].is-active {
  opacity: 0 !important;
}

.carry__truck-anchor {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.system__scene .carry__truck {
  top: 85%;
  bottom: auto;
  left: 50%;
  width: max(225%, 150svh);
  max-width: none;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: 0 50%;
}

.carry__boxes {
  z-index: 2;
  bottom: 22%;
  width: 13.5%;
}

.carry__beaver {
  z-index: 1;
  width: 9%;
  height: auto;
}

.carry__beaver--side-left {
  top: 41%;
  left: 22.45%;
  transform: rotate(-90deg) scale(1.3);
}

.carry__beaver--side-right {
  top: 41%;
  right: 22.45%;
  transform: rotate(90deg) scale(1.3);
}

.carry__beaver--loaded-left {
  z-index: 5;
  bottom: 18.5%;
  left: 39.3%;
  transform: rotate(180deg) scale(1.3);
}

.carry__beaver--loaded-right {
  z-index: 5;
  right: 38%;
  bottom: 18.5%;
  transform: rotate(180deg) scale(1.3);
}

.carry__boxes--left { z-index: 6; left: 36.8%; }
.carry__boxes--right { z-index: 6; right: 36%; }

.inspect__scanner {
  z-index: 4;
  width: 27%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

.inspect__scanner--01 {
  transform: rotate(180deg);
}

.switch__carry-box {
  z-index: 6;
  width: 13.5%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

.switch__truck {
  right: 4%;
  bottom: -2%;
  width: 61%;
}

.inspect__boxes {
  left: 50%;
  bottom: 29%;
  width: 27%;
  transform: translateX(-50%);
}

.inspect__beaver {
  bottom: 31%;
  width: 20%;
  height: 21%;
}

.inspect__beaver--left { left: 17%; transform: rotate(90deg); }
.inspect__beaver--right { right: 17%; transform: rotate(-90deg); }

.inspect__beam {
  position: absolute;
  z-index: -1;
  bottom: 27%;
  width: 39%;
  height: 31%;
  opacity: .55;
  background: linear-gradient(150deg, rgba(225,231,244,.85), rgba(106,116,139,.1) 72%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.inspect__beam--left { left: 13%; }
.inspect__beam--right { right: 13%; transform: scaleX(-1); }

.switch__truck { opacity: .95; }
.switch__boxes {
  top: 8%;
  left: 50%;
  width: 29%;
  transform: translateX(-50%);
}

.switch__beaver {
  width: 21%;
  height: 22%;
}

.switch__beaver--one { left: 13%; bottom: 53%; transform: rotate(145deg); }
.switch__beaver--two { right: 7%; bottom: 25%; }

.hero h1 > span,
.hero__continuation > span {
  display: flex;
  width: max-content;
}

.hero__letter {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

.hero__word--left .hero__letter {
  animation: hero-letter-from-left .78s cubic-bezier(.7, 0, .3, 1)
    var(--letter-delay) both;
}

.hero__word--right .hero__letter {
  animation: hero-letter-from-right .78s cubic-bezier(.7, 0, .3, 1)
    var(--letter-delay) both;
}

@keyframes hero-letter-from-left {
  from { opacity: 0; transform: translate3d(var(--letter-start-x, calc(-100vw - 100%)), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-letter-from-right {
  from { opacity: 0; transform: translate3d(var(--letter-start-x, calc(100vw + 100%)), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero__description {
  position: static;
  margin: 0 0 clamp(16px, 1.45vw, 28px);
  width: max-content;
  font-size: clamp(18px, 1.13vw, 22px);
  line-height: 1.42;
  letter-spacing: -.005em;
  font-weight: 300;
}

.hero__description strong { font-weight: 300; }

.hero__kicker,
.hero__description {
  margin-left: clamp(6px, .52vw, 10px);
  opacity: 0;
  animation: hero-supporting-copy-in .72s cubic-bezier(.7, 0, .3, 1) 1.44s both;
}

@keyframes hero-supporting-copy-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero__continuation {
  position: absolute;
  z-index: 2;
  top: 65.15%;
  left: 64.2%;
  animation: continuation-enter 1.3s var(--flow-ease) .28s both;
}

@keyframes image-enter {
  from { opacity: 0; transform: scale(1.075); }
  to { opacity: 1; transform: scale(1.018); }
}

@keyframes copy-enter {
  from { opacity: 0; transform: translate3d(-5vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes continuation-enter {
  from { opacity: 0; transform: translate3d(7vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/*
 * Scale the 1920 × 1080 art direction as one system on landscape screens.
 * `vmin` is not suitable here because the reference is 16:9 rather than 1:1.
 * This unit follows whichever viewport axis is tighter, so typography remains
 * proportional on 16:9, ultrawide, and short laptop displays.
 */
@media (min-aspect-ratio: 4/5) {
  .hero__header {
    top: min(2.65625vw, 4.722222svh);
    left: min(3.541667vw, 6.296296svh);
  }

  .hero__header img {
    width: min(7.395833vw, 13.148148svh);
  }

  .hero__lead {
    left: min(4.427083vw, 7.87037svh);
    right: min(4.427083vw, 7.87037svh);
    bottom: min(3.541667vw, 6.296296svh);
  }

  .hero__kicker {
    margin-bottom: min(1.223959vw, 2.175926svh);
    font-size: min(1.510417vw, 2.685185svh);
  }

  .hero h1 {
    font-size: min(5.833333vw, 10.37037svh);
  }

  .hero__description {
    margin: 0 0 min(1.458333vw, 2.592593svh);
    font-size: min(1.458333vw, 2.592593svh);
  }
}

@media (max-aspect-ratio: 4/5) {
  .hero { min-height: 720px; }
  .hero__image { background-position: 62% top; }
  .hero__lead {
    top: auto;
    left: 5vw;
    right: 5vw;
    bottom: 6svh;
    width: auto;
  }
  .hero h1 {
    font-size: clamp(27px, 7.2vw, 48px);
    line-height: 1.12;
  }
  .hero__description {
    position: static;
    width: 100%;
    margin: 0 0 14px;
    font-size: clamp(14px, 3.7vw, 20px);
  }
  .hero__description br { display: none; }

  .product-intro__image { background-position: 49% center; }
  .product-intro__copy {
    top: 38%;
    width: 90vw;
  }
  .product-intro__eyebrow {
    margin-bottom: 42px;
    font-size: clamp(20px, 5.5vw, 30px);
  }
  .product-intro__line {
    font-size: clamp(46px, 12vw, 78px);
    white-space: normal;
  }
  .product-intro__line--last {
    width: 82%;
    margin-top: 42px;
  }

  .product { min-height: 3600px; }
  .product__visual {
    width: min(132vw, 96svh);
    height: min(132vw, 96svh);
  }

  .system__stage { grid-template-columns: 100%; }
  .system__copy { z-index: 5; }
  .system__text {
    top: 18%;
    left: 7vw;
    width: 86vw;
    transform: none;
  }
  .system__text.is-active,
  .system__text[data-system-text="0"] { transform: none; }
  .system__text h2 { font-size: clamp(86px, 24vw, 150px); }
  .system__text p { font-size: clamp(20px, 5.4vw, 30px); }
  .system__rail { left: 5vw; opacity: .6; }
  .system__visual {
    position: absolute;
    inset: 35% 0 0;
  }
  .system__frame { inset: 0 4vw 5vh 9vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image,
  .hero__lead,
  .hero__continuation,
  .hero__letter,
  .hero__scan-line,
  .hero__kicker,
  .hero__description,
  .product-intro.is-sequence-enabled .product-intro__image,
  .product-intro.is-sequence-enabled .product-intro__gradient,
  .product-intro.is-sequence-enabled .product-intro__eyebrow,
  .product-intro.is-sequence-enabled .product-intro__line-text,
  .product-intro.is-sequence-enabled .product-intro__line::after,
  .product-intro.is-sequence-enabled .product-intro__line--last::before {
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  .hero__letter {
    opacity: 1;
    transform: none;
  }

  .hero__kicker,
  .hero__description {
    opacity: 1;
  }

  .hero__scan-lines {
    display: none;
  }

  .product__axis.is-revealed::before,
  .product__axis.is-revealed span {
    animation-duration: 1ms;
    animation-delay: 0s;
  }
}

/* Value */
.value {
  position: relative;
  color: #f7fbff;
  overflow: hidden;
  background:
    linear-gradient(rgba(242, 249, 252, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 249, 252, 0.075) 1px, transparent 1px),
    linear-gradient(180deg, #0b0f1a 0%, #25334e 54%, #88969c 100%);
  background-size: 4vw 4vw, 4vw 4vw, auto;
}

.value__header {
  min-height: clamp(300px, 17vw, 370px);
  padding: clamp(72px, 6.4vw, 124px) clamp(40px, 4vw, 78px) 36px;
}

.value__header h2 {
  max-width: 78vw;
  margin: 0;
  font-size: clamp(50px, 5.2vw, 100px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -.005em;
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition: opacity .8s var(--flow-ease), transform 1s var(--flow-ease);
}

.value__header.is-visible h2 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.value__table { position: relative; }
.value__grid { position: absolute; inset: 0; pointer-events: none; }
.value__line {
  position: absolute;
  display: block;
  background: var(--b-line-color);
  will-change: transform;
}

.value__line--top,
.value__line--row-one,
.value__line--row-two,
.value__line--bottom {
  left: 0;
  width: 100%;
  height: var(--b-line-thickness);
  transform: scaleX(0);
  transform-origin: left center;
}
.value__line--top { top: 0; }
.value__line--row-one { top: 33.333%; }
.value__line--row-two { top: 66.666%; }
.value__line--bottom { bottom: 0; }
.value__line--vertical {
  top: 0;
  bottom: 0;
  left: 30%;
  width: var(--b-line-thickness);
  transform: scaleY(0);
  transform-origin: center top;
}

.value__table.is-drawn .value__line--top { animation: value-line-x .9s var(--flow-ease) both; }
.value__table.is-drawn .value__line--vertical { animation: value-line-y 1.5s var(--flow-ease) .35s both; }
.value__table.is-drawn .value__line--row-one { animation: value-line-x 1.15s var(--flow-ease) .75s both; }
.value__table.is-drawn .value__line--row-two { animation: value-line-x 1.15s var(--flow-ease) 1.05s both; }
.value__table.is-drawn .value__line--bottom { animation: value-line-x 1.15s var(--flow-ease) 1.35s both; }

@keyframes value-line-x { to { transform: scaleX(1); } }
@keyframes value-line-y { to { transform: scaleY(1); } }

.value__row {
  position: relative;
  display: grid;
  grid-template-columns: 30% 70%;
  min-height: clamp(440px, 28vw, 560px);
}

.value__row h3,
.value__result {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity .75s var(--flow-ease), transform .95s var(--flow-ease);
}

.value__row h3 {
  align-self: start;
  margin: 0;
  padding: clamp(78px, 8vw, 154px) clamp(28px, 3vw, 58px) 40px clamp(40px, 6.25vw, 120px);
  font-size: clamp(28px, 2.05vw, 40px);
  font-weight: 300;
  line-height: 1.35;
}

.value__result {
  align-self: center;
  padding: 46px clamp(40px, 7.8vw, 150px);
  transition-delay: .1s;
}

.value__row.is-centered h3,
.value__row.is-centered .value__result {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.value__metric {
  display: flex;
  align-items: center;
  min-height: 1em;
  font-size: clamp(108px, 12.8vw, 246px);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.025em;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

.value__row.is-centered .value__metric {
  animation: value-trim-text 1.05s var(--flow-ease) .18s both;
}

.value__metric small {
  font-size: .43em;
  letter-spacing: .01em;
}

.value__metric--time { gap: clamp(42px, 6vw, 116px); }
.value__result p {
  margin: clamp(36px, 3.6vw, 70px) 0 0;
  color: rgba(247, 251, 255, .45);
  font-size: clamp(25px, 2.45vw, 47px);
  line-height: 1.2;
  letter-spacing: .01em;
}

.value__arrow {
  display: block;
  width: clamp(74px, 7.4vw, 142px);
  height: clamp(112px, 9.4vw, 180px);
  flex: 0 0 auto;
  object-fit: contain;
}

@keyframes value-trim-text { to { clip-path: inset(0 0 0 0); } }

@media (max-aspect-ratio: 4/5) {
  .value__header { min-height: 300px; padding-left: 7vw; }
  .value__header h2 { max-width: 90vw; font-size: clamp(44px, 10vw, 72px); }
  .value__row { grid-template-columns: 38% 62%; min-height: clamp(390px, 72vw, 580px); }
  .value__line--vertical { left: 38%; }
  .value__row h3 { padding-left: 7vw; font-size: clamp(19px, 4.3vw, 30px); }
  .value__result { padding-right: 5vw; padding-left: 7vw; }
  .value__metric { font-size: clamp(65px, 15vw, 118px); }
  .value__metric--time { gap: 5vw; }
  .value__result p { font-size: clamp(17px, 4vw, 27px); }
}

@media (prefers-reduced-motion: reduce) {
  .value__header h2,
  .value__row h3,
  .value__result { opacity: 1; transform: none; transition: none; }
  .value__metric { clip-path: none; }
  .value__line { transform: none; animation: none !important; }
}

/* B_html_2 — simplified information hierarchy */
.product-intro__line {
  font-size: clamp(64px, 5.0vw, 90px);
}

@media (min-width: 901px) {
  .product-intro__line,
  .product-intro__line--last {
    width: max-content;
  }
}

.system__text h2 {
  font-size: clamp(88px, 10.6vw, 204px);
}

.roi__title {
  font-size: clamp(54px, 6.6vw, 128px);
}

.team__title {
  font-size: clamp(4rem, 6.4vw, 7.8rem);
}

.team__identity h3 {
  font-size: clamp(2.45rem, 3.25vw, 4.1rem);
}

.scale {
  height: auto;
  min-height: 100svh;
  background: linear-gradient(180deg, #88969c 0%, #53657b 42%, #0b0f1a 100%);
}

.scale__stage {
  position: relative;
  top: auto;
  display: block;
  height: auto;
  min-height: 100svh;
  padding:
    clamp(74px, min(4.6875vw, 8.33333svh), 180px)
    clamp(40px, min(3.35938vw, 5.97222svh), 129px)
    clamp(80px, min(6.25vw, 11.11111svh), 240px);
  overflow: visible;
}

.scale__header,
.scale__list-viewport {
  position: relative;
  inset: auto;
}

.scale__header {
  position: relative;
  top: auto;
  margin-bottom: clamp(43.2px, min(5.28vw, 9.38667svh), 202.8px);
}

.scale__title {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: max-content;
  max-width: none;
  margin: 0 auto;
  font-size: clamp(44px, min(2.96875vw, 5.27778svh), 114px);
  line-height: 1.22;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  transition: none;
}

.scale__title-break {
  margin-top: .34em;
}

.scale__divider {
  display: none;
}

.scale__list-viewport {
  width: min(61vw, 1400px);
  margin: 0 auto;
  overflow: visible;
}

.scale__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  width: auto;
  height: clamp(520px, min(53.3vw, 52.8svh), 1140px);
  gap: 1px;
  padding: 0;
  transform: none !important;
  background: rgba(255, 255, 255, .34);
  border: 1px solid rgba(255, 255, 255, .34);
  will-change: auto;
}

.scale__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, min(1.79688vw, 3.19444svh), 69px);
  background: #0b101a;
  opacity: 1;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
}

.scale__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.scale__background::before,
.scale__background::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scale__background::before {
  background: var(--scale-card-image) center / cover no-repeat;
  transform: scale(1);
  transition: transform 650ms var(--flow-ease);
  will-change: transform;
}

.scale__background::after {
  background: linear-gradient(180deg, rgba(8, 13, 22, .58), rgba(8, 13, 22, .76));
}

.scale__item:hover .scale__background::before {
  transform: scale(1.2);
}

.scale__item > :not(.scale__background) {
  position: relative;
  z-index: 1;
}

.scale__item::before,
.scale__item::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: .84vw;
  min-width: 10px;
  max-width: 18px;
  aspect-ratio: 1;
  border: max(var(--b-line-thickness), .5px) solid rgba(255, 255, 255, .82);
  background: #0b101a;
  box-shadow: inset 0 0 0 .16vw #f4fbff;
  pointer-events: none;
}

.scale__item:nth-child(2)::before,
.scale__item:nth-child(2)::after,
.scale__item:nth-child(3)::before,
.scale__item:nth-child(3)::after {
  display: none;
}

.scale__item:nth-child(1)::before,
.scale__item:nth-child(4)::before {
  top: calc(var(--b-node-size) * -.5);
  left: calc(var(--b-node-size) * -.5);
}

.scale__item:nth-child(4)::after {
  top: calc(var(--b-node-size) * -.5);
  right: calc(var(--b-node-size) * -.5);
}

.scale__item:nth-child(1)::after {
  bottom: calc(var(--b-node-size) * -.5);
  left: calc(var(--b-node-size) * -.5);
}

.scale__item:nth-child(1) {
  --scale-card-image: url("./assets/images/scale/b_loadingdock_img.webp");
}

.scale__item:nth-child(2) {
  --scale-card-image: url("./assets/images/scale/b_validate_img.webp");
}

.scale__item:nth-child(3) {
  --scale-card-image: url("./assets/images/scale/b_system_img.webp");
}

.scale__item:nth-child(4) {
  --scale-card-image: url("./assets/images/scale/b_intra_img.webp");
}

.scale__item-heading {
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(116px, min(8.75vw, 15.55556svh), 336px);
  gap: clamp(16px, min(1.09375vw, 1.94444svh), 42px);
  color: #fff;
}

.scale__item-heading img,
.scale__icon {
  width: clamp(40px, min(2.34375vw, 4.16667svh), 90px);
  height: clamp(40px, min(2.34375vw, 4.16667svh), 90px);
}

.scale__item h3 {
  color: #fff;
  font-size: clamp(25px, min(1.48438vw, 2.63889svh), 57px);
  white-space: normal;
}

.scale__icon,
.scale__icon path {
  color: #fff;
  stroke: #fff;
}

.scale__lead {
  margin-top: auto !important;
  font-size: clamp(22px, min(1.25vw, 2.22222svh), 48px);
  min-height: 2.4em;
}

.scale__item > p:last-child {
  margin-top: clamp(18px, min(.70313vw, 1.25svh), 27px);
  font-size: clamp(15px, min(.78125vw, 1.38889svh), 30px);
}

.value__header {
  min-height: 0;
  padding-bottom: clamp(54px, 5vw, 88px);
}

.value__header h2 {
  max-width: 70vw;
  font-size: clamp(42px, 4.05vw, 78px);
  line-height: 1.13;
}

.value__row {
  min-height: clamp(250px, 19vw, 360px);
}

.value__row h3 {
  padding-top: clamp(48px, 5vw, 86px);
  font-size: clamp(22px, 1.6vw, 31px);
}

.value__result {
  padding-top: 32px;
  padding-bottom: 32px;
}

.value__metric {
  font-size: clamp(72px, 8vw, 154px);
}

.value__arrow {
  width: clamp(52px, 5vw, 96px);
  height: clamp(78px, 6.5vw, 126px);
}

.value__result p {
  margin-top: clamp(22px, 2vw, 36px);
  font-size: clamp(18px, 1.6vw, 31px);
}

@media (max-width: 900px) {
  .product-intro__line { font-size: clamp(40px, 10vw, 64px); }
  .system__text h2 { font-size: clamp(68px, 19vw, 118px); }
  .roi__title { font-size: clamp(46px, 13vw, 76px); }
  .team__title { font-size: clamp(3.8rem, 14vw, 6.4rem); }

  .scale {
    height: auto;
    min-height: 0;
  }

  .scale__stage {
    display: block;
    min-height: 0;
    padding: 80px 7vw 72px;
  }

  .scale__header {
    position: relative;
    top: auto;
    margin-bottom: 43.2px;
  }

  .scale__title {
    position: relative;
    top: auto;
    width: max-content;
    max-width: none;
    font-size: clamp(18px, 4.6vw, 38px);
    white-space: nowrap;
  }

  .scale__list-viewport {
    width: 100%;
  }

  .scale__track {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }

  .scale__item {
    min-height: 260px;
  }

  .scale__item h3 { font-size: clamp(26px, 7vw, 42px); }
  .scale__lead { font-size: clamp(22px, 5.8vw, 34px); }
  .scale__item > p:last-child { font-size: clamp(15px, 3.8vw, 21px); }

  .value__header h2 {
    max-width: 90vw;
    font-size: clamp(38px, 8.5vw, 60px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .scale__icon path {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  .scale__item-heading h3,
  .scale__lead,
  .scale__item > p:last-child {
    transition: none;
  }
}

/* Hero → partners → product intro: natural document flow */
@media (max-width: 1200px) {
  .partners__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(78vw, 820px);
  }

  .partners__item {
    aspect-ratio: auto;
  }
}

@media (max-width: 900px) {
  .product-intro {
    --product-intro-copy-left: 7vw;
  }

  .partners {
    min-height: 0;
    padding: 72px 7vw 84px;
  }

  .partners__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24.64px;
    width: 100%;
  }

  .partners__item {
    aspect-ratio: auto;
  }

  .product-intro__copy {
    top: 18%;
    left: 7vw;
    width: 86vw;
    text-align: left;
  }

  .product-intro__eyebrow {
    margin-bottom: 24px;
    font-size: clamp(18px, 4.5vw, 25px);
  }

  .product-intro__line {
    font-size: clamp(38px, 9vw, 62px);
  }

  .product-intro__line--last {
    width: max-content;
    margin: 22px 0 0;
  }

  .product-intro__beaver {
    right: -16vw;
    bottom: 9%;
    width: min(82vw, 620px);
    max-height: 62%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-intro.is-sequence-enabled .product-intro__beaver {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .product-intro.is-sequence-enabled .product-intro__beaver--top {
    opacity: 0;
  }
}

/* Value — single-screen comparison */
.value {
  min-height: 100svh;
}

.value__header {
  min-height: clamp(320px, min(19.53125vw, 34.72222svh), 750px);
  padding:
    clamp(74px, min(4.6875vw, 8.33333svh), 180px)
    clamp(40px, min(3.35938vw, 5.97222svh), 129px)
    clamp(48px, min(3.125vw, 5.55556svh), 120px);
}

.value__header h2 {
  width: max-content;
  max-width: none;
  margin: 0 auto;
  font-size: clamp(44px, min(2.96875vw, 5.27778svh), 114px);
  line-height: 1.22;
  text-align: center;
  white-space: nowrap;
}

.value__table {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: max(59svh, 560px);
}

.value__grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.value__line--horizontal {
  top: 28%;
  left: 0;
  width: 100%;
  height: max(var(--b-line-thickness), .5px);
  transform: scaleX(0);
  transform-origin: left center;
}

.value__line--vertical-one,
.value__line--vertical-two {
  top: 0;
  bottom: 0;
  width: max(var(--b-line-thickness), .5px);
  transform: scaleY(0);
  transform-origin: center 28%;
}

.value__line--vertical-one { left: 33.333%; }
.value__line--vertical-two { left: 66.666%; }

.value__node {
  position: absolute;
  top: 28%;
  width: var(--b-node-size);
  aspect-ratio: 1;
  border: 1px solid rgba(247, 251, 255, .8);
  background: #24324b;
  box-shadow: inset 0 0 0 3px #24324b, inset 0 0 0 5px #f7fbff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65);
}

/* Value-node geometry shared by Scale and ROI corner markers. */
.scale__item::before,
.scale__item::after,
.roi__card::before {
  width: var(--b-node-size);
  min-width: 0;
  max-width: none;
  border: 1px solid rgba(247, 251, 255, .8);
  background: #24324b;
  box-shadow: inset 0 0 0 3px #24324b, inset 0 0 0 5px #f7fbff;
}

.scale__item:nth-child(1)::before,
.roi__card--warehouse::before {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.scale__item:nth-child(2)::before,
.roi__card--pharma::before {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translate(50%, -50%);
}

.scale__item:nth-child(3)::before,
.roi__card--manufacturing::before {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

.scale__item:nth-child(4)::before,
.roi__card--cross::before {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  transform: translate(50%, 50%);
}

.value__node--one { left: 33.333%; }
.value__node--two { left: 66.666%; }

.value__table.is-drawn .value__line--horizontal {
  animation: value-line-x .85s var(--flow-ease) both;
}

.value__table.is-drawn .value__line--vertical-one,
.value__table.is-drawn .value__line--vertical-two {
  animation: value-line-y 1s var(--flow-ease) .38s both;
}

.value__table.is-drawn .value__node {
  animation: value-node-in .35s var(--flow-ease) .7s both;
}

@keyframes value-node-in {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.value__row {
  display: grid;
  grid-template: 28% 72% / minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.value__label {
  align-self: center;
  justify-self: center;
  width: max-content;
  max-width: 88%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, min(.9375vw, 1.66667svh), 36px);
}

.value__icon {
  flex: 0 0 auto;
  width: clamp(48px, min(3.125vw, 5.55556svh), 120px);
  height: auto;
  overflow: hidden;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.value__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.value__table.is-drawn .value__row:nth-child(2) .value__icon path {
  animation: value-icon-trim .72s var(--flow-ease) .5s both;
}

.value__table.is-drawn .value__row:nth-child(3) .value__icon path {
  animation: value-icon-trim .72s var(--flow-ease) .58s both;
}

.value__table.is-drawn .value__row:nth-child(4) .value__icon path {
  animation: value-icon-trim .72s var(--flow-ease) .66s both;
}

@keyframes value-icon-trim {
  to { stroke-dashoffset: 0; }
}

.value__row h3 {
  align-self: center;
  justify-self: center;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: clamp(20px, min(1.17188vw, 2.08333svh), 45px);
  line-height: 1.25;
  text-align: left;
  text-wrap: balance;
}

.value__result {
  align-self: start;
  min-width: 0;
  padding:
    clamp(74px, min(4.60938vw, 8.19444svh), 177px)
    clamp(34px, min(2.96875vw, 5.27778svh), 114px)
    clamp(54px, min(3.59375vw, 6.38889svh), 138px);
  text-align: center;
}

.value__metric {
  justify-content: center;
  font-size: clamp(72px, min(5.23438vw, 9.30556svh), 201px);
  line-height: .9;
}

.value__metric--time {
  gap: 0;
}

.value__arrow {
  width: clamp(48px, min(3.35938vw, 5.97222svh), 129px);
  height: clamp(72px, min(4.53125vw, 8.05556svh), 174px);
}

.value__result p {
  margin: clamp(28px, min(1.79688vw, 3.19444svh), 69px) 0 0;
  font-size: clamp(17px, min(1.09375vw, 1.94444svh), 42px);
  line-height: 1.2;
}

.value__descriptor {
  display: block;
  margin-top: clamp(22px, min(1.25vw, 2.22222svh), 48px);
  line-height: 1.1;
}

@media (min-width: 901px) and (max-width: 1500px) {
  .value__header {
    min-height: clamp(290px, 38svh, 410px);
  }

  .value__table {
    min-height: max(62svh, 500px);
  }

  .value__result {
    padding-right: 3vw;
    padding-left: 3vw;
  }
}

@media (max-width: 900px) {
  .value {
    min-height: 0;
  }

  .value__header {
    min-height: 0;
    padding: 80px 7vw 64px;
  }

  .value__header h2 {
    max-width: none;
    font-size: clamp(18px, 4.6vw, 38px);
  }

  .value__table {
    display: block;
    min-height: 0;
  }

  .value__grid {
    display: none;
  }

  .value__row {
    display: grid;
    grid-template-columns: 38% 62%;
    min-height: 280px;
    border-top: 1px solid rgba(247, 251, 255, .55);
  }

  .value__row:last-child {
    border-bottom: 1px solid rgba(247, 251, 255, .55);
  }

  .value__row h3 {
    padding: 0;
    font-size: clamp(18px, 4.2vw, 27px);
    text-align: left;
  }

  .value__label {
    align-self: center;
    justify-self: start;
    width: auto;
    max-width: none;
    padding: 36px 12px 36px 7vw;
    justify-content: flex-start;
  }

  .value__result {
    align-self: center;
    padding: 36px 6vw;
    text-align: left;
  }

  .value__metric {
    justify-content: flex-start;
    font-size: clamp(54px, 13vw, 92px);
  }

  .value__metric--time {
    gap: 5vw;
  }

  .value__result p {
    font-size: clamp(16px, 3.8vw, 23px);
  }
}

@media (max-width: 520px) {
  .value__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .value__line--horizontal,
  .value__line--vertical-one,
  .value__line--vertical-two {
    animation: none !important;
    transform: none;
  }

  .value__node {
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .value__icon path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}

/* ROI — centered title and fixed 2 × 2 industry grid */
.roi {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding:
    clamp(74px, min(4.6875vw, 8.33333svh), 180px)
    clamp(40px, min(3.35938vw, 5.97222svh), 129px)
    clamp(80px, min(6.25vw, 11.11111svh), 240px);
}

.roi__title {
  position: relative;
  order: -1;
  inset: auto;
  width: max-content;
  max-width: none;
  margin: 0 auto clamp(72px, min(8.8vw, 15.64444svh), 338px);
  font-size: clamp(44px, min(2.96875vw, 5.27778svh), 114px);
  line-height: 1.22;
  text-align: center;
  white-space: nowrap;
}

.roi__cards {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  width: min(67vw, 2570px);
  height: clamp(520px, min(53.3vw, 52.8svh), 1140px);
  margin: 0 auto;
}

.roi__card,
.roi__card--warehouse,
.roi__card--pharma,
.roi__card--manufacturing,
.roi__card--cross,
.roi__card--warehouse:is(:hover, :focus-visible),
.roi__card--pharma:is(:hover, :focus-visible),
.roi__card--manufacturing:is(:hover, :focus-visible),
.roi__card--cross:is(:hover, :focus-visible) {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
}

.roi__clip {
  position: absolute;
  inset: 0;
}

.roi__card::before {
  display: none;
}

.roi__card--warehouse::before,
.roi__card--pharma::before,
.roi__card--manufacturing::before,
.roi__card--cross::before {
  display: block;
}

.roi__card--pharma::before {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translate(50%, -50%);
}

.roi__card--manufacturing::before {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

.roi__card--cross::before {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  transform: translate(50%, 50%);
}

.roi__content,
.roi__card:is(:hover, :focus-visible) .roi__content {
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(24px, min(1.65vw, 2.93333svh), 63px);
  text-align: left;
}

.roi__icon,
.roi__card:is(:hover, :focus-visible) .roi__icon {
  width: clamp(54px, min(4.2vw, 7.46667svh), 161px);
  max-height: clamp(54px, min(4.2vw, 7.46667svh), 161px);
}

.roi__card h3,
.roi__card:is(:hover, :focus-visible) h3 {
  margin-top: clamp(16px, min(1.15vw, 2.04444svh), 44px);
  font-size: clamp(20px, min(1.28vw, 2.27556svh), 49px);
}

.roi__details,
.roi__card:not(:hover):not(:focus-visible) .roi__details {
  position: static;
  max-width: 96%;
  margin-top: clamp(14px, min(.85vw, 1.51111svh), 33px);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.roi__details strong {
  font-size: clamp(25px, min(1.65vw, 2.93333svh), 63px);
}

.roi__details p {
  max-height: 5em;
  margin-top: clamp(8px, min(.55vw, .97778svh), 21px);
  font-size: clamp(15px, min(1.05vw, 1.86667svh), 40px);
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: none;
}

.roi__card:hover .roi__details p,
.roi__card:focus-visible .roi__details p {
  max-height: 5em;
  margin-top: clamp(8px, min(.55vw, .97778svh), 21px);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 900px) {
  .roi {
    min-height: 0;
    padding: 80px 7vw 72px;
  }

  .roi__title {
    width: max-content;
    margin-bottom: 56px;
    font-size: clamp(18px, 4.6vw, 38px);
  }

  .roi__cards {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    width: 100%;
    height: auto;
  }

  .roi__card,
  .roi__card--warehouse,
  .roi__card--pharma,
  .roi__card--manufacturing,
  .roi__card--cross {
    min-height: 300px;
  }
}

/* Team — centered title and three-column profile layout */
.team {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding:
    clamp(74px, min(4.6875vw, 8.33333svh), 180px)
    0
    clamp(72px, min(5vw, 8.88889svh), 192px);
  background: linear-gradient(180deg, #0b0f1a 0%, #111827 62%, #25334e 100%);
}

.team__rule {
  display: none;
}

.team__title {
  position: relative;
  inset: auto;
  justify-content: center;
  width: max-content;
  margin: 0 auto clamp(72px, min(6.2vw, 11.02222svh), 238px);
  font-size: clamp(44px, min(2.96875vw, 5.27778svh), 114px);
  line-height: 1.22;
  text-align: center;
  white-space: nowrap;
}

.team__members {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(245, 251, 255, .48);
  transform: translateY(calc(-1 * clamp(32px, 3vw, 72px)));
}

.team__member {
  display: grid;
  grid-template-columns: clamp(86px, min(6.25vw, 11.11111svh), 240px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 clamp(24px, min(2vw, 3.55556svh), 77px);
  min-width: 0;
  min-height: clamp(410px, min(31vw, 55.11111svh), 1190px);
  padding:
    clamp(29px, min(2.05vw, 3.644445svh), 78.5px)
    clamp(38px, min(3.4vw, 6.04444svh), 131px)
    clamp(64px, min(5vw, 8.88889svh), 192px);
}

.team__member + .team__member {
  position: relative;
  border-left: 1px solid rgba(245, 251, 255, .48);
}

.team__member + .team__member::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: var(--b-node-size);
  min-width: 0;
  max-width: none;
  aspect-ratio: 1;
  border: 1px solid rgba(247, 251, 255, .8);
  background: #24324b;
  box-shadow: inset 0 0 0 3px #24324b, inset 0 0 0 5px #f7fbff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.team__portrait {
  width: clamp(86px, min(6.25vw, 11.11111svh), 240px);
}

.team__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.team__identity h3 {
  order: 2;
  margin: clamp(10px, min(.72vw, 1.28svh), 28px) 0;
  font-size: clamp(34px, min(2.45vw, 4.35556svh), 94px);
  line-height: 1;
}

.team__identity p {
  display: contents;
  font-size: clamp(23px, min(1.6vw, 2.84444svh), 61px);
}

.team__identity strong {
  order: 1;
}

.team__identity span {
  order: 3;
  font-size: .78em;
}

.team__history {
  grid-column: 2;
  align-self: start;
  justify-self: start;
  margin: clamp(18.5px, min(1.53vw, 2.72svh), 59px) 0 0;
  font-size: clamp(19px, min(1.38vw, 2.45333svh), 53px);
  line-height: 1.28;
  text-align: left;
}

.contact {
  height: 48svh;
  min-height: 420px;
  background: linear-gradient(180deg, #25334e 0%, #78899b 100%);
}

.contact__content {
  transform: none;
}

@media (max-width: 900px) {
  .team {
    min-height: 0;
    padding: 80px 0 0;
  }

  .team__title {
    margin-bottom: 56px;
    font-size: clamp(18px, 4.6vw, 38px);
  }

  .team__members {
    grid-template-columns: 1fr;
    transform: none;
  }

  .team__member {
    grid-template-columns: clamp(74px, 22vw, 112px) minmax(0, 1fr);
    min-height: 0;
    padding: 24px 7vw 64px;
  }

  .team__member + .team__member {
    border-top: 1px solid rgba(245, 251, 255, .35);
    border-left: 0;
  }

  .team__member + .team__member::before {
    display: none;
  }

  .team__portrait {
    width: clamp(74px, 22vw, 112px);
  }

  .team__history {
    grid-column: 2;
    justify-self: start;
    margin-top: 15px;
    text-align: left;
  }

  .contact {
    height: auto;
    min-height: 420px;
    padding: 72px 0;
  }
}

/* Global 1920px content grid: 250px safe margins. */
.hero__header {
  position: fixed;
  top: 0;
  right: var(--section-card-gutter);
  left: var(--section-card-gutter);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--nav-padding-block);
  isolation: isolate;
}

.hero__header::before {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 360ms ease;
}

.hero__header.is-scrolled::before {
  opacity: 1;
}

.hero__lead {
  right: var(--section-card-gutter);
  left: var(--section-card-gutter);
}

.partners__list,
.value__header,
.value__table,
.team__members,
.contact__content {
  width: var(--layout-width);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

.product-intro {
  --product-intro-copy-left: var(--layout-gutter);
}

.product-intro__copy {
  right: var(--layout-gutter);
  left: var(--product-intro-copy-left);
  width: auto;
  max-width: var(--layout-width);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
}

.product-intro__copy > * {
  grid-column: 2 / -1;
}

.product-intro__beaver {
  right: var(--layout-gutter);
  max-width: var(--layout-width);
}

/* Mirror the copy's one-column inset on the right-side perspective Beaver. */
@media (min-width: 901px) {
  .product-intro__beaver--front {
    right: calc(var(--layout-gutter) + 6.23264vw);
    top: 25%;
    bottom: auto;
    width: min(33.6vw, 60.48svh, 714px);
  }
}

.product__visual,
.product__handoff {
  max-width: var(--layout-width);
}

.product__visual {
  width: min(var(--layout-width), 100svh);
  height: min(var(--layout-width), 100svh);
}

.system__stage {
  width: var(--layout-width);
  margin-right: auto;
  margin-left: auto;
}

.value__header {
  padding-right: 0;
  padding-left: 0;
}

.scale__stage {
  width: 100%;
  padding-right: var(--layout-gutter);
  padding-left: var(--layout-gutter);
}

.scale__list-viewport {
  width: var(--section-card-width);
  max-width: none;
}

.scale__item-heading img,
.scale__icon {
  width: clamp(60px, min(3.515625vw, 6.25svh), 135px);
  height: clamp(60px, min(3.515625vw, 6.25svh), 135px);
}

.scale__icon path {
  stroke-width: 25;
}

.roi__cards {
  width: var(--section-card-width);
  max-width: none;
}

@media (min-width: 901px) {
  .value__header,
  .scale__stage,
  .roi,
  .team {
    padding-top: var(--section-title-top);
  }
}

@media (max-width: 900px) {
  :root {
    --layout-gutter: 7vw;
    --section-card-width: 86vw;
  }

  .hero__nav {
    display: none;
  }

  .partners__list,
  .value__table,
  .team__members {
    width: var(--layout-width);
  }

  .scale__list-viewport,
  .roi__cards {
    width: var(--section-card-width);
  }

  .product-intro__beaver {
    right: var(--layout-gutter);
    max-width: 86vw;
  }

  .product-intro__copy {
    display: block;
  }

  .system__stage {
    width: 100%;
  }

  .scale__stage {
    width: 100%;
    padding-right: var(--layout-gutter);
    padding-left: var(--layout-gutter);
  }
}

/* Mobile full-screen navigation */
.mobile-nav-toggle,
.mobile-nav { display: none; }

@media (max-width: 900px) {
  .mobile-nav-toggle {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 0;
    color: #f5fbff;
    background: transparent;
    cursor: pointer;
    flex: 0 0 38px;
    margin-left: auto;
  }

  .mobile-nav-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform 300ms var(--flow-ease), opacity 180ms ease;
  }

  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
  }

  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
  }

  .mobile-nav {
    position: fixed;
    z-index: 2147482999;
    inset: 0;
    display: flex;
    align-items: flex-start;
    padding: calc(var(--nav-height, 72px) + 8svh) var(--layout-gutter) 8svh;
    background: #0b0f1a;
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform 480ms var(--flow-ease), visibility 0s linear 480ms;
  }

  .mobile-nav.is-open {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .mobile-nav__links {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .mobile-nav__links a {
    width: 100%;
    padding: 20px 0;
    border-bottom: var(--b-line-thickness) solid rgba(245, 251, 255, .24);
    color: #f5fbff;
    font-size: clamp(34px, 9vw, 52px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: .03em;
    text-decoration: none;
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition: opacity 280ms ease, transform 360ms var(--flow-ease);
  }

  .mobile-nav.is-open .mobile-nav__links a {
    opacity: 1;
    transform: none;
  }

  .mobile-nav.is-open .mobile-nav__links a:nth-child(1) { transition-delay: 150ms; }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(2) { transition-delay: 210ms; }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(3) { transition-delay: 270ms; }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(4) { transition-delay: 330ms; }

  body.is-mobile-nav-open { overflow: hidden; }

  .hero__header {
    right: auto;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    padding-right: var(--layout-gutter);
    padding-left: var(--layout-gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav-toggle span,
  .mobile-nav__links a { transition-duration: 0.01ms !important; }
}

/* Mobile typography keeps the desktop hierarchy without shrinking titles away. */
@media (max-width: 900px) {
  :root {
    --type-display: clamp(40px, 10.25vw, 56px);
    --type-title: clamp(34px, 8.7vw, 46px);
    --type-subtitle: clamp(21px, 5.35vw, 28px);
    --type-body: clamp(15px, 3.85vw, 19px);
    --type-caption: clamp(12px, 3.1vw, 15px);
  }

  .value__header h2,
  .scale__title,
  .roi__title,
  .team__title,
  .contact-inquiry__copy h1,
  .office__copy h1 {
    font-size: var(--type-title);
  }

  .product-intro__line,
  .system__text h2,
  .system__text-mask h2 {
    font-size: var(--type-display);
  }

  .scale__item h3,
  .scale__lead,
  .value__feature-copy h3,
  .roi__details strong,
  .team__identity h3,
  .contact__title,
  .contact__button {
    font-size: var(--type-subtitle);
  }

  .mobile-nav__links a {
    font-size: clamp(18px, 5.1vw, 24px);
    line-height: 1.15;
  }

  .hero__image {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Team heading follows the shared left-aligned section grid. */
.team__header {
  width: var(--section-card-width);
  margin: 0 auto clamp(72px, min(6.2vw, 11.02222svh), 238px);
  text-align: left;
}

.team__header .team__title {
  display: block;
  height: auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  align-items: initial;
  text-align: left;
  line-height: 1.22;
}

.team__subtitle {
  margin: clamp(20px, min(1.55vw, 2.75556svh), 60px) 0 0;
  color: rgba(244, 251, 255, .92);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .03em;
}

@media (max-width: 900px) {
  .team__header {
    width: var(--section-card-width);
    margin-bottom: 56px;
  }

  .team__subtitle {
    margin-top: 18px;
  }
}

/* Contact / Korea office */
.office-page {
  color: #f5fbff;
  background: #0b0f1a;
}

.contact-page-main {
  background: #0b0f1a;
}

.contact-inquiry {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(rgba(242, 249, 252, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 249, 252, .055) 1px, transparent 1px),
    linear-gradient(180deg, #0b0f1a 0%, #111827 64%, #25334e 100%);
  background-size: 4vw 4vw, 4vw 4vw, 100% 100%;
}

.contact-inquiry::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 74% 20%, rgba(92, 121, 158, .18), transparent 36%);
  content: "";
  pointer-events: none;
}

.contact-inquiry::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(90px, 12svh, 150px);
  background: linear-gradient(180deg, rgba(11, 15, 26, 0), #0b0f1a);
  content: "";
  pointer-events: none;
}

.contact-inquiry__layout {
  position: relative;
  z-index: 1;
  width: var(--section-card-width);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--nav-height) + clamp(70px, 6vw, 116px)) 0 clamp(70px, 5vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(70px, 6vw, 116px);
  align-items: start;
}

.contact-inquiry__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-inquiry__eyebrow {
  margin: 0 0 clamp(18px, 1.35vw, 26px);
  color: rgba(245, 251, 255, .58);
  font-size: var(--type-caption);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contact-inquiry__copy h1 {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .03em;
}

.contact-inquiry__description {
  max-width: 29ch;
  margin: clamp(26px, 2.15vw, 41px) 0 0;
  color: rgba(245, 251, 255, .72);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .03em;
}

.contact-form {
  width: 100%;
  align-self: start;
  padding: clamp(27px, 2.2vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1vw, 20px);
  border: var(--b-line-thickness) solid rgba(245, 251, 255, .22);
  background: rgba(8, 12, 21, .38);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

.contact-form__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1vw, 20px);
}

.contact-form__field {
  position: relative;
  min-width: 0;
  display: block;
  color: rgba(245, 251, 255, .58);
  font-size: var(--type-body);
  font-weight: 300;
}

.contact-form__field span {
  position: absolute;
  top: 50%;
  left: clamp(18px, 1.35vw, 26px);
  z-index: 1;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 160ms ease;
}

.contact-form__field--message span {
  top: clamp(19px, 1.35vw, 26px);
  transform: none;
}

.contact-form__field:focus-within span,
.contact-form__field:has(input:not(:placeholder-shown)) span,
.contact-form__field:has(textarea:not(:placeholder-shown)) span {
  opacity: 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: var(--b-line-thickness) solid rgba(245, 251, 255, .48);
  border-radius: 0;
  outline: none;
  color: #f5fbff;
  background: rgba(255, 255, 255, .025);
  font: inherit;
  font-weight: 300;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.contact-form input {
  height: clamp(58px, 4.3vw, 83px);
  padding: 0 clamp(18px, 1.35vw, 26px);
}

.contact-form textarea {
  min-height: clamp(112px, 8.2vw, 158px);
  padding: clamp(19px, 1.35vw, 26px);
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .05);
}

.contact-form__submit {
  width: 100%;
  min-height: clamp(58px, 4.3vw, 83px);
  margin-top: clamp(12px, 1vw, 19px);
  border: var(--b-line-thickness) solid rgba(245, 251, 255, .66);
  border-radius: 0;
  color: #f5fbff;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-subtitle);
  font-weight: 300;
  letter-spacing: .03em;
  transition: color 180ms ease, background-color 180ms ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  color: #0b0f1a;
  background: #f5fbff;
}

.contact-form__submit:focus-visible {
  outline: 1px solid #f5fbff;
  outline-offset: 5px;
}

.office {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(rgba(242, 249, 252, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 249, 252, .055) 1px, transparent 1px),
    linear-gradient(180deg, #0b0f1a 0%, #111827 61%, #25334e 100%);
  background-size: 4vw 4vw, 4vw 4vw, 100% 100%;
}

.office::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 74% 20%, rgba(92, 121, 158, .18), transparent 36%);
  content: "";
  pointer-events: none;
}

.office__layout {
  width: var(--section-card-width);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--nav-height) + clamp(70px, 6vw, 116px)) 0 clamp(70px, 5vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(70px, 6vw, 116px);
  align-items: stretch;
}

.office__copy {
  align-self: stretch;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.office__copy h1 {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .03em;
}

.office__address {
  margin-top: auto;
  margin-bottom: clamp(80px, 8svh, 154px);
}

.office__address h2 {
  margin: 0 0 clamp(22px, 1.8vw, 35px);
  font-size: var(--type-subtitle);
  font-weight: 300;
  line-height: 1.2;
}

.office__address address {
  color: rgba(245, 251, 255, .72);
  font-size: var(--type-body);
  font-style: normal;
  font-weight: 300;
  line-height: 1.55;
}

.office__join {
  width: 100%;
  padding: clamp(20px, 1.55vw, 30px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f5fbff;
  border-top: var(--b-line-thickness) solid rgba(245, 251, 255, .64);
  border-bottom: var(--b-line-thickness) solid rgba(245, 251, 255, .28);
  font-size: var(--type-subtitle);
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  transition: padding 220ms var(--flow-ease), background-color 220ms ease;
}

.office__join-arrow {
  display: block;
  width: .82em;
  height: .82em;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.office__join-arrow path {
  vector-effect: non-scaling-stroke;
}

.office__join:hover,
.office__join:focus-visible {
  padding-right: clamp(14px, 1vw, 20px);
  padding-left: clamp(14px, 1vw, 20px);
  background: rgba(255, 255, 255, .055);
}

.office__join:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .82);
  outline-offset: 5px;
}

.office__map {
  position: relative;
  width: 100%;
  height: auto;
  min-height: clamp(480px, 60svh, 720px);
  border: var(--b-line-thickness) solid rgba(245, 251, 255, .58);
  background: #111827;
  overflow: hidden;
}

.office__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.72) contrast(.94);
}

@media (max-width: 900px) {
  .contact-inquiry {
    overflow: visible;
  }

  .contact-inquiry__layout {
    width: var(--layout-width);
    min-height: 100svh;
    padding: calc(var(--nav-height) + 42px) 0 72px;
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .contact-inquiry__copy {
    gap: 0;
  }

  .contact-inquiry__eyebrow {
    margin-bottom: 18px;
  }

  .contact-inquiry__description {
    margin-top: 24px;
    font-size: var(--type-body);
  }

  .contact-form {
    padding: 22px;
  }

  .contact-form__split {
    grid-template-columns: 1fr;
  }

  .office {
    overflow: visible;
  }

  .office__layout {
    width: var(--layout-width);
    min-height: 100svh;
    padding: calc(var(--nav-height) + 42px) 0 64px;
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .office__copy h1 {
    font-size: var(--type-title);
  }

  .office__address {
    margin: 64px 0 52px;
  }

  .office__join {
    font-size: var(--type-subtitle);
  }

  .office__map {
    height: min(72vw, 520px);
    min-height: 340px;
  }
}

/* Careers — native Bstar recruitment page */
.careers-page {
  color: #f5fbff;
  background: #0b0f1a;
}

.careers {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(rgba(242, 249, 252, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 249, 252, .06) 1px, transparent 1px),
    linear-gradient(180deg, #0b0f1a 0%, #111827 64%, #25334e 100%);
  background-size: 4vw 4vw, 4vw 4vw, 100% 100%;
}

.careers::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 74% 16%, rgba(92, 121, 158, .18), transparent 34%);
  pointer-events: none;
}

.careers__header {
  width: var(--layout-width);
  margin: 0 auto;
  padding-top: clamp(28px, 3vw, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.careers__brand img {
  display: block;
  width: clamp(86px, 6.25vw, 120px);
  height: auto;
}

.careers__back {
  color: rgba(245, 251, 255, .66);
  font-size: var(--type-caption);
  text-decoration: none;
  transition: color 220ms ease;
}

.careers__back:hover,
.careers__back:focus-visible {
  color: #fff;
}

.careers__hero {
  width: var(--layout-width);
  margin: 0 auto;
  padding: clamp(190px, 17vw, 326px) 0 clamp(92px, 8vw, 154px);
}

.careers__eyebrow,
.careers__index {
  margin: 0;
  color: rgba(245, 251, 255, .5);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.careers__hero h1 {
  width: max-content;
  max-width: 100%;
  margin: clamp(22px, 1.8vw, 35px) 0 clamp(45px, 4vw, 77px);
  font-size: var(--type-display);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.careers__contact {
  width: fit-content;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 1.5vw, 29px);
  color: #fff;
  font-size: var(--type-subtitle);
  text-decoration: none;
}

.careers__contact span {
  color: rgba(245, 251, 255, .52);
  font-size: var(--type-caption);
}

.careers__content {
  width: var(--layout-width);
  margin: 0 auto;
  padding-bottom: clamp(100px, 10vw, 192px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--b-line-thickness) solid rgba(245, 251, 255, .42);
  border-left: var(--b-line-thickness) solid rgba(245, 251, 255, .42);
}

.careers__panel {
  position: relative;
  min-height: 0;
  padding: clamp(32px, 3.1vw, 60px);
  display: grid;
  grid-template-columns: clamp(36px, 3vw, 58px) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 38px);
  border-right: var(--b-line-thickness) solid rgba(245, 251, 255, .42);
  border-bottom: var(--b-line-thickness) solid rgba(245, 251, 255, .42);
  background: rgba(10, 15, 26, .16);
}

.careers__panel:not(.careers__panel--wide) {
  height: clamp(340px, min(22vw, 40svh), 460px);
  padding-bottom: clamp(32px, 3.1vw, 60px);
}

.careers__panel::before {
  content: "";
  position: absolute;
  top: calc(var(--b-node-size) * -.5);
  left: calc(var(--b-node-size) * -.5);
  width: var(--b-node-size);
  aspect-ratio: 1;
  border: max(var(--b-line-thickness), .5px) solid rgba(255, 255, 255, .9);
  background: #111827;
  box-shadow: inset 0 0 0 calc(var(--b-node-size) * .27) #111827, inset 0 0 0 calc(var(--b-node-size) * .5) #fff;
}

.careers__panel--wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.careers__panel h2 {
  margin: 0 0 clamp(24px, 2vw, 38px);
  font-size: var(--type-subtitle);
  font-weight: 300;
  line-height: 1.15;
}

.careers__panel p,
.careers__panel li {
  color: rgba(245, 251, 255, .72);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.55;
}

.careers__panel p {
  max-width: 66ch;
  margin: 0;
}

.careers__panel p + p {
  margin-top: 1em;
}

.careers__panel strong {
  color: #fff;
  font-weight: 300;
}

.careers__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.careers__panel li {
  position: relative;
  padding-left: 1.2em;
}

.careers__panel li + li {
  margin-top: .72em;
}

.careers__panel li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 0;
  width: .35em;
  height: var(--b-line-thickness);
  background: rgba(245, 251, 255, .74);
}

.careers__apply {
  padding-top: clamp(66px, 6vw, 115px);
  padding-bottom: clamp(76px, 7vw, 134px);
  background: rgba(93, 116, 145, .15);
}

.careers__apply-link {
  width: min(100%, 690px);
  margin-top: clamp(44px, 4vw, 77px);
  padding: clamp(22px, 1.8vw, 35px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  font-size: var(--type-body);
  text-decoration: none;
  border-top: var(--b-line-thickness) solid rgba(245, 251, 255, .62);
  border-bottom: var(--b-line-thickness) solid rgba(245, 251, 255, .28);
  transition: padding 240ms var(--flow-ease), background 240ms ease;
}

.careers__apply-link strong {
  font-weight: 300;
}

.careers__apply-link:hover,
.careers__apply-link:focus-visible {
  padding-right: 18px;
  padding-left: 18px;
  background: rgba(255, 255, 255, .06);
}

@media (max-width: 900px) {
  .careers {
    background-size: 40px 40px, 40px 40px, 100% 100%;
  }

  .careers__hero {
    padding-top: 96px;
    padding-bottom: 76px;
  }

  .careers__hero h1 {
    max-width: 100%;
  }

  .careers__content {
    grid-template-columns: 1fr;
  }

  .careers__panel,
  .careers__panel--wide {
    grid-column: auto;
    height: auto;
    min-height: 0;
    padding: 34px 26px 48px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
  }

  .careers__panel:not(.careers__panel--wide) {
    height: auto;
  }

  .careers__contact,
  .careers__apply-link {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .careers__back {
    font-size: 12px;
  }

  .careers__hero h1 {
    font-size: clamp(30px, 8.5vw, 48px);
  }

  .careers__panel {
    grid-template-columns: 1fr;
  }
}

/* Join Us title follows the shared page-title scale. */
.careers__hero h1 {
  font-size: var(--type-title);
  line-height: 1.08;
}

/* Descriptive copy directly beneath page titles follows Contact's treatment. */
.system__text p,
.system__text-mask--body p,
.team__subtitle {
  color: rgba(245, 251, 255, .72);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .03em;
}

/* Five-level typography mapping — Hero h1 excluded. */
.section-eyebrow {
  margin: 0 0 clamp(10px, .8vw, 16px);
  color: rgba(245, 251, 255, .62);
  font-size: var(--type-caption);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-intro__copy { position: relative; }
.product-intro__section-label {
  position: absolute;
  top: -2.2em;
  left: 0;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .4s var(--flow-ease), transform .4s var(--flow-ease);
}

.product-intro.is-intro-running .product-intro__section-label,
.product-intro.is-restored .product-intro__section-label {
  opacity: 1;
  transform: none;
}

.system__eyebrow {
  position: absolute;
  top: 37%;
  left: calc(13.95vw + clamp(20.7px, 4.68vw, 90px));
  z-index: 2;
}

.system__step {
  display: inline-block;
  margin-right: .32em;
  color: rgba(245, 251, 255, .62);
  font-size: .28em;
  letter-spacing: .08em;
  vertical-align: .22em;
}

.value__header,
.scale__header,
.team__header { position: relative; }
.value__section-label,
.scale__section-label,
.team__section-label {
  position: absolute;
  left: 0;
}

.value__section-label {
  top: clamp(42px, 5.1vw, 96px);
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition: opacity .8s var(--flow-ease), transform 1s var(--flow-ease);
}

.value__header.is-visible .value__section-label {
  opacity: 1;
  transform: none;
}

.scale__section-label {
  top: 0;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .8s var(--flow-ease), transform 1s var(--flow-ease);
}

.scale.is-entered .scale__section-label {
  opacity: 1;
  transform: none;
}

.team__section-label {
  top: -1.7em;
}

.roi__title-group {
  order: -1;
  width: var(--section-card-width);
  margin: 0 auto clamp(72px, min(8.8vw, 15.64444svh), 338px);
}

.roi__title-group .roi__section-label { margin-bottom: 10px; }
.roi__title-group .roi__title { margin: 0; }

.product-intro__line,
.system__text h2,
.value__metric {
  font-size: var(--type-display);
}

.value__header h2,
.scale__title,
.roi__title,
.team__title {
  font-size: var(--type-title);
}

.product-intro__eyebrow,
.scale__item h3,
.scale__lead,
.value__row h3,
.value__descriptor,
.value__metric small,
.roi__details strong,
.team__identity h3,
.contact__title,
.contact__button {
  font-size: var(--type-subtitle);
}

.hero__description,
.system__text p,
.value__result p,
.scale__item > p:last-child,
.roi__details p,
.team__identity p,
.team__history,
.partners__title {
  font-size: var(--type-body);
}

.partners__item,
.roi__card h3,
.roi__card:is(:hover, :focus-visible) h3,
.team__identity span {
  font-size: var(--type-caption);
}

/* Section titles from Value onward share the main content gutter. */
.value__header h2,
.scale__title,
.roi__title,
.team__title,
.partners__title {
  width: var(--section-card-width);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

.partners .partners__title {
  text-align: center;
}

/* System copy follows the same title/body rules regardless of its mask wrapper. */
.system__text h2,
.system__text-mask h2 {
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: .03em;
}

.system__text p,
.system__text-mask--body p {
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .03em;
}

@media (max-width: 900px) {
  :root {
    --type-display: clamp(40px, 10.25vw, 56px);
    --type-title: clamp(34px, 8.7vw, 46px);
    --type-subtitle: clamp(21px, 5.35vw, 28px);
    --type-body: clamp(15px, 3.85vw, 19px);
    --type-caption: clamp(12px, 3.1vw, 15px);
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body { touch-action: pan-y; }

  .scale__background::before,
  .scale__item:hover .scale__background::before,
  .scale__item:focus-visible .scale__background::before {
    transform: none !important;
    transition: transform 650ms var(--flow-ease) !important;
    will-change: auto;
  }

  .scale__item.is-mobile-expanded .scale__background::before {
    transform: scale(1.2) !important;
  }

  .roi__photo,
  .roi__card:is(:hover, :focus-visible) .roi__photo {
    transform: none !important;
    transition: none !important;
  }

  .hero h1 {
    font-size: clamp(36px, 9.5vw, 48px);
  }

  .hero {
    height: var(--mobile-static-viewport-height, 100svh);
    min-height: var(--mobile-static-viewport-height, 100svh);
  }

  .hero__lead {
    bottom: var(--mobile-hero-bottom, 6svh);
  }

  .hero h1 > .hero__title-line {
    width: 100%;
    flex-wrap: wrap;
  }

  .hero__title-line:first-child .hero__title-space:nth-child(5) {
    flex: 0 0 100%;
    width: 0;
    height: 0;
    font-size: 0;
  }

  main,
  main > section {
    width: 100%;
    max-width: 100vw;
  }

  .value__header,
  .scale__header,
  .team__header {
    max-width: var(--section-card-width);
  }

  .value__header h2,
  .scale__title,
  .roi__title,
  .team__title {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .value {
    min-height: 100svh;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .value__header {
    min-height: 0;
    flex: 0 0 auto;
    padding-top: calc(var(--nav-height) + 28px);
    padding-bottom: 24px;
  }

  .value__table.value__features {
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0 0 26px;
  }

  .value__feature {
    height: auto;
    min-height: 0;
    padding: 12px 0;
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 66%);
    align-items: center;
    justify-items: center;
  }

  .value__feature-graphic {
    width: min(26vw, 118px);
    height: min(17svh, 136px);
    max-height: 136px;
  }

  .value__feature-copy {
    width: 100%;
    margin-top: 0;
    padding-left: 16px;
    text-align: left;
  }

  .value__feature-copy h3 {
    font-size: clamp(18px, 4.7vw, 23px);
  }

  .value__feature-copy p {
    margin-top: 7px;
    font-size: clamp(13px, 3.35vw, 16px);
  }

  .product-intro {
    height: var(--mobile-static-viewport-height, 100svh);
    min-height: var(--mobile-static-viewport-height, 100svh);
  }

  .product-intro__stage {
    position: sticky;
    top: 0;
    height: var(--mobile-static-viewport-height, 100svh);
    min-height: var(--mobile-static-viewport-height, 100svh);
  }

  .product-intro__beaver--front {
    top: 10%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(64vw, 390px);
    max-width: none;
    max-height: var(--mobile-product-image-max-height, 38svh);
    object-position: center top;
    opacity: 1 !important;
    animation: none !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  .product-intro__copy {
    top: 47%;
    right: var(--layout-gutter);
    left: var(--layout-gutter);
    width: auto;
    max-width: var(--layout-width);
    display: block;
  }

  .product-intro__copy > * { grid-column: auto; }

  .product-intro__eyebrow {
    margin-bottom: 15px;
  }

  .product-intro__line {
    width: 100%;
    font-size: var(--type-title);
    line-height: 1.04;
    white-space: normal;
  }

  .product-intro__line--middle,
  .product-intro__line--last {
    width: 100%;
    margin-top: 10px;
  }

  .product-intro__line--last {
    width: 100%;
    margin-top: 14px;
  }

  .product-intro__features {
    margin-top: 24px;
    line-height: 1.45;
  }

  .product-intro__handoff,
  .product-intro__beaver--top,
  .product-intro__beaver--top.is-system-handoff,
  .product__handoff {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .product.is-bypassed { display: none !important; }

  .system {
    height: var(--mobile-system-scroll-height, 400svh);
    min-height: 0;
  }

  .system__stage {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--mobile-system-viewport-height, 100svh);
    min-height: 0;
    grid-template: 38% 62% / 100%;
  }

  .system__stage > .product__axis,
  .system__rail,
  .system__branch {
    display: none !important;
  }

  .system__copy {
    grid-row: 1;
    width: 100%;
  }

  .system__eyebrow {
    top: calc(var(--nav-height) - 2px);
    left: var(--layout-gutter);
  }

  .value__section-label {
    top: calc(var(--nav-height) + 2px);
  }

  .system__text,
  .system__text[data-system-text="0"] {
    top: calc(var(--nav-height) + 28px);
    right: var(--layout-gutter);
    left: var(--layout-gutter);
    width: auto;
    transform: none;
  }

  .system__text.is-active { transform: none; }

  .system__text h2,
  .system__text-mask h2 {
    margin-bottom: 10px;
  }

  .system__text-mask--title {
    margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .system__text-mask--body {
    padding-left: 0;
  }

  .system__text p,
  .system__text-mask--body p {
    max-width: 31ch;
  }

  .system__visual {
    position: absolute;
    top: 38%;
    right: 0;
    bottom: 2%;
    left: 0;
    height: auto;
  }

  .system__frame {
    inset: 0 var(--layout-gutter);
  }

  .system__inner-frame {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .system__term-overlay { display: none !important; }

  .roi {
    padding-bottom: 64px;
  }

  .roi__title {
    margin-bottom: 38px;
  }

  .roi__card,
  .roi__card--warehouse,
  .roi__card--pharma,
  .roi__card--manufacturing,
  .roi__card--cross {
    min-height: 220px;
  }

  .roi__content,
  .roi__card:is(:hover, :focus-visible) .roi__content {
    padding: 18px 20px;
  }

  .roi__icon,
  .roi__card:is(:hover, :focus-visible) .roi__icon {
    width: 46px;
    max-height: 46px;
  }

  .roi__card h3,
  .roi__card:is(:hover, :focus-visible) h3 {
    margin-top: 10px;
  }

  .roi__details,
  .roi__card:not(:hover):not(:focus-visible) .roi__details {
    margin-top: 9px;
  }

  .roi__details p,
  .roi__card:hover .roi__details p,
  .roi__card:focus-visible .roi__details p {
    margin-top: 5px;
  }
}

@media (max-width: 420px) {
  .value__header {
    padding-top: calc(var(--nav-height) + 18px);
    padding-bottom: 16px;
  }

  .value__header h2 { font-size: var(--type-title); }
  .value__feature { padding: 8px 0; }
  .value__feature-graphic { width: 92px; height: 104px; }

  .product-intro__beaver--front {
    top: 9%;
    width: 68vw;
    max-height: var(--mobile-product-image-max-height, 36svh);
  }

  .product-intro__copy { top: 45%; }

  .system__frame {
    right: 5vw;
    left: 5vw;
  }

  .roi__card,
  .roi__card--warehouse,
  .roi__card--pharma,
  .roi__card--manufacturing,
  .roi__card--cross {
    min-height: 205px;
  }
}

/* Product Intro → System handoff graphics are desktop-only. */
@media (max-width: 900px) {
  .product-intro__handoff,
  .product-intro__line--last::before,
  .product__continuation-line,
  .product__axis {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Keep the Value title in its established position; align only the eyebrow
   to the title's left edge and use the Contact eyebrow/title gap. */
.value__header {
  padding-top: calc(var(--nav-height) + clamp(70px, 6vw, 116px));
}

.value__heading-group {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.value__section-label {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  margin: 0 0 clamp(18px, 1.35vw, 26px);
  text-align: left;
  transform: translate3d(0, 44px, 0);
}

@media (max-width: 900px) {
  .value__header {
    padding-top: calc(var(--nav-height) + 42px);
  }

  .value__section-label {
    margin-bottom: 18px;
    transform: translate3d(0, 24px, 0);
  }
}

/* Scale heading hierarchy: preserve the title's centered layout while the
   eyebrow shares its left edge and follows the Contact spacing standards. */
.scale__stage {
  padding-top: calc(var(--nav-height) + clamp(70px, 6vw, 116px));
}

.scale__heading-group {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.scale__section-label {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  margin: 0 0 clamp(18px, 1.35vw, 26px);
  text-align: left;
  transform: translate3d(0, 28px, 0);
}

@media (max-width: 900px) {
  .scale__stage {
    padding-top: calc(var(--nav-height) + 42px);
    padding-bottom: 64px;
  }

  .scale__heading-group {
    width: 100%;
  }

  .scale__section-label {
    margin-bottom: 18px;
  }
}

/* ROI heading hierarchy follows the same Contact spacing standards while
   retaining the established title-group width and horizontal alignment. */
.roi {
  padding-top: calc(var(--nav-height) + clamp(70px, 6vw, 116px));
}

.roi__title-group .roi__section-label {
  margin-bottom: clamp(18px, 1.35vw, 26px);
}

.roi__title-group {
  margin-bottom: clamp(43.2px, min(5.28vw, 9.38667svh), 202.8px);
}

@media (max-width: 900px) {
  .roi {
    padding-top: calc(var(--nav-height) + 42px);
  }

  .roi__title-group .roi__section-label {
    margin-bottom: 18px;
  }
}

/* Active System step number sits beside the section eyebrow. */
.system__step-indicator {
  margin-right: .7em;
  color: rgba(245, 251, 255, .62);
  font-size: var(--type-caption);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .16em;
  vertical-align: baseline;
}

/* Keep System body copy on the title's visible left edge and tighten the
   title-to-body rhythm by 50%. */
.system__text-mask--body {
  padding-left: 0;
}

.system__text h2 {
  margin-bottom: clamp(14px, 2vw, 38.5px);
}

.system__text-mask--title {
  margin-bottom: clamp(14px, 2vw, 38.5px);
  padding-bottom: 0;
}

.system__text[data-system-text="0"] .system__text-mask--title {
  margin-bottom: 0;
}

/* Team heading follows the shared Contact eyebrow/title hierarchy. */
.team {
  padding-top: calc(var(--nav-height) + clamp(70px, 6vw, 116px));
}

.team__section-label {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  margin: 0 0 clamp(18px, 1.35vw, 26px);
  text-align: left;
}

@media (max-width: 900px) {
  .team {
    padding-top: calc(var(--nav-height) + 42px);
  }

  .team__section-label {
    margin-bottom: 18px;
  }
}

@media (max-width: 900px) {
  .system__text h2,
  .system__text-mask--title {
    margin-bottom: 5px;
  }
}

/* Compact Scalability cards on mobile; desktop sizing remains unchanged. */
@media (max-width: 900px) {
  .scale__item {
    min-height: 230px;
    padding: 22px;
  }

  .scale__item-heading {
    min-height: 90px;
    gap: 12px;
  }

  .scale__item-heading img,
  .scale__icon {
    width: 32px;
    height: 32px;
  }

  .scale__item > p:last-child {
    margin-top: 9px;
  }

  .scale__lead {
    min-height: 1.2em;
  }
}

/* Keep Scale card hierarchy aligned with Value copy styling. */
.scale__lead {
  font-size: var(--type-body);
}

.scale__item > p:last-child {
  color: rgba(235, 241, 247, .72);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .03em;
}

/* ROI detail copy uses the same body treatment as Scale descriptions. */
.roi__details p {
  color: rgba(235, 241, 247, .72);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .03em;
}