/* ==========================================================================
   The Advocate Path: the practice pages (12 pages, one template: src/content/<Area>.tsx, .pg-practice; shared parts
   src/components/PracticeParts.tsx) and /practice-areas (src/content/PracticeAreas.tsx, .pg-areas).
   Plan: briefs/redesign-2026-10/theadvocatepath/ART-DIRECTION.md section 5. Hooks kept: #match, #before-you-call,
   #pa-questions, #paFaq #pq0-3 (collapse), #paForm (LeadForm), .sticky-aside, the h2 ids of the guide, the 12 .pa-item
   ids and the tabs #tab-* / #pane-* on /practice-areas.
   ========================================================================== */

/* ==== head: crumbs, title, lede, actions; the area's photo in a circle on the oxblood crescent ================== */
.pg-practice .pa-head { overflow: clip; padding: clamp(24px, 2.6vw, 40px) 0 clamp(56px, 5vw, 80px); }
.pa-head-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--gutter);
  align-items: start;
}
.pa-head-grid > .pa-crumbs, .pa-head-grid > h1, .pa-head-grid > .lede, .pa-head-grid > .pa-actions { grid-column: 1 / span 7; }
.pg-practice .pa-head h1 { max-width: 13.5em; }
.pa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: clamp(26px, 2.6vw, 36px); }

/* the art: an oxblood disc (bleeding off the right edge and up under the header) with the photo circle inside it,
   offset down-left so the oxblood shows as a crescent rim; a brass ring 12 px outside the photo; the file stamp (line
   drawing and Courier number) on the oxblood beside it */
.pa-art { grid-column: 8 / span 5; grid-row: 1 / span 4; position: relative; align-self: center; width: 100%; aspect-ratio: 1; margin: -6px 0 0; }
.pa-disc { position: absolute; top: -21%; left: 13%; width: 126%; aspect-ratio: 1; border-radius: 50%; background: var(--ox); }
.pa-portrait { position: absolute; top: 15%; left: 17%; width: 68%; aspect-ratio: 1; border-radius: 50%; }
.pa-portrait::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--brass); border-radius: 50%; pointer-events: none; }
.pa-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 40%; }
.pa-stamp {
  position: absolute;
  top: 21%;
  right: -1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  max-width: none;
  color: var(--brass-light);
  font: 400 var(--text-meta) / 1.25 var(--font-label);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.pa-stamp span { max-width: 5.6em; }
.pa-stamp::after { content: ""; width: 1px; height: 64px; background: var(--brass); }
.pa-stamp .pa-icon { width: 46px; height: 46px; color: var(--parchment); stroke-width: 1.25; }

/* ==== the four facts on a white strip, each under a short ribbon tab ============================================ */
.pa-facts-band { position: relative; z-index: 1; }
.pa-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line-hair);
}
.pa-facts li { position: relative; display: flex; flex-direction: column; gap: 4px; max-width: none; padding: 30px 26px 24px 54px; }
.pa-facts li + li { border-left: 1px solid var(--line-hair); }
.pa-facts li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 24px;
  width: 14px;
  height: 36px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%);
}
.pa-facts strong { color: var(--ink-text); font: 700 18px / 1.25 var(--font-heading); }
.pa-facts span { color: var(--muted-text); font-size: 15px; line-height: 1.5; }

/* ==== body: the guide (8 columns) beside the sticky request card and the other areas (4 columns) ================= */
.pg-practice .pa-body { padding: clamp(56px, 5.4vw, 88px) 0 clamp(64px, 6vw, 104px); }
.pa-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.pa-main { grid-column: 1 / span 8; min-width: 0; }
.pa-aside { grid-column: 9 / span 4; align-self: stretch; padding-left: clamp(0px, 2vw, 28px); }

/* situations we match for: a white ribbon file card, the situations in two columns with ribbon ticks */
.pg-practice .pa-covers.card-sheet {
  position: relative;
  margin: 0 0 clamp(40px, 4vw, 56px);
  padding: clamp(36px, 3.6vw, 48px) clamp(24px, 3.4vw, 48px) clamp(28px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--line-hair);
}
.pg-practice .pa-covers.card-sheet::before {
  content: "";
  position: absolute;
  top: -7px;
  left: clamp(24px, 3.4vw, 48px);
  width: var(--ribbon-w);
  height: 48px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch)), 0 100%);
}
.pa-covers h2 { margin: 0 0 12px; font-size: clamp(28px, 1.1vw + 20px, 36px); line-height: 1.1; }
.pa-covers > p { margin: 0 0 26px; max-width: 34em; font-size: var(--text-lede); line-height: 1.55; }
.pg-practice .pa-covers .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; border-top: 1px solid var(--brass); }
.pg-practice .pa-covers .check-grid li { max-width: none; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line-hair); font-size: 16px; line-height: 1.5; }
.pg-practice .pa-covers .check-grid li::before {
  content: "";
  left: 2px;
  top: 19px;
  width: 9px;
  height: 13px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

/* the contents: a card on the parchment (hairline edge, no fill) marked by an oxblood ribbon over its top edge; the
   Courier head beside the ribbon, two columns of entries with their numbers */
.pg-practice .pa-toc {
  position: relative;
  margin: 0 0 clamp(44px, 4.4vw, 64px);
  padding: 26px clamp(20px, 3vw, 36px) 14px;
  border: 1px solid var(--line-hair);
  border-top: 1px solid var(--brass);
}
.pg-practice .pa-toc::before {
  content: "";
  position: absolute;
  top: -7px;
  left: clamp(20px, 3vw, 36px);
  width: var(--ribbon-w);
  height: 40px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch)), 0 100%);
}
.pg-practice .pa-toc h4 { margin: 0 0 12px; padding-left: calc(var(--ribbon-w) + 14px); color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.pg-practice .pa-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.pg-practice .pa-toc li { max-width: none; border-bottom: 1px solid var(--line-hair); }
.pg-practice .pa-toc a { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; color: var(--ink-text); font-size: 17px; line-height: 1.4; text-decoration: none; }
.pg-practice .pa-toc a:hover { color: var(--ox); }
.pa-toc-no { flex: none; width: 1.6em; color: var(--brass-ink); font: 400 var(--text-meta) / 1 var(--font-label); letter-spacing: 0.06em; }
.pa-toc-no::before { content: "0"; }

/* the guide: Caslon at reading size and measure; each section number in a small oxblood ribbon before its title */
.pg-practice .pa-article { max-width: 40em; }
.pg-practice .pa-article p, .pg-practice .pa-article li { font-size: var(--text-body); line-height: 1.72; max-width: 36em; }
.pg-practice .pa-article p { margin: 0 0 1.1em; }
.pg-practice .pa-article ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.pg-practice .pa-article ul li { position: relative; padding: 0 0 0.45em 26px; }
.pg-practice .pa-article ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.48em;
  width: 9px;
  height: 13px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.pg-practice .pa-main h2 { position: relative; font-size: clamp(27px, 0.9vw + 21px, 34px); line-height: 1.14; text-wrap: balance; }
.pg-practice .pa-article h2 { margin: 1.7em 0 0.6em; padding-left: 48px; }
.pg-practice .pa-article h2:first-child { margin-top: 0; }
.pg-practice .pa-no {
  position: absolute;
  left: 0;
  top: -6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 28px;
  height: 46px;
  padding-bottom: 12px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
  color: var(--parchment);
  font: 400 var(--text-meta) / 1 var(--font-label);
  letter-spacing: 0.04em;
}

/* before you call: a ruled legal pad (pale parchment leaf, an oxblood double margin rule, Courier numbers in the
   margin, an oxblood binding strip along its top) */
.pg-practice .pa-checklist.card-sheet {
  --pad-margin: 104px;
  position: relative;
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: 34px clamp(20px, 3vw, 40px) 30px 0;
  background:
    linear-gradient(90deg, transparent var(--pad-margin), var(--ox) var(--pad-margin), var(--ox) calc(var(--pad-margin) + 1px), transparent calc(var(--pad-margin) + 1px), transparent calc(var(--pad-margin) + 4px), var(--ox) calc(var(--pad-margin) + 4px), var(--ox) calc(var(--pad-margin) + 5px), transparent calc(var(--pad-margin) + 5px)),
    #F7EEE8;
  border: 1px solid var(--line-hair);
  border-top: 10px solid var(--ox);
}
.pg-practice .pa-checklist h2 { margin: 0 0 10px; padding: 0 12px 0 calc(var(--pad-margin) + 28px); font-size: clamp(25px, 0.8vw + 19.6px, 31px); }
.pg-practice .pa-checklist h2 .pa-no { left: calc(var(--pad-margin) - 46px); top: -6px; }
.pg-practice .pa-checklist > p { margin: 0 0 22px; padding-left: calc(var(--pad-margin) + 28px); max-width: none; color: var(--muted-text); font-size: 16px; line-height: 1.6; }
.pa-gather { margin: 0; padding: 0; list-style: none; border-top: 1px solid #DCC9BF; }
.pa-gather li {
  display: grid;
  grid-template-columns: var(--pad-margin) minmax(0, 1fr);
  column-gap: 28px;
  align-items: baseline;
  max-width: none;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid #DCC9BF;
  font-size: 17px;
  line-height: 1.5;
}
.pa-gather-no { padding-right: 20px; color: var(--ox); font: 400 14px / 1 var(--font-label); letter-spacing: 0.08em; text-align: right; }

/* the note: a ribbon-bound line in Caslon italic */
.pg-practice .pa-main .callout {
  position: relative;
  margin: clamp(32px, 3vw, 44px) 0;
  padding: 18px 24px 18px 52px;
  background: var(--white);
  border: 1px solid var(--line-hair);
}
.pg-practice .pa-main .callout::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;
  width: 14px;
  height: calc(100% + 8px);
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
}
.pg-practice .pa-main .callout p { margin: 0; font: italic 400 clamp(18px, 0.3vw + 16.6px, 20px) / 1.5 var(--font-body); color: var(--ink-text); }

/* the questions */
.pg-practice .pa-questions { margin-top: clamp(56px, 5.6vw, 80px); }
.pg-practice .pa-questions h2 { margin: 0 0 24px; padding-left: 48px; }

/* ==== aside: the oxblood request card, then the other areas with their line drawings ============================ */
.pg-practice .pa-aside .sticky-aside { padding-top: 7px; }
.pa-list h4 { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--brass); color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.pa-list ol { margin: 0; padding: 0; list-style: none; }
.pa-list li { max-width: none; border-bottom: 1px solid var(--line-hair); }
.pa-list a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 0; color: var(--ink-text); font-size: 16px; line-height: 1.3; text-decoration: none; transition: color 0.18s ease, padding 0.18s ease; }
.pa-list a:hover { color: var(--ox); padding-left: 4px; }
.pg-practice .pa-list svg.pa-icon { display: block !important; width: 24px; height: 24px; flex: none; }

/* ==== #match: the request form on the oxblood curve (home section 8 classes), the next steps on the oxblood ======= */
.pg-practice .pa-match { padding: var(--section) 0 calc(var(--section) + 16px); overflow: clip; isolation: auto; background: transparent; }
/* no isolated layer of its own (a hairline seam showed along its edges in the captures): the curve sits at the bottom of
   the section, the content above it */
.pg-practice .pa-match .ap-get-curve { z-index: 0; }
.pg-practice .pa-match > .container { position: relative; z-index: 1; }
.pg-practice .pa-match h2 { margin: 0 0 18px; color: var(--parchment); font-size: var(--text-h2); line-height: 1.1; }
.pg-practice .pa-match .lede { margin: 0 0 26px; color: var(--parchment); font-size: 18px; line-height: 1.6; max-width: 24em; }
.pa-next { margin: 0 0 34px; padding: 0; list-style: none; max-width: 26em; border-top: 1px solid rgba(217, 184, 113, 0.45); }
.pa-next li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; max-width: none; padding: 13px 0; border-bottom: 1px solid rgba(217, 184, 113, 0.45); color: var(--parchment); font-size: 16px; line-height: 1.55; }
.pa-next-no { color: var(--brass-light); font: 400 var(--text-meta) / 1 var(--font-label); letter-spacing: 0.08em; }

/* ==== related reading and the neighbouring areas ================================================================ */
.pg-practice .pa-related { padding-bottom: clamp(24px, 2vw, 32px); }
/* the neighbouring areas: three entries between brass hairlines, each a circle portrait with a brass ring beside its
   file number, name and line (no card box: the article cards above stay the only cards at the foot of the page) */
.pa-more-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); }
.pa-more-list li { max-width: none; }
.pa-more-list li + li { border-left: 1px solid var(--line-hair); }
.pa-near { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 22px; align-items: center; height: 100%; padding: 28px clamp(16px, 2vw, 28px); color: var(--ink-text); text-decoration: none; }
.pa-more-list li:first-child .pa-near { padding-left: 0; }
.pa-near-photo { position: relative; display: block; width: 120px; aspect-ratio: 1; margin: 8px; border-radius: 50%; }
.pa-near-photo::before { content: ""; position: absolute; inset: -8px; border: 1px solid var(--brass); border-radius: 50%; transition: border-color 0.2s ease; }
.pa-near-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pa-near-text { display: block; min-width: 0; padding-left: 8px; }
.pa-near-no { display: block; margin-bottom: 6px; color: var(--brass-ink); font: 400 var(--text-meta) / 1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; }
.pa-near h3 { margin: 0 0 6px; font-size: clamp(19px, 0.4vw + 16.6px, 22px); line-height: 1.2; transition: color 0.18s ease; }
.pa-near-line { display: block; font-size: 15px; line-height: 1.5; }
.pa-near-go { display: block; margin-top: 10px; color: var(--ox); }
.pa-near-go svg { display: block; width: 20px; height: 12px; transition: transform 0.18s ease; }
.pa-near:hover h3, .pa-near:focus-visible h3 { color: var(--ox); }
.pa-near:hover .pa-near-photo::before { border-color: var(--ox); }
.pa-near:hover .pa-near-go svg { transform: translateX(3px); }
.pa-near:focus-visible { outline: 3px solid var(--ink-text); outline-offset: -3px; }

/* ==== narrower screens =========================================================================================== */
@media (max-width: 1199.98px) {
  .pa-facts li { padding: 28px 18px 20px 46px; }
  .pa-facts li::before { left: 18px; }
  .pa-stamp { top: 17%; right: -3%; }
}
@media (max-width: 991.98px) {
  /* the art above the text: the disc runs off the right edge and up under the header, the photo inside it, the
     stamp on the parchment to its left */
  .pg-practice .pa-head { padding-top: 0; }
  .pa-head-grid { display: flex; flex-direction: column; align-items: stretch; }
  .pg-practice .pa-match { padding-top: 0; }
  .pa-art { order: -1; align-self: flex-end; width: min(80vw, 420px); margin: 0 calc(-1 * var(--margin)) 10px 0; aspect-ratio: 420 / 330; }
  .pa-disc { top: -34%; left: 26%; width: 96%; }
  .pa-portrait { top: 6%; left: 30%; width: 56%; }
  .pa-stamp { top: auto; bottom: 14%; left: 0; right: auto; align-items: flex-start; color: var(--brass-ink); text-align: left; }
  .pa-stamp::after { display: none; }
  .pa-stamp .pa-icon { width: 40px; height: 40px; color: var(--ox); }
  .pa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-facts li:nth-child(3) { border-left: 0; }
  .pa-facts li:nth-child(n + 3) { border-top: 1px solid var(--line-hair); }
  .pa-facts li:nth-child(n + 3)::before { top: -1px; }
  .pa-grid { display: block; }
  .pa-aside { padding-left: 0; margin-top: clamp(48px, 6vw, 64px); }
  .pg-practice .pa-aside .sticky-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); align-items: start; }
  .pa-more-list { grid-template-columns: minmax(0, 1fr); }
  .pa-more-list li + li { border-left: 0; border-top: 1px solid var(--line-hair); }
  .pa-near, .pa-more-list li:first-child .pa-near { padding: 22px 0; }
}
@media (max-width: 767.98px) {
  .pa-art { width: min(94vw, 370px); }
  .pa-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .pa-actions .btn { width: 100%; }
  .pa-actions .link-arrow { align-self: flex-start; }
  .pa-facts li { padding: 26px 12px 16px 36px; }
  .pa-facts li::before { left: 12px; width: 12px; height: 30px; }
  .pa-facts strong { font-size: 16px; }
  .pa-facts span { font-size: 14px; }
  .pg-practice .pa-covers .check-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-practice .pa-covers.card-sheet { padding-top: 48px; }
  .pg-practice .pa-covers.card-sheet::before { height: 34px; }
  .pg-practice .pa-toc ol { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .pg-practice .pa-article h2, .pg-practice .pa-questions h2 { padding-left: 40px; }
  .pg-practice .pa-no { width: 24px; height: 40px; padding-bottom: 10px; top: -4px; }
  .pg-practice .pa-checklist.card-sheet { --pad-margin: 56px; padding-right: 16px; }
  .pg-practice .pa-checklist h2 { padding-left: calc(var(--pad-margin) + 20px); }
  .pg-practice .pa-checklist h2 .pa-no { left: 14px; }
  .pg-practice .pa-checklist > p { padding-left: calc(var(--pad-margin) + 20px); }
  .pa-gather li { column-gap: 20px; font-size: 16px; }
  .pa-gather-no { padding-right: 12px; }
  .pg-practice .pa-aside .sticky-aside { display: block; }
  /* the other areas as two columns of compact links (about half as tall), so the form (#match) follows sooner */
  .pa-list ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .pa-list a { gap: 10px; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.3; }
  .pa-list a:hover { padding-left: 0; }
  .pg-practice .pa-list svg.pa-icon { width: 18px; height: 18px; }
  .pg-practice .pa-main .callout { padding: 16px 18px 16px 46px; }
  .pg-practice .pa-main .callout::before { left: 14px; }
}
@media (max-width: 767.98px) {
  .pa-near { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .pa-near-photo { width: 88px; margin: 6px; }
  .pa-near-photo::before { inset: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-list a, .pa-near-go svg, .pa-near-photo::before, .pa-near h3 { transition: none; }
}

/* ==========================================================================
   /practice-areas (.pg-areas): head on parchment; the three groups as Courier tab labels over four ribbon file cards
   each (two columns); the side column starts with the page photo, which rises into the head beside the title, then the
   oxblood request card and the scope note (sticky)
   ========================================================================== */
.pg-areas .pas-head { padding-bottom: clamp(36px, 3.6vw, 56px); }
.pg-areas .pas-head > .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
/* mirrored: the portrait on the left, the title on the right (text left with a photo right is MyHomeZilla’s inner-page
   opening; the home page is mirrored for the same reason) */
.pas-head-text { grid-column: 6 / span 7; grid-row: 1; }
/* the plan's practice-areas photo (our attorneys with a client) in a circle, a brass ring 12 px outside it, a small
   oxblood disc behind its lower right */
.pas-portrait { position: relative; isolation: isolate; grid-column: 1 / span 4; grid-row: 1; justify-self: center; width: min(100%, 330px); aspect-ratio: 1; margin: 12px 0; border-radius: 50%; }
.pas-portrait::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--brass); border-radius: 50%; pointer-events: none; }
.pas-portrait::after { content: ""; position: absolute; z-index: -1; left: -16%; bottom: -12%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--ox); }
/* the crop: the photo's full height (1100 x 720), the client at her desk at the centre of the circle */
.pas-crop { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: var(--line-hair); }
.pas-crop img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.pg-areas .pas-head h1 { max-width: 12em; }
.pg-areas .pa-drawer { padding: 0 0 clamp(64px, 6vw, 104px); }
.pa-drawer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.pa-drawer-main { grid-column: 1 / span 8; min-width: 0; }
.pa-drawer-aside { grid-column: 9 / span 4; align-self: stretch; display: flex; flex-direction: column; padding-left: clamp(0px, 2vw, 28px); }
.pa-drawer-aside .sticky-aside { flex: 1 1 auto; }
.pa-drawer-aside .sticky-aside > :first-child { margin-top: 0; }
.pg-areas .pa-scope { margin: 0 0 18px; }
.pg-areas .pa-scope h4 { margin: 0 0 8px; color: var(--ink-text); font: 700 17px / 1.3 var(--font-heading); }
.pg-areas .pa-scope p { margin: 0; font-size: 15px; line-height: 1.6; }

.pa-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--gutter); margin: 0; padding: 7px 0 0; list-style: none; }
.pa-cards > li { max-width: none; }
.pg-areas .pa-item { height: 100%; padding: 14px 14px 22px; }
.pg-areas .pa-item .fc-ribbon { left: 14px; }
.pg-areas .pa-item .fc-no { display: block; padding: 4px 2px 13px var(--fc-no-indent); }
.pa-item-photo { display: block; aspect-ratio: 16 / 9.5; overflow: hidden; background: var(--line-hair); }
.pa-item-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pa-item:hover .pa-item-photo img { transform: scale(1.03); }
.pa-item-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 8px 0; }
.pa-item-body .pa-icon { width: 30px; height: 30px; margin: 0 0 10px; }
.pg-areas .pa-item h3 { margin: 0 0 8px; font-size: clamp(22px, 0.4vw + 19.6px, 25px); line-height: 1.15; }
.pg-areas .pa-item h3 a { color: var(--ink-text); text-decoration: none; }
.pg-areas .pa-item h3 a:hover { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.pa-item-line { margin: 0 0 16px; font-size: 16px; line-height: 1.55; }
.pa-item-examples { margin: 0 0 20px !important; padding-top: 12px !important; border-top: 1px solid var(--line-hair); }
.pa-item-examples li { padding-top: 4px; padding-bottom: 4px; font-size: 15px; line-height: 1.5; }
.pa-item-links { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--brass); max-width: none; }
.pa-item-links .link-arrow { font-size: 17px; padding-block: 10px; }

@media (max-width: 1199.98px) {
  .pa-cards { gap: 24px 20px; }
}
@media (max-width: 991.98px) {
  .pas-head-text { grid-column: 5 / span 8; }
  .pas-portrait { grid-column: 1 / span 4; width: min(100%, 240px); }
  .pa-drawer-grid { display: block; }
  .pa-drawer-aside { padding: 0; margin-top: clamp(48px, 6vw, 64px); }
  .pa-drawer-aside .sticky-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--gutter); align-items: start; }
}
@media (max-width: 767.98px) {
  .pg-areas .pas-head > .container { display: flex; flex-direction: column; }
  .pas-portrait { order: -1; align-self: flex-end; width: 150px; margin: 4px 12px -64px 0; }
  .pas-head-text .breadcrumb { margin-bottom: 76px; }
  .pa-drawer-aside .sticky-aside { display: block; }
  .pa-cards { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pg-areas .pa-item { padding: 12px 12px 18px; }
  .pg-areas .pa-item .fc-ribbon { left: 12px; }
  .pa-item-links { flex-direction: column; gap: 0; }
}
@media (max-width: 575.98px) {
  /* "Describe your situation" and its arrow on one line, across the card */
  .pg-areas .side-card.cta .btn { width: 100%; justify-content: center; padding-inline: 14px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-item-photo img { transition: none; }
}

/* ==== photos on every device: every head whole, at every size (photos + devices pass, 2026-10-15) ==================
   Head boxes for every photo are in the review notes; each rule below keeps every marked head whole at all 19 measured
   screen sizes. */
/* /practice-areas cards: the photos sit a little high */
.pa-item-photo img { object-position: 50% 25%; }
/* the circles: seven areas use a square crop with every head well inside the circle (practiceData.ts circle); the others
   are framed here */
.pa-near-photo img { object-position: 50% 40%; }
.pa-near-photo img[src*="pexels-5900267-w700."] { object-position: 58% 40%; }
/* (the immigration match photo is a square crop of 8853388 now: the man alone, step 5) */
/* text that must fit its box on every device: from 992 to 1279 px three "More practice areas" entries share the row, so
   the circle is the phone size there and the long names ("Workers' Compensation", "Bankruptcy & Debt Relief") keep to
   their column; a word longer than the column would still wrap instead of running out */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .pa-near { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .pa-near-photo { width: 88px; margin: 6px; }
  .pa-near-photo::before { inset: -6px; }
  .pa-near h3 { font-size: 18px; }
}
.pa-near h3 { overflow-wrap: break-word; }

/* ==== every device looks finished (photos + devices pass, step 5, 2026-10-15) ======================================= */
/* /practice-areas on phones under 375 px: the crumbs wrap to the left of the circle (the 150 px circle covered "areas"),
   and the button in "Not sure which fits?" may wrap (on one line it ran about 40 px past the card and the screen) */
@media (max-width: 374.98px) {
  .pg-areas .pas-head-text .breadcrumb { max-width: calc(100% - 170px); }
  .pg-areas .side-card.cta .btn { white-space: normal; text-wrap: balance; }
}
/* practice pages on tablets (768-991 px): the file stamp stands at the left edge of the column, above the crumbs and the
   title (at the left of a 420 px art box it floated mid-page with empty parchment on both sides); the disc and the photo
   circle keep their size and place at the right edge */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pa-art { align-self: stretch; width: auto; height: 330px; aspect-ratio: auto; }
  .pa-disc { left: auto; right: -92px; top: -112px; width: 403px; }
  .pa-portrait { left: auto; right: 59px; top: 20px; width: 235px; }
}

/* ==== every device looks finished (photos + devices pass, step 5 continued, 2026-10-16) ============================= */
/* practice heads on wide screens (1500 px and up): the oxblood disc still bleeds off the right edge of the window and up
   under the header, as it does at 1440 px (inside the 1320 px frame it ended about 90 px short of the edge at 1920 and
   410 px short at 2560). It grows up and to the right (about 120 px past the edge), so the photo circle keeps the same
   crescent of oxblood at its left; the head keeps its round foot clear of the facts strip (a little more room under the
   head from about 2000 px) */
@media (min-width: 1500px) {
  .pa-disc { left: calc(152.94px - 5.556vw); top: calc(553.27px - 44.444vw); width: calc(55.556vw - 156.94px); }
  .pg-practice .pa-head { padding-bottom: max(80px, calc(11.112vw - 131.67px)); }
}

/* ==== fresh-eyes device check (final fix, 2026-10-16) ==================================================================
   Findings of three fresh lookers who saw every page at 7 sizes; no wording changed anywhere. */
/* the file stamp keeps clear of the portrait's brass ring from 992 to 1279 px ("No. 01" touched or crossed the ring) */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .pa-stamp { top: 10%; }
}
/* the three neighbouring areas line up along the top (centred in their cells, their numbers and titles started at
   different heights across the row) */
@media (min-width: 992px) {
  .pa-near { align-items: start; }
}
/* practice heads on tablets (768-991 px): the crumbs and the title stand beside the photo circle, under the file stamp
   (which now runs across, its line drawing before "File No."), and the lede and the buttons follow across the whole
   width; the art (the disc, the photo circle and its ring) keeps its size and place at the right edge. Before, the title
   started under the art and the top left of the head was an empty block of about 400 x 190 px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pa-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; grid-template-rows: auto auto auto auto; column-gap: var(--gutter); align-items: start; }
  .pa-art { grid-column: 1 / -1; grid-row: 1 / span 2; align-self: stretch; height: auto; min-height: 330px; margin-bottom: 10px; }
  .pa-head-grid > .pa-crumbs { grid-column: 1; grid-row: 1; position: relative; z-index: 1; margin-top: 72px; }
  .pa-head-grid > h1 { grid-column: 1; grid-row: 2; position: relative; z-index: 1; }
  .pa-head-grid > .lede, .pa-head-grid > .pa-actions { grid-column: 1 / -1; }
  .pa-stamp { top: 12px; bottom: auto; flex-direction: row; align-items: center; gap: 14px; }
  .pa-stamp span { max-width: none; }
}
/* tablets (768-991 px): the side block's request card runs across the width with the other areas under it in two
   columns, as on phones (beside the 12-row list the card left about 300 px of empty parchment under it) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pg-practice .pa-aside .sticky-aside > .side-card, .pg-practice .pa-aside .pa-list { grid-column: 1 / -1; }
  .pg-practice .pa-list ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
/* phones under 375 px: the "What to gather" pad keeps a wider text column (about 195 px before) */
@media (max-width: 374.98px) {
  .pg-practice .pa-checklist.card-sheet { --pad-margin: 46px; }
}
/* wide screens shown at 125 % (2200 px and up, 1300 px tall or more; frame.css): lengths in vw grow with the zoom, so
   the disc's formula uses the zoomed page's own width (100vw / 1.25) and keeps its place beside the photo circle */
@media (min-width: 2200px) and (min-height: 1300px) {
  .pa-disc { left: calc(152.94px - 5.556vw / 1.25); top: calc(553.27px - 44.444vw / 1.25); width: calc(55.556vw / 1.25 - 156.94px); }
  .pg-practice .pa-head { padding-bottom: max(80px, calc(11.112vw / 1.25 - 131.67px)); }
}