/* ==========================================================================
   Industries  —  Figma "Industries - Animate" (713:227503)
   1920 x 1246 at y 4860, over the grey backdrop.

   Eight tabs (a contiguous 1824-wide strip at x 48) drive an image rail that
   is clipped to 1257 wide at x 663; each frame is 902 x 700 with a 20 gap.

   Default -> Animate:
     tabs        translateX -230 -> 0
     rail        translateX +1266 -> 0
     side note   translateY  +80  -> 0
     both h2s    translateY  +70  -> 0
     paragraph   translateX -330 -> 0
     CTA         translateX -180 -> 0
   ========================================================================== */

.industries {
  top: calc(4860 * var(--s));
  height: calc(1246 * var(--s));
  overflow: hidden;
  z-index: 2;
}

/* --- tab strip ----------------------------------------------------------- */

.industries__tabs {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(304 * var(--s));
  width: calc(1824 * var(--s));
  height: calc(42 * var(--s));
  overflow: hidden;
}

.industries__tabs-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

.industries__tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--s));
  background: var(--c-mono-white);
  border-right: 1px solid #CCC;
  font-family: var(--f-sans);
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: var(--c-mono-dark);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ui-dur) var(--ui-ease);
}
.industries__tab:last-child { border-right: 0; }
.industries__tab:hover { background: #F5F5F5; }
.industries__tab.is-active { background: #E8E8E8; }
.industries__tab:focus-visible { outline: 2px solid var(--c-sky-blue); outline-offset: -3px; }

/* --- image rail ---------------------------------------------------------- */

.industries__rail {
  position: absolute;
  left: calc(663 * var(--s));
  top: calc(446 * var(--s));
  width: calc(1257 * var(--s));
  height: calc(700 * var(--s));
  overflow: hidden;
}

/* The reveal slide and the tab-driven travel are separate transforms on
   separate elements so they never fight each other. */
.industries__rail-inner { height: 100%; }

.industries__track {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--s));
  height: 100%;
  /* One step is a frame plus its gap: 902 + 20. */
  transform: translateX(calc(var(--i, 0) * -922 * var(--s)));
  transition: transform calc(var(--rv-dur) * 0.9) var(--rv-ease);
}

.industries__frame {
  flex: none;
  width: calc(902 * var(--s));
  height: calc(700 * var(--s));
}
.industries__frame img { width: 100%; height: 100%; object-fit: cover; }

/* --- copy ---------------------------------------------------------------- */

.industries__note {
  position: absolute;
  left: calc(335 * var(--s));
  top: calc(446 * var(--s));
  width: calc(174 * var(--s));
  height: calc(76 * var(--s));
  color: var(--c-mono-dark);
}

.industries__h {
  position: absolute;
  left: calc(48 * var(--s));
  width: calc(595 * var(--s));
  height: calc(77 * var(--s));
}
.industries__h--1 { top: calc(719 * var(--s)); }
.industries__h--2 { top: calc(796 * var(--s)); }
.industries__h span,
.industries__h h2 {
  display: block;
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-3.2 * var(--s));
  color: var(--c-mono-dark);
  white-space: nowrap;
}

.industries__copy {
  position: absolute;
  left: calc(182 * var(--s));
  top: calc(929 * var(--s));
  width: calc(329 * var(--s));
  height: calc(88 * var(--s));
}
.industries__copy p {
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  letter-spacing: calc(-0.48 * var(--s));
  color: #767676;
}

.industries__cta {
  position: absolute;
  left: calc(182.01 * var(--s));
  top: calc(1057 * var(--s));
  width: calc(171.997 * var(--s));
  height: calc(48 * var(--s));
}
.industries__cta .rv { height: 100%; }
.industries__cta .btn { width: 100%; height: 100%; }

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1400px) {
  .industries__h span { font-size: calc(52 * var(--s)); }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .industries { height: auto; padding: 8px 0 64px; background: var(--c-light-grey); overflow: visible; }
  .industries__tabs {
    position: static;
    width: auto;
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .industries__tabs::-webkit-scrollbar { display: none; }
  .industries__tabs-inner { width: max-content; }
  .industries__tab { flex: none; padding: 12px 18px; font-size: 14px; }

  .industries__rail {
    position: static;
    width: auto;
    height: auto;
    margin-top: 20px;
    aspect-ratio: 902 / 560;
  }
  .industries__track { height: 100%; }
  .industries__frame { width: 100%; height: 100%; }
  .industries__track { transform: translateX(calc(var(--i, 0) * -100%)); gap: 0; }

  .industries__note { display: none; }

  .industries__h,
  .industries__copy,
  .industries__cta { position: static; width: auto; height: auto; padding-inline: 20px; }
  .industries__h--1 { margin-top: 28px; }
  .industries__h span { font-size: clamp(30px, 8vw, 44px); white-space: normal; letter-spacing: -0.05em; }
  .industries__copy { margin-top: 16px; }
  .industries__cta { margin-top: 24px; width: 172px; }
}