.about-page {
  --about-green: #b7ef20;
  background: #050505;
  color: #f4f4f1;
}

body.rtl-lang.about-page .about-story-copy,
body.rtl-lang.about-page .about-culture-title {
  text-align: right;
}

.about-page .site-header { background: linear-gradient(180deg, rgba(2, 2, 2, .96), rgba(2, 2, 2, .68) 72%, transparent); }
.about-page .nav-item.active { color: var(--about-green); }

.about-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 142px 0 90px;
  text-align: center;
  background: #020202;
}

.about-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: calc(100svh - 232px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-hero-title {
  width: 100%;
  max-width: 760px;
  margin: 24px auto 20px;
  font-family: var(--font-heading);
  font-size: 70px;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
}

.split-text-word,
.split-text-char { display: inline-block; }
.split-text-word { white-space: nowrap; }
.split-text-char { will-change: transform, opacity; }

.about-hero-copy {
  max-width: 650px;
  margin: 0 auto;
  color: rgb(255, 255, 255);
  font-size: 18px;
  line-height: 1.75;
}

.about-scroll-link {
  position: absolute;
  bottom: -40px;
  left: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--accent-lime);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
}

.about-scroll-link::after {
  content: "";
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--accent-lime), transparent);
  animation: aboutScrollCue 1.8s ease-in-out infinite;
}

@keyframes aboutScrollCue {
  0%, 100% { opacity: .32; transform: scaleY(.55); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

.about-story{
  height: 34vw;
}
.about-story,
.about-values-intro,
.about-culture {
  position: relative;
  padding: 0px 0;
  background: #050505;
}

.about-page .section-label:not(.process-label) {
  text-align: center;
  font-size: 30px;
  font-family: 400;
  color: white;
}

.about-story-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(55px, 9vw, 150px);
  margin-top: 48px;
}

.about-story-copy h2,
.about-values-heading h2,
.about-culture-title h2 {
  margin: 0 0 30px;
  font: 400 28px "Outfit", sans-serif;
}

.about-story-copy p,
.about-values-heading p,
.about-culture-title p {
  color: white;
  line-height: 1.8;
  font-size: 18px;
}

.about-story-copy p + p { margin-top: 22px; }

.about-story-visual {
  position: relative;
  margin: 0;
  transform: rotate(2.2deg);
}

.about-story-visual::before {
  content: "";
  position: absolute;
  inset: -18px;
}

.about-story-visual img {
  display: block;
  width: 100%;
}

.about-image-index {
  position: absolute;
  right: 10px;
  bottom: -36px;
  color: #6d6d68;
  font-size: 10px;
  letter-spacing: .18em;
}

.about-values-intro { padding-bottom: 40px; }

.about-values-heading {
  display: grid;
  grid-template-columns: 1.15fr .55fr;
  align-items: end;
  gap: 12vw;
  margin-top: 40px;
}

.about-values-heading p { padding-bottom: 9px; }

.about-orbit-scroll {
  position: relative;
  height: 430vh;
  background: #050505;
}

.about-orbit-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(183,239,32,.055), transparent 34%);
}

.about-orbit-rings {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(78vw, 1180px);
  height: min(58vh, 580px);
  transform: translate(-50%, -50%);
}

.about-orbit-rings span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
}

.about-orbit-rings span:last-child {
  inset: 16%;
  border-color: rgba(183,239,32,.1);
}

.about-orbit-x {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(220px, 27vw, 450px);
  transform: translate(-50%, -50%);
}

.about-orbit-x img { display: block; width: 100%; }

.about-value-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(290px, 24vw);
  padding: 22px 23px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,8,8,.78);
  backdrop-filter: blur(12px);
  opacity: 0;
  will-change: transform, opacity;
}

.about-value-number {
  display: block;
  color: var(--about-green);
  font: 600 11px "Inter", sans-serif;
  letter-spacing: .18em;
}

.about-value-card h3 {
  margin: 25px 0 11px;
  font: 500 23px/1.1 "Outfit", sans-serif;
}

.about-value-card p {
  margin: 0;
  color: #85857f;
  font-size: 12px;
  line-height: 1.65;
}

.about-culture { padding-top: 170px; padding-bottom: 190px; overflow: hidden; }

.about-culture-title {
  display: grid;
  grid-template-columns: 1fr .5fr;
  gap: 12vw;
  align-items: end;
  margin-top: 35px;
}

.about-page .contact-section {
  z-index: 2;
  min-height: 145svh;
  padding-block: 150px;
  isolation: isolate;
}

.about-page .contact-x-bg {
  z-index: 1;
  width: min(52vw, 760px);
  height: min(62svh, 600px);
  transform: none;
}

.about-page .contact-container {
  z-index: 4;
  max-width: 600px;
}

.about-contact-images {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.about-contact-image {
  position: absolute;
  margin: 0;
  width: 27vw;
  will-change: transform, opacity;
}

.about-contact-image img {
  display: block;
  width: 100%;
  height: auto;
}

.about-contact-image.image-left {
  left: 3.5%;
  top: 40%;
}

.about-contact-image.image-right {
  right: 3%;
  top: 40%;
}

.about-contact-image.image-bottom {
  left: 50%;
  bottom: 2vw;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .about-story-grid,
  .about-values-heading,
  .about-culture-title { grid-template-columns: 1fr; gap: 30px; }
  .about-story-visual { margin: 25px 18px 0; }
  .about-value-card { width: min(240px, 66vw); }
  .about-orbit-rings { width: 120vw; height: 55vh; }
  .about-page .contact-section { min-height: 1120px; padding: 260px 0 250px; }
  .about-page .contact-x-bg { transform: translate(-50%, -50%); }
  .about-contact-image { width: min(245px, 52vw); }
  .about-contact-image.image-left { left: -3%; top: 7%; }
  .about-contact-image.image-right { right: -4%; top: 9%; }
  .about-contact-image.image-bottom { bottom: 2%; }
}

@media (max-width: 767px) {
  .about-hero { min-height: 92svh; padding: 104px 0 60px; }
  .about-hero-inner { min-height: calc(92svh - 164px); }
  .about-hero-title { font-size: clamp(38px, 12.5vw, 56px); }
  .about-hero-copy { font-size: 15px; }
}

@media (max-width: 600px) {
  .about-hero { min-height: 92svh; padding: 104px 0 60px; }
  .about-hero-inner { min-height: calc(92svh - 164px); }
  .about-hero-title { font-size: clamp(38px, 12.5vw, 56px); }
  .about-hero-copy { font-size: 15px; }
  .about-story, .about-values-intro, .about-culture { padding: 95px 0; }
  .about-story-copy h2, .about-values-heading h2, .about-culture-title h2 { font-size: 40px; }
  .about-values-intro { padding-bottom: 10px; }
  .about-orbit-scroll { height: 380vh; }
  .about-orbit-stage { min-height: 600px; }
  .about-orbit-x { width: 210px; }
  .about-culture { padding-bottom: 110px; }
  .about-page .contact-section { min-height: 1060px; padding: 245px 0 235px; }
  .about-page .contact-x-bg { width: 92vw; height: 52svh; }
  .about-contact-image { width: min(40vw, 190px); }
  .about-contact-image.image-left {
    left: calc(50% - min(40vw, 190px) - 8px);
    top: 7%;
  }
  .about-contact-image.image-right {
    right: calc(50% - min(40vw, 190px) - 8px);
    top: 7%;
  }
  .about-contact-image.image-bottom { bottom: 4%; width: 230px; }
  .about-page .contact-title { font-size: 39px; }
  .about-page .contact-desc { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-scroll-link::after { animation: none !important; }
  .about-orbit-scroll { height: auto; padding: 100px 20px; }
  .about-orbit-stage { position: relative; height: auto; min-height: 0; display: grid; gap: 16px; overflow: visible; }
  .about-orbit-rings, .about-orbit-x { display: none; }
  .about-value-card { position: relative; inset: auto; width: 100%; opacity: 1; transform: none !important; }
}