/* ==========================================================================
   Armstrong Build — About page (template-about.php)
   Pixel-derived from Figma "05 — About" (frame width 1440).
   ========================================================================== */

/* ----------------------------------------------------------------- Intro */
.about-intro{ background:var(--paper); padding:100px 0 80px; }
.about-intro__inner{ display:flex; flex-direction:column; gap:32px; align-items:flex-start; }
.about-intro__title{
  font-family:var(--font-serif); font-weight:300; color:var(--ink);
  font-size:79px; line-height:1.04; max-width:1000px;
}
.about-intro__lede{
  font-family:var(--font-sans); font-weight:300; color:var(--text-soft);
  font-size:19px; line-height:1.7; max-width:760px;
}

/* ----------------------------------------------------------------- Intro banner image */
.about-banner{ background:var(--paper); padding:0 0 100px; }
.about-banner__img{ height:560px; border-radius:var(--radius-img); overflow:hidden; }
.about-banner__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.about-banner__img:hover img{ transform:scale(1.03); }

/* ----------------------------------------------------------------- Our Story */
.about-story{ background:var(--paper-2); padding:130px 0; }
.about-story__inner{ display:flex; gap:80px; align-items:flex-start; }
.about-story__head{ width:360px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; }
.about-story__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:34px; line-height:1.15; }
.about-story__body{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.about-story__body p{ font-family:var(--font-sans); font-weight:300; color:var(--text-soft); font-size:18px; line-height:1.75; }
.about-story__link{ align-self:flex-start; margin-top:8px; } /* 2026-10-22: link to the Our Offices page */

/* ----------------------------------------------------------------- Our Ethos (dark / #process) */
.about-ethos{ background:var(--ink); color:#fff; padding:130px 0; }
.about-ethos__inner{ display:flex; flex-direction:column; gap:64px; }
.about-ethos__head{ display:flex; flex-direction:column; gap:14px; }
.about-ethos__title{ font-family:var(--font-serif); font-weight:300; color:var(--on-dark); font-size:57px; line-height:1.15; }
.about-ethos__grid{ display:flex; gap:40px; align-items:flex-start; }
.ethos-pillar{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:24px; align-items:flex-start;
  border-top:1px solid var(--text-soft); padding-top:28px;
}
.ethos-pillar__img{ height:260px; width:100%; border-radius:4px; overflow:hidden; }
.ethos-pillar__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.ethos-pillar:hover .ethos-pillar__img img{ transform:scale(1.04); }
.ethos-pillar__num{ font-family:var(--font-serif); font-weight:300; color:var(--muted); font-size:30px; line-height:1; }
.ethos-pillar__title{ font-family:var(--font-serif); font-weight:500; color:var(--on-dark); font-size:28px; line-height:1; }
.ethos-pillar__desc{ font-family:var(--font-sans); font-weight:300; color:var(--muted); font-size:15px; line-height:1.65; }

/* ----------------------------------------------------------------- Our Mission */
.about-mission{ background:var(--paper-2); padding:140px 0; }
.about-mission__inner{ display:flex; flex-direction:column; gap:32px; align-items:center; text-align:center; }
.about-mission__statement{
  font-family:var(--font-serif); font-weight:300; color:var(--ink);
  font-size:44px; line-height:1.3; max-width:1000px;
}

/* ----------------------------------------------------------------- By the Numbers */
.about-stats{ background:var(--paper-3); padding:120px 0; }
.about-stats__inner{ display:flex; flex-direction:column; gap:56px; }
.about-stats__head{ display:flex; flex-direction:column; gap:14px; }
.about-stats__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:34px; line-height:1.15; }
.about-stats__grid{ display:flex; gap:40px; align-items:flex-start; }
.stat-item{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  border-top:1px solid var(--line-2); padding-top:28px;
}
.stat-item__value{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:64px; line-height:1; }
.stat-item__label{ font-family:var(--font-sans); font-weight:400; color:var(--muted); font-size:14px; letter-spacing:.5px; }

/* ----------------------------------------------------------------- Mid CTA row */
.about-midcta{ background:var(--paper-2); padding:100px 0; }

/* ----------------------------------------------------------------- Team */
.about-team{ background:var(--paper-3); padding:120px 0; }
.about-team__inner{ display:flex; flex-direction:column; gap:72px; }
.about-team__head{ display:flex; flex-direction:column; gap:14px; }
.about-team__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:57px; line-height:1.15; }
.about-team__grid{ display:flex; gap:40px; align-items:flex-start; }
.team-member{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.team-member__img{ height:480px; width:100%; border-radius:var(--radius-img); overflow:hidden; }
.team-member__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.team-member:hover .team-member__img img{ transform:scale(1.03); }
.team-member__id{ display:flex; flex-direction:column; gap:4px; width:100%; padding-bottom:16px; }
.team-member__name{ font-family:var(--font-serif); font-weight:500; color:var(--ink); font-size:34px; line-height:1; }
.team-member__role{ font-family:var(--font-sans); font-weight:400; color:var(--muted); font-size:12px; letter-spacing:2px; }
.team-member__bio{ font-family:var(--font-sans); font-weight:300; color:var(--text-soft); font-size:15px; line-height:1.7; }

/* ----------------------------------------------------------------- Responsive */
@media (max-width:1200px){
  .about-intro__title{ font-size:64px; }
  .about-ethos__title, .about-team__title{ font-size:46px; }
}
@media (max-width:900px){
  .about-intro{ padding:72px 0 56px; }
  .about-intro__title{ font-size:44px; }
  .about-intro__lede{ font-size:17px; }
  .about-banner{ padding:0 0 64px; }
  .about-banner__img{ height:360px; }
  .about-story{ padding:80px 0; }
  .about-story__inner{ flex-direction:column; gap:32px; }
  .about-story__head{ width:100%; }
  .about-story__body p{ font-size:16px; }
  .about-ethos{ padding:80px 0; }
  .about-ethos__title, .about-team__title{ font-size:38px; }
  .about-ethos__grid, .about-stats__grid, .about-team__grid{ flex-direction:column; }
  .about-mission{ padding:80px 0; }
  .about-mission__statement{ font-size:30px; }
  .about-stats{ padding:80px 0; }
  .stat-item__value{ font-size:52px; }
  .about-midcta{ padding:64px 0; }
  .about-team{ padding:80px 0; }
  .team-member__img{ height:420px; }
}
@media (max-width:560px){
  .about-intro__title{ font-size:38px; }
  .about-mission__statement{ font-size:26px; }
}