/* ============================================================
   Penta Tech — about.css  (Figma frame 1:766 ABOUTnew, 1920px)
   ============================================================ */

/* ============================================================
   ABOUT  (1:853) — page y 715..1731
   ============================================================ */
.ab-about {
  position: relative;
  height: 63.5327rem;            /* 1016.5 */
  margin-top: 5.0625rem;         /* 715-634 = 81 */
}
.ab-about__visual {
  position: absolute;
  left: 0;
  top: 0;
  width: 61.78125rem;            /* 988.5 */
  height: 63.5327rem;            /* 1016.5 */
}
/* ---- Figma has three layers: deco shape + main photo + small tinted thumb ---- */
.ab-about__deco {
  /* Figma "Vector 5" (viewBox 1023.13×832.58) rotated 11.27°. Its rotated
     bounding box is 1166×1016 and sits at page x=-178, section-top y=0.
     Centering the natural-size element and rotating lands the AABB there. */
  position: absolute;
  left: -6.65625rem;             /* element top-left so the rotated AABB = (-178, 0) */
  top: 5.75rem;
  width: 63.9375rem;             /* 1023.13 native width */
  height: 52rem;                 /* 832.58 — explicit (SVG is width/height:100%) */
  max-width: none;               /* opt out of the global img max-width:100% */
  transform: rotate(11.27deg);
  transform-origin: center;
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}
.ab-about__photo {
  position: absolute;
  left: 6.78%;                   /* 67 / 988.5 */
  top: 6.79%;                    /* 69 / 1016.5 */
  width: 67.68%;                 /* 669 / 988.5 */
  height: 65.52%;                /* 666 / 1016.5 */
  border-radius: 1.875rem;       /* 30 */
  object-fit: cover;
  z-index: 1;
}
.ab-about__thumb {
  position: absolute;
  left: 38.54%;                  /* 381 / 988.5 */
  top: 43.29%;                   /* 440 / 1016.5 */
  width: 40.46%;                 /* 400 / 988.5 */
  height: 39.35%;                /* 400 / 1016.5 */
  border-radius: 1.875rem;       /* 30 */
  overflow: hidden;
  z-index: 2;
}
.ab-about__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-about__thumb-tint {
  position: absolute;
  inset: 0;
  background: rgba(7, 114, 91, 0.5);
  mix-blend-mode: multiply;
}
/* the mark + wordmark share one 295x341 viewBox, so overlaying both at the same
   box reconstructs the full logo — but only the mark blends (soft-light) into the
   photo as a faint watermark, matching Figma; the wordmark stays crisp white */
.ab-about__thumb-mark,
.ab-about__thumb-wordmark {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 74%;                    /* 295 / 400 */
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
.ab-about__thumb-mark { mix-blend-mode: soft-light; }
.ab-about__content {
  position: absolute;
  left: 62.5rem;                 /* 1000 */
  top: 4.3125rem;                /* 69 */
  width: 48.75rem;               /* 780 */
}
.ab-about__title { line-height: 3.125rem; }   /* 50 */
.ab-about__intro {
  margin-top: 1.25rem;           /* y944 */
  font-size: 1.5rem;             /* 24 */
  line-height: 2.5rem;           /* 40 */
  font-weight: 500;
  color: var(--green-panel);
}
.ab-about__body {
  margin-top: 1.25rem;           /* y1084 */
  width: 48.6875rem;             /* 779 */
  font-size: 1.25rem;            /* 20 */
  line-height: 2.5rem;           /* 40 */
  font-weight: 500;
  color: #999;
}
/* Extra paragraph: hidden until "Read More" expands it inline (pushes the
   sections below down). overflow:hidden contains the child margin so the
   collapsed state is truly 0-height. */
.ab-about__extra {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.ab-about__extra.is-open { max-height: 62.5rem; }   /* 1000 — larger than any realistic paragraph */
.ab-about__body--extra { margin-top: 1.25rem; }      /* matches spacing between paragraphs */
.ab-about__more {
  display: inline-block;
  margin-top: 2.5rem;            /* y1600 */
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  font-size: 1.25rem;            /* 20 */
  line-height: 2.5rem;
  font-weight: 500;
  color: var(--green);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
.ab-about__more:hover { color: var(--green-mid); transform: translateX(0.3125rem); }

/* ============================================================
   MISSION & VISION  (1:904) — page y 1811..2650
   ============================================================ */
.ab-mission {
  position: relative;
  height: 52.4506rem;            /* 839.21 */
  margin-top: 5rem;              /* 1811-1731 = 80 */
  background: #0a1821;
  overflow: hidden;
}
.ab-mission::before {
  content: "";
  position: absolute;
  left: -7.3125rem;              /* -117 */
  top: 1.25rem;                  /* 1831-1811 */
  width: 120rem;                 /* 1920 */
  height: 83.75rem;              /* 1340 */
  background: url("../assets/images/banner-texture.png") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.6;
  pointer-events: none;
}
.ab-mission__panel {
  position: absolute;
  left: 63.75rem;                /* 1020 */
  top: 0;
  width: 56.25rem;               /* 900 */
  height: 100%;
  background: #0f212d;
}
.ab-mission__col {
  position: absolute;
  top: 9.375rem;                 /* 1961-1811 = 150 */
  z-index: 2;
}
.ab-mission__col--left { left: 8.8125rem; width: 43.8912rem; }   /* 141, 702.26 */
.ab-mission__col--right { left: 68.2188rem; width: 43.0313rem; } /* 1091.5, 688.5 */
.ab-mission__icon {
  position: absolute;
  left: 0; top: 0;
  width: 8.125rem; height: 8.125rem;   /* 130 */
  background: rgba(7, 114, 91, 0.4);
  border-radius: 1.875rem;             /* 30 */
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.ab-mission__icon:hover {
  background: rgba(7, 114, 91, 0.7);
  transform: scale(1.05);
}
.ab-mission__icon img {
  position: absolute;
  left: 0.9375rem; top: 0.9375rem;     /* 15 */
  width: 6.25rem; height: 6.25rem;     /* 100 */
}
.ab-mission__head {
  position: absolute;
  left: 10.625rem;               /* 311-141 = 170 */
  top: 1.9375rem;                /* 1992-1961 = 31 */
}
.ab-mission__col--right .ab-mission__head {
  left: 10.0625rem;              /* 1252.5-1091.5 = 161 */
  top: 1.25rem;                  /* 1981-1961 = 20 */
}
.ab-mission__kicker {
  font-size: 1.25rem;            /* 20 */
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--green-light);
}
.ab-mission__title {
  font-size: 2.125rem;           /* 34 */
  line-height: 3.125rem;         /* 50 */
  font-weight: 500;
  color: #fff;
  margin-top: 1.25rem;           /* 20 */
}
.ab-mission__tagline {
  margin-top: 10rem;             /* 2121-1961 = 160 */
  font-size: 1.5rem;             /* 24 */
  line-height: 2.5rem;           /* 40 */
  font-weight: 500;
  color: var(--green-light);
}
.ab-mission__body {
  margin-top: 1.25rem;           /* 2181: tagline ends 2161 → +20 */
  font-size: 1.25rem;            /* 20 */
  line-height: 2.5rem;           /* 40 */
  font-weight: 400;
  color: #fff;
}

/* ============================================================
   COMPANY STATS  (1:1097) — page y 2650..3150 (+cards to 3250)
   ============================================================ */
.ab-company {
  position: relative;
  height: 31.25rem;              /* 500 */
  background: url("../assets/images/company-bg.png?v=2") center / cover no-repeat;
}

/* ============================================================
   TEXTURE STRIP + FOOTER — strip y 3150..4027, footer y 3400
   ============================================================ */
.ab-strip { height: 54.8125rem; }     /* 877 */
.ab-footer { margin-top: -39.1875rem; } /* footer cta at strip+250 (4027-3400=627) */

/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */
@media (max-width: 1024px) {
  .ab-about { height: auto; margin-top: 48px; padding: 0 24px; }
  .ab-about__visual {
    position: relative;
    width: min(78vw, 480px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.02;      /* photo top-left + thumb overlapping bottom-right */
    margin: 0 auto;
  }
  .ab-about__deco { display: none; }
  .ab-about__photo { left: 0; top: 0; width: 84%; height: 74%; }
  .ab-about__thumb { left: auto; right: 0; top: auto; bottom: 0; width: 55%; height: 55%; }
  .ab-about__content { position: static; width: 100%; margin-top: 32px; }
  .ab-about__intro { font-size: 20px; line-height: 32px; }
  .ab-about__body { width: 100%; font-size: 16px; line-height: 30px; }

  .ab-mission { height: auto; margin-top: 48px; padding: 48px 24px; }
  .ab-mission__panel { display: none; }
  .ab-mission__kicker { line-height: 24px; }
  .ab-mission__col { position: static; width: 100% !important; padding-left: 0; }
  .ab-mission__col--right { margin-top: 48px; }
  .ab-mission__icon { position: relative; width: 96px; height: 96px; border-radius: 20px; }
  .ab-mission__icon img { width: 72px; height: 72px; left: 12px; top: 12px; }
  .ab-mission__head { position: static; margin-top: 18px; }
  .ab-mission__col--right .ab-mission__head { margin-top: 18px; }
  .ab-mission__title { margin-top: 12px; }
  .ab-mission__tagline { margin-top: 18px; font-size: 20px; line-height: 30px; }
  .ab-mission__body { font-size: 16px; line-height: 30px; }

  .ab-company {
    height: auto;
    padding: 40px 0;
    margin-bottom: 60px;
    overflow: hidden;
    background-position: 38% center;
  }
  /* full-bleed slider (same as the home company strip): no side padding, so the
     cards run to the screen edges instead of sitting inside 24px gaps */
  .ab-company .hc-cards {
    padding-left: 0;
    padding-right: 0;
    transform: none;
  }
  .ab-strip { height: auto; padding-bottom: 0; }
  /* drop the faint diagonal texture band on mobile — it just reads as noise */
  .ab-strip::after { display: none; }
  .ab-footer { margin-top: 16px; }
}

@media (max-width: 767px) {
  .ab-about { padding: 0 16px; margin-top: 32px; }
  .ab-about__visual {
    width: min(88vw, 360px);
    max-width: 100%;
  }
  .ab-about__deco { display: none; }
  .ab-about__intro { font-size: 14px; line-height: 22px; font-weight: 400; }
  .ab-about__body { font-size: 12px; line-height: 20px; font-weight: 400; }
  .ab-about__more { font-size: 12px; line-height: 18px; margin-top: 20px; }
  .ab-mission { padding: 34px 16px; }
  .ab-mission__icon { width: 64px; height: 64px; border-radius: 14px; }
  .ab-mission__icon img { width: 44px; height: 44px; left: 10px; top: 10px; }
  .ab-mission__kicker { font-size: 13px; line-height: 17px; }
  .ab-mission__title { font-size: 22px; line-height: 28px; }
  .ab-mission__tagline { font-size: 14px; line-height: 22px; font-weight: 400; }
  .ab-mission__body { font-size: 12px; line-height: 20px; }
  /* stat-card strip — same setup as the homepage: the photo is a top band and the
     cards straddle its bottom edge (top half over the photo, bottom half below). */
  .ab-company {
    height: 300px;
    margin: 0 0 120px;
    padding: 0;
    overflow: visible;
    background-position: 38% center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .ab-company .hc-cards {
    padding-left: 0;
    padding-right: 0;
    transform: translateY(62%);
  }
  .ab-company .hc-card { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
}

/* Responsive type and spacing polish */
@media (max-width: 1024px) {
  .ab-about__intro,
  .ab-mission__tagline {
    font-size: 16px;
    line-height: 25px;
    font-weight: 500;
  }
  .ab-about__title {
    line-height: 34px;
  }
  .ab-about__body,
  .ab-mission__body {
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
  }
  .ab-mission__title {
    font-size: 26px;
    line-height: 34px;
    font-weight: 500;
  }
}

@media (max-width: 767px) {
  .ab-about__intro,
  .ab-mission__tagline {
    font-size: 13px;
    line-height: 20px;
  }
  .ab-about__title {
    line-height: 27px;
  }
  .ab-about__body,
  .ab-mission__body,
  .ab-about__more {
    font-size: 12px;
    line-height: 19px;
  }
  .ab-mission__title {
    font-size: 21px;
    line-height: 27px;
  }
}