.ab-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.ab-hero .shot{aspect-ratio:1;box-shadow:0 30px 60px -38px rgba(20,59,31,.5)}
@media(max-width:900px){ .ab-hero{grid-template-columns:1fr} .ab-hero .shot{max-width:24rem;margin-inline:auto} }

.story{max-width:var(--measure)}
.story p+p{margin-top:1.05rem}
.story strong{color:var(--ink);font-weight:650}
.on-dark .story strong{color:var(--sun-glow)}
/* the same mark the .quote component uses, so the two read as one idiom */
/* On the static build this is a .pull div; in WordPress the same words are a
   quote block written in the editor. site.css styles .story blockquote to
   match, so both render identically and there is one idiom, not two. */
.pull,.story blockquote{
  margin:2.5rem 0;
  font-family:var(--display);font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  line-height:1.35;letter-spacing:-.018em;color:var(--ink);
}
.pull::before{content:"";display:block;width:1.6rem;height:2px;background:var(--copper);margin-bottom:1.1rem}
.on-dark .pull{color:var(--on-forest)}
.on-dark .pull::before{background:var(--copper-glow)}

.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:3rem}
.cred h3{font-size:1rem;margin-bottom:.5rem;padding-bottom:.6rem;border-bottom:2px solid var(--copper)}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:clamp(1.5rem,3.5vw,3rem);margin-top:3rem}
.arm{border-top:2px solid var(--copper);padding-top:1.15rem}
.on-dark .arm{border-top-color:var(--copper-glow)}
.arm h3{font-size:1.15rem;margin-bottom:.5rem}
.arm p{font-size:.94rem;color:var(--ink-2);margin-bottom:1.2rem;max-width:var(--measure-sm)}
.on-dark .arm p{color:var(--sage-glow)}