/* ============ about.css — about page ============ */
/* Eyebrow/title/CTA now live in the shared hero-panel (home.css); this file
   only styles the scrolling content: photo+bio intro, services, clients,
   process and the closing contact strip. */

.about-intro { display:grid; grid-template-columns:300px 1fr; gap:48px; padding-bottom:56px; margin-bottom:16px; border-bottom:1px solid var(--border); align-items:start; }

.about-photo-panel { display:flex; flex-direction:column; gap:14px; position:sticky; top:24px; }
.photo-placeholder { width:100%; aspect-ratio:3/4; background:var(--soft); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; overflow:hidden; }
.photo-placeholder img { width:100%; height:100%; object-fit:cover; }
.photo-placeholder-text { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mid); text-align:center; line-height:1.6; }
.photo-caption { font-size:11px; color:var(--mid); letter-spacing:0.06em; text-align:center; }

.about-bio { font-size:16px; line-height:1.8; color:#444; }
.about-bio p { margin-bottom:18px; }
.about-bio p:last-child { margin-bottom:0; }
.about-bio strong { color:var(--ink); font-weight:500; }

.services-section { padding:56px 0; border-bottom:1px solid var(--border); }
.section-label { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mid); margin-bottom:32px; }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.service-card { display:block; background:var(--soft); padding:28px 24px; border-radius:2px; transition:background 0.2s; cursor:pointer; text-decoration:none; }
.service-card:hover { background:var(--yellow); }
.service-num { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; color:var(--accent); letter-spacing:0.08em; margin-bottom:16px; }
.service-name { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:900; text-transform:uppercase; color:var(--ink); line-height:1; margin-bottom:12px; }
.service-desc { font-size:12px; line-height:1.6; color:var(--mid); }

.process-section { padding:56px 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:start; }
.process-intro-title { font-family:'Barlow Condensed',sans-serif; font-size:42px; font-weight:900; line-height:0.9; text-transform:uppercase; color:var(--ink); }
.process-intro-title em { font-style:italic; color:var(--accent); }
.step { display:grid; grid-template-columns:48px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); align-items:start; }
.step:last-child { border-bottom:none; }
.step-num { font-family:'Barlow Condensed',sans-serif; font-size:32px; font-weight:900; color:var(--accent); line-height:1; }
.step-title { font-size:15px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.step-desc { font-size:13px; line-height:1.6; color:var(--mid); }

.contact-strip { background:var(--ink); border-radius:16px; margin:56px 0; padding:56px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:48px; }
.contact-strip-title { font-family:'Barlow Condensed',sans-serif; font-size:52px; font-weight:900; line-height:0.85; text-transform:uppercase; color:#fff; }
.contact-strip-title em { font-style:italic; color:var(--yellow); }
.contact-strip-sub { font-size:14px; color:rgba(255,255,255,0.5); margin-top:12px; max-width:400px; line-height:1.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .about-intro { grid-template-columns:1fr; gap:32px; }
  .about-photo-panel { position:static; max-width:360px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .process-section { grid-template-columns:1fr; gap:28px; }
  .contact-strip { grid-template-columns:1fr; gap:28px; padding:40px; }
}
@media (max-width:520px) {
  .services-grid { grid-template-columns:1fr; }
  .contact-strip-title { font-size:40px; }
}