/* The practice areas family: /practice-areas (the listing) and the nine detail pages.
   Mobile first. Layout switches at 810px (tablet) and 1200px (desktop), with two small exceptions at 360px and
   1100px; the type scale and page padding are custom properties set once per breakpoint at the top.
   Per-script rules sit at the bottom. */

.page--practice_areas {
  --pa-ink: var(--ink);
  --pa-h1: 40px; --pa-h1-lh: 40px; --pa-h1-ls: -1.6px;
  --pa-h2: 32px; --pa-h2-lh: 35.2px; --pa-h2-ls: -1.28px;
  --pa-h3: 22.4px; --pa-h3-lh: 26.88px; --pa-h3-ls: -0.896px;
  --pa-p: 14.4px; --pa-p-lh: 20.16px;
  --pa-att: 19.2px; --pa-att-lh: 23.04px; --pa-att-ls: -0.768px;
  --pa-step-h3: 17.6px; --pa-step-h3-lh: 21.12px; --pa-step-h3-ls: -0.176px;
  --pa-pad-y: 80px; --pa-pad-x: 24px;
  --pa-img-sz: 342px;
}
@media (min-width: 810px) {
  .page--practice_areas {
    --pa-h1: 52px; --pa-h1-lh: 52px; --pa-h1-ls: -2.08px;
    --pa-h2: 40px; --pa-h2-lh: 44px; --pa-h2-ls: -1.6px;
    --pa-h3: 24.8px; --pa-h3-lh: 29.76px; --pa-h3-ls: -0.992px;
    --pa-p: 16px; --pa-p-lh: 22.4px;
    --pa-att: 20px; --pa-att-lh: 24px; --pa-att-ls: -0.8px;
    --pa-step-h3: 20px; --pa-step-h3-lh: 24px; --pa-step-h3-ls: -0.2px;
    --pa-pad-y: 120px; --pa-pad-x: 48px;
  }
}
@media (min-width: 1200px) {
  .page--practice_areas {
    --pa-h1: 64px; --pa-h1-lh: 64px; --pa-h1-ls: -2.56px;
    --pa-h2: 48px; --pa-h2-lh: 52.8px; --pa-h2-ls: -1.92px;
    --pa-h3: 27.2px; --pa-h3-lh: 32.64px; --pa-h3-ls: -1.088px;
    --pa-pad-y: 140px;
  }
}

.page--practice_areas .main { background: var(--sand); color: var(--ink); }
.page--practice_areas .main > section { position: relative; }

/* ---------------------------------------------------------------- shared type */
.pa-h1, .pa-h2, .pa-h3, .pa-p, .pa-lead {
  margin: 0; white-space: pre-wrap; word-break: break-word; text-align: left;
}
.pa-h1 { font: 400 var(--pa-h1)/var(--pa-h1-lh) var(--serif); letter-spacing: var(--pa-h1-ls); color: #fff; }
.pa-h2 { font: 400 var(--pa-h2)/var(--pa-h2-lh) var(--serif); letter-spacing: var(--pa-h2-ls); color: var(--ink); }
.pa-h3 { font: 400 var(--pa-h3)/var(--pa-h3-lh) var(--serif); letter-spacing: var(--pa-h3-ls); color: var(--ink); }
.pa-lead { font: 400 var(--pa-h3)/var(--pa-h3-lh) var(--serif); letter-spacing: var(--pa-h3-ls); color: var(--ink); }
.pa-p { font: 400 var(--pa-p)/var(--pa-p-lh) var(--sans); color: var(--ink); }
.pa-label {
  display: block; font: 400 14px/16.8px var(--sans); letter-spacing: 0.42px; text-transform: uppercase;
  color: var(--ink); white-space: pre;
}
.pa-label--wrap { white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------- hero */
.pa-hero { position: relative; z-index: 0; display: flex; align-items: flex-end; height: 300px; }
/* The hero photograph starts 5 percent larger and settles (the chrome's hero-zoom), and the page must not pan sideways meanwhile.
   The clip sits on <main>, not on the hero, so the hero's own text is never inside a clipped box (parallax moves it past
   the hero's edge while scrolling). Vertical overflow stays visible. */
.page--practice_areas main { overflow-x: clip; }
.pa-hero__bg {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  flex: 1 0 0; max-width: 100%; height: 100%; padding: 160px 24px 32px;
}
.pa-hero--detail .pa-hero__bg { padding-bottom: 24px; }
.pa-hero__media { position: absolute; inset: 0; }
.pa-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.pa-hero__content {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; align-items: flex-end;
  justify-content: center; width: 100%; max-width: 1000px;
}
.pa-hero--detail .pa-hero__content { gap: 10px; }
.pa-hero__title { width: 100%; }
.pa-hero__title--detail { display: flex; flex-direction: column; gap: 24px; justify-content: center; align-items: center; }
.pa-hero__title--detail > .pa-h1 { width: 100%; }
.pa-hero__lead { width: 100%; }
.pa-hero__lead .pa-p { color: #fff; font-size: 14.4px; line-height: 20.16px; }
.pa-hero__darken { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 100%); pointer-events: none; }
.pa-hero__blur {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(0,0,0) 90%); mask-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(0,0,0) 90%);
}
/* From 360px to 379.98px the detail hero headline scales with the viewport width (between 34px and 40px) so long titles fit */
@media (min-width: 360px) and (max-width: 379.98px) { .pa-hero--detail .pa-h1 { font-size: clamp(34px, 10.2vw, 40px); line-height: 1; letter-spacing: -0.04em; } }
/* two headline words (UNSET_WORDS in template.py: a long hyphenated English word, a 13 letter Spanish one) may break across lines below 360px; from 360px up they stay whole in English and Spanish */
.pa-h1 .w.w--u { white-space: unset; }
@media (min-width: 360px) { :root:is([lang="en"], [lang="es"]) .pa-h1 .w.w--u { white-space: nowrap; } }
/* the headline arrives letter by letter, as a CSS animation that starts at first paint; --w (word index) and --n (letter index)
   set each letter's delay and are numbered below for up to 10 words and 18 letters per word */
.pa-h1 .w { display: inline; white-space: nowrap; }
.pa-h1 .c, .pa-h1 .u { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .pa-h1 .c, .pa-h1 .u { animation: pa-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--w, 0) * 130ms + var(--n, 0) * 24ms + 120ms); }
  @keyframes pa-in { from { opacity: 0.001; filter: blur(6px); transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: none; } }
  .pa-h1 > :nth-child(2) { --w: 1; }
  .pa-h1 > :nth-child(3) { --w: 2; }
  .pa-h1 > :nth-child(4) { --w: 3; }
  .pa-h1 > :nth-child(5) { --w: 4; }
  .pa-h1 > :nth-child(6) { --w: 5; }
  .pa-h1 > :nth-child(7) { --w: 6; }
  .pa-h1 > :nth-child(8) { --w: 7; }
  .pa-h1 > :nth-child(9) { --w: 8; }
  .pa-h1 > :nth-child(10) { --w: 9; }
  .pa-h1 .c:nth-child(2) { --n: 1; }
  .pa-h1 .c:nth-child(3) { --n: 2; }
  .pa-h1 .c:nth-child(4) { --n: 3; }
  .pa-h1 .c:nth-child(5) { --n: 4; }
  .pa-h1 .c:nth-child(6) { --n: 5; }
  .pa-h1 .c:nth-child(7) { --n: 6; }
  .pa-h1 .c:nth-child(8) { --n: 7; }
  .pa-h1 .c:nth-child(9) { --n: 8; }
  .pa-h1 .c:nth-child(10) { --n: 9; }
  .pa-h1 .c:nth-child(11) { --n: 10; }
  .pa-h1 .c:nth-child(12) { --n: 11; }
  .pa-h1 .c:nth-child(13) { --n: 12; }
  .pa-h1 .c:nth-child(14) { --n: 13; }
  .pa-h1 .c:nth-child(15) { --n: 14; }
  .pa-h1 .c:nth-child(16) { --n: 15; }
  .pa-h1 .c:nth-child(17) { --n: 16; }
  .pa-h1 .c:nth-child(18) { --n: 17; }
}
@media (min-width: 810px) {
  .pa-hero__img { object-position: 50% 50%; }
  .pa-hero { height: 500px; }
  .pa-hero--detail { height: 400px; }
  .pa-hero__bg { padding: 160px 48px 48px; }
  .pa-hero--detail .pa-hero__bg { padding-bottom: 64px; }
  .pa-hero__content { flex-direction: row; gap: 48px; }
  .pa-hero--detail .pa-hero__content { gap: 48px; }
  .pa-hero__title { flex: 2 0 0; width: auto; }
  .pa-hero__title--detail { flex: 2 0 0; }
  .pa-hero__lead { flex: 1 0 0; width: auto; }
  .pa-hero__lead .pa-p { font-size: 16px; line-height: 22.4px; }
}
@media (min-width: 1200px) {
  .pa-hero--detail { height: 500px; }
  .pa-hero__bg { padding-bottom: 64px; }
  .pa-hero__content, .pa-hero--detail .pa-hero__content { gap: 64px; }
}

/* ---------------------------------------------------------------- the listing */
.pa-list { padding: 80px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--sand); }
.pa-list__content { width: 100%; max-width: 1400px; display: flex; flex-direction: column; gap: 48px; align-items: center; justify-content: center; }
.pa-head { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.pa-head__label { display: flex; flex-direction: column; justify-content: center; padding-top: 4px; gap: 10px; }
.pa-rows { width: 100%; display: flex; flex-direction: column; gap: 64px; justify-content: center; }
.pa-rowwrap { display: flex; flex-direction: column; gap: 64px; align-items: center; width: 100%; }
.pa-row { width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.pa-row__img { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; flex: 0 0 auto; }
.pa-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.pa-row__text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow: clip; }
.pa-row__nb { width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; justify-content: flex-start; flex: 0 0 auto; overflow: clip; }
.pa-row__text .pa-h3 { font-size: 22.4px; line-height: 26.88px; }
.pa-row__text > *, .pa-row__nb > * { width: 100%; }
.pa-row__pa { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.pa-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; justify-content: flex-start; padding-bottom: 24px; width: 100%; }
.pa-pill {
  display: flex; align-items: center; max-width: 100%; padding: 4px 8px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.62); cursor: default; flex: 0 0 auto;
}
.pa-pill__t {
  display: block; font: 400 14px/16.8px var(--sans); letter-spacing: 0.42px; text-transform: uppercase; color: var(--ink);
  white-space: normal; overflow-wrap: break-word; text-wrap: wrap;
}
.pa-btn {
  position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; max-width: 100%;
  background: #fff; border-radius: 2px; overflow: hidden; color: var(--ink); flex: 0 0 auto;
}
.pa-btn__c { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; max-width: 100%; padding: 12px 16px; gap: 10px; }
.pa-btn__t {
  display: block; font: 400 16px/19.2px var(--sans); letter-spacing: 0.64px; text-transform: uppercase; text-align: center;
  color: var(--ink); white-space: normal; text-wrap: wrap; flex: 0 0 auto; max-width: 100%;
}
.pa-btn__t--roll { display: none; }
.pa-btn__arrow { position: relative; z-index: 1; flex: 0 0 auto; width: 16px; height: 16px; }
.pa-arrow { display: block; overflow: hidden; aspect-ratio: 1 / 1; }
.pa-arrow path:nth-child(1) { stroke: var(--ink); }
.pa-divider { width: 100%; height: 1px; background: var(--ink-10); flex: 0 0 auto; }

@media (min-width: 810px) {
  .pa-list { padding: 120px 48px; }
  .pa-list__content { gap: 64px; }
  .pa-head { flex-direction: row; gap: 128px; align-items: flex-start; }
  .pa-head__label { flex: 1 0 0; }
  .pa-head > .pa-h2 { flex: 2 0 0; }
  .pa-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 128px 64px; }
  .pa-rowwrap { align-items: flex-start; }
  .pa-rowwrap > .pa-divider { display: none; }
  .pa-row__text .pa-h3 { font-size: 24.8px; line-height: 29.76px; }
  .pa-row__pa { flex: 0 0 auto; }
  .pa-btn, .pa-btn__c { min-height: 52px; }
  .pa-btn__c { padding: 12px 32px; }
  .pa-btn__arrow { position: absolute; top: 26px; right: -19px; width: 19px; height: 19px; transform: translateY(-9.5px); }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  /* on tablet widths each row's bio is clamped to three lines */
  .pa-row__text .pa-p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: clip; white-space: pre-line; }
}
@media (min-width: 1200px) {
  .pa-list { padding: 180px 48px; }
  .pa-head__label { flex: 1 0 0; }
  .pa-rows { display: flex; flex-direction: column; gap: 64px; justify-content: center; align-items: flex-start; }
  .pa-rowwrap { align-items: center; }
  .pa-rowwrap > .pa-divider { display: block; }
  .pa-row { flex-direction: row; gap: 48px; justify-content: center; }
  .pa-row__img { flex: 1.5 0 0; width: auto; }
  .pa-row__text { flex: 1 0 0; align-self: stretch; justify-content: space-between; min-height: 0; }
  .pa-row__nb { flex: 1 0 0; justify-content: space-between; gap: 0; min-height: 0; }
  .pa-row__text .pa-h3 { font-size: 27.2px; line-height: 32.64px; }
  .pa-row__pa { flex: 3 0 0; align-self: stretch; align-items: flex-end; justify-content: space-between; }
  .pa-pills { padding-bottom: 0; }
}

/* ---------------------------------------------------------------- the four steps */
.pa-steps { counter-reset: pa-step; padding: 0 24px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sand); }
.pa-steps__row { width: 100%; display: flex; flex-direction: column; gap: 48px; justify-content: center; }
.pa-steps__media { position: relative; z-index: 1; width: 100%; aspect-ratio: 0.777625 / 1; }
.pa-steps__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pa-steps__col { display: flex; align-items: center; max-width: 100%; }
.pa-steps__inner { display: flex; flex-direction: column; gap: 8px; justify-content: center; max-width: 500px; width: 100%; }
.pa-steps__list { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
.pa-step-wrap { width: 100%; }
.pa-step {
  counter-increment: pa-step; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 420px;
  padding: 36px 0 48px;
}
.pa-step__n { font: 400 40px/40px var(--serif); letter-spacing: -1.6px; color: rgba(13, 22, 38, 0.1); text-align: right; white-space: pre; }
.pa-step__n::after { content: counter(pa-step, decimal-leading-zero); display: block; }
.pa-step__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pa-step__h { margin: 0; font: 400 var(--pa-step-h3)/var(--pa-step-h3-lh) var(--sans); letter-spacing: var(--pa-step-h3-ls); color: var(--ink); text-align: left; text-wrap: balance; }
.pa-step__p { margin: 0; font: 400 var(--pa-p)/var(--pa-p-lh) var(--sans); color: var(--ink); text-align: left; text-wrap: balance; }
.pa-step__p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
@media (min-width: 810px) {
  .pa-steps { padding: 0 0 120px; }
  .pa-steps__row { flex-direction: row; gap: 48px; align-items: flex-start; }
  .pa-steps__media { position: sticky; top: 0; flex: 2 0 0; width: auto; height: 100vh; aspect-ratio: auto; }
  .pa-steps__col { flex: 1 0 0; padding: 120px 48px 72px 0; }
  .pa-steps__inner { flex: 1 0 0; gap: 16px; }
  .pa-step__n { font-size: 52px; line-height: 52px; letter-spacing: -2.08px; }
}
@media (min-width: 1200px) {
  .pa-steps { padding-bottom: 180px; }
  .pa-steps__row { gap: 96px; }
  .pa-steps__col { padding: 140px 48px 92px 0; }
  .pa-steps__inner { gap: 24px; }
  .pa-step__n { font-size: 64px; line-height: 64px; letter-spacing: -2.56px; }
}

/* ---------------------------------------------------------------- a detail page */
.pa-detail { display: flex; align-items: flex-end; background: var(--sand); }
.pa-detail__c {
  flex: 1 0 0; max-width: 100%; display: flex; flex-direction: column; gap: 48px; justify-content: flex-end; align-items: center;
  padding: 80px 24px; background: var(--sand);
}
.pa-cols { position: relative; z-index: 2; width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 48px; justify-content: center; }
.pa-main { display: flex; flex-direction: column; gap: 24px; justify-content: center; align-items: flex-start; }
.pa-lead-wrap { max-width: 800px; display: flex; flex-direction: column; width: 100%; }
.pa-body { max-width: 600px; width: 100%; display: flex; flex-direction: column; white-space: pre-wrap; word-break: break-word; }
.pa-body .pa-p + .pa-p { margin-top: 20px; }
.pa-side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: center; }
.pa-side__h { max-width: 800px; width: 100%; display: flex; flex-direction: column; }
.pa-side__list { width: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start; padding-top: 10px; }
.pa-side__a { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; color: var(--ink); cursor: pointer; }
.pa-side__row { display: flex; gap: 8px; justify-content: center; align-items: center; width: 100%; }
.pa-side__l { flex: 1 0 0; display: block; font: 400 14px/16.8px var(--sans); letter-spacing: 0.42px; text-transform: uppercase; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.pa-side__row .pa-arrow { width: 12px; height: 12px; flex: 0 0 auto; }
.pa-side__a .pa-divider { z-index: 1; }

.pa-resp { position: relative; z-index: 2; width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 12px; justify-content: flex-start; align-items: flex-start; }
.pa-resp__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-content: center; }
.pa-att { display: flex; gap: 10px; align-items: center; align-self: start; color: var(--ink); cursor: pointer; min-width: 0; }
.pa-att__card {
  flex: 1 0 0; display: flex; gap: 48px; align-items: center; padding: 12px 48px 12px 12px; background: var(--cream); border-radius: 4px; overflow: hidden; min-width: 0;
}
.pa-att__photo { position: relative; flex: 0 0 auto; width: 80px; height: 80px; aspect-ratio: 1 / 1; border-radius: 2px; overflow: hidden; }
.pa-att__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 63.7% 14.6%; border-radius: 2px; }
.pa-att__photo--empty {
  background-repeat: repeat; background-position: left top; background-size: 64px;
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22126%22 height=%22126%22><path id=%22a%22 d=%22M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z%22 fill=%22rgb(136, 136, 136, 0.2)%22 fill-rule=%22evenodd%22/></svg>");
}
.pa-att__tw { flex: 1 0 0; align-self: stretch; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start; min-width: 0; }
.pa-att__nt { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-start; overflow: clip; width: 100%; }
.pa-att__l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: visible; overflow-y: clip; }
.pa-att__name { margin: 0; font: 400 14px/16.8px var(--sans); letter-spacing: 0.42px; text-transform: uppercase; color: var(--ink); text-align: left; white-space: pre; }
.pa-att__for { margin: 0; font: 400 var(--pa-att)/var(--pa-att-lh) var(--serif); letter-spacing: var(--pa-att-ls); color: var(--ink); text-align: left; white-space: pre-line; word-break: break-word; }

.pa-focus { padding: 80px 24px; display: flex; flex-direction: column; gap: 24px; justify-content: center; align-items: center; background: var(--navy); overflow: hidden; }
.pa-focus__c { width: 100%; max-width: 1400px; display: flex; flex-direction: column; gap: 48px; justify-content: center; align-items: center; }
.pa-focus .pa-head > .pa-h2 { flex: 1 0 0; }
.pa-focus .pa-label, .pa-focus .pa-h2 { color: #fff; }
.pa-focus__lower { position: relative; width: 100%; display: flex; flex-direction: column; gap: 16px; padding-top: 24px; justify-content: center; }
.pa-focus__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #fff; z-index: 1; }
.pa-focus__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 16px 32px; justify-content: center; }
.pa-focus__grid--ghost { grid-template-rows: repeat(10, 1fr); }
.pa-focus__item { display: flex; gap: 10px; align-items: center; align-self: start; }
.pa-focus__t { flex: 1 0 0; display: block; font: 400 var(--pa-h3)/var(--pa-h3-lh) var(--serif); letter-spacing: var(--pa-h3-ls); color: #fff; white-space: pre-wrap; word-break: break-word; }

@media (min-width: 810px) {
  .pa-detail__c { padding: 120px 48px; }
  .pa-cols { flex-direction: row; gap: 48px; align-items: flex-start; }
  .pa-main { flex: 2 0 0; }
  .pa-side { flex: 1 0 0; }
  .pa-resp { flex-direction: row; gap: 24px; }
  .pa-resp__grid { flex: 1 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-focus { padding: 120px 48px; }
  .pa-focus__c { gap: 64px; }
  .pa-focus .pa-head__label { flex: 0.5 0 0; }
  .pa-focus__lower { flex-direction: row; gap: 64px; padding-top: 48px; align-items: flex-start; }
  .pa-focus__grid { flex: 1 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-focus__grid--ghost { grid-template-rows: repeat(5, 1fr); }
}
@media (min-width: 1100px) {
  .pa-resp__grid { flex: 0 0 auto; }
}
@media (min-width: 1200px) {
  .pa-detail__c { padding: 140px 48px; }
  .pa-cols { gap: 96px; }
  .pa-main { flex: 2.5 0 0; }
  .pa-resp { flex-direction: column; gap: 24px; }
  .pa-resp__grid { flex: 0 0 auto; }
  .pa-focus { padding: 140px 48px; }
}

/* ---------------------------------------------------------------- per script (text direction and alignment) */
.page--practice_areas :is(.pa-lead, .pa-h1, .pa-h2, .pa-h3, .pa-p, .pa-att__name, .pa-att__for, .pa-step__h, .pa-step__p, .pa-focus__t) { text-align: left; }
[dir="rtl"] .page--practice_areas :is(.pa-lead, .pa-h1, .pa-h2, .pa-h3, .pa-p, .pa-att__name, .pa-att__for, .pa-step__h, .pa-step__p, .pa-focus__t) { text-align: right; }
.page--practice_areas .pa-pill__t, .page--practice_areas .pa-label, .page--practice_areas .pa-side__l { text-align: start; }
/* Farsi faces, line boxes and the Hindi / Punjabi / Chinese tracking come from the per-language block at the top of families/_chrome/style.css. */

/* Scroll reveals (chrome data-reveal="fade"): the chrome's reveal transition would replace the hover transform transition of
   the sidebar links, so the two are written together here. The four steps wait at 70 percent opacity rather than fully hidden. */
html.js .pa-side__a[data-reveal="fade"].is-in { transition: opacity .35s var(--reveal-ease) var(--reveal-delay, 0s), transform 0.3s cubic-bezier(0.44, 0, 0.56, 1); }
html.js .pa-step[data-reveal="fade"]:not(.is-in) { opacity: .7; }
/* Timing after the row or step enters the screen: a listing row waits .55 s, then fades in over .7 s; a step goes from .7 to 1
   opacity over .7 s after a .06 s delay. Everything else keeps the chrome's default fade. */
html.js .pa-rowwrap[data-reveal="fade"].is-in { transition: opacity .7s var(--reveal-ease) .55s; }
html.js .pa-step[data-reveal="fade"].is-in { transition: opacity .7s var(--reveal-ease) .06s; }
/* The detail pages' text blocks wait until half of them is on screen (the chrome's observer fires at the first pixel, which is
   too early here), then fade in over .35 s. Same look as data-reveal="fade"; the observer is script.js. */
html.js [data-pa-reveal] { opacity: .001; }
html.js [data-pa-reveal].is-in { opacity: 1; transition: opacity .35s var(--reveal-ease); }
/* hover (pointer devices, tablet and desktop): the button's label slides 16px left and its arrow slides in; a sidebar link slides 10px */
.pa-btn__t, .pa-btn__arrow, .pa-side__a { transition: transform 0.3s cubic-bezier(0.44, 0, 0.56, 1); }
@media (hover: hover) {
  .pa-side__a:hover { transform: translateX(10px); }
}
@media (hover: hover) and (min-width: 810px) {
  .pa-btn:hover .pa-btn__t { transform: translateX(-16px); }
  /* the label rolls: a second copy takes the first one's place while the first slides away */
  .pa-btn:hover .pa-btn__t--roll { display: block; position: absolute; left: 32px; top: 50%; width: auto; max-width: calc(100% - 64px); transform: translateY(-50%); }
  .pa-btn:hover .pa-btn__arrow { transform: translate(-35px, -9.5px); }
}