/* ==================================================================
   Sagestone Homes, About Sagestone Homes.
   Section layouts only. The global base owns the reset, palette,
   grounds, typography, buttons, nav, footer, labels and reveals.
   Enqueued only on page-templates/about.php.
   ================================================================== */

/* 1. split hero: copy left, team photo right at a fixed height.
   The photo is wider than its column, so cover trims the sides only. */
.ahero{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--forest);padding-top:104px;align-items:stretch}
.ahero-copy{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(28px,5vw,80px) 64px var(--gutter)}
.ahero h1{font-size:clamp(34px,4vw,56px);max-width:15ch;margin:20px 0 22px;color:var(--limestone)}
.ahero p{max-width:44ch;color:var(--sandstone);font-size:19px}
.ahero-art{position:relative;height:min(64vh,700px);min-height:420px;overflow:hidden}
.ahero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* portraits keep faces in frame */
.person .ph--img img{object-position:50% 18%}


/* shared two-column text section */
.tc{padding:140px 0}
.tc .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.tc h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px;max-width:15ch}
.tc .rule{margin-top:24px}
.tc p{margin-bottom:20px;max-width:58ch;color:#4A4A44}
.tc p a{color:var(--forest);border-bottom:1px solid rgba(169,133,83,.6)}

/* 2. what we build: copy with image */
.wb{padding:140px 0}
.wb .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.wb h2{font-size:clamp(28px,3.4vw,44px);margin:18px 0 24px;max-width:16ch}
.wb .rule{margin-bottom:26px}
.wb p{margin-bottom:20px;max-width:54ch;color:#4A4A44}
.wb p a{color:var(--forest);border-bottom:1px solid rgba(169,133,83,.6)}
.wb-art{position:relative}
.wb-art .backer{position:absolute;right:-40px;top:42px;bottom:42px;left:64px;background:#E4DFD2;z-index:0}
.wb-art .ph{position:relative;z-index:1;aspect-ratio:4/5}

/* 4. generations, the one dark section */
.gen{background:var(--forest);color:var(--limestone);padding:140px 0}
.gen h2,.gen h3{color:var(--limestone)}
.gen .eyebrow{color:var(--sandstone)}
.gen-head{max-width:760px;margin:0 auto 56px;text-align:center}
.gen-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:18px}
.glist{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.gitem{padding:0 30px;border-left:1px solid rgba(169,133,83,.3)}
.gitem:first-child{padding-left:0;border-left:0}
.gitem:last-child{padding-right:0}
.gitem i{font-style:normal;display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-accent);font-weight:700;margin-bottom:14px}
.gitem h3{font-size:22px;margin-bottom:10px}
.gitem p{font-size:15px;color:var(--sandstone);opacity:.92;line-height:1.55}

/* 5. people */
.ppl{padding:140px 0}
.ppl-head{max-width:760px;margin:0 auto 56px;text-align:center}
.ppl-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:18px}
.ppl-head p{margin-top:16px;color:#4A4A44}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.person .ph{aspect-ratio:4/5;margin-bottom:18px}
.person b{display:block;font-family:var(--font-display);font-weight:400;font-size:21px;margin-bottom:4px}
.person span{font-size:14px;color:#4A4A44;line-height:1.5;display:block}

/* 6. parade band */
.pb{padding:110px 0}
.pb .wrap{display:flex;align-items:center;justify-content:space-between;gap:50px;flex-wrap:wrap}
.pb h2{font-size:clamp(24px,2.6vw,34px);max-width:26ch}
.pb p{margin-top:12px;color:#4A4A44;max-width:56ch}

/* 7. finale */
.finale{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden}
.finale .ph{position:absolute;inset:0}
.finale:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,22,16,.9) 0%,rgba(10,22,16,.84) 38%,rgba(10,22,16,.5) 56%,rgba(10,22,16,.1) 76%,rgba(10,22,16,0) 100%)}
.finale .wrap{position:relative;z-index:2}
.finale h2{font-size:clamp(30px,3.8vw,50px);max-width:17ch;margin:20px 0 22px;color:var(--limestone)}
.finale p{max-width:50ch;color:var(--sandstone);margin-bottom:34px}

@media(max-width:1024px){
  .ahero{grid-template-columns:1fr;padding-top:0}
  .ahero-copy{padding:170px var(--gutter) 56px}
  .ahero-art{height:auto;min-height:0}
  .ahero-img{position:static;height:auto;aspect-ratio:16/9}
  .tc .wrap,.wb .wrap{grid-template-columns:1fr;gap:44px}
  .glist{grid-template-columns:1fr 1fr;gap:40px 0}
  .gitem:nth-child(odd){padding-left:0;border-left:0}
  .pgrid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:768px){
  .ahero-copy{padding:150px var(--gutter) 48px}
  .pgrid{grid-template-columns:1fr 1fr}
      .tc,.wb,.gen,.ppl{padding:88px 0}
  .pb{padding:80px 0}
  .glist{grid-template-columns:1fr;gap:32px}
  .gitem{padding:0;border-left:0}
  .wb-art .backer{display:none}
}

/* portrait frames are small, so their labels are too */
.person .ph span{padding:12px 16px;font-size:11px}
.person .ph span b{font-size:24px}