/* Shapiro Law Offices — redesign built to the mad4justice.com visual system.
   Original CSS authored against measured reference values (fonts, sizes,
   spacing, colors). Reference decorative imagery (sprites/patterns/photos)
   is licensed to the reference site, so those slots are CSS-drawn or
   labeled placeholders awaiting real Shapiro assets. */


:root {
  --maroon: #003a66;
  --maroon-bright: #1c8de0;
  --red-text: #005291;
  --red-accent: #1c8de0;
  --red-nav-hover: #aee0ff;
  --red-grad: linear-gradient(90deg, #005291 0%, #1c8de0 50%, #005291 100%);
  --ink-heading: #011828;
  --near-black: #151515;
  --page-dark: #131313;
  --card-grey: #f5f5f5;
  --line-grey: #c9ced1;
  --white: #fff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Decoration must never eat a tap ----------------------------------------
   Every pseudo-element below is a drawn accent — a bracket, a rule, a tinted
   panel behind a photo. Several are sized in percentages and grow to overlap
   real buttons once the layout stacks on a phone, and because they paint after
   their sibling content they win the hit test. Listing them here keeps the
   whole decorative layer transparent to pointers in one reviewable place. */
.ph-slot::before,
.hm-bnr-rgt p::before, .hm-bnr-rgt p::after,
.hm-consultation-blk p::before, .hm-consultation-blk p::after,
.hm-case-results-rgt::after,
.hm-case-results-item::after,
.hm-case-results-item h3::before,
.hm-premier-lft::before,
.hm-practice-itm::before,
.hm-attorney-cntnt::before,
.hm-attorney-blk::after,
.hm-why-choose-item h5::after,
.hm-testi-lft::after,
.testi-item::before,
.hm-award-img::before,
#main-navigation ul li a:hover::before,
#main-navigation ul li a.current::before { pointer-events: none; }
html {
  scroll-behavior: smooth;
  background: #0d1218; /* shows in the overscroll bounce areas instead of white */
  overscroll-behavior-y: none;
}
body {
  font-family: 'Asta Sans', 'Work Sans', Arial, sans-serif;
  font-weight: normal;
  background: #fff;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, iframe { max-width: 100%; border: none; vertical-align: middle; }
a { font-family: inherit; color: inherit; text-decoration: none; transition: 0.5s; }
ul, ol, li { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Staatliches', sans-serif; font-weight: 400; margin: 0 0 20px; }
p { font-family: 'Asta Sans', sans-serif; margin: 0 0 10px; }

.container { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 40px; }
.container.narrow { max-width: 1280px; }
.site-header .container,
.hm-banner-sec .container,
.hm-case-results-sec .container,
.hm-premier-sec .container,
.hm-practice-areas-sec .container { max-width: 1700px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Big display heading */
.text-heading {
  font-size: 85px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.5px;
  color: var(--ink-heading);
  text-transform: uppercase;
  margin: 0 0 40px;
  /* This display type is heavily tracked-out, so a phrase a few characters
     longer than its English source (routine in Spanish) easily wraps one word
     past where the English version did, stranding it alone on its own line —
     "PLLC", "COMPROBADOS", "PERSONALES" hanging by themselves. balance spreads
     an already-wrapping heading evenly across its lines instead of leaving a
     ragged last line; a heading that fits on one line is untouched either way.
     Text-wrap:balance is line-breaking only — it does not affect a hard <br>,
     so the two-line award badges that use one on purpose are unaffected. */
  text-wrap: balance;
}
.text-heading strong { font-weight: 400; color: var(--red-text); }

/* Common button */
a.cmn-btn {
  font-size: 20px;
  font-weight: 800;
  font-family: 'Asta Sans', sans-serif;
  line-height: 1;
  letter-spacing: 0;
  display: inline-block;
  padding: 25px 46px;
  background: var(--red-grad);
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  transition: 0.5s;
}
a.cmn-btn:hover { background: #003a66; }
a.cmn-btn.outline {
  background: transparent;
  border: 1px solid #fff;
  padding: 23px 46px;
}
a.cmn-btn.outline:hover { background: #003a66; border-color: transparent; }

/* Neutral image placeholder slots (real photography pending) */
.ph-slot {
  position: relative;
  width: 100%;
  background:
    linear-gradient(145deg, #1d2733 0%, #10161d 60%, #0b1016 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.ph-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px);
}
.ph-slot span {
  position: relative;
  font-family: 'Asta Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 14px;
  text-align: center;
}
.ph-slot.light {
  background: linear-gradient(145deg, #e7e9ec 0%, #d5d9de 100%);
}
.ph-slot.light span { color: rgba(0,0,0,0.4); }
.ph-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.ph-slot.has-img::before { display: none; }

/* ============ HEADER ============ */
.site-header {
  width: 100%;
  padding: 20px 0 10px;
  position: absolute;
  z-index: 99;
  transition: opacity 0.3s ease;
}
/* nowrap is load-bearing for Spanish: "Llame para una Consulta Gratis" + the
   longer nav labels ("Nuestros Abogados", "Áreas de Práctica") are wider than
   the English cluster they replace. With wrap enabled, the entire right header
   dropped under the logo at every desktop width — English stayed on one row,
   Spanish always broke. Compress the right cluster instead of wrapping it. */
.logo-section { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 20px; }
.site-logo { display: block; flex: 0 0 auto; }
/* Jason, 2026-08-26: "the firm name should align top and bottom (see current
   website) and should be consistent throughout." The lockup is one inline SVG
   in every header and footer: textLength justifies SHAPIRO and LAW OFFICES,
   flush at both edges with PLLC hung off the right end — the geometry of the
   current site's logo.png — and it holds regardless of font-loading state. */
/* type sized so the glyphs themselves nearly fill the 280-unit measure —
   textLength then only trues the edges instead of gap-filling with tracking,
   which is what kept SHAPIRO from reading as a word */
.logo-lockup { display: block; width: 254px; height: auto; overflow: visible; }
.logo-lockup text { font-family: 'Staatliches', sans-serif; font-weight: 400; }
.logo-lockup .ll-1 { font-size: 82px; fill: #fff; }
/* both lines span the same 280-unit measure, like the original logo.png;
   the grey ", PLLC" hangs off the right edge beyond it */
.logo-lockup .ll-2 { font-size: 62px; fill: var(--red-accent); }
.logo-lockup .ll-3 { font-size: 15px; fill: rgba(255, 255, 255, 0.6); }
.site-logo .logo-sub {
  display: block;
  margin-top: 9px;
  font-family: 'Asta Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  /* 5px (was 6.5) — "LESIONES PERSONALES · BRONX, NY" is wider than the
     English tagline and was contributing to the Spanish header overflow */
  letter-spacing: 5px;
  color: #fff;
  text-transform: uppercase;
  margin-top: 6px;
}
/* (2026-08-20 two-line text lockup replaced by the SVG lockup above,
   2026-08-26 — comma kept, PLLC on the baseline, header == footer.) */
.header-rit { gap: 23px; display: flex; flex-direction: column; padding-top: 10px; align-items: flex-end; flex: 1 1 auto; min-width: 0; }
.header-number { color: #fff; display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.header-number p { font-size: 19px; font-family: 'Asta Sans', sans-serif; font-weight: 300; line-height: 1; margin: 0; color: #fff; }
.hdr-cntct-cal { display: flex; padding: 0; align-items: center; gap: 14px; margin-right: 16px; flex-shrink: 0; }
.header-number .hdr-call {
  font-size: 35px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2.1px;
  color: var(--red-accent);
  display: inline-block;
  position: relative;
  padding: 0 0 0 39px;
}
.header-number .hdr-call::before {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  left: 0; top: 3px;
  border: 2px solid var(--red-accent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, var(--red-accent) 0 3px, transparent 3px);
}
.header-number .hdr-call:hover { color: #fff; }
#main-navigation ul {
  margin: 0;
  text-align: end;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
/* 22px side padding via margin — tighter than the old 36 so Spanish labels
   ("Nuestros Abogados", "Áreas de Práctica") + the language pill stay on one row */
#main-navigation ul li { display: block; position: relative; margin: 0 0 0 22px; flex-shrink: 0; }
#main-navigation ul li:first-child { margin-left: 0; }
#main-navigation ul li:last-child { margin-right: 0; }
/* Spanish strings are longer; shave a little more so the pill never wraps under */
:lang(es) #main-navigation ul li { margin-left: 14px; }
:lang(es) #main-navigation ul li:first-child { margin-left: 0; }
:lang(es) #main-navigation ul li a { font-size: 17px; letter-spacing: 0.2px; }
:lang(es) #main-navigation ul li.lang-switch { margin-left: 12px; }
:lang(es) #main-navigation ul li.lang-switch a { padding: 10px 14px; letter-spacing: 1.2px; }
#main-navigation ul li a {
  font-size: 19px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.38px;
  line-height: 1;
  color: #fff;
  padding: 0 0 28px;
  display: inline-block;
}
#main-navigation ul li a:hover,
#main-navigation ul li a.current { color: var(--red-nav-hover); }
#main-navigation ul li a:hover::before,
#main-navigation ul li a.current::before {
  content: "\2726";
  position: absolute;
  font-size: 15px;
  color: var(--red-nav-hover);
  right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 17px; height: 16px;
  line-height: 1;
  text-align: center;
}
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; font-size: 26px; padding: 6px 14px; cursor: pointer; }
.site-header.is-sticky {
  top: 0; right: 0; left: 0;
  z-index: 999;
  position: fixed;
  background: #000;
  animation: slideDown 0.35s ease-out;
  padding: 14px 0 0;
}
.site-header.is-sticky #main-navigation ul li a { padding-bottom: 18px; }
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.hdr-esp { padding-left: 16px; border-left: 1px solid #9b9da1; margin-right: 16px; flex-shrink: 0; }
.hdr-esp p {
  font-size: 17px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--red-accent);
  margin: 0;
  white-space: nowrap;
}
.hdr-scl-icns { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid #9b9da1; flex-shrink: 0; }
.hdr-scl-icns p { font-size: 16px; font-family: 'Asta Sans', sans-serif; font-weight: 300; color: #fff; margin: 0; }
.hdr-scl-icns a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Asta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.hdr-scl-icns a:hover { background: var(--red-accent); border-color: var(--red-accent); }

/* ============ HERO BANNER ============ */
/* Hero backdrop. Was a Manhattan-at-night stock skyline — wrong borough for a
   Bronx firm and exactly the "generic photo" the client said does nothing. It
   is now the Bronx County Courthouse: a real Bronx legal landmark, the building
   this firm actually litigates in, and an answer to his "more legal" note.
   Still stock scenery, so it is a candidate for replacement by the August
   shoot; the Grand Concourse streetscape (images/bronx-skyline.jpg — the firm's
   own street) is the ready alternative if he prefers it. */
/* Jason, 2026-08-20: he could not tell what the backdrop was — "it almost looks
   like a tire". It was the courthouse corner buried under a heavy radial wash.
   Same photograph, read differently: framed on the colonnade rather than the
   corner, lifted in contrast, and the darkening moved to a bottom-weighted
   gradient so the building stays recognisable while the headline keeps its
   contrast. */
.hm-banner-sec {
  padding: 175px 0 0;
  position: relative;
  /* navy duotone over the courthouse: one blue world shared by the scene and
     the award photo's step-and-repeat, instead of grey clouds fighting it */
  background:
    linear-gradient(102deg, rgba(5,13,23,0.96) 0%, rgba(7,18,32,0.86) 38%, rgba(8,21,37,0.55) 74%, rgba(10,26,45,0.38) 100%),
    linear-gradient(180deg, rgba(0,58,102,0.4) 0%, rgba(0,30,56,0.52) 100%),
    url('../images/bronx-courthouse.jpg') center 62% / cover no-repeat,
    linear-gradient(180deg, #14202e 0%, #0c141d 55%, #0a1016 100%);
}
.hm-banner-sec::before {
  content: "";
  position: absolute; inset: 0;
  background: url('../images/bronx-courthouse.jpg') center 62% / cover no-repeat;
  filter: contrast(1.12) saturate(0.72) brightness(0.94);
  opacity: 0.26;
  pointer-events: none;
}
.hm-banner-sec::after {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 100%);
  pointer-events: none;
}
.hm-bnr-blk { display: flex; align-items: flex-start; gap: 60px; position: relative; z-index: 1; }
.hm-bnr-lft { width: 37.4%; margin: 0; padding: 40px 0 70px 60px; }
.hm-bnr-lft .ph-slot { aspect-ratio: 545 / 736; }
/* ---- the exhibit: the award photo presented as a mounted, captioned record —
   a document gets a frame, not a feathered edge ---- */
.hero-exhibit { position: relative; margin: 0; max-width: 460px; }
.hero-exhibit img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(174, 224, 255, 0.3);
  box-shadow: 0 36px 70px rgba(0, 0, 0, 0.55), 0 8px 22px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}
.hero-exhibit::before {
  content: "";
  position: absolute;
  inset: 20px -16px -16px 20px;
  border: 2px solid rgba(28, 141, 224, 0.42);
  pointer-events: none;
}
/* caption plate: mounted over the photo's bottom-left corner like a museum
   label, so the record names itself */
.hero-exhibit figcaption {
  position: absolute;
  left: -16px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  max-width: calc(100% - 8px);
  background: rgba(6, 15, 26, 0.94);
  border: 1px solid rgba(28, 141, 224, 0.45);
  border-left: 3px solid var(--red-accent);
  padding: 10px 18px 11px 14px;
  font-family: 'Asta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #aee0ff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.hero-exhibit figcaption strong {
  font-family: 'Staatliches', sans-serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #fff;
  line-height: 1;
}
.hero-exhibit figcaption em { font-style: normal; color: rgba(174, 224, 255, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .hero-exhibit { animation: exhibit-in 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  @keyframes exhibit-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
  }
}
/* Jason 2026-08-26: the portrait "looks like a box copied and pasted on top of
   a photo". Drop the slot's own card background and feather the portrait's
   top and sides into the banner scene; the bottom stays solid where the
   section edge crops him, like a person standing in the frame. */
.hm-bnr-lft .ph-slot.has-img { background: none; overflow: visible; }
.hm-bnr-lft .ph-slot.has-img img {
  -webkit-mask-image: radial-gradient(66% 120% at 50% 72%,
      #000 42%, rgba(0, 0, 0, 0.85) 60%, transparent 90%);
  mask-image: radial-gradient(66% 120% at 50% 72%,
      #000 42%, rgba(0, 0, 0, 0.85) 60%, transparent 90%);
  filter: saturate(0.92) brightness(0.97);
}
.hm-bnr-rgt { width: 58.1%; text-align: left; padding: 120px 0 80px 50px; position: relative; }
/* hero uses a single accent rule, not the corner brackets (kept elsewhere) */
.hm-bnr-rgt::before {
  width: 3px !important; height: auto !important;
  left: 0 !important; right: auto !important; top: 138px !important; bottom: 96px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #1c8de0 0%, rgba(28, 141, 224, 0.5) 45%, rgba(28, 141, 224, 0.04) 100%);
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.hm-bnr-rgt::after { content: none; }
/* The four corner brackets below are pure decoration. They are 190px boxes that
   overlap the CTA on narrow screens, so they MUST stay transparent to taps —
   without pointer-events:none they swallow the "Book Your Free Consultation"
   click on mobile. Same rule as .hm-banner-sec::after above. */
.hm-bnr-rgt::before,
.hm-consultation-blk::before {
  content: "";
  position: absolute;
  width: 190px; height: 190px;
  right: 0; bottom: 0;
  border-right: 3px solid rgba(10,80,140,0.85);
  border-bottom: 3px solid rgba(10,80,140,0.85);
  -webkit-mask-image: linear-gradient(to bottom right, transparent 55%, #000 100%);
  mask-image: linear-gradient(to bottom right, transparent 55%, #000 100%);
  pointer-events: none;
}
.hm-bnr-rgt::after,
.hm-consultation-blk::after {
  content: "";
  position: absolute;
  width: 190px; height: 190px;
  left: 20px; top: 133px;
  border-left: 3px solid rgba(10,80,140,0.85);
  border-top: 3px solid rgba(10,80,140,0.85);
  -webkit-mask-image: linear-gradient(to top left, transparent 55%, #000 100%);
  mask-image: linear-gradient(to top left, transparent 55%, #000 100%);
  pointer-events: none;
}
.hm-bnr-rgt h1 {
  font-size: 160px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 12.8px;
  background: var(--red-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}
.hm-bnr-rgt h1 strong {
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 15px;
  display: block;
  background: linear-gradient(to right, #fff 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* the Spanish tagline is routinely longer than the English one it replaces
     (e.g. "Abogado de Lesiones Personales" vs "Personal Injury Attorney") —
     balance is what keeps a longer translation from stranding its last word */
  text-wrap: balance;
}
.hm-bnr-rgt p {
  font-size: 30px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 9px;
  color: #fff;
  margin-bottom: 48px;
  display: inline-block;
  position: relative;
  padding: 0 25px;
}
.hm-bnr-rgt p::before, .hm-bnr-rgt p::after,
.hm-consultation-blk p::before, .hm-consultation-blk p::after {
  content: "";
  position: absolute;
  width: 11px; height: 30px;
  left: 0; top: 0; bottom: 0;
  margin: auto;
  border-left: 3px solid var(--red-accent);
  transform: skewX(-14deg);
  pointer-events: none; /* slash marks must never steal taps from the CTA below */
}
.hm-bnr-rgt p::after, .hm-consultation-blk p::after { left: inherit; right: 0; border-left: 0; border-right: 3px solid var(--red-accent); transform: skewX(14deg); }
.hm-bnr-btn a.cmn-btn { padding: 23px 36px; }

/* iPhone / touch: keep consultation CTAs above every decorative layer.
   Jason reported "Book your free consultation" doing nothing on his phone —
   overlays with pointer-events were the prior theory; these rules make the
   tap target explicit and kill the old 300ms tap delay. */
.hm-bnr-btn,
.hm-booking-btn,
.hm-call-btn {
  position: relative;
  z-index: 10;
}
.hm-bnr-btn a.cmn-btn,
.hm-booking-btn a.cmn-btn,
.hm-call-btn a.cmn-btn,
a.cmn-btn {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(28, 141, 224, 0.35);
  cursor: pointer;
}
.hm-bnr-esp {
  font-family: 'Staatliches', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #fff;
  margin: 30px 0 0;
  position: relative;
  z-index: 1;
}
.hm-bnr-esp::before, .hm-bnr-esp::after { display: none; }

/* ============ SCROLLING TICKER ============ */
.hm-scrolling-sec {
  overflow: hidden;
  padding: 22px 0;
  background: var(--red-grad);
}
.hm-scrolling-sec .container { max-width: none; padding: 0; }
.hm-scrolling-sec ul {
  animation: scrollText 40s infinite linear;
  margin: 0;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hm-scrolling-sec ul:hover { animation-play-state: paused; }
.hm-scrolling-sec ul li { margin: 0; padding: 0 100px; position: relative; line-height: 1; white-space: nowrap; display: inline-block; }
.hm-scrolling-sec ul li::before {
  content: "\25B8";
  position: absolute;
  font-size: 18px;
  color: #00223d;
  width: 17px; height: 18px;
  line-height: 1;
  top: 0; bottom: 0; left: 0;
  margin: auto;
}
.hm-scrolling-sec ul li a {
  font-size: 25px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
  display: inline-block;
}
.hm-scrolling-sec ul li a:hover { color: #000; }
@keyframes scrollText {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

/* ============ CASE RESULTS ============ */
.hm-case-results-sec { padding: 138px 0 190px; }
.hm-case-results-blk {
  display: flex;
  justify-content: flex-end;
  gap: 55px;
  width: 100%;
  margin: 0 auto 76px;
  max-width: 1500px;
}
.hm-case-results-lft { width: 47.1%; }
.hm-case-results-lft h2 { letter-spacing: 0; }
.hm-case-results-lft h2 strong { display: block; }
.hm-case-results-rgt { width: 42.2%; position: relative; }
.hm-case-results-rgt .ph-slot { aspect-ratio: 633 / 343; position: relative; z-index: 1; }
.hm-case-results-rgt::after {
  content: "";
  position: absolute;
  width: 80%; height: 74%;
  top: -20px; right: -30px;
  background: repeating-linear-gradient(90deg, rgba(0,82,145,0.16) 0 2px, transparent 2px 12px);
  z-index: 0;
}
.hm-case-results-list {
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  align-items: stretch;
}
.strip-nav { display: flex; justify-content: center; gap: 25px; margin-top: 45px; }
.strip-nav button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Asta Sans', sans-serif;
  font-size: 26px;
  color: #000;
  line-height: 1;
  padding: 4px 10px;
  transition: 0.5s;
}
.strip-nav button:hover { color: var(--maroon); }
.hm-case-results-item {
  padding: 30px 10px 60px;
  text-align: center;
  background: linear-gradient(180deg, #fbfbfb 0%, #eef0f2 100%);
  border: 1px solid var(--line-grey);
  border-radius: 130px 130px 10px 10px;
  transition: 0.5s;
  position: relative;
  margin-top: 35px;
}
.hm-case-results-item::after {
  content: "";
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: var(--line-grey);
  left: 0; right: 0; bottom: -20px;
  margin: auto;
  transition: 0.5s;
}
.hm-case-results-item:hover::after { background-color: var(--maroon); }
.hm-case-results-item .case-icon {
  position: absolute;
  width: 70px; height: 70px;
  left: 0; right: 0; top: -35px;
  margin: auto;
  color: #6b7580;
  background: radial-gradient(circle, #fff 0%, #e8ebee 100%);
  border: 1px solid var(--line-grey);
  border-radius: 50%;
  padding: 14px;
  transition: 0.5s;
}
.hm-case-results-item:hover .case-icon { color: var(--maroon); }
.hm-case-results-item h3 {
  font-size: clamp(34px, 3vw, 46px);
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--ink-heading);
  position: relative;
  padding: 60px 0 16px;
  margin: 0;
  transition: 0.5s;
}
.hm-case-results-item h3 sup { font-size: 0.55em; top: -0.5em; position: relative; }
.hm-case-results-item h3::before {
  content: "";
  position: absolute;
  width: 50px; height: 2px;
  background-color: var(--line-grey);
  left: 0; right: 0; bottom: 0;
  margin: auto;
}
.hm-case-results-item:hover { box-shadow: rgba(0,82,145,0.25) 0 10px 35px; }
.hm-case-results-item:hover h3 { color: var(--red-text); }
.hm-case-info { padding: 16px 8px 0; }
.hm-case-info p {
  font-size: 22px;
  font-family: 'Staatliches', sans-serif;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 3.08px;
  color: #000;
  margin: 0;
}
.hm-case-info .case-name {
  display: block;
  font-family: 'Asta Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #5b6270;
  margin-top: 8px;
  text-transform: none;
}

/* ============ PREMIER ============ */
.hm-premier-sec { padding: 0 0 160px; }
.hm-premier-blk { display: flex; justify-content: flex-start; align-items: flex-start; gap: 110px; }
.hm-premier-lft { width: 47.1%; position: relative; }
.hm-premier-lft .ph-slot { aspect-ratio: 800 / 547; position: relative; z-index: 1; }
/* the Top Lawyers award photo is portrait: aim the landscape crop at the
   faces and the trophy, not the banner above them */
.hm-premier-lft .ph-slot img { object-position: center 35%; }
.hm-premier-lft::before {
  content: "";
  position: absolute;
  width: 62%; height: 84%;
  bottom: -24px; right: -24px;
  background: repeating-linear-gradient(90deg, rgba(0,82,145,0.16) 0 2px, transparent 2px 12px);
  z-index: 0;
}
.hm-premier-rgt { width: 34.2%; margin: -10px 0 0; }
.hm-premier-rgt h2 { letter-spacing: 0.1px; margin: 0 0 28px; }
.hm-premier-rgt h2 strong { display: block; }
.hm-premier-rgt h5 { font-size: 35px; font-family: 'Staatliches', sans-serif; line-height: 1.2; letter-spacing: 0; color: #000; font-weight: 400; margin-bottom: 12px; }
.hm-premier-rgt p { font-size: 20px; font-family: 'Asta Sans', sans-serif; line-height: 1.6; letter-spacing: 0; font-weight: 400; color: #000; margin: 0 0 20px; }
.hm-premier-rgt h6 { font-size: 25px; font-family: 'Staatliches', sans-serif; line-height: 1.2; letter-spacing: 0; font-weight: 400; color: #000; margin-bottom: 0; }

/* ============ PRACTICE AREAS ============ */
/* Bottom padding used to be 0 with a -121px margin on the grid, so the tiles
   overhang into the white attorney band. That left a hard white rectangle under
   the left-side "We Handle" / "Que Manejamos" heading while the grid still hung
   over on the right — reads as broken whitespace, not deliberate overlap.
   Keep the grid inside the dark band. */
.hm-practice-areas-sec {
  padding: 159px 0 90px;
  position: relative;
  background-color: #10151b;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 90px);
}
.hm-practice-blk { display: flex; justify-content: space-between; z-index: 9; position: relative; }
.hm-practice-lft { width: 28.83%; padding-top: 109px; }
.hm-practice-lft h5 {
  font-size: 33px;
  color: var(--maroon);
  font-family: 'Asta Sans', sans-serif;
  font-weight: 400;
  text-align: left;
  line-height: 1;
  letter-spacing: 4.6px;
  padding: 0 0 18px;
  position: relative;
  margin: 0 0 20px;
  text-transform: uppercase;
  border-bottom: 1px solid #fff;
  display: inline-block;
}
.hm-practice-lft h2.text-heading { color: #fff; text-align: left; margin: 0 0 5px; }
.hm-practice-lft h2.text-heading strong { color: var(--maroon); }
.hm-practice-rit { width: 64.8%; margin: 0; }
.hm-practice-areas-lst { display: flex; justify-content: center; flex-wrap: wrap; }
.hm-practice-itm {
  width: 33.32%;
  aspect-ratio: 370 / 280;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  position: relative;
  background-color: var(--card-grey);
  z-index: 5;
  transition: 0.5s;
  overflow: hidden;
}
.hm-practice-itm::before {
  content: "\2192";
  position: absolute;
  width: 50px; height: 50px;
  right: 30px; top: 52px;
  background-color: var(--maroon);
  border-radius: 50%;
  border: 2px solid transparent;
  z-index: 1;
  transition: 0.5s;
  color: #fff;
  font-size: 22px;
  line-height: 46px;
  text-align: center;
}
.hm-practice-itm:hover { border-color: transparent; box-shadow: rgba(0,82,145,0.6) 0 10px 35px; z-index: 9; background-color: #000; }
.hm-practice-itm:hover::before { background-color: #0d1a0c; border-color: #fff; }
.hm-practice-icon { position: absolute; top: 15px; left: 36px; width: 102px; height: 95px; color: var(--maroon); transition: 0.5s; }
.hm-practice-icon svg { width: 74px; height: 74px; margin-top: 12px; }
.hm-practice-itm:hover .hm-practice-icon { display: none; }
/* These eight cards used to carry a stock photograph each — a scaffold in
   Amsterdam, a hospital corridor in Ontario, trucks on I-95 in Maryland. The
   client's note was that generic photos "don't really do much of anything" and
   he would rather see his own firm. Rather than swap one stock library for
   another, the photographs are out and the cards are the firm's own blues, with
   the drawn icon carrying the meaning. Real practice-area photography from the
   August shoot drops straight back into these rules. */
.hm-practice-hvr-image {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0.5;
  transition: opacity 0.5s, transform 0.6s;
  background: linear-gradient(145deg, #1b2836 0%, #0e141b 100%) center / cover no-repeat;
  transform: scale(1.001);
  will-change: transform, opacity;
}
.hm-practice-itm:hover .hm-practice-hvr-image {
  opacity: 1;
  transform: scale(1.07);
  background: linear-gradient(145deg, #005291 0%, #00263f 100%) center / cover no-repeat;
}
.hm-pract-cont { position: absolute; bottom: 32px; left: 41px; }
.hm-pract-cont h4 {
  font-size: 46px;
  color: var(--near-black);
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.9px;
  margin: 0;
  transition: 0.5s;
}
.hm-practice-itm:hover .hm-pract-cont h4 { color: #fff; }
.hm-pract-hvr a.hover { position: absolute; inset: 0; font-size: 0; display: block; margin: auto; z-index: 9; }
.hm-practice-itm.btn {
  background: var(--red-grad);
  outline: 1px solid #fff;
  outline-offset: -6px;
  text-align: center;
  display: flex;
}
.hm-practice-itm.btn::before {
  left: 0; right: 0; top: inherit; bottom: -81px;
  margin: auto;
  background-color: #000;
  border: 1px solid #fff;
  line-height: 48px;
}
.hm-practice-itm.btn a {
  font-size: 20px;
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  margin: auto;
  height: 100%;
  display: flex;
  align-items: center;
}
.hm-practice-itm.btn a:hover { color: #000; }
.hm-practice-itm.btn:hover { box-shadow: none; background: var(--red-grad); }

/* ============ BOOK ============ */
.hm-book-sec {
  padding: 120px 0;
  background:
    linear-gradient(180deg, rgba(19,19,19,0.94) 0%, rgba(19,19,19,0.97) 100%),
    url('../images/bronx-skyline.jpg') center / cover no-repeat #131313;
}
.hm-book-blk { display: flex; align-items: center; gap: 80px; justify-content: center; }
.hm-book-lft { flex: 0 0 320px; text-align: center; }

/* ---- The book, built as an actual object ------------------------------------
   The flat cover scan on its own reads as a picture of a rectangle. Turning it
   a few degrees and giving it a real spine, page block and back board is what
   makes a viewer register "that is a book". Depth is --book-depth; the faces
   are laid out in 3D and the browser sorts them by geometry, so the spine sits
   correctly behind the cover's left edge at any angle. */
.book-3d {
  /* Jason, 2026-08-20: "they were going to change the way the book looks so that
     it actually looks like a book — they didn't". Depth alone was not reading.
     The object now has all five faces a real hardcover shows at this angle:
     printed spine, page block, top edge and back board, turned far enough that
     the spine is unmistakable. */
  --book-depth: 62px;
  perspective: 1800px;
  display: inline-block;
  width: 100%;
  max-width: 300px;
  position: relative;
  container-type: inline-size;
}
/* depth follows the cover's rendered width, so the spine keeps the same
   cover-to-thickness proportion at every viewport instead of a fixed 62px
   ballooning against a shrunken cover */
@supports (width: 1cqw) {
  .book-3d { --book-depth: 20.5cqw; }
}
.book-3d__inner {
  position: relative;
  transform-style: preserve-3d;
  /* rotateY swings the left edge away, which is what exposes the spine.
     translateZ (applied first) shifts the volume so the rotation axis runs
     through the book's centre, not its front cover — without it the object
     hangs hinged off its own face and distorts under perspective */
  transform: rotateY(20deg) rotateX(2deg) translateZ(calc(var(--book-depth) / 2));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.book-3d:hover .book-3d__inner { transform: rotateY(12deg) rotateX(1deg) translateZ(calc(var(--book-depth) / 2)) scale(1.03); }
.book-3d__cover {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  /* the bound edge falls into shadow, the outer edge catches the light */
  border-radius: 2px 6px 6px 2px;
  box-shadow: inset 20px 0 26px -18px rgba(0,0,0,0.75),
              inset -6px 0 14px -10px rgba(255,255,255,0.35),
              0 18px 40px rgba(0,0,0,0.45);
}
.book-3d__spine,
.book-3d__pages {
  position: absolute;
  top: 0; bottom: 0;
  width: var(--book-depth);
  pointer-events: none;
}
/* spine — the bound edge, hinged at the cover's left border and running back */
.book-3d__spine {
  left: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #0b1420 0%, #16283c 42%, #0f1c2b 100%);
  box-shadow: inset 0 0 26px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
}
/* the title printed down the spine — the detail that makes it read as a book */
.book-3d__spine-txt {
  writing-mode: vertical-rl;
  /* the spine face is turned away from the viewer, so its text would print
     mirrored — flip the label back to face out */
  transform: rotateY(180deg);
  font-family: 'Asta Sans', sans-serif;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(233,225,205,0.92);
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.book-3d__spine-txt b { color: var(--red-accent); font-weight: 400; }

/* Preview review mode. These controls belong only to the design preview. */
.review-notice {
  position: fixed; right: 18px; bottom: 78px; z-index: 9998; max-width: 310px;
  padding: 13px 15px; color: #fff; background: #10263f; border-left: 4px solid #c62632;
  box-shadow: 0 8px 28px rgba(0,0,0,.25); font: 14px/1.35 Arial, sans-serif;
}
.review-notice strong { display: block; margin-bottom: 3px; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.review-bar {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 36px); padding: 9px; border-radius: 8px; background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.28); font-family: Arial, sans-serif;
}
.review-badge { color: #fff; background: #c62632; padding: 7px 8px; border-radius: 4px; font-weight: 700; font-size: 12px; }
.review-button { appearance: none; border: 0; border-radius: 4px; padding: 8px 10px; cursor: pointer; color: #fff; background: #10263f; font: 600 13px/1 Arial, sans-serif; }
.review-button:hover, .review-button:focus-visible { background: #1c4167; }
.review-button-secondary { color: #10263f; background: #eaf0f5; }
.review-button-secondary:hover, .review-button-secondary:focus-visible { background: #d8e3ed; }
.review-button-send { background: #c62632; }
.review-button-send:hover, .review-button-send:focus-visible { background: #991a24; }
.review-status { position: absolute; right: 0; bottom: 54px; width: 310px; margin: 0; padding: 9px 11px; color: #fff; background: #10263f; font-size: 13px; }
.review-selecting * { cursor: crosshair !important; }
.review-target { outline: 3px solid #c62632 !important; outline-offset: 3px; }
.review-pin { position: absolute; z-index: 9997; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #c62632; box-shadow: 0 3px 10px rgba(0,0,0,.35); cursor: pointer; font: 700 11px/1 Arial, sans-serif; }
.review-pin:hover, .review-pin:focus-visible { background: #991a24; transform: scale(1.08); }
.review-modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(8,18,29,.56); }
.review-modal { position: relative; width: min(480px, 100%); padding: 25px; color: #10263f; background: #fff; box-shadow: 0 14px 50px rgba(0,0,0,.35); font-family: Arial, sans-serif; }
.review-modal h2 { margin: 0 0 8px; font-size: 23px; }
.review-modal-target { margin: 0 0 17px; padding: 9px 11px; color: #40566b; background: #eef3f7; font-size: 13px; }
.review-modal label { display: block; font-weight: 700; font-size: 14px; }
.review-modal textarea { box-sizing: border-box; display: block; width: 100%; min-height: 130px; margin-top: 7px; padding: 10px; border: 1px solid #aebbc6; border-radius: 3px; font: 15px/1.4 Arial, sans-serif; }
.review-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.review-modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: #40566b; cursor: pointer; font-size: 25px; line-height: 1; }
.review-comments-modal { width: min(720px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; }
.review-comments-modal h3 { margin: 22px 0 9px; font: 700 15px/1.2 Arial, sans-serif; }
.review-comments-intro { margin: 0 0 16px; color: #40566b; font: 14px/1.45 Arial, sans-serif; }
.review-comment-list { display: grid; gap: 10px; }
.review-comment-card { padding: 13px 14px; border: 1px solid #d8e1e8; border-radius: 5px; background: #f8fafc; }
.review-comment-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #65798b; font: 12px/1.3 Arial, sans-serif; }
.review-comment-status { padding: 4px 7px; border-radius: 999px; font-weight: 700; }
.review-comment-status.is-draft { color: #73520d; background: #fff1bd; }
.review-comment-status.is-submitted { color: #155b39; background: #d9f3e6; }
.review-comment-target { margin: 0 0 5px; color: #52687b; font: 700 12px/1.4 Arial, sans-serif; }
.review-comment-text { margin: 0 0 9px; color: #10263f; font: 15px/1.45 Arial, sans-serif; white-space: pre-wrap; }
.review-comment-link { display: inline-block; margin-right: 12px; color: #175b91; font: 700 12px/1.4 Arial, sans-serif; text-decoration: underline; }
.review-comment-remove { float: right; padding: 0; border: 0; color: #991a24; background: transparent; cursor: pointer; font: 700 12px/1.4 Arial, sans-serif; text-decoration: underline; }
.review-empty { margin: 0; padding: 13px; color: #65798b; background: #f3f6f8; font: 14px/1.4 Arial, sans-serif; }
@media (max-width: 640px) {
  .review-notice { right: 12px; bottom: 128px; left: 12px; max-width: none; }
  .review-bar { right: 12px; bottom: 12px; left: 12px; flex-wrap: wrap; }
  .review-status { right: 0; bottom: 48px; width: min(320px, 100vw - 24px); }
}
/* top edge — the stacked leaves seen from above. Hinged at the cover's top
   edge and receding BACKWARD (-90deg): +90deg swings it toward the viewer,
   which read as a folded flap above the cover. */
.book-3d__top {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--book-depth);
  transform-origin: top center;
  transform: rotateX(-90deg);
  background:
    repeating-linear-gradient(0deg, #f4f1e8 0px, #f4f1e8 1px, #ddd8ca 1px, #ddd8ca 2px),
    linear-gradient(0deg, #cdc7b8 0%, #f6f3ec 30%, #e6e1d4 100%);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.32);
  pointer-events: none;
}
/* back board — closes the object so it is a solid book, not a propped cover */
.book-3d__back {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(-1 * var(--book-depth)));
  background: linear-gradient(135deg, #16283c 0%, #0e1a28 60%, #0a1017 100%);
  border-radius: 2px 6px 6px 2px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
  pointer-events: none;
}
/* page block — cream leaves, ruled so the individual pages read at a glance */
.book-3d__pages {
  right: 0;
  transform-origin: right center;
  transform: rotateY(-90deg);
  background:
    repeating-linear-gradient(90deg,
      #f4f1e8 0px, #f4f1e8 1px, #d9d4c6 1px, #d9d4c6 2px),
    linear-gradient(90deg, #cfc9ba 0%, #f6f3ec 22%, #e8e3d6 100%);
  box-shadow: inset 0 0 16px rgba(0,0,0,0.28);
}
/* inner pages sit on a light background — give the book room for its shadow */
.book-3d-wrap { padding: 10px 0 34px; display: flex; justify-content: center; }
.book-3d-wrap .book-3d { max-width: 260px; }
.book-3d-wrap .book-3d::after { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.14) 45%, transparent 72%); }
/* grounded shadow — drawn flat under the object, not on the cover */
.book-3d::after {
  content: "";
  position: absolute;
  left: 6%; right: 2%;
  bottom: -26px;
  height: 34px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 45%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.hm-book-rgt { max-width: 640px; }
.hm-book-rgt h5 {
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--red-accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hm-book-rgt h2.text-heading { color: #fff; font-size: 64px; margin-bottom: 24px; }
.hm-book-rgt h2.text-heading strong { color: var(--red-accent); }
.hm-book-rgt p {
  font-size: 19px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin-bottom: 34px;
}
.hm-book-btns { display: flex; gap: 22px; flex-wrap: wrap; }

/* ============ ATTORNEY ============ */
/* Bottom padding used to be 0 because the old single-attorney layout ended in a
   full-bleed photo that was meant to run into the next section. The card grid
   ends in a button instead, and with no padding it sat flat against the dark
   book section below — the button read as clipped. 150px puts it back in the
   same family as the sections either side (138/160/190). */
.hm-attorney-sec { padding: 130px 0 150px; position: relative; }
.hm-attorney-blk { display: flex; justify-content: flex-end; gap: 90px; position: relative; padding-top: 90px; }
.hm-attorney-lft { width: 53.5%; padding-top: 53px; }
.hm-attorney-lft h2.text-heading { text-align: left; margin: 0 0 20px; letter-spacing: 0; }
.hm-attorney-lft h3 {
  font-size: 60px;
  color: var(--red-text);
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 5px;
}
.hm-attorney-cntnt { padding-left: 31px; position: relative; }
.hm-attorney-cntnt::before {
  content: "";
  position: absolute;
  background-color: var(--line-grey);
  width: 1px; height: 100%;
  left: 0; top: 0; bottom: 0;
  margin: auto;
}
.hm-attorney-cntnt p { font-size: 20px; color: #000; font-family: 'Asta Sans', sans-serif; font-weight: 500; line-height: 1.75; margin: 0 0 10px; }
.hm-attorney-btn { margin-top: 20px; }
.hm-attorney-rit { width: 42.7%; padding-right: 44px; align-self: flex-end; }
.hm-attorney-rit .ph-slot { aspect-ratio: 605 / 832; }
.hm-attorney-blk::after {
  content: "";
  position: absolute;
  width: 89.25%; height: 2px;
  bottom: -10px; left: 0; right: 0;
  margin: auto;
  background: linear-gradient(90deg, transparent 0%, var(--line-grey) 20%, var(--line-grey) 80%, transparent 100%);
}

/* ============ ATTORNEY CARDS (multi-attorney firm) ============ */
.attorneys-heading { text-align: center; margin-bottom: 12px; }
.attorneys-intro {
  text-align: center;
  font-size: 20px;
  color: #3d454f;
  max-width: 780px;
  margin: 0 auto 66px;
  line-height: 1.7;
}
.attorneys-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: stretch;
}
/* The two bios are different lengths, so the bodies must stretch and the button
   must be pushed to the bottom — otherwise the two "View Profile" buttons sit at
   different heights and the pair reads as a mistake rather than a set. */
.attorney-card { display: flex; flex-direction: column; height: 100%; }
.attorney-card__photo { aspect-ratio: 4 / 5; }
.attorney-card__body {
  padding: 30px 0 0 31px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.attorney-card__body::before {
  content: "";
  position: absolute;
  background-color: var(--line-grey);
  width: 1px; top: 34px; bottom: 8px;
  left: 0;
  pointer-events: none;
}
.attorney-card h3 {
  font-size: 46px;
  color: var(--red-text);
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 6px;
  /* Longer attorney names (two-word surnames, honorifics) strand the last
     word alone at narrow widths without this */
  text-wrap: balance;
}
.attorney-card__role {
  font-family: 'Asta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red-accent);
  margin: 0 0 18px;
}
.attorney-card__body p {
  font-size: 18px;
  color: #000;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 0 12px;
}
.attorney-card__btn { margin-top: auto; padding-top: 20px; }
/* Honest label for a photograph we do not have yet — never a stock stand-in
   for a real person. */
.ph-slot.awaiting-photo {
  align-items: center;
  border: 1px dashed rgba(255,255,255,0.22);
}
.ph-slot.awaiting-photo span { color: rgba(255,255,255,0.55); }

/* A slot we are deliberately NOT filling: copy we cannot source, or a name we
   cannot confirm. Same rule as an unfilled photo slot — say so on the page
   rather than publish a guess. */
.pending-note {
  font-family: 'Asta Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: #5a636d;
  border-left: 3px solid var(--red-accent);
  background: #f4f7fa;
  padding: 14px 18px;
  margin: 0 0 14px;
}
.attorney-card__body .pending-note { font-size: 15px; }


/* The headshot's backdrop — the office shelving with potted plants the client
   objected to — is no longer a CSS problem. The subject was lifted out of the
   original frame and set on a navy studio field in the image itself; the frame
   as shot is kept beside it as images/jason-shapiro-office-bg.jpg, so the
   change is one file swap away from being undone. The gradient overlays that
   used to hide those plants are gone with them. */

/* ============ LANGUAGE SWITCH ============ */
/* The bilingual control was a nav item indistinguishable from Home or Contact.
   A large share of this firm's clients speak only Spanish, so it is promoted to
   a bordered pill and given its own always-visible control on mobile — a phone
   visitor should never have to open a hamburger to find their language. */
#main-navigation ul li.lang-switch { margin-right: 0; margin-left: 18px; }
#main-navigation ul li.lang-switch a {
  padding: 12px 22px;
  border: 2px solid var(--red-accent);
  border-radius: 4px;
  background: var(--red-accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  position: relative;
  top: -10px;
  box-shadow: 0 0 0 3px rgba(28,141,224,0.28);
}
#main-navigation ul li.lang-switch a:hover,
#main-navigation ul li.lang-switch a.current {
  background: var(--red-accent);
  color: #fff;
}
#main-navigation ul li.lang-switch a:hover::before,
#main-navigation ul li.lang-switch a.current::before { content: none; }
.site-header.is-sticky #main-navigation ul li.lang-switch a { padding: 9px 18px; top: -6px; }

.lang-pill-mobile {
  display: none;
  font-family: 'Asta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  border: 2px solid var(--red-accent);
  border-radius: 4px;
  background: var(--red-accent);
  padding: 9px 14px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(28,141,224,0.28);
}

/* ============ WHY CHOOSE ============ */
.hm-why-choose-sec { padding: 168px 0 100px; position: relative; }
.hm-why-choose-sec h2.text-heading { text-align: center; }
.hm-why-choose-list { display: flex; justify-content: space-between; }
.hm-why-choose-item { width: 17.7%; transition: 0.5s; }
.hm-why-choose-item:nth-child(even) { margin: 101px 0 0; }
.hm-why-choose-item h5 {
  font-size: 30px;
  color: #000;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  padding: 200px 0 0;
  position: relative;
  margin: 0 0 8px;
}
.hm-why-choose-item .why-icon {
  position: absolute;
  width: 80px; height: 80px;
  top: 0; left: 0; right: 0;
  margin: auto;
  color: #1c242c;
  transition: 0.5s;
}
.hm-why-choose-item h5::after {
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  top: -20px; left: 0; right: 0;
  margin: auto;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0,82,145,0.07) 0%, rgba(0,82,145,0.03) 55%, transparent 72%);
  transition: 0.5s;
}
.hm-why-choose-item:hover h5 { color: var(--red-text); }
.hm-why-choose-item:hover .why-icon { color: var(--red-text); }
.hm-why-choose-item p { font-size: 18px; color: #000; font-family: 'Asta Sans', sans-serif; font-weight: 500; text-align: center; line-height: 1.61; margin: 0; }

/* ============ CONSULTATION CTA ============ */
.hm-consultation-sec {
  padding: 130px 0 160px;
  position: relative;
  background-color: var(--near-black);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 60%);
}
.hm-consultation-blk { padding: 70px 0 30px; text-align: center; position: relative; z-index: 1; }
.hm-consultation-blk h2 {
  font-size: 110px;
  color: var(--red-accent);
  margin-bottom: 0;
  letter-spacing: 8.8px;
  line-height: 0.95;
  text-transform: uppercase;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
}
.hm-consultation-blk h5 {
  font-size: 50px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 15px;
  color: #fff;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.hm-consultation-blk p {
  font-size: 20px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 6px;
  margin-bottom: 45px;
  position: relative;
  display: inline-block;
  padding: 0 32px;
  color: #fff;
  text-transform: uppercase;
}
.hm-consultation-btns { display: flex; justify-content: center; gap: 35px; }

/* ============ TESTIMONIALS ============ */
.hm-testimonials { padding: 175px 0 115px; }
.hm-testi-blk { display: flex; justify-content: flex-start; gap: 100px; }
.hm-testi-lft { width: 35.8%; position: relative; }
.hm-testi-lft .ph-slot { aspect-ratio: 536 / 640; position: relative; z-index: 1; }
.hm-testi-lft::after {
  content: "";
  position: absolute;
  width: 80%; height: 38%;
  bottom: -30px; left: 0; right: 0;
  margin: auto;
  background: repeating-linear-gradient(90deg, rgba(0,82,145,0.16) 0 2px, transparent 2px 12px);
}
.hm-google-rvw {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: auto;
  padding: 0 20px;
  z-index: 5;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.92) 75%, transparent 100%);
}
.hm-google-rvw h5 {
  font-size: 35px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.7px;
  color: #000;
  text-transform: uppercase;
  margin: 0;
  padding: 34px 0 40px;
  text-align: center;
}
.hm-google-rvw h5 strong { color: var(--maroon); }
.hm-google-rvw h5 small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #5b6270;
  margin-top: 10px;
  text-transform: none;
}
.hm-testi-rgt { width: 50.7%; }
.hm-testi-list { margin-bottom: 30px; position: relative; }
.hm-testi-list .testi-item { display: none; }
.hm-testi-list .testi-item.active { display: block; }
.testi-item { width: 100%; position: relative; }
.testi-item .star-rat {
  display: inline-block;
  width: 215px; height: 36px;
  margin: 0 0 28px;
  font-size: 34px;
  line-height: 36px;
  letter-spacing: 8px;
  color: var(--line-grey);
}
.testi-item .star-rat::before { content: "\2606\2606\2606\2606\2606"; }
.testi-item::before {
  content: "\201D";
  position: absolute;
  right: 0; top: 0;
  font-family: Georgia, serif;
  font-size: 90px;
  line-height: 0.6;
  color: var(--maroon);
  height: 35px;
  overflow: hidden;
}
.testi-item h5 { font-size: 35px; font-family: 'Staatliches', sans-serif; font-weight: 400; line-height: 1; letter-spacing: 0; margin: 0 0 20px; color: var(--ink-heading); }
.testi-item p { font-size: 24px; font-family: 'Asta Sans', sans-serif; font-weight: 400; line-height: 1.7; letter-spacing: 0; margin: 0 0 15px; color: var(--ink-heading); }
.testi-item h4 { font-size: 40px; font-family: 'Staatliches', sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.8px; margin: 0; color: var(--maroon); }
.testi-item.pending h5, .testi-item.pending p { color: #77808a; }

/* ============ AWARDS ============ */
.hm-award-sec { padding: 0 0 112px; }
.hm-award-lst { display: flex; justify-content: space-between; align-items: center; }
.hm-award-img { position: relative; display: flex; align-items: center; justify-content: center; padding-right: 20px; min-height: 130px; }
.hm-award-img:nth-child(1) { width: 16%; }
.hm-award-img:nth-child(2) { width: 22%; }
.hm-award-img:nth-child(3) { width: 22%; }
.hm-award-img:nth-child(4) { width: 22%; }
.hm-award-img:nth-child(5) { width: 18%; }
.hm-award-img::before {
  content: "";
  position: absolute;
  width: 1px; height: 100%;
  right: 0; top: 0; bottom: 0;
  margin: auto;
  background: linear-gradient(180deg, transparent 0%, var(--line-grey) 30%, var(--line-grey) 70%, transparent 100%);
}
.hm-award-img:last-child::before { display: none; }
.hm-award-img .award-slot {
  font-family: 'Asta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9aa4ad;
  text-align: center;
  border: 1px dashed var(--line-grey);
  padding: 34px 20px;
  width: 85%;
}
/* a slot holding a real credential mark is no longer a labeled placeholder */
.hm-award-img .award-slot img { display: block; margin: 0 auto 10px; max-width: 100%;
  /* the wordmark ships in its pale on-dark blue; deepen it for the white row */
  filter: brightness(0.62) saturate(1.35); }
.hm-award-img .award-slot:has(img) { border-color: transparent; }

/* ============ MAP + FORM ============ */
.ftr-form-sctn {
  padding: 130px 0 66px;
  position: relative;
  background-color: #131313;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 70px);
}
.hm-form-blk {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  text-align: center;
  margin-bottom: 105px;
  position: relative;
  z-index: 1;
}
.hm-map-sec { width: 50%; padding: 20px 0 0; }
.ftr-form-sctn h2.text-heading { font-size: 60px; letter-spacing: 0; color: #fff; margin: 0 0 10px; }
.hm-map-sec h2.text-heading { margin-bottom: 36px; }
.hm-map-sec .ftr-map {
  padding: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.hm-map-sec .ftr-map iframe { height: 420px; width: 100%; border: 0; display: block; }
.hm-map-sec > p { color: #fff; }
.hm-form-sec {
  position: relative;
  width: 44.7%;
  background: var(--red-grad);
  padding: 54px 32px;
}
.hm-form-sec > p {
  font-size: 18px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  margin: 0 0 20px;
  letter-spacing: 0.7px;
}
.hm-form {
  padding: 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  text-align: left;
}
.hm-form .field { width: 48%; }
.hm-form .field.full { width: 100%; }
.hm-form input[type="text"],
.hm-form input[type="tel"],
.hm-form input[type="email"],
.hm-form textarea {
  font-family: 'Asta Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  border-radius: 0;
  outline: 0;
  padding: 20px 10px;
  width: 100%;
  display: block;
  text-align: left;
  transition: all 0.5s;
}
.hm-form input::placeholder, .hm-form textarea::placeholder { color: #fff; opacity: 1; }
.hm-form input:focus, .hm-form textarea:focus { border-bottom-color: #fff; }
.hm-form textarea { height: 100px; resize: none; padding-top: 20px; }
.hm-form .disclaimer-txt {
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  margin: 0 0 12px;
  text-align: left;
}
.hm-form .check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}
.hm-form .check-row input { width: 15px; height: 15px; margin-top: 4px; }
.hm-form .submit-row { text-align: right; margin-top: -10px; }
.hm-form button.cmn-btn-submit {
  font-size: 22px;
  font-weight: 800;
  font-family: 'Asta Sans', sans-serif;
  line-height: 1;
  letter-spacing: 0;
  padding: 16px 32px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.5s;
}
.hm-form button.cmn-btn-submit:hover { background-color: #000; border-color: #000; }

/* ============ FOOTER ============ */
.ftr-block-sec { background-color: #131313; padding: 0 0 60px; }
.ftr-menu { border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 54px; margin-bottom: 65px; }
.ftr-menu ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 112px; }
.ftr-menu ul li a {
  font-size: 20px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1;
  color: #fff;
}
.ftr-menu ul li a:hover { color: var(--red-accent); }
.ftr-block-list { display: flex; justify-content: space-between; }
.ftr-itm { width: 30%; text-align: center; position: relative; }
.ftr-itm.logo { width: 40%; border: solid 1px rgba(255,255,255,0.2); border-bottom: 0; border-top: 0; padding: 0 30px; }
.ftr-itm.cnct { width: 28%; }
.ftr-itm h4 {
  font-size: 22px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 10px;
  padding: 74px 0 0;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  position: relative;
}
.ftr-itm h4 .ftr-icon {
  position: absolute;
  width: 60px; height: 60px;
  left: 0; top: 0; right: 0;
  margin: auto;
  color: var(--red-accent);
}
.ftr-itm p { font-size: 18px; font-family: 'Asta Sans', sans-serif; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: #fff; margin: 0; }
.ftr-itm.cnct p a {
  font-size: 40px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1;
  color: var(--red-accent);
  display: block;
  padding-top: 74px;
  position: relative;
}
.ftr-itm.cnct p a .ftr-icon {
  position: absolute;
  width: 60px; height: 60px;
  left: 0; top: 0; right: 0;
  margin: auto;
  color: var(--red-accent);
}
.ftr-itm.cnct p a:hover { color: #fff; }
.ftr-itm.cnct .fax-line { margin-top: 12px; font-size: 18px; }
.ftr-logo { margin: 0 auto 40px; width: 66%; }
.ftr-logo .logo-lockup { width: 232px; margin: 0 auto; }
.ftr-logo .logo-sub { display: block; font-size: 13px; letter-spacing: 5px; color: #fff; text-transform: uppercase; margin-top: 6px; font-family: 'Asta Sans', sans-serif; }
.ftr-social { display: flex; justify-content: center; gap: 12px; margin: 0 0 24px; }
.ftr-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Asta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.ftr-social a:hover { background: var(--red-accent); border-color: var(--red-accent); }
.ftr-itm .serving { font-size: 15px; color: #b9c2cf; line-height: 1.7; }
.ftr-copyrights-sec { background: var(--red-grad); padding: 30px 0; text-align: center; }
.ftr-copyrights-sec p { font-size: 20px; font-family: 'Asta Sans', sans-serif; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: #fff; margin: 0; }
.ftr-copyrights-sec p a:hover { color: #000; }
.ftr-copyrights-sec p.copy-sub-txt { font-size: 14px; text-transform: none; line-height: 1.6; font-style: italic; margin-top: 14px; }

/* ============ INNER PAGE HERO ============ */
#main-heading {
  padding: 182px 0 86px;
  background-color: var(--page-dark);
  background-image: radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.07) 0%, transparent 60%);
  text-align: center;
  position: relative;
  z-index: 2;
}
#main-heading h1 {
  font-size: 85px;
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 6.8px;
  background: var(--red-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  margin: 0 0 4px;
  position: relative;
  z-index: 1;
}
#main-heading .inrpg-breadcrumbs {
  font-size: 19px;
  font-family: 'Asta Sans', sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.38px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
#main-heading .inrpg-breadcrumbs .current-item { color: #1c8de0; }
#main-heading .inrpg-breadcrumbs a:hover { color: #1c8de0; }

/* ============ INNER PAGE CONTENT ============ */
#page-content { padding: 100px 0; }
#page-content h2 { font-size: 60px; font-family: 'Staatliches', sans-serif; letter-spacing: 0; line-height: 1.1; margin: 0 0 25px; color: var(--ink-heading); text-transform: uppercase; }
#page-content h2 strong { font-weight: 400; color: var(--red-text); }
#page-content h3 { font-size: 50px; color: var(--ink-heading); text-transform: uppercase; line-height: 1.1; margin: 0 0 25px; }
#page-content h3 strong { color: var(--red-text); }
#page-content h5 { font-size: 32px; color: var(--ink-heading); text-transform: uppercase; margin: 0 0 20px; }
#page-content p, #page-content li { font-family: 'Asta Sans', sans-serif; font-size: 20px; line-height: 1.75; color: #000; margin: 0 0 25px; font-weight: 500; }
#page-content li { margin: 0 0 10px; position: relative; padding-left: 28px; }
#page-content ul li::before {
  content: "\2726";
  position: absolute;
  left: 0; top: 2px;
  color: var(--maroon);
  font-size: 15px;
}
.inner-two-col { display: flex; gap: 70px; align-items: flex-start; }
.inner-two-col > div { flex: 1; }
.inner-two-col .ph-slot { aspect-ratio: 4 / 3; }
.inner-cta { margin-top: 30px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1800px) {
  .hm-bnr-rgt h1 { font-size: 140px; }
  .hm-bnr-rgt h1 strong { font-size: 46px; letter-spacing: 13px; }
  .text-heading { font-size: 80px; }
}
@media (max-width: 1700px) {
  .hm-bnr-rgt h1 { font-size: 130px; letter-spacing: 11px; margin-bottom: 30px; }
  .hm-bnr-rgt h1 strong { font-size: 43px; letter-spacing: 11px; }
  .text-heading { font-size: 70px; }
  #main-navigation ul li { margin-left: 18px; }
  :lang(es) #main-navigation ul li { margin-left: 12px; }
}
@media (max-width: 1600px) {
  .text-heading { font-size: 65px; margin: 0 0 32px; }
  .hm-consultation-blk h2 { font-size: 92px; }
  .ftr-form-sctn h2.text-heading { font-size: 54px; }
  .ftr-form-sctn .hm-map-sec h2.text-heading { margin-bottom: 32px; }
  .hm-pract-cont h4 { font-size: 40px; }
  #main-navigation ul li { margin-left: 14px; }
  :lang(es) #main-navigation ul li { margin-left: 10px; }
  :lang(es) #main-navigation ul li a { font-size: 16px; }
}
@media (max-width: 1440px) {
  .hm-pract-cont h4 { font-size: 33px; }
  .hm-bnr-rgt h1 { font-size: 105px; letter-spacing: 8px; margin-bottom: 25px; }
  .hm-bnr-rgt h1 strong { font-size: 37px; letter-spacing: 8px; }
  .text-heading { font-size: 58px; }
  .hm-consultation-blk h2 { font-size: 78px; letter-spacing: 8.2px; }
  .hm-consultation-blk h5 { font-size: 42px; letter-spacing: 11px; }
  .ftr-form-sctn h2.text-heading { font-size: 46px; }
  .ftr-form-sctn .hm-map-sec h2.text-heading { margin-bottom: 28px; }
  #main-navigation ul li { margin-left: 12px; }
  #main-navigation ul li a { font-size: 16px; }
  :lang(es) #main-navigation ul li { margin-left: 8px; }
  :lang(es) #main-navigation ul li a { font-size: 15px; }
  :lang(es) #main-navigation ul li.lang-switch a { padding: 9px 12px; }
  .hm-google-rvw h5 { font-size: 30px; }
}
@media (max-width: 1240px) {
  .hm-bnr-lft { padding: 60px 0 0 30px; }
  .hm-bnr-rgt { padding: 110px 0 65px; }
  .hm-bnr-rgt h1 { font-size: 85px; letter-spacing: 5px; }
  .hm-bnr-rgt h1 strong { font-size: 29px; letter-spacing: 6px; }
  .text-heading { font-size: 48px; }
  .hm-case-results-lft .text-heading { font-size: 48px; }
  .hm-consultation-blk h2 { font-size: 60px; letter-spacing: 5px; }
  .hm-consultation-blk h5 { font-size: 32px; letter-spacing: 8px; }
  .hm-premier-blk, .hm-attorney-blk, .hm-testi-blk { gap: 50px; }
  .hm-practice-lft { padding-top: 40px; }
  .hm-practice-rit { margin-bottom: 0; }
  .hm-pract-cont { left: 24px; bottom: 22px; }
  .hm-pract-cont h4 { font-size: 34px; }
  .hm-practice-icon { left: 22px; }
  .hm-practice-icon svg { width: 58px; height: 58px; }
  .hm-google-rvw h5 { font-size: 26px; }
  .hm-google-rvw { padding: 0 40px; }
  .ftr-form-sctn h2.text-heading { font-size: 40px; }
  .hm-map-sec .ftr-map { padding: 30px 26px; }
  #main-heading h1 { font-size: 64px; }
  .hm-case-results-list { grid-template-columns: repeat(3, 1fr); }
  .testi-item h5 { font-size: 30px; }
  .testi-item p { font-size: 21px; }
  .ftr-menu ul { gap: 20px 56px; }
}
@media (max-width: 992px) {
  .site-header { position: relative; background: #10151b; padding-bottom: 20px; }
  /* Mobile keeps the original wrap — hamburger layout, not the desktop row */
  .logo-section { flex-wrap: wrap; }
  .hm-case-results-rgt::after { right: 0; }
  .hm-premier-lft::before { right: 0; bottom: -14px; }
  .hm-case-results-list { grid-template-columns: repeat(2, 1fr); }
  .hm-book-sec { padding: 70px 0; }
  .hm-book-blk { flex-direction: column; text-align: center; gap: 44px; }
  /* explicit width, not content-sized: .book-3d is an inline-size container,
     so its contents can no longer size this box for it */
  .hm-book-lft { flex: 0 0 auto; width: 220px; max-width: 220px; margin: 0 auto; }
  .hm-book-rgt { max-width: 100%; }
  .hm-book-rgt h2.text-heading { font-size: 42px; }
  .hm-book-rgt p { font-size: 17px; }
  .hm-book-btns { justify-content: center; }
  .site-header.is-sticky { position: relative; animation: none; background: #10151b; }
  .logo-section { align-items: center; }
  .header-rit { display: none; }
  .header-rit.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #10151b;
    padding: 20px 40px 30px;
    align-items: flex-start;
    z-index: 99;
  }
  .header-rit.open #main-navigation ul { text-align: left; flex-direction: column; flex-wrap: wrap; align-items: flex-start; }
  .header-rit.open #main-navigation ul li { display: block; margin: 0 0 16px; }
  .header-rit.open .header-number { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
  .header-rit.open .hdr-cntct-cal { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
  .header-rit.open .hdr-cntct-cal p { font-size: 15px; }
  .header-rit.open .hdr-call { font-size: 27px; }
  .header-rit.open .hdr-esp { border: none; padding: 0; margin: 0; }
  .header-rit.open .hdr-scl-icns { border: none; padding: 0; }
  .nav-toggle { display: block; }
  /* language switch stays reachable without opening the menu */
  .lang-pill-mobile { display: inline-flex; align-items: center; }
  .mobile-header-controls { display: flex; align-items: center; gap: 10px; }
  .attorneys-grid { grid-template-columns: 1fr; gap: 64px; }
  .attorneys-intro { font-size: 18px; margin-bottom: 46px; }
  .attorney-card h3 { font-size: 38px; }
  .hm-banner-sec { padding-top: 60px; }
  .hm-bnr-blk { flex-direction: column; align-items: center; }
  .hm-bnr-lft { width: 70%; margin: 0; padding: 0; }
  /* stacked layout: the portrait floats mid-hero with backdrop on every side,
     so the bottom edge must feather too — a full oval vignette on the face */
  .hm-bnr-lft .ph-slot.has-img img {
    -webkit-mask-image: radial-gradient(78% 92% at 50% 50%,
        #000 58%, rgba(0, 0, 0, 0.9) 76%, transparent 98%);
    mask-image: radial-gradient(78% 92% at 50% 50%,
        #000 58%, rgba(0, 0, 0, 0.9) 76%, transparent 98%);
  }
  .hm-bnr-rgt { width: 100%; padding: 60px 0; }
  .hm-bnr-rgt h1 { font-size: 55px; letter-spacing: 3px; margin: 0 auto 20px; padding: 20px; width: -moz-max-content; width: max-content; max-width: 100%; }
  .hm-bnr-rgt h1 strong { font-size: 24px; letter-spacing: 4px; }
  .hm-bnr-rgt p { font-size: 20px; letter-spacing: 5px; }
  .hm-case-results-sec { padding: 80px 0 110px; }
  .hm-case-results-blk { flex-direction: column; gap: 30px; }
  .hm-case-results-lft, .hm-case-results-rgt { width: 100%; }
  .hm-case-results-list { padding: 0; }
  .hm-premier-sec { padding-bottom: 90px; }
  .hm-premier-blk { flex-direction: column; }
  .hm-premier-lft, .hm-premier-rgt { width: 100%; }
  .hm-practice-areas-sec { padding-top: 80px; }
  .hm-practice-blk { flex-direction: column; }
  .hm-practice-lft, .hm-practice-rit { width: 100%; }
  .hm-practice-rit { margin-bottom: 0; }
  .hm-practice-itm { width: 50%; }
  .hm-attorney-sec { padding-top: 70px; padding-bottom: 80px; }
  .hm-attorney-blk { flex-direction: column-reverse; padding-top: 40px; }
  .hm-attorney-lft, .hm-attorney-rit { width: 100%; padding: 0; }
  .hm-why-choose-sec { padding: 90px 0 70px; }
  .hm-why-choose-list { flex-wrap: wrap; gap: 40px 20px; justify-content: center; }
  .hm-why-choose-item { width: 44%; }
  .hm-why-choose-item:nth-child(even) { margin: 0; }
  .hm-why-choose-item h5 { padding-top: 96px; font-size: 26px; }
  .hm-why-choose-item .why-icon { width: 64px; height: 64px; }
  .hm-consultation-sec { padding: 80px 0 100px; }
  .hm-consultation-blk h2 { font-size: 54px; letter-spacing: 2.5px; margin-bottom: 10px; }
  .hm-consultation-blk h5 { font-size: 28px; letter-spacing: 6px; }
  .hm-consultation-blk p { font-size: 16px; letter-spacing: 3px; }
  .hm-consultation-btns { flex-direction: column; align-items: center; gap: 20px; }
  .hm-testimonials { padding: 90px 0 70px; }
  .hm-testi-blk { flex-direction: column; }
  .hm-testi-lft, .hm-testi-rgt { width: 100%; }
  .hm-award-lst { flex-wrap: wrap; gap: 24px; justify-content: center; }
  .hm-award-img::before { display: none; }
  .hm-award-img:nth-child(n) { width: 100%; max-width: 220px; }
  .hm-form-blk { flex-direction: column; gap: 50px; margin-bottom: 70px; }
  .hm-map-sec, .hm-form-sec { width: 100%; }
  .ftr-block-list { flex-direction: column; gap: 50px; }
  .ftr-itm, .ftr-itm.logo, .ftr-itm.cnct { width: 100%; border: 0; }
  .inner-two-col { flex-direction: column; }
  #main-heading { padding: 90px 0 60px; }
  #main-heading h1 { font-size: 44px; letter-spacing: 3px; }
  #page-content h2 { font-size: 40px; }
  #page-content h3 { font-size: 32px; }
  .ftr-menu ul { gap: 16px 32px; }
}
@media (max-width: 576px) {
  .container { padding: 0 20px; }
  body { overflow-x: hidden; }
  /* one override for BOTH header and footer — the footer previously had no
     mobile size-down at all */
  .logo-lockup { width: 172px; }
  /* cap the tagline so the long Spanish line wraps instead of silently
     zooming the whole mobile page out past the viewport */
  .site-logo { max-width: 100%; }
  .site-logo .logo-sub { font-size: 11px; letter-spacing: 3px; max-width: 86vw; white-space: normal; line-height: 1.6; }
  .nav-toggle { font-size: 20px; padding: 5px 11px; }
  .hm-bnr-lft { width: 82%; }
  .hm-bnr-lft .ph-slot { aspect-ratio: 545 / 480; }
  .hm-bnr-rgt { padding: 40px 0; }
  .hm-banner-sec { overflow: hidden; }
  .hm-bnr-blk { width: 100%; }
  .hm-bnr-lft { margin: 0; width: 80%; }
  .hm-bnr-rgt { max-width: 100%; }
  .hm-bnr-rgt h1 { width: auto; max-width: 100%; padding: 12px 8px; }
  .hm-bnr-rgt h1 strong { font-size: 16px; letter-spacing: 1.5px; }
  .hm-bnr-rgt p { font-size: 12px; letter-spacing: 1.5px; padding: 0 14px; }
  .hm-bnr-btn a.cmn-btn { white-space: normal; max-width: 100%; font-size: 15px; padding: 16px 20px; }
  .hm-bnr-rgt h1 { font-size: 40px; letter-spacing: 2px; padding: 12px; }
  .hm-bnr-rgt h1 strong { font-size: 19px; letter-spacing: 3px; }
  .text-heading { font-size: 38px; }
  .hm-consultation-blk h2 { font-size: 32px; letter-spacing: 1.8px; margin-bottom: 5px; }
  .hm-consultation-blk h2 br { display: none; }
  .hm-consultation-blk h5 { font-size: 22px; letter-spacing: 4px; }
  .hm-scrolling-sec ul li { padding: 0 40px; }
  .hm-scrolling-sec ul li a { font-size: 18px; }
  .hm-practice-itm { width: 100%; border-left: 1px solid #000; }
  .hm-why-choose-item { width: 100%; }
  .hm-case-results-list { grid-template-columns: 1fr; }
  a.cmn-btn { padding: 20px 28px; font-size: 17px; }
  .hm-form .field { width: 100%; }
  .hm-form { padding: 0 10px; }
  .hm-form-sec { padding: 40px 20px; }
  .testi-item h5 { font-size: 26px; }
  .testi-item p { font-size: 19px; }
  #main-heading h1 { font-size: 34px; letter-spacing: 2px; }
}

/* ===========================================================================
   2026-08-20 review with Jason — hero credentials + WhatsApp
   =========================================================================== */

/* He asked for the differentiators the old site led with — the textbook and the
   Ivy League education — to be visible on the front page, not only further
   down. Set as a quiet credential rail under the hero CTA. */
.hm-bnr-creds {
  list-style: none;
  margin: 26px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 10px 40px;
  max-width: 1040px;
  text-align: left;
  position: relative;
  z-index: 1;
}
.hm-bnr-creds li {
  font-family: 'Asta Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.hm-bnr-creds li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red-accent);
  margin-right: 12px;
  flex-shrink: 0;
}
.hm-bnr-creds li em { font-style: italic; text-transform: none; letter-spacing: 1.2px; margin-left: 5px; }

/* Floating WhatsApp chat button */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: #25d366;
  color: #08331a;
  text-decoration: none;
  font-family: 'Asta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.42); }
.wa-float svg { width: 26px; height: 26px; fill: #08331a; flex-shrink: 0; }

@media (max-width: 992px) {
  .hm-bnr-creds { grid-template-columns: 1fr; gap: 7px; justify-items: center; padding: 0 12px; }
  /* block, not flex, so a long credential wraps as one sentence instead of
     stacking the words beside the bullet */
  .hm-bnr-creds li { display: block; font-size: 12px; letter-spacing: 1.4px; white-space: normal; text-align: center; }
  .hm-bnr-creds li::before { display: inline-block; vertical-align: middle; margin: 0 8px 2px 0; }
  .hm-bnr-creds li em { display: inline; }
  .hm-bnr-creds li + li::before { margin-right: 18px; }
  /* on phones the label would crowd the dial CTA — icon only */
  .wa-float { right: 16px; bottom: 16px; padding: 14px; }
  .wa-float__label { display: none; }
  .book-3d__spine-txt { font-size: 8px; letter-spacing: 1.2px; }
}

/* ===========================================================================
   2026-08-26 — Jason's text: credential-first hierarchy, like his current site
   ===========================================================================
   The distinctive points lead at the largest size (the textbook, then the
   founder line); "Personal Injury Attorneys" stays the h1 but reads as a
   category kicker; no-fee is a single quiet line under the CTA. */
.hm-bnr-rgt h1.hm-bnr-kicker { font-size: 15px; margin: 0 0 26px; padding: 0; letter-spacing: 0; }
.hm-bnr-rgt h1.hm-bnr-kicker strong {
  font-family: 'Asta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 5px;
  background: none;
  -webkit-text-fill-color: #aee0ff;
  color: #aee0ff;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.hm-bnr-rgt h1.hm-bnr-kicker strong::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background: var(--red-accent);
}
.hm-bnr-rgt p.hm-bnr-lead {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 4.5px;
  color: rgba(255, 255, 255, 0.92);
  padding: 0;
  margin-bottom: 26px;
  display: block;
  text-wrap: balance;
}
.hm-bnr-rgt p.hm-bnr-lead em {
  font-style: normal;
  color: var(--red-accent);
  display: block;
  margin-top: 10px;
  /* the title is the thesis — the one dominant element in the hero */
  font-size: clamp(38px, 3.9vw, 60px);
  line-height: 1.04;
  letter-spacing: 2px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.hm-bnr-rgt p.hm-bnr-tagline {
  font-family: 'Asta Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  padding: 0;
  margin-bottom: 38px;
  display: block;
  line-height: 1.6;
  max-width: 560px;
}
.hm-bnr-rgt p.hm-bnr-nofee {
  font-family: 'Asta Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(174, 224, 255, 0.85);
  padding: 0;
  margin: 16px 0 0;
  display: block;
}
/* the slash brackets belong to the old subhead only */
.hm-bnr-rgt p.hm-bnr-lead::before, .hm-bnr-rgt p.hm-bnr-lead::after,
.hm-bnr-rgt p.hm-bnr-tagline::before, .hm-bnr-rgt p.hm-bnr-tagline::after,
.hm-bnr-rgt p.hm-bnr-nofee::before, .hm-bnr-rgt p.hm-bnr-nofee::after { display: none; }
/* two remaining rail items read a touch larger now that the rail is shorter */
.hm-bnr-creds li { font-size: 15px; }
/* left-aligned hero: the rail and language line follow the text edge */
.hm-bnr-rgt .hm-bnr-creds { justify-content: flex-start; margin: 26px 0 0; }
.hm-bnr-rgt .hm-bnr-esp { text-align: left; }
@media (max-width: 992px) {
  /* stacked layout: recenter the whole column, drop the accent rule */
  .hm-bnr-rgt { text-align: center; }
  .hm-bnr-rgt::before { content: none; }
  .hm-bnr-rgt h1.hm-bnr-kicker { width: auto; padding: 0; margin: 0 auto 16px; }
  .hm-bnr-rgt h1.hm-bnr-kicker strong { font-size: 13px; letter-spacing: 4px; }
  .hm-bnr-rgt h1.hm-bnr-kicker strong::before { display: none; }
  .hm-bnr-rgt p.hm-bnr-lead { padding: 0 14px; letter-spacing: 3px; }
  .hm-bnr-rgt p.hm-bnr-lead em { font-size: clamp(30px, 7.4vw, 44px); }
  .hm-bnr-rgt p.hm-bnr-tagline { padding: 0 14px; letter-spacing: 1.8px; margin-left: auto; margin-right: auto; }
  .hm-bnr-rgt .hm-bnr-creds { justify-content: center; margin: 22px auto 0; }
  .hm-bnr-rgt .hm-bnr-esp { text-align: center; }
  .hm-bnr-lft { padding: 0; }
  .hero-exhibit { margin: 0 auto; max-width: min(420px, 84vw); }
  .hero-exhibit::before { inset: 14px -10px -10px 14px; }
  .hero-exhibit figcaption { left: -10px; bottom: 18px; }
}