/* Intellect Juris — About us page
   Section layout follows the supplied About Us mock; type, colour, buttons and radii come from site.css. */

.ab-h1 { font: 400 clamp(2.5rem, 1.6rem + 3.2vw, 4rem)/1.1 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.ab-h3 { font: 500 1.25rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.ab-lede { font-size: 1.125rem; color: var(--taupe); }
.ab-on-dark { color: var(--on-dark); }
.ab-link { color: var(--bronze); text-decoration: none; border-bottom: 1px solid var(--copper); padding-bottom: 3px; font-weight: 500; }
.ab-link:hover { color: var(--espresso); }

/* ---------- 1 hero ---------- */
.ab-hero { padding: 168px 0 48px; }
.ab-intro { text-align: center; }
.ab-intro .ab-h1 { max-width: 17ch; margin: 28px auto 20px; }
.ab-intro .ab-muted { color: var(--taupe); }
.ab-chip { display: inline-flex; align-items: center; justify-content: center; width: .95em; height: .95em; margin: 0 .08em; vertical-align: -.08em; border-radius: var(--radius); background: linear-gradient(135deg, var(--bronze), var(--copper-soft)); color: #fff; }
.ab-chip svg { width: 52%; height: 52%; }
.ab-intro .ab-lede { max-width: 56ch; margin-inline: auto; }
.ab-intro .ab-lede + .ab-lede { margin-top: 12px; }
.ab-belief { max-width: 60ch; margin: 20px auto 0; color: var(--taupe); }
.ab-belief strong { font-weight: 500; color: var(--espresso); }
.ab-br { display: none; }
@media (min-width: 1100px) {
  .ab-intro .ab-lede:first-of-type, .ab-belief { max-width: none; white-space: nowrap; }
  .ab-intro .ab-lede:nth-of-type(2) { max-width: none; }
  .ab-br { display: inline; }
}
.ab-where { margin-top: 12px; font-size: .9375rem; color: var(--taupe); }

.ab-hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 56px; }
.ab-card-dark { display: flex; flex-direction: column; gap: 24px; min-height: 560px; padding: 48px; border-radius: var(--radius); background: var(--sand); color: var(--espresso); }
.ab-card-dark .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.ab-card-dark .eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--copper); }
.ab-card-dark .h2 .ab-accent { color: var(--bronze); }
.ab-card-dark > p { max-width: 46ch; color: var(--taupe); }
.ab-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-btn-sand { background: var(--espresso); color: var(--page); }
.ab-btn-sand:hover { background: #3b4043; }
.ab-mini { margin-top: auto; padding: 24px; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--page); }
.ab-mini a { display: inline-block; margin-top: 8px; color: var(--bronze); text-decoration: none; font-size: .9375rem; }
.ab-mini a:hover { color: var(--espresso); }

.ab-card-photo { position: relative; min-height: 560px; border-radius: var(--radius); overflow: hidden; background: var(--espresso) url("../img/about/lady-justice.jpg") 68% center / cover; }
.ab-stat-chips { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; gap: 8px; }
.ab-stat-chip { flex: 1; padding: 18px 20px; border-radius: var(--radius); background: var(--page); box-shadow: 0 12px 32px -16px rgba(41, 45, 48, .35); }
.ab-stat-chip b { display: block; font: 400 2.5rem/1 var(--font-display); letter-spacing: -0.03em; }
.ab-stat-chip b span, .ab-stat b span { color: var(--copper); }
.ab-stat-chip small { display: block; margin-top: 8px; font-size: .875rem; color: var(--taupe); }

/* ---------- 2 forums strip ---------- */
.ab-forums { margin-block: 50px; padding: 50px 0; border-block: 1px solid var(--stone); }
.ab-forums .container { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 48px; }
.ab-forums .h2 { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); }
.ab-forums-text { max-width: 60ch; margin-bottom: 24px; color: var(--taupe); }
.ab-forum-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.ab-forum-list li { padding-left: 14px; border-left: 2px solid var(--copper); font: 500 1.0625rem/1.4 var(--font-display); }

/* ---------- 3 core strengths ---------- */
.ab-strengths { padding: 80px 0 24px; }
.ab-panel { padding: 72px 48px; border-radius: var(--radius); background: var(--sand); color: var(--espresso); }
.ab-panel-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.ab-panel-head p { margin-top: 16px; color: var(--taupe); }
.ab-grid3 { display: grid; grid-template-columns: 1fr minmax(260px, 360px) 1fr; gap: 8px; }
.ab-col { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.ab-feature { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 200px; padding: 28px; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--page); }
.ab-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: var(--bronze); }
.ab-icon svg { width: 18px; height: 18px; }
.ab-feature p { color: var(--taupe); font-size: .9375rem; }
.ab-feature b { display: block; margin-bottom: 4px; font: 500 1.0625rem/1.3 var(--font-display); color: var(--espresso); }
.ab-feature-photo { min-height: 400px; border-radius: var(--radius); background: var(--espresso) url("../img/about/gavel-scales.jpg") 48% center / cover; }

/* ---------- 4 stats ---------- */
.ab-stats { padding: 64px 0; }
.ab-stats .container { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.ab-stat { padding: 0 16px; }
.ab-stat + .ab-stat { border-left: 1px solid var(--stone); }
.ab-stat b { display: block; font: 400 clamp(2.5rem, 1.8rem + 2.4vw, 4rem)/1 var(--font-display); letter-spacing: -0.03em; }
.ab-stat small { display: block; margin-top: 10px; font-size: .9375rem; color: var(--taupe); }

/* ---------- 5 resolution process ---------- */
.ab-process { padding: 56px 0 var(--section); }
.ab-banner {
  display: flex; align-items: center; min-height: 480px; padding: 64px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(250, 248, 243, .95) 28%, rgba(250, 248, 243, 0) 62%), var(--sand) url("../img/about/library-reach.jpg") center 40% / cover;
}
.ab-banner .h2 { max-width: 16ch; }
.ab-banner p:not(.eyebrow) { max-width: 44ch; margin: 16px 0 0; color: var(--taupe); }
.ab-banner .ab-banner-tag { margin-top: 24px; font: 500 1.25rem/1.3 var(--font-display); color: var(--espresso); }
.ab-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.ab-steps li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; gap: 12px; padding-top: 20px; border-top: 1px solid var(--copper); }
.ab-steps b { font: 400 1.75rem/1 var(--font-display); color: var(--copper); }

/* ---------- 6 partners ---------- */
.ab-people { padding: var(--section) 0; background: var(--sand); }
.ab-people-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 40px; }
.ab-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ab-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--radius); background: var(--sand); filter: grayscale(1); transition: filter .6s var(--ease); }
.ab-person:hover img, .ab-person:focus-within img { filter: none; }
@media (hover: none) { .ab-person img { filter: none; } }
.ab-person .ab-h3 { margin-top: 18px; }
.ab-person .ab-h3 a { text-decoration: none; }
.ab-person .ab-h3 a:hover { color: var(--bronze); }
.ab-person p { margin-top: 4px; font-size: .9375rem; color: var(--bronze); }
.ab-people-intro { max-width: 60ch; margin-top: 12px; color: var(--taupe); }
.ab-know { display: inline-block; margin-top: 10px; font-weight: 500; text-decoration: none; }
.ab-know:hover { color: var(--bronze); }
.ab-featured { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; padding: 32px 40px; border-radius: var(--radius); background: var(--page); }
.ab-featured p { max-width: 64ch; margin-top: 6px; color: var(--taupe); }

/* ---------- 7 desks ---------- */
.ab-desks { padding: var(--section) 0 80px; }
.ab-desks-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.ab-desks-head .h2 { max-width: 18ch; }
.ab-row { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 40px; padding: 32px 0; border-top: 1px solid var(--stone); }
.ab-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.ab-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ab-row-top .ab-h3 { font-size: 1.5rem; }
.ab-row-tag { color: var(--copper); font-size: .9375rem; }
.ab-row p { max-width: 70ch; margin-top: 10px; color: var(--taupe); }

/* ---------- 8 CTA banner ---------- */
.ab-cta { padding-bottom: 48px; }
.ab-cta-banner {
  display: flex; align-items: center; min-height: 420px; padding: 64px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(250, 248, 243, .96) 32%, rgba(250, 248, 243, 0) 68%), var(--sand) url("../img/about/consultation.jpg") center / cover;
}
.ab-cta-banner .h2 { max-width: 13ch; }
.ab-cta-banner p:not(.eyebrow) { max-width: 40ch; margin: 16px 0 28px; color: var(--taupe); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .ab-hero { padding-top: 140px; }
  .ab-hero-cards, .ab-forums .container { grid-template-columns: 1fr; }
  .ab-forums .container { gap: 24px; }
  .ab-card-dark { min-height: 0; padding: 40px 32px; }
  .ab-card-photo { min-height: 440px; }
  .ab-grid3 { grid-template-columns: 1fr; }
  .ab-feature-photo { order: -1; min-height: 320px; }
  .ab-col { grid-template-rows: none; }
  .ab-feature { min-height: 0; }
  .ab-people-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .ab-hero { padding: 112px 0 32px; }
  .ab-lede { font-size: 1rem; }
  .ab-card-dark { padding: 32px 24px; }
  .ab-stat-chips { left: 16px; right: 16px; bottom: 16px; }
  .ab-stat-chip b { font-size: 2rem; }
  .ab-forum-list { grid-template-columns: 1fr 1fr; }
  .ab-strengths { padding-top: 48px; }
  .ab-panel { padding: 40px 20px; }
  .ab-stats .container { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .ab-stat:nth-child(3) { border-left: 0; }
  .ab-banner, .ab-cta-banner { align-items: flex-end; padding: 32px 24px; min-height: 380px; }
  .ab-banner { background: linear-gradient(0deg, rgba(250, 248, 243, .96) 55%, rgba(250, 248, 243, 0) 100%), var(--sand) url("../img/about/library-reach.jpg") center 40% / cover; }
  .ab-cta-banner { background: linear-gradient(0deg, rgba(250, 248, 243, .96) 55%, rgba(250, 248, 243, 0) 100%), var(--sand) url("../img/about/consultation.jpg") center / cover; }
  .ab-steps { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .ab-people-grid { gap: 16px 8px; }
  .ab-featured, .ab-desks-head, .ab-people-head { flex-direction: column; align-items: flex-start; }
  .ab-featured { padding: 28px 24px; }
  .ab-row { grid-template-columns: 1fr; gap: 16px; }
  .ab-row-top { flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) { .ab-people-grid { grid-template-columns: 1fr; } }