/* =========================================================
   ABOUT / STUDIO — layers over home.css tokens
   ========================================================= */

.aboutbody{ background:var(--paper); color:var(--ink); }

/* hero */
.ab-hero{ padding-top:clamp(124px,15vh,190px); padding-bottom:30px; }
.ab-hero .grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:end; }
.ab-hero .eyebrow{ margin-bottom:26px; }
.ab-hero h1{ font-family:var(--display); font-weight:300; font-size:clamp(40px,5.6vw,82px); line-height:1.04; letter-spacing:-.015em; margin:0; max-width:18ch; }
.ab-hero h1 em{ font-style:italic; color:var(--sage); }
.ab-portrait{ height:clamp(360px,46vh,520px); }

/* shared section opener already in home.css (.opener, .sec) */
.ab-sec{ padding:clamp(80px,12vh,140px) 0; }
.ab-sec.line{ border-top:1px solid var(--line); }

/* lede + body two-col */
.ab-split{ display:grid; grid-template-columns:0.8fr 1.4fr; gap:60px; align-items:start; }
.ab-split .lede{ font-family:var(--display); font-weight:300; font-size:clamp(26px,3vw,40px); line-height:1.12; letter-spacing:-.01em; max-width:16ch; }
.ab-split .lede em{ font-style:italic; color:var(--sage); }
.ab-split .body p{ font-size:18px; line-height:1.6; color:var(--ink-2); max-width:60ch; }
.ab-split .body p:last-child{ margin-bottom:0; }
.ab-split .body em{ font-style:italic; color:var(--sage); }

/* method triad */
.method3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:18px; }
.method3 > div{ border-top:1px solid var(--line-strong); padding:22px 30px 0 0; }
.method3 .t{ font-family:var(--display); font-weight:400; font-size:44px; line-height:1; }
.method3 p{ font-size:16px; color:var(--ink-soft); margin-top:10px; max-width:32ch; }

/* range — discipline columns */
.range{ columns:3; column-gap:40px; margin-top:8px; }
.range .r{ break-inside:avoid; display:grid; grid-template-columns:30px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); align-items:baseline; }
.range .r .n{ font-family:var(--mono); font-size:11px; color:var(--sage); }
.range .r .nm{ font-family:var(--serif); font-size:17px; }

/* trajectory timeline */
.traj{ display:grid; gap:0; }
.trow{ display:grid; grid-template-columns:150px 1fr 1fr; gap:34px; padding:26px 0; border-top:1px solid var(--line); align-items:baseline; }
.trow .when{ font-family:var(--mono); font-size:12.5px; color:var(--sage); }
.trow .what{ font-family:var(--display); font-weight:400; font-size:27px; line-height:1.05; }
.trow .desc{ font-size:15.5px; color:var(--ink-soft); max-width:46ch; }

/* services */
.svc{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
.svc .s{ background:var(--paper); padding:30px 32px 34px; }
.svc .s .k{ font-family:var(--mono); font-size:12px; color:var(--sage); }
.svc .s h4{ font-family:var(--serif); font-weight:500; font-size:21px; margin:12px 0 10px; }
.svc .s p{ font-size:15.5px; color:var(--ink-soft); margin:0; max-width:42ch; }

/* recognition row */
.recog{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.recog .c{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em; padding:9px 16px; border:1px solid var(--line-strong); border-radius:100px; color:var(--ink-2); }

/* witness reuse (home.css .witness-sec available); local fallback */
.ab-witness{ background:var(--ink); color:var(--paper); }
.ab-witness .opener{ color:var(--sage-2); }
.ab-witness .opener .num{ color:#8a8f82; }
.ab-witness .wbar{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--sage-2); border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:18px; margin-top:40px; }
.ab-witness blockquote{ margin:42px 0; font-family:var(--serif); font-weight:300; font-size:clamp(24px,3.4vw,42px); line-height:1.3; color:var(--paper); max-width:26ch; }
.ab-witness blockquote em{ font-style:italic; color:#aeb6a4; }
.ab-witness .wprov{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:#8a8f82; border-top:1px solid rgba(255,255,255,.16); padding-top:18px; }

@media (max-width:900px){
  .ab-hero .grid{ grid-template-columns:1fr; gap:34px; align-items:start; }
  .ab-portrait{ height:340px; }
  .ab-split{ grid-template-columns:1fr; gap:26px; }
  .method3{ grid-template-columns:1fr; }
  .method3 > div{ padding-right:0; }
  .range{ columns:1; }
  .trow{ grid-template-columns:1fr; gap:6px; }
  .svc{ grid-template-columns:1fr; }
}