/*
 * A lawyer's profile page (template-parts/lawyer-profile.php): /lawyers/michael-s-porter/,
 * /lawyers/eric-c-nordby/, /lawyers/marla-e-raus/. Loaded on those three pages only
 * (nybi_lawyer_profile_prepare()), after our-lawyers.css. Ported from the approved v3 mockups
 * (2026-11-11). Every rule is scoped to .ap-layout, so no other page changes.
 *
 * One frame for the three pages (hero, bio type, facts panel, results, What Happens Next, the other
 * two lawyers as rows) and one part built from each person's own bio:
 *   .path     Michael S. Porter   the bio set as a career path
 *   .facts3   Eric C. Nordby      three facts from his bio on one grid, then a pulled sentence
 *   (none)    Marla E. Raus       a short bio: the first paragraph one size larger
 *
 * The results cards, the steps and the call card look like the city pages' (location.css); they
 * have their own .ap-* names here so this page does not need location.css and the stylesheets it
 * builds on.
 *
 * House rules (CLAUDE.md): hover changes colour, background or border only; neutral shadows only;
 * no bar down one side of a card; red only on action buttons; amber only on small marks.
 */

.ap-layout {
    /* Not in tokens.css: the city pages' amber (location.css) and their grey-blue detail colour. */
    --ap-amber: #F4B860;
    --ap-slate: #4A586B;
    --ap-on-navy-muted: #9FB0C6;   /* 6.4:1 on the navy band */
    --ap-section: clamp(3rem, 2rem + 3.6vw, 5rem);
    --ap-col-gap: clamp(32px, 6vw, 88px);
    overflow-wrap: break-word;
}

.ap-layout .container { max-width: var(--container-max); padding-left: 24px; padding-right: 24px; }
.ap-layout svg { flex: none; }
.ap-layout a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Grid children may never stretch their column. */
.ap-layout .ap-hero-grid > *, .ap-layout .ap-about > *, .ap-layout .ap-next > *, .ap-layout .path-stop > *,
.ap-layout .facts3 > *, .ap-layout .ledger-row > * { min-width: 0; }

/* The page's own lists: no marks, no indent (style.css gives every ul/ol and li a margin). */
.ap-layout .ap-hfacts, .ap-layout .ap-checks, .ap-layout .path, .ap-layout .facts3, .ap-layout .ap-steps,
.ap-layout .ap-phone-points, .ap-layout .ap-fact ul, .ap-layout .ledger-row ul { list-style: none; margin: 0; padding: 0; }
.ap-layout .ap-hfacts li, .ap-layout .ap-checks li, .ap-layout .path li, .ap-layout .facts3 li, .ap-layout .ap-steps li,
.ap-layout .ap-phone-points li, .ap-layout .ap-fact li, .ap-layout .ledger-row li { margin-bottom: 0; }

.ap-layout .ap-section { padding: var(--ap-section) 0; scroll-margin-top: 110px; }
.ap-layout .ap-section h2 { font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-4); text-wrap: balance; }

/* ---------- 1. Hero ----------
   The same frame on all three pages: the city pages' navy band and faint street grid; a 4:5
   portrait in a white mat on the left; beside it the name, the role, one lead line cut from the
   bio, and two fact lines; on the right the two buttons with the call card's two points under
   them. The portrait frame is 296 x 370 on desktop (the photo inside it 284 x 358). */
.ap-layout .ap-hero {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    background: radial-gradient(120% 90% at 85% 10%, #1D3A5F 0%, var(--navy-800) 60%);
    padding: 14px 0 56px;
}
.ap-layout .ap-hero::before {
    content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 132px);
    transform: rotate(-29deg);
    -webkit-mask-image: radial-gradient(50% 50% at 72% 46%, #000 0%, transparent 100%);
    mask-image: radial-gradient(50% 50% at 72% 46%, #000 0%, transparent 100%);
}
.ap-layout .ap-hero > .container { position: relative; z-index: 1; }
.ap-layout .ap-hero a:focus-visible { outline-color: var(--ap-amber); }

/* The site's breadcrumb trail (template-parts/breadcrumbs.php), drawn inside the hero as on the
   /lawyers/ hub: no bar of its own, on the hero's column line, links 44px tall. */
.ap-layout .ap-hero .breadcrumbs { background: none; padding: 0 0 20px; }
.ap-layout .ap-hero .breadcrumbs .container { max-width: none; padding: 0; }
.ap-layout .ap-hero .breadcrumb-list { padding: 0; min-height: 44px; }
.ap-layout .ap-hero .breadcrumb-list li { margin-bottom: 0; }
.ap-layout .ap-hero .breadcrumb-list a { display: inline-flex; align-items: center; min-height: 44px; }

.ap-layout .ap-hero-grid {
    --portrait: 296px;
    display: grid; grid-template-columns: var(--portrait) minmax(0, 1fr) minmax(0, 300px);
    grid-template-areas: "photo id actions"; column-gap: 40px; align-items: center;
}
/* 4:5 frame, 6px white mat. Nothing is laid over the photo. */
.ap-layout .ap-portrait { grid-area: photo; margin: 0; width: var(--portrait); aspect-ratio: 4 / 5; padding: 6px; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.6); }
.ap-layout .ap-portrait img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 50% 0; border-radius: 11px; background: #d5deea; }
.ap-layout .ap-id { grid-area: id; }
.ap-layout .ap-name { font-family: var(--font-heading); color: #fff; font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 10px; text-wrap: balance; }
/* The role: the lighter navy-grey of the city H1's place line. Not inside the H1. */
.ap-layout .ap-role { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.25; color: var(--ap-on-navy-muted); margin: 0 0 16px; }
/* The lead: an exact phrase of the person's bio, the size of the city pages' hero subtitle. */
.ap-layout .ap-intro { font-size: 1.25rem; line-height: 1.45; color: rgba(255, 255, 255, 0.92); margin: 0; max-width: 30em; text-wrap: pretty; }
/* Two fact lines under a hairline: a line icon, a small label (the firm's list heading), the value. */
.ap-layout .ap-hfacts { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: grid; gap: 16px; }
.ap-layout .ap-hfacts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.ap-layout .ap-hfacts svg { margin-top: 1px; color: var(--ap-amber); }
.ap-layout .ap-hfact-k { font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; line-height: 1.3; color: var(--ap-on-navy-muted); margin: 0 0 3px; }
.ap-layout .ap-hfact-v { font-size: 1.0625rem; line-height: 1.4; color: #fff; margin: 0; }
/* A school name stays together when the line wraps; it only breaks inside if it is wider than the column. */
.ap-layout .ap-hfact-v .q-school, .ap-layout .ap-hfact-v .q-adm { display: inline-block; max-width: 100%; }
.ap-layout .ap-hfact-v .sep { color: rgba(255, 255, 255, 0.55); margin: 0 3px; }
.ap-layout .ap-actions { grid-area: actions; }
.ap-layout .ap-buttons { display: grid; gap: 12px; }
/* Under the buttons: the two points of the "Prefer to Talk?" call card, same check icon. */
.ap-layout .ap-checks { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: grid; gap: 10px; }
.ap-layout .ap-checks li { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; line-height: 1.3; color: #fff; }
.ap-layout .ap-checks svg { color: var(--ap-amber); }
/* The two buttons. Call is the hero's one red button (.btn-accent, the CTA red): 64px tall, 20px
   text, as the city pages' Call button. Free Case Review is the quiet one. */
.ap-layout .ap-call, .ap-layout .ap-review { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.ap-layout .ap-call { min-height: 64px; padding: 16px 24px; font-size: 1.25rem; gap: 12px; }
.ap-layout .ap-review { min-height: 56px; padding: 14px 24px; font-size: 1.0625rem; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.ap-layout .ap-review:hover, .ap-layout .ap-review:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* ---------- 2. The bio ---------- */
/* Body size of the site: 21px desktop, 18px phones. */
.ap-layout .ap-about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ap-col-gap); align-items: start; }
.ap-layout .ap-bio h2 { margin-bottom: 22px; }
.ap-layout .ap-bio p, .ap-layout .path-body p { font-size: 1.3125rem; line-height: 1.65; color: var(--dark-gray); margin: 0 0 1.1em; max-width: 43rem; text-wrap: pretty; }
.ap-layout .ap-bio p:last-child, .ap-layout .path-body p:last-child { margin-bottom: 0; }
/* A short bio opens one step larger (Marla): the page does not need filler to hold its place. */
.ap-layout .ap-bio p.ap-lead { font-size: 1.5rem; line-height: 1.55; color: var(--gray-800); }
/* The firm's disclaimer: a plain small line straight under the paragraph that names a result, or at
   the end of a bio that names none (the firm prints it on every profile). */
.ap-layout .ap-bio p.ap-disclaimer, .ap-layout .path-body p.ap-disclaimer { font-size: 1rem; line-height: 1.5; color: var(--ap-slate); margin: -0.5em 0 1.6em; }
.ap-layout .ap-bio p.ap-disclaimer:last-child, .ap-layout .path-body p.ap-disclaimer:last-child { margin: 0.9em 0 0; }

/* Facts panel: one filled panel, groups split by hairlines. Never sticky: it stays at the top of its
   column and scrolls with the page, on every profile and at every width. */
.ap-layout .ap-facts { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 4px 28px; }
.ap-layout .ap-fact { padding: 22px 0; }
.ap-layout .ap-fact + .ap-fact { border-top: 1px solid var(--gray-200); }
.ap-layout .ap-fact h3, .ap-layout .ledger-row h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; font-weight: 700; color: var(--navy-800); margin: 0 0 10px; }
.ap-layout .ap-fact ul, .ap-layout .ledger-row ul { display: grid; gap: 8px; }
.ap-layout .ap-fact li, .ap-layout .ledger-row li { font-size: 1.125rem; line-height: 1.45; color: var(--gray-800); }
/* The side panel's lists (Eric, Marla), formatted to scan (2026-11-11). Michael's ledger keeps the
   plain rows above. Words and order are the firm's; this is layout only.
   - Group heading: the hero's line icon (cap, scales, people) in blue, then the heading. No chip.
   - Each line is a row: a small blue dot, then the text with a hanging indent, so a wrapped court
     name lines up with its own first line and the next dot shows where the next item starts. The
     text starts on the heading's text line (22px icon + 10px gap = 32px).
   - Education: the school in semibold navy, the degree and year after it in the quieter grey-blue.
   - Eric's three honors: nested under their school line, indented, one size smaller, ring markers. */
.ap-layout .ap-fact h3 { display: flex; align-items: flex-start; gap: 10px; }
.ap-layout .ap-fact h3 svg { width: 22px; height: 22px; color: var(--blue-600); }
/* Row spacing stays 8px, as before, so the panel grows as little as possible beside Eric's bio. */
.ap-layout .ap-fact .ap-fact-list > li { position: relative; padding-left: 32px; }
/* 0.725em = the middle of the first line (line-height 1.45), so the dot sits on it at any size. */
.ap-layout .ap-fact .ap-fact-list > li::before { content: ""; position: absolute; left: 8px; top: calc(0.725em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--blue-600); }
.ap-layout .ap-fact .ap-school { font-weight: 600; color: var(--navy-800); }
.ap-layout .ap-fact .ap-degree { color: var(--ap-slate); }
.ap-layout .ap-fact .ap-fact-sub { margin: 8px 0 2px; gap: 6px; }
.ap-layout .ap-fact .ap-fact-sub li { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.45; color: var(--ap-slate); }
.ap-layout .ap-fact .ap-fact-sub li::before { content: ""; box-sizing: border-box; position: absolute; left: 2px; top: calc(0.725em - 3px); width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--gray-500); }

/* ---------- Michael S. Porter: the bio as a career path ----------
   His bio is already told in order, so the bio itself is the timeline. Left of the rail: when and
   what, in the bio's own words. Right of the rail: the firm's paragraph. The three lists close the
   same two columns. The rail is a thin grey line between text columns, not an edge on a card. */
.ap-layout .path { --label: 300px; --rail: 72px; margin: 36px 0 0; }
.ap-layout .path-stop { position: relative; display: grid; grid-template-columns: var(--label) var(--rail) minmax(0, 1fr); padding-bottom: 44px; }
.ap-layout .path-stop::before { content: ""; position: absolute; left: calc(var(--label) + 23px); top: 0; bottom: 0; width: 2px; background: #aab8cb; }
.ap-layout .path-stop:first-child::before { top: 12px; }
.ap-layout .path-stop:last-child { padding-bottom: 0; }
.ap-layout .path-stop:last-child::before { bottom: auto; height: 12px; }
.ap-layout .path-label { grid-column: 1; padding-right: 8px; }
.ap-layout .path-body { grid-column: 3; }
.ap-layout .path-mark { position: relative; }
.ap-layout .path-mark + .path-mark { margin-top: 26px; }
.ap-layout .path-mark::after { content: ""; box-sizing: border-box; position: absolute; left: calc(var(--label) + 14px); top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--navy-800); }
.ap-layout .path-when { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--blue-600); margin: 0 0 4px; font-variant-numeric: lining-nums tabular-nums; }
.ap-layout .path-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--navy-800); margin: 0; text-wrap: balance; }
.ap-layout .path-detail { font-size: 1.125rem; line-height: 1.45; color: var(--ap-slate); margin: 6px 0 0; text-wrap: pretty; }
/* The stop that names dollar results: the paragraph and its disclaimer share one tinted panel. */
.ap-layout .path-stop.is-result .path-body { background: var(--blue-50); border-radius: var(--radius-lg); padding: 22px 26px 20px; margin: -10px 0 0 -26px; max-width: calc(43rem + 52px); }
.ap-layout .path-stop.is-result .path-mark::after { background: var(--navy-800); }

/* The three lists, on the same columns as the path. */
.ap-layout .ledger { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 6px 28px; margin-top: 48px; }
.ap-layout .ledger-row { display: grid; grid-template-columns: calc(300px - 28px) 72px minmax(0, 1fr); padding: 24px 0; }
.ap-layout .ledger-row + .ledger-row { border-top: 1px solid var(--gray-200); }
.ap-layout .ledger-row h3 { grid-column: 1; margin: 2px 0 0; padding-right: 8px; }
.ap-layout .ledger-row ul { grid-column: 3; }

/* ---------- Eric C. Nordby: three facts from his bio on one grid ----------
   One white panel, three equal columns, the same three parts in each (small label, figure, one
   line), all the same size. The three rows are shared by the columns, so they line up. */
.ap-layout .glance { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding: clamp(28px, 3.6vw, 48px) 0; }
.ap-layout .facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.ap-layout .facts3 li { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding: 30px 36px 32px; }
.ap-layout .facts3 li + li { border-left: 1px solid var(--gray-200); }
.ap-layout .facts3-label { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--blue-600); margin: 0 0 10px; }
.ap-layout .facts3-figure { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2.125rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--navy-800); margin: 0 0 12px; font-variant-numeric: lining-nums; }
.ap-layout .facts3-line { font-size: 1.1875rem; line-height: 1.5; color: var(--gray-800); margin: 0; text-wrap: pretty; }

/* His bio is the longest and his lists are long too: the lists panel is a little narrower and the
   bio a little wider, so the two columns end close to each other. */
.ap-layout .ap-about.is-long { grid-template-columns: minmax(0, 1fr) minmax(0, var(--side, 400px)); align-items: stretch; }
.ap-layout .ap-about.is-long .ap-side { display: flex; flex-direction: column; }
/* The pulled sentence under his lists: one sentence of the bio, word for word, set larger. */
.ap-layout .ap-pull { flex: 1; display: flex; align-items: center; margin: 20px 0 0; padding: 26px 28px 28px; background: var(--navy-800); border-radius: var(--radius-lg); }
.ap-layout .ap-pull p { font-family: var(--font-heading); font-weight: 600; font-size: 1.3125rem; line-height: 1.4; letter-spacing: -0.01em; color: #fff; margin: 0; text-wrap: pretty; }

/* ---------- 3. Firm results: the city pages' band (location.css .location-results) ---------- */
.ap-layout .ap-results { background: var(--navy-800); color: #dfe6f0; padding: var(--spacing-xxl) 0; scroll-margin-top: 110px; }
.ap-layout .ap-results h2 { margin: 0 auto clamp(32px, 4vw, 48px); font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; text-align: center; text-wrap: balance; color: #fff; }
.ap-layout .ap-results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0 0 16px; }
.ap-layout .ap-result-card { background: #fff; border-radius: 8px; padding: 28px 24px 26px; text-align: center; min-width: 0; }
.ap-layout .ap-result-amount { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--navy-800); margin-bottom: 6px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ap-layout .ap-result-type { display: block; font-size: 1.0625rem; line-height: 1.35; color: var(--ap-slate); }
.ap-layout .ap-results-disclaimer { margin: 0; font-size: 1rem; text-align: center; color: #b9c6d6; }

/* ---------- 4. What Happens Next, the call card and the case review form ---------- */
.ap-layout .ap-next-section { background: var(--light-gray); }
.ap-layout .ap-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: var(--ap-col-gap); align-items: start; }
.ap-layout .ap-steps { margin: var(--space-6) 0; counter-reset: ap-step; }
.ap-layout .ap-steps li { counter-increment: ap-step; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: center; padding-bottom: 28px; font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; line-height: 1.35; color: var(--navy-800); }
.ap-layout .ap-steps li::before { content: counter(ap-step); width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--navy-800); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-layout .ap-steps li::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; background: #D3DAE4; }
.ap-layout .ap-steps li:last-child { padding-bottom: 0; }
.ap-layout .ap-steps li:last-child::after { display: none; }

.ap-layout .ap-phone-panel { background: var(--navy-800); color: #DFE6F0; border-radius: 8px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); }
.ap-layout .ap-phone-panel h3 { font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 6px; }
.ap-layout .ap-phone-intro p { margin: 0; font-size: 1.05rem; color: #DFE6F0; }
.ap-layout .ap-phone-number { display: flex; align-items: center; min-height: 48px; color: #fff; align-self: flex-start; text-decoration: none; }
.ap-layout .ap-phone-vanity { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.25rem, 4.2vw, 3rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.ap-layout .ap-phone-vanity em { font-style: normal; color: var(--ap-amber); }
.ap-layout .ap-phone-number:hover .ap-phone-vanity, .ap-layout .ap-phone-number:focus-visible .ap-phone-vanity { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ap-layout .ap-phone-panel a:focus-visible { outline: 3px solid var(--ap-amber); outline-offset: 3px; }
.ap-layout .ap-phone-points { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ap-layout .ap-phone-points li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.05rem; }
.ap-layout .ap-phone-points svg { color: var(--ap-amber); }

/* The form card: WS Form 3 (the site-wide WS Form skin in main.css sets its fields and colours). */
.ap-layout .ap-form-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06); scroll-margin-top: 110px; }
.ap-layout .ap-form-card:focus { outline: none; }
.ap-layout .ap-form-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.ap-layout .ap-form-card h3 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 4px; }
.ap-layout .ap-form-card > p { font-size: 1rem; line-height: 1.45; color: var(--dark-gray); margin: 0 0 var(--space-4); }
/* Text WS Form prints inside the form (help text, messages) keeps the form's own size. */
.ap-layout .ap-form p { color: var(--dark-gray); font-size: 1rem; margin-bottom: var(--space-2); line-height: 1.5; }
/* Fields at least 48px tall, the button full width, as in the city pages' form card (the selectors
   match WS Form's own so these win without !important). */
.ap-layout .ap-form .wsf-form input.wsf-field, .ap-layout .ap-form .wsf-form select.wsf-field { min-height: 48px; }
.ap-layout .ap-form .wsf-button { width: 100%; min-height: 48px; box-shadow: none; transform: none; }

/* ---------- 5. The other two lawyers: the hub's cards as rows ----------
   Heading and sentence on top, two cards side by side, the About link (and the firm's disclaimer,
   when a card names a dollar result) under them. Card link, hover and focus: our-lawyers.css. */
.ap-layout .our-lawyers { background: #fff; }
.ap-layout .our-lawyers .our-lawyers-intro { margin-bottom: var(--space-6); }
.ap-layout .our-lawyers .our-lawyers-intro h2 { line-height: 1.15; letter-spacing: -0.02em; }
.ap-layout .our-lawyers .our-lawyers-intro p { font-size: 1.125rem; line-height: 1.65; margin: 0; max-width: 40rem; }
.ap-layout .our-lawyers .our-lawyers-foot { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; }
.ap-layout .our-lawyers .our-lawyers-more:focus-visible { color: var(--red-700); }
.ap-layout .our-lawyers .our-lawyers-note { font-size: 1rem; line-height: 1.5; color: var(--ap-slate); margin: 0; }

.ap-layout .our-lawyers .lh-lawyers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.ap-layout .our-lawyers .lh-lawyer { flex-direction: row; margin-bottom: 0; }
/* 144px wide: Marla's card crop holds about 276 real pixels across, so this is its 2x ceiling. */
.ap-layout .our-lawyers .lh-lawyer-photo { flex: 0 0 144px; aspect-ratio: 4 / 5; align-self: flex-start; border-radius: 12px; margin: 20px 0 20px 20px; }
.ap-layout .our-lawyers .lh-lawyer-body { padding: 20px 24px 10px 20px; min-width: 0; }
.ap-layout .our-lawyers .lh-lawyer-summary { margin-bottom: 0 !important; }
.ap-layout .our-lawyers .lh-lawyer-cue { margin-top: auto; padding-top: 6px; min-height: var(--tap-min); }

/* ---------- Small laptop ---------- */
@media (max-width: 1199px) {
    .ap-layout .ap-result-amount { font-size: 1.5rem; }
    .ap-layout .ap-result-card { padding-left: 16px; padding-right: 16px; }
    .ap-layout .path { --label: 240px; --rail: 64px; }
    .ap-layout .ledger-row { grid-template-columns: calc(240px - 28px) 64px minmax(0, 1fr); }
    .ap-layout .ap-hero-grid { --portrait: 256px; grid-template-columns: var(--portrait) minmax(0, 1fr) minmax(0, 270px); column-gap: 28px; }
    .ap-layout .ap-intro { font-size: 1.125rem; }
    .ap-layout .ap-call { font-size: 1.125rem; padding-left: 16px; padding-right: 16px; }
    .ap-layout .facts3 li { padding: 26px 28px 28px; }
    .ap-layout .ap-about.is-long { --side: 340px; column-gap: 48px; }
}
/* Where the two schools do not fit on one line (small laptops and phones) they stack, without the dot. */
@media (min-width: 993px) and (max-width: 1199px), (max-width: 720px) {
    .ap-layout .ap-hfact-v.is-schools .q-school { display: block; }
    .ap-layout .ap-hfact-v.is-schools .sep { display: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 992px) {
    /* Hero: the portrait on the left with name, role, lead and facts beside it; under them one row
       with the two buttons and the two points. */
    .ap-layout .ap-hero-grid { --portrait: 224px; grid-template-columns: var(--portrait) minmax(0, 1fr); grid-template-areas: "photo id" "actions actions"; column-gap: 32px; row-gap: 28px; }
    .ap-layout .ap-id { align-self: center; }
    .ap-layout .ap-intro { font-size: 1.125rem; }
    .ap-layout .ap-hfacts { margin-top: 18px; padding-top: 18px; gap: 12px; }
    .ap-layout .ap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
    .ap-layout .ap-buttons { grid-template-columns: auto auto; }
    .ap-layout .ap-checks { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
    .ap-layout .ap-call { font-size: 1.25rem; padding-left: 28px; padding-right: 28px; }
    .ap-layout .ap-about { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); }
    .ap-layout .ap-about.is-long { grid-template-columns: minmax(0, 1fr); }
    .ap-layout .facts3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .ap-layout .facts3 li { display: block; grid-row: auto; padding: 24px 28px 26px; }
    .ap-layout .facts3 li + li { border-left: 0; border-top: 1px solid var(--gray-200); }
    .ap-layout .ap-next { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .ap-layout .ap-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-layout .ap-result-card { padding-left: 24px; padding-right: 24px; }
    .ap-layout .path { --label: 216px; --rail: 56px; }
    .ap-layout .path-stop::before { left: calc(var(--label) + 19px); }
    .ap-layout .path-mark::after { left: calc(var(--label) + 10px); }
    .ap-layout .path-stop.is-result .path-body { margin-left: -18px; padding: 20px 20px 18px 18px; }
    .ap-layout .ledger-row { grid-template-columns: calc(216px - 28px) 56px minmax(0, 1fr); }
}
/* 721 to 992px: each group of the facts panel is one row (heading left, list right); the steps, call
   card and form in one centred column, as on the city pages. */
@media (min-width: 721px) and (max-width: 992px) {
    .ap-layout .ap-fact { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 24px; align-items: start; }
    .ap-layout .ap-fact > * { min-width: 0; }
    .ap-layout .ap-fact h3 { margin: 0; padding-top: 2px; }
    /* The list has its own column here, so the rows need only the marker's indent. */
    .ap-layout .ap-fact .ap-fact-list > li { padding-left: 20px; }
    .ap-layout .ap-fact .ap-fact-list > li::before { left: 2px; }
    /* The three facts: label and figure in one column, the line beside them, the same columns in every row. */
    .ap-layout .facts3 li { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; align-items: start; }
    .ap-layout .facts3 li > * { min-width: 0; }
    .ap-layout .facts3-label { grid-column: 1; grid-row: 1; }
    .ap-layout .facts3-figure { grid-column: 1; grid-row: 2; margin: 0; }
    .ap-layout .facts3-line { grid-column: 2; grid-row: 1 / span 2; padding-top: 2px; }
    .ap-layout .ap-next-section .container { max-width: 648px; }
}
@media (max-width: 899px) {
    .ap-layout .our-lawyers .lh-lawyers { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
    .ap-layout .ap-results h2 { font-size: 1.6rem; }
    .ap-layout .ap-bio p, .ap-layout .path-body p { font-size: 1.125rem; }
    .ap-layout .ap-bio p.ap-lead { font-size: 1.25rem; }
    .ap-layout .ap-bio p.ap-disclaimer, .ap-layout .path-body p.ap-disclaimer { font-size: 1rem; }
    .ap-layout .ap-steps li { font-size: 1.05rem; }
    .ap-layout .ap-phone-vanity { font-size: clamp(1.75rem, 9vw, 2.25rem); }
    .ap-layout .ap-results-grid { gap: var(--space-4); }
    .ap-layout .ap-result-card { padding: 18px var(--space-4); }
    .ap-layout .ap-result-amount { font-size: clamp(1.1rem, 5vw, 1.5rem); }
    .ap-layout .ap-result-type { font-size: 1rem; }
}
@media (max-width: 720px) {
    .ap-layout .container { padding-left: 16px; padding-right: 16px; }
    /* Hero: a small portrait beside the name, role and lead; then the two buttons full width, so the
       Call button is on the first screen; then the facts and the two points. */
    .ap-layout .ap-hero { padding: 8px 0 36px; }
    .ap-layout .ap-hero .breadcrumbs { padding-bottom: 8px; }
    .ap-layout .ap-hero-grid { --portrait: clamp(160px, 40vw, 200px); grid-template-areas: "photo id" "buttons buttons" "facts facts" "checks checks"; column-gap: 16px; row-gap: 18px; }
    .ap-layout .ap-id, .ap-layout .ap-actions { display: contents; }
    .ap-layout .ap-id-main { grid-area: id; align-self: center; min-width: 0; }
    .ap-layout .ap-id-head { min-width: 0; overflow-wrap: anywhere; }
    .ap-layout .ap-intro { font-size: 1.0625rem; line-height: 1.4; }
    .ap-layout .ap-buttons { grid-area: buttons; grid-template-columns: minmax(0, 1fr); margin-top: 2px; }
    .ap-layout .ap-hfacts { grid-area: facts; margin: 4px 0 0; padding-top: 18px; gap: 12px; }
    .ap-layout .ap-checks { grid-area: checks; margin: 0; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
    .ap-layout .ap-portrait { padding: 4px; border-radius: 12px; }
    .ap-layout .ap-portrait img { border-radius: 8px; }
    .ap-layout .ap-name { font-size: clamp(1.6rem, 7vw, 2.25rem); margin-bottom: 6px; }
    .ap-layout .ap-role { font-size: 1.05rem; margin: 0 0 10px; }
    .ap-layout .ap-call { padding-left: 16px; padding-right: 16px; }
    .ap-layout .ap-facts { padding: 2px 20px; }
    /* List text 17px on phones, the nested honors stay 16px: at 320px a row has 214px for its text. */
    .ap-layout .ap-fact .ap-fact-list > li { font-size: 1.0625rem; }
    .ap-layout .facts3 li { padding: 22px 20px 24px; }
    .ap-layout .facts3-line { font-size: 1.125rem; }
    .ap-layout .ap-pull { padding: 22px 20px 24px; }
    .ap-layout .ap-pull p { font-size: 1.1875rem; }
    .ap-layout .ap-form-card { padding: var(--space-5) var(--space-4); }
    /* The path: the rail moves to the left edge, each label sits over its paragraph. */
    .ap-layout .path { --label: 0px; --rail: 30px; margin-top: 28px; }
    .ap-layout .path-stop { grid-template-columns: var(--rail) minmax(0, 1fr); padding-bottom: 36px; }
    .ap-layout .path-stop::before { left: 7px; }
    .ap-layout .path-label { grid-column: 2; padding: 0 0 12px; }
    .ap-layout .path-body { grid-column: 2; }
    .ap-layout .path-mark::after { left: -32px; top: 1px; }
    .ap-layout .path-mark + .path-mark { margin-top: 16px; }
    .ap-layout .path-title { font-size: 1.125rem; }
    /* The result stop: label, paragraph and disclaimer in one tinted panel. */
    .ap-layout .path-stop.is-result .path-label { background: var(--blue-50); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 16px 18px 6px; }
    .ap-layout .path-stop.is-result .path-mark::after { left: -50px; top: 17px; }
    .ap-layout .path-stop.is-result .path-body { margin: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 6px 18px 18px; }
    .ap-layout .ledger { padding: 2px 20px; margin-top: 36px; }
    .ap-layout .ledger-row { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
    .ap-layout .ledger-row h3 { grid-column: 1; margin: 0 0 10px; }
    .ap-layout .ledger-row ul { grid-column: 1; }
    .ap-layout .our-lawyers .lh-lawyer-photo { flex-basis: 112px; margin: 14px 0 14px 14px; }
    .ap-layout .our-lawyers .lh-lawyer-body { padding: 16px 16px 8px; }
}
/* Under 400px the text column is too narrow for the lead: it goes under the photo row, full width. */
@media (max-width: 399px) {
    .ap-layout .ap-hero-grid { --portrait: 40vw; grid-template-areas: "photo head" "intro intro" "buttons buttons" "facts facts" "checks checks"; column-gap: 14px; row-gap: 16px; }
    .ap-layout .ap-id-main { display: contents; }
    .ap-layout .ap-id-head { grid-area: head; align-self: center; }
    .ap-layout .ap-intro { grid-area: intro; }
    .ap-layout .ap-role { margin: 0; }
}
@media (max-width: 374px) {
    .ap-layout .ap-results h2 { font-size: 1.5rem; }
    .ap-layout .ap-results-grid { gap: 12px; }
    .ap-layout .ap-result-card { padding: var(--space-4) 10px; }
    .ap-layout .our-lawyers .lh-lawyer-photo { flex-basis: 92px; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-layout *, .ap-layout *::before, .ap-layout *::after { transition: none !important; }
}