/* Design tokens from the Figma "CSS Sheet - Page 1" color guide and typography specimen. */
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/denham-site/media/03d508bb/fonts/gloock-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/wp-content/uploads/denham-site/media/03d508bb/fonts/jakarta-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/wp-content/uploads/denham-site/media/03d508bb/fonts/jakarta-latin-italic.woff2) format('woff2');
}

:root {
  --navy: #0a0a3a;      /* Accent 1, secondary background */
  --blue: #000066;      /* Accent 2, headings, primary buttons */
  --night: #000025;     /* mobile header bar, hero top */
  --gold: #f6c700;      /* Accent 3, CTA */
  --gold-dark: #8a6a0e; /* Accent 4, links, H4, hover */
  --gray: #e3e3e3;      /* Accent 5, testimonial band */
  --sand: #e1ded9;      /* Accent 6, map and FAQ bands */
  --neutral: #c4c4c4;
  --muted: #737373;
  --card: #f7f7f7;
  --ink: #000;
  --ink-h6: #003049;
  --white: #fff;

  --serif: 'Gloock', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* 1920 design: interior content spans 300-1620, header 256-1664. */
  --wrap: 1320px;
  --wrap-wide: 1410px;
  --wrap-narrow: 1060px;
  --gutter: clamp(20px, 3.6vw, 48px);

  --fs-body: clamp(15px, 0.3vw + 11.2px, 17px);
  --fs-h1: clamp(38px, 2.6vw + 10px, 60px);
  --fs-h2: clamp(34px, 1.9vw + 13.5px, 50px);
  --fs-h3: clamp(26px, 1vw + 15.8px, 35px);
  --fs-h4: clamp(19px, 0.5vw + 15.4px, 25px);
  --fs-h5: clamp(15px, 0.2vw + 13.2px, 17px);
  --lh-body: 1.7;
  --header-h: 125px;
}

/* Reset and base typography (CSS Sheet: H2 Gloock 50/120% #000066, H3 Gloock 35, H4 Jakarta Bold 25 #96710F caps,
   H5 Jakarta ExtraBold 17/21 caps, H6 Jakarta Bold 17/170% #003049, body Jakarta 17/170% #000). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1.35em; }
ul, ol { margin: 0; padding: 0; }
/* Two-tone ring: gold shows on the navy bands, the 2px navy ring inside it shows on white (gold alone is 1.6:1 there). */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--blue); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 22px; font-weight: 400; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; color: var(--blue); letter-spacing: 0; } /* specimen widths match untracked Gloock */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-family: var(--sans); font-weight: 700; font-size: var(--fs-h4); line-height: 1.2; color: var(--gold-dark); text-transform: uppercase; }
h5 { font-family: var(--sans); font-weight: 800; font-size: var(--fs-h5); line-height: 21px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.12em; }
h6 { font-family: var(--sans); font-weight: 700; font-size: var(--fs-body); line-height: 1.7; color: var(--ink-h6); }

.container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--gold); color: var(--navy); padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Eyebrow labels ("THE DENHAM DIFFERENCE"): Jakarta ExtraBold caps, wide tracking. */
.eyebrow { font-family: var(--sans); font-weight: 800; font-size: var(--fs-h5); line-height: 21px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; color: var(--ink); }
.eyebrow--gold { color: var(--gold); }
.eyebrow--dark-gold { color: var(--gold-dark); }
.eyebrow--ink { color: var(--ink); }

.i { width: 1em; height: 1em; flex: none; }
.i-arrow { width: 22px; height: 14px; }
.i-arrow-long { width: 34px; height: 14px; }
.i-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons (CSS Sheet "Buttons"): navy #000066 static, #96710F hover; gold #F6C700 with #000066 text on dark,
   #96710F with white text on hover. Jakarta SemiBold 16px, 3px corners.
   Gold: 56 tall, label ink 20px from the left (18px padding plus the glyph's side bearing), 21px arrow 22px from the right.
   Navy and outline: 22px sides, 11px gap and the short 14px arrow (specimen, Read Reviews 177, Read All FAQs 174). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 22px 0 18px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn .i-arrow { width: 21px; height: 14px; transition: transform .18s ease; }
.btn .i-arrow path { stroke-width: 1.6; } /* the Figma arrows are hairline, lighter than the icon default */
.btn:hover .i-arrow { transform: translateX(3px); }
.btn-gold { background: var(--gold); color: var(--blue); }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--gold-dark); color: var(--white); }
.btn-navy { background: var(--blue); color: var(--white); }
.btn-navy:hover, .btn-navy:focus-visible { background: var(--gold-dark); color: var(--white); }
.btn-outline { background: transparent; color: var(--white); border-color: var(--gold); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--gold); color: var(--blue); }
.btn-outline-navy { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline-navy:hover, .btn-outline-navy:focus-visible { background: var(--blue); color: var(--white); }
.btn-navy, .btn-outline, .btn-outline-navy { padding: 0 22px 0 20px; gap: 11px; }
.btn-navy .i-arrow, .btn-outline .i-arrow, .btn-outline-navy .i-arrow { width: 14px; height: 13px; }
.btn-sm { min-height: 53px; padding: 0 22px; gap: 11px; }
.btn-sm .i-arrow { width: 14px; height: 13px; }
.btn .i-phone { width: 18px; height: 18px; color: var(--gold); }
.btn-gold .i-phone { color: var(--blue); }
.btn-gold:hover .i-phone, .btn-gold:focus-visible .i-phone { color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.btn-row--center { justify-content: center; }
/* Narrow phones: long labels wrap inside the button instead of pushing past the screen edge. */
@media (max-width: 480px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; }
}

/* Header. 1920: logo 330w at x=261, nav (About, Practice Areas, Locations) 17px/500 white with gold carets,
   phone 19px/700, gold CTA 230x56. Solid/sticky bar #0A0A3A, 125px tall (StickyHeader frame).
   Home overlay: transparent over the hero with a dark top fade, logo at y=51.
   Phones (430 frame): split call bar (56px, #000066 | #F6C700) over a #000025 bar with logo 225w and a hamburger.
   Anchors (the CTAs' #free-case-evaluation) stop below the sticky header. */
html { scroll-padding-top: calc(var(--header-h) + 12px); }
.site-header { position: sticky; top: 0; z-index: 60; color: var(--white); }
.callbar { display: none; }
.header-bar { background: var(--navy); transition: background-color .25s ease, box-shadow .25s ease; }
/* Figma keeps the row 11px further from the left edge than the right (1920: 261-1669; 1280: 51-1240),
   and centers it 3px above the bar's middle. */
.header-inner {
  display: flex; align-items: center;
  max-width: 1499px; margin: 0 auto; padding: 0 40px 6px 51px;
  height: var(--header-h);
}
.brand { display: block; flex: none; margin-right: auto; }
.brand img { width: 330px; height: auto; }

.main-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: inline-flex; align-items: center; padding: 10px 0; white-space: nowrap; color: var(--white); text-decoration: none; font-weight: 500; font-size: 16px; line-height: 1; }
.nav-link:hover, .nav-item.has-menu:hover > .nav-link, .nav-item.is-open > .nav-link { color: var(--gold); }
/* The caret is its own button, 3px after the label as in the frame; the box is padded for an easier hit. */
.nav-toggle { display: inline-flex; align-items: center; justify-content: flex-start; width: 16px; height: 36px; margin-right: -3px; padding: 0 0 0 3px; background: none; border: 0; color: var(--gold); }
.nav-toggle .i-caret { width: 10px; height: 8px; margin-top: 1px; transition: transform .16s ease; }
.nav-item.is-open > .nav-toggle .i-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: 100%; left: -18px; min-width: 270px; list-style: none;
  background: var(--white); padding: 12px 0; box-shadow: 0 18px 40px rgba(0, 0, 40, .28);
  border-top: 3px solid var(--gold);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  /* visibility flips at once on open (so Tab can reach the links right away) and after the fade on close */
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav-item.is-wide .nav-menu { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); min-width: 520px; column-gap: 8px; }
/* Hover or the caret button (.is-open) opens a submenu; focus on the parent link does not (site.js), except without JS. */
.nav-item.has-menu:hover .nav-menu, html:not(.js) .nav-item.has-menu:focus-within .nav-menu, .nav-item.is-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Escape closes the menu even while focus (or the mouse) is still inside the item. */
.nav-item.has-menu.is-dismissed .nav-menu { opacity: 0; visibility: hidden; transform: translateY(8px); }
.nav-menu a { display: block; padding: 9px 22px; color: var(--blue); text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.35; }
.nav-menu a:hover, .nav-menu a[aria-current] { color: var(--gold-dark); background: #f6f6f9; }
.nav-extra { display: none; }

/* top: 2px puts the number on the frame's text row (54-70 sticky, 62-78 overlay), a little under the nav labels. */
.header-phone { position: relative; top: 2px; display: inline-flex; align-items: center; gap: 5px; margin-left: 31px; color: var(--white); text-decoration: none; font-weight: 700; font-size: 18px; white-space: nowrap; }
.header-phone .i-phone { width: 17px; height: 17px; color: var(--gold); }
.header-phone:hover { color: var(--gold); }
/* The frame's CTA label rides 1px above the button's middle. */
.header-cta { margin-left: 16px; width: 230px; justify-content: space-between; padding-right: 16px; padding-bottom: 2px; }
.menu-button { display: none; }

/* Home: header floats over the hero photo, then turns solid once the page scrolls (site.js sets .is-stuck). */
.site-header--overlay { position: absolute; left: 0; right: 0; top: 0; }
.site-header--overlay .header-bar { background: linear-gradient(180deg, rgba(0, 0, 37, .96) 0%, rgba(0, 0, 37, .62) 55%, rgba(0, 0, 37, 0) 100%); }
/* Overlay frames: nav row and CTA at y 40-95, the logo 11px lower (51-106). */
.site-header--overlay .header-inner { height: auto; padding-top: 39px; padding-bottom: 50px; }
.site-header--overlay:not(.is-stuck) .brand { transform: translateY(12px); }
.site-header--overlay.is-stuck { position: fixed; animation: header-in .28s ease; }
.site-header--overlay.is-stuck .header-bar { background: var(--navy); }
.site-header--overlay.is-stuck .header-inner { height: var(--header-h); padding-top: 0; padding-bottom: 6px; }
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* 1280 frame: logo 336w at x=51, nav gap ~30px, CTA 230x56. */
@media (max-width: 1440px) {
  .brand img { width: 336px; }
  .nav-list { gap: 28px; }
}
/* 1101-1240: no frame; shrink the logo and gaps so the row still fits on one line. */
@media (max-width: 1240px) {
  .brand { margin-right: 24px; }
  .brand img { width: 250px; }
  .main-nav { margin-left: auto; }
  .nav-list { gap: 20px; }
  .header-phone { margin-left: 24px; font-size: 16px; }
  .header-cta { width: auto; gap: 12px; }
}

/* Tablet and phone: call bar + logo bar + drawer menu. The call bar (phone + Free Case Consultation) stays pinned
   with the logo bar; once the page scrolls (site.js .is-compact) the logo bar shrinks to 66px so the pair stays light. */
@media (max-width: 1100px) {
  :root { --header-h: 90px; }
  html { scroll-padding-top: 134px; } /* 56px call bar + 66px compact bar + 12px */
  .site-header, .site-header--overlay { position: sticky; top: 0; }
  .site-header--overlay.is-stuck { position: sticky; animation: none; }
  .callbar { display: grid; grid-template-columns: 43.7% 1fr; height: 56px; }
  .callbar a { display: flex; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-weight: 700; font-size: 16px; white-space: nowrap; }
  /* 430 frame: the number sits 2px under the bar's middle and the CTA 1px over it; 13x14 phone glyph, 19px arrow 10px after the label. */
  .callbar-phone { padding-top: 3px; background: var(--blue); color: var(--white); }
  .callbar-phone .i-phone { width: 18px; height: 18px; margin-top: -3px; color: var(--gold); }
  .callbar-cta { padding-bottom: 2px; background: var(--gold); color: var(--blue); }
  .callbar a.callbar-cta { gap: 8px; }
  .callbar-cta .i-arrow { width: 21px; height: 14px; }
  .header-bar, .site-header--overlay .header-bar, .site-header--overlay.is-stuck .header-bar { background: var(--night); box-shadow: none; }
  /* 430 frame: logo x 19-243, hamburger lines 368-403, both 1px under the bar's middle. */
  .header-inner, .site-header--overlay .header-inner, .site-header--overlay.is-stuck .header-inner { height: var(--header-h); padding: 2px 26px 0 19px; }
  .site-header--overlay:not(.is-stuck) .brand { transform: none; }
  .brand { padding: 4px 0; margin: -4px auto -4px 0; } /* 44px tap height, same position */
  .brand img { width: 225px; }
  .header-inner, .brand img { transition: height .2s ease, width .2s ease; }
  .site-header.is-compact .header-inner { height: 66px; }
  .site-header.is-compact .brand img { width: 190px; }
  .header-phone, .header-cta { display: none; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -6px; padding: 0; background: none; border: 0; color: var(--white); }
  .menu-button .i-menu { width: 36px; height: 24px; }
  .menu-button .i-close { display: none; width: 26px; height: 26px; }
  .site-header.menu-open .menu-button .i-menu { display: none; }
  .site-header.menu-open .menu-button .i-close { display: block; }

  /* The off-canvas drawer needs site.js; without it (no .js on <html>) the nav shows as a plain list, see below. */
  .js .main-nav {
    position: fixed; left: 0; right: 0; top: var(--drawer-top, 146px); bottom: 0; z-index: 59;
    display: block; overflow-y: auto; background: var(--navy); padding: 12px var(--gutter) 40px;
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
  }
  .site-header.menu-open .main-nav { transform: none; visibility: visible; transition-delay: 0s; }
  .nav-list { display: block; }
  .nav-item { border-bottom: 1px solid rgba(255, 255, 255, .12); display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .nav-link { padding: 18px 0; font-size: 19px; font-weight: 600; }
  .nav-toggle { justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; }
  .nav-toggle .i-caret { width: 12px; height: 10px; }
  .nav-menu, .nav-item.is-wide .nav-menu { position: static; grid-column: 1 / -1; display: none; min-width: 0; padding: 0 0 12px; background: none; box-shadow: none; border: 0; opacity: 1; visibility: visible; transform: none; }
  .nav-item.has-menu:hover .nav-menu, .nav-item.has-menu:focus-within .nav-menu { display: none; }
  .nav-item.is-open .nav-menu, .nav-item.is-open:hover .nav-menu, .nav-item.is-open:focus-within .nav-menu { display: block; }
  .nav-menu a { color: rgba(255, 255, 255, .86); padding: 11px 0 11px 14px; font-size: 17px; } /* 45px rows */
  .nav-menu a:hover, .nav-menu a[aria-current] { background: none; color: var(--gold); }
  .nav-extra { display: grid; gap: 14px; margin-top: 28px; }
  .nav-extra .btn { width: 100%; }
  .nav-phone-mobile { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--white); font-weight: 700; font-size: 19px; text-decoration: none; padding: 10px; }
  .nav-phone-mobile .i-phone { color: var(--gold); width: 16px; height: 16px; }
  body.menu-locked { overflow: hidden; }
  /* No JS: the header scrolls away, the menu button goes, and the nav and its submenus stack under the logo. */
  html:not(.js) .site-header { position: relative; }
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); }
  html:not(.js) .brand { display: flex; align-items: center; min-height: var(--header-h); }
  html:not(.js) .menu-button, html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .main-nav { flex: 0 0 100%; display: block; padding: 0 0 24px; }
  html:not(.js) .nav-menu, html:not(.js) .nav-item.is-wide .nav-menu { display: block; }
}
@media (max-width: 400px) {
  .callbar a { font-size: 14px; }
  .brand img { width: 205px; }
}
@media (max-width: 360px) {
  .callbar a.callbar-cta { font-size: 13px; gap: 4px; }
  .callbar-cta .i-arrow { width: 16px; height: 11px; }
}

/* Footer (CSS Sheet footer, 1920): #0A0A3A, content x 307-1587. Row 1: crest, gold phone button and
   "AVAILABLE 24/7" | CONTACT US + "Free Case Evaluation". Row 2: 2x2 office cards 273x189 | the form, whose first
   field lines up with the top of the cards. Then a 2px rule and the link / copyright / disclaimer / social rows.
   Crest 158x151 at 1920, 136 wide at 1280, 240 on phones. */
.site-footer { background: var(--navy); color: var(--white); padding: 96px 0 145px; }
/* Figma sits the footer 13px left of center at 1920 (307-1587) and 10px right of it at 1280 (124-1176). */
.site-footer .container { max-width: 1402px; padding-left: 48px; padding-right: 74px; }

.footer-inner {
  display: grid;
  grid-template-columns: 567px minmax(0, 546px); /* the 2x2 cards need their full 567px */
  grid-template-areas: "brand head" "offices form";
  justify-content: space-between;
  column-gap: 56px;
}
.footer-brand { grid-area: brand; display: flex; align-items: center; margin-bottom: 25px; }
.footer-head { grid-area: head; align-self: end; margin-bottom: 18px; }
.footer-offices { grid-area: offices; display: grid; grid-template-columns: repeat(2, 273px); gap: 17px 22px; align-content: start; }
.footer-form { grid-area: form; }

.footer-crest { display: block; flex: none; }
.footer-crest img { width: 158px; height: auto; }
/* The phone button sits 20px below the crest's middle in the frame. */
.footer-call { display: flex; align-items: center; gap: 23px; margin: 40px 0 0 49px; }
/* Footer buttons are square-cornered in the frames (the header CTA is not). */
.btn-phone { min-height: 56px; padding: 0 23px 0 16px; gap: 3px; border-radius: 0; }
.btn-phone .i-phone { width: 22px; height: 22px; }
.footer-available { position: relative; top: 3px; font-weight: 700; font-size: 18px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }

/* Office cards: shared base (the Contact page restyles its own copy), then the footer look. */
.office { border: 1px solid #514329; }
.office-state { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 25px; line-height: 1.2; color: inherit; text-transform: uppercase; letter-spacing: 0; }
.office-state a { color: inherit; text-decoration: none; }
.office-state a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.office-line { display: flex; align-items: flex-start; gap: 3px; color: inherit; text-decoration: none; font-size: 17px; line-height: 24px; }
.office-line .i { width: 24px; height: 24px; flex: none; color: var(--gold); }
.office-line:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.office--footer { min-height: 189px; padding: 21px 18px 20px 17px; }
.office--footer .office-state { margin-bottom: 10px; }
.office--footer .office-line { font-weight: 300; }
.office--footer .office-line + .office-line { margin-top: 11px; }

.footer-head .eyebrow { font-size: 17px; letter-spacing: .12em; margin: 0 0 6px; }
.footer-head .lead-form-title { margin: 0; font-family: var(--serif); font-size: 35px; line-height: 1.2; color: var(--white); letter-spacing: 0; }

.footer-rule { height: 2px; margin-top: 42px; background: #2e2731; }

/* Bottom rows: links 18/500, copyright 18/300, disclaimer 12/300 (breaks after its first sentence at 1920),
   social icons at the right. The Contact page's slim footer is these rows alone on #000066. */
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-top: 43px; }
.footer-meta { padding-top: 8px; } /* link caps sit 9px below the icon tops */
.footer-meta p { margin: 0; }
.footer-links { font-weight: 500; font-size: 18px; line-height: 23px; }
.footer-links a, .footer-copy a { color: var(--white); text-decoration: none; }
.footer-links a:hover, .footer-copy a:hover { color: var(--gold); }
.footer-links .sep { margin: 0 .17em; }
.footer-copy { margin-top: 22px !important; font-weight: 300; font-size: 18px; line-height: 23px; }
.footer-disclaimer { margin-top: 20px !important; max-width: 890px; font-weight: 300; font-size: 12px; line-height: 15px; }
.footer-social { display: flex; gap: 22px; list-style: none; flex: none; }
.footer-social a { display: inline-flex; color: var(--white); }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--gold); }
.footer-social .i { width: 26px; height: 26px; }

.site-footer--slim { background: var(--blue); padding: 18px 0 64px; }

/* Between the 1920 and 1280 frames: the 1280 frame's 124px / 104px side margins. */
@media (max-width: 1599px) {
  .site-footer { padding: 109px 0 100px; }
  .site-footer .container { max-width: 1508px; padding-left: clamp(20px, 9.7vw, 124px); padding-right: clamp(20px, 8.1vw, 104px); }
  .site-footer--slim { padding: 18px 0 64px; }
}
/* 1280 frame: crest 136w, phone button with "AVAILABLE 24/7" stacked under it. */
@media (max-width: 1440px) {
  .footer-brand { align-items: flex-start; }
  .footer-crest img { width: 136px; margin-left: 9px; }
  .footer-call { flex-direction: column; align-items: flex-start; gap: 17px; margin: 17px 0 0 53px; }
  .footer-available { top: 0; }
  /* 1280 frame: the form spans 746-1169, stopping 7px short of the divider's right end. */
  .footer-inner { column-gap: 55px; }
  .footer-form { margin-right: 7px; }
  .footer-form .lf-grid { column-gap: 9px; }
}
/* Too narrow for cards and form side by side (no frame): stack them, and let the cards and the form
   run the full container so their right edges meet the divider's. */
@media (max-width: 1180px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "offices" "head" "form"; }
  .footer-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 56px; }
  .footer-form { margin-right: 0; }
}
/* 430 frame: everything centered down to the cards, then the form and bottom rows left-aligned on a 30px gutter. */
@media (max-width: 760px) {
  .site-footer { padding: 64px 0 70px; }
  .site-footer .container { padding-left: 30px; padding-right: 30px; }
  .footer-brand { flex-direction: column; align-items: center; margin-bottom: 33px; }
  .footer-crest img { width: 240px; margin: 0; }
  .footer-call { align-items: center; gap: 20px; margin: 56px 0 0; }
  .footer-offices { grid-template-columns: minmax(0, 273px); justify-content: center; gap: 20px; margin-bottom: 56px; }
  .footer-head, .footer-form { padding-left: 10px; }
  .footer-form .lf-grid { column-gap: 7px; }
  .footer-head .eyebrow { margin-left: -4px; }
  .footer-rule { margin-top: 59px; }
  .site-footer .footer-bottom { flex-direction: column; gap: 31px; padding-top: 30px; }
  .footer-links .sep { margin: 0 .1em; }
  /* The 430 frame breaks these after "Practice Areas |" and "Denham Law |". */
  .footer-links { max-width: 300px; }
  .footer-copy { max-width: 320px; }
  .footer-copy { margin-top: 13px !important; }
  .footer-disclaimer { margin-top: 15px !important; }
  .footer-social { gap: 18px; }
  .footer-social .i { width: 24px; height: 24px; }
  .site-footer--slim { padding: 40px 0 56px; }
}
/* Touch screens: grow the small text links and icons to 44px hit areas without moving anything
   (vertical padding on inline links, and padding cancelled by negative margins, leave the layout alone). */
@media (pointer: coarse), (max-width: 760px) {
  .footer-links a, .footer-copy a { padding: 11px 0; }
  .office--footer .office-line { padding: 10px 0; margin: -10px 0; }
  .office--footer .office-line + .office-line { margin-top: 1px; } /* collapses with the -10px above: same 11px gap */
  .footer-social a { padding: 10px; margin: -10px; }
}

/* Cookie notice (tracking.mjs markup, site.js behavior): a small navy card at the bottom left, full width and
   about 120px tall on phones, so it never reaches the pinned call bar at the top. While it shows, the page gets the
   same room at the bottom, so the last Submit button can scroll clear of it and focus never lands under it. */
.cookie-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 58; max-width: 420px;
  padding: 16px 18px; background: var(--navy); color: var(--white); border: 1px solid var(--gold);
  box-shadow: 0 12px 32px rgba(0, 0, 30, .35); font-family: var(--sans); font-size: 14px; line-height: 1.45;
}
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; }
.cookie-note-text a { color: var(--gold); text-underline-offset: 2px; }
.cookie-note-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px !important; }
.cookie-note .cookie-accept { min-height: 44px; padding: 0 22px; border-radius: 0; font-size: 15px; }
.cookie-decline { min-height: 44px; padding: 0 14px; background: none; border: 0; color: var(--white); font: 600 15px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-decline:hover, .cookie-decline:focus-visible { color: var(--gold); }
html.has-cookie-note body { padding-bottom: var(--cookie-h, 0px); }
html.has-cookie-note { scroll-padding-bottom: var(--cookie-h, 0px); }
@media (max-width: 600px) {
  .cookie-note { left: 0; right: 0; bottom: 0; max-width: none; padding: 10px 16px; border-width: 1px 0 0; font-size: 13px; line-height: 1.4; }
  .cookie-note-actions { margin-top: 6px !important; }
}

/* Lead forms. Footer (1920): Full Name 546x47; Email 281 + Phone 254 on one row (gap 11); textarea 122 tall;
   1px #BFBFBF borders, square corners, 14px #767676 placeholders 21px in; square gold Submit 173x56, 25px below.
   Two small checkboxes sit between the fields and Submit, as on the GoHighLevel form: the privacy policy (required)
   and the text-message opt-in (optional, unchecked).
   Sidebar box (#0A0A3A): stacked fields. Contact box: centered title, stacked fields (contact.css sizes them). */
.lead-form { margin: 0; }
.lf-grid { display: grid; grid-template-columns: minmax(0, 281fr) minmax(0, 254fr); gap: 11px 12px; }
.lf-name, .lf-message { grid-column: 1 / -1; }
.lf-field input, .lf-field textarea {
  display: block; width: 100%; border: 1px solid #bfbfbf; border-radius: 0; background: var(--white);
  padding: 11px 20px; font: 400 14px/1.6 var(--sans); color: var(--ink); min-height: 46px;
  -webkit-appearance: none; appearance: none;
}
.lf-name input { min-height: 47px; }
.lf-field textarea { height: 122px; min-height: 122px; padding-top: 14px; resize: vertical; }
.lf-field input::placeholder, .lf-field textarea::placeholder { color: #767676; opacity: 1; }
.lf-field input:focus, .lf-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.lf-field.has-error input, .lf-field.has-error textarea { border-color: #d64545; box-shadow: inset 0 0 0 1px #d64545; }

/* Consent: a 15px box and 11.5px text, so it reads as fine print under the fields. */
.lf-consent { display: flex; gap: 9px; align-items: flex-start; margin: 13px 0 0; font-size: 11.5px; line-height: 1.5; color: inherit; opacity: .88; cursor: pointer; }
.lf-consent input { flex: none; width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--gold); cursor: pointer; }
.lf-consent a { color: inherit; text-underline-offset: 2px; }
.lf-consent a:hover { color: var(--gold); }
.lf-consent + .lf-consent { margin-top: 9px; }
.lf-sms a { white-space: nowrap; } /* keep the policy URL on one line */
.lf-consent.has-error { color: #ff9b9b; opacity: 1; }
.lf-consent.has-error input { outline: 2px solid #ff9b9b; outline-offset: 1px; }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-submit { margin-top: 25px; width: 173px; justify-content: center; gap: 16px; border-radius: 0; }
/* Stays in the layout (live region) but takes no space until it has a message. */
.lf-status { margin: 0; font-size: 15px; font-weight: 600; }
.lf-status:not(:empty) { margin-top: 12px; }
.lf-status.is-ok { color: var(--gold); }
.lf-status.is-error { color: #ff9b9b; }
.lead-form.is-sending .lf-submit { opacity: .7; pointer-events: none; }
/* After a successful send only the thank-you note stays (with the title, where there is one). */
.lead-form.is-done .lf-grid, .lead-form.is-done .lf-consent, .lead-form.is-done .lf-submit { display: none; }
.lead-form.is-done .lf-status { margin-top: 0; font-size: 17px; line-height: 1.5; outline: none; }
.lf-status a { color: inherit; text-underline-offset: 3px; white-space: nowrap; }

/* Sidebar box (PracticeArea frame): 46px fields with #DFDFDF borders, 122px textarea, 134x56 Submit.
   components.css still repeats these under .sidebar-form; these are the same values, so either copy can go. */
.lead-form--sidebar .lf-grid { grid-template-columns: 1fr; gap: 11px; }
.lead-form--sidebar .lf-field input { min-height: 46px; padding: 10px 17px; border-color: #dfdfdf; font-size: 15px; }
.lead-form--sidebar .lf-field textarea { height: 122px; min-height: 122px; padding: 12px 17px; border-color: #dfdfdf; font-size: 15px; }
.lead-form--sidebar .lf-submit { margin-top: 16px; width: 134px; min-height: 56px; padding: 0 18px 0 19px; font-size: 15px; font-weight: 700; gap: 16px; }
.lead-form--sidebar .lf-consent { margin-top: 14px; color: var(--white); font-size: 11.5px; line-height: 1.45; opacity: .85; }

.lead-form--contact .lead-form-title { text-align: center; color: var(--white); font-size: 35px; margin: 0 0 30px; }
.lead-form--contact .lf-grid { grid-template-columns: 1fr; gap: 12px; }
.lead-form--contact .lf-field input { min-height: 52px; }
.lead-form--contact .lf-field textarea { min-height: 156px; }
.lead-form--contact .lf-consent { color: var(--white); }
.lead-form--contact .lf-submit { display: flex; margin: 24px auto 0; min-height: 48px; width: 150px; }

@media (max-width: 760px) {
  /* 16px keeps iOS from zooming; the shorter line keeps the frame's 46px field height. The selector is heavy on
     purpose so no placement's own (smaller) field size can win on phones. */
  .lf-field input, .lf-field textarea, form.lead-form .lf-grid .lf-field input, form.lead-form .lf-grid .lf-field textarea { font-size: 16px; line-height: 22px; }
  .lf-field input::placeholder, .lf-field textarea::placeholder { font-size: 14px; }
  .lf-consent { font-size: 12px; }
  .lf-consent + .lf-consent { margin-top: 12px; }
  .lf-consent input { width: 20px; height: 20px; margin-top: 0; } /* bigger tap target on phones */
  .lf-consent a { padding: 15px 0; }
}

/* Shared blocks: interior title hero, stats bar, breadcrumbs, sidebar, accordions, CTA banner, pager. */

/* Title hero. CSS Sheet: 454px tall at 1920 incl. the 125px header; PracticeArea: 492px. The city photo is drawn
   at 120% of the viewport width, skyline just under the title, under a navy tint. Fitting the frame pixels against the photo gives roughly photo x (42,34,66)/255 plus a faint
   blue lift, so the tint is a multiply layer plus a 10% wash; that keeps the darks dark instead of hazing them. */
.page-hero { position: relative; display: flex; align-items: center; min-height: clamp(300px, 23.65vw, 454px); padding: var(--header-h) 0 24px; background: var(--navy); color: var(--white); overflow: hidden; isolation: isolate; }
.page-hero--practice { min-height: clamp(320px, 25.63vw, 492px); padding-bottom: 54px; }
.page-hero-bg { position: absolute; left: 50%; top: -28.9vw; width: 120%; max-width: none; height: auto; transform: translateX(-50%); z-index: -2; }
.page-hero::before, .page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero::before { background: rgb(42, 34, 66); mix-blend-mode: multiply; }
.page-hero::after { background: rgba(86, 100, 205, .1); }
.page-hero-inner { text-align: center; }
.page-title { margin: 0 auto; max-width: 1200px; color: var(--white); font-size: var(--fs-h1); line-height: 1.2; letter-spacing: 0; text-wrap: balance; }
.page-hero-sub { margin: 14px 0 0; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* Practice-area stats bar under the hero: 78px navy band, Jakarta 17px caps, gold figures, pipes between. */
.stats-bar { background: var(--navy); color: var(--white); }
.stats-bar ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 15px; min-height: 78px; list-style: none; padding: 12px 0; font-weight: 700; font-size: 17px; line-height: 1.3; text-transform: uppercase; }
.stats-bar strong { color: var(--gold); font-weight: 600; text-transform: none; } /* keeps the s in 1000’s lowercase */

/* Inline flow so a long current title wraps word by word and a separator never starts a line on its own. */
.breadcrumbs ol { list-style: none; margin: -3px 0 40px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before { content: '>'; margin: 0 3px 0 2px; font-weight: 400; }
.breadcrumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: #cfcfcf; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.breadcrumbs a:hover { color: var(--gold-dark); text-decoration-color: currentColor; }
.breadcrumbs [aria-current] { font-weight: 700; }

/* Sidebar (CSS Sheet / PracticeArea): navy box 350 wide, Gloock 35 title, 46px fields 274 wide, 134x56 Submit;
   then the PRACTICE AREAS list (Jakarta Bold 25 navy title, 17px bold rows 61px apart, 2px #DFDFDF rules). */
.sidebar { display: grid; gap: 53px; align-content: start; }
.sidebar-form { background: var(--navy); color: var(--white); padding: 32px 43px 47px 33px; }
.sidebar-form-title { font-family: var(--serif); color: var(--white); font-size: 35px; line-height: 1.2; letter-spacing: 0; margin: 0 0 22px; }
.sidebar-form .lead-form--sidebar .lf-status:empty { display: none; }
.sidebar-list-title { font-family: var(--sans); font-weight: 700; font-size: 25px; line-height: 1.2; letter-spacing: 0; color: var(--navy); text-transform: uppercase; margin: 0 0 27px; }
.sidebar-list ul { list-style: none; }
.sidebar-list li { border-bottom: 2px solid #dfdfdf; }
.sidebar-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 59px; padding: 10px 6px 10px 0; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px; line-height: 1.25; }
.sidebar-list a .i-chevron { width: 12px; height: 18px; color: var(--blue); transition: transform .18s ease; }
.sidebar-list a:hover, .sidebar-list .is-current a { color: var(--gold-dark); }
.sidebar-list a:hover .i-chevron { transform: translateX(3px); }

/* Accordions (FAQs converted from the old theme, bio sections): AttorneyBio frame, uppercase navy question,
   42px gold circle with a navy plus; an open item drops its rule so the answer reads as part of it. */
.acc-group { margin: 34px 0 40px; }
.acc { border-bottom: 1px solid #ccc; }
.acc[open] { border-bottom-color: transparent; }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc-q { font-family: var(--sans); font-weight: 700; font-size: clamp(18px, .6vw + 12.5px, 24px); line-height: 1.25; letter-spacing: -.01em; color: var(--navy); text-transform: uppercase; }
.acc summary:hover .acc-q { color: var(--blue); }
.acc-icon { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--gold); transition: background-color .18s ease; }
.acc summary:hover .acc-icon { background: #ffd83a; }
.acc-icon::before, .acc-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--navy); transform: translate(-50%, -50%); transition: transform .2s ease; }
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-icon .i { display: none; }
.acc-a { padding: 0 0 26px; }
.acc-a > :last-child { margin-bottom: 0; }

/* "Schedule a Free Consultation" banner inside practice content (PracticeArea: 284px navy band, logo 225 wide,
   Gloock 35 title, gold button; the team cut-out stands on the right, fading into the navy on its left edge,
   and shrinks with a narrower banner so it stays clear of the title). */
.cta-banner { position: relative; display: flex; align-items: center; min-height: 284px; margin: 31px 0 32px; background: var(--navy); color: var(--white); overflow: hidden; isolation: isolate; container-type: inline-size; }
.cta-banner-copy { position: relative; z-index: 1; padding: 31px 24px 43px 64px; }
.cta-banner-logo { width: 225px; height: auto; margin: 0 0 17px; }
.cta-banner .cta-banner-title { font-family: var(--serif); font-size: 35px; line-height: 1.17; margin: 0 0 16px; max-width: 290px; }
/* Photo width --w: 854px on the 880 banner, shrinking with the room left beside the copy (~380px); the group's right
   edge stays 7px inside the banner and the photo stands on the bottom edge (offsets are fractions of --w). */
.cta-banner .cta-banner-photo { --w: min(854px, (100cqw - 380px) * 1.71); position: absolute; z-index: 0; right: calc(var(--w) * -.21 + 7px); bottom: calc(var(--w) * -.149); width: var(--w); max-width: none; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 30%); mask-image: linear-gradient(90deg, transparent 6%, #000 30%); }

.pager { display: flex; justify-content: space-between; align-items: center; margin: 48px 0 0; font-weight: 700; }
.pager a { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); text-decoration: none; }
.pager a:hover { color: var(--gold-dark); }
.pager-count { color: var(--muted); font-weight: 600; }

/* Below the desktop header breakpoint the header is in the flow, so the hero no longer reserves room for it
   and the photo simply covers the band. */
@media (max-width: 1100px) {
  .page-hero, .page-hero--practice { min-height: clamp(200px, 30vw, 300px); padding: 48px 0 52px; }
  .page-hero-bg { left: 0; top: 0; width: 100%; height: 100%; transform: none; object-fit: cover; object-position: 50% 46%; }
}
/* Tablet: the sidebar drops under the content, so set the form and the list side by side instead of one
   narrow column with empty space beside it. */
@media (min-width: 761px) and (max-width: 1100px) {
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
}
/* Narrow stats: three columns, figure over label, thin rules between (home-430 stats pattern). */
@media (max-width: 900px) {
  .stats-bar ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 16px 0; font-size: 12px; line-height: 1.3; letter-spacing: .06em; text-align: center; }
  .stats-bar li { padding: 0 8px; }
  .stats-bar .sep { display: none; }
  .stats-bar li + li { border-left: 1px solid rgba(246, 199, 0, .5); }
  .stats-bar strong { display: block; font-size: 22px; line-height: 1.2; letter-spacing: 0; margin-bottom: 2px; }
}
@media (max-width: 760px) {
  .page-hero, .page-hero--practice { min-height: 210px; padding: 40px 0 44px; }
  .page-title { font-size: clamp(34px, 7vw + 8px, 42px); }
  .breadcrumbs ol { margin-bottom: 26px; font-size: 14px; }
  /* 44px tap height without moving the line. */
  .breadcrumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .cta-banner { display: block; min-height: 0; }
  .cta-banner-copy { padding: 30px 24px 0; }
  .cta-banner-logo { width: 190px; margin-bottom: 16px; }
  .cta-banner .cta-banner-title { font-size: 31px; }
  .cta-banner .cta-banner-photo { position: relative; right: auto; bottom: auto; display: block; width: 140%; margin: -24% 0 -14% -17%; -webkit-mask-image: none; mask-image: none; }
  .sidebar { gap: 44px; }
  .sidebar-form { padding: 30px 24px 36px; }
  .sidebar-form .lead-form--sidebar .lf-submit { width: 100%; justify-content: center; }
  .acc summary { padding: 20px 0; gap: 16px; }
  .acc-icon { width: 36px; height: 36px; }
}

/* Review cards, the reviews band and horizontal carousels (homepage, contact page, practice pages). */
/* Review cards (testimonial band): #F7F7F7 card, navy stars, 5-line clamp, Read More, then the name (no platform badge: the testimonials have no confirmed source). */
.stars { display: inline-flex; gap: 6px; color: var(--blue); }
.stars .i-star { width: 24px; height: 24px; }
.stars .off { color: var(--neutral); }
.review-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--blue); padding: 40px 38px 40px; min-height: 390px; }
.review-card .stars { margin-bottom: 22px; }
.review-text { margin: 0 0 18px; font-size: 17px; line-height: 1.73; }
.review-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review-more { align-self: flex-start; color: var(--ink); font-weight: 600; font-size: 17px; text-decoration: none; border-bottom: 3px solid var(--blue); padding-bottom: 2px; margin-bottom: 26px; }
.review-more:hover { color: var(--gold-dark); border-color: var(--gold-dark); }
/* Phones: a 44px tall hit area around the link; the 3px rule under the text stays where it is. */
@media (max-width: 760px) {
  .review-more { position: relative; }
  .review-more::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
}
/* The row keeps the height the old badge gave it, so the name sits where it did. */
.review-name { display: flex; align-items: center; gap: 12px; min-height: 34px; margin: auto 0 0; font-weight: 700; color: var(--blue); }

/* Horizontal carousels (scroll-snap; site.js wires arrows and the progress bar). */
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w, 446px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-controls { display: flex; align-items: center; gap: 30px; }
.carousel-progress { flex: 1; max-width: 450px; height: 4px; background: var(--neutral); position: relative; }
.carousel-progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--blue); transition: left .2s ease, width .2s ease; }
.carousel-arrows { display: flex; gap: 14px; margin-left: auto; }
.carousel-arrows button, .carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; color: var(--blue); }
.carousel-arrows button:disabled, .carousel-arrow:disabled { opacity: .35; cursor: default; }
.carousel-arrows .i-arrow, .carousel-arrow .i-arrow { width: 24px; height: 16px; }

/* Reviews band (homepage and contact page): #E3E3E3, centered heading, then a row of 447px cards where the
   middle two (one on phones) are "live" and the cards peeking at both edges are faded.
   The track starts left of the viewport (negative margin) so a faded card shows on the left at load:
   --n live cards are centered, with one card plus a gap to their left. */
.reviews-band { --card-w: 447px; --gap: 28px; --n: 2; --zone: calc(var(--n) * var(--card-w) + (var(--n) - 1) * var(--gap));
  background: var(--gray); padding: 77px 0 148px; overflow: hidden; }
.reviews-band-head { text-align: center; margin-bottom: 46px; }
.reviews-band-head .eyebrow { margin-bottom: 7px; }
.reviews-band-title { margin: 0; color: var(--blue); line-height: 60px; }
.reviews-band .carousel-track { gap: var(--gap); grid-auto-columns: var(--card-w); margin-left: calc(50% - var(--zone) / 2 - var(--gap) - var(--card-w) + 2px); }
.reviews-band .review-card { min-height: 390px; padding: 40px 38px 36px; border-color: rgba(0, 0, 102, .6); background: #f8f8f8; }
.reviews-band .stars { gap: 7.5px; margin-bottom: 18px; }
.reviews-band .stars .i-star { width: 30px; height: 30px; }
.reviews-band .review-text { line-height: 29px; margin-bottom: 17px; }
.reviews-band .review-more { padding-bottom: 0; margin-bottom: 25px; }
.reviews-band .review-name { gap: 14px; min-height: 37px; }
.reviews-band .carousel-controls { margin-top: 24px; max-width: calc(836px + 2 * var(--gutter)); gap: 30px; padding-left: calc(var(--gutter) + 3px); }
.reviews-band .carousel-progress { max-width: 451px; background: #beb8b8; }
.reviews-band .carousel-arrows { gap: 0; margin-right: -13px; }
.reviews-band .carousel-arrows button { width: 44px; height: 44px; }
.reviews-band .carousel-arrows .i-arrow { width: 24px; height: 20px; }

/* Faded edge cards: a view timeline on each card, inset to the live zone, so cards outside it fade to the
   Figma's #E9E9E9 card with ~15% content. Browsers without scroll timelines show every card live. */
@supports (animation-timeline: view()) {
  .reviews-band .review-card { view-timeline: --review inline; view-timeline-inset: calc(var(--card-w) + var(--gap)) calc(100% - var(--card-w) - var(--gap) - var(--zone));
    animation: review-card-live linear both; animation-timeline: --review; }
  .reviews-band .review-card > * { animation: review-content-live linear both; animation-timeline: --review; }
}
/* Progress over the live zone: 0% entering at its right edge, 100% leaving at its left; a card fully inside
   is at (card / (zone + card)) .. (zone / (zone + card)), about 33-67% for two cards. */
@keyframes review-card-live {
  0%, 100% { background: rgba(247, 247, 247, .3); border-color: transparent; }
  26%, 74% { background: #f8f8f8; border-color: rgba(0, 0, 102, .6); }
}
@keyframes review-content-live {
  0%, 100% { filter: grayscale(1) opacity(.15); }
  26%, 74% { filter: none; }
}
@keyframes review-card-live-one {
  0%, 100% { background: rgba(247, 247, 247, .3); border-color: transparent; }
  42%, 58% { background: #f8f8f8; border-color: rgba(0, 0, 102, .6); }
}
@keyframes review-content-live-one {
  0%, 100% { filter: grayscale(1) opacity(.15); }
  42%, 58% { filter: none; }
}

@media (max-width: 1000px) {
  .reviews-band { --n: 1; }
  @supports (animation-timeline: view()) {
    .reviews-band .review-card { animation-name: review-card-live-one; }
    .reviews-band .review-card > * { animation-name: review-content-live-one; }
  }
}
@media (max-width: 760px) {
  .reviews-band { --card-w: min(331px, calc(100vw - 99px)); --gap: 29px; padding: 78px 0 76px; }
  .reviews-band-head { margin-bottom: 69px; padding: 0 16px; }
  .reviews-band .carousel-track { margin-left: calc(50% - var(--zone) / 2 - var(--gap) - var(--card-w) - 1px); }
  .reviews-band-head .eyebrow { font-size: 17px; text-wrap: balance; } /* no lone NOW when it wraps */
  .reviews-band .reviews-band-title { font-size: clamp(32px, 9.3vw, 40px); line-height: 48px; } /* beats the homepage h2 size */
  .reviews-band .review-card { min-height: 390px; padding: 40px 28px 39px; }
  /* phone frame: 26px stars on a 28px pitch (the star path fills 20/24 of its box) */
  .reviews-band .stars { gap: 0; margin: 0 0 17px -2px; }
  .reviews-band .stars > * { margin-right: -3px; }
  .reviews-band .stars .i-star { width: 31px; height: 31px; }
  .reviews-band .review-more { margin-bottom: 20px; }
  .reviews-band .review-text { line-height: 29px; }
  .review-card { padding: 28px 24px; min-height: 0; }
  .carousel-controls { flex-wrap: wrap; gap: 18px; }
  .carousel-progress { order: 3; flex-basis: 100%; }
  .reviews-band .carousel-controls { margin-top: 37px; padding: 0 49px 0 43px; gap: 39px 12px; flex-wrap: wrap; }
  .reviews-band .carousel-progress { order: -1; max-width: none; margin-left: 3px; }
  .reviews-band .carousel-arrows { margin-right: -8px; gap: 6px; }
}
@media (max-width: 400px) {
  .reviews-band .carousel-controls { padding: 0 var(--gutter); }
  .reviews-band .carousel-controls .btn { flex: none; }
}

/* Google reviews (10/21): a small "G" and the office under the reviewer's name. */
.review-name { flex-wrap: wrap; row-gap: 2px; }
.review-via { display: inline-flex; align-items: center; gap: 6px; flex-basis: 100%; font-weight: 500; font-size: 14px; line-height: 18px; color: var(--muted); letter-spacing: 0; text-transform: none; }
.review-via .i-google { width: 15px; height: 15px; flex: none; }

/* WordPress content inside .entry-content, styled per the CSS Sheet typography specimen and the PracticeArea
   frame: body 17/29, one blank line (29px) between blocks, headings sit a blank line under the text above. */
.entry-content { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: break-word; }
.entry-content > :first-child { margin-top: 0; }
.entry-content p { margin: 0 0 1.7em; }
.entry-content h2 { margin: 1.7rem 0 22px; }
.entry-content h3 { margin: 1.7rem 0 14px; }
.entry-content h4 { margin: 1.7rem 0 17px; }
.entry-content h5, .entry-content h6 { margin: 1.7rem 0 12px; }
.entry-content p + :is(h2, h3, h4, h5, h6), .entry-content ul + :is(h2, h3, h4, h5, h6), .entry-content ol + :is(h2, h3, h4, h5, h6) { margin-top: 0; }
.entry-content :is(h2, h3, h4, h5, h6) a { color: inherit; text-decoration: none; font-weight: inherit; }
.entry-content a { color: var(--gold-dark); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease; }
.entry-content a:hover { color: var(--blue); }
.entry-content a[href^="tel:"] { text-decoration: none; }
.entry-content strong, .entry-content b { font-weight: 700; }

/* Buttons converted from the old theme (CSS Sheet "View All Testimonials": 53px, Jakarta Bold 15, 3px corners). */
.entry-content a.btn { min-height: 53px; padding: 0 22px; gap: 11px; border-radius: 3px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: normal; text-align: center; }
.entry-content a.btn .i-arrow { width: 14px; height: 11px; }
.entry-content a.btn-navy, .entry-content a.btn-navy:hover { color: var(--white); }
.entry-content a.btn-gold { color: var(--navy); }
/* The CTA banner inside content keeps the full-size gold button. */
.entry-content .cta-banner a.btn { min-height: 56px; padding: 0 18px 0 20px; gap: 14px; font-size: 17px; white-space: nowrap; }
.entry-content .cta-banner a.btn .i-arrow { width: 21px; height: 14px; }
.entry-content .btn-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 1.7em; }

/* Lists: gold chevrons (unordered) and plain figures (ordered), 29px rows, no extra space between items. */
.entry-content ul, .entry-content ol { margin: 0 0 1.7em; padding: 0; list-style: none; }
.entry-content li { position: relative; margin: 0; }
.entry-content ul > li { padding-left: 20px; }
.entry-content ul > li::before { content: ''; position: absolute; left: -1px; top: calc(.85em - 6.5px); width: 12px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 17'%3E%3Cpath d='M2.2 1.6 9.4 8.5 2.2 15.4' fill='none' stroke='%238a6a0e' stroke-width='3.6'/%3E%3C/svg%3E") no-repeat center / contain; }
.entry-content ol { counter-reset: ol; }
.entry-content ol > li { padding-left: 24px; counter-increment: ol; }
.entry-content ol > li::before { content: counter(ol) '.'; position: absolute; left: 3px; top: 0; }
.entry-content li > ul, .entry-content li > ol { margin: .2em 0 .4em; }
.entry-content li > p { margin: 0; }

/* Block quote, CSS Sheet - Page 2 "Option 1: boxed, no photo": #E3E3E3 box, gold double mark hanging over the top. */
.entry-content blockquote { position: relative; margin: 64px 0 1.7em; padding: 104px 51px 46px; background: var(--gray); }
.entry-content blockquote::before { content: ''; position: absolute; left: 61px; top: -31px; width: 122px; height: 95px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122 95'%3E%3Cpath fill='%23F6C700' d='M0 0h49v46c0 27-14 44-41 49l-4-15c13-4 20-12 21-22H0zM73 0h49v46c0 27-14 44-41 49l-4-15c13-4 20-12 21-22H73z'/%3E%3C/svg%3E") no-repeat; }
.entry-content blockquote p { margin: 0 0 12px; }
.entry-content blockquote p:empty { display: none; }
.entry-content blockquote:not(:has(> :not(:empty))) { display: none; } /* an emptied WordPress quote block */
.entry-content blockquote cite { display: block; font-style: normal; font-weight: 800; font-size: var(--fs-h5); line-height: 21px; letter-spacing: .1em; text-transform: uppercase; }
.entry-content blockquote cite::before { content: '- '; }

/* Images: floated WordPress figures keep a text gutter; nothing grows past the column. */
.entry-content figure { margin: 0 0 1.7em; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content .alignright, .entry-content figure.alignright { float: right; clear: right; margin: .35em 0 1em 32px; max-width: 45%; }
.entry-content .alignleft, .entry-content figure.alignleft { float: left; clear: left; margin: .35em 32px 1em 0; max-width: 45%; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.entry-content .aligncenter img { margin: 0 auto; }
.entry-content .wp-block-image { margin: 0 0 1.7em; }
.entry-content .wp-block-image::after { content: ''; display: table; clear: both; }
.entry-content .wp-block-image:has(> .alignright, > .alignleft) { margin: 0; }
.entry-content .wp-block-image:has(> .alignright, > .alignleft)::after { content: none; }
.entry-content figcaption { font-size: 14px; line-height: 1.5; color: #555; margin-top: 8px; }
.entry-content iframe { display: block; max-width: 100%; border: 0; }
.entry-content .wp-block-embed iframe, .entry-content iframe[src*="youtube"], .entry-content iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Image galleries (Tornado Gallery): three-up grid of cropped photos instead of a single tall column. */
.entry-content .wp-block-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 1.7em; clear: both; }
.entry-content .wp-block-gallery > figure { margin: 0; }
.entry-content .wp-block-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .18s ease; }
.entry-content .wp-block-gallery a:hover img { opacity: .85; }

/* Tables: navy header row (thead, or the bold first row WordPress tables use), light rules, scroll on phones. */
.entry-content .table-wrap, .entry-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.7em; clear: both; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.7em; font-size: 16px; line-height: 1.5; }
.entry-content .table-wrap table, .entry-content .wp-block-table table { margin: 0; }
.entry-content th, .entry-content td { padding: 14px 18px; border: 1px solid #dcdce6; text-align: left; vertical-align: top; }
.entry-content thead th, .entry-content thead td, .entry-content table:not(:has(thead)) tr:first-child td { background: var(--blue); border-color: var(--blue); color: var(--white); font-weight: 700; }
.entry-content tbody tr:nth-child(even) td { background: #f7f7f7; }
.entry-content table:not(:has(thead)) tr:first-child td strong { color: inherit; }
.entry-content figure.wp-block-table figcaption { padding: 0 2px; }

/* Video blocks rebuilt from the old theme (partials.mjs videoBlock): the player takes the video's own shape (the 2025 hail
   ads are vertical 1080x1920, the attorney videos 16:9), capped to the screen height, on the navy secondary background. */
.entry-content .post-video { margin: 0 0 1.7em; clear: both; background: var(--navy); }
.entry-content .post-video video { display: block; width: 100%; height: auto; max-height: min(78vh, 760px); background: var(--navy); object-fit: contain; }

/* Bold-only paragraphs used as section headings (partials.mjs leadIns): the H3 look (same size and spacing, so they never read
   smaller than a real H3 nested under them). */
.entry-content p.p-head { margin: 0 0 14px; font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2; color: var(--blue); text-wrap: balance; }
.entry-content p.p-head strong { font-weight: 400; }

/* Signing portals (/e-sign/, /e-signfl/): the DocuSign link is the page's one job, so it gets the full-size button
   and clear space before the testimonials that follow it. */
.entry-content .btn-row:has(> a[href*="docusign."]) { margin: 34px 0 64px; }
.entry-content a.btn[href*="docusign."] { min-height: 60px; padding: 0 30px; gap: 14px; font-size: 17px; }
.entry-content a.btn[href*="docusign."] .i-arrow { width: 21px; height: 14px; }

/* HTML sitemap (/sitemap/): two columns of quiet links instead of one long gold column. */
.entry-content .rio-sitemap-list { columns: 2 300px; column-gap: 40px; }
.entry-content .rio-sitemap-list li { break-inside: avoid; padding-top: 3px; padding-bottom: 3px; }
.entry-content .rio-sitemap-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.entry-content .rio-sitemap-list a:hover { color: var(--gold-dark); text-decoration: underline; }
/* Thank You page: the confirmation and the phone button, no second form. */
.page-body--thanks .entry-content .btn-row { margin-top: 8px; }
.page-body--thanks .entry-content a.btn-phone { min-height: 53px; gap: 8px; padding: 0 22px 0 16px; border-radius: 3px; font-size: 16px; }

.entry-content hr { border: 0; border-top: 1px solid #dcdce6; margin: 2.2em 0; clear: both; }
.entry-content::after { content: ''; display: table; clear: both; }

/* Rankings-theme wrappers that sometimes survive in page content: flatten the grid scaffolding. */
.entry-content .layout-block .container, .entry-content .layout-block .row, .entry-content .layout-block .col { max-width: none; padding: 0; margin: 0; }
.entry-content .layout-block { margin: 0 0 1.7em; }
.entry-content .layout-block .split-inner > :last-child, .entry-content .loc-single > :last-child { margin-bottom: 0; }
/* Split blocks (Disasters): photo beside its text, as the old theme's 4/8 columns laid them out. */
.entry-content .split-block .row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
.entry-content .split-block .sc-left p { margin: 0; }
.entry-content .split-block img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.entry-content .split-block h2 { margin-top: -.12em; font-size: var(--fs-h3); } /* H3 size: a 50px title stacked five lines deep beside a 300px photo */
.entry-content .split-block + .split-block { margin-top: 40px; }
.entry-content .split-block .btn-row, .entry-content .split-block p:has(> a.btn) { display: flex; flex-wrap: wrap; gap: 12px 18px; }
/* Office block on state pages: address card beside the map. */
.entry-content .location-block .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #f8f8f8; }
.entry-content .loc-block-info { padding: 32px 34px; }
.entry-content .loc-block-info h5 { margin: 0 0 14px; }
.entry-content .loc-info { margin: 0 0 10px; }
.entry-content .loc-block-map iframe { width: 100%; height: 100%; min-height: 300px; }
/* Review carousels from the old theme, rebuilt as the CSS Sheet testimonial list (styles in blog.css). */
.entry-content .content-reviews { margin: 0 0 1.7em; clear: both; }
.entry-content .content-reviews h2 { margin-top: 0; }
.entry-content .content-reviews .eyebrow { margin-bottom: 10px; }

@media (max-width: 760px) {
  .entry-content h2 { margin-bottom: 18px; }
  .entry-content .alignright, .entry-content figure.alignright, .entry-content .alignleft, .entry-content figure.alignleft { float: none; margin: 0 0 1.7em; max-width: 100%; }
  .entry-content .wp-block-image:has(> .alignright, > .alignleft) { margin: 0; }
  .entry-content .wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .entry-content .split-block .row, .entry-content .location-block .row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .entry-content .location-block .row { gap: 0; }
  .entry-content .loc-block-info { padding: 26px 24px; }
  .entry-content .loc-block-map iframe { height: 300px; }
  .entry-content .loc-info a { display: inline-block; padding: 9px 0; } /* tap height */
  .entry-content table { font-size: 15px; }
  .entry-content th, .entry-content td { padding: 10px 12px; }
  /* Narrow tables still need room for two readable columns; the wrapper scrolls sideways instead. */
  .entry-content .table-wrap table, .entry-content .wp-block-table table { min-width: 520px; }
  .entry-content > table { display: block; overflow-x: auto; }
  .entry-content blockquote { margin-top: 48px; padding: 76px 24px 32px; }
  .entry-content a.btn[href*="docusign."] { width: 100%; }
  .entry-content .btn-row:has(> a[href*="docusign."]) { margin-bottom: 48px; }
  .entry-content blockquote::before { left: 24px; top: -24px; width: 92px; height: 72px; background-size: contain; }
}

/* Interior layout (CSS Sheet - Page 1 / PracticeArea): content column 880 (x 300-1180) + sidebar 350 (x 1270-1620) at 1920. */
.page-body { display: grid; grid-template-columns: minmax(0, 880px) minmax(0, 350px); justify-content: space-between; gap: 64px; padding-top: 61px; padding-bottom: 98px; }
.page-body--narrow { grid-template-columns: minmax(0, 880px); justify-content: center; }
.content-col { min-width: 0; }
/* CSS Sheet - Page 1 sits 2px lower than the practice frame under its hero, with the form box 10px lower still. */
.page-interior .page-hero + .page-body { padding-top: 63px; }
.page-interior .page-hero + .page-body > .sidebar { margin-top: 8px; }

/* Recent Testimonials under practice content: two 447px cards (29px apart) that run 46px past the text column. */
.recent-reviews { margin-top: 0; clear: both; }
.recent-reviews h2 { margin: 0 0 35px; }
.recent-reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 447px)); gap: 28px; margin-left: 5px; width: calc(100% + 42px); }
/* Card internals measured on the frame: star glyphs 26px (the 24-unit icon draws 20, so the svg is 31px),
   text 17/29 five lines, Read More with a 3px navy rule, then the name. */
.recent-reviews .review-card { border-color: rgba(0, 0, 102, .6); min-height: 0; padding: 41px 46px 38px 39px; }
.recent-reviews .stars { gap: 6.5px; margin: 0 0 17px -3px; }
.recent-reviews .stars .i-star { width: 31px; height: 31px; }
.recent-reviews .review-text { line-height: 29px; margin-bottom: 16px; }
.recent-reviews .review-more { padding-bottom: 0; margin-bottom: 25px; }
.recent-reviews .review-name { min-height: 43px; }

/* Practice Areas index (CSS Sheet - Page 2 "Practice area landing page" cards): photo over a #F8F8F8 panel,
   Jakarta Bold 25 caps title, short excerpt, navy arrow; on hover the card rises 25px, the title turns navy,
   the arrow stretches and a gold bar shows under the card. */
.page-body--index { display: block; padding-top: 62px; }
.practice-intro { max-width: 880px; margin: 0 0 44px; }
.practice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 21px 22px; list-style: none; margin: 0; padding: 0; }
.pa-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #f8f8f8; color: var(--ink); text-decoration: none; text-align: center; transition: transform .25s ease; }
.pa-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: -19px; height: 9px; background: var(--gold); opacity: 0; transition: opacity .25s ease; }
.pa-card-img { display: block; width: 100%; height: auto; aspect-ratio: 339 / 119; object-fit: cover; background: var(--navy); }
.pa-card-body { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 48px 18px 41px; }
.pa-card-title { margin: 0 0 9px; font-family: var(--sans); font-weight: 700; font-size: clamp(20px, .5vw + 14.5px, 24px); line-height: 1.2; letter-spacing: 0; color: var(--ink); text-transform: uppercase; text-wrap: balance; transition: color .2s ease; }
.pa-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 236px; margin: 0 0 20px; font-size: 17px; line-height: 26px; }
/* Arrow drawn in CSS so only the shaft grows on hover (25px static, 47px hovered, 16px tall head); the head keeps its size. */
.pa-card-arrow { position: relative; display: block; margin-top: auto; width: 25px; height: 16px; color: var(--blue); transition: width .25s ease; }
.pa-card-arrow::before { content: ''; position: absolute; left: 0; right: 1px; top: 7px; height: 2px; background: currentColor; }
.pa-card-arrow::after { content: ''; position: absolute; right: 2.3px; top: 2.5px; width: 11px; height: 11px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.pa-card:hover, .pa-card:focus-visible { transform: translateY(-25px); }
.pa-card:hover::after, .pa-card:focus-visible::after { opacity: 1; }
.pa-card:hover .pa-card-title, .pa-card:focus-visible .pa-card-title { color: var(--blue); }
.pa-card:hover .pa-card-arrow, .pa-card:focus-visible .pa-card-arrow { width: 47px; }

@media (max-width: 1240px) {
  .practice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .page-body { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: 80px; }
  .recent-reviews-grid { width: 100%; margin-left: 0; }
}
@media (max-width: 860px) {
  .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-body, .page-body--index { padding-top: 30px; }
  .recent-reviews-grid { grid-template-columns: 1fr; gap: 20px; }
  .recent-reviews .review-card { min-height: 0; padding: 30px 24px; }
  .recent-reviews .review-more { padding-top: 13px; margin-top: -13px; }
  .pa-card-img { aspect-ratio: 2.2; }
}
@media (max-width: 560px) {
  .practice-grid { grid-template-columns: 1fr; gap: 24px; }
  .pa-card:hover, .pa-card:focus-visible { transform: none; }
  .pa-card::after { bottom: 0; height: 6px; }
  .pa-card-body { padding: 30px 24px 30px; }
  .pa-card-text { max-width: 320px; }
}

/* E-signature portals: no sidebar form; a small help box under the signing button. */
.signing-help { margin: 28px 0 36px; padding: 18px 22px; border: 1px solid #dedee6; border-left: 4px solid var(--gold); background: #f8f8f8; }
.signing-help p { margin: 0; font-size: 16px; line-height: 1.6; }
.signing-help a[href^="tel:"] { white-space: nowrap; }

/* Homepage upper half (Figma Homepage 1920 / 1280 / 430). The 1280 frame is the 1920 composition with the
   same y positions, shifted 320px left, so desktop pieces are placed from the page center (50%). */
/* Section titles stay 50px down to the 1280 frame. */
.page-home h2 { font-size: clamp(34px, 1.6vw + 30px, 50px); }

/* Hero: team photo under a navy fade (sampled from the frame), Gloock 112/111 title, stats box that bleeds off
   the right edge, then the five claim-type links with faint line icons behind their labels. */
/* The reel fills the first screen (Bart, 10/21: "move it down more, too much is coming up on the first page"),
   but the title, keyword line and button always fit on it (Bart, 10/22: "move the hero text up and to the left a
   smidge", "it's getting cut off on my laptop"): --hero-top puts the copy 500px down on a tall screen and raises it
   on shorter ones (the button ends 36px above the bottom), never higher than 200px. The stats and claim types fall
   below the fold. The media box and its fade move with the copy. --screen-h is the viewport with the browser bars
   showing (svh), so phones count their toolbars. */
.home-hero { --screen-h: 100vh; --hero-top: clamp(200px, calc(var(--screen-h) - 418px), 500px);
  position: relative; background: var(--navy); color: var(--white); overflow: hidden; isolation: isolate; padding: var(--hero-top) 0 0; }
@supports (height: 100svh) { .home-hero { --screen-h: 100svh; } }
.home-hero-media { position: absolute; inset: 0 0 auto; height: calc(var(--hero-top) + 470px); z-index: -1; }
.home-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4.6%; }
/* Dark top behind the header (the header bar adds its own fade), clear through the faces, then a blue-navy fade
   that starts just above the title and is solid by the stats box. The first stops are px from the top, the rest px
   from the title (they were 470-990 of the 1010 box with the title at 540). */
.home-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,
  #000025 0, #000025 45px, rgba(0, 0, 37, .8) 60px, rgba(0, 0, 40, .42) 80px, rgba(2, 6, 50, .44) 100px, rgba(4, 6, 60, .3) 130px,
  rgba(8, 10, 80, .12) 160px, rgba(10, 10, 80, 0) 200px, rgba(10, 10, 80, 0) calc(var(--hero-top) - 70px),
  rgba(6, 6, 90, .12) calc(var(--hero-top) - 10px), rgba(6, 6, 94, .3) calc(var(--hero-top) + 60px), rgba(6, 5, 96, .5) calc(var(--hero-top) + 130px),
  rgba(5, 5, 96, .66) calc(var(--hero-top) + 200px), rgba(4, 3, 88, .74) calc(var(--hero-top) + 270px), rgba(6, 6, 78, .84) calc(var(--hero-top) + 340px),
  rgba(8, 8, 67, .93) calc(var(--hero-top) + 400px), var(--navy) calc(var(--hero-top) + 450px)); }
/* 1160 wide (was the frame's 1060), so the copy starts 50px further left (Bart, 10/22). */
.home-hero-inner { max-width: calc(1160px + 2 * var(--gutter)); }
/* One H1 holds both lines (title + keyword line); it takes no type of its own so each span keeps its look. */
.home-hero-h1 { margin: 0; font: inherit; color: inherit; letter-spacing: normal; }
.home-hero-h1 > span { display: block; }
.home-hero-title { font-family: var(--serif); font-weight: 400; }
.home-hero-title { margin: 0; color: var(--white); font-size: clamp(52px, 8.75vw, 112px); line-height: 1.018; letter-spacing: -0.01em; }
.home-hero-sub br { display: none; }
.home-hero-sub { margin: 9px 0 0; font-weight: 600; font-size: clamp(20px, 2.03vw, 26px); line-height: 1.25; letter-spacing: .096em; text-transform: uppercase; }
.home-hero-row { display: flex; align-items: flex-start; margin-top: 56px; }
/* Box: 463px into the copy column to the right edge (893 wide at 1920 in the frame), 1px #80691D rule, three columns. */
.home-stats { display: flex; flex: none; list-style: none; width: calc(100% - 463px + (100vw - 100%) / 2); margin: -17px calc((100% - 100vw) / 2) 0 auto;
  padding: 25px 0 34px; border: 1px solid #80691d; border-right: 0; background: var(--navy); }
.home-stats li { display: flex; flex-direction: column; padding: 12px 0 0 51px; border-left: 1px solid #80691d; }
.home-stats li:first-child { width: 212px; padding-left: 56px; border-left: 0; }
.home-stats li:nth-child(2) { width: 233px; }
.home-stats li:nth-child(3) { padding-left: 45px; }
.stat-value { font-family: var(--serif); font-size: 40px; line-height: 1; }
.stat-value sup { font-family: var(--sans); font-size: 24px; font-weight: 200; line-height: 0; vertical-align: 0; position: relative; top: -8px; margin-left: 1px; }
.stat-label { margin-top: 10px; font-weight: 600; font-size: 18px; line-height: 21px; letter-spacing: .09em; text-transform: uppercase; }
.home-stats li:first-child .stat-label { max-width: 7em; }
.home-stats li:nth-child(2) .stat-label { max-width: 8em; }
.home-stats li:nth-child(3) .stat-label { max-width: 10em; }

/* Claim-type row: labels 292-1536 at 1920; each icon sits above and behind its label (inline top/left nudges
   come from the frame). */
.home-hero-practice { margin-top: 18px; }
/* Seven claim types since 10/21 (Water and Hail added): a wider row at 22px, centered. */
.home-hero-practice ul { display: flex; justify-content: space-between; list-style: none; width: 1640px; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto; }
.home-hero-practice a { position: relative; display: block; padding-top: 57px; color: var(--white); text-decoration: none; font-weight: 600; font-size: 22px; line-height: 30px; text-transform: uppercase; white-space: nowrap; }
.home-hero-practice .i-line { position: absolute; top: var(--t, 0); left: 50%; transform: translateX(calc(-50% + var(--dx, 0px))); stroke: rgba(255, 255, 255, .23); stroke-width: 2.2; }
.home-hero-practice span { position: relative; display: block; padding-bottom: 1px; border-bottom: 2px solid transparent; }
.home-hero-practice a:hover span, .home-hero-practice a:focus-visible span { border-color: var(--white); }
.home-hero-practice a:hover .i-line { stroke: rgba(255, 255, 255, .4); }

/* The Denham Difference: copy left (525 wide), Bart portrait (694 wide, cropped by the section bottom) right
   over the crest at 17% with its white disk at 17%. */
.home-difference { position: relative; background: var(--navy); color: var(--white); overflow: hidden; padding: 134px 0 93px; }
.home-difference-inner { position: static; max-width: calc(1060px + 2 * var(--gutter)); }
.home-difference-copy { position: relative; z-index: 1; max-width: 525px; }
.home-difference .eyebrow { margin-bottom: 3px; }
.home-difference h2 { color: var(--white); max-width: 480px; margin-bottom: 19px; }
.home-difference p { font-size: 17px; line-height: 29px; margin-bottom: 29px; }
.home-difference .btn-row { margin: -8px 0 0; gap: 16px; }
.home-difference .btn-row, .home-bart .btn-row { margin-bottom: 0; }
.home-difference-photo { position: absolute; left: calc(50% + 15px); bottom: 0; width: 694px; height: 958px; }
.home-difference-portrait { position: relative; width: 694px; max-width: none; }
.crest-watermark { position: absolute; left: -91px; top: 170px; width: 902px; pointer-events: none; }
.crest-watermark img { width: 100%; opacity: .17; }
.crest-watermark::before { content: ''; position: absolute; left: 49.95%; top: 45.3%; width: 44.05%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .17); }

/* Badges strip (white, 187 tall at 1920), rotating like the live site's: the list runs twice in one track that
   slides left by half its width and starts over; it holds still on hover, focus, the video pause button and
   reduced motion (then it scrolls by hand). */
.home-badges { background: var(--white); padding: 43px 0 39px; }
.badge-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.badge-track { display: flex; align-items: center; width: max-content; list-style: none; margin: 0; padding: 0; animation: badge-roll 38s linear infinite; }
.badge-track li { flex: none; padding: 0 46px; }
.badge-marquee:hover .badge-track, .badge-marquee:focus-within .badge-track, .is-motion-paused .badge-track { animation-play-state: paused; }
@keyframes badge-roll { to { transform: translateX(-50%); } }
.home-badges img { display: block; height: 104px; width: auto; max-width: 150px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .badge-track { animation: none; }
  .badge-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Better Call Bart (#000066, 740 tall): seated photo 1033 wide from x 98, its head rising 73px into the
   reviews band; copy from x 874 (center - 86). */
.home-bart { position: relative; z-index: 1; background: var(--blue); color: var(--white); overflow-x: clip; }
.home-bart-photo { position: absolute; left: calc(50% - 858px); top: -75px; bottom: 0; width: 1033px; overflow: hidden; }
.home-bart-photo img { width: 1033px; max-width: none; margin-top: -164px; }
.home-bart-inner { position: relative; max-width: none; padding: 81px var(--gutter) 63px calc(50% - 86px); }
.home-bart-copy { position: relative; max-width: 645px; }
.home-bart-copy .eyebrow { color: var(--white); margin-bottom: 9px; }
.home-bart h2 { color: var(--white); margin-bottom: 20px; }
.home-bart p { font-size: 17px; line-height: 29px; margin-bottom: 29px; }
.home-bart .btn-row { padding-top: 16px; }

/* Why Choose: column 425-1495, three 322-wide cards with a half-strength #96710F rule. */
.home-why { padding: 82px 0 100px; }
.home-why .container { max-width: calc(1070px + 2 * var(--gutter)); }
.home-why .eyebrow { margin-bottom: 10px; }
.home-why h2 { max-width: 700px; margin-bottom: 22px; }
.home-why-lede { max-width: 870px; font-size: 17px; line-height: 29px; margin-bottom: 0; }
.why-cards { display: grid; grid-template-columns: repeat(3, 322px); gap: 46px; list-style: none; margin: 33px 0 34px -3px; }
.why-card { border: 1px solid rgba(150, 113, 15, .5); padding: 28px 24px 20px 26px; }
.why-card .i-line { color: var(--gold-dark); stroke-width: 2; margin-bottom: 16px; }
.why-card h3 { font-family: var(--sans); font-weight: 700; font-size: 25px; line-height: 31px; text-transform: uppercase; color: var(--blue); margin: 0 0 13px; letter-spacing: 0; }
.why-card p { margin: 0; font-size: 17px; line-height: 29px; }
.home-why .btn-row { gap: 27px; }

/* Down to 1601px the row keeps space-between inside the gutters, so all seven labels stay whole (the 1280
   frame clips the 1920 row at both edges like a ticker, which would hide the first and last links). */
@media (max-width: 1600px) {
  /* Below that the labels no longer fit with a 40px gap: the row becomes a swipeable strip from the gutter. */
  .home-hero-practice ul { width: auto; max-width: none; margin: 0; padding: 0 var(--gutter) 6px; gap: 64px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .home-hero-practice ul::-webkit-scrollbar { display: none; }
  .home-hero-practice li { flex: none; }
}
@media (max-width: 1160px) {
  .why-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-left: 0; }
}
@media (max-width: 900px) {
  .why-cards { grid-template-columns: 1fr; max-width: 640px; gap: 26px; }
}
@media (max-width: 1100px) {
  /* the header is in the flow here (146px), so the copy fits the screen under it: 420px down at most */
  .home-hero { --hero-top: clamp(180px, calc(var(--screen-h) - 489px), 420px); }
  .home-hero-media { height: calc(var(--hero-top) + 360px); }
  /* the header is solid here, so drop the dark band the desktop fade keeps behind the overlay header (it showed as
     a hard edge under the logo bar); keep the desktop fade below the faces, placed from the title (these were
     45-96% of a 780 box with the title at 420) */
  .home-hero-media::after { background: linear-gradient(180deg, rgba(0, 0, 37, .45) 0, rgba(10, 10, 80, 0) 109px, rgba(10, 10, 80, 0) calc(var(--hero-top) - 69px),
    rgba(6, 6, 90, .12) calc(var(--hero-top) - 14px), rgba(6, 6, 94, .3) calc(var(--hero-top) + 32px), rgba(6, 5, 96, .5) calc(var(--hero-top) + 79px),
    rgba(5, 5, 96, .68) calc(var(--hero-top) + 134px), rgba(4, 3, 88, .74) calc(var(--hero-top) + 181px), rgba(6, 6, 78, .84) calc(var(--hero-top) + 235px),
    rgba(8, 8, 67, .93) calc(var(--hero-top) + 282px), var(--navy) calc(var(--hero-top) + 329px)); }
  .home-hero-row { flex-direction: column; gap: 40px; margin-top: 40px; }
  .home-stats { align-self: stretch; width: auto; margin: 0 calc(-1 * var(--gutter)); padding: 22px 0 24px; border-width: 1px 0; justify-content: space-between; }
  .home-stats li, .home-stats li:first-child, .home-stats li:nth-child(2), .home-stats li:nth-child(3) { flex: 1; width: auto; padding: 0 12px 0 22px; }
  .home-stats li:first-child { padding-left: var(--gutter); }
  .home-hero-practice { margin-top: 26px; }
  .badge-track li { padding: 0 34px; }
  .home-badges img { height: 92px; }
  .home-difference { padding: 90px 0 0; }
  .home-difference-copy { max-width: 640px; padding-bottom: 50px; }
  /* The portrait's top ~30% is transparent; pull it up under the buttons. */
  .home-difference-photo { position: relative; left: auto; bottom: auto; width: min(694px, 100%); height: auto; margin: -150px auto 0; }
  .home-difference-portrait { width: 100%; }
  .crest-watermark { left: -13%; top: 17.5%; width: 130%; }
  /* Copy first, then the seated photo cropped like the 430 frame (head right of center, cut at the band end). */
  .home-bart-inner { display: flex; flex-direction: column-reverse; padding: 70px 0 0; }
  .home-bart-copy { padding: 0 var(--gutter) 44px; }
  .home-bart-photo { position: relative; left: auto; top: auto; bottom: auto; width: min(520px, 100%); aspect-ratio: 430 / 540; margin: 0 0 0 auto; }
  .home-bart-photo img { width: 153.5%; margin: -21% 0 0 -9.5%; }
  .home-bart-copy { max-width: 720px; }
}
@media (max-width: 760px) {
  /* 300px down on a tall phone; on shorter ones (toolbars showing) the copy rises into the clip, never
     higher than 150px, so the title, keyword line and button fit the first screen (10/22) */
  .home-hero { --hero-top: clamp(150px, calc(var(--screen-h) - 462px), 300px); }
  /* the clip is 461 tall and starts 41px under the logo bar; solid navy by 420 (taller than the 430 frame, 10/21) */
  .home-hero-media { height: 420px; overflow: hidden; }
  .home-hero-img { height: 461px; margin-top: -41px; object-position: 50% 50%; }
  .home-hero-media::after { background: linear-gradient(180deg, rgba(10, 10, 80, 0) 0, rgba(10, 10, 80, 0) 40%, rgba(12, 12, 70, .45) 50%,
    rgba(16, 18, 84, .85) 59%, rgba(16, 16, 86, .92) 70%, rgba(15, 16, 82, .94) 80%, rgba(12, 12, 68, .97) 90%, var(--navy) 100%); }
  .home-hero-title br { display: none; }
  .home-hero-sub br { display: inline; }
  .home-hero-inner { padding: 0 22px; }
  /* three lines for the longer title (10/21); the shadow keeps it readable where it rises over the clip */
  .home-hero-title { font-size: clamp(36px, 11.6vw, 52px); line-height: 1.12; text-shadow: 0 2px 14px rgba(0, 0, 30, .45); }
  .home-hero-sub { font-size: clamp(17px, 5.1vw, 22px); line-height: 31px; letter-spacing: .115em; margin-top: 16px; }
  .home-hero-row { margin-top: 24px; gap: 41px; }
  .home-stats { margin: 0 -22px; padding: 22px 0 18px; }
  /* dividers run 10px above the figures and 9px below the labels */
  .home-stats li, .home-stats li:first-child, .home-stats li:nth-child(2), .home-stats li:nth-child(3) { padding: 10px 6px 9px 35px; }
  .home-stats li:first-child { flex: 0 0 30.25%; padding-left: 27px; }
  .home-stats li:nth-child(2) { flex: 0 0 36.3%; }
  .home-stats li:nth-child(3) { padding-left: 28px; }
  .stat-value { font-size: 30px; }
  .stat-value sup { font-size: 17px; top: -6px; }
  .stat-label { margin-top: 7px; font-size: 12.5px; line-height: 16px; letter-spacing: .1em; }
  .home-hero-practice { margin-top: 41px; }
  .home-hero-practice ul { gap: 56px; padding-bottom: 4px; }
  .home-hero-practice a { font-size: 20px; line-height: 26px; padding-top: 46px; }
  .home-hero-practice .i-line { transform: translateX(-50%) scale(.75); transform-origin: 50% 0; }
  .home-difference { padding-top: 80px; }
  .home-difference-inner { padding: 0 30px 0 37px; }
  /* the phone frame sets every section title in Gloock 40 on a 48px pitch */
  .home-difference h2 { font-size: clamp(32px, 9.3vw, 40px); line-height: 1.2; margin-bottom: 17px; }
  .home-difference .eyebrow { font-size: 17px; text-wrap: balance; }
  .home-difference .btn-outline { display: none; }
  .home-difference-copy { padding-bottom: 66px; }
  /* Phone frame: the portrait is 123% of the screen (528 at 430), face just right of center, its top 30% of its
     width above the buttons' bottom, cropped by the section end; the crest keeps its desktop geometry. */
  .home-difference-photo { --pw: min(122.8vw, 580px); width: var(--pw); height: calc(var(--pw) * 1.373); overflow: hidden;
    margin: calc(var(--pw) * -.303) 0 0 calc(50vw - 37px - var(--pw) * .4682); }
  .crest-watermark { left: -13.1%; top: calc(var(--pw) * .245); width: 130%; }
  .home-badges { padding: 52px 0 50px; }
  .badge-track { animation-duration: 30s; }
  .badge-track li { padding: 0 24px; }
  .home-badges img { height: 88px; }
  .home-bart-inner { padding-top: 64px; }
  .home-bart-copy { padding: 0 41px 41px; }
  .home-bart-copy .eyebrow { max-width: 15em; line-height: 21px; margin-bottom: 20px; }
  .home-bart h2 { font-size: clamp(32px, 9.3vw, 40px); line-height: 1.2; margin-bottom: 22px; }
  .home-bart .btn-row { padding-top: 4px; }
  .home-bart-photo { aspect-ratio: 430 / 537; }
  .home-why { padding: 72px 0 53px; }
  /* copy sits 5px inside the cards (cards 25-399 at 430, text from 30) */
  .home-why .container { padding: 0 30px; }
  .home-why .eyebrow { font-size: 17px; margin: 0 -15px 12px -5px; text-wrap: balance; }
  .home-why h2 { font-size: clamp(32px, 9.3vw, 40px); line-height: 1.18; margin-bottom: 24px; }
  .why-cards { margin: 25px 0 26px -5px; }
  .why-card { padding: 28px 28px 39px; }
  .home-why .btn-row { flex-direction: column; align-items: center; gap: 14px; }
  .home-why .btn-row .btn { min-width: 236px; } /* min-width: a fixed width made the labels wrap once buttons.css lets them wrap on phones */
}
@media (max-width: 400px) {
  /* Narrow phones: keep all three stats inside the screen. */
  .home-stats li, .home-stats li:first-child, .home-stats li:nth-child(2), .home-stats li:nth-child(3) { flex: 1 1 0; padding-left: 12px; padding-right: 4px; }
  .home-stats li:first-child { flex: 0.9 1 0; padding-left: 20px; }
  .stat-value { font-size: clamp(23px, 7.4vw, 30px); }
  .stat-value sup { font-size: 14px; top: -5px; }
  .stat-label { font-size: 11px; letter-spacing: .06em; }
}

/* Homepage lower half (Figma Homepage 1920 / 1280 / 430). Both desktop frames use the same fixed sizes,
   centered, so most measurements below are px from the 1920 frame. */

/* Both desktop frames keep 50px section titles and 17px copy (the global tokens shrink below 1920). */
.home-practice h2, .home-attorneys h2, .home-faq h2, .home-talk h2, .home-blog h2 { font-size: clamp(34px, 2.6vw + 17px, 50px); }
.home-faq-intro, .home-talk-copy > p:not(.eyebrow), .home-seo-body { font-size: 17px; }
:is(.home-practice, .home-attorneys, .home-faq, .home-talk, .home-blog) .eyebrow { font-size: 17px; }

/* Practice Areas: six 339 x 362 cards on #0A0A3A. Hover lifts the card 25px and shows a 9px gold bar
   10px below it; the title turns #000066 and the short arrow becomes the long one. */
.home-practice { background: var(--navy); color: var(--white); padding: 106px 0 40px; text-align: center; }
.home-practice .eyebrow { margin-bottom: 12px; }
.home-practice h2 { color: var(--white); margin-bottom: 79px; }
.practice-cards { display: grid; grid-template-columns: repeat(3, 339px); justify-content: center; gap: 21px; list-style: none; padding-right: 18px; /* the Figma grid sits 9px left of center */ }
.practice-card { position: relative; display: flex; flex-direction: column; height: 362px; background: #f8f8f8; color: var(--ink); text-decoration: none; transition: transform .2s ease; }
.practice-card::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 10px); height: 9px; background: var(--gold); opacity: 0; transition: opacity .2s ease; }
.practice-card-img { width: 100%; height: 119px; object-fit: cover; }
.practice-card-body { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 47px 24px 41px; }
.practice-card-title { font-weight: 600; font-size: 25px; line-height: 1.2; text-transform: uppercase; transition: color .2s ease; }
.practice-card-text { margin-top: 9px; max-width: 216px; font-size: 17px; line-height: 26px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.practice-card-arrow { margin-top: auto; display: flex; justify-content: center; height: 16px; color: var(--blue); }
.practice-card-arrow .i-arrow { width: 25px; height: 16px; }
.practice-card-arrow .i-arrow-long { display: none; width: 47px; height: 16px; }
.practice-card-arrow path { stroke-width: 1.7; }
.practice-card:hover, .practice-card:focus-visible { transform: translateY(-25px); }
.practice-card:hover::after, .practice-card:focus-visible::after { opacity: 1; }
.practice-card:hover .practice-card-title, .practice-card:focus-visible .practice-card-title { color: var(--blue); }
.practice-card:hover .i-arrow, .practice-card:focus-visible .i-arrow { display: none; }
.practice-card:hover .i-arrow-long, .practice-card:focus-visible .i-arrow-long { display: block; }

/* We'll Take It From Here: the cut-out team photo at a fixed 2365px (both desktop frames crop it the same way,
   centered 29px left), its transparent top clipped, fading out over the navy-to-#000066 gradient. */
.home-team { position: relative; height: 796px; overflow: hidden; color: var(--white); background: linear-gradient(180deg, var(--navy) 496px, var(--blue) 796px); }
.home-team-photo { position: absolute; top: 0; left: calc(50% - 1235px); width: 2365px; height: 756px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 506px, transparent 746px); mask-image: linear-gradient(180deg, #000 506px, transparent 746px); }
.home-team-photo img { width: 100%; max-width: none; margin-top: -444px; }
.home-team-inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; width: 1060px; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto; padding-top: 517px; }
.home-team h2 { margin: 0; color: var(--white); font-size: 110px; line-height: 120px; letter-spacing: 0; }
.home-team .btn { min-width: 205px; margin-bottom: 17px; }

/* Meet Our Attorneys on #000066: 254 x 468 portraits, 17px apart, orange arrows 21px outside the track.
   The active card (hovered or focused; the first card until then) lifts 22px over a 6px gold bar. */
.home-attorneys { background: var(--blue); color: var(--white); padding: 68px 0 88px; text-align: center; }
.home-attorneys .eyebrow { margin-bottom: 8px; }
.home-attorneys h2 { color: var(--white); margin-bottom: 38px; }
.attorney-carousel { display: grid; grid-template-columns: 25px 1067px 25px; justify-content: center; align-items: start; column-gap: 21px; }
.attorney-carousel .carousel-arrow { width: 25px; height: 44px; margin-top: 234px; color: #e17739; }
.attorney-carousel .carousel-arrow .i-arrow { width: 25px; height: 16px; }
.attorney-carousel .carousel-arrow path { stroke-width: 1.7; }
.attorney-track { --card-w: 254px; gap: 17px; padding-top: 22px; }
.attorney-card { position: relative; display: flex; flex-direction: column; color: var(--white); text-decoration: none; text-align: left; }
.attorney-card-photo { position: relative; display: block; height: 468px; overflow: hidden; background: #1a1a4a; transition: transform .25s ease; }
.attorney-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* The studio portraits are cropped tighter in the Figma, each by its own amount (fitted to the frame). */
[class*='attorney-card--'] .portrait--studio { position: absolute; width: auto; height: auto; max-width: none; object-fit: fill; }
.attorney-card--chad-j-robinson .portrait--studio { height: 521px; left: -30px; top: -54px; }
.attorney-card--asher-mellul .portrait--studio { height: 721px; left: -117px; top: -57px; }
.attorney-card--meredith-truen .portrait--studio { height: 554px; left: -79px; top: -84px; }
.attorney-card--michael-quintero .portrait--studio { height: 594px; left: -72px; top: -48px; }
.attorney-card::after { content: ''; position: absolute; left: 0; right: 0; top: 454px; height: 6px; background: var(--gold); opacity: 0; transition: opacity .25s ease; }
.attorney-card-name { margin-top: 15px; font-weight: 600; font-size: 25px; line-height: 32px; transition: transform .25s ease; }
.attorney-card-role { margin-top: 6px; max-width: 192px; font-size: 17px; line-height: 21px; }
.attorney-track:not(:hover):not(:focus-within) .attorney-card:first-child .attorney-card-photo, .attorney-card:hover .attorney-card-photo, .attorney-card:focus-visible .attorney-card-photo { transform: translateY(-22px); }
.attorney-track:not(:hover):not(:focus-within) .attorney-card:first-child .attorney-card-name, .attorney-card:hover .attorney-card-name, .attorney-card:focus-visible .attorney-card-name,
.attorney-track:not(:hover):not(:focus-within) .attorney-card:first-child .attorney-card-role, .attorney-card:hover .attorney-card-role, .attorney-card:focus-visible .attorney-card-role { transform: translateY(-12px); }
.attorney-track:not(:hover):not(:focus-within) .attorney-card:first-child::after, .attorney-card:hover::after, .attorney-card:focus-visible::after { opacity: 1; }
.attorney-card-role { transition: transform .25s ease; }
.home-attorneys .btn-row { margin-top: 60px; }
.home-attorneys .btn { min-width: 195px; }

/* FAQ band (#E1DED9): Bart's cut-out portrait (660 wide, ending 129px left of center) over the faded crest;
   the copy column starts 82px left of center. */
.home-faq { position: relative; min-height: 789px; overflow: hidden; background: var(--sand); }
.home-faq-photo { position: absolute; top: 0; bottom: 0; right: calc(50% + 129px); width: 660px; pointer-events: none; }
.home-faq-crest { position: absolute; top: -31px; left: -87px; width: 910px; max-width: none; opacity: .17; }
.home-faq-portrait { position: absolute; top: -108px; left: 24px; width: 612px; max-width: none; }
.home-faq-copy { position: relative; width: 630px; margin-left: calc(50% - 82px); padding: 82px 0 88px; }
.home-faq-eyebrow { margin-bottom: 5px; text-transform: none; letter-spacing: .14em; }
.home-faq h2 { margin-bottom: 7px; }
.home-faq-intro { max-width: 540px; margin: 0 0 23px 2px; line-height: 29px; }
.acc-group--faq { margin: 0 0 22px; display: grid; gap: 9px; }
.acc--faq { background: var(--white); border: 0; }
.acc--faq summary { min-height: 70px; padding: 14px 26px 14px 22px; }
.acc--faq .acc-q { max-width: 500px; font-weight: 500; font-size: 17px; line-height: 21px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.acc--faq .acc-icon, .acc--faq summary:hover .acc-icon { width: 14px; height: 14px; border-radius: 0; background: none; }
.acc--faq .acc-icon::before, .acc--faq .acc-icon::after { width: 14px; height: 2.4px; background: var(--blue); }
.acc--faq .acc-a { padding: 0 26px 20px 22px; font-size: 16px; line-height: 1.7; }
.acc--faq .acc-a p { margin-bottom: .8em; }
.home-faq .btn { min-width: 174px; margin-left: 2px; }

/* Long-form text from the WordPress homepage (not in the Figma; it carries the homepage rankings).
   Collapsed to a faded preview with a Read More button; the full text stays in the DOM. */
.home-seo { padding: 96px 0 90px; border-bottom: 1px solid var(--gray); }
.home-seo .container { max-width: calc(1060px + 2 * var(--gutter)); }
.home-seo-body { position: relative; max-height: 540px; overflow: hidden; }
.home-seo-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }
.home-seo-body.is-open { max-height: none; }
.home-seo-body.is-open::after { display: none; }
.home-seo-body :is(h2, h3) b, .home-seo-body :is(h2, h3) strong { font-weight: inherit; }
.home-seo-body h2 { margin-top: 1.5em; }
.home-seo-body .table-wrap { overflow-x: auto; margin: 0 0 1.35em; }
.home-seo-body table { min-width: 520px; width: 100%; border-collapse: collapse; font-size: 16px; }
.home-seo-body :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--gray); text-align: left; vertical-align: top; }
.home-seo-body th { background: var(--navy); color: var(--white); font-weight: 700; }
.home-seo-toggle { margin-top: 30px; }

/* Let's Talk: copy column 522px left of center, the city photo from 130px right of center to the edge. */
.home-talk { position: relative; min-height: 825px; display: flex; align-items: center; }
.home-talk-copy { position: relative; width: 540px; margin-left: calc(50% - 522px); padding: 120px 0 116px; }
.home-talk .eyebrow { margin-bottom: 9px; }
.home-talk h2 { max-width: 450px; margin-bottom: 9px; }
.home-talk-copy > p:not(.eyebrow):not(.btn-row) { line-height: 29px; margin-bottom: 29px; }
.home-talk .btn-row { gap: 13px; margin-top: -7px; }
/* Figma button widths as minimums, so phone labels never wrap inside a fixed width */
.home-talk .btn-gold { min-width: 236px; }
.home-talk .btn-navy { min-width: 195px; padding: 0 19px 0 18px; font-size: 16px; }
.home-talk-photo { position: absolute; top: 0; bottom: 0; left: calc(50% + 130px); right: 0; overflow: hidden; }
/* the Figma crops the skyline tighter than a plain cover fit: zoom 1.73 on the skyline */
.home-talk-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.73); transform-origin: 73.1% 42.1%; }

/* Get Some Insight on #060626: three thin-border blog cards (339 x 434), Read More Articles right-aligned. */
.home-blog { background: #060626; color: var(--white); padding: clamp(99px, 2.5vw + 67px, 115px) 0 clamp(97px, 145px - 2.5vw, 113px); } /* the 1280 frame sits the content 16px higher */
.home-blog .container { max-width: calc(1054px + 2 * var(--gutter)); }
.home-blog .eyebrow { margin-bottom: 7px; }
.home-blog h2 { color: var(--white); margin-bottom: 38px; }
.home-blog .post-track { --card-w: 339px; gap: 18px; justify-content: space-between; }
.home-blog .post-card:nth-child(n + 4) { display: none; } /* the frame shows three posts; phones swipe through all six */
.home-blog-controls { display: flex; align-items: center; justify-content: flex-end; gap: 40px; margin-top: 15px; }
.home-blog .carousel-arrows { display: none; }
.home-blog .carousel-arrows button { color: var(--gold); }
.home-blog .btn { min-width: 236px; }

/* Between the two desktop frames and the phone frame: keep the same pieces, let them shrink. */
@media (max-width: 1180px) {
  .attorney-carousel { grid-template-columns: 44px minmax(0, 1067px) 44px; column-gap: 2px; padding: 0 var(--gutter); }
  .attorney-carousel .carousel-arrow { width: 44px; }
}
@media (max-width: 1140px) {
  .practice-cards { grid-template-columns: repeat(2, 339px); padding-right: 0; }
  .home-blog .post-track { --card-w: 339px; justify-content: start; }
  .home-blog .post-card:nth-child(n + 4) { display: block; }
  .home-blog .carousel-arrows { display: flex; margin-left: 0; }
  .home-blog .carousel-arrows button { width: 44px; height: 44px; }
  .home-blog .carousel-arrows .i-arrow { width: 25px; height: 21px; }
  .home-blog-controls { justify-content: space-between; }
}
@media (max-width: 1100px) {
  .home-team { height: auto; padding-top: 0; background: linear-gradient(180deg, var(--navy) 40%, var(--blue) 100%); }
  .home-team-photo { left: calc(50% - 92.5vw - 23px); width: 185vw; height: 59vw; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%); mask-image: linear-gradient(180deg, #000 70%, transparent 98%); }
  .home-team-photo img { margin-top: -34.6vw; }
  .home-team-inner { padding: 40vw 0 64px; }
  .home-team h2 { font-size: clamp(52px, 8vw, 96px); line-height: 1.15; }
  .home-faq-copy { width: auto; margin-left: max(calc(50% - 82px), 400px); margin-right: var(--gutter); }
  .home-talk-copy { margin-left: var(--gutter); width: calc(50% + 100px - 2 * var(--gutter)); max-width: 540px; padding-right: 0; }
  .home-talk-photo { left: calc(50% + 130px); }
}
@media (max-width: 900px) {
  .home-faq { min-height: 0; display: flex; flex-direction: column; }
  .home-faq-copy { order: 1; width: auto; max-width: 630px; margin: 0 auto; padding: 60px var(--gutter) 40px; box-sizing: content-box; }
  /* phone frame: portrait 99% wide (face just left of center) over the crest at 154% */
  .home-faq-photo { order: 2; position: relative; right: auto; left: auto; width: min(100%, 520px); margin: 0 auto; aspect-ratio: 430 / 520; overflow: hidden; }
  .home-faq-crest { top: -2.6%; left: -27.5%; width: 154%; }
  .home-faq-portrait { top: -17.5%; left: -4.9%; width: 98.8%; }
  .home-talk { flex-direction: column; align-items: stretch; min-height: 0; }
  .home-talk-copy { width: auto; max-width: 600px; margin: 0; padding: 64px var(--gutter) 60px; }
  .home-talk-photo { position: relative; left: auto; height: 520px; }
  .home-talk-photo img { transform: none; object-position: 62% center; }
}
@media (max-width: 760px) {
  .home-practice { padding: 63px 0 40px; }
  .home-practice .eyebrow { margin-bottom: 13px; }
  .home-practice h2 { font-size: clamp(32px, 9.3vw, 40px); margin-bottom: 38px; }
  .practice-cards { grid-template-columns: minmax(0, 339px); gap: 40px; }
  /* narrow phones wrap long titles to two lines: let the card grow instead of the text touching the arrow */
  .practice-card { height: auto; min-height: 362px; }
  .practice-card-text { margin-bottom: 16px; }
  /* phone frame: the photo at 171vw, its heads 15vw below the section top, the title over its faded bottom */
  .home-team-inner { flex-direction: column; align-items: flex-start; gap: 27px; width: auto; max-width: none; margin: 0 clamp(20px, 10.5vw, 45px); padding: calc(60.2vw + 2px) 0 42px; }
  .home-team h2 { font-size: clamp(40px, 13vw, 66px); line-height: 1.1; }
  .home-team-photo { left: calc(50% - 85.5vw); width: 170.8vw; height: 71vw; -webkit-mask-image: linear-gradient(180deg, #000 58vw, transparent 71vw); mask-image: linear-gradient(180deg, #000 58vw, transparent 71vw); }
  .home-team-photo img { margin-top: -20.5vw; }
  .home-team .btn { margin-bottom: 0; }
  .home-attorneys { padding: 29px 0 105px; }
  .home-attorneys .eyebrow { margin-bottom: 19px; }
  .home-attorneys h2 { font-size: clamp(32px, 9.3vw, 40px); line-height: 1.2; margin-bottom: 46px; }
  .home-attorneys .btn-row { margin-top: 16px; }
  .attorney-carousel { grid-template-columns: 44px minmax(0, 254px) 44px; justify-content: center; column-gap: 0; padding: 0; }
  .attorney-carousel .carousel-arrow { width: 44px; }
  .attorney-track { --card-w: 100%; }
  /* one card shows at a time on phones, so every card wears the active state */
  .attorney-card .attorney-card-photo { transform: translateY(-22px); }
  .attorney-card .attorney-card-name, .attorney-card .attorney-card-role { transform: translateY(-12px); }
  .attorney-card::after { opacity: 1; }
  .home-faq-copy { padding: 49px 14px 24px 18px; }
  .home-faq-eyebrow { margin-bottom: 7px; }
  .home-faq h2 { font-size: clamp(32px, 9.3vw, 40px); line-height: 1.18; margin-bottom: 15px; }
  .home-faq-intro { max-width: 365px; margin-bottom: 35px; }
  .acc-group--faq { gap: 7px; margin-bottom: 26px; }
  .acc--faq summary { min-height: 72px; }
  .home-faq .btn { margin-left: 0; }
  /* phone frame: the portrait band is 547 tall at 430 */
  .home-faq-photo { aspect-ratio: 430 / 547; }
  .home-faq-crest { top: -2.47%; }
  .home-faq-portrait { top: -16.64%; }
  .acc--faq .acc-q { max-width: 320px; }
  .acc--faq summary { padding-left: 21px; padding-right: 23px; }
  .home-seo { padding: 60px 0 56px; }
  .home-seo-body { max-height: 620px; }
  .home-talk-copy { padding: 67px 18px 67px; }
  .home-talk .eyebrow { max-width: 360px; margin-bottom: 17px; } /* wraps after FIGHT, as in the frame */
  .home-talk h2 { font-size: clamp(32px, 9.3vw, 40px); line-height: 1.18; margin-bottom: 18px; }
  .home-talk .btn-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .home-talk .btn-navy { min-width: 236px; }
  .home-talk-copy > p:not(.eyebrow):not(.btn-row) { max-width: 380px; }
  .home-talk-photo { height: 664px; }
  .home-talk-photo img { transform: scale(1.45); transform-origin: 56.8% 42%; object-position: 50% center; }
  /* phone frame: the band is #0A0A3A like the footer; copy from x 34, the 339 card from x 40 */
  .home-blog { padding: 60px 0 23px; background: var(--navy); } /* the frame has the footer crest 88px under the button */
  .home-blog .container { padding: 0 max(var(--gutter), calc(50% - 181px)); }
  .home-blog .post-track { margin: 0 17px 0 6px; }
  .home-blog h2 { font-size: clamp(32px, 9.3vw, 40px); margin-bottom: 43px; }
  .home-blog .post-track { --card-w: 100%; }
  /* the homepage phone frame keeps the desktop 339 x 434 card (blog.css shrinks it for the archive) */
  .home-blog-controls { flex-direction: column; gap: 23px; margin-top: 23px; }
  .home-blog .carousel-arrows { margin: 0 11px 0 0; gap: 1px; } /* centered on the card; glyphs 20px apart */
  .home-blog .carousel-arrows button { width: 44px; height: 44px; }
  .home-blog .carousel-arrows .i-arrow { width: 25px; height: 21px; }
}

/* AttorneyBio frame (1920): hero 770 tall, 470px portrait at x 454 / y 235, name block 58px to its right;
   content 300-1195 with H2 accordions, sidebar 1270-1620. Our Team page: tall portrait cards from the
   "Attorney page" block on CSS Sheet 2 (255 x 468 photo, gold bar and lift on hover). */
.bio-hero { position: relative; color: var(--white); padding: 235px 0 65px; overflow: hidden; isolation: isolate; background: var(--navy); }
.bio-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: -2; }
/* Sampled against the source photo, the frame multiplies it by about 20% red/green and 42% blue: dark, but the sky stays violet. */
.bio-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(50, 48, 106); mix-blend-mode: multiply; }
.bio-hero-inner { display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: 58px; align-items: start; max-width: calc(1012px + 2 * var(--gutter)); }
.bio-photo { aspect-ratio: 1; overflow: hidden; background: #1b1b44; }
.bio-photo .portrait { display: block; width: 470px; height: 470px; object-fit: cover; object-position: center 18%; background: #1b1b44; }
/* Studio portraits: the frame shows them 110% wide, left-aligned, top 27% cropped (measured on Chad). */
.bio-photo .portrait--studio { width: 110.2%; height: auto; max-width: none; margin-top: -26.8%; object-fit: initial; }
/* Bart's photo is a transparent cut-out: give it the dark warm studio backdrop the other portraits share. */
.portrait--cutout, .bio-photo .portrait--cutout, .team-card-photo .portrait--cutout { background: radial-gradient(circle at 50% 38%, #4a4030 0%, #2a251d 42%, #141210 100%); object-position: center 30%; }
.portrait--empty { display: block; width: 100%; aspect-ratio: 1; background: #1b1b44; }
/* No photo: one column, the name block on its own instead of beside an empty square (the double class beats the breakpoints below). */
.bio-hero-inner.bio-hero-inner--no-photo { grid-template-columns: minmax(0, 1fr); max-width: calc(760px + 2 * var(--gutter)); }
.bio-hero-inner--no-photo .bio-head { margin-right: 0; }
.bio-head { margin-top: 68px; margin-right: -160px; min-width: 0; }
.bio-name { margin: 0 0 17px; color: var(--white); font-size: var(--fs-h1); line-height: 1.2; }
.bio-role { margin: 0; padding-bottom: 17px; border-bottom: 1px solid var(--white); width: fit-content; min-width: min(478px, 100%); max-width: 100%; font-weight: 600; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
/* Without a title (Skrt), the white rule moves under the name so the block keeps its shape. */
.bio-head--no-role .bio-name { padding-bottom: 17px; border-bottom: 1px solid var(--white); width: fit-content; min-width: min(478px, 100%); max-width: 100%; }
.bio-contact { list-style: none; margin: 17px 0 0; padding: 0; display: grid; gap: 1px; }
.bio-contact a { display: inline-flex; align-items: center; gap: 11px; min-height: 28px; color: var(--white); text-decoration: none; font-size: 17px; line-height: 1.6; }
.bio-contact a:hover span { text-decoration: underline; }
.bio-contact .i { flex: none; width: 24px; height: 24px; color: var(--gold); }
/* The phone glyph is drawn smaller in its box; Figma shows it 23px, so enlarge it without moving the text. */
.bio-contact .i-phone { width: 31px; height: 31px; margin: -3.5px; }

.page-body--bio { grid-template-columns: minmax(0, 895px) minmax(0, 350px); gap: 75px; padding-top: 87px; padding-bottom: 230px; }
.page-body--bio .content-col { padding-top: 3px; }
/* The bio frame leaves one blank line between paragraphs. */
.page-body--bio .entry-content > p, .page-body--bio .acc-a > p { margin-bottom: 1.7em; }

/* Bio accordions: navy uppercase title, 42px gold disc, 1px #ccc rule under closed items only. */
/* After a paragraph the first title sits one line below it, so pull back the summary padding. */
.acc-group--bio { margin: 0; }
.entry-content > p + .acc-group--bio { margin-top: -25px; }
.acc-group--bio + * { margin-top: 2.2em; }
.acc--bio { border-bottom: 1px solid #ccc; }
.acc--bio[open] { border-bottom-color: transparent; }
.acc--bio summary { padding: 25px 0 24px; gap: 24px; }
.acc--bio .acc-q { margin: 0; font-family: var(--sans); font-weight: 700; font-size: clamp(19px, .7vw + 12.5px, 26px); line-height: 1.25; letter-spacing: -.01em; color: var(--navy); text-transform: uppercase; }
.acc--bio summary:hover .acc-q { color: var(--blue); }
.acc--bio .acc-icon { width: 42px; height: 42px; }
.acc--bio .acc-icon::before, .acc--bio .acc-icon::after { width: 18px; height: 2px; background: var(--blue); }
.acc--bio summary:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 4px; }
.acc--bio .acc-a { padding: 0; }
.acc--bio .acc-a h3 { margin: 1.2em 0 12px; font-size: clamp(22px, .5vw + 17px, 28px); }
.acc--bio .acc-a > :first-child { margin-top: 0; }
.acc--bio .acc-a > :last-child { margin-bottom: 0; }

.team-body { padding-top: 50px; padding-bottom: 110px; }
.team-intro { max-width: 880px; margin-bottom: 40px; }
/* At most five across (251px cards at 1920), and three on a tablet instead of two oversized ones. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(200px, (100% - 64px) / 5)), 1fr)); gap: 46px 16px; padding-top: 22px; }
.team-card { display: flex; flex-direction: column; color: var(--blue); text-decoration: none; }
/* Hover from the Figma block: the photo lifts 22px, a 6px gold bar shows 8px under it, and the text rises 12px. */
.team-card-photo { position: relative; display: block; aspect-ratio: 255 / 468; background: #1d1a17; transition: transform .25s ease; }
.team-card-photo::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 8px); height: 6px; background: var(--gold); opacity: 0; transition: opacity .25s ease; }
/* Absolute so the photo's own size never stretches the card past its aspect ratio. */
.team-card-crop { position: absolute; inset: 0; overflow: hidden; }
/* The Figma cards show the studio portraits about 1.5x the card width, so faces read large; a uniform zoom
   anchored near the top gets close for every photo without cutting off heads. */
.team-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: scale(1.2); transform-origin: 50% 12%; }
.team-card-name, .team-card-role { transition: transform .25s ease; }
.team-card-name { margin-top: 14px; font-weight: 600; font-size: clamp(19px, .6vw + 14.5px, 26px); line-height: 1.3; letter-spacing: -.01em; }
.team-card-role { margin-top: 4px; font-size: 17px; line-height: 1.25; text-wrap: balance; }
.team-card:hover .team-card-photo, .team-card:focus-visible .team-card-photo { transform: translateY(-22px); }
.team-card:hover .team-card-photo::after, .team-card:focus-visible .team-card-photo::after { opacity: 1; }
.team-card:hover .team-card-name, .team-card:hover .team-card-role,
.team-card:focus-visible .team-card-name, .team-card:focus-visible .team-card-role { transform: translateY(-12px); }
.team-card:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .team-card-photo, .team-card-name, .team-card-role { transition: none; }
}

/* The photo is laid out larger than the hero and pinned so the skyline sits where the frame shows it. */
@media (min-width: 1101px) {
  .bio-hero-bg { width: 115%; height: auto; max-width: none; left: -4.6%; top: 50%; bottom: auto; transform: translateY(-44.5%); object-fit: fill; }
}
@media (max-width: 1400px) {
  .bio-head { margin-right: 0; }
}
@media (max-width: 1100px) {
  .bio-hero { padding: 50px 0 60px; }
  .bio-hero-inner { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; align-items: center; }
  .bio-head { margin-top: 0; }
  .bio-photo .portrait:not(.portrait--studio) { width: 100%; height: 100%; }
  .page-body--bio { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 60px; padding-bottom: 90px; }
}
@media (max-width: 760px) {
  .bio-hero { padding: 32px 0 44px; }
  .bio-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .bio-photo { max-width: 390px; }
  .bio-name { margin-bottom: 12px; }
  .bio-role { padding-bottom: 14px; }
  .bio-contact { margin-top: 14px; gap: 4px; }
  .bio-contact a { min-height: 44px; }
  .page-body--bio { padding-top: 40px; padding-bottom: 70px; }
  .entry-content > p + .acc-group--bio { margin-top: -16px; }
  .acc--bio summary { padding: 18px 0; gap: 16px; }
  .acc--bio .acc-icon { width: 36px; height: 36px; }
  .acc--bio .acc-icon::before, .acc--bio .acc-icon::after { width: 15px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .team-card-photo { aspect-ratio: 3 / 4; }
  .team-card-name { margin-top: 10px; font-size: 17px; }
  .team-card-role { font-size: 14px; }
}

/* Contact frame (1920): title hero 480 tall; intro + 2x2 light office cards (x 255-929) left, navy form box
   652 wide (x 1018-1669) right; sand map band (1057 tall, map 1165 wide); white reviews band; slim #000066 footer.
   The Locations page reuses the same parts. */
/* Figma Contact hero is 480 tall with the title cap band at y 234-278, higher than the generic interior hero. */
@media (min-width: 761px) { .page-contact .page-hero { height: clamp(300px, 25vw, 480px); padding-bottom: clamp(16px, 4.85vw, 93px); } }

.contact-main { padding: 61px 0 82px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 675px) minmax(0, 652px); justify-content: space-between; gap: 56px; max-width: calc(1415px + 2 * var(--gutter)); }
.contact-copy { padding-top: 26px; }
.contact-copy .eyebrow { margin-bottom: 14px; line-height: 13px; }
/* Figma sets this title untracked with a 58px line pitch. */
.contact-title { max-width: 11.6em; margin-bottom: 25px; letter-spacing: 0; line-height: 1.16; }
.contact-lede { max-width: 630px; margin-bottom: 0; }
.contact-lede a { color: var(--blue); font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }
.contact-lede a:hover { color: var(--gold-dark); }
.contact-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 324px)); justify-content: space-between; gap: 17px 27px; margin-top: 32px; }

/* Light office card: 324x189, 1px #C4C4C4 border, navy state name, larger gold icons than the footer cards. */
.office--light { min-height: 189px; padding: 21px 20px 16px 24px; border-color: #c4c4c4; background: var(--white); color: var(--ink); }
.office--light .office-state { margin-bottom: 0; color: var(--navy); }
.office--light .office-line { gap: 7px; margin-top: 9px; }
.office--light .office-line + .office-line { margin-top: 13px; }
.office--light .office-line .i { width: 24px; height: 24px; margin-top: -1px; color: var(--gold-dark); } /* glyphs measure 18 (phone) and 14x20 (pin) like the Figma */
.office--light .office-line:hover span { text-decoration-color: var(--gold-dark); }

/* Form box: centered 35px title, 63px fields 554 wide, 180px message, 175x57 gold Submit. */
.contact-form-box { background: var(--navy); color: var(--white); padding: 63px 49px 53px; align-self: start; scroll-margin-top: calc(var(--header-h) + 16px); } /* #free-case-evaluation: clear of the pinned header */
.contact-form-box .lead-form-title { margin-bottom: 34px; letter-spacing: 0; }
.contact-form-box .lf-grid { gap: 10px; }
.contact-form-box .lf-field input { min-height: 63px; padding: 14px 27px; font-size: 17px; border: 0; }
.contact-form-box .lf-field textarea { min-height: 180px; padding: 19px 27px; font-size: 17px; border: 0; }
.contact-form-box .lf-field input::placeholder, .contact-form-box .lf-field textarea::placeholder { color: #767676; }
.contact-form-box .lf-consent { margin-top: 16px; }
.contact-form-box .lf-submit { width: 175px; min-height: 57px; margin-top: 24px; }

/* Figma desktop quirks, measured at 1920: the cards and form box sit 2px right of the copy's left edge, and
   the right-hand cards inset their text 9px more than the left-hand ones. */
@media (min-width: 1400px) {
  .contact-offices { margin-left: 2px; margin-right: -2px; }
  .contact-form-box { position: relative; left: 2px; padding-left: 55px; padding-right: 43px; } /* fields + title sit 6px right of center */
  .contact-form-box .lf-submit { position: relative; left: -6px; } /* ...but Submit is centered on the box */
  .contact-offices .office--light:nth-child(even) { padding-left: 33px; }
}

/* "Other Locations We Serve": Figma places the 959-unit Wikimedia map at 1.2152 px/unit with the lower 48
   centered, so the viewBox starts at -9 units and the figure is 1165px wide. */
.map-band { background: var(--sand); padding: 87px 0 132px; text-align: center; }
.map-band .container { max-width: calc(1165px + 2 * var(--gutter)); }
.map-title { margin-bottom: 57px; letter-spacing: 0; text-wrap: balance; }
.us-map { margin: 0 auto; max-width: 1165px; }
.us-map svg { width: 100%; height: auto; overflow: visible; }
.us-map .st { fill: var(--white); stroke: #a8a8a8; stroke-width: .75; stroke-linejoin: round; transition: fill .15s ease; }
.us-map .st-served { fill: var(--blue); stroke: #a8a8b8; }
.us-map .st-office { fill: var(--navy); stroke: #8a8aa0; }
.us-map .st-inset { stroke: none; } /* Alaska and Hawaii sit on the sand with no outline */
.us-map a:hover .st-served, .us-map a:focus-visible .st-served { fill: #1a1a85; }
.us-map a:hover .st-office, .us-map a:focus-visible .st-office { fill: #1c1c58; }
.us-map a:focus-visible { outline: none; }
.us-map a:focus-visible .st { stroke: var(--gold); stroke-width: 2; }
.us-map .map-sep { fill: none; stroke: #a1a1a1; stroke-width: 1.5; }
.us-map .map-pin { pointer-events: none; }
.map-states { display: none; }

/* Contact page tail: white reviews band (the slim #000066 footer is footer.css's site-footer--slim variant). */
.page-contact .reviews-band { background: var(--white); padding: 96px 0 149px; }

/* Locations page (not in the Figma): same hero, light office cards, the map band, then state tiles in the
   gray practice-area card style (CSS Sheet - Page 2) and the Kentucky practice list in the sidebar-list style. */
.locations-intro { padding: 50px 0 96px; }
.locations-head { display: grid; grid-template-columns: minmax(0, 880px) auto; justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: 44px; }
.locations-head h2 { margin-bottom: 18px; letter-spacing: 0; text-wrap: balance; }
.locations-head .eyebrow { margin-bottom: 14px; }
.locations-lede { margin: 0; }
.locations-head .btn { justify-self: start; margin-bottom: 8px; }
.locations-offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.office--panel { display: flex; flex-direction: column; }
.office-blurb { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e6e6e6; font-size: 15px; line-height: 1.6; }
.office-more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; color: var(--blue); font-weight: 700; font-size: 15px; line-height: 1.35; text-decoration: none; }
.office-more .i-arrow { flex: none; }
.office-more:hover { color: var(--gold-dark); }

.locations-states { padding: 96px 0 110px; }
.locations-states h2 { margin-bottom: 40px; letter-spacing: 0; text-wrap: balance; }
.state-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; }
/* Each tile is a card whose state-name link stretches over it, so the WordPress write-up can sit in the card
   without becoming part of the link text. */
.state-tile { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 150px; padding: 28px 24px 22px; background: #f8f8f8; color: var(--ink); }
.state-tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.state-tile:hover::after, .state-tile:focus-within::after { transform: scaleX(1); }
.state-tile-name { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--blue); }
.state-tile-link { color: inherit; text-decoration: none; }
.state-tile-link::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.state-tile-note { margin: 8px 0 0; font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.state-tile-blurb { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #e6e6e6; font-size: 15px; line-height: 1.6; }
.state-tile-arrow { margin-top: auto; padding-top: 14px; align-self: flex-end; color: var(--blue); }
.state-sub { margin-top: 72px; }
.state-sub h3 { margin-bottom: 18px; font-family: var(--sans); font-weight: 700; font-size: 25px; line-height: 1.2; color: var(--blue); text-transform: uppercase; letter-spacing: 0; }
.state-sub ul { columns: 3 280px; column-gap: 48px; list-style: none; }
.state-sub li { break-inside: avoid; border-bottom: 2px solid #dedee6; }
.state-sub a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 4px 12px 0; color: var(--ink); font-weight: 700; font-size: 17px; line-height: 1.35; text-decoration: none; }
.state-sub a .i-chevron { width: 10px; height: 16px; color: var(--blue); }
.state-sub a:hover { color: var(--gold-dark); }

/* Between the frames the copy column keeps at least ~590px so the longest office address ("250 W Main St,
   Ste. 2650,") stays on one line in its 2-up card. */
@media (max-width: 1399px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; }
  .contact-form-box { padding: 54px 40px 48px; }
}
@media (max-width: 1240px) {
  /* One column: the form comes right after the intro, the office cards after the form. */
  .contact-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .contact-copy { display: contents; }
  .contact-offices { order: 2; margin-top: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .contact-form-box { order: 1; width: 100%; margin-top: 36px; }
  .locations-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .map-band { padding: 72px 0 90px; }
  .map-title { margin-bottom: 40px; }
  .locations-head { grid-template-columns: minmax(0, 1fr); }
  .state-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .contact-main { padding: 44px 0 56px; }
  .contact-title { line-height: 1.2; margin-bottom: 22px; }
  .contact-offices, .locations-offices { grid-template-columns: minmax(0, 1fr); }
  .office--light { min-height: 0; }
  .office--light .office-line, .office--light .office-line + .office-line { margin-top: 0; padding: 10px 0; } /* 44px tap rows */
  .office--light .office-state { margin-bottom: 2px; }
  .office-more { min-height: 44px; }
  .contact-form-box { width: auto; padding: 40px 22px 44px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .contact-form-box .lead-form-title { font-size: 32px; margin-bottom: 24px; }
  .contact-form-box .lf-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form-box .lf-field input { min-height: 54px; padding: 12px 18px; font-size: 16px; }
  .contact-form-box .lf-field textarea { min-height: 150px; padding: 14px 18px; font-size: 16px; }
  .map-band { padding: 52px 0 56px; }
  .map-title { margin-bottom: 26px; }
  .us-map .map-sep { stroke-width: 2; }
  .map-states { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; list-style: none; }
  .map-states a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--white); color: var(--blue); font-weight: 600; font-size: 15px; text-decoration: none; }
  .map-states a.is-office { background: var(--navy); color: var(--white); } /* office states, as on the map */
  .page-contact .reviews-band { padding: 56px 0 72px; }
  .locations-intro { padding: 30px 0 56px; }
  .locations-states { padding: 56px 0 64px; }
  .state-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .state-tile { min-height: 0; padding: 20px 20px 18px; }
  .state-sub { margin-top: 48px; }
}

/* Blog cards (CSS Sheet - Page 2 "Blog post: thin border"): 339x434 at 1920, #F8F8F8 card with a 1px border in the
   same tone, photo 118 tall, Jakarta Bold 26/31 title (stems measure 4px, as 700) (3 lines), 17/29 excerpt, navy arrow bottom right.
   Blog index and category archives (three cards per row at the Figma card width), single posts in the interior
   layout, the Reviews page (CSS Sheet - Page 1 "Testimonial page") and the 404 page. */
.post-card { height: 100%; }
.post-card-link { display: flex; flex-direction: column; height: 100%; min-height: 434px; background: #f8f8f8; border: 1px solid #f8f8f8; color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
.post-card-img { display: block; height: 118px; overflow: hidden; background: #dcdce6; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 33px 23px 27px 31px; }
.post-card-title { margin: 0 0 15px; font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 31px; color: var(--ink); text-transform: none; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-excerpt { max-width: 260px; font-size: 17px; line-height: 29px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-arrow { margin-top: auto; padding-top: 14px; align-self: flex-end; color: var(--blue); }
.post-card-arrow .i-arrow { width: 25px; height: 16px; }
.post-card-arrow path { stroke-width: 1.7; }
/* Video card (CSS Sheet - Page 2 "Video/Podcast"): 48px gold play disc on the photo, title only. The photo keeps the
   blog-card height so mixed rows line up. */
.post-card--video .post-card-img { position: relative; }
.post-card-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--gold); color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.post-card-play .i-play { width: 22px; height: 22px; margin-left: 3px; }
.post-card-link:hover .post-card-play { transform: scale(1.08); }
.post-card-link:hover { border-color: #c4c4c4; }
.post-card-link:hover .post-card-img img { transform: scale(1.04); }
.post-card-link:hover .post-card-title { color: var(--blue); }
.post-card-link:hover .post-card-arrow { color: var(--gold-dark); }

/* Blog index: cards at the Figma width (3 x 339 + 2 x 18). */
.blog-body { max-width: calc(1053px + 2 * var(--gutter)); padding-top: 50px; padding-bottom: 110px; }
.blog-head { margin-bottom: 34px; }
.blog-head h2 { margin-bottom: 14px; letter-spacing: 0; }
.blog-head .eyebrow { margin-bottom: 14px; }
.blog-lede { max-width: 880px; margin: 0; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 40px; }
.blog-cats a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--blue); color: var(--blue); text-decoration: none; font-weight: 700; font-size: 15px; transition: background-color .15s ease, color .15s ease; }
.blog-cats a[aria-current], .blog-cats a:hover { background: var(--blue); color: var(--white); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* Single post: interior layout, small gold meta line, photo cropped to 16:9. */
.page-hero--post .page-title { max-width: 1180px; font-size: clamp(32px, 1.6vw + 18px, 50px); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: -6px 0 24px; font-weight: 800; font-size: 15px; line-height: 21px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); }
.post-meta a { color: var(--gold-dark); text-decoration: none; }
.post-meta a:hover { color: var(--blue); }
.post-meta .sep { margin: 0 10px; color: var(--neutral); }
/* Categories: a separator after the date, then each name carries its own trailing separator, so a wrapped line
   never starts on a bare pipe. */
.post-cats { display: inline-flex; flex-wrap: wrap; align-items: center; }
.post-cats::before { content: '|'; margin: 0 10px; color: var(--neutral); }
.post-cat { white-space: nowrap; }
/* Long post titles run to four lines at 1920; keep them clear of the overlay header. */
@media (min-width: 1101px) { .page-hero--post { padding-top: calc(var(--header-h) + 20px); } }
.post-hero-img { margin: 0 0 36px; }
.post-hero-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-more { margin-top: 48px; padding-top: 28px; border-top: 2px solid #e6e6e6; }

/* Related posts reuse the homepage "Get Some Insight" band (home-1920: #060626, eyebrow 119px down, title 38px
   above the cards, a full-size 236px gold button 16px under them, 99px to the band bottom). */
.related-posts { background: #060626; color: var(--white); padding: clamp(99px, 2.5vw + 67px, 115px) 0 clamp(99px, 144px - 2.34vw, 114px); } /* home-1280 sits it 16px higher */
.related-posts .container { max-width: calc(1054px + 2 * var(--gutter)); }
.related-posts .eyebrow { margin-bottom: 7px; font-size: 17px; }
.related-posts h2 { color: var(--white); margin-bottom: 38px; letter-spacing: 0; font-size: clamp(34px, 2.6vw + 17px, 50px); } /* 50px down to 1280, as on the homepage */
.related-posts .btn-row { display: flex; justify-content: flex-end; margin: 16px 0 0; }
.related-posts .btn-row .btn { width: 236px; }

/* Reviews page: interior layout; each review in the CSS Sheet testimonial style (gold 22px stars, 17/170% body,
   H5 name) between 2px #E6E6E6 rules. */
.reviews-head h2 { margin-bottom: 14px; letter-spacing: 0; }
.reviews-head .eyebrow { margin-bottom: 14px; }
.reviews-list { margin-top: 30px; border-top: 2px solid #e6e6e6; }
.testimonial { margin: 0; padding: 40px 0 25px; border-bottom: 2px solid #e6e6e6; scroll-margin-top: 150px; }
.testimonial .stars { display: flex; gap: 0; color: var(--gold-dark); margin: 0 0 12px -2px; }
.testimonial .stars .i-star { max-width: none; width: 26.5px; height: 26.5px; margin-right: -2.25px; } /* the path fills 20 of 24 units: 22px glyphs on a 24.25px pitch */
.testimonial p { max-width: 660px; margin: 0 0 13px; font-size: var(--fs-body); line-height: 1.7; }
.testimonial footer { font-weight: 800; font-size: var(--fs-h5); line-height: 21px; text-transform: uppercase; letter-spacing: .1em; }
.testimonial:target { background: linear-gradient(90deg, rgba(246, 199, 0, .12), transparent 70%); }
.reviews-cta { margin-top: 44px; }

.blog-body .pager a { min-height: 44px; } /* phone tap target */

/* 404 */
.notfound-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 28px; }
.page-404 .entry-content a[href^="tel:"] { white-space: nowrap; }

/* Headings in these templates wrap evenly instead of leaving one word on the last line on phones. */
.blog-head h2, .reviews-head h2, .page-404 .entry-content h2, .related-posts h2 { text-wrap: balance; }

@media (max-width: 1100px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card-excerpt { max-width: none; }
}
@media (max-width: 760px) {
  .blog-body { padding: 30px max(var(--gutter), calc((100% - 339px) / 2)) 70px; } /* one 339px column, heading and chips aligned to the cards */
  /* The 430 frame keeps the desktop card (339 wide, 118px photo, 26/31 title), one per row, centered. */
  .post-grid { grid-template-columns: minmax(0, 339px); justify-content: center; }
  .post-card-link { min-height: 0; }
  .post-card-excerpt { max-width: 260px; }
  .related-posts { padding: 60px 0 64px; }
  .related-posts .container { padding: 0 max(var(--gutter), calc((100% - 339px) / 2)); }
  .related-posts h2 { font-size: clamp(32px, 9.3vw, 40px); }
  .related-posts .btn-row { justify-content: center; margin-top: 32px; }
  .testimonial { padding: 30px 0 24px; }
  .post-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Phones: date on its own line, categories under it. */
  .post-meta time { flex-basis: 100%; }
  .post-cats { gap: 0 20px; }
  .post-cats::before, .post-cat .sep { display: none; }
}

/* Reviews page: the Google line under the heading, and the G and office after each name. */
.reviews-google { display: flex; align-items: flex-start; gap: 10px; max-width: 660px; margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.reviews-google .i-google { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.reviews-google a { color: var(--gold-dark); font-weight: 600; }
.testimonial footer .review-via { margin-top: 6px; }

/* Background videos (partials.mjs bgVideo, site.js). The poster fills its box; the clip fades in over it once it
   plays. Each section that shows clips has a small "Dramatization" label and a pause button in one corner. Loaded
   last, so the photo rules of the boxes the clips replaced (fixed widths, Figma zooms) are reset here. */
.bg-video { position: absolute; inset: 0; overflow: hidden; background: var(--navy); }
/* two classes deep, to win over the ".box img" rules of the photos these replaced */
.bg-video > .bg-video-poster, .bg-video > .bg-video-el { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: var(--focus, 50% 50%); transform: none; }
.bg-video > .bg-video-el { opacity: 0; transition: opacity .9s ease; }
.bg-video.is-playing > .bg-video-el { opacity: 1; }

.video-controls { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.video-note { padding: 3px 8px 2px; border-radius: 3px; background: rgba(0, 0, 25, .6); color: rgba(255, 255, 255, .94); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.video-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; background: rgba(0, 0, 25, .5); color: var(--white); cursor: pointer; }
.video-toggle[hidden] { display: none; }
.video-toggle:hover { background: rgba(0, 0, 25, .75); }
.video-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.video-toggle .i { display: block; width: 14px; height: 14px; }
.video-toggle-play, .video-toggle[aria-pressed="true"] .video-toggle-pause { display: none; }
.video-toggle[aria-pressed="true"] .video-toggle-play { display: block; }

/* Hero reel: same box and fade as the photo it replaced; heads sit high in every shot. */
.home-hero-img { --focus: 50% 4.6%; }
/* Bottom right of the reel (Bart, 10/22), 14px above the stats box: the title (two lines at line-height 1.018),
   the keyword line (9px + 1.25 line) and the row's 56px top margin less the box's 17px pull, from --hero-top. */
.video-controls--hero { top: calc(var(--hero-top) + 2.036 * clamp(52px, 8.75vw, 112px) + 1.25 * clamp(20px, 2.03vw, 26px) - 2px); right: var(--gutter); }

/* Better Call Bart: the clip fills the band left of the copy and fades into the #000066 band on its right. */
.home-bart-photo.home-bart-video { left: 0; top: 0; bottom: 0; width: calc(50% - 126px); --focus: 50% 40%;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.home-bart-video .bg-video { background: transparent; }
.video-controls--bart { left: 22px; bottom: 22px; }

/* We'll Take It From Here: the team clip spans the band and fades out into its navy-to-#000066 gradient. */
.home-team-photo.home-team-video { left: 0; width: 100%; height: 100%; --focus: 50% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .45) 78%, transparent 97%); mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .45) 78%, transparent 97%); }
.home-team-video .bg-video { background: transparent; }
.video-controls--team { top: 22px; right: var(--gutter); }

/* Let's Talk: the clip takes the skyline's panel (no Figma zoom). */
.home-talk-photo { --focus: 50% 35%; }
.video-controls--talk { left: 18px; bottom: 18px; }

/* Interior title bands on a clip: a lighter, even shade than the city photo's multiply so faces read. */
.page-hero-video { z-index: -2; }
.page-hero--video::before { background: linear-gradient(180deg, rgba(4, 4, 44, .58), rgba(4, 4, 44, .72)); mix-blend-mode: normal; }
.page-hero--video::after { background: none; }
.page-hero-video { --focus: 50% 28%; }
.video-controls--page { right: var(--gutter); bottom: 14px; }

@media (max-width: 1100px) {
  /* the button stacks over a full-width stats box here: 14px above the box, level with the button */
  .video-controls--hero { top: calc(var(--hero-top) + 2.036 * clamp(52px, 8.75vw, 112px) + 1.25 * clamp(20px, 2.03vw, 26px) + 95px); }
  /* copy first, then the clip under it, fading in from the copy */
  .home-bart-photo.home-bart-video { position: relative; left: auto; top: auto; bottom: auto; width: 100%; aspect-ratio: 16 / 10; margin: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%); mask-image: linear-gradient(180deg, transparent, #000 16%); }
  .home-team-photo.home-team-video { left: 0; width: 100%; height: 59vw; }
}
@media (max-width: 900px) {
  .home-talk-photo { --focus: 50% 30%; }
}
@media (max-width: 760px) {
  .home-team-photo.home-team-video { left: 0; width: 100%; height: 71vw; --focus: 50% 25%; }
  .home-bart-photo.home-bart-video { aspect-ratio: 4 / 3; }
  .video-controls { gap: 8px; }
  /* phones show the reel above the title: its bottom right is 12px over the title, at most 200px down (below
     that the clip has faded to navy) */
  .video-controls--hero { top: min(calc(var(--hero-top) - 48px), 200px); }
  .video-controls--team { top: 12px; }
  .video-controls--page { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-video > .bg-video-el { transition: none; }
}

/* Consultation banner on practice pages: a still of the four from the team clip, right of the copy, fading in from
   the banner's navy (the cut-out group photo it replaces had a departed attorney in it). */
.cta-banner .cta-banner-photo--still { --w: auto; top: 0; right: 0; bottom: 0; width: min(62%, 100cqw - 330px); height: 100%; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
@media (max-width: 760px) {
  .cta-banner .cta-banner-photo--still { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 18px 0 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%); mask-image: linear-gradient(180deg, transparent, #000 28%); }
}

/* Title-band pictures (headers.mjs): fill the band at the picture's crop point under the same even shade as the
   clips. Bios get the same treatment in their taller band. */
.page-hero-still, .bio-hero .bio-hero-still { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; margin: 0; transform: none; object-fit: cover; object-position: var(--focus, 50% 50%); }
.page-hero--still::before { background: linear-gradient(180deg, rgba(4, 4, 44, .58), rgba(4, 4, 44, .72)); mix-blend-mode: normal; }
.page-hero--still::after { background: none; }
.bio-hero--still::after { background: linear-gradient(180deg, rgba(4, 4, 44, .62), rgba(4, 4, 44, .8)); mix-blend-mode: normal; }