/* about.html — page-specific styles, layered on top of styles.css */

/* ---- Hero ---- */
.about-hero{padding-bottom:0}
.about-hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-hero__copy .eyebrow{display:block;margin-bottom:1rem}
.about-hero__copy h1{max-width:11ch}
.about-hero__media img{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/3.2}

/* ---- Body copy ---- */
.about-body__inner{max-width:64ch;margin:0 auto}
.about-body__inner p{font-size:1.08rem;color:var(--ink);margin-bottom:1.2rem}
.about-body__inner p:last-child{margin-bottom:0}

/* ---- CDO quote ---- */
.cdo-quote{background:var(--tint)}
.cdo-quote__inner{max-width:900px;text-align:center}
.cdo-quote__inner h2{margin-bottom:2.2rem}
.cdo-quote__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.cdo-quote__card p{font-family:var(--serif);color:var(--ink);font-size:1.35rem;font-weight:500;line-height:1.35;max-width:32ch}
.cdo-quote__author{display:flex;align-items:center;gap:.9rem}
.cdo-quote__author img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.cdo-quote__author div{display:flex;flex-direction:column;text-align:left}
.cdo-quote__author strong{color:var(--ink);font-weight:600}
.cdo-quote__author span{color:var(--muted);font-size:.9rem}

/* ---- Studio image strip ---- */
.about-strip{padding-top:0}
.about-strip__row{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.about-strip__img{flex:0 0 320px;border-radius:var(--radius);overflow:hidden;background:var(--tint);scroll-snap-align:start}
.about-strip__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}

/* ---- About Ora card icons ---- */
.about-card-icon{width:3.25rem;height:3.25rem;border-radius:1rem;background:var(--green-pale);display:flex;align-items:center;justify-content:center;padding:.6rem;margin-bottom:.5rem}
.about-card-icon img{width:100%;height:100%}

@media (max-width:860px){
  .about-hero__inner{grid-template-columns:1fr}
  .about-hero__media{order:-1}
  .about-strip__row{grid-template-columns:1fr}
}