/* ==========================================================================
   The Valentine Law Firm - main.css
   CSS VERSION: 19

   DESIGN DIRECTION
   Paper-first, near-monochrome, one restrained accent. The reference points
   are Susman Godfrey, Keller Postman and Lieff Cabraser, not the navy-and-gold
   template every regional injury firm uses. Authority comes from restraint,
   typographic scale and whitespace, never from ornament.

     surface   warm paper, not blue-white
     ink       near-black with a warm cast
     accent    deep oxblood, used for action and emphasis ONLY
     display   Newsreader, editorial serif, tight tracking at large sizes
     rule      hairlines instead of boxes; almost no card borders

   SOP hard rules enforced structurally:
     - NEVER * { max-width:100% }        -> scroll collapse in Chrome
     - overflow-x:hidden on html ONLY    -> white gap on mobile Chrome (#20)
     - ONE @media block, at the end      -> no scattered queries (#8)
     - components scoped to a parent     -> .faq__item not .item (#10)
     - z-index: overlay 1100 < header 1200; nav is scoped INSIDE header (#54)
     - .prose .btn colour override       -> content link colour eating buttons (#43)
     - .prose .cta-box h2 override       -> h2 borders bleeding into components (#44)
     - every text/bg pair >= 4.5:1 (3:1 large)
     - no display:none !important debug rules (#45)
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surface */
  --paper: #FBFAF7;
  --paper-2: #F4F1EA;
  --paper-3: #EDE9E0;
  --white: #FFFFFF;

  /* ink - warm near-black, never pure #000 */
  --ink: #16181B;
  --ink-2: #33383E;
  --ink-3: #5C636B;
  --ink-4: #676D73;

  /* accent - deep oxblood. Action and emphasis only. */
  --accent: #6E2434;
  --accent-dark: #521A27;
  --accent-soft: #F3E9EA;

  /* hairlines */
  --rule: #DFD9CE;
  --rule-strong: #C6BEB0;
  --rule-dark: rgba(255, 255, 255, .16);

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --wrap: 1100px;
  --wrap-narrow: 780px;
  --radius: 3px;

  /* Z-INDEX MAP. .nav lives INSIDE .site-header, so its z-index is scoped to
     the header's stacking context. The header itself must therefore sit ABOVE
     the overlay, or the overlay covers the drawer. This is SOP #54 arriving
     from the opposite direction: mind the PARENT stacking context, not just
     the sibling values. */
  --z-sticky: 900;
  --z-overlay: 1100;
  --z-header: 1200;   /* > overlay, because it contains the drawer */
  --z-nav: 10;        /* within the header context */
  --z-nav-toggle: 20; /* above the drawer, it is the close affordance */
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;            /* html ONLY. NEVER body. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, iframe, svg { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 3.1vw, 4.1rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.4rem); letter-spacing: -.022em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); letter-spacing: -.012em; font-weight: 500; }
h4 { font-size: 1.05rem; font-weight: 500; }
p { margin: 0 0 1.2em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: .8rem 1.25rem; z-index: 9999; font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.muted { color: var(--ink-3); }
.section { padding: clamp(3.25rem, 6vw, 6rem) 0; }
.section__lede { max-width: 60ch; color: var(--ink-3); font-size: 1.1rem; }
.section__more { margin-top: 2rem; }
.section__more a {
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}

/* eyebrow label above section headings */
.eyebrow {
  display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .95rem 1.75rem; min-height: 50px;
  font-family: var(--font-body); font-weight: 600; font-size: .9375rem;
  letter-spacing: .01em; border-radius: var(--radius);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.btn--primary { background: var(--accent); color: var(--white); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; min-height: 56px; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: relative; z-index: var(--z-header);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.topbar { border-bottom: 1px solid var(--rule); color: var(--ink-3); font-size: .8125rem; }
.topbar__inner { display: flex; gap: 2rem; justify-content: flex-end; padding: .6rem 0; }
.topbar__item { letter-spacing: .01em; }
.header__inner { display: flex; align-items: center; gap: 2rem; padding: 1.35rem 0; }

.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand__mark {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 400; font-size: 1.4rem;
  border-radius: 2px;
}
.brand__name {
  font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
  color: var(--ink); line-height: 1.1; max-width: 13ch; letter-spacing: -.02em;
}
.brand--footer .brand__mark { background: var(--paper); color: var(--ink); }
.brand--footer .brand__name { color: var(--white); }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.header__phone {
  color: var(--ink); font-weight: 600; text-decoration: none; font-size: 1rem;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.header__phone:hover { color: var(--accent); }

.nav__list { list-style: none; display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; }
.nav__item > a {
  display: block; padding: .55rem .8rem; color: var(--ink-2);
  text-decoration: none; font-size: .9375rem; font-weight: 500; border-radius: 2px;
}
.nav__item > a:hover { color: var(--accent); }
.nav__item--cta { margin-left: .5rem; }
.nav__item--cta .btn { padding: .6rem 1.2rem; min-height: 42px; font-size: .875rem; }
/* A button inside a nav or content area must NEVER inherit that area's link
   colour. `.nav__item > a` is 0,1,1 and beats `.btn--primary` at 0,1,0, which
   renders the CTA as dark text on a dark background. This is SOP #43 in a new
   place, so the guard is written for ANY container, not just this one. */
.nav__item > a.btn--primary,
.nav__list a.btn--primary,
a.btn--primary { color: var(--white); }
.nav__item > a.btn--outline,
a.btn--outline { color: var(--ink); }
.nav__item > a.btn--outline:hover,
a.btn--outline:hover { color: var(--white); }
.nav__item > a.btn--ghost,
a.btn--ghost { color: var(--white); }
.nav__item > a.btn--ghost:hover,
a.btn--ghost:hover { color: var(--ink); }

.nav__item--has-menu { position: relative; }
.nav__menu {
  list-style: none; margin: 0; padding: .6rem; position: absolute; top: 100%; left: 0;
  min-width: 280px; background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(22, 24, 27, .13);
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a {
  display: block; padding: .5rem .7rem; color: var(--ink-2);
  text-decoration: none; font-size: .9375rem; border-radius: 2px;
}
.nav__menu a:hover { background: var(--paper-2); color: var(--accent); }

.nav__toggle, .nav__sub-toggle { display: none; }

/* --------------------------------------------------------------- crumbs */
.crumbs { border-bottom: 1px solid var(--rule); font-size: .8125rem; background: var(--paper); }
.crumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: .85rem 0; }
.crumbs__list li + li::before { content: "/"; margin-right: .45rem; color: var(--ink-4); }
.crumbs__list a { color: var(--ink-3); text-decoration: none; }
.crumbs__list a:hover { color: var(--accent); text-decoration: underline; }
.crumbs__list [aria-current] { color: var(--ink); }

/* ----------------------------------------------------------------- hero */
.hero { background: var(--paper); padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3rem, 5vw, 5rem); }
.hero__inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.hero__title { max-width: 16ch; margin-bottom: .55em; }
.hero__lede { max-width: 52ch; font-size: clamp(1.075rem, 1rem + .4vw, 1.2rem); color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2.25rem 0 0; }

/* the consultation panel that fills what used to be dead space */
.hero__panel {
  background: var(--ink); color: var(--paper); padding: 2.25rem 2rem;
  border-radius: var(--radius);
}
.hero__panel h2 {
  color: var(--white); font-size: 1.45rem; margin-bottom: .6rem; letter-spacing: -.02em;
}
.hero__panel p { color: rgba(251, 250, 247, .78); font-size: .9375rem; }
.hero__panel .btn { width: 100%; margin-top: .5rem; }
.hero__stats { list-style: none; margin: 0 0 1.5rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule-dark); }
.hero__stats li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; font-size: .875rem; color: rgba(251, 250, 247, .72); }
.hero__stats strong {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
  color: var(--white); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero__panel-note { font-size: .75rem; color: rgba(251, 250, 247, .5); margin: .9rem 0 0; text-align: center; }


/* ------------------------------------------------------------ hero (inner)
   Two columns: copy left, consultation card right, stat row beneath. The card
   is what fills the right half of the band. */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.hero-copy { min-width: 0; }
.section-label--rule { display: flex; align-items: center; gap: .75rem; }
.section-label--rule::before {
  content: ""; width: 32px; height: 1px; background: currentColor; flex: 0 0 32px;
}

.hero-stats {
  list-style: none; margin: 2.5rem 0 0; padding: 1.75rem 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem;
}
.hero-stats strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--white);
  letter-spacing: -.02em; line-height: 1.1;
}
.hero-stats span {
  display: block; margin-top: .3rem; font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(251,250,247,.55);
}

.hero-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 2rem 1.75rem;
}
.hero-card h2 { color: var(--white); font-size: 1.4rem; margin-bottom: .5rem; }
.hero-card p { color: rgba(251,250,247,.75); font-size: .9375rem; }
.hero-card .btn { width: 100%; margin-top: .5rem; }
.hero-card__phone {
  display: block; text-align: center; margin-top: 1rem;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--white);
  text-decoration: none; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.hero-card__phone:hover { color: var(--white); text-decoration: underline; }
.hero-card__note {
  font-size: .75rem; color: rgba(251,250,247,.55); margin: 1rem 0 0; text-align: center;
}

/* ------------------------------------------------------------- page hero
   Full width dark band opening every inner page. Replaces .page-head, which
   sat in a different container width from the body and misaligned with it. */
.page-hero { padding-block: clamp(3rem, 5.5vw, 4.75rem); }
.page-hero h1 { color: var(--white); max-width: 20ch; margin-bottom: .45em; }
.page-hero__lede {
  color: rgba(251,250,247,.8); font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  max-width: 62ch; margin: 0;
}
.page-hero .hero__actions { margin-top: 2rem; }

/* prose that has no second column centres its measure rather than sitting
   left inside a wide container (the defect this rebuild removed) */
.prose--centred { max-width: 72ch; margin-inline: auto; }
.prose--centred > h2:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- prose */
.prose { max-width: none; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; }
.prose ul.bullets { padding-left: 1.15rem; }
.prose ul.bullets li { margin-bottom: .55rem; }
.prose p a, .prose td a, .prose dd a { text-decoration: underline; }
.prose li a, .prose h2 a, .prose h3 a, .prose h4 a { text-decoration: none; }
.prose li a:hover { text-decoration: underline; }

/* content link colour must NEVER eat button text (SOP #43) */
.prose .btn, .prose .btn:hover { text-decoration: none; }
.prose .btn--primary { color: var(--white) !important; }
.prose .btn--ghost { color: var(--white) !important; }
/* h2 rules must not bleed into component headings (SOP #44) */
.prose .cta-box h2, .prose .cta-box__title {
  color: var(--white) !important; border: none !important; margin-top: 0 !important;
}


/* =========================================================== layout system
   Rebuilt on the pattern used by thebatonrougetruckaccident.lawyer: one
   1100px container, full width alternating bands, an eyebrow label on every
   section, and body copy in TWO COLUMNS rather than a single narrow measure.

   The previous version put a 72ch column inside a 1280px box, which stranded
   ~950px of dead space on the right at desktop widths. There is no narrow
   prose column here at all: copy fills the container in two balanced columns
   (~62ch each), and everything enumerable becomes a card grid or a table.
   ========================================================================== */

.section-inner { max-width: 1100px; margin-inline: auto; }

.section-label {
  display: block; font-family: var(--font-body);
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .7rem;
}
.band--dark .section-label { color: var(--gold-on-dark, #C9A250); }

.band { padding: clamp(3.25rem, 6vw, 4.75rem) clamp(1.25rem, 4vw, 3.75rem); }
.band--paper { background: var(--paper); }
.band--tint  { background: var(--paper-2); border-block: 1px solid var(--rule); }
.band--dark  { background: var(--ink); color: rgba(251,250,247,.82); }
.band--dark h2, .band--dark h3 { color: var(--white); }

.band h2 { max-width: 24ch; }
.lead {
  font-size: clamp(1.075rem, 1rem + .35vw, 1.2rem); font-weight: 400;
  color: var(--ink-2); line-height: 1.7; max-width: 78ch; margin-bottom: 1.5rem;
}
.band--dark .lead { color: rgba(251,250,247,.8); }

/* body copy in two balanced columns, the reference pattern */
.two-col { display: grid; grid-template-columns: 1fr; gap: 0 3.75rem; }
.two-col > p { margin-bottom: 1.2em; }
.two-col--blocks > div > h2 { margin-top: 0; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); }
.two-col--blocks > div > p:last-child { margin-bottom: 0; }
.two-col > p:last-child { margin-bottom: 0; }

/* arrow list, used wherever content is enumerable */
.info-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.info-list li {
  padding: .7rem 0 .7rem 1.75rem; border-bottom: 1px solid var(--rule);
  font-size: .9375rem; position: relative;
}
.info-list li::before {
  content: "\2192"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.band--dark .info-list li { border-bottom-color: rgba(255,255,255,.14); }

/* card grids */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.25rem; list-style: none; padding: 0; }
/* .card is applied to an <a>. Anchors are display:inline, so padding on one
   does NOT create a box: the background collapses and the text spills out of
   it. Every card must be a block level flex column, and the grid item must
   stretch so cards in a row match height. */
.card-grid > li { display: flex; }
.card {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.75rem 1.5rem; box-shadow: 0 2px 16px rgba(22,24,27,.05);
}
.card__more { margin-top: auto; padding-top: .9rem; }
.card--link { transition: transform .18s, box-shadow .18s, border-color .18s; }
a.card, .card a { text-decoration: none; }
a.card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(22,24,27,.1); border-color: var(--accent); }
.card__title { margin: 0 0 .5rem; font-size: 1.2rem; }
.card__body { margin: 0; font-size: .9375rem; color: var(--ink-3); }
.card__more { font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); }
.card--accent { border-top: 3px solid var(--accent); }
.band--dark .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.band--dark .card__body { color: rgba(251,250,247,.7); }

/* ---------------------------------------------------------------- table */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; margin: 1.75rem 0 2.25rem; font-size: .9375rem; }
.table caption {
  text-align: left; font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding-bottom: .85rem;
}
.table th, .table td { text-align: left; padding: .85rem .9rem .85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table thead th {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
  border-bottom: 1px solid var(--rule-strong);
}
.table tbody th { font-weight: 600; color: var(--ink); padding-right: 1.5rem; }

/* --------------------------------------------------------------- grids */
.pa-grid, .person-grid, .person-cards, .link-grid, .link-row, .awards__list, .review-grid {
  list-style: none; margin: 0; padding: 0;
}

/* practice areas as an editorial index, not a card grid */
.pa-grid { display: grid; grid-template-columns: 1fr; margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.pa-card__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem .25rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; transition: padding-left .2s, background .2s;
}
.pa-card__link:hover { padding-left: 1rem; background: var(--paper-2); }
.pa-card__title { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--ink); letter-spacing: -.02em; }
.pa-card__link:hover .pa-card__title { color: var(--accent); }
.pa-card__more { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }

.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .55rem 1.5rem; margin: 1.25rem 0 1.75rem; }
.link-grid li { padding-left: .95rem; position: relative; }
.link-grid li::before { content: ""; position: absolute; left: 0; top: .78em; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.link-row { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 1.5rem 0 0; font-size: .9375rem; }

/* ---------------------------------------------------- grouped link cards
   Used by the blog index. The previous version was a bullet grid of
   underlined links which read as a wall of red text with ragged columns. */
.group-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  margin-top: 2.25rem; list-style: none; padding: 0;
}
.group {
  background: var(--white); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
}
.group__title { margin: 0 0 .35rem; font-size: 1.2rem; }
.group__title a { color: var(--ink); text-decoration: none; }
.group__title a:hover { color: var(--accent); }
.group__count {
  display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: .9rem;
}
.group__list { list-style: none; margin: 0; padding: 0; }
.group__list li { border-top: 1px solid var(--rule); }
.group__list a {
  display: block; padding: .65rem 1.25rem .65rem 0; position: relative;
  font-size: .9375rem; color: var(--ink-2); text-decoration: none; line-height: 1.45;
}
.group__list a::after {
  content: "\2192"; position: absolute; right: 0; top: .65rem;
  color: var(--rule-strong); transition: transform .16s, color .16s;
}
.group__list a:hover { color: var(--accent); }
.group__list a:hover::after { color: var(--accent); transform: translateX(3px); }

/* ------------------------------------------------------------------ local */
.office { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.office__details h2, .office__details h3 { margin-top: 0; }
.nap__name { font-weight: 600; }
.nap--lg { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.55;
  color: var(--ink); letter-spacing: -.015em; margin-bottom: .75rem; }
.nap__phone { display: inline-block; font-family: var(--font-display); font-size: 1.6rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.nap__phone:hover { color: var(--accent); }
.nap__email { margin: .4rem 0 0; font-size: .9375rem; }

.office__meta { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem;
  margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .9375rem; }
.office__meta dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); padding-top: .25rem; white-space: nowrap; }
.office__meta dd { margin: 0; color: var(--ink-2); }
.office__links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
  margin: 0; font-size: .9375rem; }

/* third party iframe: reserve its box so it cannot shift layout */
.map { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  background: var(--paper-2); }
.map__frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; border: 0; }

.attorney-photo { border-radius: var(--radius); border: 1px solid var(--rule);
  background: var(--paper-2); width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; }
.person-card__photo { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 1rem; background: var(--paper-2); }
.bio { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.person__thumb { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius); margin-bottom: .9rem; background: var(--paper-2); }

/* --------------------------------------------------------------- people */
.person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; margin-top: 2.25rem; }
.person__link { display: block; padding: 1.75rem 0 0; border-top: 2px solid var(--ink); text-decoration: none; transition: border-color .2s; }
.person__link:hover { border-color: var(--accent); }
.person__name { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); letter-spacing: -.02em; }
.person__link:hover .person__name { color: var(--accent); }
.person__role { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-top: .3rem; }

/* Attorney cards. This was a single column list, so a width:100% photo
   inside it rendered ~1100px wide and swallowed the page. */
.person-cards { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.person-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
  padding: 0 0 1.5rem; overflow: hidden;
}
.person-card__photo {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 18%;
  display: block; margin: 0 0 1.25rem; background: var(--paper-2);
}
.person-card__name { margin: 0 0 .2rem; font-size: 1.4rem; padding-inline: 1.5rem; }
.person-card__name a { text-decoration: none; color: var(--ink); }
.person-card__name a:hover { color: var(--accent); }
.person-card__role {
  color: var(--ink-4); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 .9rem; padding-inline: 1.5rem;
}
.person-card__edu { font-size: .875rem; color: var(--ink-3); padding-inline: 1.5rem; margin-bottom: .75rem; }
.person-card .person__awards { padding-inline: 1.5rem; }
.person-card__more {
  margin-top: auto; padding: .9rem 1.5rem 0; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--accent);
}

/* ------------------------------------------------------------------- bio
   Photo + credentials in a sticky aside, prose to the right. The previous
   version stacked short facts as band scale h2 sections, which read as a
   nearly empty page. */
.bio-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.bio-aside {
  background: var(--white); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent); border-radius: var(--radius); overflow: hidden;
}
.bio-aside__photo {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 18%;
  display: block; background: var(--paper-2);
}
.bio-facts { padding: 1.5rem; margin: 0; }
.bio-facts dt {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 1.15rem;
}
.bio-facts dt:first-child { margin-top: 0; }
.bio-facts dd { margin: .3rem 0 0; font-size: .9375rem; color: var(--ink-2); line-height: 1.55; }
.bio-facts ul { list-style: none; margin: .3rem 0 0; padding: 0; }
.bio-facts li { font-size: .9375rem; padding: .2rem 0; }
.bio-facts a { color: var(--ink-2); text-decoration: none; }
.bio-facts a:hover { color: var(--accent); text-decoration: underline; }
.bio-main h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); }
.bio-main h2 + .review-grid { margin-top: 1.5rem; }
.review-grid--tight { gap: 1.75rem; margin-top: 1.5rem; }
.bio-main h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------- awards */
.awards { background: var(--paper-2); padding: clamp(2.75rem, 5vw, 4.25rem) 0; border-block: 1px solid var(--rule); }
.awards h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.awards__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem 2.5rem; margin-top: 2.25rem; }
.award { border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.award__body { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4); margin-bottom: .5rem; }
.award__name { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); line-height: 1.25; letter-spacing: -.015em; }
.award__who { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: .4rem; }

/* -------------------------------------------------------------- reviews */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 2.5rem; margin-top: 2.5rem; }
.review { margin: 0; display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.review__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; order: 2; }
.review__avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--paper-3); color: var(--ink-2); font-weight: 600; font-size: .8125rem; }
.review__author { font-weight: 600; color: var(--ink); font-size: .9375rem; }
.review__stars { color: var(--accent); font-size: .8125rem; letter-spacing: .1em; display: block; }
.review__body { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.55; color: var(--ink); order: 1; letter-spacing: -.01em; }
.review__body p { margin: 0; }
.review__date { font-size: .75rem; color: var(--ink-4); order: 3; margin-top: .35rem; }
.review__note { font-size: .7rem; color: var(--ink-4); font-style: italic; margin: .5rem 0 0; order: 4; }

/* ------------------------------------------------------------------ faq */
.faq { padding: clamp(3rem, 5vw, 5rem) 0; border-top: 1px solid var(--rule); }
.faq h2 { max-width: 20ch; }
.faq__list { max-width: 80ch; margin-top: 2rem; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { margin: 0; font-size: 1.125rem; }
.faq__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.4rem 2.75rem 1.4rem 0; position: relative;
  font-family: var(--font-display); font-size: inherit; font-weight: 400;
  color: var(--ink); line-height: 1.35; letter-spacing: -.015em;
}
.faq__btn:hover { color: var(--accent); }
.faq__btn::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq__btn[aria-expanded="true"]::after { transform: translateY(-30%) rotate(225deg); }
.faq__a { display: none; padding: 0 0 1.5rem; max-width: 70ch; color: var(--ink-2); }
.faq__a p { margin: 0; }
.faq__item.is-open .faq__a { display: block; }

/* -------------------------------------------------------------- cta box */
.cta-box { background: var(--ink); color: var(--paper); padding: clamp(3rem, 5vw, 4.75rem) 0; }
.cta-box .wrap { max-width: var(--wrap-narrow); }
.cta-box__title { color: var(--white); max-width: 22ch; }
.cta-box__body { max-width: 56ch; color: rgba(251, 250, 247, .76); font-size: 1.05rem; }
.cta-box__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2rem 0 1.1rem; }
.cta-box__fee { font-size: .8125rem; color: rgba(251, 250, 247, .55); margin: 0; }

/* -------------------------------------------------------------- contact */
.contact__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.contact__form-col { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2rem; align-self: start; }
.contact__details h2:first-child { margin-top: 0; }
.contact__details h2 { font-size: 1.3rem; margin-top: 2.25rem; }
.nap { font-style: normal; }
.nap--lg { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.5; color: var(--ink); letter-spacing: -.015em; }
.nap__phone { font-weight: 600; }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: rgba(251, 250, 247, .74); padding: clamp(3.25rem, 5vw, 4.75rem) 0 0; font-size: .9375rem; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer__col--wide .brand { margin-bottom: 1.25rem; }
.footer__head { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(251, 250, 247, .5); margin-bottom: 1.1rem; font-family: var(--font-body); font-weight: 600; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .55rem; }
.site-footer a { color: rgba(251, 250, 247, .74); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer .nap { color: rgba(251, 250, 247, .74); line-height: 1.8; }
.footer__hours, .footer__fee { margin: 1.1rem 0 0; }
.footer__fee { color: var(--white); }
.site-footer .muted { color: rgba(251, 250, 247, .5); }
.footer__legal { border-top: 1px solid var(--rule-dark); padding: 1.75rem 0 2.25rem; }
.disclaimer { font-size: .75rem; color: rgba(251, 250, 247, .5); max-width: 92ch; line-height: 1.7; }
.footer__legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0; padding: 0; font-size: .8125rem; }
.copyright { font-size: .75rem; color: rgba(251, 250, 247, .5); margin: 0; }

/* ----------------------------------------------------------- sticky cta */
.sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); box-shadow: 0 -2px 18px rgba(22, 24, 27, .16); }
.sticky-cta__btn { flex: 1; display: grid; place-items: center; min-height: 58px; font-weight: 600; text-decoration: none; font-size: .9375rem; letter-spacing: .01em; }
.sticky-cta__btn--call { background: var(--ink); color: var(--white); }
.sticky-cta__btn--consult { background: var(--accent); color: var(--white); }

/* --------------------------------------------------------- pending links
   Targets not built yet are defanged by _build/sync.py into a <span> that
   KEEPS the original class, so layout holds. Restored automatically once
   the target exists. Nothing here should survive to launch. */
.link-pending { cursor: default; opacity: .45; }
.nav__item > .link-pending { display: block; padding: .55rem .8rem; font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
.pa-card__link.link-pending:hover { padding-left: .25rem; background: none; }

/* ==========================================================================
   RESPONSIVE - ONE block, at the end. Never scatter @media. (SOP #8)
   ========================================================================== */
@media (min-width: 640px) {
}

@media (min-width: 700px) {
  .group-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 700px) {
  .person-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .office { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .person-cards { grid-template-columns: repeat(3, 1fr); }
  .bio-grid { grid-template-columns: 340px 1fr; gap: 3.5rem; }
  .bio-aside { position: sticky; top: 2rem; }
  .group-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-grid { grid-template-columns: 1.5fr minmax(300px, .9fr); gap: 4rem; }
  /* no consultation card means no second column: the copy spans the width
     instead of sitting in a half-empty grid */
  .hero-grid--solo { grid-template-columns: 1fr; }
  .hero-grid--solo .page-hero__lede { max-width: 72ch; }
  .hero-grid--solo .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col--balanced > p { break-inside: avoid; }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .hero__inner { grid-template-columns: 1.35fr .8fr; gap: 4rem; }
  .pa-grid { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
  .contact__grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; }
}

@media (max-width: 1023px) {
  .topbar__item--hours { display: none; }

  .nav__toggle {
    display: grid; place-items: center; width: 46px; height: 46px;
    background: transparent; border: 1px solid var(--rule-strong);
    border-radius: 2px; cursor: pointer; position: relative;
    z-index: var(--z-nav-toggle);   /* above the drawer: it IS the close button */
  }
  .nav__bars, .nav__bars::before, .nav__bars::after {
    display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s;
  }
  .nav__bars::before, .nav__bars::after { content: ""; position: absolute; }
  .nav__bars::before { transform: translateY(-6px); }
  .nav__bars::after { transform: translateY(6px); }
  .nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
  .nav__toggle[aria-expanded="true"] .nav__bars::before { transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__bars::after { transform: rotate(-45deg); }

  /* position:absolute, NEVER fixed (SOP #12) */
  .nav {
    position: absolute; top: 0; right: 0;
    width: min(350px, 88vw); min-height: 100vh;
    background: var(--paper); padding: 6rem 1.5rem 3rem;
    border-left: 1px solid var(--rule);
    transform: translateX(100%); transition: transform .28s ease;
    z-index: var(--z-nav); overflow-y: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .nav.is-open { transform: translateX(0); }

  /* plain dim colour. NO backdrop-filter, it bleeds on WebKit (SOP #36) */
  .nav__overlay { position: fixed; inset: 0; background: rgba(22, 24, 27, .5); z-index: var(--z-overlay); }
  .nav__overlay[hidden] { display: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rule); }
  .nav__item > a, .nav__item > .link-pending { padding: .95rem .25rem; font-size: 1.05rem; font-family: var(--font-display); }
  .nav__item--has-menu { position: relative; padding-right: 3rem; }
  .nav__sub-toggle { display: block; position: absolute; right: 0; top: .35rem; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; }
  .nav__sub-toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
    transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s;
  }
  .nav__sub-toggle[aria-expanded="true"]::after { transform: translate(-50%, -30%) rotate(225deg); }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; min-width: 0;
    padding: 0 0 .6rem .6rem; display: none;
  }
  .nav__menu.is-open { display: block; }
  .nav__menu a, .nav__menu .link-pending { color: var(--ink-3); padding: .5rem .25rem; font-size: .9375rem; font-family: var(--font-body); }
  .nav__item--cta { border-bottom: 0; margin: 1.25rem 0 0; }
  .nav__item--cta .btn { width: 100%; }

  .header__phone { font-size: 0; }
  .header__phone::before { content: "Call"; font-size: .9375rem; }

  .sticky-cta { display: flex; }
  body { padding-bottom: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .sticky-cta, .nav__overlay, .cta-box, .skip-link, .hero__panel { display: none; }
  body { color: #000; background: #fff; }
}