/* Phase 2 — About page
   Scoped to .about-page so the existing homepage styling remains untouched. */

.about-page .site-header {
  background: rgba(14,17,17,.96);
}

.about-hero {
  padding: calc(var(--header-height) + clamp(4rem, 8vw, 7rem)) 0 clamp(4rem, 7vw, 6rem);
  background:
    linear-gradient(115deg, rgba(17,74,79,.96), rgba(14,17,17,.98));
  color: var(--white);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

.about-hero h1 {
  max-width: 860px;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
}

.about-hero-copy > p:last-child {
  max-width: 700px;
  margin-bottom: 0;
  color: #d5dddd;
  font-size: 1.08rem;
}

.about-hero-badge {
  max-width: 360px;
  justify-self: end;
  padding: 1.8rem 1.8rem 1.6rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.about-hero-badge span {
  display: block;
  margin-bottom: .5rem;
  color: var(--orange);
  font: 700 clamp(1.9rem, 4vw, 2.8rem)/1 "Poppins", sans-serif;
}

.about-hero-badge p {
  margin: 0;
  color: #d6dddd;
}

.about-story-heading {
  max-width: 860px;
  margin-bottom: 2.2rem;
}

.about-story-media {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.about-story-media img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(14,17,17,.10);
}

.about-story-copy {
  max-width: none;
}

.about-story-copy p {
  color: #4f5757;
}

.section-heading {
  max-width: 820px;
  margin-bottom: 2rem;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.value-card {
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 32px rgba(14,17,17,.04);
}

.value-card h3 {
  margin-bottom: .65rem;
  font-size: 1.22rem;
}

.value-card p {
  margin-bottom: 0;
  color: #596161;
}

.about-cta {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--ink);
  color: var(--white);
}

.about-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.about-cta-inner h2 {
  margin-bottom: .9rem;
}

.about-cta-inner p:last-child {
  max-width: 680px;
  margin-bottom: 0;
  color: #c8d2d2;
}

@media (max-width: 980px) {
  .about-hero-grid,
  .about-cta-inner {
    grid-template-columns: 1fr;
  }

  .about-hero-badge {
    justify-self: start;
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .about-story-media img {
    aspect-ratio: 16 / 8;
  }
}

@media (max-width: 640px) {
  .about-hero-badge {
    max-width: none;
    width: 100%;
  }

  .about-story-media img {
    aspect-ratio: auto;
  }

  .about-cta-inner .button {
    width: 100%;
  }
}