/* v4 home (2026-10-08). Sections in front-page.php order. Shared tokens and type are in style.css and v4/global.css. */
:root { --v4-section: clamp(4rem, 8vw, 7.5rem); }
.v4-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.v4-section-head h2 { max-width: 26ch; }
.v4-section-head .text-link { flex: none; margin-bottom: .35rem; }

/* Hero: v3's composition (the window's height under the header; the 900px cap was tried and reversed, Dan, 2026-10-08). */
/* The heading holds to three lines in v3's text column (", Chicago." is the longest line): a step below --t-hero on desktop. */
.v4-hero .hero-heading { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.5rem, 4.15vw, 3.75rem); line-height: 1.04; letter-spacing: -.018em; color: var(--paper); max-width: 15ch; }
.v4-hero-quote { margin: clamp(1.5rem, 2.4vw, 2.25rem) 0 0; max-width: 31rem; }
.v4-hero-quote blockquote { margin: 0; }
.v4-hero-quote p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.2rem, 1.5vw, 1.5rem); line-height: 1.35; color: var(--paper); text-indent: -.4em; text-wrap: pretty; }
.v4-hero-quote figcaption { margin-top: .85rem; font-family: var(--font-display); font-size: .85rem; line-height: 1.45; color: var(--smoke); }
.v4-hero .hero-recognition { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* The judges' words in the hero: both in one cell, the active one visible. */
.v4-hero-quotes { margin: clamp(1.5rem, 2.4vw, 2.25rem) 0 0; max-width: 31rem; }
.v4-hero-quotes-track { display: grid; }
.v4-hero-quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.v4-hero-quote.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.v4-hero-quote blockquote { margin: 0; }
.v4-hero-quote p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.2rem, 1.5vw, 1.5rem); line-height: 1.35; color: var(--paper); text-indent: -.4em; text-wrap: pretty; }
.v4-hero-quote figcaption { margin-top: .85rem; font-family: var(--font-display); font-size: .85rem; line-height: 1.45; color: var(--smoke); }
.v4-hero-quotes-toggle { margin-top: .9rem; font-family: var(--font-display); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); border-bottom: 1px solid transparent; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.v4-hero-quotes-toggle:hover { color: var(--paper); border-bottom-color: var(--lake-light); }
@media (prefers-reduced-motion: reduce) { .v4-hero-quote { transition: none; } }

/* Introduction on ink: the statement, then three columns with a rule between. */
.v4-intro { background: var(--ink); color: var(--paper); padding: var(--v4-section) 0; }
/* v3's home.css zeroes every .home h2 at higher specificity than one class, so the heading is scoped to its section. */
.home .v4-intro .v4-intro-heading { max-width: 24ch; font-size: var(--t-h2); color: var(--paper); margin: 0 0 clamp(3rem, 6vw, 5rem); }
.v4-statements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--charcoal-2); }
.v4-statement { padding: 2rem 2.5rem 1.5rem 0; border-right: 1px solid var(--charcoal-2); }
.v4-statement + .v4-statement { padding-left: 2.5rem; }
.v4-statement:last-child { border-right: 0; padding-right: 0; }
.v4-statement h3 { font-size: 1.35rem; color: var(--paper); margin-bottom: .75rem; }
.v4-statement p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--smoke); max-width: 36ch; }

/* From the bench: the words at right, so the sketch's left half (the attorneys) shows. */
.v4-bench--right .wrap { min-height: min(72vh, 44rem); display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); align-content: center; padding-top: var(--v4-section); padding-bottom: var(--v4-section); }
.v4-bench--right .v4-bench-body { grid-column: 2; }
.v4-bench--right .v4-band-img { object-position: 12% 42%; opacity: .34; }
.v4-bench--right::after { background: linear-gradient(to left, rgba(21, 24, 28, .86) 0%, rgba(21, 24, 28, .66) 42%, rgba(21, 24, 28, .2) 78%, rgba(21, 24, 28, .08) 100%), linear-gradient(to top, rgba(21, 24, 28, .5) 0%, rgba(21, 24, 28, 0) 35%); }
@media (max-width: 900px) { .v4-bench--right .wrap { grid-template-columns: 1fr; } .v4-bench--right .v4-bench-body { grid-column: 1; } .v4-bench--right .v4-band-img { object-position: 30% 40%; opacity: .22; } .v4-bench--right::after { background: linear-gradient(to top, rgba(21, 24, 28, .85) 0%, rgba(21, 24, 28, .55) 60%, rgba(21, 24, 28, .3) 100%); } }
.v4-bench-quote { margin: 0 0 2rem; max-width: 56rem; }
.v4-bench-quote blockquote { margin: 0; }
.v4-bench-quote p { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.65rem, 1.1rem + 2.1vw, 3rem); line-height: 1.2; letter-spacing: -.01em; color: var(--paper); text-indent: -.4em; text-wrap: pretty; }
.v4-bench-quote figcaption { margin-top: 1.25rem; font-family: var(--font-display); font-size: .9rem; line-height: 1.45; color: var(--smoke); }

/* Practice areas: federal with its four groups at left, state and civil rights on charcoal at right. */
.v4-practice { background: var(--paper); padding: var(--v4-section) 0; }
.v4-practice-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.v4-practice-hub { font-size: var(--t-h2); line-height: 1.1; }
.v4-practice-hub a { color: inherit; text-decoration: none; transition: color .25s var(--ease-out); }
.v4-practice-hub a:hover { color: var(--lake); }
.v4-practice-lede { margin: .75rem 0 0; font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.45; color: var(--slate); max-width: 44ch; }
.v4-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; margin-top: 2.25rem; }
/* Group labels (Dan, 2026-10-08): small sans capitals, as in the practice panel, so they read as labels over the links. */
.v4-group > h4, .v4-group > h3 { font-family: var(--font-display); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--slate); padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--stone); line-height: 1.3; }
.v4-group ul { list-style: none; margin: 0; padding: 0; }
.v4-group li a { display: inline-block; padding: .28rem 0; font-family: var(--font-display); font-weight: 450; font-size: .95rem; line-height: 1.35; color: var(--ink); text-decoration: none; transition: color .25s var(--ease-out); }
.v4-group li a:hover { color: var(--lake); }
.v4-practice-side { display: grid; gap: 1.5rem; }
.v4-practice-card { background: var(--charcoal); color: var(--paper); padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.v4-practice-card .v4-practice-hub { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.v4-practice-card .v4-practice-hub a:hover { color: var(--lake-light); }
.v4-practice-card p { margin: .85rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--smoke); }
.v4-practice-card .v4-practice-cases { font-family: var(--font-serif); font-size: 1.1rem; color: var(--paper); }
.v4-practice-card .text-link { display: inline-flex; margin-top: 1.25rem; }

/* The partners: the statement at left, two portraits at right, colour on hover. */
.v4-partners { background: var(--ink); color: var(--paper); padding: var(--v4-section) 0; }
.v4-partners-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.v4-partners-copy h2 { font-size: var(--t-h2); color: var(--paper); max-width: 18ch; margin-bottom: 1.25rem; }
.v4-partners-copy p { color: var(--smoke); max-width: 40ch; }
.v4-people-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.v4-person { display: grid; gap: .2rem; align-content: start; color: var(--paper); text-decoration: none; }
.v4-photo--portrait { aspect-ratio: 4 / 5; margin-bottom: .9rem; }
.v4-photo--portrait img { object-position: 50% 12%; }
.v4-person-name { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.15; transition: color .25s var(--ease-out); }
.v4-person:hover .v4-person-name { color: var(--lake-light); }
.v4-person-role { font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.v4-person-summary { margin-top: .5rem; font-size: .9rem; line-height: 1.5; color: var(--smoke); max-width: 34ch; }

/* The courthouse band: the daylight frame in near-natural colour (Dan, 2026-10-08), the dark held to the lower left where the text sits. */
.v4-courthouse .v4-band-img { filter: saturate(.85) brightness(.95) contrast(.98); }
.v4-courthouse::after { background: linear-gradient(to right, rgba(21, 24, 28, .8) 0%, rgba(21, 24, 28, .55) 40%, rgba(21, 24, 28, .15) 75%, rgba(21, 24, 28, .05) 100%), linear-gradient(to top, rgba(21, 24, 28, .75) 0%, rgba(21, 24, 28, .2) 45%, rgba(21, 24, 28, 0) 70%); }
.v4-courthouse .wrap { min-height: min(56vh, 34rem); display: grid; align-content: end; padding-top: var(--v4-section); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.v4-courthouse h2 { font-size: var(--t-h1); color: var(--paper); max-width: 18ch; }
.v4-courthouse-text { margin: 1rem 0 0; color: var(--paper); opacity: .9; max-width: 46ch; }

/* Representative matters and coverage. */
.v4-matters { background: var(--paper); padding: var(--v4-section) 0; }
.v4-matters-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.v4-matters h2 { font-size: var(--t-h2); margin-bottom: 1.5rem; }
.v4-matters ul { list-style: none; margin: 0; padding: 0; }
.v4-matter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .5rem 2rem; padding: 1.35rem 0; border-top: 1px solid var(--stone); }
.v4-matter h3 { font-size: 1.3rem; line-height: 1.2; }
.v4-matter-body p { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.5; color: var(--slate); }
.v4-matter-outcome { font-weight: 600; color: var(--ink) !important; }
.v4-matter-meta { font-size: .88rem !important; }
.v4-legal { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--stone); font-family: var(--font-display); font-size: .85rem; color: var(--slate); }
.v4-press-item { padding: 1.2rem 0; border-top: 1px solid var(--stone); }
.v4-press-meta { margin: 0 0 .4rem; font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.v4-press-title { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.25; }
.v4-press-title a { color: var(--ink); text-decoration: none; }
.v4-press-title a:hover { color: var(--lake); }

/* What clients say. */
.v4-clients { background: var(--ink); color: var(--paper); padding: var(--v4-section) 0; }
.v4-clients h2 { color: var(--paper); }
.v4-quote-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.v4-quote-card { background: var(--charcoal); border: 1px solid var(--charcoal-2); padding: 2rem; display: grid; gap: 1.25rem; align-content: space-between; }
.v4-quote-card blockquote { margin: 0; }
.v4-quote-card blockquote p { margin: 0; font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.4; text-indent: -.4em; text-wrap: pretty; }
.v4-quote-card .meta { color: var(--smoke); font-size: .85rem; }
.v4-quote-close { margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; max-width: 46rem; }
.v4-quote-close blockquote { margin: 0; }
.v4-quote-close p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.25; text-indent: -.4em; text-wrap: pretty; }
.v4-quote-close figcaption { margin-top: 1rem; color: var(--smoke); font-size: .9rem; }

/* The referrals strip. */
.v4-referrals { background: var(--paper-2); padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.v4-referrals-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.v4-referrals h2 { font-size: var(--t-h2); max-width: 16ch; }
.v4-referrals .lede { margin: 0 0 1.25rem; }

@media (max-width: 1100px) { .v4-quote-cards { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .v4-statements { grid-template-columns: 1fr; }
  .v4-statement, .v4-statement + .v4-statement { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--charcoal-2); }
  .v4-statement:last-child { border-bottom: 0; }
  .v4-practice-grid, .v4-partners-grid, .v4-matters-grid, .v4-referrals-grid { grid-template-columns: 1fr; }
  .v4-matter { grid-template-columns: 1fr; gap: .35rem; }
}
@media (max-width: 600px) { .v4-groups { grid-template-columns: 1fr; } .v4-people-pair { gap: 1rem; } .v4-person-name { font-size: 1.25rem; } }

/* Client revision, 2026-10-09: linked introduction headings in blue on ink. */
.v4-intro .v4-statement h3 a { color: var(--lake-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.v4-intro .v4-statement h3 a:hover { color: var(--paper); }