/* Our Firm. template-our-firm.php
 *
 * Content column ~ the old 2/3 column. Stat cards run wider.
 * Tab bar, hero: section-tabs.css, hero-capability.css.
 * Tokens only from tokens.css, same set section-tabs.css uses.
 */

.hlb-firm {
  --hlb-firm-col: 800px;
  --hlb-firm-wide: 1040px;

  color: var(--hlb-ink);
}

.hlb-firm-section {
  padding: 72px var(--hlb-gutter);
}

.hlb-firm-section + .hlb-firm-section {
  border-top: 1px solid var(--hlb-rule);
}

.hlb-firm-section__inner {
  max-width: var(--hlb-firm-col);
  margin: 0 auto;
}

/* Section heading. Also .hlb-cap-heading, the scroll target in section-tabs.js */
.hlb-firm .hlb-firm-heading {
  margin: 0 0 32px;
  color: var(--hlb-navy);
  font: 400 clamp(26px, 3vw, 34px)/1.15 var(--hlb-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hlb-firm .hlb-firm-lead {
  margin: 0 0 32px;
  color: var(--hlb-turquoise-text);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
}

/* Wysiwyg output */
.hlb-firm-prose {
  font-size: 16px;
  line-height: 1.7;
}

.hlb-firm-prose + .hlb-firm-prose {
  margin-top: 24px;
}

.hlb-firm .hlb-firm-prose > :first-child {
  margin-top: 0;
}

.hlb-firm .hlb-firm-prose > :last-child {
  margin-bottom: 0;
}

.hlb-firm .hlb-firm-prose p {
  margin: 0 0 1.1em;
}

.hlb-firm .hlb-firm-prose h3 {
  margin: 1.8em 0 0.6em;
  color: var(--hlb-navy);
  font: 400 18px/1.3 var(--hlb-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hlb-firm .hlb-firm-prose ul {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
  list-style: disc;
}

.hlb-firm .hlb-firm-prose li {
  margin: 0 0 0.8em;
  padding: 0;
}

.hlb-firm .hlb-firm-prose li::marker {
  color: var(--hlb-turquoise);
}

/* Stat cards */
.hlb-firm .hlb-firm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  width: min(var(--hlb-firm-wide), 100vw - (var(--hlb-gutter) * 2));
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.hlb-firm .hlb-firm-stat {
  margin: 0;
  padding: 40px 24px 36px;
  background: var(--hlb-white);
  box-shadow: 0 6px 20px rgba(8, 53, 88, 0.08);
  text-align: center;
}

.hlb-firm .hlb-firm-stat::before {
  content: none;
}

.hlb-firm-stat__icon {
  display: block;
  margin-bottom: 16px;
}

.hlb-firm-stat__icon img {
  display: block;
  width: auto;
  height: 48px;
  margin: 0 auto;
}

.hlb-firm .hlb-firm-stat__value {
  margin: 0 0 8px;
  color: var(--hlb-navy);
  font: 400 clamp(28px, 2.6vw, 34px)/1.1 var(--hlb-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hlb-firm .hlb-firm-stat__text {
  max-width: 22ch;
  margin: 0 auto;
  color: var(--hlb-turquoise-text);
  font-size: 15px;
  line-height: 1.45;
}

.hlb-firm .hlb-firm-callout {
  margin: 0 0 24px;
  color: var(--hlb-navy);
  font: 400 18px/1.4 var(--hlb-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .hlb-firm .hlb-firm-prose--columns ul {
    columns: 2;
    column-gap: 48px;
  }

  .hlb-firm .hlb-firm-prose--columns li {
    break-inside: avoid;
  }
}

/* History image */
.hlb-firm .hlb-firm-figure {
  margin: 40px 0 0;
}

.hlb-firm-figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 6px 20px rgba(8, 53, 88, 0.12);
}

.hlb-firm-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 699px) {
  .hlb-firm-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hlb-firm .hlb-firm-heading {
    margin-bottom: 24px;
  }

  .hlb-firm .hlb-firm-stats {
    gap: 16px;
    margin-bottom: 40px;
  }
}