/* ============================================================
   EBKaC labs — about page
   Loaded after css/home.css and reuses its tokens (brand guide v3.1 palette),
   type and section styles; only the about-specific pieces live here.
   ============================================================ */

/* ---------- hero: one big statement ---------- */
.about-hero{
  padding:clamp(150px, 20vw, 220px) 0 clamp(64px, 9vw, 110px);
  background:
    radial-gradient(50% 60% at 90% 10%, rgba(148,165,129,.22), transparent 70%),
    radial-gradient(40% 50% at 5% 80%, rgba(184,92,61,.10), transparent 70%),
    var(--bone);
}
.about-hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.2rem, 5.6vw, 4.6rem);
  line-height:1.04; letter-spacing:-.02em;
  color:var(--olive);
  max-width:20ch;
}

/* ---------- two-column "heading | body" layout ---------- */
.split{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(32px, 6vw, 96px); align-items:start;
}
.prose p{ font-size:clamp(1.05rem, 1.5vw, 1.2rem); color:var(--ink-soft); max-width:58ch }
.prose p + p{ margin-top:1.1em }
.prose em{ font-style:normal; font-family:var(--mono); font-size:.92em; color:var(--ink) }

/* ---------- dark band (believe) ---------- */
.section--dark{ background:var(--olive-deep); color:var(--bone) }
.section--dark .section__title{ color:var(--bone) }

.pairs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(28px, 4vw, 56px) }
.pair{ border-top:1px solid rgba(239,231,210,.22); padding-top:28px }
.pair__from{
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(239,231,210,.55); text-decoration:line-through; text-decoration-color:rgba(184,92,61,.9);
}
.pair__arrow{ color:var(--clay); font-size:22px; margin:8px 0 }
.pair__to{
  font-family:var(--serif); font-weight:500; font-size:clamp(2rem, 3.4vw, 2.8rem);
  line-height:1.05; margin-bottom:14px;
}
.pair p:last-child{ color:rgba(239,231,210,.78); font-size:15.5px; max-width:36ch }

/* ---------- how we work ---------- */
.steps .focus__num{ letter-spacing:.04em }
.quote{
  margin-top:clamp(56px, 8vw, 96px);
  padding-left:clamp(20px, 3vw, 36px);
  border-left:3px solid var(--clay);
}
.quote p{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.25;
  color:var(--olive); max-width:34ch;
}

/* ---------- people ---------- */
.people{ display:grid; gap:36px }
.person{ display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:start }
.person__photo{
  width:120px; aspect-ratio:1; border-radius:50%; object-fit:cover;
  background:radial-gradient(circle at 35% 30%, var(--sage), var(--olive) 75%);
}
.person__name{ font-family:var(--serif); font-weight:500; font-size:1.6rem; color:var(--olive) }
.person__role{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--clay); margin:4px 0 12px }
.person__bio{ color:var(--ink-soft); max-width:50ch }

/* ---------- contact ---------- */
.contact-links{ display:flex; flex-wrap:wrap; gap:12px }
.btn--outline-light{ border:1px solid rgba(239,231,210,.45); color:var(--bone) }
.btn--outline-light:hover{ border-color:var(--bone) }

@media (max-width:860px){
  .split{ grid-template-columns:1fr }
  .pairs{ grid-template-columns:1fr }
}
@media (max-width:480px){
  .person{ grid-template-columns:1fr }
  .person__photo{ width:96px }
}