/* Schapiro LLP v9 — the firm */

/* ---------- Page hero: the long positioning line gets a wider measure ---------- */
.page-the-firm .page-hero h1 {
  font-size: clamp(40px, 4.8vw, 76px);
  line-height: 1.02;
  max-width: 24ch;
}

/* ---------- Who we are ---------- */
.who__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.who__head {
  grid-column: 1 / span 5;
  position: sticky; top: 120px;
  margin-bottom: 0;
}
.who__head h2 { font-size: clamp(40px, 4.4vw, 68px); color: var(--navy); }
.who__copy {
  grid-column: 7 / span 6;
  padding-top: clamp(8px, 1vw, 16px);
}
.who__lede {
  max-width: 34ch;
  font: 400 clamp(25px, 2.25vw, 33px)/1.32 var(--serif);
  letter-spacing: -.01em;
  color: var(--navy);
  text-wrap: pretty;
}
.who__para {
  max-width: 54ch;
  margin-top: 1.2em;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.7;
  color: var(--ink-body);
}
.who__lede + .who__para {
  margin-top: clamp(36px, 3.6vw, 52px);
  padding-top: clamp(28px, 2.8vw, 40px);
  border-top: 1px solid var(--rule);
}

/* ---------- Motto: full-width pull quote ---------- */
.firm-motto {
  position: relative;
  margin: clamp(104px, 12vw, 184px) 0 clamp(96px, 11vw, 168px);
  padding-top: clamp(40px, 4.4vw, 64px);
}
.firm-motto::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 72px; height: 1px;
  background: var(--orange);
  transform-origin: left center;
}
.firm-motto p {
  max-width: 25ch;
  font: 400 clamp(36px, 4.6vw, 60px)/1.1 var(--serif);
  letter-spacing: -.018em;
  color: var(--navy);
  text-wrap: balance;
}
.firm-motto cite {
  display: block;
  margin-top: clamp(32px, 3.4vw, 48px);
  font: 600 11px/1.5 var(--ui); font-style: normal;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* Motto reveal: the hairline draws, then words fade up as a group (no mask
   rise, which reads too theatrical for a quotation). Uses main.js data-split. */
html.js .firm-motto::before { transform: scaleX(0); transition: transform 1.2s var(--ease); }
html.js .firm-motto:has(.is-in)::before { transform: none; }
html.js .firm-motto [data-split] .w__i {
  transform: translate3d(0, .18em, 0);
  opacity: 0; filter: blur(5px);
  transition:
    opacity 1.3s var(--ease) calc(var(--wd, 0s) * .7 + .25s),
    transform 1.3s var(--ease) calc(var(--wd, 0s) * .7 + .25s),
    filter 1.3s var(--ease) calc(var(--wd, 0s) * .7 + .25s);
}
html.js.ready .firm-motto [data-split].is-in .w__i { opacity: 1; transform: none; filter: none; }
html.still .firm-motto::before { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js .firm-motto::before { transform: none !important; }
}

/* ---------- Pillars: ruled 3-up ledger ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}
.pillar {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(36px, 3.6vw, 52px) clamp(20px, 2.6vw, 44px) clamp(44px, 4.4vw, 64px);
}
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; }
.pillar + .pillar { border-left: 1px solid var(--rule); }
.pillar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease);
}
.pillar + .pillar::before { left: 0; }
.pillar:hover::before { transform: scaleX(1); }
.pillar .num {
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--ink-muted);
  margin-bottom: clamp(40px, 4.4vw, 64px);
}
.pillar:hover .num { color: var(--orange); }
.pillar h3 {
  font-size: clamp(25px, 2.1vw, 31px);
  line-height: 1.12;
  color: var(--navy);
  max-width: 16ch;
}
.pillar p {
  margin-top: 18px;
  max-width: 38ch;
  font-size: 17.5px; line-height: 1.7;
  color: var(--ink-body);
}

/* ---------- Offices: three address plates on navy ---------- */
.offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.office {
  position: relative;
  display: flex; flex-direction: column;
  min-height: clamp(300px, 28vw, 400px);
  padding: clamp(36px, 4vw, 60px);
  border: 1px solid var(--rule-dark-strong);
  transition: border-color .45s var(--ease);
}
.office::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid var(--rule-dark);
  transition: border-color .8s var(--ease);
}
.office:hover, .office:hover::before { border-color: rgba(194, 208, 218, .42); }
.office h3 {
  margin-top: auto;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1;
  color: var(--dark-head);
}
.office p {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-dark);
  font-size: 18px; line-height: 1.65;
  color: var(--dark-body);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .who__head { grid-column: 1 / -1; position: static; margin-bottom: clamp(40px, 6vw, 64px); }
  .who__copy { grid-column: 1 / -1; padding-top: 0; }
  .who__lede { max-width: 38ch; }
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; border-bottom: 0; }
  .pillar, .pillar:first-child, .pillar:last-child { padding: clamp(32px, 6vw, 44px) 0; border-bottom: 1px solid var(--rule); }
  .pillar + .pillar { border-left: 0; }
  .pillar .num { margin-bottom: 24px; }
  .pillar h3 { max-width: 24ch; }
}
@media (max-width: 1080px) {
  .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .offices { grid-template-columns: 1fr; }
  .office { min-height: 260px; }
}
@media (max-width: 600px) {
  .page-the-firm .page-hero h1 { font-size: clamp(36px, 10vw, 48px); }
}