/* ===== About page layer (works with your existing styles.css) ===== */

/* Variable Satoshi */
@font-face{
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2?v=3") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------- HERO ---------------- */
/* Support both patterns: (hero-title/hero-copy) and (h1/.lead) */
.about-hero .hero-title,
.about-hero h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  font-weight:var(--w-hero);
  margin:0;
}
.about-hero .hero-copy,
.about-hero .lead{
  font-size:var(--fs-lead);
  color:#444;
  max-width:760px;
  margin:40px 0 0;
}

/* Frame controls the ratio; image covers without stretching */
.about-hero .hero-media{
  margin-top:clamp(40px, 8vh, 120px);
  width:min(1180px, 100%);
  aspect-ratio:1180/600;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  overflow:hidden;
}
.about-hero .hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-hero .kicker{ margin:0 0 14px; opacity:.75; }

/* ---------------- BLACK BAND (1020 high) ---------------- */
.about-band{
  background:#0b0b0c;
  color:#f5f5f5;
  min-height:1020px;
  margin-top:0;
}
.about-band .container{
  padding-top:130px;
  padding-bottom:100px;
}
.ab-title{
  margin:0 0 10px;
  font-size:30px;
  font-weight:500;
}
.ab-deck{
  margin:0;
  color:#cfcfcf;
  font-size:15px;
  font-weight:500;
}

/* ---- three framed photos: 235×295 aligned to hero width ---- */
.about-faces{
  margin-top:90px;
  width:min(1180px, 100%);
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.about-faces .face{
  width:235px;
  height:295px;
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:#111;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.about-faces .face img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* captions under faces — aligned left under each corresponding photo */
.about-faces-meta{
  margin-top:22px;
  width:min(1180px, 100%);
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0;
}
.about-faces-meta .meta{
  width:235px;
  text-align:left;
  margin:0;
}
.about-faces-meta h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:600;
}
.about-faces-meta p{
  margin:0;
  color:#bfbfbf;
  font-size:16px;
  font-weight:400;
}

/* ---------------- MOBILE: team cards (Insights-style) ---------------- */
.about-team-cards{ display:none; }

@media (max-width:720px){
  /* Center the hero image frame on phones */
  .about-hero .hero-media{ margin-inline:auto; width:100%; }

  /* Hide desktop rows; show cards */
  .about-faces, .about-faces-meta{ display:none; }
  .about-team-cards{
    display:grid;
    gap:22px;
    width:100%;
    margin-top:28px;
  }
  .team-card{
    width:min(360px, 92vw);
    margin-inline:auto;
  }
  .team-media{
    margin:0;
    width:100%;
    aspect-ratio:3/4;
    border-radius:14px;
    overflow:hidden;
    background:#111;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
  }
  .team-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .team-meta{ text-align:center; margin-top:12px; }
  .team-meta h4{ margin:0 0 6px; font-size:18px; font-weight:600; }
  .team-meta p{ margin:0; color:#bfbfbf; font-size:14px; font-weight:400; }

  /* Center the split block on phones */
  .split-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:28px; }
  .split-media{ margin-inline:auto; }
  .split-copy{ text-align:center; }
  .split-copy .btn-oval{ margin-inline:auto; }
}

/* ---------------- SPLIT (mockup + copy) ---------------- */
.about-split{ margin-top:100px; }
.split-inner{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:100px;
}

/* Fixed portrait frame 325×440; cover, no stretch */
.split-media{
  width:325px;
  height:440px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.split-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Right-side copy */
.split-copy h3{
  font-size:25px;
  line-height:1.35;
  margin:0 0 12px;
  font-weight:400;
}
.split-copy p{
  font-size:15px;
  line-height:1.35;
  margin:0 0 10px;
  font-weight:500;
}
.split-copy .btn-oval{ margin-top:14px; }

/* ---------------- SPA (full-screen slides) ---------------- */
.about-spa{ margin-top:105px; }
.about-spa .spa-cta__stage{ text-align:left; }

.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px;
  align-items:center;
}
.step .num{
  font-size:450px;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.28);
          text-stroke:1px rgba(255,255,255,.28);
  letter-spacing:2px;
  user-select:none;
}
.step .copy h3{
  margin:0 0 10px;
  font-size:30px;
  font-weight:700;
}
.step .copy p{
  margin:0;
  font-size:20px;
  font-weight:500;
  color:#e8e8e8;
  max-width:800px;
}

/* ---------------- Final black CTA band ---------------- */
.about-cta-black{
  background:#0b0b0c;
  color:#f5f5f5;
  min-height:400px;
  display:grid;
  place-items:center;
  margin-top:80px;
}
.about-cta-black p{
  margin:0;
  font-size:25px;
  font-weight:500;
  text-align:center;
  padding:0 16px;
}

/* ---------------- Responsiveness ---------------- */
@media (max-width:1200px){
  .step .num{ font-size:360px; }
}
@media (max-width:980px){
  .split-inner{
    grid-template-columns:1fr;
    gap:40px;
  }
  .step{
    grid-template-columns:1fr;
    gap:18px;
    text-align:center;
  }
  .step .num{
    font-size:300px;
    margin-inline:auto;
  }
}

/* ===== About SPA — vertical center only (keep text left) ===== */
.about-spa .spa-cta__stage{
  height:100%;
  margin-inline:auto;
}
.about-spa .spa-cta__slide{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-spa .step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px;
  align-items:center;
}
.about-spa .step .copy{ text-align:left; }
/* About SPA numbers + layout on phones */
@media (max-width:760px){
  .about-spa .step{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .about-spa .step .num{
    /* Big but contained */
    font-size: min(28vw, 140px);
    -webkit-text-stroke-width: .5px;
            text-stroke-width: .5px;
    margin: 0 auto 6px;
    line-height: .85;
  }
  .about-spa .step .copy{
    text-align: left;
    padding: 0 16px;
  }
}
/* About — team faces: rock-solid centering on mobile */
@media (max-width:760px){
  /* Replace grid with a centered flex column */
  .about-team-cards{
    display: flex !important;
    flex-direction: column;
    align-items: center;        /* center the stack */
    gap: 22px;
    width: 100%;
    margin: 28px auto 0;
  }

  /* Card width never exceeds viewport minus safe padding */
  .about-team-cards .team-card{
    width: min(340px, calc(100vw - 32px));
    margin: 0 auto;
  }

  /* Media is fully fluid; no unexpected overflow */
  .about-team-cards .team-media{ width: 100%; }
  .about-team-cards .team-media img{
    display: block;
    max-width: 100%;
    height: auto;
  }
}