/* ---------- About ---------- */
.ab-hero { margin-bottom: 120px; }
.ab-hero .label { margin-bottom: 18px; }
.ab-title { font-size: clamp(48px, 8.4vw, 150px); font-weight: 500; letter-spacing: -.055em; line-height: .9; max-width: 12em; }
.ab-title em { font-style: normal; color: var(--dim); }

.ab-intro { display: grid; grid-template-columns: 5fr 1fr 6fr; gap: 24px; align-items: start; }
.ab-portrait { grid-column: 1; aspect-ratio: 3 / 4; margin: 0; }
.ab-portrait img { height: 115%; object-position: 72% 100%; }
.ab-portrait figcaption { position: absolute; left: 12px; bottom: 12px; color: #fff; z-index: 2; }
.ab-bio { grid-column: 3; padding-top: 12vh; }
.ab-bio > .label { margin-bottom: 24px; }
.ab-lead { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; margin-bottom: 36px; }
.ab-body { columns: 2; column-gap: 28px; color: var(--dim); margin-bottom: 40px; }
.ab-body p { margin-bottom: 1em; break-inside: avoid; }

.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 160px; border-top: 1px solid var(--line); }
.stat { padding-top: 20px; }
.stat__n { font-size: clamp(64px, 10vw, 180px); font-weight: 500; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.stat__l { color: var(--dim); margin-top: 10px; }

.ab-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.ab-section-head h2 { font-size: clamp(40px, 6vw, 96px); font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.ab-section-head p { color: var(--dim); max-width: 26em; }

.ab-services { margin-top: 180px; }
.svc { border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc__head { width: 100%; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px; padding: 22px 0; }
.svc__head h3 { font-size: clamp(28px, 4vw, 56px); font-weight: 500; letter-spacing: -.04em; line-height: 1; transition: color .3s; }
.svc__head:hover h3 { color: var(--accent); }
.svc__icon { position: relative; width: 22px; height: 22px; }
.svc__icon::before, .svc__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.svc__icon::after { transform: rotate(90deg); }
.svc.is-open .svc__icon::after { transform: rotate(0deg); }
.svc__body { height: 0; overflow: hidden; }
.svc__inner { display: grid; grid-template-columns: 60px 1fr 1fr 220px; gap: 20px; padding: 0 0 36px; }
.svc__inner p { grid-column: 2; font-size: 18px; line-height: 1.45; max-width: 26em; }
.svc__inner ul { grid-column: 3; list-style: none; color: var(--dim); }
.svc__inner ul li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.svc__inner .media { grid-column: 4; aspect-ratio: 4 / 5; }

.ab-clients { margin-top: 180px; overflow: hidden; }
.ab-clients .ab-section-head { padding: 0 var(--gutter); }
.marquee { display: flex; white-space: nowrap; width: max-content; padding: 14px 0; }
.marquee span { font-size: clamp(40px, 6vw, 96px); font-weight: 500; letter-spacing: -.05em; line-height: 1; padding-right: .55em; }
.marquee span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--fg); }

.ab-cv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-top: 180px; }
.cv h2 { color: var(--dim); margin-bottom: 18px; font-weight: 400; }
.cv ul { list-style: none; border-top: 1px solid var(--line); }
.cv li { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease-out), background .3s; }
.cv li:hover { padding-left: 10px; padding-right: 10px; background: var(--bg-2); }
.cv li .y { color: var(--dim); }
.cv li .v { color: var(--dim); text-align: right; }

@media (max-width: 900px) {
  .ab-intro { grid-template-columns: 1fr; }
  .ab-portrait, .ab-bio { grid-column: 1; }
  .ab-bio { padding-top: 24px; }
  .ab-body { columns: 1; }
  .ab-stats { grid-template-columns: 1fr; }
  .svc__inner { grid-template-columns: 1fr; }
  .svc__inner p, .svc__inner ul, .svc__inner .media { grid-column: 1; }
  .svc__inner .media { max-width: 260px; }
  .ab-cv { grid-template-columns: 1fr; }
  .ab-section-head { flex-direction: column; align-items: flex-start; }
}