/* RobinsonLaw, P.A. — brand tokens + components (complements precompiled Tailwind) */
:root{
  --navy:#053B6D; --navy-deep:#082f59; --navy-ink:#0b3159;
  --cypress:#47715B; --cypress-btn:#5b9273; --cypress-hover:#3d5f4d;
  --ivory:#FBFAF6; --cream:#f5f1e9; --cream-2:#e8e1d4;
  --ink:#1e2a36; --grey:#526275; --line:#d7e0e8;
  /* Content column. Single source of truth: .header-shell, .hero-copy's gutter,
     .section, the footer rows, .lp-hero and every interior hero gutter derive from
     this. Raising it in one place keeps them aligned; they were 11 hardcoded 1280s. */
  --shell:1280px; --gutter:40px;
  /* Light accents on navy (headline accent, links, labels). Sage, tinted from cypress.
     ROLLBACK to the original light blue: #81bbe8 / #9ac7eb / #9bc4e5 (git tag pre-sage-accent). */
  --accent-on-dark:#a3c4b0; --accent-on-dark-soft:#b3cfbd; --accent-on-dark-muted:#a9c4b4;

  /* Left inset that lines a full-bleed hero's copy up with the body copy inside
     .section. Two guards, both learned the hard way on a 3440px ultrawide:

     1. It is a LEFT inset only. Written into a 3-value padding shorthand it
        mirrors onto the right, and on that monitor the two SEO landing heroes
        carried 980px on BOTH sides, crushing the copy to 203px.
     2. The cap. Uncapped, the derived value grows without limit as the viewport
        does. 50vw - 24rem keeps roughly a 24rem measure in a half-width hero
        column no matter how wide the screen gets. It only bites past ~4000px
        once the --shell steps below are in play, so normal widths are unchanged. */
  --hero-inset: max(var(--gutter), min(calc((100vw - var(--shell))/2 + var(--gutter)), calc(50vw - 24rem)));
}
/* Shell steps. The client's complaint was empty background on 24-to-27in screens;
   1480 answers that but still leaves 980px of margin each side on a 3440px
   ultrawide, which is the same complaint one monitor up. Capped at 1760 because a
   text column much wider than that stops being readable. */
@media(min-width:1600px){ :root{ --shell:1480px } }
@media(min-width:2000px){ :root{ --shell:1600px } }
@media(min-width:2560px){ :root{ --shell:1760px } }
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
picture{display:contents} /* <picture> wrappers are layout-transparent; the img keeps its own box */
.font-display{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:-.02em}
.font-sans{font-family:"DM Sans",system-ui,sans-serif}

/* palette utilities (precompiled Tailwind lacks these exact brand hexes) */
.text-navy{color:var(--navy-ink)} .bg-navy{background:var(--navy-ink)} .bg-navy-deep{background:var(--navy-deep)}
.text-cypress{color:var(--cypress)} .bg-cypress{background:var(--cypress-btn)}
.bg-ivory{background:var(--ivory)} .bg-cream{background:var(--cream)}
.text-grey{color:var(--grey)} .border-line{border-color:var(--line)}
.eyebrow{margin:0 0 12px;color:var(--cypress);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.eyebrow-light{color:var(--accent-on-dark-soft)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:.18s;cursor:pointer;border:1px solid transparent}
.btn:active{transform:scale(.98)}
.btn-cypress{background:var(--cypress);border-color:var(--cypress);color:#fff}
.btn-cypress:hover{background:var(--cypress-hover);border-color:var(--cypress-hover)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--navy-ink);color:#fff;padding:10px 16px;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
.contact-form [aria-invalid="true"]{border-color:#b3261e !important;box-shadow:0 0 0 1px #b3261e}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.btn-outline{border-color:var(--navy-ink);color:var(--navy-ink)}
.btn-outline:hover{background:var(--navy-ink);color:#fff}
.btn-outline-light{border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--navy-ink)}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:5px;transition:gap .2s}
.text-link-cypress{color:var(--cypress)}

/* Utility bar (Phase 4 R4.5). Badges left, contact right, above the sticky nav
   row. It is a sibling of .site-header, not a child, so it scrolls away and the
   pinned chrome stays 88px. Shares --shell and --gutter with .header-shell so the
   two rows line up at every one of the ultrawide steps. */
.utility-bar{background:var(--cream);border-bottom:1px solid rgba(5,59,109,.09)}
.utility-bar-shell{max-width:var(--shell);margin:0 auto;padding:8px var(--gutter);min-height:36px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 28px}
/* Wrapping, rather than truncating, is the deliberate choice: every word in a
   badge line is doing compliance work (holder, award, organization, year), so
   none of it can be dropped at a narrower desktop width. */
.ub-badges{display:flex;align-items:center;flex-wrap:wrap;gap:4px 22px}
.ub-badge{display:inline-flex;align-items:center;gap:8px;color:var(--navy-ink);
  font-size:10.5px;font-weight:600;letter-spacing:.05em;line-height:1.5;transition:color .18s}
a.ub-badge:hover,a.ub-badge:focus-visible{color:var(--cypress)}
.ub-badge-mark{color:var(--cypress);flex-shrink:0}
.ub-badge-seal{height:22px;width:auto;flex-shrink:0}
.ub-contact{display:flex;align-items:center;gap:20px;font-size:10.5px;font-weight:600;letter-spacing:.05em}
.ub-contact a{display:inline-flex;align-items:center;gap:6px;color:var(--navy-ink);transition:color .18s}
.ub-contact a:hover,.ub-contact a:focus-visible{color:var(--cypress)}
.ub-contact i{color:var(--cypress);flex-shrink:0}
/* Off on mobile. footer.php's sticky action bar already carries Call. */
@media(max-width:960px){.utility-bar{display:none}}

/* header nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(5,59,109,.1)}
/* Wordmark left, nav flush right (client direction 2026-09-29). */
.header-shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);height:88px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand-wordmark{width:240px;height:auto}
/* Logo steps: 240px desktop (39px tall in the 88px header), 264px on wide shells, 224px in the
   74px mobile header, 196px on the narrowest phones so the menu toggle keeps its room. Between
   961 and 1199px the full nav is showing and 240px would wrap the consultation button. */
@media(min-width:1600px){.brand-wordmark{width:264px}}
@media(min-width:961px) and (max-width:1199px){.brand-wordmark{width:200px}}
@media(max-width:960px){.brand-wordmark{width:224px}}
@media(max-width:360px){.brand-wordmark{width:196px}}
.desktop-nav{display:flex;gap:34px;align-items:center}
.nav-link{position:relative;color:var(--navy-ink);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;padding:8px 0}
.nav-link:after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--navy-ink);transition:width .2s}
.nav-link:hover:after,.nav-link.active:after{width:100%}
.menu-toggle{display:none;background:none;border:0;color:var(--navy-ink);cursor:pointer}
/* Practice Areas dropdown */
.nav-item{position:relative;display:flex;align-items:center}
.has-dropdown>.nav-link{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.dropdown-caret{width:13px;height:13px;transition:transform .2s}
.has-dropdown:hover .dropdown-caret,.has-dropdown:focus-within .dropdown-caret,.has-dropdown.open .dropdown-caret{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:286px;background:var(--navy-deep);padding:10px 0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 22px 48px -18px rgba(8,47,89,.55);z-index:60}
.dropdown-menu:before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} /* keeps hover alive across the gap */
.has-dropdown:hover .dropdown-menu,.has-dropdown:focus-within .dropdown-menu,.has-dropdown.open .dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown-menu a{display:block;padding:13px 26px;color:#d5e3f1;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border-left:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.dropdown-menu a:hover,.dropdown-menu a:focus-visible{background:rgba(255,255,255,.06);color:#fff;border-left-color:var(--cypress-btn)}
.dropdown-menu a.dropdown-all{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:15px;border-top:1px solid rgba(255,255,255,.12);color:var(--accent-on-dark-muted);font-size:11px}
.dropdown-menu a.dropdown-all:hover{color:#fff}
/* Mobile sub-items under Practice Areas */
.mobile-sub{padding-left:16px !important;font-weight:500 !important;font-size:11px !important;color:var(--grey) !important;letter-spacing:.1em !important}

/* "How we help" service expanders (on navy background) */
.svc-accordion{display:flex;flex-direction:column}
.svc-item{border-bottom:1px solid rgba(255,255,255,.14)}
.svc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;background:none;border:0;cursor:pointer;color:#eaf2fa;font-size:15px;font-weight:500;line-height:1.4;text-align:left;font-family:inherit}
.svc-head:hover{color:#fff}
.svc-caret{width:16px;height:16px;color:var(--accent-on-dark);flex-shrink:0;transition:transform .22s ease}
.svc-item.open .svc-head{color:#fff}
.svc-item.open .svc-caret{transform:rotate(90deg)}
.svc-panel{overflow:hidden;max-height:0;transition:max-height .3s ease}
.svc-item.open .svc-panel{max-height:240px}
.svc-panel p{margin:0;padding:2px 26px 18px 0;color:#a9c4dc;font-size:14px;line-height:1.65}
@media(max-width:960px){.desktop-nav{display:none}.menu-toggle{display:inline-flex}.header-shell{padding:0 24px;height:74px}}
.mobile-nav{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--line);padding:8px 24px 20px}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--navy-ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* split hero (institutional) */
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:520px;background:var(--navy-deep)}
.hero-copy{position:relative;z-index:1;padding:84px 64px 56px var(--hero-inset);color:#fff;display:flex;flex-direction:column;align-items:flex-start}
/* No hyphens:auto. It split "consequential" mid-word at 24-27in, leaving "AL" hanging.
   overflow-wrap:break-word stays: it only fires on a word that genuinely cannot fit. */
.hero-copy h1{margin:0 0 24px;color:#fff;font-family:"DM Sans",sans-serif;font-size:clamp(2.4rem,5.2vw,4.4rem);font-weight:500;line-height:.96;letter-spacing:-.04em;text-transform:uppercase;overflow-wrap:break-word}
.hero-copy h1 span{color:var(--accent-on-dark)}
.hero-copy>p{max-width:470px;color:#d6e4f0;font-size:17px;line-height:1.55;margin:0 0 26px}
.hero-signal{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:14px;margin-top:auto;padding-top:44px}
.hero-signal strong{grid-row:1/span 2;color:#fff;font-family:"Cormorant Garamond",serif;font-size:70px;font-weight:600;line-height:.8}
.hero-signal span{color:var(--accent-on-dark-muted);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hero-image{position:relative;min-height:520px;overflow:hidden}
/* .hero-parallax owns sizing when the frame carries it; this stays for any
   hero-image without the parallax class. .hero-card sits at z-index:2 above. */
.hero-image:not(.hero-parallax) img{width:100%;height:100%;object-fit:cover}
.hero-card{position:absolute;right:0;bottom:0;z-index:2;width:min(340px,70%);padding:28px 30px;background:#fff;color:var(--navy-ink)}
.hero-card p{margin:0 0 12px;font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:600;line-height:1}
.hero-card a{display:inline-flex;align-items:center;gap:8px;color:var(--cypress);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:56px 24px 40px}
  /* The eyebrow restates the wordmark the sticky header already shows directly
     above it; on a phone that redundant line is what pushes the "1987" signal
     below the fold, so it only renders at tablet width and up. */
  .hero-copy>.eyebrow{display:none}
  .hero-image{min-height:420px}
  .hero-signal{padding-top:20px}
  .hero-signal strong{font-size:40px}
}

/* ── Practice-areas master-detail (homepage). Ortega pattern.
   All three panes are server-rendered and in the DOM. Without JS every pane is
   visible and the section reads as a stacked list; the script adds .pa-js, which
   is what switches it to one-pane-at-a-time. Crawlers always get all three. */
.pa-switch{display:grid;grid-template-columns:.78fr 1.22fr;gap:0;padding-top:0;padding-bottom:0;align-items:start}
.pa-rail{display:flex;flex-direction:column;padding:26px 28px 26px 0}
.pa-tab{display:flex;align-items:center;gap:18px;width:100%;padding:22px 22px 22px 20px;margin-bottom:8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#fff;font-family:inherit;text-align:left;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.pa-tab:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.pa-tab .pa-num{color:var(--accent-on-dark);font-size:12px;font-weight:700;letter-spacing:.06em;flex-shrink:0}
.pa-tab .pa-name{flex:1;font-family:"DM Sans",sans-serif;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.pa-tab .pa-caret{width:20px;height:20px;color:var(--accent-on-dark);flex-shrink:0;opacity:0;transition:opacity .18s}
.pa-tab[aria-selected="true"]{background:var(--cream-2);border-color:var(--cream-2);color:var(--navy-ink)}
.pa-tab[aria-selected="true"] .pa-num,.pa-tab[aria-selected="true"] .pa-caret{color:var(--cypress);opacity:1}
.pa-tab:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:-3px}
/* The pane is a light card floating on the navy band (the rail stays navy;
   only the content card inverts), so it needs its own light-background palette
   rather than the white-on-navy tones the rail still uses. */
.pa-panes{position:relative;background:#fff;border:1px solid #e3e9ec;border-radius:14px;margin:26px 0 26px 26px;box-shadow:0 24px 60px -28px rgba(5,20,40,.55)}
.pa-pane{padding:36px 40px 34px;color:var(--ink)}
/* No [hidden] is server-rendered, so a no-JS visitor gets all three panes as a
   stacked list. The inline script below the section applies hidden during parse.
   Tailwind preflight already carries [hidden]{display:none!important}, so there is
   nothing to declare here; overriding it would need !important and lose either way. */
.pa-pane h3{margin:0 0 14px;font-family:"DM Sans",sans-serif;font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--navy-ink)}
.pa-pane .pa-blurb{margin:0 0 26px;font-size:16px;line-height:1.6;max-width:600px;color:var(--grey)}
.pa-issues{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;max-width:640px}
.pa-issues li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.pa-issues li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--cypress)}
.pa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.pa-read{margin:0;font-size:14.5px;line-height:1.6;color:var(--grey);flex:1 1 320px}
.pa-read a{color:var(--cypress);font-weight:600;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .15s}
.pa-read a:hover{color:var(--navy-ink)}
.pa-ancillary{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--grey);max-width:640px}
.pa-ancillary a{color:var(--cypress);border-bottom:1px solid currentColor}
.pa-ancillary a:hover{color:var(--navy-ink)}
/* Fixed-height switcher: with JS on, the panes stack in one cell (sized by the
   tallest) and the action row sits at the bottom, so nothing moves between tabs. */
.pa-panes.pa-stacked{display:grid}
/* One pane at a time, sized to its own content (client, 2026-10-21: no empty space under the
   shorter panes). Inactive panes are display:none; the active one fades in. */
.pa-panes.pa-stacked>.pa-pane{grid-area:1/1;display:flex;flex-direction:column;animation:pa-fade .32s ease}
.pa-panes.pa-stacked>.pa-pane.pa-off{display:none}
@keyframes pa-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pa-panes.pa-stacked>.pa-pane{animation:none}}
@media(max-width:900px){
  .pa-switch{grid-template-columns:1fr}
  .pa-rail{padding:8px 0 2px}
  .pa-tab{padding:15px 16px;margin-bottom:6px}
  .pa-tab .pa-name{font-size:17.5px;line-height:1.2}
  .pa-tab .pa-num{font-size:11px}
  .pa-panes{margin:6px 0 10px}
  .pa-pane{padding:24px 20px 26px}
  .pa-pane h3{font-size:1.5rem;margin-bottom:10px}
  .pa-pane .pa-blurb{font-size:15px;line-height:1.55;margin-bottom:20px}
  .pa-issues{grid-template-columns:1fr;max-width:none;gap:9px;margin-bottom:22px}
  .pa-issues li{font-size:14px;line-height:1.45}
  .pa-actions{align-items:stretch;gap:14px}
  .pa-actions .btn{justify-content:center}
  .pa-read{font-size:14px;line-height:1.9}
  .pa-ancillary{margin-top:20px;padding-top:16px;font-size:13px}
}

/* ── Breadcrumbs. Sits between the header and the page H1. Muted by design: it is
   orientation, not a call to action. */
.breadcrumbs{max-width:var(--shell);margin:0 auto;padding:20px var(--gutter) 16px}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs a,.breadcrumbs span{font-size:12px;letter-spacing:.04em;color:var(--grey);line-height:1.4}
.breadcrumbs a:hover{color:var(--cypress);text-decoration:underline;text-underline-offset:3px}
.breadcrumbs [aria-current="page"]{color:var(--navy-ink);font-weight:600}
.breadcrumbs-sep{color:#b9c4cf}
@media(max-width:900px){
  .breadcrumbs{padding:12px 24px 12px}
  /* One line on a phone: the trail never wraps, and a long page title ellipsizes
     instead of dropping below a dangling "/". Links get a 44px-tall tap area
     without adding visible height. */
  .breadcrumbs ol{flex-wrap:nowrap;gap:6px}
  .breadcrumbs li{gap:6px;flex:0 0 auto}
  .breadcrumbs li:last-child{flex:1 1 auto;min-width:0}
  .breadcrumbs li:last-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .breadcrumbs a{padding:14px 4px;margin:-14px -4px}
}

/* ── Arrows lead on hover. One rule covers every arrow on the site: inline text
   links, buttons, card CTAs and the practice-area rail, because lucide keeps a
   .lucide-arrow-* class on the SVG it swaps in. Transform only, so nothing
   reflows and no underline shifts. Keyed to :hover AND :focus-visible so it
   reads the same for keyboard users.
   Chevrons are deliberately excluded: .svc-caret and .dropdown-caret rotate to
   show open/closed state, and a hover transform would overwrite that rotation. */
.lucide-arrow-right,.lucide-arrow-up-right{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
a:hover  .lucide-arrow-right, button:hover  .lucide-arrow-right,
a:focus-visible .lucide-arrow-right, button:focus-visible .lucide-arrow-right{transform:translateX(4px)}
a:hover  .lucide-arrow-up-right, button:hover  .lucide-arrow-up-right,
a:focus-visible .lucide-arrow-up-right, button:focus-visible .lucide-arrow-up-right{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){
  .lucide-arrow-right,.lucide-arrow-up-right{transition:none}
  a:hover .lucide-arrow-right, button:hover .lucide-arrow-right,
  a:hover .lucide-arrow-up-right, button:hover .lucide-arrow-up-right,
  a:focus-visible .lucide-arrow-right, button:focus-visible .lucide-arrow-right,
  a:focus-visible .lucide-arrow-up-right, button:focus-visible .lucide-arrow-up-right{transform:none}
}

/* ── Hero media parallax. The image sits taller than its frame and shifts on
   scroll. Transform only, so there is no layout cost and no CLS: the frame never
   moves and nothing reflows. Deliberately still an <img> rather than a CSS
   background, so pictureTag()'s WebP source, fetchpriority and alt text all
   survive; a background-image would drop all three.
   With no JS the image simply sits centred and cropped, which is correct.
   Opt-out mirrors .cta-photo: reduced motion gets a static, full-height image. */
.hero-parallax{position:relative;overflow:hidden}
.hero-parallax img{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover}
.hero-parallax.is-live img{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .hero-parallax img{position:static;top:auto;height:100%;transform:none !important}
}

/* ── Team card (/our-team). Grid items already stretch to the row height; this
   distributes the card's own content so "View full profile" sits on the baseline
   in every card regardless of how long the summary runs. The client's rewritten
   summaries vary a lot in length, which is what knocked the links out of line. */
.team-card{display:flex;flex-direction:column}
.team-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px;color:var(--navy-ink)}
.team-card-summary{margin:0 0 18px;color:var(--grey);font-size:14px;line-height:1.55}
.team-card-cta{margin-top:auto;align-self:flex-start}

/* ── Interior page hero. The site convention for every page below the homepage:
   copy on ivory at left, photo at right, with the copy's left padding derived
   from --shell so hero copy lines up with the body copy beneath it. Lived in
   practice-area.php's page <style> block until /practice-areas adopted it
   (2026-09-29); promoted here so the pages sharing the class cannot drift.
   about-our-practice.php and the two SEO landing pages set the grid and a
   min-height inline, which still wins over these rules, so they are unchanged. */
.detail-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(360px,42vh,470px);align-items:stretch}
/* Copy is top-aligned, not centred, so the eyebrow and H1 sit at the same height on every
   interior page whatever the intro length (Brandon, 2026-10-13). Top and bottom padding match
   the photo's 44px inset, so the eyebrow lines up with the photo's top edge. The hero button
   stays close to the text rather than dropping to the photo's bottom edge (Suzy, 11-04). */
.detail-hero-copy{background:var(--ivory);display:flex;flex-direction:column;justify-content:flex-start;
  padding:44px clamp(32px,4vw,64px) 44px var(--hero-inset)}
.detail-hero-cta{padding-top:26px}
.detail-hero-copy .lead{max-width:42ch}
@media(max-width:900px){
  .detail-hero{grid-template-columns:1fr;min-height:0}
  .detail-hero-copy{padding:56px 24px 44px}
  .detail-hero-copy .lead{max-width:none}
  .detail-hero-media{order:-1;height:clamp(200px,42vw,290px)}
}

/* ── Practice-areas hub (/practice-areas). Namespaced .hub- to stay clear of the
   homepage master-detail module, which owns .pa-.

   Two problems this solves. The pillar header used to stack number, eyebrow,
   title and blurb into one narrow ribbon, leaving the right half of the shell
   empty at 1440px and above, which is the same white void the client called out
   on the homepage header. And the cards carried their layout inline with no
   baseline distribution, so "Explore ..." sat at a different height in each card
   whenever the summaries ran to different lengths. That is the defect already
   fixed on .team-card; this is the same fix on the grid that was not swept. */
.hub-pillar-head{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,.86fr);gap:0 30px;align-items:start;margin-bottom:40px}
.hub-pillar-num{color:var(--cypress);font-size:32px;font-weight:700;line-height:1}
.hub-pillar-blurb{margin:0;color:var(--grey);font-size:16px;line-height:1.7;max-width:none;padding-top:6px}
.hub-guides{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:26px}
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hub-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e9ec;color:var(--navy-ink);transition:border-color .2s,box-shadow .2s,transform .2s}
.hub-card:hover,.hub-card:focus-visible{border-color:var(--cypress);box-shadow:0 12px 30px rgba(11,49,89,.09);transform:translateY(-2px)}
.hub-card-media{position:relative;height:206px;overflow:hidden;flex-shrink:0}
.hub-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-card-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px}
.hub-card-list li{position:relative;padding-left:18px;font-size:14px;line-height:1.45;color:var(--ink)}
.hub-card-list li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--cypress)}
.hub-card-body{display:flex;flex-direction:column;flex:1;padding:25px 28px 29px}
.hub-card-summary{margin:0 0 16px;color:#5a6772;font-size:14px;line-height:1.55}
.hub-card-cta{margin-top:auto;align-self:flex-start}
/* A pillar with one area (Construction, since mediation was demoted) spans the row as a
   horizontal card instead of sitting at half width beside an empty column. */
.hub-grid-single{grid-template-columns:1fr}
.hub-grid-single .hub-card{flex-direction:row}
.hub-grid-single .hub-card-media{width:46%;height:auto;min-height:340px}
.hub-grid-single .hub-card-list{grid-template-columns:1fr 1fr;gap:10px 28px}
.hub-grid-single .hub-card-cta{margin-top:4px}
.hub-grid-single .hub-card-body{justify-content:center;padding:40px 48px}
.hub-grid-single .hub-card-summary{font-size:16px;max-width:46ch}
@media(prefers-reduced-motion:reduce){ .hub-card,.hub-card:hover{transform:none;transition:none} }
@media(max-width:1000px){
  .hub-pillar-head{grid-template-columns:52px minmax(0,1fr);gap:0 20px}
  .hub-pillar-blurb{grid-column:2;padding-top:14px}
}
@media(max-width:700px){ .hub-grid{grid-template-columns:1fr} .hub-grid-single .hub-card{flex-direction:column} .hub-grid-single .hub-card-media{width:100%;height:206px;min-height:0} .hub-grid-single .hub-card-list{grid-template-columns:1fr} .hub-grid-single .hub-card-body{padding:25px 28px 29px} }

/* Situational cards (practice-area detail pages): a visitor self-selects by what is
   happening to them, not by a page title, so the card leads with the situation. */
.situational-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e3e9ec;border-radius:10px;padding:26px 28px;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.situational-card:hover,.situational-card:focus-visible{border-color:var(--cypress);box-shadow:0 12px 30px rgba(11,49,89,.09);transform:translateY(-2px)}
.situational-card-tag{font-size:17px;font-weight:600;color:var(--navy-ink);letter-spacing:-.01em}
.situational-card-desc{margin:0;color:var(--grey);font-size:14.5px;line-height:1.55}
.situational-card-cta{margin-top:auto;align-self:flex-start}
@media(prefers-reduced-motion:reduce){ .situational-card,.situational-card:hover{transform:none;transition:none} }

.section{max-width:var(--shell);margin:0 auto;padding:96px var(--gutter)}
@media(max-width:900px){.section{padding:64px 24px}}
.h2{font-family:"DM Sans",sans-serif;color:var(--navy-ink);font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:600;letter-spacing:-.04em;line-height:1;margin:0}
/* One page-title style for every interior page (Brandon, 2026-10-13): the practice-page
   sans H1. Replaces the per-page inline sizes and the serif font-display titles. The home
   hero H1 keeps its own uppercase treatment. */
.page-h1{font-family:"DM Sans",sans-serif;color:var(--navy-ink);font-size:clamp(2.1rem,3vw,3rem);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin:0 0 16px;text-wrap:balance}
.lead{color:var(--grey);font-size:17px;line-height:1.6;max-width:640px}

/* ── Legal / policy pages (privacy, terms, cookies, accessibility) ── */
.legal-wrap{max-width:840px;margin:0 auto;padding:0 24px}
.legal-prose h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:27px;color:var(--navy-ink);margin:40px 0 12px;letter-spacing:-.01em;scroll-margin-top:110px}
.legal-prose h3{font-size:17px;color:var(--navy-ink);margin:24px 0 8px}
.legal-prose p{margin:0 0 14px;color:var(--ink);line-height:1.78;font-size:15.5px}
.legal-prose ul{margin:0 0 16px;padding-left:22px;color:var(--ink);line-height:1.78;font-size:15.5px}
.legal-prose li{margin:0 0 7px}
.legal-prose a{color:var(--cypress);text-decoration:underline;text-underline-offset:2px}
.legal-prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.legal-prose th,.legal-prose td{text-align:left;padding:10px 12px;border:1px solid var(--line);vertical-align:top;line-height:1.55}
.legal-prose th{background:var(--cream);color:var(--navy-ink);font-weight:700}
.legal-summary{background:#f2f6f3;border:1px solid #d6e3db;border-left:3px solid var(--cypress);padding:18px 22px;margin:0 0 30px;font-size:14.5px;line-height:1.72;color:var(--ink)}
.legal-toc{background:var(--cream);border:1px solid #e3d9c8;padding:20px 24px;margin:0 0 34px;font-size:14px}
.legal-toc p{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cypress-hover)}
.legal-toc ol{margin:0;padding-left:20px;line-height:1.9;color:var(--navy-ink)}
.legal-toc a{color:var(--navy-ink);text-decoration:none}
.legal-toc a:hover{text-decoration:underline;text-underline-offset:2px}
.legal-contact{background:var(--cream);border:1px solid #e3d9c8;padding:22px 26px;margin-top:30px;font-size:15px;line-height:1.85;color:var(--ink)}
.legal-fineprint{font-size:12.5px;color:var(--grey);line-height:1.7;margin-top:26px}

/* ── Photo CTA bands: washed site photo fixed behind the page (parallax feel).
      The image stays put while content slides over it. Falls back to normal
      scroll on iOS (fixed+cover is broken there) and for reduced-motion users. */
/* Closing band on every page. Light on purpose: the footer below is navy, and the old navy
   .cta-photo band stacked blue on blue. .cta-photo stays defined for rollback (tag pre-cta-close). */
.cta-close{background:var(--cream);border-top:1px solid #e5dec9}
.cta-photo{color:#fff;background-size:cover;background-position:center 30%;background-repeat:no-repeat;background-attachment:fixed}
@supports (-webkit-touch-callout:none){.cta-photo{background-attachment:scroll}}
@media (prefers-reduced-motion:reduce){.cta-photo{background-attachment:scroll}}

/* Touch targets: 44px hit areas on phones and tablets without changing the visual layout. */
@media (max-width:900px){
.menu-toggle{padding:10px;margin-right:-10px}
.text-link{position:relative}
.text-link::before{content:"";position:absolute;inset:-12px -4px}
.footer-grid>div>div>a{display:flex;align-items:center;min-height:44px}
.footer-grid>div>div[style*="flex-direction:column"]{gap:0 !important}
footer>div[style*="padding:22px 40px"],footer>div[style*="padding:18px 40px"]{padding-left:24px !important;padding-right:24px !important}
footer nav[aria-label="Legal"]{gap:0 12px !important}
footer nav[aria-label="Legal"] a,footer nav[aria-label="Legal"] button{display:inline-flex;align-items:center;min-height:44px}
details>summary{min-height:44px;display:flex;align-items:center}
}

/* The breadcrumb already supplies space above the first section; halve the section's own top padding. */
.breadcrumbs+.section{padding-top:44px} /* matches the .detail-hero copy inset so page titles share one height */
@media(max-width:900px){.breadcrumbs+.section{padding-top:28px !important}}

/* Tinted hero bands sit directly under the breadcrumb on phones: trim their inner top padding. */
@media(max-width:900px){
.detail-hero{min-height:0 !important}
.detail-hero-copy{padding:36px 24px 40px}
section[style*="padding:44px 0 40px"],section[style*="padding:44px 0 36px"]{padding-top:36px !important}
section>div[style*="padding:120px 24px 40px"]{padding-top:44px !important}
}

/* Scroll-driven parallax layer (enabled by script only where fixed attachment is unavailable). The image is
   taller than the band by the script's RANGE so shifting it never exposes an edge. */
.cta-photo.cta-px{background-size:auto calc(100% + 120px);background-position:center var(--cta-y,-60px)}

/* Shared intake form (landing pages and SEO landing pages). */
.lp-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.6vw,34px);box-shadow:0 12px 34px rgba(11,49,89,.10);display:flex;flex-direction:column;gap:15px}
.lp-form-title{font-family:'DM Sans',sans-serif;font-size:1.2rem;font-weight:600;color:var(--navy-ink);margin:0 0 4px}
/* Field layout follows the form's own width, not the viewport: pairs sit side by side when the
   card has room (desktop consult band, tablets) and stack on phones. Never more than two per
   row, so four dropdowns read as 2x2, not 3 + 1. */
.lp-row,.lp-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(210px,calc(50% - 8px))),1fr));gap:15px}
.lp-selects>:last-child:nth-child(odd){grid-column:1/-1}
.lp-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-ink)}
.lp-field input,.lp-field select,.lp-field textarea{width:100%;min-width:0;box-sizing:border-box;padding:12px 13px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-weight:400;text-transform:none;letter-spacing:0;font-family:inherit;background:#fff}
.lp-field input:focus,.lp-field select:focus,.lp-field textarea:focus{outline:2px solid var(--cypress);outline-offset:1px;border-color:var(--cypress)}
.lp-notice{background:var(--cream);border:1px solid #e3d9c8;border-radius:9px;padding:13px 15px;font-size:12px;line-height:1.6;color:#5a6772;text-transform:none;letter-spacing:0;font-weight:400}
.lp-notice a{color:var(--cypress);border-bottom:1px solid currentColor}
.lp-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--navy-ink);text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer}
.lp-consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--cypress)}
.lp-fineprint{font-size:12.5px;color:var(--grey);text-align:center;margin:2px 0 0}
@media(max-width:600px){.lp-form{padding:22px 18px;border-radius:12px;gap:14px}}
/* "Request a consultation" section on the SEO landing pages. */
.consult-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;padding-top:72px;padding-bottom:72px}
.consult-text{color:var(--grey);font-size:16px;line-height:1.65;margin:0 0 22px;max-width:44ch}
.consult{scroll-margin-top:90px}
/* The pitch is short and the form is tall: keep the pitch beside the form while it scrolls. */
@media(min-width:901px){.consult-copy{position:sticky;top:120px}}
@media(max-width:900px){.consult-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:44px;padding-bottom:48px}}
.lp-call{font-size:15px;color:var(--grey)}.lp-call a{color:var(--cypress);font-weight:700;border-bottom:1px solid currentColor;white-space:nowrap}
.consult-copy .h2{margin:10px 0 16px}
/* One line of proof beside every intake form. On the cream consult band it sits on white. */
.lp-trust{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--navy-ink);font-weight:600;background:var(--cream);border-radius:8px;padding:12px 14px;margin:0 0 14px}
.consult .lp-trust{background:#fff;border:1px solid #e5dec9;max-width:52ch}
.lp-trust>i,.lp-trust>svg{flex-shrink:0;width:16px !important;height:16px !important;margin-top:2px}

/* Intake forms on touch: 16px inputs stop iOS zooming on focus, and the consent row gets a 44px target */
@media(max-width:900px){
  .lp-field input,.lp-field select,.lp-field textarea{font-size:16px;line-height:1.35;min-height:46px}
  .lp-field textarea{min-height:110px}
  .lp-consent{min-height:44px;align-items:flex-start;padding:4px 0}
  .lp-consent input{width:22px;height:22px;margin-top:0}
}

/* Phone type floor: nothing a visitor has to read or tap sits below 12px, and form fields never trigger iOS focus-zoom */
@media(max-width:900px){
  .eyebrow{font-size:12px}
  .mobile-nav a{font-size:13px}
  .mobile-sub{font-size:12px !important}
  .hero-signal span{font-size:11px}
  .pa-tab .pa-num{font-size:12px}
  .contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea{font-size:16px !important;line-height:1.35}
  .contact-form input[type=checkbox]{width:22px !important;height:22px !important}
}
@media(max-width:600px){.contact-form button[type=submit],.contact-form .btn{width:100%;justify-content:center}}

/* HTML site map */
.sitemap-section{padding-top:56px;padding-bottom:88px}
.sitemap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 56px}
.sitemap-h{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cypress)}
.sitemap-group ul{list-style:none;margin:0;padding:0}
.sitemap-group li+li{border-top:1px solid var(--line)}
.sitemap-group a{display:flex;align-items:center;min-height:44px;color:var(--navy-ink);font-size:16px;line-height:1.35;padding:6px 0}
.sitemap-group a:hover,.sitemap-group a:focus-visible{color:var(--cypress)}
@media(max-width:960px){.sitemap-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 40px}}
@media(max-width:600px){.sitemap-grid{grid-template-columns:minmax(0,1fr);gap:32px}.sitemap-section{padding-top:36px;padding-bottom:56px}}

/* ── About page: intro row, three cards, chamber grid. Every block fills --shell
   (same container the header uses) instead of sitting in a narrow centered column. */
/* Stacked (2026-10-07), like the hub's navy band: side by side, the title wrapped to
   three lines and the lead stranded low on the right on wide screens. */
.about-intro{margin-bottom:44px}
.about-intro-title{max-width:30ch;text-wrap:balance}
.about-intro .lead{max-width:none;margin:18px 0 0} /* spans all three columns below (Brandon, 2026-10-13) */
.about-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.about-card{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:30px}
.about-card-num{display:block;margin-bottom:20px;color:var(--cypress);font-size:32px;font-weight:700;line-height:1}
.about-card-link{margin-top:auto;align-self:flex-start}
.about-card p{margin-bottom:24px !important}
.about-card h3{margin:0 0 14px;font-family:"DM Sans",sans-serif;font-size:clamp(1.3rem,1.7vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--navy-ink)}
.about-card p{margin:0;color:var(--grey);font-size:16px;line-height:1.7}
.chamber-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.chamber-logo{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 28px;height:108px;box-shadow:0 6px 18px -10px rgba(11,49,89,.18)}
.chamber-logo img{max-height:62px;max-width:100%;width:auto;object-fit:contain}
/* Square stacked mark: fill the card's inner height (108 - 2x18 padding) instead of the 56px cap. */
.chamber-logo-tall{padding-top:10px;padding-bottom:10px}
.chamber-logo-tall img{max-height:86px !important}
/* Wide wordmark: past the 170px width cap, sized to about the height of the square marks' lettering. */
.chamber-logo-wide{padding-left:20px;padding-right:20px}
.chamber-logo-wide img{max-width:235px !important;max-height:none !important}
@media(max-width:900px){
  /* The inline 170px max-width is wider than a phone card; keep wide wordmarks inside it. */
  .chamber-logo picture{display:flex;justify-content:center;min-width:0;max-width:100%}
  .chamber-logo img{max-width:100% !important;height:auto}
  .chamber-logo-tall{padding-top:8px !important;padding-bottom:8px !important}
  .chamber-logo-wide{padding-left:8px !important;padding-right:8px !important}
  .chamber-logo-wide img{max-width:100% !important}
  .chamber-logo-tall img{max-height:70px !important}
  .about-intro{grid-template-columns:1fr;margin-bottom:32px}
  .about-cards{grid-template-columns:1fr;gap:16px}
  .about-card{padding-top:24px}
  .about-cards{gap:40px !important}
  .chamber-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .chamber-logo{height:88px;padding:14px 16px}
}

/* ── Grouped FAQ (about page). Category rail left, one category's accordion right.
   Markup ships with every category visible; the script hides all but the first. */
.faq-shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:72px;align-items:start}
.faq-side{position:sticky;top:120px}
.faq-intro{margin:16px 0 28px;max-width:34ch}
.faq-tabs{display:flex;flex-direction:column;gap:8px}
.faq-tab{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:17px 20px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--navy-ink);font-family:inherit;font-size:16px;font-weight:600;text-align:left;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.faq-tab:hover{border-color:var(--cypress)}
.faq-tab[aria-selected="true"]{background:var(--navy-ink);border-color:var(--navy-ink);color:#fff}
.faq-tab:focus-visible{outline:2px solid var(--cypress);outline-offset:2px}
.faq-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:rgba(11,49,89,.08);font-size:12px;font-weight:700}
.faq-tab[aria-selected="true"] .faq-tab-count{background:rgba(255,255,255,.18)}
.faq-note{margin:26px 0 0;color:#5a6772;font-size:13px;line-height:1.65;max-width:42ch}
.faq-reviewed{display:inline-block;margin-top:6px;color:#8a97a2;font-size:12px}
.faq-panel-title{margin:0 0 18px;font-family:"DM Sans",sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cypress)}
.faq-panel+.faq-panel{margin-top:44px}
.faq-js .faq-panel+.faq-panel{margin-top:0}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;transition:border-color .18s,box-shadow .18s}
.faq-item[open]{border-color:rgba(71,113,91,.5);box-shadow:0 14px 30px -24px rgba(11,49,89,.35)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item h3,.faq-item h4{margin:0;font-family:"DM Sans",sans-serif;font-size:17px;font-weight:600;line-height:1.35;color:var(--navy-ink)}
.faq-caret{width:20px;height:20px;color:var(--cypress);flex-shrink:0;transition:transform .2s ease}
.faq-item[open] .faq-caret{transform:rotate(180deg)}
.faq-answer{padding:0 26px 24px}
.faq-answer p{margin:0;color:var(--grey);font-size:15.5px;line-height:1.75;max-width:70ch}
.faq-answer .faq-related{margin-top:14px}
.faq-related a{font-size:13px;font-weight:700;letter-spacing:.02em;border-bottom:1px solid currentColor}
@media(max-width:900px){
  .faq-shell{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static}
  .faq-intro{max-width:none;margin-bottom:20px}
  .faq-tabs{flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .faq-tabs::-webkit-scrollbar{display:none}
  .faq-tabs{overflow:visible}
  .faq-tab{width:auto;flex:1 1 0;justify-content:center;padding:12px 8px;font-size:13.5px;text-align:center}
  .faq-tab-count{display:none}
  .faq-note{margin-top:20px;max-width:none}
  .faq-item summary{padding:16px 18px}
  .faq-item h3,.faq-item h4{font-size:16px}
  .faq-answer{padding:0 18px 20px}
}

/* ── Wide-screen composition. The shell already steps up (1480/1600/1760); what did
   not step up was everything inside it. Hero copy, leads, the practice-switcher panel
   and the hero height were all tuned at the base shell and sat as small islands in a wide frame.
   These steps scale type, measures and heights with the shell so blocks fill it the
   way the header does. Nothing below 1600px is touched. */
@media(min-width:1600px){
  .hero{min-height:620px}
  .hero-image{min-height:620px}
  .hero-copy{padding-top:104px;padding-right:96px}
  .hero-copy h1{font-size:clamp(4.4rem,3.5vw,5.4rem);margin-bottom:30px}
  .hero-copy>p{max-width:600px;font-size:19px;margin-bottom:32px}
  .hero-signal strong{font-size:88px}
  .hero-signal span{font-size:11px}
  .hero-card{width:min(400px,70%);padding:34px 38px}
  .hero-card p{font-size:28px}
  .lead{font-size:19px;max-width:720px}
  .detail-hero{min-height:clamp(460px,38vh,580px)}
  .detail-hero-copy .lead{max-width:52ch}
  .detail-hero-copy{padding-right:clamp(64px,5vw,110px)}
  .pa-tab{padding:26px 26px 26px 24px}
  .pa-tab .pa-name{font-size:25px}
  .pa-pane{padding:52px 56px}
  .pa-pane h3{font-size:clamp(2rem,2.2vw,2.6rem)}
  .pa-pane .pa-blurb{max-width:780px;font-size:18px}
  .pa-issues{max-width:900px;gap:14px 40px}
  .pa-issues li{font-size:16px}
  .pa-ancillary{max-width:900px;font-size:15px}
  .about-card p,.faq-answer p{font-size:17px}
  .faq-item h3,.faq-item h4{font-size:19px}
  .about-card h3{font-size:1.75rem}
  .faq-tab{font-size:17px}
}
@media(min-width:2000px){
  .hero{min-height:720px}
  .hero-image{min-height:720px}
  .hero-copy>p{max-width:680px;font-size:21px}
  .lead{font-size:21px;max-width:800px}
  .pa-tab .pa-name{font-size:28px}
  .pa-pane .pa-blurb{max-width:880px;font-size:19px}
  .pa-issues{max-width:1000px}
}



/* ── Homepage look and feel: hero photo sits inside the content gutters ── */
.hero-image{margin:48px var(--hero-inset) 48px 0}
.hero-card{right:0;bottom:0}
@media(max-width:900px){
  .hero-copy{padding-bottom:36px}
  .hero-image{margin:0 24px 48px;min-height:380px}
  /* Phone: a compact corner tag, not a panel over most of the photo. */
  .hero-card{width:min(260px,78%);padding:14px 16px}
  .hero-card p{font-size:18px;line-height:1.08;margin-bottom:8px}
  .hero-card a{font-size:8.5px;letter-spacing:.05em;gap:4px;white-space:nowrap}
}
@media(max-width:360px){.hero-card a{white-space:normal}}
/* A short display line: the site-wide justify rule spaced its words apart. */
main .hero-card p{text-align:left;hyphens:manual;-webkit-hyphens:manual}
@media(min-width:1600px){.hero-image{margin-top:64px;margin-bottom:64px}}

/* Rhythm: a visible accent seam wherever two navy sections sit back to back,
   so they read as two chapters rather than one continuous dark slab. Cream,
   not cypress: a warm line reads as a seam; green read as a second brand color. */
.pa-band{border-top:3px solid var(--cream-2)}
footer{border-top:3px solid var(--cream-2)}
.pa-switch{padding-top:0;padding-bottom:0}
.pa-side{padding:72px 28px 64px 0}
.pa-heading{margin:0 0 30px;color:#fff;font-family:"DM Sans",sans-serif;font-size:clamp(2rem,3vw,2.8rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.pa-side .pa-rail{padding:0}
.pa-help{margin:22px 0 0;color:var(--accent-on-dark-muted);font-size:14.5px;line-height:1.55}
.pa-help a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.pa-help a:hover{border-bottom-color:#fff}
.pa-panes{margin:72px 0 64px 26px}
@media(max-width:900px){
  .pa-switch{padding:0 24px}
  .pa-side{padding:48px 0 8px}
  .pa-heading{margin-bottom:22px}
  .pa-help{margin:16px 0 0}
  .pa-panes{margin:6px 0 48px}
}

/* Face-to-face credentials as a list rather than wrapping chips */
.proof-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.proof-list li{position:relative;padding-left:22px;color:var(--navy-ink);font-size:14.5px;font-weight:600;letter-spacing:.02em}
.proof-list li:before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--cypress)}

/* Interior hero photo sits inside the content gutters, matching the homepage */
.detail-hero{background:var(--ivory);min-height:clamp(440px,50vh,540px)}
.detail-hero>:last-child{margin:44px var(--hero-inset) 44px 0}
@media(max-width:900px){
  .detail-hero>:last-child{margin:0 24px 36px}
  .detail-hero>.detail-hero-media:last-child{margin:24px 24px 0}
}

/* Practice-page services, always open (on navy background). Replaced the .svc-accordion
   expanders on 2026-10-06; those rules above are kept for rollback. */
.svc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.svc-list li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.svc-list li:first-child{padding-top:4px}
.svc-list h3{margin:0 0 6px;color:#fff;font-size:15.5px;font-weight:600;line-height:1.4;font-family:inherit;letter-spacing:0}
.svc-list p{margin:0;color:#a9c4dc;font-size:14px;line-height:1.65}

/* Single intake form (/contact), prefilled from the page that linked to it (2026-10-06).
   Preselected questions stay in the form, hidden until the visitor clicks "Change". */
.intake-form:not(.editing) [data-known]{display:none}
.intake-form [hidden]{display:none !important}
.intake-known{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;background:var(--cream);border:1px solid #e3d9c8;border-radius:9px;padding:13px 16px;font-size:14.5px;color:var(--navy-ink)}
.intake-known-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cypress)}
.intake-known strong{font-weight:600}
.intake-change{margin-left:auto;font-size:13px;color:var(--cypress);border-bottom:1px solid currentColor}
.intake-questions:empty{display:none}
.intake-error{margin:0;color:#b3261e;font-size:13.5px;font-weight:600}
.intake-error:empty{display:none}
.intake-form [aria-invalid]{border-color:#b3261e !important;box-shadow:0 0 0 1px #b3261e}
/* Closing band with the consultation button and the phone */
.cta-close-row{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-top:60px;padding-bottom:60px}
.cta-close-text{margin:12px 0 0;color:var(--grey);font-size:16px;line-height:1.65}
.cta-close-actions{display:flex;flex-wrap:wrap;gap:12px}
/* Desktop: copy left, the two actions stacked on the right at equal width, centered
   against the copy, so the long headline no longer pushes the buttons under it. */
@media(min-width:901px){
  .cta-close-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px}
  .cta-close-actions{flex-direction:column;flex-wrap:nowrap}
  .cta-close-actions .btn{justify-content:center}
}
@media(max-width:600px){.cta-close-actions{width:100%}.cta-close-actions .btn{width:100%}}
.lp-selects.intake-questions{display:flex;flex-direction:column;gap:15px}
.contact-card .lp-form{border:0;box-shadow:none;padding:0;border-radius:0}
/* Contact page office map: static, palette-toned, links to directions */
.office-map{position:relative;display:block;margin-top:24px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.16);aspect-ratio:16/11;background:#062648}
.office-map picture,.office-map-img{display:block;width:100%;height:100%}
.office-map-img{object-fit:cover;object-position:center;transition:transform .5s ease}
.office-map:hover .office-map-img{transform:scale(1.03)}
.office-map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--cypress);color:#fff;box-shadow:0 0 0 7px rgba(163,196,176,.28),0 8px 18px rgba(0,0,0,.35)}
.office-map-label{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:rgba(6,38,72,.92);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.45;color:#cdddec}
.office-map-label strong{display:block;color:#fff;font-size:13px;font-weight:600}
.office-map-cta{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--navy-ink);border-radius:999px;padding:6px 11px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.office-map:hover .office-map-cta,.office-map:focus-visible .office-map-cta{background:var(--cream)}
.office-map:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:3px}
.office-map-credit{margin:8px 0 0;font-size:11px;color:var(--accent-on-dark-muted)}
.office-map-credit a{color:inherit;border-bottom:1px solid currentColor}
/* Footer social icons (legacy site's four profiles) */
.footer-social{display:flex;gap:10px;margin-top:22px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:var(--accent-on-dark);transition:background .15s,color .15s,border-color .15s}
.footer-social a:hover,.footer-social a:focus-visible{background:var(--accent-on-dark);border-color:var(--accent-on-dark);color:var(--navy-deep)}
.footer-social a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Large-format recognition (Board Certified seal at native size, never smaller) */
.recognition{display:flex;flex-wrap:wrap;gap:16px}
.recognition-item{display:flex;align-items:center;gap:18px}
.recognition-seal{width:91px;height:auto;flex-shrink:0;display:block}
.recognition-text{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.45}
.recognition-text strong{font-size:15px;font-weight:600}
.recognition-text small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.recognition-light .recognition-text{color:var(--grey)}
.recognition-light .recognition-text strong{color:var(--navy-ink)}
.recognition-light .recognition-text small{color:var(--cypress)}
.recognition-dark .recognition-seal{filter:invert(1)}
.recognition-dark .recognition-text{color:#cdddec}
.recognition-dark .recognition-text strong{color:#fff}
.recognition-dark .recognition-text small{color:var(--accent-on-dark-muted)}
a.recognition-item:hover .recognition-text strong{text-decoration:underline;text-underline-offset:3px}
/* "From the field" phase cards (construction practice page): hover lifts the card,
   draws a cypress rule under the phase label and slowly pushes into the photo. */
.phase-card{margin:0;background:#fff;border:1px solid #eadfce;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.phase-card-media{overflow:hidden}
.phase-card-media img{width:100%;height:190px;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.phase-card-label{position:relative;margin:0;padding-bottom:8px;color:var(--cypress);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.phase-card-label:after{content:"";position:absolute;left:0;bottom:0;width:18px;height:2px;background:var(--cypress);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.phase-card:hover{transform:translateY(-6px);border-color:var(--cypress);box-shadow:0 22px 40px -24px rgba(11,49,89,.45)}
.phase-card:hover .phase-card-media img{transform:scale(1.06);filter:saturate(1.08)}
.phase-card:hover .phase-card-label:after{width:64px}
@media(prefers-reduced-motion:reduce){
  .phase-card,.phase-card-media img,.phase-card-label:after{transition:none}
  .phase-card:hover{transform:none}
  .phase-card:hover .phase-card-media img{transform:none}
}
/* Editorial columns: the About page's language (hairline rule, no box) shared by the
   SEO pages' comparison, matter and deadline blocks. */
.ed-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.ed-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.ed-col{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:28px}
.ed-col-accent{border-top:2px solid var(--cypress)}
.ed-col-dark{border-top-color:rgba(255,255,255,.2)}
.ed-col-num{display:block;margin-bottom:18px;color:var(--cypress);font-size:32px;font-weight:700;line-height:1}
.ed-col-title{margin:0 0 16px;font-family:"DM Sans",sans-serif;font-size:clamp(1.2rem,1.5vw,1.4rem);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--navy-ink)}
.ed-col-text{margin:0 0 22px;color:var(--grey);font-size:15.5px;line-height:1.65}
.ed-col-link{margin-top:auto;align-self:flex-start}
@media(max-width:900px){.ed-cols,.ed-cols-2{grid-template-columns:1fr;gap:36px}}
/* Intake form spacing (2026-10-07): roomier rhythm, and every control the same height.
   Safari draws a native <select> as a thin pill that ignores padding, so selects drop
   the native look and carry their own chevron. */
.intake-form{gap:22px}
.intake-form .lp-field{gap:9px}
.intake-form .lp-row,.intake-form .lp-selects.intake-questions{gap:22px}
.intake-form .lp-field input,.intake-form .lp-field select{min-height:50px;padding:13px 15px}
.intake-form .lp-field textarea{padding:14px 15px;min-height:120px}
.intake-form .lp-field select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;color:var(--navy-ink);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2347715B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 15px center}
.intake-form .lp-notice{padding:16px 18px;line-height:1.65}
.intake-form .lp-consent{gap:12px}
.intake-form button[type=submit]{min-height:54px;margin-top:4px}
.intake-form .intake-known{padding:15px 18px}
.recognition{gap:20px 40px}
.recognition-mark{display:flex;align-items:center;justify-content:center;width:91px;flex-shrink:0}
.recognition-ring{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:1px solid currentColor}
.recognition-light .recognition-mark{color:var(--cypress)}
.recognition-dark .recognition-mark{color:var(--accent-on-dark)}
/* Editorial columns on navy */
.ed-col-dark .ed-col-num{color:var(--accent-on-dark)}
.ed-col-dark .ed-col-title{color:#fff}
.ed-col-dark .ed-col-text{color:#cdddec;margin-bottom:0}
/* Practice-areas hub navy band header: stacked, heading across two lines, lead beneath.
   Side by side left a five-line heading and a stranded lead on wide screens. */
.hub-band-head{margin-bottom:44px}
.hub-band-head .h2{max-width:30ch;margin:0;text-wrap:balance}
.hub-band-lead{margin:18px 0 0;color:#cdddec;font-size:17px;line-height:1.7;max-width:none} /* spans all three columns, like The Firm intro (2026-10-13) */
@media(max-width:900px){.hub-band-head{margin-bottom:32px}}
.pa-mediation{margin:22px 0 18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);color:#cdddec;font-size:14px;line-height:1.6;max-width:560px}
.pa-mediation a{color:var(--accent-on-dark-soft);border-bottom:1px solid currentColor}
.pa-mediation a:hover{color:#fff}


/* ── 2026-10-19 client review ─────────────────────────────────────────────── */

/* Utility bar: both numbers with a slash, no office/cell labels (G-01, G-07). */
.ub-phones{display:inline-flex;align-items:center;gap:6px;color:var(--navy-ink)}
.ub-phones i{color:var(--cypress)}
.ub-phones a{color:inherit;transition:color .18s}
.ub-phones a:hover,.ub-phones a:focus-visible{color:var(--cypress)}
.ub-slash{color:var(--grey);padding:0 2px}
.phone-pair a{color:inherit}
.phone-pair a:hover{color:var(--cypress)}

/* Practice page header: title, then the second line (C-01, R-01). */
.page-subhead{margin:-6px 0 18px;color:var(--cypress);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* Homepage practice areas, Ortega Group pattern (H-03): tab rail with a second line per
   pillar, and a short service accordion inside each pane. */
.pa-tab-titles{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.pa-tab .pa-sub-line{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-on-dark-muted);line-height:1.3}
.pa-tab[aria-selected="true"] .pa-sub-line{color:var(--cypress)}
.pa-pane .pa-blurb{margin-bottom:18px}
.pa-sub{border-top:1px solid var(--line);margin:0 0 26px;max-width:680px}
.pa-sub-item{border-bottom:1px solid var(--line)}
.pa-sub-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:600;color:var(--navy-ink);transition:color .2s ease}
.pa-sub-item summary::-webkit-details-marker{display:none}
.pa-sub-item summary i{width:18px;height:18px;flex-shrink:0;color:var(--cypress);transition:transform .25s ease}
.pa-sub-item[open] summary i{transform:rotate(180deg)}
.pa-sub-item summary:hover,.pa-sub-item[open] summary{color:var(--cypress)}
.pa-sub-item summary:focus-visible{outline:2px solid var(--cypress);outline-offset:2px;border-radius:4px}
.pa-sub-item p{margin:0 0 16px;padding-right:34px;font-size:14.5px;line-height:1.6;color:var(--grey)}
@media(max-width:900px){.pa-tab .pa-sub-line{font-size:10px}.pa-sub{margin-bottom:20px}.pa-sub-item summary{font-size:15px;padding:12px 0}}
@media(min-width:1600px){.pa-sub{max-width:800px}.pa-sub-item summary{font-size:17px}.pa-sub-item p{font-size:15.5px}}

/* Contact form: optional marker on the one non-required text field (F-01). */
.lp-optional{font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey)}

/* Contact sidebar on the light card (F-04): value text inherits navy. */
.contact-aside a{color:var(--navy-ink)}
.contact-aside a:hover{color:var(--cypress)}

/* Team page tiers (M-01): Ray on top, attorneys on one row, paralegals on one row. */
.team-tiers{display:flex;flex-direction:column;gap:22px}
.team-lead{display:grid;grid-template-columns:minmax(260px,.9fr) 1.6fr;align-items:stretch}
.team-lead-media{position:relative;min-height:420px;overflow:hidden}
.team-lead-media picture{display:block;position:absolute;inset:0}
.team-lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.team-tier-label{margin:26px 0 0}
.team-grid{display:grid;gap:24px}
.team-grid-attorneys{grid-template-columns:repeat(2,1fr)}
.team-grid-staff{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.team-grid-staff{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.team-lead{grid-template-columns:1fr}.team-lead-media{aspect-ratio:1/1;min-height:0}.team-lead-media picture,.team-lead-media img{position:static}}
@media(max-width:560px){.team-grid-attorneys,.team-grid-staff{grid-template-columns:1fr}}

/* Full justification of body copy (G-04). "Remember, I want everything justified. Full
   justified. Justified on both sides." Headings, buttons, labels, nav, captions and the
   footer are not body copy and stay as they are. Off under 640px, where justified text
   in a narrow column forms rivers. */
@media(min-width:640px){
  main p:not(.eyebrow):not(.hero-card p):not(.page-subhead):not(.pa-read):not(.pa-help):not(.lp-fineprint):not(.lp-notice):not(.lp-call):not(.lp-trust):not(.intake-error):not(.phase-card-label):not(.office-map-credit):not(.faq-note):not(.hub-card-cta):not(.team-card-summary):not(.situational-card-desc):not(.cta-close-text),
  main .lead,main .faq-answer p,main .pa-blurb,main .pa-ancillary,main .pa-mediation,main .hub-pillar-blurb,main .svc-list li p,main .team-card-summary,main .cta-close-text,main .situational-card-desc{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
  main .lp-form p,main .lp-form label,main [style*="text-align:center"]{text-align:inherit}
}


/* Office photos from the client (2026-10-21): The Firm office strip. */
.office-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.office-strip figure{margin:0;background:#f0f3f6;border:1px solid var(--line)}
.office-strip .office-strip-media{aspect-ratio:3/4;overflow:hidden}
.office-strip img{width:100%;height:100%;object-fit:cover;display:block}
.office-strip figcaption{padding:14px 18px 18px;font-size:13.5px;line-height:1.5;color:var(--grey);text-wrap:pretty;min-height:96px}
.office-strip figcaption strong{display:block;color:var(--navy-ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
@media(max-width:700px){.office-strip{grid-template-columns:1fr}.office-strip .office-strip-media{aspect-ratio:4/3}}

/* Team lead card: facts fill the column beside the portrait. */
.team-lead-facts{display:grid;grid-template-columns:1.1fr .9fr;gap:28px 40px;margin:22px 0 26px;padding-top:22px;border-top:1px solid var(--line)}
.team-lead-proof{margin:0;gap:12px;align-content:start}
.team-lead-proof li{font-size:14px;font-weight:500;color:var(--ink);line-height:1.5}
.team-lead-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.team-lead-tags li{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--navy-ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.team-lead .recognition{gap:12px}
@media(max-width:1100px){.team-lead-facts{grid-template-columns:1fr}}

/* Hover motion on the photo cards (Brandon, 2026-10-21): a slow zoom on the image, a small
   lift with shadow on the card, and the caption title warming to cypress. Honors reduced motion. */
.office-strip figure,.team-card,.team-lead{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.office-strip .office-strip-media img,.team-card img,.team-lead-media img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.office-strip figure:hover,.team-card:hover,.team-lead:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(11,49,89,.35);border-color:#d4dde6}
.office-strip figure:hover .office-strip-media img,.team-card:hover img,.team-lead:hover .team-lead-media img{transform:scale(1.04)}
.office-strip figcaption strong,.team-card-body>p:first-child{transition:color .3s ease}
.office-strip figure:hover figcaption strong{color:var(--cypress)}
.team-card-cta i,.text-link i{transition:transform .3s ease}
.team-card:hover .team-card-cta i,.text-link:hover i{transform:translate(2px,-2px)}
.team-card img{display:block}
.team-card,.office-strip .office-strip-media,.team-lead-media{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .office-strip figure,.team-card,.team-lead,.office-strip .office-strip-media img,.team-card img,.team-lead-media img,.team-card-cta i,.text-link i{transition:none}
  .office-strip figure:hover,.team-card:hover,.team-lead:hover{transform:none}
  .office-strip figure:hover .office-strip-media img,.team-card:hover img,.team-lead:hover .team-lead-media img{transform:none}
}

/* Contact hero: the front door is a portrait photo, so the media column is a little narrower
   and the crop favors the sign (object-position). No parallax: the still frame keeps the
   sign and the floor number in view. */
.detail-hero-door{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
/* Same parallax as every other interior hero; the crop favors the sign on the glass. */
.hero-parallax.hero-door img{object-position:center 24%}
.contact-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.contact-hero-mail{margin-left:6px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
@media(max-width:900px){.detail-hero-door{grid-template-columns:1fr}.hero-parallax.hero-door img{object-position:center 30%}.contact-hero-mail{margin-left:0}}
@media(max-width:600px){.contact-hero-cta .btn{width:100%}}

/* Practice pane: uniform explore row (chips) under the Contact Us button. */
.pa-actions{flex-direction:column;align-items:flex-start;gap:18px}
.pa-explore{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pa-explore-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-right:4px}
.pa-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--navy-ink);transition:border-color .2s ease,color .2s ease,background .2s ease}
.pa-chip:hover,.pa-chip:focus-visible{border-color:var(--cypress);color:var(--cypress);background:var(--cream)}
@media(max-width:900px){.pa-actions{align-items:stretch}.pa-actions .btn{justify-content:center}}

/* Contact hero facts: fill the column between the lead and the buttons with what a caller wants first. */
.contact-hero-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.contact-hero-facts li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--ink)}
.contact-hero-facts i{width:18px;height:18px;flex-shrink:0;color:var(--cypress);margin-top:3px}
.contact-hero-facts a{color:var(--navy-ink);border-bottom:1px solid var(--line);transition:color .2s ease,border-color .2s ease}
.contact-hero-facts a:hover{color:var(--cypress);border-color:currentColor}
.detail-hero-door .page-h1{max-width:14ch}

/* ── Homepage hero on phones (10-22). The desktop -.04em tracking made capitals touch
   ("ATTENTION", "POWERFUL") at phone size, and the headline used half the width.
   Bigger, looser headline; tighter top; full-width primary button; a hairline
   seam above the 1987 signal so it reads as a sign-off, not stray text. ── */
@media(max-width:600px){
  .hero-copy{padding:36px 24px 32px}
  .hero-copy h1{font-size:clamp(2.6rem,13.4vw,3.9rem);line-height:.98;letter-spacing:-.006em;margin-bottom:20px}
  .hero-copy>p{font-size:16px;line-height:1.62;margin-bottom:28px;color:#dbe7f2}
  .hero-copy>div:has(>.btn){width:100%;flex-direction:column;align-items:stretch !important;gap:18px !important}
  .hero-copy>div:has(>.btn) .btn{justify-content:center;padding-top:17px;padding-bottom:17px}
  .hero-copy>div:has(>.btn) .text-link{align-self:center}
  .hero-signal{width:100%;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .hero-signal strong{font-size:46px;line-height:.85}
  .hero-signal span{line-height:1.5}
  .hero-image{min-height:300px;margin-bottom:40px}
}

/* Contact hero entrance, 10-22: a wide, straightened edit of her front-door photo in the
   standard landscape frame, styled like every other interior hero. */
@media(min-width:901px){.detail-hero-door{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hero-parallax.hero-door img{object-position:center 45%}

/* Landing pages, "Who we help" (10-22): five equal tiles spanning the content width. */
.lp-who{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.lp-who li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;line-height:1.3;color:var(--navy-ink)}
@media(max-width:900px){.lp-who{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.lp-who{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lp-who li{font-size:14px;min-height:52px}}
@media(max-width:560px){.lp-who li:last-child:nth-child(odd){grid-column:1/-1}}

/* Justify everything (client, 10-19 and 10-22: "everything justified, both sides").
   All widths, body and footer: paragraphs, list items, captions, quotes. Zero specificity
   (:where), so any rule that centers something on purpose still wins, and one-line text
   is unaffected (justify never stretches a last or only line). */
:where(main,footer) :where(p,figcaption,dd,blockquote){text-align:justify;text-align-last:left;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
/* List items justify only in running prose (legal pages, FAQ answers); short bullets elsewhere
   stay left-aligned so a two-line item never spreads its first line (10-22 audit). */
:where(.legal-prose,.faq-answer) :where(li){text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}
:where([style*="text-align:center"]) :where(p,li,figcaption,dd,blockquote){text-align:inherit}

/* Contact hero (10-22): phone, phone and email as three matching outline buttons.
   The email keeps its lowercase letters so the address reads correctly. */
.contact-hero-cta .contact-hero-mail{margin-left:0;text-transform:none;letter-spacing:.02em;font-size:13px}
@media(min-width:601px){
  .contact-hero-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:440px}
  .contact-hero-cta .btn{justify-content:center;padding-left:14px;padding-right:14px}
  .contact-hero-cta .contact-hero-mail{grid-column:1/-1}
}

/* Areas served line, home "About the firm" block (10-22, G-11). */
.area-line{display:flex;align-items:flex-start;gap:10px;margin:-8px 0 24px;color:var(--navy-ink);font-size:15px;line-height:1.55;font-weight:500}
.area-line i{width:18px;height:18px;flex-shrink:0;color:var(--cypress);margin-top:2px}

/* Accessibility fixes, 10-22 (axe-core WCAG 2.1 AA scan + keyboard pass). */
.pa-tab[aria-selected="true"] .pa-num,.pa-tab[aria-selected="true"] .pa-sub-line{color:var(--cypress-hover)}
.office-map-credit{color:var(--grey)}
.has-dropdown.force-closed .dropdown-menu{opacity:0;visibility:hidden;pointer-events:none}
.has-dropdown.force-closed .dropdown-caret{transform:none}

/* Balanced lines (10-22): multi-line headings split into even lines instead of leaving one
   word alone ("...the next / step."); body text avoids a lone last word. */
h1,h2,h3,h4,.h2,.page-h1,.cta-close h2{text-wrap:balance}
:where(main,footer) :where(p,li,figcaption){text-wrap:pretty}
/* FAQ heading sized to its narrow column so two-word headings ("Common questions") stay on one line. */
.faq-side .h2{font-size:clamp(2rem,3vw,2.75rem)}

/* Justification exemptions (10-22 audit): labels, eyebrows and role lines are short UI text,
   never justified; hero and lead paragraphs are not hyphenated ("fo-cused", "de-livers"). */
main .eyebrow,main p[style*="text-transform:uppercase"],main .tm-label,main .team-lead-facts li,main .hero-signal span,main .page-subhead,main .phase-card figcaption p{text-align:left !important}
main .hero-copy>p,main .lead,main .page-subhead,main .detail-hero-copy p{hyphens:manual !important;-webkit-hyphens:manual !important}

/* Client 10-22: pillar second line under the hub title, matching the home page tabs. */
.hub-pillar-sub{margin:8px 0 0;color:var(--cypress);font-size:15px;font-weight:600;letter-spacing:.01em;text-align:left !important}

/* The Firm: continuity section (Suzy 10-22). Joint portrait of Raymond and Ricky (10-28 shoot). */
.continuity-section{background:var(--ivory)}
.continuity-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
.continuity-media{margin:0}
.continuity-photo{aspect-ratio:4/5;overflow:hidden;background:#e9edf1}
.continuity-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.continuity-media figcaption{margin-top:12px;font-size:13px;color:var(--grey);text-align:left}
.continuity-copy .lead{margin:16px 0 14px}
.continuity-copy p:not(.eyebrow):not(.lead){color:var(--grey);font-size:16px;line-height:1.7;margin:0 0 22px}
@media(max-width:900px){.continuity-grid{grid-template-columns:1fr;gap:32px;padding-top:56px;padding-bottom:56px}}

/* Home hero on phones and tablets, 10-27 (Brandon): the photo and its card come first,
   then the headline and copy. Desktop keeps copy left, photo right. */
@media(max-width:900px){
  .hero-image{order:-1;margin:24px 24px 0 !important}
  .hero-copy{padding-top:40px}
}
/* The 1987 signal moves up under the photo on phones and tablets (10-27). */
.hero-signal-m{display:none}
@media(max-width:900px){
  .hero-image{order:-2}
  .hero-signal-m{display:grid;order:-1;width:auto;margin:0 24px;padding:22px 0;border-top:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .hero-copy .hero-signal{display:none}
  .hero-copy{padding-top:32px}
}

/* Thank-you page: a centered layout, exempt from the sitewide justified-text and
   left-aligned eyebrow rules above (those fight a centered column). 2026-11-11. */
main .ty .eyebrow,main .ty .lead,main .ty .ty-fine{text-align:center !important;text-align-last:center;hyphens:manual !important;-webkit-hyphens:manual !important}
main .ty .eyebrow{justify-content:center}
main .ty .lead{max-width:56ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
main .ty .ty-fine{max-width:52ch;margin:28px auto 0;padding-top:20px;border-top:1px solid var(--line);color:var(--grey);font-size:13.5px;line-height:1.7}
main .ty .btn+.text-link{align-self:center}