/* ============================================================
   about.css - page styles for /about/ (Figma frame "SPP - Who we are").
   Loads after tokens.css, base.css and components.css: the header,
   footer, .container, .section, .section-head, .eyebrow, .h2, .btn
   and the .img-placeholder slot all come from those shared files.
   Only styles not covered by shared classes live here. All classes
   prefixed with `about-` to avoid collisions.
   Page map: hero (photo background) > story (text + image slot) >
   values (3 cards on grey) > CTA band. Copy lives in about/index.html.
   ============================================================ */

/* ============================================================
   Hero - background photo with a dark overlay + white text
   ============================================================ */
.about-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma: pt 150px (clears the 103px sticky header), pb 120px. */
  padding-top: 150px;
  padding-bottom: var(--space-28); /* 120px */
  /* Hero photo is a CSS background, not an <img>, so it has no
     IMG/... (replace) label in the HTML; this url() IS the swap point.
     The dark overlay (Figma rgba(16,21,26,0.52)) is baked into the
     stack as a flat gradient layer so the white text stays readable,
     keep it in front of whatever photo goes in.
     How to edit: when the real photo arrives, convert it with
     scripts/convert-images.sh (photos are WebP q82) and overwrite
     assets/img/about-hero.webp, or point the url() at the new file. */
  background-image:
    linear-gradient(rgba(16, 21, 26, 0.52), rgba(16, 21, 26, 0.52)),
    url("../../img/about-hero.webp");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.about-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 20px */
  max-width: 964px;
  text-align: center;
}
.about-hero__eyebrow {
  /* Figma 496:17: Inter Medium 12, tracking 1.44, light steel-blue. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.44px;
  color: #b9cedc;
}
.about-hero__title {
  color: #fff;
  font-size: 52px; /* Figma 496:18 */
  letter-spacing: -1px;
  line-height: normal;
  max-width: 590px;
}
.about-hero__subhead {
  color: #dce6ee;
  font-size: 17px;
  line-height: 1.55;
  max-width: 486px; /* Figma 496:19 */
}

@media (max-width: 768px) {
  .about-hero {
    padding-top: var(--space-24); /* 104px */
    padding-bottom: var(--space-16); /* 80px */
  }
}

/* ============================================================
   Story - text left, image placeholder right
   ============================================================ */
.about-story {
  background: var(--bg-page);
}
.about-story__row {
  display: flex;
  align-items: center;
  gap: var(--space-16); /* 72px (Figma 496:20) */
}
/* Figma 496:22/23: eyebrow tracking 1.44; title 34px, tracking -0.5. */
.about-story__col .eyebrow {
  letter-spacing: 1.44px;
}
.about-story__col .h2 {
  font-size: 34px;
  letter-spacing: -0.5px;
}
.about-story__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.about-story__body {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}
.about-story__media {
  flex-shrink: 0;
  width: 520px;
  height: 420px;
  border-radius: var(--radius-2xl); /* 12px */
  /* Figma 496:25: flat light-blue slot, no border, plain label.
     Deliberately overrides the shared .img-placeholder look from
     base.css (striped background + hairline border): this page uses a
     flat --bg-surface fill to mirror Figma, so do not "restore" the
     border. How to edit: when the client photo arrives, replace the
     .img-placeholder div in about/index.html with an <img> and keep
     this width/height/radius. */
  background: var(--bg-surface);
  border: none;
}
.about-story__media .img-placeholder__label {
  background: none;
  padding: 0;
  color: var(--text-secondary);
  letter-spacing: 1.2px;
}

@media (max-width: 1024px) {
  .about-story__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
  }
  .about-story__media {
    width: 100%;
    height: 340px;
  }
}

/* ============================================================
   Values - "Why customers choose us" (3 cards)
   ============================================================ */
.about-values {
  /* Raw #f9f9f9 on purpose (Figma 496:27): a neutral grey band, NOT
     the light-blue --bg-surface token. Do not "fix" it to a token. */
  background: #f9f9f9; /* Figma 496:27 */
}
/* Figma 496:31/32: title 40px tracking -1; intro 17px/1.55. */
.about-values .section-head .h2 {
  font-size: 40px;
  letter-spacing: -1px;
}
.about-values .section-head .intro {
  font-size: 17px;
  line-height: 1.55;
}
.about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6); /* 24px */
  margin-top: 44px; /* Figma heading-to-grid gap; raw value on purpose, no 44px spacing token exists */
}
/* Card: reuses the .app-cell look. Icon tile holds a line icon in accent. */
.about-card {
  gap: var(--space-4); /* 16px */
}
.about-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bg-surface);
  color: var(--accent);
  flex-shrink: 0;
}
.about-card__title {
  font-family: var(--font-display);
  font-weight: 600; /* Figma 496:40: Switzer Semibold */
  font-size: 20px;
  line-height: normal;
  color: var(--text-primary);
}
.about-card__body {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .about-values__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CTA band - centered heading, intro, one primary button
   ============================================================ */
.about-cta {
  background: var(--bg-page);
  text-align: center;
}
.about-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7); /* 28px */
}
.about-cta__title {
  max-width: 820px;
  font-size: 40px; /* Figma 496:57 */
  letter-spacing: -0.8px;
}
.about-cta__intro {
  max-width: 724px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
}