/* ============ about.css — about page ============ */

.about-hero { display:grid; grid-template-columns:420px 1fr; gap:64px; padding:52px 0 56px; 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-eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--soft); padding:5px 14px; border-radius:100px; margin-bottom:20px; }
.about-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.about-eyebrow-text { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; color:var(--mid); }

.about-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:72px; line-height:0.85; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink); margin-bottom:32px; }
.about-title em { font-style:italic; color:var(--accent); }
.about-title .outline { -webkit-text-stroke:2px var(--ink); color:transparent; }

.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; }
.about-cta-group { display:flex; gap:10px; align-items:center; margin-top:32px; flex-wrap:wrap; }

.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 { background:var(--soft); padding:28px 24px; border-radius:2px; transition:background 0.2s; cursor:default; }
.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); }

.clients-section { padding:56px 0; border-bottom:1px solid var(--border); }
.clients-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.clients-col:first-child { border-right:1px solid var(--border); padding-right:48px; }
.clients-col:last-child { padding-left:48px; }
.clients-col-title { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mid); margin-bottom:20px; }
.client-item { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border); font-size:15px; font-weight:500; color:var(--ink); }
.client-item:last-child { border-bottom:none; }
.client-cat { font-size:11px; color:var(--mid); font-weight:400; }

.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-hero { grid-template-columns:1fr; gap:32px; }
  .about-photo-panel { position:static; max-width:360px; }
  .about-title { font-size:60px; }
  .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) {
  .about-title { font-size:48px; }
  .services-grid { grid-template-columns:1fr; }
  .clients-grid { grid-template-columns:1fr; }
  .clients-col:first-child { border-right:none; padding-right:0; border-bottom:1px solid var(--border); padding-bottom:24px; margin-bottom:24px; }
  .clients-col:last-child { padding-left:0; }
  .contact-strip-title { font-size:40px; }
}