.about-section {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.about-intro {
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  background-image: url("../imgs/about-bg1.jpg");
}
.about-intro-copy {
  position: absolute;
  left: 59.5%;
  top: 27.5%;
  width: 29%;
  margin: 0;
  color: #111;
  font-size: clamp(13px, .94vw, 18px);
  line-height: 1.82;
  font-weight: 500;
}

.about-team { background-image: url("../imgs/about-bg2.jpg"); }
.about-team-content {
  position: absolute;
  left: 10.95%;
  top: 30.5%;
  width: 29.2%;
  color: #fff;
}
.about-team-content p {
  margin: 0;
  font-size: clamp(13px, .95vw, 18px);
  line-height: 1.85;
  font-weight: 500;
}
.about-outline-button {
  display: grid;
  place-items: center;
  width: 240px;
  height: 57px;
  margin-top: 58px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 27px;
  line-height: 1;
  transition: background .25s ease, color .25s ease;
}
.about-outline-button:hover,
.about-outline-button:focus-visible { background: #fff; color: #222; }

.about-impact { background: #313131; color: #fff; }
@media (min-width: 1001px) {
  body[data-screen-page] .about-metrics {
    padding-block: 6svh;
    row-gap: 10svh;
  }
  body[data-screen-page] .about-metric {
    padding-block: clamp(22px, 3svh, 36px);
  }
  body[data-screen-page] .about-metric img {
    max-width: 27%;
    max-height: 62%;
  }
  body[data-screen-page] .about-metric:first-child .about-metric-copy {
    max-width: 100%;
  }
  body[data-screen-page] .about-metric:first-child img {
    top: 62%;
  }
}
.about-metrics {
  width: min(1500px, 78.125vw);
  height: 100%;
  margin-inline: auto;
  padding-block: min(18.5svh, 200px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: min(90px, 4.7vw);
  row-gap: min(140px, 13svh);
}
.about-metric {
  position: relative;
  min-width: 0;
  background: #1b1b1b;
  display: flex;
  align-items: center;
  padding: clamp(26px, 3.7vw, 70px);
}
.about-metric-copy { position: relative; z-index: 1; max-width: 70%; }
.about-metric h2 {
  margin: 0;
  font-size: clamp(22px, 1.85vw, 36px);
  font-weight: 500;
  line-height: 1.17;
}
.about-metric strong {
  display: block;
  color: #00a8f6;
  font-size: clamp(38px, 3.35vw, 64px);
  font-weight: 700;
  line-height: 1.14;
  white-space: nowrap;
}
.about-metric h2 strong {
  display: inline;
  font-size: clamp(38px, 3.25vw, 62px);
  line-height: 0;
}
.about-metric p {
  margin: 4px 0 0;
  color: #f1f1f1;
  font-size: clamp(14px, 1.1vw, 21px);
  line-height: 1.55;
  font-weight: 300;
}
.about-metric img {
  position: absolute;
  right: clamp(28px, 4.2vw, 80px);
  top: 50%;
  width: auto;
  height: auto;
  max-width: 20%;
  max-height: 55%;
  object-fit: contain;
  transform: translateY(-50%);
}

.about-why { background-image: url("../imgs/about-bg4.jpg"); color: #fff; }
.about-why-inner {
  width: min(1500px, 78.125vw);
  height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-why h2 {
  margin: 0;
  color: #00a8f6;
  font-size: clamp(32px, 2.82vw, 54px);
  font-weight: 500;
  line-height: 1.2;
}
.about-benefits {
  width: min(865px, 58%);
  display: grid;
  gap: clamp(8px, 1.66svh, 18px);
  margin: min(6.5svh, 70px) 0 0;
  padding: 0;
  list-style: none;
}
.about-benefits li {
  height: clamp(70px, 10.65svh, 115px);
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  background: #292929;
  padding: 13px 40px;
}
.about-benefit-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #00418f;
  font-size: 20px;
  font-weight: 700;
}
.about-benefits h3 {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}
.about-benefits p {
  margin: 1px 0 0;
  color: #777;
  font-size: clamp(12px, .88vw, 17px);
  line-height: 1.22;
  font-weight: 300;
}

.about-values { background-image: url("../imgs/about-bg5.jpg"); color: #ffffff; }
.about-values-copy {
  position: absolute;
  left: 10.95%;
  top: 23%;
  width: 38%;
}
.about-values h2 {
  margin: 0;
  font-size: clamp(33px, 2.62vw, 50px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .005em;
  color: #bdaa9d;
}
.about-values p {
  max-width: 680px;
  margin: 13svh 0 0;
  font-size: clamp(13px, .97vw, 18px);
  line-height: 1.9;
  font-weight: 300;
}

.about-lifestyle { background-image: url("../imgs/about-bg6.jpg"); color: #fff; }
.about-lifestyle-copy {
  position: absolute;
  left: 10.95%;
  top: 12.5%;
  width: 53%;
}
.about-lifestyle h2 {
  margin: 0;
  font-size: clamp(33px, 2.8vw, 54px);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: .01em;
}
.about-culture-list {
  display: grid;
  gap: clamp(13px, 2.6svh, 28px);
  margin: 10svh 0 0;
  padding: 0;
  list-style: none;
}
.about-culture-list li {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  align-items: start;
  font-size: clamp(15px, 1.05vw, 20px);
  line-height: 1.48;
  font-weight: 300;
}
.about-culture-list li > span { font-size: 24px; font-weight: 700; line-height: 1.2; }
.about-culture-list h3 { margin: 0; font-size: inherit; font-weight: 500; }
.about-culture-list p { margin: 5px 0 0; line-height: 1.65; }

@media (min-width: 1001px) and (max-height: 820px) {
  .about-team-content { top: 23%; }
  .about-team-content p { line-height: 1.82; }
  .about-outline-button { margin-top: 3svh; height: 45px; font-size: 22px; }
  .about-metrics { padding-block: 13svh; row-gap: 6svh; }
  .about-metric { padding-block: 18px; }
  .about-benefits { margin-top: 5svh; }
  .about-benefits li { padding-block: 6px; }
  .about-values-copy { top: 17%; }
  .about-values p { margin-top: 7svh; line-height: 1.55; }
  .about-lifestyle-copy { top: 8%; }
  .about-culture-list { margin-top: 6svh; gap: 2.5svh; }
}

@media (max-width: 1000px) {
  .about-intro { background-position: 43% center; }
  .about-intro-copy {
    left: auto;
    right: 5%;
    top: 9%;
    width: min(48%, 430px);
    font-size: clamp(13px, 1.7vw, 17px);
    line-height: 1.6;
  }
  .about-team { background-position: 55% center; }
  .about-team-content { left: 5%; top: 15%; width: 43%; }
  .about-team-content p { font-size: clamp(13px, 1.7vw, 17px); line-height: 1.6; }
  .about-outline-button { width: 175px; height: 45px; margin-top: 30px; font-size: 19px; }
  .about-metrics { width: calc(100% - 48px); padding-block: 14svh; gap: 4svh 24px; }
  .about-metric { padding: 20px; }
  .about-metric-copy { max-width: 75%; }
  .about-metric h2 { font-size: clamp(16px, 2.5vw, 24px); }
  .about-metric strong, .about-metric h2 strong { font-size: clamp(30px, 4vw, 45px); }
  .about-metric p { font-size: clamp(11px, 1.6vw, 16px); }
  .about-metric img { right: 17px; max-width: 25%; }
  .about-why-inner { width: calc(100% - 48px); }
  .about-benefits { width: 64%; margin-top: 5svh; }
  .about-benefits li { grid-template-columns: 55px minmax(0, 1fr); padding-inline: 18px; }
  .about-benefits h3 { font-size: clamp(14px, 2vw, 20px); }
  .about-benefits p { font-size: clamp(11px, 1.5vw, 15px); }
  .about-values-copy { left: 5%; width: 48%; }
  .about-values p { margin-top: 8svh; line-height: 1.65; }
  .about-lifestyle-copy { left: 5%; width: 60%; }
  .about-culture-list { margin-top: 7svh; gap: 2svh; }
}

@media (max-width: 650px) {
  .about-intro { background-position: 32% center; }
  .about-intro-copy {
    top: 5%;
    right: 5%;
    width: 90%;
    padding: 12px 14px;
    background: #ffffffb8;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.48;
  }
  .about-team { background-position: 59% center; }
  .about-team-content { left: 5%; top: 6%; width: 88%; }
  .about-team-content p {
    max-width: 360px;
    padding: 12px;
    background: #32323291;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.5;
  }
  .about-outline-button { width: 145px; height: 38px; margin-top: 16px; font-size: 16px; }
  .about-metrics {
    width: calc(100% - 32px);
    padding-block: 8svh;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(7px, 1.5svh, 12px);
  }
  .about-metric { padding: 10px 18px; }
  .about-metric-copy { max-width: 74%; }
  .about-metric h2 { font-size: clamp(15px, 4vw, 18px); }
  .about-metric strong, .about-metric h2 strong { font-size: clamp(28px, 7.2vw, 36px); }
  .about-metric p { font-size: clamp(10px, 2.7vw, 12px); line-height: 1.22; }
  .about-metric img { max-width: 23%; max-height: 65%; right: 20px; }
  .about-why { background-position: 67% center; }
  .about-why-inner { width: calc(100% - 32px); }
  .about-why h2 { font-size: clamp(26px, 7vw, 32px); }
  .about-benefits { width: 100%; margin-top: 5svh; gap: clamp(6px, 1.2svh, 10px); }
  .about-benefits li {
    height: clamp(68px, 11svh, 82px);
    grid-template-columns: 43px minmax(0, 1fr);
    padding: 6px 12px;
    background: #252525df;
  }
  .about-benefit-number { width: 27px; height: 27px; font-size: 17px; }
  .about-benefits h3 { font-size: clamp(13px, 3.5vw, 16px); }
  .about-benefits p { font-size: clamp(10px, 2.7vw, 12px); line-height: 1.13; }
  .about-values { background-position: 57% center; }
  .about-values-copy { left: 5%; top: 12%; width: 90%; }
  .about-values h2 { font-size: clamp(28px, 7.8vw, 36px); }
  .about-values p {
    width: min(100%, 450px);
    margin-top: 6svh;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.5;
  }
  .about-lifestyle { background-position: 67% center; }
  .about-lifestyle-copy { left: 5%; top: 6%; width: 90%; }
  .about-lifestyle h2 { font-size: clamp(26px, 7vw, 33px); }
  .about-culture-list { gap: clamp(7px, 1.4svh, 11px); margin-top: 5svh; }
  .about-culture-list li { grid-template-columns: 42px minmax(0, 1fr); font-size: clamp(11px, 3vw, 13px); line-height: 1.3; }
  .about-culture-list li > span { font-size: 16px; }
  .about-culture-list p { margin-top: 2px; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .about-outline-button { transition: none; }
}