/* =================================================================
   MOBILE-2 — about-us page
   Requires: mobile-common.css
   ================================================================= */

@media (max-width: 768px) {

  /* ─── CSS VARS ───────────────────────────────────────────────  */
  :root {
    --about-copy:  15px;
    --about-title: 26px;
    --about-small: 14px;
  }

  /* ─── GLOBAL ABOUT ───────────────────────────────────────────  */
  .about-page * { max-width: 100%; }
  .about-page .inner { padding: 0 16px !important; }

  /* ─── HERO ───────────────────────────────────────────────────  */
  .about-top .inner {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }

  .hero-copy h1    { font-size: 28px !important; line-height: 1.3; }
  .hero-tagline    { font-size: 16px !important; }
  .hero-copy p     { font-size: 14px !important; }

  /* ─── PERSPECTIVE ────────────────────────────────────────────  */
  .perspective           { margin-top: 60px !important; }
  .perspective h2        { font-size: 28px !important; }

  /* ─── VALUES ─────────────────────────────────────────────────  */
  .values-wrap,
  .about-practice,
  .team,
  .begin-clarity {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .values-wrap   { margin-top: 60px !important; }
  .begin-clarity { padding-top: 40px !important; }

  .values-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .value-card {
    width: 100%;
    grid-column: auto !important;
    max-width: 100% !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .value-media  { height: 160px !important; }
  .value-body   { padding: 14px 16px !important; }

  /* ─── PRACTICE SECTION ───────────────────────────────────────  */
  .practice-title { font-size: 26px !important; }
  .about-banner   { font-size: 16px !important; padding: 0 16px; margin-top: 20px !important; }

  /* ─── FIRM BUTTONS (about-us specific sizing) ────────────────  */
  .switch {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .firm-btn {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 140px !important;
    padding: 16px !important;
    border-radius: 18px;
  }

  .firm-btn-logo  { width: 140px !important; }
  .firm-btn-label { font-size: 18px !important; gap: 6px; }

  .caret-tri {
    border-left:  6px solid transparent;
    border-right: 6px solid transparent;
    border-top:   8px solid var(--gold);
  }

  /* ─── TEAM ───────────────────────────────────────────────────  */
  .team .lead,
  .team .sub,
  .begin-clarity p {
    width: 100% !important;
    padding: 0 16px;
    font-size: 14px !important;
  }

  .team-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .team-card {
    width: 90% !important;
    max-width: 320px !important;
    padding: 18px !important;
    border-radius: 16px;
    margin: 0 auto !important;
    background: #f8f8f8;
  }

  .team-card h3 { font-size: 20px !important; line-height: 1.3; }
  .team-card h4 { font-size: 14px !important; line-height: 1.4; margin-top: 6px; }
  .team-card p  { font-size: 14px !important; line-height: 1.6; max-width: 260px; }
  .team-card a  { margin-top: 10px; display: inline-block; font-size: 14px; }

  /* ─── BEGIN WITH CLARITY ─────────────────────────────────────  */
  .clarity-closing { font-size: 24px !important; font-weight: 500; }

  .begin-clarity .assess {
    padding: 14px 20px !important;
    font-size: 18px !important;
    border-radius: 40px;
  }

  /* ─── HOW WE WORK (method cards) ─────────────────────────────  */
  .hero-approach h2,
  .hero-title-block h1 { font-size: 28px !important; line-height: 1.3; }

  .hero-approach p,
  .hero-title-block p  { font-size: 14px !important; line-height: 1.6; }

  .method-grid { grid-template-columns: 1fr !important; gap: 16px; }

  .method-card  { padding: 20px !important; border-radius: 12px; }
  .card-title   { font-size: 18px !important; }
  .card-copy    { font-size: 14px !important; line-height: 1.6; }

  .quote-strip   { padding: 30px 0 !important; }
  .quote-strip p { font-size: 16px !important; padding: 0 16px; }

  /* ─── CTA BLOCK ──────────────────────────────────────────────  */
  .cta-block { padding: 72px 16px 56px; }

  .cta-block h3 {
    font-size: 21px;
    max-width: 260px;
    margin: 0 auto;
    line-height: 1.35;
    text-wrap: balance;
  }

  .pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: fit-content;
    margin-top: 24px;
    padding: 14px 22px;
    font-size: 15px;
    border-radius: 999px;
  }

}