/* ==========================================================================
   The Advocate Path: the info pages /how-it-works (.pg-how), /about (.pg-about), /faq (.pg-faq), /contact
   (.pg-contact), /get-started (.pg-start). Each page has its own composition built from the site's parts (inner.css,
   home.css): ribbons, the oxblood curve, brass hairlines, portraits in circles and tall frames, Caslon with Courier
   numbers. Hooks kept: .timeline/.tl-item[data-n], .term (tooltip), #ab1-#ab3 and #fq-* tabs, #acc-* accordions,
   .list-group-flush a (FAQ guides), the contact form, #attorneys, #leadForm, .sticky-aside.
   ========================================================================== */

/* ==== /how-it-works ============================================================================================= */
.pg-how .how-head { padding-bottom: clamp(88px, 9vw, 140px); }
/* the path: one brass curve from the foot of the head on the left, through the middle of the right half, up to the Get
   Matched ribbon */
.pg-how .how-head .in-path { top: 0; height: 100%; }
/* its five stations (the five steps below, unnumbered): small parchment discs with a brass ring and an oxblood centre,
   placed on the curve at equal distances (computed from the path in HowItWorks.tsx, in % of the curve's box); the last
   one an oxblood disc with a brass ring right under the ribbon. Only from 1200 px, where the ribbon closes the header
   row (narrower, the Menu button follows it), so there the curve's box ends under the ribbon's middle: the ribbon is
   172 px wide and stands at the right edge of the container. */
.how-stations { display: none; }
@media (min-width: 1200px) {
  .pg-how .how-head { --how-rib: calc((100% - min(100%, var(--container) + 2 * var(--margin))) / 2 + var(--margin) + 86px); }
  .pg-how .how-head .in-path, .how-stations { right: var(--how-rib); }
  /* an explicit width: an absolutely placed svg with width auto keeps its viewBox ratio instead of filling left..right */
  .pg-how .how-head .in-path { width: calc(100% - var(--how-rib)); }
  .how-stations { position: absolute; top: 0; bottom: 0; left: 0; display: block; pointer-events: none; }
  .how-stations span {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ox) 0 3px, var(--parchment) 3.5px);
    box-shadow: 0 0 0 1px var(--brass);
  }
  .how-stations span:nth-child(1) { left: 47.02%; top: 87.76%; }
  .how-stations span:nth-child(2) { left: 61.19%; top: 78.01%; }
  .how-stations span:nth-child(3) { left: 75.02%; top: 63.66%; }
  .how-stations span:nth-child(4) { left: 88.17%; top: 43.22%; }
  .how-stations span:nth-child(5) { left: 100%; top: 15%; width: 28px; height: 28px; margin: -14px 0 0 -14px; background: var(--ox); box-shadow: 0 0 0 5px var(--parchment), 0 0 0 6px var(--brass); }
}
.pg-how .how-head h1 { max-width: 11em; font-size: clamp(40px, 2.6vw + 30px, 64px); line-height: 1.02; letter-spacing: -0.022em; }
.pg-how .how-head .lede { font-size: clamp(19px, 0.5vw + 17px, 22px); max-width: 30em; }

.pg-how .how-path { padding: clamp(40px, 4vw, 64px) 0 clamp(64px, 6vw, 104px); }
.how-path-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.how-path-main { grid-column: 1 / span 7; min-width: 0; }
.how-path-aside { grid-column: 9 / span 4; align-self: stretch; }
.how-path-main h2 { margin: 0 0 clamp(36px, 3.6vw, 52px); max-width: 13em; font-size: var(--text-h2); line-height: 1.1; }

/* the timeline: one oxblood ribbon (brass stitch) runs down behind the numerals and ends in a V-notch under the last
   step; each numeral is Caslon italic on a parchment disc with a brass ring */
.pg-how .timeline { position: relative; margin: 0; padding: 0 0 36px; list-style: none; }
.pg-how .timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 29px;
  width: 14px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}
.pg-how .timeline::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 10px;
  left: 32px;
  width: 8px;
  border-left: 1px dashed var(--brass);
  border-right: 1px dashed var(--brass);
  pointer-events: none;
}
.pg-how .tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 36px);
  max-width: none;
  padding: 0 0 clamp(36px, 3.6vw, 52px);
}
.pg-how .tl-item::before {
  content: attr(data-n);
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--parchment);
  box-shadow: 0 0 0 1px var(--brass), 0 0 0 7px var(--parchment);
  color: var(--ox);
  font: italic 400 38px / 1 var(--font-body);
  padding-bottom: 4px;
}
.pg-how .tl-item .when { grid-column: 2; margin: 6px 0 8px; color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.pg-how .tl-item .what { grid-column: 2; }
.pg-how .tl-item h3 { margin: 0 0 10px; font-size: clamp(22px, 0.5vw + 19px, 26px); line-height: 1.2; }
.pg-how .tl-item p { margin: 0; font-size: var(--text-body); line-height: 1.7; max-width: 34em; }

.how-path-aside .sticky-aside { display: flex; flex-direction: column; gap: 0; }
.how-photo { aspect-ratio: 4 / 3; margin-top: 10px; margin-bottom: 14px; }
.how-photo img { object-position: 50% 30%; }
.how-asks { padding: 30px 26px 14px; }
.how-asks .fc-ribbon { left: 24px; }
.how-asks h4 { margin: 0 0 8px; padding-left: 26px; color: var(--ink-text); font: 700 19px / 1.25 var(--font-heading); }
.how-asks .list-group-item { padding: 11px 0 11px 22px; font-size: 16px; line-height: 1.5; position: relative; border-color: var(--line-hair); }
.how-asks .list-group-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 8px;
  height: 11px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.how-asks .list-group-item:last-child { border-bottom: 0; }
.pg-how .how-deadline { margin-bottom: 52px; }

/* the four photos of the original strip, between brass rules */
.how-strip { padding: 0 0 clamp(64px, 6vw, 96px); }
.how-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin: 0; padding: 28px 0; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); list-style: none; }
.how-strip-row li { max-width: none; }
.how-strip-row img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* what to expect beside who is on the other end */
.pg-how .how-expect { padding: 0 0 clamp(72px, 7vw, 120px); }
.how-expect-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.how-details { grid-column: 1 / span 6; }
.how-attorneys { grid-column: 8 / span 5; }
.pg-how .how-expect h2 { margin: 0 0 26px; font-size: clamp(28px, 1vw + 21px, 36px); line-height: 1.12; }
.how-defs { margin: 0; border-top: 1px solid var(--brass); }
.how-defs > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line-hair); }
.how-defs dt { position: relative; padding-left: 22px; color: var(--ox); font: 700 19px / 1.35 var(--font-heading); }
.how-defs dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 13px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.how-defs dd { margin: 0; font-size: 17px; line-height: 1.65; }
.pg-how .term { border-bottom: 1px dotted var(--ox); color: var(--ox); }
.pg-how .term:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 2px; }
.how-attorneys p { font-size: 17px; line-height: 1.7; }
.pg-how .how-join { margin: 28px 0 18px; }

/* tooltips (the .term definition here, Share on articles): a small parchment card, ink text, a brass hairline edge and
   an oxblood top rule; the arrow in the brass of the edge */
.tooltip { --bs-tooltip-bg: var(--brass); --bs-tooltip-color: var(--ink-text); --bs-tooltip-max-width: 260px; --bs-tooltip-padding-x: 14px; --bs-tooltip-padding-y: 10px; --bs-tooltip-opacity: 1; }
.tooltip .tooltip-inner { background: var(--parchment); border: 1px solid var(--brass); border-top: 3px solid var(--ox); color: var(--ink-text); font: 400 14px / 1.45 var(--font-body); text-align: left; box-shadow: 0 12px 24px -18px rgba(30, 36, 48, 0.45); }

/* ==== /about ===================================================================================================== */
.pg-about .ab-head { padding-bottom: 0; }
.ab-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ab-head-text { grid-column: 1 / span 7; padding-bottom: clamp(44px, 4.6vw, 72px); }
.pg-about .ab-head h1 { max-width: 11em; font-size: clamp(40px, 2.6vw + 30px, 64px); line-height: 1.02; letter-spacing: -0.022em; }
.pg-about .ab-head .lede { font-size: clamp(19px, 0.5vw + 17px, 22px); max-width: 26em; }
/* the portrait: a tall frame in a brass mat that reaches down past the head into the first section, a short oxblood
   ribbon over its top edge */
.ab-portrait { position: relative; grid-column: 9 / span 4; margin: 14px 14px calc(-1 * clamp(120px, 12vw, 190px)); aspect-ratio: 4 / 5; z-index: 1; }
.ab-portrait::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--brass); pointer-events: none; }
.ab-portrait::after {
  content: "";
  position: absolute;
  top: -21px;
  left: 28px;
  width: 30px;
  height: 84px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
}
.ab-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.pg-about .ab-why { padding: clamp(40px, 4vw, 64px) 0 clamp(64px, 6vw, 96px); }
.ab-why-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ab-why-text { grid-column: 1 / span 7; }
.ab-why-text h2 { margin: 0 0 22px; font-size: var(--text-h2); line-height: 1.1; }
.ab-why-text p { font-size: var(--text-body); line-height: 1.72; }
/* the operating principle: the largest type of the section, Caslon italic in oxblood with brass quote marks, under the
   portrait */
.ab-quote { grid-column: 9 / span 4; margin: clamp(170px, 15vw, 240px) 0 0; padding: 26px 0 0; border-top: 1px solid var(--brass); }
.ab-quote blockquote { margin: 0; }
.ab-quote p { margin: 0; color: var(--ox); font: italic 400 clamp(23px, 0.7vw + 19px, 29px) / 1.32 var(--font-body); letter-spacing: -0.006em; text-indent: -0.42em; text-wrap: pretty; }
.ab-quote p::before { content: "\201c"; color: var(--brass); }
.ab-quote p::after { content: "\201d"; color: var(--brass); }
.ab-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.ab-quote figcaption::before { content: ""; width: 32px; height: 1px; background: var(--brass); }


/* the four commitments: a ledger on a white sheet; each with a large Caslon italic numeral in oxblood */
.pg-about .ab-values { padding: 0 0 clamp(72px, 7vw, 112px); }
.ab-values-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 56px);
  background: var(--white);
  border: 1px solid var(--line-hair);
}
.ab-values-grid h2 { margin: 0 0 clamp(24px, 2.6vw, 36px); font-size: var(--text-h2); line-height: 1.1; }
.ab-values-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--brass); }
/* the four photos of the original strip, two by two, as tall as the ledger */
.ab-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ab-strip li { max-width: none; min-height: 0; }
.ab-strip img { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
.ab-values-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; max-width: none; padding: 24px 0; border-bottom: 1px solid var(--line-hair); }
.ab-values-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-no { color: var(--ox); font: italic 400 clamp(44px, 1.6vw + 32px, 58px) / 0.9 var(--font-body); letter-spacing: -0.02em; }
.ab-values-list h3 { margin: 4px 0 8px; font-size: clamp(21px, 0.4vw + 18.6px, 24px); line-height: 1.2; }
.ab-values-list p { margin: 0; font-size: 16px; line-height: 1.65; }

/* the network, the money and the limits: the tabs beside their photo */
.pg-about .ab-detail { padding: 0 0 clamp(72px, 7vw, 112px); }
.ab-detail-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ab-detail-photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.ab-detail-photo img { object-position: 55% 40%; }
.ab-tabs { grid-column: 7 / span 6; padding-top: 8px; }
.ab-tabs h2 { margin: 0 0 28px; font-size: clamp(28px, 1vw + 21px, 36px); line-height: 1.12; }
.ab-tabs .tab-pane p { font-size: var(--text-body); line-height: 1.72; }

/* ==== /faq ======================================================================================================= */
/* one grid for the head, the questions and the side column: the side column spans both rows, so the matted photo
   starts level with the title (its top under the crumbs) and fills the head's right half */
.faq-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gutter); align-items: start; padding-bottom: clamp(72px, 7vw, 112px); }
.faq-layout > .faq-head { grid-column: 1 / span 8; grid-row: 1; }
.faq-layout > .faq-body { grid-column: 1 / span 8; grid-row: 2; min-width: 0; }
.pg-faq .faq-body { padding: 0; }
.faq-main { min-width: 0; }
.faq-aside { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: stretch; padding-left: clamp(0px, 2vw, 28px); padding-top: calc(clamp(28px, 3vw, 44px) + 21px + clamp(20px, 2.2vw, 30px)); }
.pg-faq .accordion.faq { border-top: 0; }
.faq-more { margin: 32px 0 0; font: italic 400 var(--text-body) / 1.5 var(--font-body); }
.pg-faq .faq-start { max-width: 34em; margin: clamp(40px, 4vw, 56px) 0 0; }
/* the shared card rule `.in-page .side-card.cta` (0,3,0) sets margin-top 0: this one is stronger, so the card stands
   clear of the "Didn't find your answer?" line */
.pg-faq .side-card.cta.faq-start { margin-top: clamp(40px, 4vw, 56px); }
.faq-photo { aspect-ratio: 4 / 3; margin-top: 4px; margin-bottom: 40px; }
.faq-photo img { object-position: 50% 35%; }
.faq-aside-cards { position: sticky; top: calc(var(--header-h-scrolled) + 40px); }
.faq-guides { margin-bottom: 34px; }
.faq-guides h4 { margin: 0; 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; }
.faq-guides .list-group-item { padding: 0; border-color: var(--line-hair); }
.faq-guides .art-link { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 0; color: var(--ink-text); font-size: 16px; line-height: 1.45; text-decoration: none; }
.faq-guides .art-link svg { flex: none; width: 18px; height: 11px; color: var(--ox); transform: translateY(1px); transition: transform 0.18s ease; }
.faq-guides .art-link:hover { color: var(--ox); }
.faq-guides .art-link:hover svg { transform: translate(3px, 1px); }

/* ==== /contact =================================================================================================== */
/* the head: the title and lede in the left half, the two contact cards stacked in the right half (above the form),
   the first one level with the title */
.pg-contact .ct-head { padding-bottom: clamp(56px, 5vw, 80px); }
.ct-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ct-head-text { grid-column: 1 / span 6; }
.pg-contact .ct-cards { grid-column: 7 / span 6; padding: 0; margin-top: calc(21px + clamp(20px, 2.2vw, 30px) + 6px); }
.ct-cards-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.ct-card { padding: 34px clamp(22px, 2.6vw, 36px) 26px; }
.ct-card .fc-ribbon { left: clamp(22px, 2.6vw, 36px); }
.ct-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 32px; margin: 0; }
.ct-list > div { padding-top: 14px; border-top: 1px solid var(--brass); }
.ct-list dt, .ct-address dt { margin: 0 0 8px; color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.ct-list dd { margin: 0; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
/* a card half the container wide: the two addresses one under the other, so neither breaks mid-word */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .pg-contact .ct-list { grid-auto-flow: row; gap: 18px; }
}
.ct-list dd a { color: var(--ox); }
.ct-note { display: block; margin-top: 6px; color: var(--muted-text); font: italic 400 15px / 1.5 var(--font-body); }

.pg-contact .ct-body { padding: 0 0 clamp(72px, 7vw, 112px); }
.ct-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ct-where { grid-column: 1 / span 5; align-self: stretch; }
.pg-contact .ct-form.ap-intake { grid-column: 7 / span 6; }
.ct-address { margin: 0 0 22px; }
.ct-address dd { margin: 0; }
.ct-name { margin: 0 0 6px; font-size: clamp(26px, 0.8vw + 20.6px, 32px); line-height: 1.15; }
.ct-address p { margin: 0; font-size: 18px; line-height: 1.55; }
/* the map: a square frame in a brass mat */
.ct-map { aspect-ratio: 1; }
.pg-contact .map-embed { position: relative; width: 100%; height: 100%; border: 0; box-shadow: none; overflow: hidden; background: var(--line-hair); }
/* the tiles read as a printed map in the mat (their orange and pink markers would clash with parchment and brass) */
.pg-contact .map-embed iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(0.3) contrast(0.95); }
.pg-contact .ct-attorneys { margin-top: 44px; }
.pg-contact .ct-attorneys h4 { margin: 0 0 8px; color: var(--ink-text); font: 700 18px / 1.3 var(--font-heading); }
.pg-contact .ct-attorneys p { margin: 0; font-size: 15px; line-height: 1.6; }
.ct-send { margin-top: 28px; }
.pg-contact .ct-formnote { margin-top: 28px; margin-bottom: 26px; }
.pg-contact .ct-form .success h3 { margin-bottom: 10px; }

/* ==== /get-started =============================================================================================== */
.pg-start .gs-head { padding-bottom: clamp(36px, 3.6vw, 52px); }
.pg-start .gs-body { padding: 0 0 clamp(72px, 7vw, 112px); }
.gs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.pg-start .gs-form.ap-intake { grid-column: 1 / span 7; }
.gs-aside { grid-column: 9 / span 4; align-self: stretch; }
.gs-portrait { position: relative; width: min(100%, 240px); aspect-ratio: 1; margin: 12px 0 44px 12px; border-radius: 50%; }
.gs-portrait::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--brass); border-radius: 50%; pointer-events: none; }
.gs-portrait::after { content: ""; position: absolute; z-index: -1; left: 58%; top: -14%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--ox); }
.gs-portrait { isolation: isolate; }
.gs-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.gs-next h4, .gs-notes 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; }
/* each step on a small oxblood ribbon carrying its number */
.gs-next .list-group-numbered > .list-group-item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; align-items: start; padding: 14px 0; font-size: 16px; line-height: 1.55; border-color: var(--line-hair); }
.gs-next .list-group-numbered > .list-group-item::before {
  content: counter(section);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 22px;
  height: 32px;
  margin-top: -14px;
  padding-bottom: 9px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%);
  color: var(--parchment);
  font: 400 12px / 1 var(--font-label);
}
.gs-notes { margin-top: 40px; padding: 30px 24px 12px; }
.gs-notes .fc-ribbon { left: 22px; }
.gs-notes h4 { padding-left: 26px; border-bottom: 0; padding-bottom: 4px; }
.gs-notes .checklist > li { padding: 12px 0; border-color: var(--line-hair); font-size: 15px; line-height: 1.55; }
.gs-notes .checklist > li:last-child { border-bottom: 0; }
.gs-notes .checklist strong { margin-bottom: 2px; color: var(--ox); font: 700 17px / 1.3 var(--font-heading); }
.gs-notes .checklist span { display: block; }

/* ==== narrower screens =========================================================================================== */
@media (max-width: 1199.98px) {
  .how-defs > div { grid-template-columns: 140px minmax(0, 1fr); }
  .ab-values-list li { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .how-path-grid, .how-expect-grid, .ab-why-grid, .ab-detail-grid, .faq-layout, .ct-head-grid, .ct-grid, .gs-grid { display: block; }
  .how-path-aside { margin-top: 24px; }
  .how-path-aside .sticky-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
  .how-photo { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .how-asks { grid-column: 1; }
  .pg-how .how-deadline { margin-top: 0; }
  .how-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .how-attorneys { margin-top: 56px; }

  .ab-head-grid { display: flex; flex-direction: column; }
  .ab-head-text { padding-bottom: 32px; }
  .ab-portrait { width: min(70%, 420px); margin: 14px 14px 0 auto; aspect-ratio: 4 / 3; }
  .pg-about .ab-why { padding-top: 64px; }
  .pg-contact .ct-form.ap-intake, .pg-start .gs-form.ap-intake { margin-top: 0; }
  .ab-quote { margin: 48px 0 0; max-width: 34em; }
  .ab-values-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-strip img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  /* width auto: the 14 px brass mat (.in-mat margin) shows on both sides instead of pushing the frame past the edge */
  .ab-detail-photo { width: auto; max-width: 520px; aspect-ratio: 16 / 10; margin-bottom: 48px; }

  .faq-aside { margin-top: 56px; padding-left: 0; padding-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
  .faq-photo { aspect-ratio: 4 / 3; }
  .faq-aside-cards { position: static; }

  .pg-contact .ct-cards { margin-top: 36px; }
  .ct-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .ct-where { margin-bottom: 56px; }
  .ct-map { aspect-ratio: 16 / 10; }

  .gs-aside { margin-top: 56px; }
  .gs-aside .sticky-aside { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .gs-portrait { width: 180px; grid-row: span 2; }
  .gs-notes { grid-column: 2; }
}
@media (max-width: 767.98px) {
  .pg-how .how-head { padding-bottom: 72px; }
  .pg-how .how-head .in-path { top: auto; height: 56px; }
  .pg-how .tl-item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
  .pg-how .tl-item::before { width: 56px; height: 56px; font-size: 30px; }
  .pg-how .timeline::before { left: 21px; }
  .pg-how .timeline::after { left: 24px; }
  .how-path-aside .sticky-aside { display: block; }
  /* one column again: the deadline note stands clear of the card above it */
  .pg-how .how-deadline { margin-top: 28px; }
  .how-defs > div { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .how-strip-row { gap: 12px; padding: 20px 0; }

  .ab-portrait { width: auto; margin: 14px 14px 0; }
  .pg-about .ab-why { padding-top: 52px; }
  .ab-strip { gap: 8px; }
  .ab-values-list li { grid-template-columns: 52px minmax(0, 1fr); padding: 22px 0; }

  .faq-aside { display: block; }
  .faq-photo { aspect-ratio: 16 / 10; }

  .ct-cards-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ct-list { grid-auto-flow: row; gap: 18px; }

  /* the portrait beside the "What happens next" label, the numbered steps and the notes under both */
  .gs-aside .sticky-aside { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 28px; align-items: center; }
  .gs-portrait { grid-column: 1; grid-row: 1; width: 120px; margin: 12px 0 30px 12px; }
  .gs-next { display: contents; }
  .gs-next h4 { grid-column: 2; grid-row: 1; margin: 0 0 18px; padding: 0; border-bottom: 0; }
  .gs-next .list-group { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--brass); }
  .gs-notes { grid-column: 1 / -1; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-guides .art-link svg { 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. */
/* /how-it-works: the consultant’s head is near the top of her photo */
.how-photo img { object-position: 50% 5%; }
/* the strip of four takes the photos’ own 3:2 shape (4:3 frames cut the heads of the two people at the edges of the
   meeting photo) */
.how-strip-row img { aspect-ratio: 3 / 2; object-position: 50% 25%; }
/* /about head: the picture element passes the frame’s height to its img (992 px and up it shows the tall crop) */
.ab-portrait picture { display: contents; }
/* /about commitments: the four photos keep a 4:3 shape on large screens too (stretched to the ledger’s height they became
   narrow strips that cut the heads of the meeting photo and of the reader); the block sits centred beside the ledger */
@media (min-width: 992px) {
  .ab-strip { align-self: center; grid-template-rows: none; }
  .ab-strip img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
.ab-strip img[src*="pexels-23496874-w700."] { object-position: 54% 30%; }
/* text that must fit its box on every device */
/* /contact: the site's name as a heading is one long word; on 320-374 px phones it takes a size that fits the card */
.ct-name { overflow-wrap: break-word; }
@media (max-width: 374.98px) { .pg-contact .ct-name { font-size: 23px; } }
/* /how-it-works terms: "Consultations" did not fit the 140 px term column from 768 to 1199 px */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .how-defs > div { grid-template-columns: 160px minmax(0, 1fr); }
  .how-defs dt { font-size: 18px; overflow-wrap: break-word; }
}

/* ==== every device looks finished (photos + devices pass, step 5, 2026-10-15) ======================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* /how-it-works: the brass path runs along the foot of the head, as on phones (drawn across the head it crossed the
     end of the lede's first line); the photo frame keeps clear of the card above it (its 14 px brass mat touched it) */
  .pg-how .how-head { padding-bottom: 72px; }
  .pg-how .how-head .in-path { top: auto; height: 56px; }
  .how-photo { margin-top: 32px; }
  /* /about: the head photo takes the full width under the title (at 70 % on the right it left an empty block of
     parchment beside it); every head of the group stays inside the 16:10 frame */
  .ab-portrait { width: auto; margin: 14px 14px 0; aspect-ratio: 16 / 10; }
}
/* /about on phones under 375 px: each commitment's numeral stands above its title (beside it the text kept about 170 px,
   two or three words per line); the sheet's side padding steps down to 18 px */
@media (max-width: 374.98px) {
  .ab-values-grid { padding-inline: 18px; }
  .ab-values-list li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}
/* /faq on tablets (768-991 px): the "Shall we begin?" panel runs as wide as the questions above it (capped at 34em it
   stopped about 90 px short of their right edge) */
@media (max-width: 991.98px) {
  .pg-faq .faq-start { max-width: none; }
}
/* /get-started on tablets (768-991 px): the notes card runs under both the portrait and the steps (beside the steps only,
   it left an empty block under the portrait), and the portrait's oxblood disc keeps clear of the first step's ribbon */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gs-aside .sticky-aside { column-gap: 64px; }
  .gs-portrait { grid-row: 1; }
  .gs-notes { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  /* /contact: the email links of the two cards get a 43 px tap height without moving the lines */
  .ct-list dd a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  /* /faq: the page ends closer to the footer (about 120 px of empty parchment before) */
  .faq-layout { padding-bottom: 48px; }
  .faq-guides { margin-bottom: 0; }
}
/* /about on tablets (768-991 px): the head photo keeps inside the column (sized by its content it ran 15-30 px past the
   right edge of the screen, its brass mat cut off) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ab-portrait { align-self: stretch; }
}

/* ==== 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. */
/* /about from 992 to 1399 px: the commitments' ledger runs across the sheet with its four entries in two columns, and the
   four photos stand in one row under it (the 2 x 2 photo block floated in the middle of its column with up to 235 px of
   empty white above and below it); the photos keep their 4:3 frames */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .ab-values-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-values-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .ab-values-list li:last-child { padding-bottom: 24px; }
  .ab-values-list li:nth-last-child(-n + 2) { border-bottom: 0; }
  .ab-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* /about on tablets (768-991 px): the "Who are the attorneys, and who pays?" photo runs the full width of the column,
   like the head photo above it and the tabs below it (capped at 520 px it stopped about 160 px short) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ab-detail-photo { max-width: none; }
}
/* /get-started: the honest notes and their hairlines run to the card's inner edge (held to the paragraph measure they
   stopped at about 540 px on tablets) */
.gs-notes .checklist > li { max-width: none; }
/* /contact from 992 to 1279 px: the two contact cards follow the lede side by side, as on tablets (stacked in the right
   half they left about 300 px of empty parchment under the lede) */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .ct-head-grid { display: block; }
  .pg-contact .ct-cards { margin-top: 36px; }
  .ct-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
}