.about {
  display: block;
  padding: 0;
  background: #020811;
}
.about-mobile-overview,.about-mobile-full-copy,.about-more>summary{display:none}
.about-more{margin:0;padding:0;border:0}

.about-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 58vw, 760px);
  padding: 110px max(6vw, calc((100vw - 1400px) / 2)) 74px;
  overflow: hidden;
}

.about .factory-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
}

.about .factory-motion video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.about .factory-motion::after {
  display: none;
}

.about-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, #020811df 0%, #020811aa 35%, #02081114 76%),
    linear-gradient(0deg, #020811ad 0%, transparent 42%);
  pointer-events: none;
}

html[dir="rtl"] .about-stage::after {
  background:
    linear-gradient(270deg, #020811df 0%, #020811aa 35%, #02081114 76%),
    linear-gradient(0deg, #020811ad 0%, transparent 42%);
}

.about-stage-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
}

.about-copy {
  max-width: 620px;
}

.about-copy h2 {
  max-width: 22ch;
  text-wrap: balance;
}

.about-copy .lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.65;
  color: #eff5fc;
}

.about-details {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 6vw 72px;
}

.about-details > p:first-child {
  max-width: 900px;
  margin-top: 0;
  line-height: 1.75;
}

.about-process {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid #294869;
}

.about-process h3 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 600;
}

.about-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: about-step;
}

.about-steps li {
  counter-increment: about-step;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 15px;
  row-gap: 3px;
  padding: 14px 16px;
  border: 1px solid #294869;
  background: #0b1b2b;
}

.about-steps li::before {
  content: counter(about-step, decimal-leading-zero);
  grid-row: 1 / 3;
  align-self: start;
  color: #78b4f0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.about-steps strong {
  font-size: 15px;
}

.about-steps span {
  color: #b1c2d7;
  font-size: 14px;
  line-height: 1.5;
}

.about-contact {
  margin-top: 26px;
}

.about-contact a {
  color: #a8d1fa;
  text-underline-offset: 4px;
}

.home-page .about-contact a,
.home-page footer .footer-contact a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.approach-intro {
  max-width: 780px;
  color: #c6cfd5;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
}

.approach .steps {
  margin-top: 36px;
}

@media (max-width: 950px) {
  .about-stage {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .about .factory-motion {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .about-stage::after {
    display: none;
  }

  .about-stage-overlay {
    padding: 38px 6vw 12px;
    background: #020811;
  }

  .about-details {
    padding-top: 24px;
  }
}

@media (max-width: 700px) {
  .about-steps {
    grid-template-columns: 1fr;
  }

  .about-stage-overlay {
    padding-top: 30px;
  }

  .about-copy h2 {
    font-size: clamp(28px, 8vw, 38px);
  }
}
@media(max-width:650px){
  .about-desktop-lead{display:none}
  .about-mobile-overview,.about-mobile-full-copy{display:block}
  .about-mobile-overview .lead{font-size:17px;line-height:1.8}
  .about-mobile-points{padding-inline-start:20px;margin:14px 0 0;color:#c3d4e5;font-size:14px;line-height:1.9}
  .about-more>summary{display:block;cursor:pointer;list-style:none;min-height:44px;margin:12px 6vw 28px;padding:10px 16px;border:1px solid #56758f;background:#0b1b2b;color:#eaf2fa;font-size:14px;width:fit-content}
  .about-more>summary::-webkit-details-marker{display:none}
  .about-more>summary:focus-visible{outline:2px solid #b6d6f3;outline-offset:4px}
  .about-more-close-label,.about-more[open] .about-more-open-label{display:none}
  .about-more[open] .about-more-close-label{display:inline}
  .about-more .about-details{padding-top:0;padding-bottom:36px}
  .about-more .about-details{display:flex;flex-direction:column}
  .about-mobile-full-copy{order:-1}
  .about-mobile-full-copy{font-size:15px;line-height:1.9;color:#b1c2d7}
}