:root {
  --bg-0: #0e0e0e;
  --bg-1: #131313;
  --bg-2: #242424;
  --bg-3: #2a2a2a;
  --paper: #f4f3f0;
  --paper-strong: #ffffff;
  --ink: #131313;
  --muted: rgba(255, 255, 255, 0.72);
  --muted-dark: #4a4a4a;
  --line: rgba(255, 255, 255, 0.11);
  --line-dark: rgba(19, 19, 19, 0.12);
  --accent: #d6003d;
  --accent-deep: #3d0011;
  --cyan: #35b1d3;
  --frame: calc(100vw - 80px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg-0);
  color: var(--paper-strong);
  font-family: "Roboto Mono", monospace;
  font-synthesis: none;
}

img {
  display: block;
  max-width: 100%;
}

a,
a:link,
a:visited {
  color: inherit;
  text-decoration: none;
}

/* Clicking-and-dragging across a link's text normally starts the browser's
   native "drag this link" gesture instead of a text selection, which is why
   mailto:/tel: links otherwise need a right-click → Copy to grab the address.
   Turning that off restores plain click-drag text selection. */
a[href^="mailto:"],
a[href^="tel:"] {
  -webkit-user-drag: none;
  user-drag: none;
}

button {
  border: 0;
  font: inherit;
}

.site-shell {
  overflow-x: clip;
}

.frame {
  width: var(--frame);
  max-width: 1440px;
  margin-inline: auto;
}

/* Homepage sections are designed to keep using the full fluid --frame width
   (no upper cap) on very large viewports — every other page caps its
   content at 1440px so it doesn't stretch out on 4K displays; the section
   backgrounds themselves stay full-bleed either way since the cap only
   applies to .frame, never to the section element that colors the row. */
body.home .frame {
  max-width: none;
}

.section {
  position: relative;
  overflow: clip;
}

.section--dark {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
}

.section--light {
  background: var(--paper);
  color: var(--ink);
}

.section-marker {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  text-transform: uppercase;
}

.section-marker--light {
  color: #fdfcfc;
}

.section-marker--dark {
  color: var(--ink);
}

.section-title {
  margin: 0;
  font-size: clamp(2.4rem, 3vw, 3.25rem);
  line-height: 1.12;
  font-weight: 400;
}

.section-title--accent {
  color: var(--accent);
}

.section-title--dark {
  color: var(--ink);
}

.outline-button,
.solid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.6;
  transition:
    transform 220ms var(--ease),
    background-color 220ms ease,
    border-color 220ms ease;
}

.outline-button {
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.solid-button {
  background: var(--accent);
}

.outline-button:hover,
.solid-button:hover,
.program__cta:hover {
  transform: translateY(-2px);
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 720ms var(--ease),
    transform 720ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero {
  position: relative;
  min-height: 900px;
  background:
    linear-gradient(90deg, #141414 0%, #050505 43%, #161616 100%),
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, 0.15), transparent 22%);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.52) 0%, rgba(10, 10, 10, 0.2) 30%, rgba(10, 10, 10, 0.34) 100%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.08), transparent 28%);
}

.hero__frame {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--frame);
  min-height: 900px;
  margin-inline: auto;
  padding: 34px 0 0;
}

.hero__ribbon {
  position: absolute;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.hero__ribbon--metal {
  top: -248px;
  right: -132px;
  width: 920px;
  height: 920px;
  border-radius: 50%;
  background:
    linear-gradient(155deg, rgba(250, 250, 250, 0) 29%, rgba(240, 240, 240, 0.92) 70%, rgba(18, 18, 18, 0.96) 82%);
  box-shadow:
    inset 0 0 0 18px rgba(255, 255, 255, 0.06),
    inset 0 0 0 46px rgba(0, 0, 0, 0.8);
}

.hero__ribbon--shadow {
  top: 180px;
  left: -6%;
  width: 118%;
  height: 220px;
  border-radius: 160px;
  background:
    linear-gradient(180deg, rgba(26, 26, 26, 0.94) 0%, rgba(0, 0, 0, 0.98) 46%, rgba(17, 17, 17, 0.84) 100%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: rotate(20deg);
}

.hero__ribbon--trace {
  top: 108px;
  left: -12px;
  width: 620px;
  height: 560px;
  border-top: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 52% 48% 0 0;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
  transform: rotate(-7deg);
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
}

.brand__mark {
  font-family: "Orbitron", sans-serif;
  font-size: 1.85rem;
  line-height: 0.95;
  letter-spacing: 0.16em;
  text-transform: lowercase;
}

.brand__stack {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  font-size: 10px;
  line-height: 0.92;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

.nav {
  display: flex;
  gap: 38px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.6;
}

.nav a,
.lang-switch__trigger {
  position: relative;
}

.nav a::after,
.lang-switch__trigger::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
  content: "";
}

.nav a:hover::after,
.lang-switch:hover .lang-switch__trigger::after,
.lang-switch:focus-within .lang-switch__trigger::after {
  transform: scaleX(1);
}

.lang-switch {
  position: relative;
  background: transparent;
  color: var(--Neutral-On-Surface, #FFF);
  font-family: "Orbitron", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 14.4px */
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.lang-switch__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 6px 16px;
  cursor: pointer;
  list-style: none;
}

.lang-switch__trigger::-webkit-details-marker {
  display: none;
}

.lang-switch__trigger::marker {
  content: "";
}

.lang-switch__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0;
  line-height: 0;
}

.lang-switch__arrow::before {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
  content: "";
}

.lang-switch[open] .lang-switch__arrow {
  transform: none;
}

.lang-switch[open] .lang-switch__arrow::before {
  top: 7px;
  transform: rotate(225deg);
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 85px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(19, 19, 19, 0.92);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.lang-switch[open] .lang-switch__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-switch__menu a {
  padding: 8px 10px;
  text-align: center;
}

.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible,
.lang-switch__menu a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
}

.lang-switch__pages,
.lang-switch__divider {
  display: none;
}

.hero__content {
  align-self: center;
  padding: 0px 0 180px;
}

.hero h1 {
  color: #E5E4E4;
  font-family: "Roboto Mono", monospace;
  font-size: 53px;
  font-style: normal;
  font-weight: 400;
  line-height: 55px; /* 103.774% */
}

.hero__subtitle {
  justify-self: end;
  margin: 0 0 168px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-tabs {
  position: absolute;
  bottom: 0;
  left: 16px;
  z-index: 3;
  display: flex;
  width: 1380px;
  max-width: calc(100vw - 32px);
}

a.hero-tab {
  position: relative;
  flex: 0 0 321px;
  width: 321px;
  height: 266px;
  min-height: 266px;
  overflow: hidden;
  color: #131313;
  border-right: 1px solid rgba(19, 19, 19, 0.08);
  transition:
    background-color 220ms ease,
    color 220ms ease,
    flex-basis 260ms var(--ease),
    width 260ms var(--ease);
}

.hero-tab + .hero-tab {
  margin-left: -1px;
}

.hero-tab::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 45.49% 0 0;
  background: #e5e5e5;
  transition:
    background-color 220ms ease,
    clip-path 260ms var(--ease),
    inset 260ms var(--ease);
}

/* The rest-state tile (Component28/29/30/33's "default" variant) has no
   background image — just the flat #e5e5e5 plate from .hero-tab::before,
   bold Orbitron label, and arrow icon. The illustration only appears in the
   active/hover variant ("Group 15"/"Group 16" — 2:1607/2:1618/2:1629/2:1640
   in file uZ8MiP3klqT3MDWXFjUEQ7), rendered below via .hero-tab__image. */

.hero-tab:not(.hero-tab--active):hover::before,
.hero-tab:not(.hero-tab--active):focus-visible::before {
  background: #dddddd;
}

a.hero-tab--active {
  flex-basis: 329.46px;
  width: 329.46px;
  color: #fff;
  z-index: 4;
  margin-right: -8.46px;
}

@media (min-width: 1181px) {
  a.hero-tab[data-hero-program="3"] {
    flex: 0 0 420px;
    width: 420px;
  }

  a.hero-tab[data-hero-program="3"].hero-tab--active {
    flex-basis: 420px;
    width: 420px;
    margin-right: 0;
  }
}

.hero-tab--active::before {
  inset: 12.41% 2.57% 0 0;
  background:
    linear-gradient(180deg, rgba(24, 24, 24, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%);
  clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
}

.hero-tab--active::after {
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 38%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0 38%, #000 58%);
}

.hero-tab:focus-visible {
  outline: 2px solid rgba(214, 0, 61, 0.85);
  outline-offset: -2px;
}

.hero-tab__title {
  position: absolute;
  top: 51.13%;
  left: 18px;
  z-index: 3;
  font-family: "Orbitron", sans-serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color 220ms ease,
    top 260ms var(--ease),
    left 260ms var(--ease);
}

.hero-tab--active .hero-tab__title {
  top: 18.05%;
  left: 6.68%;
  color: var(--accent);
}

.hero-tab__copy {
  position: absolute;
  top: 68.42%;
  right: 28.37%;
  left: 6.68%;
  z-index: 3;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 260ms var(--ease);
  transform: translateY(8px);
}

.hero-tab--active .hero-tab__copy {
  opacity: 1;
  transform: translateY(0);
}

.hero-tab__arrow {
  position: absolute;
  right: 1px;
  bottom: 2px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0;
  line-height: 0;
  transition:
    color 220ms ease,
    right 260ms var(--ease),
    bottom 260ms var(--ease);
}

.hero-tab--active .hero-tab__arrow {
  right: 6.51%;
  bottom: 4.51%;
  color: #fff;
}

.hero-tab__arrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17H17V7' stroke='black' stroke-width='1.4' stroke-linecap='square'/%3E%3Cpath d='M8 8L17 17' stroke='black' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E")
      center / 24px 24px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17H17V7' stroke='black' stroke-width='1.4' stroke-linecap='square'/%3E%3Cpath d='M8 8L17 17' stroke='black' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E")
      center / 24px 24px no-repeat;
}

/* Active-state illustration. Position/rotation/blend numbers are pulled
   directly from each tab's Figma hover variant — they intentionally differ
   per tab since each source illustration has a different natural framing. */
.hero-tab__image {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.hero-tab--active .hero-tab__image {
  opacity: 1;
}

.hero-tab__image::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.4;
}

.hero-tab[data-hero-program="0"] .hero-tab__image {
  top: 37px;
  left: 18.38%;
  right: 5.46%;
  aspect-ratio: 244.46 / 229.3;
}

.hero-tab[data-hero-program="0"] .hero-tab__image::after {
  top: -17.6%;
  left: -15.31%;
  width: 111.13%;
  height: 122.09%;
  background-image: url("./assets/hero-tab-hover-rebuilt.png");
  mix-blend-mode: screen;
  transform: rotate(21.61deg);
}

.hero-tab[data-hero-program="1"] .hero-tab__image {
  top: 6.31px;
  left: 26.48%;
  right: 5.61%;
  aspect-ratio: 218 / 213.5;
}

.hero-tab[data-hero-program="1"] .hero-tab__image::after {
  top: -37.95%;
  left: -35.37%;
  width: 150.55%;
  height: 148.56%;
  background-image: url("./assets/hero-tab-hover-partsto.png");
  mix-blend-mode: lighten;
  transform: rotate(21.61deg);
}

.hero-tab[data-hero-program="2"] .hero-tab__image {
  top: 17px;
  left: 10.82%;
  right: 5.83%;
  aspect-ratio: 267.56 / 213;
}

.hero-tab[data-hero-program="2"] .hero-tab__image::after {
  top: -35.32%;
  left: -6.82%;
  width: 112.75%;
  height: 179.8%;
  background-image: url("./assets/hero-tab-hover-proservice.png");
  transform: rotate(21.61deg);
}

.hero-tab[data-hero-program="3"] .hero-tab__image {
  top: 76px;
  left: 9.66%;
  right: 0;
  aspect-ratio: 411.5 / 226.75;
}

.hero-tab[data-hero-program="3"] .hero-tab__image::after {
  top: 0;
  left: -0.19%;
  width: 100.64%;
  height: 100%;
  background-image: url("./assets/hero-tab-hover-camsmachinery.png");
}

.mission {
  min-height: max(805px, 55.903vw);
  border-top: 1px solid var(--line);
  background: #131313;
}

.mission__frame {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: max(627px, 43.542vw);
  margin-inline: 0;
  padding: 0;
}

.mission .section-marker {
  position: absolute;
  top: max(53px, 3.681vw);
  left: 2.083vw;
}

.section-close {
  position: absolute;
  top: 34px;
  right: max(30px, calc((100vw - var(--frame)) / 2 + 8px));
  font-size: 3rem;
  line-height: 1;
  color: #fff;
  opacity: 0.92;
}

.mission .section-close {
  top: max(53px, 3.681vw);
  right: 2.292vw;
  width: clamp(31.5px, 2.188vw, 42px);
  height: clamp(29.032px, 2.016vw, 38.71px);
  background: url("./assets/mission-mark.svg") center / contain no-repeat;
  font-size: 0;
  opacity: 1;
}

.mission__grid {
  display: block;
  padding: 0;
}

.mission__visual {
  position: absolute;
  top: max(128px, 8.889vw);
  left: 2.083vw;
  overflow: hidden;
  width: 27.639vw;
  height: max(443px, 30.764vw);
  min-height: 443px;
  margin: 0;
  background: var(--accent);
}

.mission__visual img {
  /* Figma crops this from the full about-team-1.jpg portrait via a
     non-uniform pan/zoom (not a simple centered object-fit:cover) —
     reproduced with the same "oversized absolutely-positioned image inside
     an overflow:hidden box" technique used for the team page photos, with
     percentages derived from Figma's own imageTransform so it's resolution
     independent. */
  position: absolute;
  width: 381.29%;
  height: 228.4%;
  left: -199.2%;
  top: -23.55%;
  max-width: none;
}

.mission__content {
  display: block;
  padding: 0;
}

.mission blockquote {
  position: absolute;
  top: max(146px, 10.139vw);
  left: 31.528vw;
  width: 45.347vw;
  max-width: none;
  margin: 0;
  font-size: 24px;
  line-height: 1.6;
}

.mission__support {
  position: absolute;
  top: max(431px, 29.931vw);
  left: 31.528vw;
  display: grid;
  grid-template-columns: 16.5vw 26.667vw;
  gap: 3.222vw;
  align-items: start;
  max-width: none;
  margin: 0;
}

.mission__signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 16.5vw;
  gap: 0;
}

/* Penflow's canvas is sized off the `size` prop, not the actual text
   width — at the smaller size the previous "Vladislav Ogai" signature used,
   "Medelbekova" got clipped past the right edge of the canvas (confirmed:
   raising `size` in main.js to 75 is what makes the full word fit; the
   container here just scales that larger canvas back down via max-width +
   height:auto, preserving its ~230x194 natural aspect). */
.mission__signature-draw {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 230px;
  height: 194px;
  color: #fff;
  mix-blend-mode: lighten;
}

.mission__signature-draw canvas {
  display: block;
  max-width: 230px !important;
  height: auto !important;
}

.mission__signature-fallback {
  font-family: "Caveat", cursive;
  font-size: 3.3rem;
  line-height: 0.75;
}

.mission__signature-draw.is-penflow-mounted .mission__signature-fallback {
  display: none;
}

.mission__signature-role {
  display: block;
  margin-top: 0;
  font-size: 14px;
  line-height: 1.6;
}

.mission__note {
  width: 26.667vw;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.scroll-band {
  position: relative;
  height: 150px;
  width: 100vw;
  margin: 0 0 28px;
  border-top: 0;
  background: transparent;
  opacity: 0.3;
  overflow: hidden;
}

.scroll-band::before {
  position: absolute;
  inset: 0;
  background-image: url("./assets/mission-band-pattern.svg");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 314.903px 149.794px;
  content: "";
}

.scroll-band__track {
  position: absolute;
  top: 61.9px;
  left: 50%;
  display: inline-flex;
  gap: 47px;
  align-items: center;
  padding-left: 0;
  color: #fff;
  font-size: 16.075px;
  line-height: 1.6;
  font-weight: 700;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}

.scroll-band__track span {
  width: 30px;
}

.program {
  display: grid;
  grid-template-columns: minmax(360px, 33.4%) minmax(0, 1fr);
  min-height: 811px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.program__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 37px 42px 0;
  background: linear-gradient(180deg, #1a1a1a 0%, #252525 100%);
  text-align: center;
}

.program__title {
  margin: 87px 0 0;
  font-family: "Orbitron", sans-serif;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.program__divider {
  position: relative;
  width: 220px;
  height: 1px;
  margin: 50px 0 24px;
  background: rgba(255, 255, 255, 0.09);
}

.program__divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--accent);
  transform: translate(-50%, -50%);
}

.program__lead,
.program__copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.program__lead {
  max-width: 260px;
}

.program__copy {
  max-width: 330px;
  margin-top: 26px;
}

.program__tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  width: calc(100% + 84px);
  margin-top: auto;
  padding: 26px 42px 24px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.program-tab {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Orbitron", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms ease;
}

.program-tab.is-active {
  color: var(--paper-strong);
}

.program__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: calc(100% + 84px);
  min-height: 58px;
  background: var(--accent-deep);
  font-size: 16px;
  line-height: 1.6;
}

.program__visual {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #040404 0%, #040404 44%, #1f1f1f 100%);
}

.program__visual::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 24%, rgba(255, 255, 255, 0.05) 100%);
  content: "";
  pointer-events: none;
}

.program__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.partner {
  position: relative;
  padding: 46px 0 0;
}

.partner::before,
.partner::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--line-dark);
  content: "";
}

.partner::before {
  top: 148px;
}

.partner::after {
  bottom: 0;
}

.partner__frame {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 446.5px;
  gap: 92px;
  align-items: start;
}

.partner__intro {
  position: relative;
  min-height: 700px;
}

.partner .section-marker,
.partner .section-title {
  margin-left: 31px;
}

.partner .section-title {
  margin-top: 12px;
  font-size: 40px;
  line-height: 1.17;
}

.partner__plus {
  position: absolute;
  top: 146px;
  left: 31px;
  width: 202px;
  height: 285px;
  background: #f0014e;
  color: #fff;
}

.partner__plus::before,
.partner__plus::after,
.partner__close::before,
.partner__close::after {
  position: absolute;
  background: currentColor;
  content: "";
}

.partner__plus::before {
  left: 15px;
  bottom: 31px;
  width: 31px;
  height: 1px;
}

.partner__plus::after {
  left: 30px;
  bottom: 16px;
  width: 1px;
  height: 31px;
}

.partner__body {
  position: absolute;
  top: 239px;
  left: 265px;
  width: 637px;
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
}

.partner__footprint {
  position: absolute;
  top: 397px;
  left: 0;
  width: 100vw;
  height: 318.5px;
  margin: 0;
  pointer-events: none;
}

.partner__note {
  position: absolute;
  top: 88px;
  left: 90px;
  z-index: 1;
  width: 560px;
  margin: 0;
  font-size: 24px;
  line-height: 1.6;
}

.partner__footprint img {
  position: absolute;
  top: 0;
  left: 602px;
  width: 672px;
  max-width: none;
  opacity: 0.43;
  pointer-events: none;
}

.partner__stats {
  position: relative;
  z-index: 2;
  width: 446.5px;
  height: 784px;
  margin-top: -84px;
  padding: 71px 50.5px 48px;
  background: #1f1f1f;
  color: #fff;
  clip-path: polygon(0 0, 79% 0, 100% 12%, 100% 100%, 0 100%);
}

.partner__stats::after {
  position: absolute;
  top: 0;
  right: 0;
  border-top: 94px solid var(--paper-strong);
  border-left: 94px solid transparent;
  content: "";
}

.stat-block + .stat-block {
  margin-top: 47px;
}

.stat-block__label {
  display: block;
  margin-bottom: 14px;
  color: var(--cyan);
  font-size: 16px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.stat-block__label--accent {
  color: var(--accent);
}

.stat-block strong {
  display: block;
  font-family: "Orbitron", sans-serif;
  font-size: 42px;
  line-height: 72px;
  font-weight: 400;
  letter-spacing: 2.88px;
}

.stat-block p {
  max-width: 318px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.stat-block:nth-child(1) p {
  max-width: 315px;
}

.stat-block:nth-child(2) p {
  max-width: 284px;
}

.partner__close {
  position: absolute;
  right: 20px;
  bottom: 15px;
  width: 49.7px;
  height: 49.7px;
  color: #fff;
}

.partner__close::before {
  top: 24px;
  left: 8px;
  width: 34px;
  height: 1px;
}

.partner__close::after {
  top: 8px;
  left: 24px;
  width: 1px;
  height: 34px;
}

/* "05 / ПАРТНЕРСТВО" is a dealer-brands block in the current Figma file, not
   the old "Ваш системный партнер" stats layout — all three languages now use
   the new .partner__grid markup, so it needs a real positioning context
   (.partner__grid and .brand-strip are both absolutely positioned) and a
   min-height tall enough to clear the brand-strip row, or the section
   collapses to just its padding-top and everything below gets clipped. */
.partner__frame {
  display: block;
  position: relative;
  min-height: 463px;
}

html[lang="kk"] .partner__frame {
  min-height: 507px;
}

/* .partner::before is the top divider line for the old "Driven by
   Partnership" stats layout, positioned for that content's height. The
   .partner__grid layout is shorter, so the same fixed 148px line lands mid
   -text instead of above it — not a real design element here, just leftover
   overlap from sharing the .partner class. */
.partner::before {
  display: none;
}

.partner__grid {
  position: absolute;
  top: 34px;
  left: 30px;
  width: calc(100% - 60px);
}

.partner__grid > .reveal:first-child {
  width: 643px;
}

.partner__grid > .reveal:last-child {
  position: absolute;
  top: 49px;
  left: 590px;
  width: 428px;
}

.partner__grid .section-marker {
  margin-left: 0;
}

.partner__grid .section-title {
  margin-top: 16px;
  margin-left: 0;
  max-width: 600px;
  font-size: 40px;
  line-height: 44px;
}

.partner__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

html[lang="ru"] .partner__frame .brand-strip {
  top: 365px;
}

html[lang="ru"] .partner__frame .brand-strip__item:nth-child(3) img {
  width: 376px;
  height: 68px;
  margin-top: 0;
}

.catalog {
  padding: 0;
}

.catalog.section--dark {
  background: linear-gradient(180deg, #131313 0%, #242424 55.23%);
}

.catalog__frame {
  position: relative;
  width: 100%;
}

/* The head text overlays the hero photo (matches Figma: the tag/title/
   intro/button sit inside the same 0–750px band the image occupies, not
   stacked above it) — absolutely positioned within .catalog__hero, which
   is what actually sets this block's height via the image's own flow
   height. Only .catalog__features stacks below in normal flow. */
.catalog__head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 37px 31px 0 30px;
}

.catalog__head > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.catalog .section-title {
  font-family: "Orbitron", sans-serif;
  font-size: 40px;
  line-height: 44px;
  text-transform: uppercase;
}

.catalog .outline-button {
  min-width: 182px;
  margin-top: 33px;
}

.catalog__stage {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.catalog__machine {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 1003px;
  height: 920px;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* CAMS Machinery (RU): source PNGs are pre-cropped to the exact 1003x920 box
   with real alpha transparency, so no scale/position transform is needed —
   plain 100%/100% covers the box and lets the section's own gradient show
   through any remaining transparent edge. Scoped to RU: EN/KZ still use the
   old <img>-based parts catalog on this same class. */
html[lang="ru"] .catalog__stage[data-catalog-slide="0"] .catalog__machine {
  background-image: url("./assets/L5D.png");
  background-position: 0 0;
  background-size: 100% 100%;
}

html[lang="ru"] .catalog__stage[data-catalog-slide="1"] .catalog__machine {
  background-image: url("./assets/L7D.png");
  background-position: 0 0;
  background-size: 100% 100%;
}

html[lang="ru"] .catalog__stage[data-catalog-slide="2"] .catalog__machine {
  background-image: url("./assets/L10D.png");
  background-position: 0 0;
  background-size: 100% 100%;
}

.catalog__info {
  position: absolute;
  top: 135px;
  left: 30px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 397px;
}

.catalog__intro {
  max-width: 407px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #8a8a8a;
}

.catalog__copy {
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}

/* ---------- Catalog hero image + feature strip (replaces the old model
   tabs/spec-sheet teaser) ---------- */

.catalog__hero {
  position: relative;
  overflow: hidden;
}

.catalog__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma: plain 3-column strip separated by thin vertical rules — no top
   border, no per-item marker dot (that treatment belongs to the brand-strip
   components elsewhere on the page, not this one — checked the real
   component render before assuming they matched). */
.catalog__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 24px 31px 32px 30px;
}

.catalog__feature {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.catalog__feature:first-child {
  padding-left: 0;
  border-left: 0;
}

.catalog__feature h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--paper-strong);
}

.catalog__feature p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #8a8a8a;
}

@media (max-width: 640px) {
  .catalog__features {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 24px 40px;
  }

  .catalog__feature {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .catalog__feature:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

.catalog__tabs {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 1px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.catalog-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 153px;
  padding: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(19, 19, 19, 0.3), rgba(36, 36, 36, 0.3));
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 220ms ease,
    border-color 220ms ease;
}

.catalog-tab::after {
  position: absolute;
  right: 24px;
  bottom: 24px;
  font-family: "Roboto Mono", monospace;
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  content: "→";
}

.catalog-tab:hover,
.catalog-tab:focus-visible {
  background: linear-gradient(180deg, #131313, #242424);
}

.catalog-tab.is-active {
  background: linear-gradient(180deg, #131313, #242424);
}

.catalog-tab span {
  font-family: "Orbitron", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.catalog-tab small {
  max-width: 18ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.restoration {
  min-height: 598px;
  padding: 66px 0 0;
  background: #fff;
}

.restoration__frame {
  position: relative;
  width: 100%;
  min-height: 532px;
}

.restoration__grid {
  position: absolute;
  top: 0;
  left: 30px;
  display: block;
  width: calc(100% - 60px);
}

.restoration__grid > .reveal:first-child {
  position: absolute;
  top: 37px;
  left: 0;
  width: 643px;
}

.restoration__grid > .reveal:last-child {
  position: absolute;
  top: 71px;
  left: 560px;
  width: 604px;
}

html[lang="en"] .restoration__grid,
html[lang="kk"] .restoration__grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(420px, 604px);
  column-gap: clamp(80px, 8vw, 150px);
  align-items: start;
}

html[lang="en"] .restoration__grid > .reveal:first-child,
html[lang="kk"] .restoration__grid > .reveal:first-child,
html[lang="en"] .restoration__grid > .reveal:last-child,
html[lang="kk"] .restoration__grid > .reveal:last-child {
  position: static;
  width: auto;
}

html[lang="en"] .restoration__grid > .reveal:last-child,
html[lang="kk"] .restoration__grid > .reveal:last-child {
  padding-top: 34px;
}

html[lang="en"] .brand-strip,
html[lang="kk"] .brand-strip {
  top: 372px;
}

.restoration .section-title {
  margin-top: 16px;
  max-width: 560px;
  font-size: 40px;
  line-height: 44px;
}

.restoration__lede {
  max-width: 497px;
  margin: 20px 0 0;
  color: var(--muted-dark);
  font-size: 20px;
  line-height: 1.6;
}

.restoration__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.restoration__copy + .restoration__copy {
  margin-top: 25px;
}

.restoration__accent {
  margin: 0;
  color: var(--cyan);
  font-size: 16px;
  line-height: 1.6;
}

.brand-strip {
  position: absolute;
  top: 295px;
  right: 0;
  left: 0;
  display: flex;
  gap: max(87px, calc(39vw - 474.6px));
  align-items: flex-start;
  margin: 0;
  padding-left: 58px;
  border-top: 1px solid rgba(19, 19, 19, 0.12);
}

.brand-strip__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px 0 0;
}

.brand-strip__marker {
  position: absolute;
  top: -6px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--accent);
}

.brand-strip__item img {
  max-width: none;
  object-fit: contain;
}

/* The placeholder items have no logo to size them, so the flex row would
   otherwise collapse the gap between markers — hold each item at the same
   width Figma's (still-unfilled) logo slots reserved, so the three markers
   land at the same x-positions as the real design. */
.brand-strip--placeholder .brand-strip__item {
  width: 330px;
}

/* Four real partner logos (Dana/Kessler/Volvo/Cummins) replacing the
   placeholder slots — natural width, fixed height so mixed logo aspect
   ratios still sit on a common baseline. Two other rules also match this
   exact element at the same "2 classes + html[lang]" specificity tier —
   html[lang="ru"] .partner__frame .brand-strip (365px, a stale leftover
   from before this block's top was tuned to 260px) and html[lang="en"],
   html[lang="kk"] .brand-strip (372px, meant for the unrelated block-03
   Caterpillar/Epiroc/Sandvik strip, which happens to share the bare
   .brand-strip class) — so every language needs the same
   html[lang="X"] .partner__frame prefix here to actually win; a bare
   .brand-strip--partners selector loses the specificity tie. top is tuned
   to clear the title above it; KZ's translated title wraps a line taller
   than RU/EN, so it needs more clearance. */
html[lang="ru"] .partner__frame .brand-strip--partners,
html[lang="en"] .partner__frame .brand-strip--partners {
  top: 260px;
  gap: clamp(40px, 6vw, 80px);
}

html[lang="kk"] .partner__frame .brand-strip--partners {
  top: 304px;
  gap: clamp(40px, 6vw, 80px);
}

.brand-strip--partners .brand-strip__item {
  align-items: center;
  justify-content: flex-start;
}

/* Centered over the logo instead of pinned to the item's left edge — reads
   as "belonging to" that specific logo regardless of how wide it is. */
.brand-strip--partners .brand-strip__marker {
  left: 50%;
  transform: translateX(-50%);
}

/* Beats the old nth-child(2)/(3) 68px sizing left over from the three-logo
   Caterpillar/Epiroc/Sandvik strip (same .brand-strip__item structure,
   different content) — those rules match by position, not by which strip
   variant they're actually in, so they were silently overriding these
   logos' height. */
.partner__frame .brand-strip--partners .brand-strip__item img {
  height: 115px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}

.brand-strip__logo {
  display: block;
}

.brand-strip__logo--caterpillar {
  position: relative;
  width: 333px;
  height: 68px;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.brand-strip__logo--caterpillar img {
  position: absolute;
  top: -69.12%;
  left: 0;
  width: 100%;
  height: 235.29%;
  object-fit: fill;
}

.brand-strip__item:nth-child(2) img {
  width: 252px;
  height: 68px;
}

.brand-strip__item:nth-child(3) img {
  width: 298px;
  height: 54px;
  margin-top: 7px;
}

.facility {
  margin-top: 0;
  padding: 0;
}

.facility__backdrop {
  position: relative;
  min-height: 571px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111;
  overflow: clip;
}

.facility__backdrop::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0) 12%, rgba(14, 14, 14, 0.22) 48%, rgba(14, 14, 14, 0.88) 100%);
  content: "";
}

.facility__media,
.facility__video {
  position: absolute;
  inset: 0;
}

.facility__media {
  z-index: 0;
}

.facility__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.facility__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  min-height: 571px;
  padding: 0 64px 32px 58px;
}

.facility__info {
  max-width: 438px;
}

.facility__label {
  display: block;
  margin-bottom: 14px;
  color: var(--cyan);
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.facility__area {
  display: block;
  margin-bottom: 18px;
  font-family: "Orbitron", sans-serif;
  font-size: 42px;
  line-height: 72px;
  font-weight: 700;
  letter-spacing: 2.88px;
}

.facility__info p,
.facility__address p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.facility__address {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 311px;
}

.footer {
  padding: 34px 0 44px;
  background: var(--bg-0);
}

.footer__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: calc(100vw - 52px);
  max-width: 1440px;
  min-height: 803px;
}

body.home .footer__frame {
  max-width: none;
}

.footer__panel {
  position: relative;
  min-height: 803px;
  padding: 0;
}

.footer__shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 1;
}

.footer__ribbon {
  position: absolute;
  top: 143px;
  right: 0;
  left: 0;
  height: 150px;
  overflow: hidden;
}

.footer__ribbon img {
  width: max(100%, 1574.52px);
  height: 149.794px;
  max-width: none;
  opacity: 1;
}

.footer__topmark {
  position: absolute;
  top: 35px;
  left: 50%;
  z-index: 1;
  width: 138px;
  height: 29px;
  background: url("./assets/footer-logo-desktop.svg") center / contain no-repeat;
  color: #fff;
  transform: translateX(-50%);
}

.footer__topmark svg {
  display: none;
  width: 100%;
  height: 100%;
}

.footer__brand-copy {
  position: absolute;
  top: 83px;
  left: 52px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 142.12px;
  height: 103.01px;
  justify-content: flex-start;
  font-family: "Roboto Mono", monospace;
  font-size: 24px;
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}

.footer__social {
  position: absolute;
  top: 583px;
  left: 149px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 35px;
}

.footer__social a {
  display: block;
  transition: opacity 220ms var(--ease);
}

.footer__social a:hover {
  opacity: 0.7;
}

.footer__social svg {
  display: block;
}

.footer__social__linkedin {
  width: 39.42px;
  height: 39.42px;
}

.footer__social__instagram {
  width: 29.5px;
  height: 29.5px;
}

.footer__nav,
.footer__catalogs {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.footer__nav {
  top: 296px;
  left: 155px;
  width: 101px;
  align-items: center;
}

.footer__catalogs {
  top: 296px;
  right: 136px;
  left: auto;
  width: 228px;
  align-items: center;
}

.footer__heading {
  margin-bottom: 4px;
  font-weight: 700;
}

.footer__media {
  position: absolute;
  top: 111px;
  left: 50%;
  z-index: 1;
  width: 835px;
  height: 580px;
  transform: translateX(-50%);
}

.footer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer__contacts {
  position: absolute;
  top: 497px;
  right: 168px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 180px;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.footer__contacts p,
.footer__copyright {
  margin: 0;
}

.footer__contacts a {
  text-decoration: underline;
  color: inherit;
  white-space: nowrap;
}

html[lang="en"] .footer__nav,
html[lang="kk"] .footer__nav {
  left: 151px;
  width: 118px;
}

html[lang="en"] .footer__contacts,
html[lang="kk"] .footer__contacts {
  width: 193px;
}

html[lang="en"] .footer__contacts p,
html[lang="kk"] .footer__contacts p {
  white-space: nowrap;
}

.footer__copyright {
  position: absolute;
  bottom: 34px;
  left: 50%;
  z-index: 1;
  font-size: 14px;
  line-height: 1.6;
  transform: translateX(-50%);
}

.footer__mark {
  position: absolute;
  top: 670px;
  right: 47px;
  z-index: 1;
  width: 106px;
  height: 50px;
}

.footer__mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__legal {
  position: absolute;
  top: 776px;
  right: 47px;
  left: 41px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

@keyframes marquee {
  from {
    transform: translate(0, -50%);
  }

  to {
    transform: translate(-33%, -50%);
  }
}

@media (max-width: 1180px) {
  .nav {
    display: none;
  }

  .hero-tabs {
    left: 20px;
    width: calc(100% - 40px);
    max-width: none;
  }

  a.hero-tab {
    flex: 1 1 0;
    width: auto;
  }

  a.hero-tab--active {
    margin-right: 0;
  }

  .hero-tab__title {
    font-size: 24px;
  }

  .mission__grid,
  .partner__frame {
    grid-template-columns: 1fr;
  }

  .restoration {
    min-height: auto;
    padding: 52px 0 72px;
  }

  .restoration__frame {
    width: var(--frame);
    min-height: auto;
  }

  .restoration__grid,
  .restoration__grid > .reveal:first-child,
  .restoration__grid > .reveal:last-child {
    position: static;
    width: auto;
  }

  .restoration__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .partner__grid,
  .partner__grid > .reveal:first-child,
  .partner__grid > .reveal:last-child {
    position: static;
    width: auto;
  }

  .partner__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .partner__frame {
    min-height: auto;
  }

  html[lang="en"] .restoration__grid,
  html[lang="kk"] .restoration__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  html[lang="en"] .restoration__grid > .reveal:last-child,
  html[lang="kk"] .restoration__grid > .reveal:last-child {
    padding-top: 0;
  }

  .brand-strip {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 52px;
    padding-left: 0;
  }

  html[lang="ru"] .partner__frame .brand-strip,
  html[lang="en"] .partner__frame .brand-strip,
  html[lang="kk"] .partner__frame .brand-strip {
    top: auto;
  }

  .brand-strip__item {
    padding: 28px 0 0;
  }

  .brand-strip__item:not(:first-child) img {
    width: min(100%, 333px) !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  .brand-strip__logo--caterpillar {
    width: min(100%, 333px);
  }

  .facility {
    margin-top: 0;
  }

  .partner__frame {
    width: var(--frame);
    gap: 48px;
  }

  .partner::before {
    top: 150px;
  }

  .partner::after {
    display: none;
  }

  .partner__intro {
    min-height: auto;
  }

  .partner .section-marker,
  .partner .section-title {
    margin-left: 0;
  }

  .partner__plus,
  .partner__body,
  .partner__footprint,
  .partner__note {
    position: relative;
    top: auto;
    left: auto;
  }

  .partner__plus {
    margin: 42px 0 32px;
  }

  .partner__body {
    width: auto;
    max-width: 637px;
  }

  .partner__footprint {
    width: auto;
    height: auto;
    margin-top: 38px;
    pointer-events: none;
  }

  .partner__note {
    width: auto;
    max-width: 560px;
  }

  .partner__footprint img {
    position: static;
    width: min(672px, 100%);
    max-width: 100%;
    margin-top: 16px;
  }

  .partner__stats {
    width: min(446.5px, 100%);
    height: auto;
    min-height: 784px;
    margin-top: 0;
  }

  .catalog__head,
  .facility__content {
    flex-direction: column;
    align-items: flex-start;
  }

  .catalog__stage {
    min-height: 520px;
  }

  .footer__nav {
    left: 72px;
  }

  .footer__social {
    left: 66px;
  }

  .footer__catalogs {
    right: 70px;
    left: auto;
  }

  .footer__media {
    left: 50%;
    width: min(835px, 72vw);
    transform: translateX(-50%);
  }

  .footer__contacts {
    right: 92px;
    left: auto;
  }

  .footer__mark {
    right: 42px;
  }
}

@media (max-width: 920px) {
  :root {
    --frame: calc(100vw - 32px);
  }

  .hero,
  .hero__frame {
    min-height: 760px;
  }

  .hero__content {
    padding: 52px 0 180px;
  }

  .hero h1 {
    font-size: 2.85rem;
  }

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

  .hero-tabs {
    position: relative;
    left: 0;
    bottom: auto;
    width: var(--frame);
    max-width: none;
    margin: -88px auto 0;
    flex-direction: column;
  }

  a.hero-tab {
    flex: 0 0 auto;
    width: 100%;
    height: 220px;
    min-height: 220px;
  }

  a.hero-tab--active {
    flex-basis: auto;
    width: 100%;
  }

  .hero-tab + .hero-tab {
    margin-top: -1px;
    margin-left: 0;
  }

  .hero-tab__title {
    font-size: 24px;
  }

  .mission__support,
  .program {
    grid-template-columns: 1fr;
  }

  .mission__support {
    gap: 24px;
    margin-left: 0;
  }

  .mission {
    min-height: auto;
  }

  .mission__frame {
    width: var(--frame);
    min-height: auto;
    padding: 52px 0 0;
  }

  .mission .section-marker {
    position: static;
    margin-bottom: 52px;
  }

  .mission__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 0 0 56px;
  }

  .mission__visual {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 360px;
  }

  .mission blockquote,
  .mission__support {
    position: static;
    width: auto;
  }

  .mission blockquote {
    max-width: none;
  }

  .mission__support {
    grid-template-columns: 1fr;
    max-width: none;
    margin-top: 32px;
  }

  .mission__signature {
    width: 230px;
  }

  .mission__note {
    width: auto;
  }

  .program__panel {
    padding-inline: 24px;
  }

  .program__tabs,
  .program__cta {
    width: calc(100% + 48px);
  }

  .program__visual {
    min-height: 480px;
  }

  .catalog {
    min-height: auto;
  }

  .catalog__frame {
    width: 100%;
    height: auto;
    padding-top: 52px;
  }

  .catalog__head {
    position: static;
    width: var(--frame);
    margin-inline: auto;
  }

  .catalog .outline-button {
    margin-top: 0;
  }

  .catalog__stage {
    position: static;
    inset: auto;
    display: block;
    height: auto;
    padding-bottom: 32px;
    margin-top: 24px;
  }

  .catalog__stage::after {
    display: none;
  }

  .catalog__machine {
    position: static;
    width: 100%;
    height: 360px;
    object-fit: contain;
  }

  .callout,
  .catalog-dot {
    display: none;
  }

  .catalog__info {
    position: static;
    width: 100%;
    margin-top: 24px;
    padding: 0 24px;
  }

  .catalog__tabs {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .catalog-tab {
    min-height: 112px;
  }

  .facility__backdrop {
    min-height: 720px;
  }

  .facility__content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 720px;
    padding: 0 24px 24px;
  }

  .footer__panel {
    min-height: 980px;
  }

  .footer__ribbon {
    top: 90px;
  }

  .footer__topmark {
    top: 20px;
  }

  .footer__brand-copy,
  .footer__nav,
  .footer__social,
  .footer__catalogs,
  .footer__contacts,
  .footer__copyright,
  .footer__legal,
  .footer__mark,
  .footer__media {
    position: static;
    transform: none;
  }

  .footer__panel {
    display: grid;
    gap: 24px;
    justify-items: center;
    padding-top: 90px;
  }

  .footer__brand-copy {
    justify-self: start;
    margin-left: 18px;
  }

  .footer__nav,
  .footer__catalogs {
    align-items: center;
    text-align: center;
  }

  .footer__media {
    width: min(620px, 86%);
    height: auto;
  }

  .footer__contacts {
    text-align: center;
  }

  .footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding-bottom: 24px;
  }

  .hero__frame {
    min-height: auto;
  }

  .hero__ribbon--metal {
    top: -120px;
    right: -240px;
    width: 620px;
    height: 620px;
  }

  .hero__ribbon--shadow {
    top: 180px;
    left: -18%;
    width: 144%;
    height: 150px;
  }

  .hero__content {
    padding: 60px 0 238px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero__subtitle {
    justify-self: start;
    margin-bottom: 170px;
    max-width: 190px;
  }

  .mission__grid {
    gap: 22px;
  }

  .mission blockquote {
    font-size: 1.4rem;
  }

  .program__title {
    margin-top: 52px;
    font-size: 2.15rem;
  }

  .program__tabs {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .program__visual {
    min-height: 360px;
  }

  .catalog__frame {
    padding-top: 42px;
  }

  .catalog__head {
    gap: 20px;
  }

  .catalog .section-title {
    font-size: 2.15rem;
    line-height: 1.18;
  }

  .catalog__stage {
    height: auto;
  }

  .catalog__machine {
    width: 100%;
    height: 240px;
  }

  .catalog-tab {
    min-height: 98px;
    padding: 18px;
  }

  .section-close {
    top: 22px;
    right: 16px;
    font-size: 2.5rem;
  }

  .partner__plus {
    width: 128px;
    height: 188px;
    margin-top: 28px;
  }

  .partner__plus::before {
    left: 11px;
    bottom: 27px;
    width: 27px;
  }

  .partner__plus::after {
    left: 24px;
    bottom: 14px;
    height: 27px;
  }

  .partner .section-title {
    font-size: 2.15rem;
  }

  .partner__body {
    font-size: 18px;
  }

  .partner__note {
    font-size: 20px;
  }

  .partner__stats {
    min-height: 0;
    padding: 72px 24px 72px;
  }

  .partner__stats::after {
    border-top-width: 72px;
    border-left-width: 72px;
  }

  .stat-block strong {
    font-size: 34px;
    line-height: 58px;
  }

  .outline-button,
  .solid-button {
    width: 100%;
  }

  .facility__backdrop {
    min-height: 640px;
  }

  .facility__content {
    min-height: 640px;
  }

  .footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  :root {
    --frame: calc(100vw - 48px);
  }

  .hero {
    /* .hero-tabs is absolutely positioned (top: 688px, 4 x 66px tabs — see
       further down this same block) against this section, so it needs
       enough height to contain the accordion instead of letting it spill
       into .mission. +36px covers .hero-tabs' own .reveal transform
       (translateY(36px) before its scroll-reveal transition settles). */
    min-height: 988px;
    padding-bottom: 0;
  }

  .hero__frame {
    display: block;
    width: 100%;
    min-height: 918px;
    padding: 0;
  }

  .topbar {
    position: relative;
    z-index: 30;
    width: 100%;
    height: 88px;
    padding: 23px 24px;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(17.9px);
  }

  .brand svg {
    width: 81.5px;
    height: 42px;
  }

  .lang-switch {
    position: static;
    width: 24px;
    height: 24px;
    font-size: 0;
  }

  .lang-switch__trigger {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
  }

  .lang-switch__trigger span:first-child,
  .lang-switch__arrow {
    display: none;
  }

  .lang-switch__trigger::before,
  .lang-switch__trigger::after {
    position: absolute;
    right: 3px;
    left: 3px;
    height: 1.5px;
    background: #fff;
    transform: none;
    content: "";
  }

  .lang-switch__trigger::before {
    top: 7px;
  }

  .lang-switch__trigger::after {
    bottom: 7px;
  }

  .lang-switch__menu {
    top: 104px;
    right: 0;
    left: 0;
    width: auto;
    min-width: 0;
    font-size: 12px;
  }

  .lang-switch__pages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
  }

  .lang-switch__pages a {
    padding: 12px 10px;
    text-align: left;
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
  }

  .lang-switch__divider {
    display: block;
    height: 1px;
    margin: 6px 4px;
    background: rgba(255, 255, 255, 0.14);
  }

  .hero__content {
    position: absolute;
    top: 387px;
    right: 24px;
    left: 24px;
    padding: 0;
  }

  .hero h1 {
    width: 354px;
    max-width: 100%;
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero__subtitle {
    position: absolute;
    top: 650px;
    left: 24px;
    max-width: calc(100% - 48px);
    margin: 0;
    white-space: normal;
  }

  .hero-tabs {
    position: absolute;
    top: 688px;
    bottom: auto;
    left: 0;
    width: 100%;
    margin: 0;
  }

  a.hero-tab {
    width: 100%;
    height: 66px;
    min-height: 66px;
  }

  .hero-tab::before {
    inset: 0;
    background: #e5e5e5;
  }

  .hero-tab[data-hero-program="1"]::before {
    background: #cacaca;
  }

  .hero-tab[data-hero-program="2"]::before {
    background: #aaa;
  }

  .hero-tab[data-hero-program="3"]::before {
    background: #8f8f8f;
  }

  .hero-tab::after,
  .hero-tab__copy,
  .hero-tab__image {
    display: none;
  }

  .hero-tab__title {
    top: 16px;
    left: 24px;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 1px;
  }

  .hero-tab__arrow {
    top: 16px;
    right: 7px;
    width: 34px;
    height: 34px;
    font-size: 0;
    transform: rotate(45deg);
  }

  .hero-tab__arrow::before {
    display: block;
    font-size: 24px;
    line-height: 34px;
    content: "→";
  }

  .mission {
    min-height: 735px;
  }

  .mission__frame {
    width: 100%;
    min-height: auto;
    padding: 120px 24px 0;
  }

  .mission__grid {
    padding: 0;
  }

  .mission .section-marker {
    margin-bottom: 25px;
  }

  .mission .section-close {
    top: 120px;
    right: 24px;
    width: 20px;
    height: 18px;
  }

  .mission__visual {
    width: 165px;
    height: 184px;
    min-height: 0;
  }

  .mission blockquote {
    width: min(292px, 100%);
    margin-top: 21px;
    font-size: 12px;
    line-height: 1.6;
  }

  .mission__support {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 21px;
    margin-top: 21px;
  }

  .mission__signature {
    width: 180px;
  }

  .mission__signature-draw {
    width: 180px;
    height: 151px;
    align-items: flex-start;
  }

  .mission__signature-draw canvas {
    max-width: 180px !important;
    height: auto !important;
  }

  .mission__signature-fallback {
    font-size: 2.4rem;
  }

  .mission__signature-role,
  .mission__note {
    font-size: 12px;
    line-height: 1.6;
  }

  .mission__signature-role {
    margin-top: 4px;
  }

  .mission__note {
    width: auto;
  }

  .scroll-band {
    height: 108px;
    margin: 7px 0 18px;
  }

  .scroll-band::before {
    background-size: 228.7px 108.8px;
  }

  .scroll-band__track {
    top: 44.95px;
    gap: 34px;
    font-size: 11.67px;
  }

  .program {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 811px;
  }

  .program::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: 441px;
    background: linear-gradient(180deg, #1a1a1a 0%, #252525 100%);
    content: "";
  }

  .program__panel {
    display: contents;
    height: auto;
    min-height: 0;
    padding: 0;
    transform: none;
  }

  .program__panel > * {
    position: relative;
    z-index: 1;
  }

  .program__panel > .section-marker {
    order: 1;
    margin: 37px auto 0;
  }

  .program__title {
    order: 2;
    align-self: center;
    margin-top: 21px;
    font-size: 36px;
    line-height: 1.2;
  }

  .program__divider {
    order: 3;
    align-self: center;
    width: 312px;
    margin: 21px 0 24px;
  }

  .program__lead {
    order: 4;
    align-self: center;
    max-width: 217px;
  }

  .program__copy {
    order: 5;
    align-self: center;
    max-width: 299px;
    margin-top: 16px;
  }

  .program__tabs {
    position: absolute;
    right: auto;
    bottom: 100px;
    left: 50%;
    z-index: 3;
    width: 322px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 13px;
  }

  .program-tab {
    gap: 6px;
    font-size: 11px;
  }

  .program__visual {
    position: absolute;
    right: 0;
    bottom: 80px;
    left: 0;
    z-index: 1;
    order: 7;
    flex: 0 0 290px;
    height: 290px;
    min-height: 290px;
    margin-top: 0;
  }

  .program__cta {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    order: 8;
    width: 100%;
    min-height: 80px;
  }

  .partner {
    min-height: auto;
    padding: 34px 0 0;
  }

  .partner::before {
    display: none;
  }

  .partner__frame {
    width: 100%;
    padding: 0 24px;
    gap: 0;
  }

  .partner__intro {
    height: auto;
    min-height: 0;
    padding: 0 24px 56px;
  }

  .partner .section-title {
    width: 100%;
    max-width: 330px;
    margin-top: 12px;
    font-size: 32px;
    line-height: 38px;
  }

  .partner__plus {
    width: 58px;
    height: 82px;
    margin: 14px 0 28px;
  }

  .partner__plus::before {
    left: 25px;
    bottom: 28px;
  }

  .partner__plus::after {
    left: 39px;
    bottom: 13px;
  }

  .partner__body,
  .partner__note {
    font-size: 16px;
    line-height: 1.6;
  }

  .partner__footprint {
    margin-top: 23px;
    padding-bottom: 0;
  }

  .partner__footprint img {
    position: absolute;
    top: -8px;
    left: 103px;
    width: 466px !important;
    max-width: none;
    opacity: 0.35;
  }

  .partner__note {
    position: relative;
    width: 100%;
    max-width: none;
  }

  .partner__stats {
    width: 100%;
    height: auto;
    min-height: 640px;
    padding: 47px 25px 42px;
    margin-top: 0;
    clip-path: polygon(0 0, 89% 0, 100% 11%, 100% 100%, 0 100%);
  }

  .partner__stats::after {
    border-top-width: 67px;
    border-left-width: 67px;
  }

  .stat-block + .stat-block {
    margin-top: 42px;
  }

  .catalog {
    min-height: auto;
    padding-bottom: 40px;
  }

  .catalog__frame {
    height: auto;
    padding-top: 21px;
  }

  .catalog__head {
    width: var(--frame);
    gap: 27px;
  }

  .catalog__head > div {
    gap: 6px;
  }

  .catalog .section-title {
    font-size: 32px;
    line-height: 44px;
  }

  .catalog .outline-button {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .catalog__stage {
    display: none;
  }

  .catalog__tabs {
    margin-top: 31px;
  }

  .catalog-tab {
    height: auto;
    min-height: 96px;
    justify-content: flex-start;
    padding: 24px 58px 22px 24px;
    gap: 8px;
    overflow: visible;
  }

  .catalog-tab span {
    font-size: 16px;
  }

  .catalog-tab small {
    font-size: 12px;
    line-height: 1.35;
  }

  .restoration {
    min-height: auto;
    padding: 77px 0 72px;
  }

  .restoration__grid {
    gap: 32px;
  }

  .restoration .section-title {
    width: 100%;
    max-width: 320px;
    margin-top: 16px;
    font-size: 32px;
    line-height: 32px;
  }

  .restoration__lede {
    width: 100%;
    max-width: none;
    margin-top: 20px;
    font-size: 20px;
    line-height: 32px;
  }

  .brand-strip__item {
    flex: 0 0 auto;
    padding-top: 36px;
  }

  .brand-strip__logo--caterpillar {
    width: 206px;
    height: 42px;
  }

  .brand-strip__item:nth-child(2) img {
    width: 156px !important;
    height: 42px !important;
  }

  .brand-strip__item:nth-child(3) img {
    width: 185px !important;
    height: 34px !important;
    margin-top: 4px !important;
  }

  .facility__backdrop {
    min-height: 571px;
  }

  .facility__content {
    justify-content: flex-start;
    gap: 14px;
    min-height: 571px;
    padding: 145px 24px 39px;
  }

  .facility__label {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 1px;
  }

  .facility__area {
    margin-bottom: 14px;
    font-size: 32px;
    line-height: 40px;
  }

  .facility__info p,
  .facility__address p {
    width: min(311px, 100%);
    font-size: 14px;
    line-height: 1.6;
  }

  .facility .solid-button {
    width: auto;
    min-width: 232px;
  }

  .footer {
    min-height: 806px;
    padding: 0 0 16px;
  }

  .footer__frame {
    width: 100%;
    min-height: 806px;
  }

  .footer__panel {
    display: block;
    min-height: 716px;
    padding: 0;
    overflow: hidden;
  }

  .footer__shell {
    content: url("./assets/footer-shell-mobile.png");
  }

  .footer__topmark {
    top: 36px;
    left: 24px;
    width: 83px;
    height: 43px;
    background: url("./assets/cams-logo-full.svg") center / contain no-repeat;
    transform: none;
  }

  .footer__brand-copy {
    position: absolute;
    top: 38px;
    left: 76px;
    z-index: 2;
    display: none;
    width: 30px;
    height: 21px;
    margin: 0;
    justify-self: auto;
    font-size: 3.8px;
    line-height: 1.18;
    letter-spacing: 0.02em;
    color: #fff;
  }

  .footer__topmark::before {
    content: none;
  }

  .footer__topmark svg {
    display: none;
  }

  .footer__nav,
  .footer__social,
  .footer__catalogs,
  .footer__contacts,
  .footer__media,
  .footer__ribbon,
  .footer__mark,
  .footer__copyright,
  .footer__legal {
    position: absolute;
  }

  .footer__social {
    top: 354px;
    left: 24px;
    right: auto;
    gap: 7.25px;
  }

  .footer__social__linkedin {
    width: 21.5px;
    height: 21.5px;
  }

  .footer__social__instagram {
    width: 16.1px;
    height: 16.1px;
  }

  .footer__nav,
  .footer__catalogs,
  .footer__contacts {
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
  }

  .footer__nav {
    top: 112px;
    left: 24px;
    width: 112px;
  }

  .footer__catalogs {
    top: 112px;
    right: auto;
    left: calc(50% + 4px);
    width: calc(50% - 28px);
  }

  .footer__contacts {
    top: 430px;
    right: auto;
    left: 24px;
    width: calc(100% - 48px);
  }

  .footer__contacts p,
  .footer__copyright {
    font-size: 12px;
    line-height: 1.6;
  }

  .footer__media {
    top: 510px;
    left: 0;
    width: 100%;
    height: 192px;
    transform: none;
  }

  .footer__media img {
    object-fit: contain;
    object-position: center bottom;
  }

  .footer__ribbon {
    top: 569px;
    height: 46px;
  }

  .footer__ribbon img {
    width: 487px;
    height: 46px;
  }

  .footer__mark {
    top: 625px;
    right: auto;
    left: 50%;
    width: 32px;
    height: 15px;
    transform: translateX(-50%);
  }

  .footer__copyright {
    top: 700px;
    left: 50%;
    width: calc(100% - 48px);
    height: auto;
    text-align: center;
    transform: translateX(-50%);
  }

  .footer__legal {
    top: 750px;
    right: 0;
    left: 0;
    flex-direction: column-reverse;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    line-height: 1.6;
  }

  html[lang="en"] .footer,
  html[lang="kk"] .footer {
    min-height: 806px;
  }

  html[lang="en"] .footer__frame,
  html[lang="kk"] .footer__frame {
    min-height: 806px;
  }

  html[lang="en"] .footer__panel,
  html[lang="kk"] .footer__panel {
    min-height: 716px;
  }

  html[lang="en"] .footer__nav,
  html[lang="kk"] .footer__nav {
    top: 112px;
    left: 24px;
    width: 112px;
  }

  html[lang="en"] .footer__catalogs,
  html[lang="kk"] .footer__catalogs {
    top: 112px;
    right: auto;
    left: calc(50% + 4px);
    width: calc(50% - 28px);
  }

  html[lang="en"] .footer__contacts,
  html[lang="kk"] .footer__contacts {
    top: 430px;
    right: auto;
    left: 24px;
    width: calc(100% - 48px);
  }

  html[lang="en"] .footer__contacts p,
  html[lang="kk"] .footer__contacts p {
    white-space: normal;
  }

  html[lang="en"] .footer__media,
  html[lang="kk"] .footer__media {
    top: 510px;
  }

  html[lang="en"] .footer__ribbon,
  html[lang="kk"] .footer__ribbon {
    top: 569px;
  }

  html[lang="en"] .footer__mark,
  html[lang="kk"] .footer__mark {
    top: 625px;
  }

  html[lang="en"] .footer__copyright,
  html[lang="kk"] .footer__copyright {
    top: 700px;
    width: calc(100% - 48px);
    height: auto;
    text-align: center;
  }

  html[lang="en"] .footer__legal,
  html[lang="kk"] .footer__legal {
    top: 750px;
  }
}

/* ─── CAMS Machinery ────────────────────────────────── */
.machinery {
  position: relative;
  min-height: 920px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.machinery__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0e0e0e;
}

.machinery__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(14,14,14,.72) 0%, rgba(14,14,14,.35) 45%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.machinery__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: 0;
  transition: opacity .5s ease;
  display: block;
}

.machinery__bg-img.is-active {
  opacity: 1;
}

.machinery__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 40px 30px 0;
}

.machinery__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
}

.machinery__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.machinery__title {
  font: 400 40px/1.1 var(--font-display);
  letter-spacing: .04em;
  color: #fff;
  margin: 0;
}

.machinery__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 16px/1 var(--font-mono);
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border: 1px solid #fff;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}

.machinery__cta:hover {
  border-color: #fff;
  background: rgba(255,255,255,.06);
}

.machinery__copy {
  font: 400 14px/1.6 var(--font-mono);
  color: rgba(255,255,255,.75);
  max-width: 400px;
  margin: 0 0 auto;
}

.machinery__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 48px;
  background: linear-gradient(to bottom, #131313, #1e1e1e);
}

.machinery-tab {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 24px 24px;
  border: none;
  border-right: 1px solid rgba(255,255,255,.10);
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: rgba(255,255,255,.45);
  transition: color .25s;
}

.machinery-tab:last-child {
  border-right: 0;
}

.machinery-tab.is-active,
.machinery-tab:hover {
  color: #fff;
}

.machinery-tab__name {
  font: 600 16px/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 60px;
}

.machinery-tab__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.machinery-tab__payload {
  font: 400 16px/1 var(--font-mono);
}

.machinery-tab__arrow {
  font-size: 16px;
  flex-shrink: 0;
}

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

  .machinery__inner {
    padding: 32px 20px 0;
  }

  .machinery__top {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
  }

  .machinery__title {
    font-size: 28px;
  }

  .machinery__tabs {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .machinery-tab {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 20px 16px;
  }

  .machinery-tab:last-child {
    border-bottom: none;
  }

  .machinery-tab__name {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

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

/* Mobile sizing for the Dana/Kessler/Volvo/Cummins strip — placed last in
   the file (and using !important throughout) specifically to outrank the
   old nth-child(2)/(3)/:not(:first-child) rules above, which were written
   for the unrelated Caterpillar/Epiroc/Sandvik strip and were matching
   these items by position instead of by which strip they're actually in
   (same root cause as the desktop specificity fixes for this same strip).
   One consistent height for all four regardless of position, instead of
   Dana getting stuck at the desktop 115px and Cummins stretching to ~320px
   under object-fit:contain's own aspect ratio via width:100%;height:auto. */
@media (max-width: 1180px) {
  .brand-strip--partners .brand-strip__item img {
    width: auto !important;
    height: 56px !important;
    max-width: min(100%, 260px) !important;
    margin-top: 0 !important;
  }
}