/* ==========================================================================
   Etmanskie Contracting — about.css
   Page-specific styles for about.php only. Loaded alongside pages.css via
   $page_css_extra, set in about.php before including header.php. Reuses
   the same tokens and component patterns as the service pages' own CSS
   files (no new colors introduced, every token is the site's own from
   global.css :root).
   ========================================================================== */

/* --- Intro (photo + text, two columns on desktop) --------------------------- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 72px;
  align-items: center;
}

.about-intro__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: rgba(38, 34, 35, 0.06);
}

.about-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-intro__body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  opacity: 0.75;
  margin-bottom: 18px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(38, 34, 35, 0.12);
}

.about-stat__num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 8px;
}

.about-stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}

@media (max-width: 800px) {
  .about-intro {
    grid-template-columns: 1fr;
  }
  .about-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .about-stats {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .about-intro__body p {
    text-align: center;
  }
}

/* --- What we do (same card pattern as the service pages' related-grid) ----- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
  margin-top: 40px;
}

.related-card {
  display: block;
  text-decoration: none;
  background-color: var(--paper);
  transition: background-color var(--ease);
}

.related-card:hover {
  background-color: var(--red);
}

.related-card:hover h3,
.related-card:hover p {
  color: var(--paper);
}

.related-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.related-card__body {
  padding: 22px 24px 26px;
}

.related-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 8px;
  transition: color var(--ease);
}

.related-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.7;
  transition: color var(--ease);
}

/* --- Closing CTA band -------------------------------------------------------- */
.cta-band {
  background-color: var(--red-dark);
  padding-block: 64px;
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

@media (max-width: 480px) {
  .cta-band__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--paper);
  max-width: 22ch;
}

.cta-band p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.85;
  margin-top: 12px;
  max-width: 40ch;
}

.cta-band .btn--solid {
  background-color: var(--ink);
}

.cta-band .btn--solid:hover {
  background-color: var(--paper);
  color: var(--ink);
}