/* ==========================================================================
   About Us page  —  based on "STURBOO About Us Page" design
   Tokens: red #f9341b · ink #202020 · section #f6f7fa · line #e3e6e4
   ========================================================================== */

:root {
  --ab-red: #f9341b;
  --ab-ink: #202020;
  --ab-body: #5b6068;
  --ab-gray: #f6f7fa;
  --ab-line: #e3e6e4;
  --ab-pad: 60px;
}
.textCenter {
  text-align: center;
}
.ab-container {
  width: 100%;
  /* max-width: 1920px; */
  padding: 0 var(--ab-pad);
  margin: 0 auto;
  box-sizing: border-box;
}

.ab-section {
  padding: 30px 0;
  overflow: hidden;
}

.ab-section--gray {
  background: var(--ab-gray);
}

/* shared type ------------------------------------------------------------ */
.ab-eyebrow {
  display: inline-block;
  color: var(--ab-red);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 22px;
}

.ab-h2 {
  color: var(--ab-ink);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.ab-p {
  color: var(--ab-body);
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
}

/* ============================== hero ==================================== */
.ab-hero {
  position: relative;
  height: 420px;
  margin-top: 80px;
  background: url("../images/about-hero.png") center center / cover no-repeat;
  display: flex;
  align-items: center;
}

.ab-hero-content {
  width: 100%;
}

.ab-hero-title {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 40px;
}

.ab-hero-crumbs {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ab-hero-crumbs a {
  color: inherit;
  text-decoration: none;
}

.ab-hero-crumbs a:hover {
  color: #fff;
}

.ab-hero-crumbs span.ab-sep {
  color: var(--ab-red);
  font-weight: 700;
}

/* =========================== intro (who we are) ========================= */
.ab-intro {
  padding: 50px 0 110px;
}

.ab-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.ab-intro-title {
  margin-bottom: 28px;
}

.ab-intro-text .ab-p {
  max-width: 840px;
}

.ab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 44px;
}

.ab-tag {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff5f3;
  border: 1px solid #ffdad3;
  color: var(--ab-red);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ab-intro-photo {
  /* margin-right: calc(-1 * var(--ab-pad)); */
}

.ab-intro-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  max-height: 540px;
  object-fit: cover;
}

/* ========================= two core business lines ====================== */
.ab-cards-head {
  text-align: center;
  margin-bottom: 46px;
}

.ab-two-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.ab-card {
  background: #fff;
  border: 1px solid #e4e6ea;
  border-radius: 16px;
  padding: 44px 46px 48px;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.ab-card:hover {
  box-shadow: 0 18px 40px rgba(23, 26, 33, 0.08);
  transform: translateY(-3px);
}

.ab-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: #fff0ed;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.ab-card-icon img {
  width: 30px;
  height: auto;
  display: block;
}

.ab-card h3 {
  color: var(--ab-ink);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 18px;
}

.ab-card p {
  color: var(--ab-body);
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
}

/* ============================ how we serve ============================== */
.ab-serve-head {
  /* max-width: 1180px; */
  margin-bottom: 46px;
}

.ab-serve-head .ab-h2 {
  margin-bottom: 22px;
}

.ab-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.ab-step {
  display: flex;
  align-items: baseline;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 12px;
  padding: 22px 26px;
  min-height: 68px;
  box-sizing: border-box;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ab-step:hover {
  border-color: #f9b6ab;
  box-shadow: 0 10px 26px rgba(23, 26, 33, 0.07);
}

.ab-step-num {
  color: var(--ab-red);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  flex-shrink: 0;
}

.ab-step-title {
  color: var(--ab-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

/* ============================ by the numbers ============================ */
.ab-numbers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.ab-numbers-head {
  margin-bottom: 44px;
}

.ab-numbers-head .ab-h2 {
  margin-bottom: 24px;
}

.ab-numbers-head .ab-p {
  /* max-width: 860px; */
}

.ab-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.ab-stat {
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 14px;
  padding: 28px 26px 26px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ab-stat:hover {
  border-color: #f9b6ab;
  box-shadow: 0 10px 26px rgba(23, 26, 33, 0.06);
}

.ab-stat-num {
  color: var(--ab-red);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 12px;
}

.ab-stat-title {
  color: var(--ab-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.ab-stat-desc {
  color: var(--ab-body);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.ab-numbers-photos {
  display: grid;
  gap: 24px;
}

.ab-numbers-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 880 / 380;
  object-fit: cover;
  border-radius: 6px;
}

/* =============================== mission ================================ */
.ab-mission {
  background: var(--ab-red);
  padding: 100px 0;
  text-align: center;
}

.ab-mission-label {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.ab-mission-quote {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  /* max-width: 1320px; */
  margin: 0 auto;
}

/* ============================== responsive ============================== */
@media (max-width: 1439px) {
  :root {
    --ab-pad: 40px;
  }

  .ab-section {
    padding: 88px 0;
  }

  .ab-intro {
    padding: 120px 0 88px;
  }

  .ab-hero-title {
    font-size: 54px;
  }

  .ab-h2 {
    font-size: 40px;
  }

  .ab-card {
    padding: 38px 34px 40px;
  }

  .ab-mission-quote {
    font-size: 28px;
  }
}

@media (max-width: 1199px) {
  .ab-intro-grid,
  .ab-numbers-grid,
  .ab-two-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .ab-intro-photo {
    margin-right: 0;
  }

  .ab-intro-photo img {
    max-height: 420px;
  }

  .ab-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-numbers-photos img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 991px) {
  .ab-hero {
    height: 320px;
  }

  .ab-hero-title {
    font-size: 44px;
    margin-bottom: 28px;
  }
}

@media (max-width: 767px) {
  :root {
    --ab-pad: 20px;
  }

  .ab-section {
    padding: 64px 0;
  }

  .ab-intro {
    padding: 88px 0 64px;
  }

  .ab-h2 {
    font-size: 32px;
  }

  .ab-p,
  .ab-card p {
    font-size: 16px;
  }

  .ab-card {
    padding: 30px 24px 32px;
  }

  .ab-card h3 {
    font-size: 23px;
  }

  .ab-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ab-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ab-stat-num {
    font-size: 36px;
  }

  .ab-tag {
    height: 42px;
    padding: 0 18px;
    font-size: 15px;
  }

  .ab-hero {
    height: 260px;
  }

  .ab-hero-title {
    font-size: 36px;
  }

  .ab-mission {
    padding: 72px 0;
  }

  .ab-mission-quote {
    font-size: 22px;
  }
}