/* ============================================
   Component: About Section
   ============================================ */
.about {
  position: relative;
  overflow: hidden;
}

.about__inner {
  display: flex;
  min-height: 676px;
  position: relative;
  z-index: 0;
}

/* Light background rectangle — covers left 61% */
.about__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 61.2%;
  height: 100%;
  background-color: var(--color-bg-light);
  z-index: 1;
}

/* Light diagonal triangle — angular transition from content to images */
.about__inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 41.6%;
  width: 50.7%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 4;
}

/* Decorative SVG parallelogram overlays */
.about__decor {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
}

.about__decor--vector5 {
  left: -7%;
  width: 50.9%;
  z-index: 3;
  transform: scaleX(-1);
}

.about__decor--vector4 {
  left: 41.6%;
  width: 50.7%;
  z-index: 3;
}

.about__decor--vector7 {
  left: 79.1%;
  width: 50.9%;
  z-index: 5;
  transform: scaleX(-1);
}

.about__content {
  position: relative;
  z-index: 6;
  padding: 136px 0;
  width: 50%;
  display: flex;
  align-items: center;
}

.about__content-inner {
  max-width: calc(522px + (100vw - var(--container-max-width)) / 2 + 32px);
  padding-left: calc((100vw - var(--container-max-width)) / 2);
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 37px;
}

.about__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extra-bold);
  line-height: 40px;
  color: var(--color-text-heading);
  width: 100%;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
  width: 100%;
}

.about__images {
  position: relative;
  width: 50%;
  min-height: 676px;
}

/* Plant/equipment photo wrapper — luminosity blend mode for desaturation */
.about__image-worker-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 66.7%;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: luminosity;
  z-index: 2;
}

/* Plant/equipment photo (about-worker.png) */
.about__image-worker {
  position: absolute;
  top: 0;
  left: -57.7%;
  width: 158.4%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  filter: grayscale(1);
}

/* Dark background panel — right side */
.about__image-dark-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #252931;
  z-index: 2;
}

/* Dark diagonal in bottom-right */
.about__image-dark-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 100%;
  height: 100%;
  background-color: inherit;
  clip-path: polygon(100% 55%, 100% 100%, 0 100%);
}

/* Worker portrait (about-equipment.png) — overlapping grayscale and dark areas */
.about__image-equipment {
  position: absolute;
  top: 31px;
  left: 27.8%;
  width: 38.6%;
  height: calc(100% - 31px);
  object-fit: cover;
  object-position: top center;
  z-index: 5;
  transform: scaleX(-1);
}

/* Bottom yellow accent strip (SVG) — sits below .about__inner */
.about__accent-strip {
  display: block;
  margin-left: 41.4%;
  width: 63.6%;
  height: 13px;
  transform: scaleX(-1);
  background-color: var(--color-primary);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 100%, 0 100%);
}