/* HOME (v3, 2026-10-02): scoped layouts, photography, and typography for the home page.
   Rules written :is(.home, .practice-landing) also style the Practice Areas landing (its state band reuses
   template-parts/home-practice.php). They are unchanged from v2; the home page overrides them in HOME PRACTICE below.
   v3: the home page no longer redefines the site tokens (--max-w, --gutter, the type scale) on .home, because the header
   and footer inherited them and moved 12px between home and every other page. Home-only sizes are --home-* below.
   The sections below the hero share one grid: the federal section's 4fr / 8fr columns (--home-cols). */
.home { --home-cols: minmax(0, 4fr) minmax(0, 8fr); --home-col-gap: clamp(2.5rem, 6vw, 6rem); --home-h2: clamp(2rem, 3.35vw, 3rem); --home-lede: clamp(1.1875rem, 1.5vw, 1.375rem); --home-statement: clamp(1.625rem, 2.15vw, 1.875rem); }
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home img { display: block; max-width: 100%; height: auto; }
.home a { color: inherit; }
.home .skip-link { color: var(--white); }
.home p { margin: 0 0 1.1em; }
.home ul, .home ol { margin: 0; padding: 0; list-style: none; }
.home h1, .home h2, .home h3 { font-family: var(--font-display); font-stretch: 86%; font-weight: 750; letter-spacing: -.02em; line-height: 1.02; margin: 0; }
/* Focus: style.css (lake, and sky inside .on-dark). v2 set every home ring to lake here, which also reached the footer (2.47:1 on ink). */
.home .on-dark :focus-visible { outline-color: var(--sky); }
.home .section { padding: var(--space-section) 0; }
.home .meta { font-family: var(--font-display); font-size: var(--t-meta); font-weight: 500; line-height: 1.45; }
.home .lede { font-size: var(--home-lede); line-height: 1.5; }
.home .btn { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; line-height: 1; padding: 1rem 1.4rem; background: var(--steel); color: var(--white); text-decoration: none; border-radius: 2px; transition: background-color .25s var(--ease-out), color .25s var(--ease-out); }
.home .btn:hover { background: var(--lake); }
.home .btn--light, .home .btn--light:is(:hover, :focus-visible) { background: var(--white); }
.home .btn--light { color: var(--steel); }
.home .btn--light:is(:hover, :focus-visible) { color: var(--white); }
.home .text-link { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--lake); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: .1em; transition: color .25s var(--ease-out); }
.home .text-link:hover { color: var(--steel); }
:is(.home, .practice-landing) .on-dark .text-link { color: var(--sky); }
:is(.home, .practice-landing) .on-dark .text-link:hover { color: var(--white); }
.home .site-header { background: #141B26; }

/* HERO: full height. Three columns: the photo, the text column, and the page margin. The text column is
   clamp(23.5rem, 33vw, 30rem) wide plus its inset from the photo, and the margin column is the site's (.wrap), so the
   H1, quote, and marks end exactly where the header's button ends at every width. The photo takes the rest. The H1 is
   sized to that column so "Federal and state" holds one line. The column's content is centered as one block, so the
   space above the H1 matches the space below the recognition marks. */
.home .hero { --hero-text: clamp(23.5rem, 33vw, 30rem); --hero-inset: clamp(1.5rem, 3vw, 3rem); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--hero-inset) + var(--hero-text)) max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter))); min-height: calc(100svh - var(--header-h) - 1px); background: var(--hero-backdrop); color: var(--white); overflow: hidden; }
.admin-bar.home .hero { min-height: calc(100svh - var(--header-h) - 1px - var(--wp-admin--admin-bar--height, 0px)); }
/* The partners photo as v1 treats it (Dan, 2026-10-06): the full height of the hero, cropped to fill its column, the right
   edge fading into the backdrop. */
.home .hero-photo { grid-column: 1; position: relative; margin: 0; min-height: 0; }
.home .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 22%); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 9rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 9rem), transparent); }
.home .hero-panel { grid-column: 2; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 5vh, 3.25rem); padding: clamp(2rem, 6vh, 4rem) 0 clamp(2rem, 6vh, 4rem) var(--hero-inset); }
.home .hero-main { display: flex; flex-direction: column; }
.home .hero-heading { font-size: clamp(2.75rem, 4.4vw, 4rem); line-height: .98; text-wrap: balance; color: var(--white); max-width: none; }
.home .hero-quotes { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); --quote-interval: 9000ms; }
.home .hero-quotes-track { display: grid; }
/* The quotes take turns: the outgoing one fades out first, then the next fades in, so the two never show at once. */
.home .hero-quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease-out, visibility 0s linear .45s; }
.home .hero-quote.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease-out) .45s, visibility 0s linear .45s; }
.home .hero-quote figure, .home .hero-quote blockquote { margin: 0; }
.home .hero-quote .hero-quote-context { margin: 0 0 .55rem; font-size: 1rem; line-height: 1.5; color: var(--ice); text-indent: -.4em; text-wrap: pretty; }
.home .hero-quote .hero-quote-core { margin: 0; font-size: clamp(1.375rem, 1.85vw, 1.75rem); font-variation-settings: 'opsz' 48; line-height: 1.28; letter-spacing: -.01em; color: var(--white); text-indent: 0; text-wrap: pretty; }
.home .hero-quote .hero-quote-core:first-child { text-indent: -.4em; }
.home .hero-quote figcaption { margin-top: .9rem; color: var(--sky); text-wrap: balance; }
.home .hero-quotes-controls { display: flex; align-items: center; gap: .25rem; margin-top: 1rem; }
.home .hero-quotes-dot { position: relative; width: 2.75rem; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.home .hero-quotes-dot::before, .home .hero-quotes-dot::after { content: ''; position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; }
/* Inactive bar: sky at 50% on the backdrop measures 3.3:1 (WCAG 1.4.11 asks 3:1 for a control's only visible part). */
.home .hero-quotes-dot::before { right: 0; background: rgba(156, 195, 221, .5); }
.home .hero-quotes-dot::after { width: 0; background: var(--sky); }
.home .hero-quotes-dot[aria-current="true"]::after { width: 100%; }
.home .hero-quotes.is-ticking .hero-quotes-dot[aria-current="true"]::after { animation: hero-quote-timer var(--quote-interval) linear forwards; }
.home .hero-quotes.is-paused .hero-quotes-dot[aria-current="true"]::after { animation-play-state: paused; }
.home .hero-quotes-dot:hover::before { background: var(--sky); }
.home .hero-quotes-toggle { margin-left: .85rem; padding: .25rem 0; min-height: 24px; border: 0; background: none; font-family: var(--font-display); font-weight: 600; font-size: .8125rem; letter-spacing: .01em; color: var(--sky); text-decoration: none; text-underline-offset: .25em; cursor: pointer; transition: color .25s var(--ease-out); }
.home .hero-quotes-toggle:is(:hover, :focus-visible) { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; }
@keyframes hero-quote-timer { from { width: 0; } to { width: 100%; } }
.home .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.home .hero-phone { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--white); text-decoration: none; }
.home .hero-phone:hover { color: var(--sky); }
/* Recognition: two marks under one hairline, split by a 1px rule, names over categories (Chambers has the longer category,
   so its column is wider). Only a mark with a link
   (Chambers) carries an underline on its name. Between 901 and 1229px the text column is too narrow for the pair, so
   they stack as ruled rows and the names never wrap. */
.home .hero-recognition { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); border-top: 1px solid rgba(156, 195, 221, .3); }
.home .hero-recognition li { display: flex; padding: 1rem 1.25rem 0 0; }
.home .hero-recognition li + li { padding: 1rem 0 0 1.25rem; border-left: 1px solid rgba(156, 195, 221, .3); }
.home .hero-mark { display: flex; flex-direction: column; gap: .3rem; color: var(--white); text-decoration: none; }
.home .hero-mark-name { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 600; font-variation-settings: 'opsz' 36; line-height: 1.2; letter-spacing: -.005em; }
.home a.hero-mark .hero-mark-name { text-decoration: underline; text-decoration-color: rgba(156, 195, 221, .55); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .25s var(--ease-out); }
.home a.hero-mark:is(:hover, :focus-visible) .hero-mark-name { text-decoration-color: var(--sky); }
.home .hero-mark-cat { font-family: var(--font-display); font-size: .875rem; line-height: 1.4; color: var(--ice); text-wrap: balance; }

/* PRACTICE (shared with the Practice Areas landing; home overrides follow in HOME PRACTICE) */
:is(.home, .practice-landing) .practice { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
:is(.home, .practice-landing) .practice-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); }
:is(.home, .practice-landing) .practice-group + .practice-group { margin-top: clamp(3.5rem, 7vw, 6rem); }
:is(.home, .practice-landing) .practice-intro h2 { font-size: var(--t-h2); color: var(--steel); max-width: 14ch; text-wrap: balance; }
:is(.home, .practice-landing) .practice-intro h2 a { color: inherit; text-decoration: none; }
:is(.home, .practice-landing) .practice-intro h2 a:hover { color: var(--lake); }
:is(.home, .practice-landing) .practice-intro .lede { margin: 1.25rem 0 1.5rem; max-width: 34rem; }
:is(.home, .practice-landing) .practice-index { columns: auto; column-gap: clamp(1.5rem, 3vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; align-content: start; }
:is(.home, .practice-landing) .practice-index li { break-inside: avoid; border-bottom: 1px solid var(--rule-light); display: flex; align-items: center; }
:is(.home, .practice-landing) .practice-index li:first-child { border-top: 1px solid var(--rule-light); }
:is(.home, .practice-landing) .practice-index a, :is(.home, .practice-landing) .practice-index span { display: block; padding: .9rem 0; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); text-decoration: none; transition: color .3s var(--ease-out), transform .35s var(--ease-out); width: 100%; min-height: 44px; }
/* Practice links (Dan, 2026-10-06): lake at rest; on hover and keyboard focus they turn ink and slide 8px right. */
:is(.home, .practice-landing) .practice-index a { color: var(--lake); }
:is(.home, .practice-landing) .practice-index a:is(:hover, :focus-visible) { color: var(--ink); transform: translateX(.5rem); }
:is(.home, .practice-landing) .practice-index--plain span { color: var(--steel); }
:is(.home, .practice-landing) .practice-index-label { margin-bottom: .75rem; color: var(--mist); }
:is(.home, .practice-landing) .practice-minor { margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; color: var(--mist); }
:is(.home, .practice-landing) .practice-minor a { color: var(--lake); }
:is(.home, .practice-landing) .practice-clusters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) 2rem; align-content: start; }
/* Group labels read as headings over their lists (Dan, 2026-10-05): the federal hub index's label size, steel. */
:is(.home, .practice-landing) .practice-cluster-label { margin: 0 0 .75rem; font-size: clamp(1.125rem, 1.35vw, 1.25rem); font-stretch: 100%; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--steel); }
:is(.home, .practice-landing) .practice-clusters .practice-index { display: block; }
:is(.home, .practice-landing) .practice-clusters .practice-index li:nth-child(2) { border-top: 0; }
:is(.home, .practice-landing) .practice-clusters .practice-index a { padding: .7rem 0; font-size: 1rem; }
:is(.home, .practice-landing) .practice--state { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); padding-top: clamp(3.5rem, 7vw, 6rem); }
:is(.home, .practice-landing) .practice--state::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--state-image) left 62% / cover no-repeat; }
:is(.home, .practice-landing) .practice--state::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 26, 36, .3) 0%, rgba(14, 26, 36, .38) 14%, rgba(14, 26, 36, .5) 26%, rgba(14, 26, 36, .66) 33%, rgba(14, 26, 36, .77) 39%, rgba(14, 26, 36, .81) 50%, rgba(14, 26, 36, .84) 70%, rgba(14, 26, 36, .86) 100%); }
:is(.home, .practice-landing) .practice-state-body { display: grid; gap: clamp(2rem, 4vw, 2.75rem); width: min(100%, 36rem); margin-left: auto; }
:is(.home, .practice-landing) .practice-state-body .practice-intro .lede { margin-bottom: 1.25rem; }
:is(.home, .practice-landing) .practice--state .practice-intro h2 { color: var(--white); }
:is(.home, .practice-landing) .practice--state .practice-intro h2 a:hover { color: var(--sky); }
:is(.home, .practice-landing) .practice--state .lede { color: var(--ice); }
:is(.home, .practice-landing) .practice--state .practice-cluster-label { color: var(--sky); }
:is(.home, .practice-landing) .practice--state .practice-index li, :is(.home, .practice-landing) .practice--state .practice-index li:first-child, :is(.home, .practice-landing) .practice--state .practice-index li:nth-child(2) { border-color: var(--rule-dark); }
:is(.home, .practice-landing) .practice--state .practice-index--plain span { color: var(--white); }
:is(.home, .practice-landing) .practice--state .practice-minor { margin-top: 1.75rem; color: var(--ice); }
:is(.home, .practice-landing) .practice--state .practice-minor a { color: var(--sky); }
:is(.home, .practice-landing) .practice--state .practice-minor a:hover { color: var(--white); }
:is(.home, .practice-landing) .practice-index li:nth-child(2) { border-top: 1px solid var(--rule-light); }

/* HOME PRACTICE (v3; template-parts/v3-home-practice.php). Same spacing step as every home section. The headings are
   plain text (the overview link under each one goes to the same page). Federal rows are links, so they carry the rule;
   the state case types aren't, so they take the site's dot instead. */
.home .practice, .home .practice--state { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.home .practice-intro h2 { font-size: var(--home-h2); }
.home .practice-clusters .practice-index a { text-wrap: balance; }
/* The lists in each row start level even when one group label runs to two lines: each group spans two rows of the
   clusters grid (label, list), the label sitting on the shared baseline row. */
.home .practice-clusters { row-gap: 0; }
.home .practice-clusters > .practice-cluster { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.home .practice-clusters > .practice-cluster > .practice-cluster-label { align-self: end; }
.home .practice-clusters > .practice-cluster:nth-child(n + 3) { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.home .practice--state .practice-cluster-label { margin-bottom: .9rem; }
/* The state text starts on the line the federal ledger starts on (the 4/8 grid), so the two practice sections read as
   one index. The sketch keeps the left column. */
.home .practice--state .wrap { display: grid; grid-template-columns: var(--home-cols); column-gap: var(--home-col-gap); }
.home .practice-state-body { grid-column: 2; width: auto; margin-left: 0; }
/* The case list's second column starts where the federal ledger's second column does (same 2rem gap). */
.home .practice--state .practice-minor { max-width: 34rem; }
.home .practice-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 2rem; }
.home .practice-cases li { position: relative; padding-left: 1.1rem; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.35; color: var(--white); }
.home .practice-cases li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.home .practice--state .practice-minor { margin: 2.25rem 0 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; color: var(--ice); text-wrap: pretty; }
.home .practice--state .practice-minor a { color: var(--sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* INTRODUCTION (v1/v2 layout, Dan 2026-10-05): the statement across the top, the three points in three columns under it,
   split by hairlines. The divider under the points sits midway: the same space above it and above the federal heading. */
.home .firm-intro { padding-bottom: 0; }
.home .firm-intro-heading { max-width: 30ch; font-family: var(--font-body); font-size: clamp(1.875rem, 2.9vw, 2.75rem); font-weight: 400; font-stretch: 100%; font-variation-settings: 'opsz' 48; line-height: 1.16; letter-spacing: -.02em; color: var(--steel); text-wrap: balance; }
.home .firm-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); --firm-gap: clamp(2rem, 4vw, 4rem); gap: 2rem var(--firm-gap); margin-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.75rem, 5.6vw, 5rem); border-bottom: 1px solid var(--rule-light); }
.home .firm-point { position: relative; }
.home .firm-point + .firm-point::before { content: ''; position: absolute; top: 20%; bottom: 20%; left: calc(var(--firm-gap) / -2); width: 1px; background: var(--rule-light); }
.home .firm-point h3 { margin-bottom: .6rem; font-size: 1.1875rem; font-stretch: 100%; letter-spacing: -.005em; line-height: 1.25; color: var(--steel); }
.home .firm-point p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

/* PARTNERS: the statement and paragraph in the left column, the two portraits on the right column's two tracks (the
   same tracks as the federal clusters above and the client quotes below). */
.home .lawyers { position: relative; isolation: isolate; overflow: hidden; background: var(--fog); }
.home .lawyers-row { display: grid; grid-template-columns: var(--home-cols); gap: 2.5rem var(--home-col-gap); align-items: start; }
.home .lawyers-copy { position: relative; }
/* The statement is the section's headline, at the size of "What clients say."; the names below the portraits are captions. */
.home .lawyers-statement { font-size: clamp(1.875rem, 2.9vw, 2.75rem); line-height: 1.16; font-weight: 400; color: var(--steel); letter-spacing: -.02em; margin-bottom: 1.5rem; font-family: var(--font-body); font-stretch: 100%; font-variation-settings: 'opsz' 48; text-wrap: balance; }
.home .lawyers-statement-lead { display: block; }
.home .lawyers-copy p { text-wrap: pretty; }
.home .partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.home .partner { display: block; }
.home .partner-photo { margin: 0 0 1.25rem; aspect-ratio: 6 / 7; overflow: hidden; background: #1A2638; }
.home .partner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform 1.2s var(--ease-out); }
.home .partner a:hover .partner-photo img, .home .partner a:focus-visible .partner-photo img { transform: scale(1.03); }
.home .partner > a { text-decoration: none; color: inherit; display: block; }
/* A 1px lake frame offset behind each portrait (Dan asked for a partial border, 2026-10-06): the photo covers most of it,
   so it reads along the right and bottom edges. It settles in after the portrait's wipe and eases out a little on hover. */
.home .partner-frame { --frame-off: 14px; position: relative; display: block; margin: 0 0 calc(1.25rem + var(--frame-off)); }
.home .partner-frame .partner-photo { position: relative; z-index: 1; margin: 0; }
.home .partner-frame::before { content: ''; position: absolute; inset: var(--frame-off) calc(-1 * var(--frame-off)) calc(-1 * var(--frame-off)) var(--frame-off); border: 1px solid var(--lake); pointer-events: none; transition: transform .45s var(--ease-out), opacity .6s ease-out; }
.home .partner a:is(:hover, :focus-visible) .partner-frame::before { transform: translate(4px, 4px); }
.fx-ready .fx-wipe.is-in .partner-frame::before { animation: partner-frame-in .9s var(--ease-out) calc(var(--fx-delay, 0ms) + 600ms) backwards; }
@keyframes partner-frame-in { from { opacity: 0; transform: translate(calc(-1 * var(--frame-off)), calc(-1 * var(--frame-off))); } }
.fx-ready .fx-wipe:not(.is-in) .partner-frame::before { opacity: 0; transform: translate(calc(-1 * var(--frame-off)), calc(-1 * var(--frame-off))); }
.home .partner h3 { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); font-stretch: 100%; font-weight: 700; letter-spacing: -.01em; color: var(--steel); transition: color .25s var(--ease-out); }
.home .partner a:hover h3, .home .partner a:focus-visible h3 { color: var(--lake); }
/* AMPERSAND: the logo's ampersand, once, at 5%, in the left column below the copy and clear of it, cut only by the
   section's bottom edge. It sits 3rem in from the column's edge so the thread, which runs down that edge, passes it.
   Below 1240px the copy is as tall as the portraits and there is no room under it, so it isn't shown. */
.home .lawyers-copy::after { content: ''; position: absolute; z-index: -1; left: 3rem; top: calc(100% + 2rem); width: 12.5rem; aspect-ratio: 55 / 63; background: url('../images/home/ampersand.svg') center / contain no-repeat; opacity: .05; pointer-events: none; transition: opacity 2s ease-out; }
.fx-ready .lawyers:not(.is-in) .lawyers-copy::after { opacity: 0; }
@media (max-width: 1239px) { .home .lawyers-copy::after { display: none; } }

/* WHAT CLIENTS SAY: the heading and the reviews link in the left column; the quotes in the right column, each
   attribution under its quote. */
.home .clients { background: var(--limestone-light); }
.home .clients-grid { display: grid; grid-template-columns: var(--home-cols); grid-template-rows: auto 1fr; column-gap: var(--home-col-gap); align-items: start; }
.home .clients-heading { grid-column: 1; grid-row: 1; padding-top: clamp(1.2rem, 2.1vw, 1.8rem); font-family: var(--font-body); font-size: clamp(1.875rem, 2.9vw, 2.75rem); font-weight: 400; font-stretch: 100%; font-variation-settings: 'opsz' 48; line-height: 1.16; letter-spacing: -.02em; color: var(--steel); text-wrap: balance; }
.home .client-quotes { grid-column: 2; grid-row: 1 / span 2; border-bottom: 1px solid var(--rule-light); }
.home .client-quotes li { border-top: 1px solid var(--rule-light); }
.home .client-quote { margin: 0; padding: clamp(1.5rem, 2.4vw, 2.1rem) 0; }
.home .client-quote blockquote { margin: 0; }
.home .client-quote p { margin: 0; max-width: 23em; font-family: var(--font-body); font-size: clamp(1.375rem, 1.95vw, 1.75rem); font-variation-settings: 'opsz' 48; line-height: 1.26; letter-spacing: -.012em; color: var(--steel); text-indent: -.42em; text-wrap: pretty; }
.home .client-quote figcaption { margin-top: .75rem; color: var(--lake); text-wrap: balance; }
.home .clients-foot { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.75rem; }

/* PRACTICE AREAS LANDING: the home practice sections plus the photo header and a Civil Rights section. */
.practice-landing .practice-intro h2 { font-weight: 750; letter-spacing: -.02em; line-height: 1.02; }
.practice-landing .practice-header--landing { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem); }
.practice-landing .practice-header--landing h1 { max-width: 12ch; }
.practice-landing .practice-header--landing .lede { max-width: 36rem; margin: 1.5rem 0 0; color: var(--ice); }
.practice-landing .practice-civil { background: var(--fog); }
.practice-landing .practice-civil-body .lede { max-width: 40rem; margin: 0 0 1.5rem; }

/* HOME MOTION (the shared thread and reveals are in style.css, MOTION AND THREAD) */
/* CLIENT QUOTES: each row's rule draws left to right as the row arrives. */
.fx-ready .client-quotes li { position: relative; border-top-color: transparent; }
.fx-ready .client-quotes li::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--rule-light); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) var(--fx-delay, 0ms); }
.fx-ready .client-quotes li:not(.is-in)::before { transform: scaleX(0); }
.fx-ready .client-quotes li .client-quote { transition: opacity var(--fx-rise) var(--ease-out) calc(var(--fx-delay, 0ms) + 150ms), transform var(--fx-rise) var(--ease-out) calc(var(--fx-delay, 0ms) + 150ms); }
.fx-ready .client-quotes li:not(.is-in) .client-quote { opacity: 0; transform: translateY(1rem); }

/* PARTNERS: portraits wipe upward, the photo settling from a slight zoom; names follow. */
.fx-ready .fx-wipe .partner-photo { transition: clip-path 1.2s var(--ease-out) var(--fx-delay, 0ms); clip-path: inset(0); }
.fx-ready .fx-wipe:not(.is-in) .partner-photo { clip-path: inset(100% 0 0 0); }
.fx-ready .fx-wipe:not(.is-in) .partner-photo img { transform: scale(1.08); }
.fx-ready .fx-wipe h3 { transition: opacity .5s var(--ease-out) calc(var(--fx-delay, 0ms) + 500ms); }
.fx-ready .fx-wipe:not(.is-in) h3 { opacity: 0; }

/* STATE: the courtroom sketch comes up out of the ink. */
.fx-ready .practice--state::before { transition: opacity 1.8s ease-out; }
.fx-ready .practice--state:not(.is-in)::before { opacity: 0; }

/* RESPONSIVE */
@media (min-width: 1921px) {
  :is(.home, .practice-landing) .practice--state::before { background-size: 1920px auto; -webkit-mask-image: linear-gradient(90deg, #000 1640px, transparent 1920px); mask-image: linear-gradient(90deg, #000 1640px, transparent 1920px); }
}
@media (min-width: 901px) and (max-width: 1180px) {
  :is(.home, .practice-landing) .practice--state::after { background: linear-gradient(90deg, rgba(14, 26, 36, .3) 0%, rgba(14, 26, 36, .4) 12%, rgba(14, 26, 36, .55) 22%, rgba(14, 26, 36, .74) 30%, rgba(14, 26, 36, .83) 36%, rgba(14, 26, 36, .86) 50%, rgba(14, 26, 36, .87) 100%); }
}
/* Hero recognition: stacked rows where the text column is too narrow for "Chambers USA Spotlight" on one line in the pair. */
@media (min-width: 901px) and (max-width: 1229px), (max-width: 480px) {
  .home .hero-recognition { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid rgba(156, 195, 221, .3); }
  .home .hero-recognition li, .home .hero-recognition li + li { padding: .8rem 0 .85rem; border-left: 0; }
  .home .hero-recognition li + li { border-top: 1px solid rgba(156, 195, 221, .3); }
  .home .hero-mark { gap: .2rem; }
}
/* Desktop hero (Dan, 2026-10-06): the photo keeps v1's treatment until its column gets too narrow for the partners, then
   shrinks with the window so Jonathan never runs into the text. --fit is the tallest the photo can be while the partners
   (about 64% of the frame's width, centered) stay 4.5rem clear of the text column: 105.26cqw + 2.105 x (inset - 4.5rem).
   At 1280px and wider it is the full hero height, as in v1; at 1024x768 about 77%. Anchored to the bottom. Only when it is
   shorter than the hero does its top fade into the backdrop (up to 6rem), so no edge shows. */
@media (min-width: 901px) {
  .home .hero-photo { container-type: size; }
  .home .hero-photo img { --fit: calc(105.26cqw + 2.105 * (var(--hero-inset) - 4.5rem)); --feather: min(6rem, max(0px, 100cqh - var(--fit))); top: auto; bottom: 0; height: min(100cqh, var(--fit)); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 9rem), transparent), linear-gradient(180deg, transparent 0, #000 var(--feather)); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 calc(100% - 9rem), transparent), linear-gradient(180deg, transparent 0, #000 var(--feather)); mask-composite: intersect; }
}
/* Short desktop windows (1366x768, 1280x720, 1440x800): the hero's column fits one screen, recognition included. */
@media (min-width: 901px) and (max-height: 860px) {
  .home .hero-panel { gap: clamp(1.25rem, 3.5vh, 2.25rem); padding-top: clamp(1.5rem, 4vh, 2.5rem); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  .home .hero-heading { font-size: min(clamp(2.75rem, 4.4vw, 4rem), 7.6vh); }
  .home .hero-quotes { margin-top: clamp(1rem, 2.6vh, 1.75rem); }
  .home .hero-quote .hero-quote-context { margin-bottom: .4rem; font-size: .9375rem; }
  .home .hero-quote .hero-quote-core { font-size: min(clamp(1.375rem, 1.85vw, 1.75rem), 3.3vh); }
  .home .hero-quote figcaption { margin-top: .6rem; }
  .home .hero-quotes-controls { margin-top: .6rem; }
  .home .hero-actions { margin-top: clamp(1rem, 2.8vh, 1.75rem); }
  .home .hero-actions .btn { padding: .9rem 1.3rem; }
}
@media (max-width: 900px) {
  .home .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .home .hero-photo { aspect-ratio: 3 / 2; height: auto; overflow: hidden; }
  .home .hero-photo img { -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .home .hero-panel { grid-column: 1; justify-content: flex-start; gap: 2.25rem; padding: 0 var(--gutter) 2.75rem; margin-top: -2.5rem; }
  .home .hero-heading { font-size: clamp(2.75rem, 7vw, 3.5rem); }
  .home .hero-quotes { max-width: 36rem; }
  :is(.home, .practice-landing) .practice-group, .home .lawyers-row, .home .clients-grid { grid-template-columns: minmax(0, 1fr); }
  .home .firm-points { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .home .firm-point + .firm-point::before { display: none; }
  .home .lawyers-statement { max-width: 25ch; }
  .home .lawyers-copy { max-width: var(--measure); }
  .home .lawyers-copy::after { display: none; }
  .home .clients-heading, .home .client-quotes, .home .clients-foot { grid-column: 1; grid-row: auto; }
  .home .clients-heading { padding-top: 0; }
  .home .client-quotes { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
  .home .clients-foot { margin-top: 2rem; }
  :is(.home, .practice-landing) .practice--state::after { background: rgba(14, 26, 36, .84); }
  :is(.home, .practice-landing) .practice-state-body { width: 100%; }
  /* State band on phones and tablets: the sketch as a 3:2 frame at the top of the band, fading into the ink, with the
     heading set over its lower edge (the hero's composition), then the text on solid ink. */
  .home .practice--state { padding-top: 0; }
  .home .practice--state::before { bottom: auto; aspect-ratio: 3 / 2; background: var(--state-image) 4% 58% / 150% auto no-repeat; }
  .home .practice--state::after { background: linear-gradient(180deg, rgba(14, 26, 36, .22) 0, rgba(14, 26, 36, .42) 38vw, var(--ink) 66.667vw); }
  .home .practice-state-body { padding-top: calc(66.667vw - 3.25rem); }
  .home .practice--state .wrap { grid-template-columns: minmax(0, 1fr); }
  .home .practice-state-body { grid-column: 1; max-width: none; }
}
@media (max-width: 560px) {
  :is(.home, .practice-landing) .practice-index { grid-template-columns: minmax(0, 1fr); }
  :is(.home, .practice-landing) .practice-index li:nth-child(2) { border-top: 0; }
  .home .hero-panel { gap: 2rem; padding-bottom: 2.5rem; }
  .home .hero-photo { -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent); }
  .home .hero-photo img { transform: scale(1.25); transform-origin: 50% 28%; -webkit-mask-image: none; mask-image: none; }
  .home .hero-quotes { margin-top: 1.25rem; }
  .home .hero-quote .hero-quote-context { font-size: .9375rem; }
  .home .hero-quote figcaption { margin-top: .7rem; }
  .home .hero-quotes-controls { margin-top: .5rem; }
  /* Tighter steps above the button, so the number is on the first screen at 375x812. */
  .home .hero-actions { margin-top: 1.25rem; gap: .85rem 1.25rem; }
  .home .hero-actions .btn { width: 100%; text-align: center; }
  :is(.home, .practice-landing) .practice-clusters { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  :is(.home, .practice-landing) .practice-clusters .practice-cluster-label { margin-bottom: .35rem; padding-bottom: .45rem; border-bottom: 1px solid var(--rule-light); }
  :is(.home, .practice-landing) .practice-clusters .practice-index li, :is(.home, .practice-landing) .practice-clusters .practice-index li:first-child { display: inline; border: 0; }
  :is(.home, .practice-landing) .practice-clusters .practice-index li:not(:last-child)::after { content: '\00B7'; margin: 0 .45rem; color: var(--mist); }
  :is(.home, .practice-landing) .practice-clusters .practice-index a { display: inline; width: auto; min-height: 0; padding: .3rem 0; font-size: 1rem; line-height: 2; text-decoration: underline; text-decoration-color: var(--rule-light); text-underline-offset: .22em; }
  :is(.home, .practice-landing) .practice-clusters .practice-index a:is(:hover, :focus-visible) { transform: none; }
  /* Home phones: the federal pages keep the ruled ledger, one page per row, as on desktop. */
  .home .practice-clusters .practice-cluster-label { margin-bottom: 0; }
  .home .practice-clusters > .practice-cluster:nth-child(n + 2) { margin-top: 1.5rem; }
  .home .practice-clusters .practice-index li, .home .practice-clusters .practice-index li:first-child { display: flex; border: 0; border-bottom: 1px solid var(--rule-light); }
  .home .practice-clusters .practice-index li:not(:last-child)::after { content: none; }
  .home .practice-clusters .practice-index a { display: block; width: 100%; min-height: 44px; padding: .7rem 0; line-height: 1.3; text-decoration: none; }
  .home .practice-cases { gap: .7rem 1.25rem; }
  /* Partners on phones: both portraits stay side by side under the statement. */
  .home .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .home .partner-photo { margin-bottom: .85rem; }
  .home .partner-frame { --frame-off: 8px; margin-bottom: calc(.85rem + var(--frame-off)); }
  .home .partner h3 { font-size: 1.125rem; line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  .home .hero-quote, .home .hero-quote.is-active { transition: none; }
  .home .partner-frame::before { transition: none; }
  :is(.home, .practice-landing) .practice-index a { transition: none; }
  .home .hero-quotes.is-ticking .hero-quotes-dot[aria-current="true"]::after { animation: none; }
}