/* Brings the ported Shiny About + Contact pages onto the homepage's design line.
   Loaded AFTER about-page.css / contact-page.css, same selector weight, so it
   wins on order (and restates !important where the original used it).
   The values are the homepage's own tokens (globals.css, Section.module.css,
   PageHero.module.css, homepage-real.css):
     container   max-width var(--maxw) 1120px, side padding var(--pad) 20–40px
     page title  Fraunces 600, clamp(32px, 4.8vw, 52px), line-height 1.05
     lead        Inter, clamp(15px, 1.7vw, 18px), var(--muted), 62ch
     section h2  Fraunces 600, clamp(24px, 3.4vw, 38px), -0.01em, line-height 1.1
     section p   Inter 15.5px, var(--muted), 60ch
     eyebrow     mono 11px 500, 0.22em, teal
     section     64px top/bottom */

/* Content edge that lines up with the homepage container at any width. */
#aboutUsPage.about-page-v2,
#contactPage.contact-page-v2 {
  --im-edge: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
}

/* ── Layout: sections sit in the homepage container ───────────────────────── */
#aboutUsPage.about-page-v2 .ap-hero {
  max-width: none;
  padding: clamp(48px, 8vw, 88px) var(--im-edge) clamp(28px, 4vw, 44px);
}
#aboutUsPage.about-page-v2 .ap-section,
#aboutUsPage.about-page-v2 .ap-build,
#contactPage.contact-page-v2 .ct-section {
  padding: 64px var(--im-edge);
}
#contactPage.contact-page-v2 .ct-form-section {
  padding: 0 var(--im-edge) 64px;
}
#aboutUsPage.about-page-v2 .ap-final-hook,
#contactPage.contact-page-v2 .ct-direct-line {
  margin-left: var(--im-edge);
  margin-right: var(--im-edge);
}
#aboutUsPage.about-page-v2 .ap-final-hook { padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px); }

/* ── Type: the homepage scale ─────────────────────────────────────────────── */
#aboutUsPage.about-page-v2 .ap-hero h1 {
  font-family: var(--serif) !important;
  font-weight: 600;
  font-size: clamp(32px, 4.8vw, 52px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink) !important;
  margin-bottom: 20px;
}
#aboutUsPage.about-page-v2 .ap-hero-sub {
  font-family: var(--ui);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}
#aboutUsPage.about-page-v2 .ap-section-hd,
#aboutUsPage.about-page-v2 .ap-final-hook-title,
#contactPage.contact-page-v2 .ct-section-hd {
  font-family: var(--serif) !important;
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink) !important;
}
#aboutUsPage.about-page-v2 .ap-section-sub,
#aboutUsPage.about-page-v2 .ap-final-hook-sub,
#contactPage.contact-page-v2 .ct-section-sub {
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
  margin-top: 12px;
}
#aboutUsPage.about-page-v2 .ap-section-sub { margin-bottom: 36px; }
#aboutUsPage.about-page-v2 .ap-eyebrow,
#contactPage.contact-page-v2 .ct-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--teal);
}

/* Card / tile titles: the homepage's headings are all Fraunces. */
#aboutUsPage.about-page-v2 .ap-card-h3,
#aboutUsPage.about-page-v2 .ap-blog-title,
#contactPage.contact-page-v2 .ct-ch-title,
#contactPage.contact-page-v2 .ct-fast-title {
  font-family: var(--serif) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
}
#aboutUsPage.about-page-v2 .ap-card-h3 { font-size: 19px; }
#contactPage.contact-page-v2 .ct-ch-title { font-size: 18px; }
#contactPage.contact-page-v2 .ct-fast-title { font-size: 16px; }

/* Body copy: the site's self-hosted Inter and its muted grey. */
#aboutUsPage.about-page-v2 .ap-card-body,
#aboutUsPage.about-page-v2 .ap-build-prose p,
#contactPage.contact-page-v2 .ct-fast-sub {
  font-family: var(--ui);
  color: var(--muted);
}
#aboutUsPage.about-page-v2 .ap-card-body { font-size: 14px; line-height: 1.65; }
#aboutUsPage.about-page-v2 .ap-build-prose p { font-size: 15.5px; line-height: 1.7; }

/* "Or just write to us directly": heading left, form flush to the right edge. */
#contactPage.contact-page-v2 .ct-write-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
#contactPage.contact-page-v2 .ct-write .ct-form-section { padding: 0; align-items: stretch; }
#contactPage.contact-page-v2 .ct-write .ct-form-wrap { max-width: 600px; margin-left: auto; }
@media (max-width: 860px) {
  #contactPage.contact-page-v2 .ct-write-grid { grid-template-columns: 1fr; }
  #contactPage.contact-page-v2 .ct-write .ct-form-wrap { margin-left: 0; }
}