/* ── about.css — About page only ──────────────────────────────────────────────
   Loads after main.css.
   Universal: hero-title, domain-tag, page-hdr-eyebrow, card, icon-btn,
              btn--ink, btn--outline, callout-corner, section--surface,
              sec-hdr, sec-intro → main.css.
   ─────────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   HERO  (two-column: info left, portrait right)
   ═══════════════════════════════════════════════════════════════════════════ */

.about-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad-lg) var(--gutter) 80px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--section-pad-lg);
  align-items: center;
}

.about-hero-info { min-width: 0; }

/* Eyebrow uses universal page-hdr-eyebrow (main.css) */

/* hero-title uses universal .hero-title (main.css) */

.about-subtitle {
  font-family: var(--serif);
  font-size: var(--text-subhead-lg);  /* 24px */
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  margin: 24px 0 0;
}

.about-domains {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
}
/* domain-tag base + transition + pre-reveal in main.css */

.about-portrait {
  position: relative;
  width: 480px;
  height: max-content;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: contrast(1.02);
  transform: scale(1.17);
  transition: filter 0.3s ease;
}
.about-hero:hover .about-portrait img { filter: contrast(1.04); }


/* ═══════════════════════════════════════════════════════════════════════════
   CREDENTIALS STRIP  (section--surface bg from main.css)
   Four numbers surfaced from the bio prose.
   ═══════════════════════════════════════════════════════════════════════════ */

.about-credentials {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.about-credentials-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.about-credential {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px;
  position: relative;
  /* Entrance animation transition — JS uses .pre-reveal class */
  transition: opacity 0.55s var(--ease-spring), transform 0.55s var(--ease-spring);
}
.about-credential:first-child { padding-left: 0; }
.about-credential:last-child  { padding-right: 0; }
.about-credential:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--hairline);
}

.about-credential-num {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
}
.about-credential-num small {
  font-family: var(--serif);
  font-size: var(--text-heading);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--highlight);
  margin-left: 2px;
}

.about-credential-lbl {
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BIO  (two-column: callout-corner left sticky, prose right)
   ═══════════════════════════════════════════════════════════════════════════ */

.about-bio { border-bottom: 1px solid var(--hairline); }

.about-bio-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad-lg) var(--gutter);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--section-pad-lg);
  align-items: start;
}

/* callout-corner in the left column stays visible as prose scrolls */
.about-bio-pull {
  position: sticky;
  top: 110px;
  align-self: start;
}

.about-bio-prose { min-width: 0; }
.about-bio-prose p {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 26px;
}
.about-bio-prose p:last-child { margin-bottom: 0; }
.about-bio-prose em { font-style: italic; color: var(--highlight); }


/* ═══════════════════════════════════════════════════════════════════════════
   AVAILABLE  (section--surface bg from main.css, centred)
   ═══════════════════════════════════════════════════════════════════════════ */

.about-available { border-bottom: 1px solid var(--hairline); }

.about-available-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}

.about-available-text {
  font-family: var(--serif);
  font-size: var(--text-heading-xs);   /* 26px */
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  max-width: 820px;
}
.about-available-text em {
  font-style: italic;
  color: var(--accent-strong);
  font-weight: 500;
}

.about-available-meta {
  font-family: var(--mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS  (3 card grid — card base from main.css)
   ═══════════════════════════════════════════════════════════════════════════ */

.about-tests-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad-lg) var(--gutter);
}

.about-tests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

/* card base (bg, border, border-radius, ::before) comes from main.css */
.about-test {
  padding: 32px;
  gap: 20px;
}
.about-test::before { width: 56px; }   /* accent bar width override */

.about-test-quote {
  font-family: var(--serif);
  font-size: var(--text-prose);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  margin: 12px 0 0;
  flex-grow: 1;
}
.about-test-quote em { font-style: italic; color: var(--highlight); }

.about-test-author {
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  padding-top: 18px;
  gap: 14px;
}
.about-test-author-info { flex: 1; }

.about-test-name {
  font-family: var(--serif);
  font-size: var(--text-prose);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.about-test-role {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* LinkedIn circle — icon-btn hover from main.css */
.about-test-li { width: 36px; height: 36px; border: 1px solid var(--hairline-strong); }


/* ═══════════════════════════════════════════════════════════════════════════
   CTAs
   ═══════════════════════════════════════════════════════════════════════════ */

.about-ctas-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 50px 0px 0px;
  display: flex;
  gap: 20px;
  justify-content: center;
}
/* btn--ink and btn--outline from main.css */
.about-ctas-inner .btn {
  font-size: var(--text-body);
  padding: 16px 28px;
}