@charset "utf-8";
/* ==========================================================================
   AVENA LAW OFFICE, LLC - Site Stylesheet
   Design language: civic/institutional structure (USWDS-derived bones)
   with courthouse-document texture. Single typeface: Monomakh (400 only).

   NOTE: Monomakh ships ONE weight and NO italic. All emphasis therefore comes
   from scale, tracking, caps, rules, colour and enclosure - never font-weight.
   Author: Avena Web Design
   ========================================================================== */

/* ---------- 1. Font (self-hosted, no third-party request) ---------------- */
@font-face {
  font-family: 'Monomakh';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/monomakh-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Monomakh';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/monomakh-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------------------------------------------------- */
:root {
  --font: 'Monomakh', Georgia, 'Times New Roman', serif;

  --ink: #0a1725;
  --navy: #10243a;
  --navy-2: #16324f;
  --slate: #2f4358;
  --muted: #54677c;
  --gold: #8c621c;              /* 5.41:1 on white, 4.97 on parchment, 4.85 on mist */
  --gold-br: #d7a83a;
  --gold-lt: #eed9a4;
  --seal: #7c1c1c;
  --seal-lt: #fbeded;
  --green: #1c5b3a;
  --green-lt: #eaf5ef;

  --paper: #ffffff;
  --parch: #f8f5ee;
  --mist: #eef3f8;
  --mist-2: #e2ebf4;
  --line: #cfdae5;
  --line-soft: #e4ecf3;
  --line-dark: rgba(255, 255, 255, .20);

  --shell: 1200px;
  --gut: clamp(18px, 4vw, 32px);

  --r: 3px;
  --r-lg: 5px;

  --sh-1: 0 1px 2px rgba(10, 23, 37, .08), 0 2px 8px rgba(10, 23, 37, .06);
  --sh-2: 0 2px 4px rgba(10, 23, 37, .08), 0 12px 28px rgba(10, 23, 37, .10);
  --sh-3: 0 4px 8px rgba(10, 23, 37, .10), 0 24px 60px rgba(10, 23, 37, .16);

  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 26px;
  --sp-5: 38px;
  --sp-6: 54px;
  --sp-7: 76px;
  --sp-8: 104px;

  --band: clamp(52px, 7vw, 96px);
}

/* ---------- 3. Reset / base --------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font);
  /* Monomakh has a small x-height: bump base size and leading for legibility */
  font-size: clamp(17.5px, 1.05vw, 19px);
  line-height: 1.78;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; vertical-align: middle; }
img { background: var(--mist); }

a {
  color: #0f4c86;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color .18s ease;
}
a:hover { color: var(--navy); text-decoration-thickness: 2px; }

p { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.35em; }
li { margin: 0 0 .5em; }
hr { border: 0; height: 1px; background: var(--line); margin: var(--sp-5) 0; }
blockquote { margin: 0; }
figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid #1a72c4; outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--gold-lt); color: var(--ink); }

/* Monomakh has no bold. Render <strong> as a tracked navy accent rather than
   letting the browser synthesise a smeared faux-bold. */
strong, b { font-weight: 400; color: var(--navy); letter-spacing: .012em; }
em, i {
  font-style: normal;
  color: var(--navy);
  border-bottom: 1px solid var(--gold-lt);
  padding-bottom: .06em;
}

/* ---------- 4. Typographic scale ---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(35px, 4.6vw, 60px); line-height: 1.08; }
h2 { font-size: clamp(28px, 3.3vw, 44px); line-height: 1.12; }
h3 { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.22; }
h4 { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.3; }
h5, h6 { font-size: 17px; }

.eyebrow,
.law-eyebrow,
.avena-eyebrow {
  display: block;
  margin: 0 0 var(--sp-2);
  color: var(--gold);
  font-size: clamp(12px, .85vw, 13.5px);
  letter-spacing: .20em;
  text-transform: uppercase;
  line-height: 1.5;
}
.eyebrow::before,
.law-eyebrow::before,
.avena-eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  vertical-align: .32em;
  margin-right: .7em;
}

.lede,
.law-subhead,
.avena-subhead,
.law-section-intro,
.avena-section-intro,
.avena-contact-lead {
  font-size: clamp(18.5px, 1.35vw, 22px);
  line-height: 1.68;
  color: var(--slate);
  margin: 0 0 var(--sp-4);
  max-width: 74ch;
}

.fine,
.law-disclaimer,
.avena-disclaimer {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  letter-spacing: .005em;
}

/* ---------- 5. Layout ---------------------------------------------------- */
.shell,
.container,
.avena-container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shell--narrow { max-width: 880px; }

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * .62); }

.center { text-align: center; }
.center .lede,
.center .law-section-intro,
.center .avena-section-intro { margin-inline: auto; }
.center .eyebrow::before,
.center .law-eyebrow::before,
.center .avena-eyebrow::before { display: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--navy);
  color: #fff;
  padding: 14px 22px;
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 14px;
}
.skip:focus { left: 0; }

/* ---------- 6. Courthouse ornament -------------------------------------- */
/* Engraved double rule */
.rule {
  height: 6px;
  width: 120px;
  background:
    linear-gradient(var(--gold-br), var(--gold-br)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--gold-br), var(--gold-br)) 0 5px / 100% 1px no-repeat;
}
.rule--center { margin-inline: auto; }
.rule--full { width: 100%; }

.sechead { margin-bottom: var(--sp-5); }
.sechead--center { text-align: center; }
.sechead--center .rule { margin-inline: auto; }
.sechead h2 { margin-bottom: var(--sp-2); }

/* Parchment field */
.parch {
  background:
    radial-gradient(1200px 400px at 12% -10%, rgba(168, 122, 34, .055), transparent 60%),
    radial-gradient(900px 380px at 92% 110%, rgba(16, 36, 58, .05), transparent 62%),
    var(--parch);
}

/* Faint engraved cross-hatch, like security paper */
.guilloche {
  background-image:
    repeating-linear-gradient(45deg, rgba(16, 36, 58, .028) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(16, 36, 58, .028) 0 1px, transparent 1px 9px);
}

/* Corner brackets - evokes an engraved certificate frame */
.bracket { position: relative; }
.bracket::before,
.bracket::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  border: 2px solid var(--gold-br);
  opacity: .75;
}
.bracket::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.bracket::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* Circular seal badge - the firm's own monogram, NOT a government seal */
.seal {
  --sz: 96px;
  width: var(--sz);
  height: var(--sz);
  flex: 0 0 var(--sz);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-lt);
  background:
    radial-gradient(circle, transparent 61%, rgba(215, 168, 58, .45) 61%, rgba(215, 168, 58, .45) 62%, transparent 62%),
    radial-gradient(circle, transparent 71%, rgba(215, 168, 58, .8) 71%, rgba(215, 168, 58, .8) 73%, transparent 73%),
    var(--navy);
  border: 1px solid rgba(215, 168, 58, .5);
  text-align: center;
  line-height: 1.1;
}
.seal span {
  display: block;
  font-size: calc(var(--sz) * .215);
  letter-spacing: .12em;
}
.seal small {
  display: block;
  font-size: calc(var(--sz) * .092);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .82;
  margin-top: .3em;
}

/* ---------- 7. Buttons --------------------------------------------------- */
.btn,
.law-btn,
.avena-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 15px 30px;
  min-height: 54px;
  border: 2px solid transparent;
  border-radius: var(--r);
  font-family: var(--font);
  font-size: clamp(15px, 1.05vw, 17px);
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover,
.law-btn:hover,
.avena-btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active,
.law-btn:active,
.avena-btn:active { transform: translateY(0); }

/* Primary - gold on navy, the single loudest thing on the page */
.btn--primary,
.law-btn-primary,
.avena-btn-primary {
  background: var(--gold-br);
  border-color: var(--gold-br);
  color: var(--ink);
  box-shadow: var(--sh-1);
}
.btn--primary:hover,
.law-btn-primary:hover,
.avena-btn-primary:hover {
  background: #e6bb55;
  border-color: #e6bb55;
  color: var(--ink);
  box-shadow: var(--sh-2);
}

/* Secondary - outline, adapts to light or dark ground */
.btn--secondary,
.law-btn-secondary,
.avena-btn-secondary {
  background: transparent;
  border-color: currentColor;
  color: var(--navy);
}
.btn--secondary:hover,
.law-btn-secondary:hover,
.avena-btn-secondary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Dark - solid navy */
.btn--dark,
.law-btn-dark,
.avena-btn-dark {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn--dark:hover,
.law-btn-dark:hover,
.avena-btn-dark:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }

.btn--block { width: 100%; }
.btn--lg { min-height: 62px; padding: 18px 38px; font-size: clamp(16px, 1.2vw, 19px); }

/* On dark grounds the outline button must read white */
.on-dark .btn--secondary,
.on-dark .law-btn-secondary,
.on-dark .avena-btn-secondary,
.law-dark .law-btn-secondary,
.law-dark .avena-btn-secondary,
.avena-dark .avena-btn-secondary,
.avena-dark .law-btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .6); }
.on-dark .btn--secondary:hover,
.on-dark .law-btn-secondary:hover,
.on-dark .avena-btn-secondary:hover,
.law-dark .law-btn-secondary:hover,
.law-dark .avena-btn-secondary:hover,
.avena-dark .avena-btn-secondary:hover,
.avena-dark .law-btn-secondary:hover { background: #fff; border-color: #fff; color: var(--navy); }

.cta-row,
.law-cta-row,
.avena-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
}
.law-centered,
.avena-centered,
.center .cta-row,
.center .law-cta-row,
.center .avena-cta-row { justify-content: center; }

/* ---------- 8. Identifier bar (top strip) -------------------------------- */
.idbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(215, 168, 58, .3);
}
.idbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-height: 42px;
  padding-block: 6px;
}
.idbar__org {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .55em;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}
.idbar__org::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: var(--gold-br);
  transform: rotate(45deg);
}
.idbar__actions { display: flex; align-items: center; gap: var(--sp-3); }
.idbar a { color: #fff; text-decoration: none; }
.idbar a:hover { color: var(--gold-br); }

.idbar__phone {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  letter-spacing: .08em;
}
.idbar__phone::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: var(--gold-br);
  clip-path: polygon(20% 0, 42% 0, 52% 26%, 38% 38%, 62% 62%, 74% 48%, 100% 58%, 100% 80%, 88% 96%, 62% 92%, 28% 72%, 8% 38%, 4% 12%);
}

/* Language switch - segmented control */
.lang {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r);
  overflow: hidden;
}
.lang a {
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
}
.lang a + a { border-left: 1px solid rgba(255, 255, 255, .28); }
.lang a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lang a[aria-current="true"] { background: var(--gold-br); color: var(--ink); }

/* ---------- 9. Masthead + navigation ------------------------------------ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16, 36, 58, .04);
}
.masthead::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--navy) 0 33.3%, var(--gold-br) 33.3% 66.6%, var(--navy) 66.6%);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 82px;
  padding-block: 10px;
}
.masthead__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.masthead__brand img { width: clamp(190px, 24vw, 285px); height: auto; background: none; }

.masthead__right { display: flex; align-items: center; gap: var(--sp-3); }

.navtoggle {
  display: none;
  align-items: center;
  gap: .55em;
  padding: 12px 16px;
  min-height: 48px;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.navtoggle__bars {
  display: inline-grid;
  gap: 3px;
  width: 18px;
}
.navtoggle__bars i { display: block; height: 2px; background: currentColor; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }

/* Primary nav */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: 2px; }
.nav > ul > li { position: relative; margin: 0; }
.nav > ul > li > a,
.nav > ul > li > button {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 11px 13px;
  background: none;
  border: 0;
  border-radius: var(--r);
  color: var(--navy);
  font-family: var(--font);
  font-size: clamp(15px, 1.05vw, 16.5px);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav > ul > li > a:hover,
.nav > ul > li > button:hover,
.nav > ul > li > button[aria-expanded="true"] { background: var(--mist); color: var(--navy); }
.nav > ul > li > a[aria-current="page"] {
  background: var(--mist);
  box-shadow: inset 0 -3px 0 var(--gold-br);
}
.nav__caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.nav > ul > li > button[aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translate(-1px, -1px); }

/* Dropdown panel */
.nav__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 300px;
  padding: var(--sp-2);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-br);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
}
.nav__panel[hidden] { display: none; }
.nav__panel--wide { min-width: min(620px, 78vw); columns: 2; column-gap: var(--sp-3); }
.nav__panel li { margin: 0; break-inside: avoid; }
.nav__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r);
  color: var(--slate);
  font-size: 16px;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.nav__panel a:hover { background: var(--mist); color: var(--navy); border-left-color: var(--gold-br); }
.nav__panel strong { display: block; color: var(--navy); }
.nav__panel span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.nav__panel .nav__head {
  padding: 8px 12px 4px;
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- 10. Urgent action bar --------------------------------------- */
.actionbar {
  background: var(--seal);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.actionbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-block: 11px;
  text-align: center;
}
.actionbar p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.actionbar strong { color: var(--gold-lt); }
.actionbar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gold-br);
  white-space: nowrap;
}
.actionbar a:hover { color: var(--gold-lt); }

/* ---------- 11. Breadcrumb ---------------------------------------------- */
.crumbs { background: var(--mist); border-bottom: 1px solid var(--line-soft); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  list-style: none;
  margin: 0;
  padding: 11px 0;
  font-size: 14px;
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: .4em; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--navy); }

/* ---------- 12. Hero -----------------------------------------------------
   Photography-led. The old build buried a 93%-opaque scrim over the photo,
   so every page read as a flat navy block. Two variants now:

   SPLIT (default, inner pages) - a light copy panel beside a full-bleed
   photograph. The photo is never dimmed, and the text never sits on it, so
   both stay legible without fighting each other.

   FEATURE (homepage, county pages) - full-bleed photograph with a directional
   scrim that is opaque only where the words are and clears to nothing across
   the rest of the frame.

   Both take their image from --hero-img, set per page on <body>.
   ------------------------------------------------------------------------ */
.hero,
.law-hero,
.avena-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: stretch;
  min-height: clamp(400px, 54vh, 600px);
  background: var(--paper);
  isolation: isolate;
  overflow: hidden;
}

/* The overlay element is repurposed as the photo panel. */
.law-hero-overlay,
.avena-hero-overlay,
.hero__media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  background-color: var(--navy);
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 42%;
  min-height: 260px;
}
/* A hairline of gold where the panel meets the copy, and a soft inner edge. */
.law-hero-overlay::before,
.avena-hero-overlay::before,
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 23, 37, .28) 0%, transparent 22%);
  pointer-events: none;
}
.law-hero-overlay::after,
.avena-hero-overlay::after,
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-br), rgba(215, 168, 58, .15));
}

.hero__inner,
.law-hero-content,
.avena-hero-content {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-width: none;
  margin: 0;
  padding-block: clamp(46px, 6vw, 84px);
  padding-inline: max(var(--gut), calc((100vw - var(--shell)) / 2)) clamp(28px, 4vw, 64px);
}
.hero__inner > *,
.law-hero-content > *,
.avena-hero-content > * { max-width: 30ch; }
.hero__inner > .law-cta-row,
.hero__inner > .avena-cta-row,
.law-hero-content > .law-cta-row,
.law-hero-content > .avena-cta-row,
.avena-hero-content > .law-cta-row,
.avena-hero-content > .avena-cta-row,
.law-hero-content > .law-trust-row,
.avena-hero-content > .law-trust-row { max-width: 40rem; }

/* Copy on the light panel */
.law-hero h1,
.avena-hero h1 { color: var(--navy); max-width: 16ch; }
.law-hero p,
.avena-hero p { color: var(--slate); }
.law-hero .law-subhead,
.avena-hero .avena-subhead,
.law-hero .avena-subhead,
.avena-hero .law-subhead { max-width: 40ch; color: var(--slate); }
.law-hero .law-eyebrow,
.law-hero .avena-eyebrow,
.avena-hero .avena-eyebrow,
.avena-hero .law-eyebrow { color: var(--gold); }
.law-hero .law-eyebrow::before,
.law-hero .avena-eyebrow::before,
.avena-hero .avena-eyebrow::before,
.avena-hero .law-eyebrow::before { background: var(--gold); }

/* Trust chips read as bordered pills on paper */
.hero__trust,
.law-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.hero__trust span,
.law-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--mist);
  color: var(--slate);
  font-size: 14px;
  letter-spacing: .03em;
}
.hero__trust span::before,
.law-trust-row span::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- FEATURE variant: full-bleed photograph, copy over a directional scrim */
.hero--feature,
.avena-homepage .law-hero,
.avena-county-page .avena-hero,
.avena-team-page .avena-hero {
  grid-template-columns: 1fr;
  min-height: clamp(480px, 72vh, 720px);
  background-color: var(--ink);
}
.avena-homepage .law-hero .law-hero-overlay,
.avena-county-page .avena-hero .avena-hero-overlay,
.avena-team-page .avena-hero .avena-hero-overlay,
.hero--feature .hero__media {
  grid-column: 1;
  grid-row: 1;
  inset: 0;
  position: absolute;
  z-index: 0;
  background-position: center 38%;
}
.avena-homepage .law-hero .law-hero-overlay::before,
.avena-county-page .avena-hero .avena-hero-overlay::before,
.avena-team-page .avena-hero .avena-hero-overlay::before,
.hero--feature .hero__media::before {
  background:
    linear-gradient(96deg, rgba(6, 15, 26, .90) 0%, rgba(8, 19, 32, .74) 34%, rgba(10, 23, 37, .30) 62%, rgba(10, 23, 37, .06) 100%),
    linear-gradient(0deg, rgba(6, 15, 26, .55) 0%, transparent 42%);
}
.avena-homepage .law-hero .law-hero-overlay::after,
.avena-county-page .avena-hero .avena-hero-overlay::after,
.avena-team-page .avena-hero .avena-hero-overlay::after,
.hero--feature .hero__media::after { display: none; }

.avena-homepage .law-hero .law-hero-content,
.avena-county-page .avena-hero .avena-hero-content,
.avena-team-page .avena-hero .avena-hero-content,
.hero--feature .hero__inner {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  padding-inline: max(var(--gut), calc((100vw - var(--shell)) / 2));
  padding-block: clamp(70px, 9vw, 128px);
}
.avena-homepage .law-hero h1,
.avena-county-page .avena-hero h1,
.avena-team-page .avena-hero h1,
.hero--feature h1 { color: #fff; max-width: 17ch; }
.avena-homepage .law-hero p,
.avena-county-page .avena-hero p,
.avena-team-page .avena-hero p,
.hero--feature p { color: rgba(255, 255, 255, .92); }
.avena-homepage .law-hero .law-eyebrow,
.avena-homepage .law-hero .avena-eyebrow,
.avena-county-page .avena-hero .avena-eyebrow,
.avena-team-page .avena-hero .avena-eyebrow,
.hero--feature .law-eyebrow,
.hero--feature .avena-eyebrow { color: var(--gold-br); }
.avena-homepage .law-hero .law-eyebrow::before,
.avena-county-page .avena-hero .avena-eyebrow::before,
.avena-team-page .avena-hero .avena-eyebrow::before { background: var(--gold-br); }
.avena-homepage .law-trust-row,
.avena-county-page .law-trust-row,
.avena-team-page .law-trust-row { border-top-color: rgba(255, 255, 255, .22); }
.avena-homepage .law-trust-row span,
.avena-county-page .law-trust-row span,
.avena-team-page .law-trust-row span {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(215, 168, 58, .5);
  color: #fff;
}
.avena-homepage .law-trust-row span::before,
.avena-county-page .law-trust-row span::before,
.avena-team-page .law-trust-row span::before { background: var(--gold-br); }

/* Hairline under every hero */
.hero::after,
.law-hero::after,
.avena-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--gold-br) 0 26%, rgba(215, 168, 58, .22) 26%);
}

@media (max-width: 900px) {
  .hero,
  .law-hero,
  .avena-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .law-hero-overlay,
  .avena-hero-overlay,
  .hero__media {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .law-hero-overlay::after,
  .avena-hero-overlay::after,
  .hero__media::after { inset: auto 0 0 0; width: auto; height: 3px; }
  .hero__inner,
  .law-hero-content,
  .avena-hero-content {
    grid-column: 1;
    grid-row: 2;
    padding-inline: var(--gut);
    padding-block: var(--sp-5) var(--sp-6);
  }
  .hero__inner > *,
  .law-hero-content > *,
  .avena-hero-content > * { max-width: none; }
  /* Feature heroes keep the overlay treatment on small screens */
  .avena-homepage .law-hero,
  .avena-county-page .avena-hero,
  .avena-team-page .avena-hero { min-height: clamp(430px, 74vh, 600px); }
  .avena-homepage .law-hero .law-hero-overlay,
  .avena-county-page .avena-hero .avena-hero-overlay,
  .avena-team-page .avena-hero .avena-hero-overlay { aspect-ratio: auto; }
  .avena-homepage .law-hero .law-hero-content,
  .avena-county-page .avena-hero .avena-hero-content,
  .avena-team-page .avena-hero .avena-hero-content {
    grid-row: 1;
    padding-block: var(--sp-7) var(--sp-6);
  }
}
/* ---------- 13. Proof strip --------------------------------------------- */
.proof,
.law-proof,
.avena-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.proof > div,
.law-proof > div,
.avena-proof > div {
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: var(--sp-4) var(--gut);
  background: var(--parch);
}
.proof strong,
.law-proof strong,
.avena-proof strong {
  color: var(--navy);
  font-size: clamp(17px, 1.25vw, 19px);
  letter-spacing: .04em;
}
.proof span,
.law-proof span,
.avena-proof span { font-size: 15.5px; color: var(--muted); line-height: 1.55; }

/* ---------- 14. Sections -------------------------------------------------
   Sections centre their content with PADDING, not with `max-width` +
   `margin-inline:auto` on the children. Auto margins on a child stop it
   stretching to its grid track, so any section that is itself a grid ended up
   sizing its children to max-content and overflowing. Padding has no such
   side effect and fixes the whole class of bug at once.                     */
.law-section,
.avena-section {
  padding-block: var(--band);
  padding-inline: max(var(--gut), calc((100% - var(--shell)) / 2));
}
.law-section > *,
.avena-section > * {
  max-width: none;
  margin-inline: 0;
}
.law-section > .law-grid,
.law-section > .avena-grid,
.avena-section > .law-grid,
.avena-section > .avena-grid { width: 100%; }

/* Dark section */
.law-dark,
.avena-dark {
  position: relative;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(215, 168, 58, .1), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, .86);
  border-block: 1px solid rgba(215, 168, 58, .28);
}
.law-dark h1, .law-dark h2, .law-dark h3, .law-dark h4,
.avena-dark h1, .avena-dark h2, .avena-dark h3, .avena-dark h4 { color: #fff; }
.law-dark p, .avena-dark p { color: rgba(255, 255, 255, .84); }
.law-dark strong, .avena-dark strong { color: var(--gold-lt); }
.law-dark a:not([class*="btn"]), .avena-dark a:not([class*="btn"]) { color: var(--gold-br); }
.law-dark .law-eyebrow, .law-dark .avena-eyebrow,
.avena-dark .avena-eyebrow, .avena-dark .law-eyebrow { color: var(--gold-br); }

/* ---------- 15. Grids and cards ----------------------------------------- */
.law-grid,
.avena-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.avena-grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.avena-grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.avena-grid-4 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }

.law-card,
.avena-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: border-top-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.law-card:hover,
.avena-card:hover {
  border-top-color: var(--gold-br);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.law-card h3,
.avena-card h3 { margin-bottom: var(--sp-2); font-size: clamp(19px, 1.5vw, 23px); }
.law-card p,
.avena-card p { margin-bottom: var(--sp-2); font-size: 16.5px; }
.law-card > :last-child,
.avena-card > :last-child { margin-bottom: 0; }
.law-card strong,
.avena-card strong { display: block; color: var(--navy); font-size: 18px; letter-spacing: .03em; }

/* Cards on dark grounds */
.law-dark .law-card, .law-dark .avena-card,
.avena-dark .law-card, .avena-dark .avena-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  border-top-color: var(--gold-br);
  box-shadow: none;
}
.law-dark .law-card p, .avena-dark .avena-card p { color: rgba(255, 255, 255, .8); }

/* Card action link */
.avena-card-action {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--navy);
  font-size: 15.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}
.avena-card-action::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.avena-card-action:hover { color: var(--gold); }
.avena-card-action:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* Numbered process list */
.law-process .law-grid { counter-reset: step; }
.law-process .law-card { counter-increment: step; padding-top: var(--sp-5); }
.law-process .law-card::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--gold-lt);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .02em;
}

/* ---------- 16. Alerts, callouts, summary boxes -------------------------- */
.callout {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 10px);
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 8px solid var(--navy);
  border-radius: var(--r);
  margin-block: var(--sp-4);
}
.callout > :last-child { margin-bottom: 0; }
.callout__title {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--navy);
  font-size: clamp(18px, 1.4vw, 21px);
  letter-spacing: .04em;
}
.callout--urgent { background: var(--seal-lt); border-left-color: var(--seal); }
.callout--urgent .callout__title { color: var(--seal); }
.callout--good { background: var(--green-lt); border-left-color: var(--green); }
.callout--good .callout__title { color: var(--green); }
.callout--gold { background: #fdf7e8; border-left-color: var(--gold-br); }

/* Summary box - key facts, USWDS style */
.summary {
  padding: var(--sp-4);
  background: var(--mist);
  border: 1px solid var(--mist-2);
  border-radius: var(--r);
  outline: 1px solid var(--line);
  outline-offset: 4px;
  margin-block: var(--sp-5);
}
.summary > :last-child { margin-bottom: 0; }

/* Pull quote */
.law-quote,
.avena-quote {
  padding-block: var(--band);
  padding-inline: var(--gut);
  text-align: center;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(215, 168, 58, .09), transparent 65%),
    var(--ink);
  border-block: 1px solid rgba(215, 168, 58, .3);
}
.law-quote p,
.avena-quote p {
  max-width: 26ch;
  margin: 0 auto var(--sp-3);
  color: #fff;
  font-size: clamp(25px, 3.1vw, 42px);
  line-height: 1.28;
}
.law-quote strong,
.avena-quote strong {
  display: block;
  color: var(--gold-br);
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.law-quote p::before { content: "\201C"; }
.law-quote p::after { content: "\201D"; }

blockquote {
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--gold-br);
  background: var(--parch);
  border-radius: 0 var(--r) var(--r) 0;
}
blockquote cite {
  display: block;
  margin-top: var(--sp-2);
  color: var(--muted);
  font-size: 15px;
  font-style: normal;
  letter-spacing: .08em;
}

/* ---------- 17. Accordion / FAQ ------------------------------------------ */
details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  margin-bottom: var(--sp-2);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
details[open] { border-color: var(--navy); box-shadow: var(--sh-1); }
summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--navy);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  background: var(--mist);
  transition: background .18s ease;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-left: auto;
  margin-top: .4em;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
details[open] > summary::after { transform: rotate(-135deg); }
summary:hover { background: var(--mist-2); }
details > *:not(summary) { padding-inline: var(--sp-4); }
details > *:not(summary):first-of-type { padding-top: var(--sp-3); }
details > *:last-child { padding-bottom: var(--sp-3); margin-bottom: 0; }

.law-faq,
.avena-faq { padding-block: var(--band); padding-inline: var(--gut); }
.law-faq > *,
.avena-faq > * { max-width: 940px; margin-inline: auto; }

/* Dark-ground accordions */
.law-dark details, .avena-dark details { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); }
.law-dark summary, .avena-dark summary { background: rgba(255, 255, 255, .06); color: #fff; }

/* ---------- 18. Attorney intro ------------------------------------------- */
.law-attorney-intro {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: var(--shell);
  margin-inline: auto;
  padding-block: var(--band);
  padding-inline: var(--gut);
}
.law-attorney-photo { position: relative; }
.law-attorney-photo img {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold-br);
  outline: 1px solid var(--line);
  outline-offset: 8px;
  box-shadow: var(--sh-2);
  background: var(--mist);
}
.law-attorney-copy h2 { margin-bottom: var(--sp-1); }
.law-attorney-copy h3 { color: var(--gold); font-size: clamp(17px, 1.35vw, 20px); letter-spacing: .04em; margin-bottom: var(--sp-4); }
.law-attorney-copy ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px var(--sp-3);
}
.law-attorney-copy li {
  display: flex;
  align-items: baseline;
  gap: .6em;
  padding: 5px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 16.5px;
}
.law-attorney-copy li::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  background: var(--gold-br);
  transform: rotate(45deg);
}

/* ---------- 19. Forms ---------------------------------------------------- */
.avena-form-wrapper { min-width: 0; }
.avena-form-card,
.form-card {
  padding: clamp(22px, 3vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-br);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
}
.avena-form-heading h3 { margin-bottom: var(--sp-1); }
.avena-form-heading p { color: var(--muted); font-size: 16px; margin-bottom: var(--sp-4); }

.field { margin-bottom: var(--sp-3); }
.field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 15.5px;
  letter-spacing: .05em;
}
.field .req { color: var(--seal); }
.field__hint { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 13px 15px;
  min-height: 52px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  transition: border-color .16s ease, box-shadow .16s ease;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
textarea { min-height: 148px; resize: vertical; }
.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 114, 196, .2);
}
.input[aria-invalid="true"],
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--seal); background: var(--seal-lt); }

.field__error {
  display: none;
  margin-top: 6px;
  color: var(--seal);
  font-size: 14.5px;
  line-height: 1.5;
}
.field__error::before { content: "\26A0\FE0E  "; }
.field.is-invalid .field__error { display: block; }

/* Honeypot - hidden from people, visible to naive bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r);
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid transparent;
}
.form__status[hidden] { display: none; }
.form__status--ok { background: var(--green-lt); border-color: var(--green); color: var(--green); }
.form__status--err { background: var(--seal-lt); border-color: var(--seal); color: var(--seal); }
.form__status--busy { background: var(--mist); border-color: var(--line); color: var(--slate); }

.form__consent { display: flex; gap: .7em; align-items: flex-start; margin-bottom: var(--sp-3); }
.form__consent input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: 0 0 22px; margin-top: 3px; accent-color: var(--navy); }
.form__consent label { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Contact section layout */
.avena-contact-section {
  padding-block: var(--band);
  padding-inline: var(--gut);
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(215, 168, 58, .1), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, .86);
  border-block: 1px solid rgba(215, 168, 58, .3);
}
.avena-contact-grid,
.avena-contact-page-grid {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 520px);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  max-width: var(--shell);
  margin-inline: auto;
}
.avena-contact-section h2,
.avena-contact-section h3 { color: #fff; }
.avena-contact-section .avena-form-card h3,
.avena-contact-section .avena-form-card p,
.avena-contact-section .avena-form-card label { color: inherit; }
.avena-contact-section .avena-form-card { color: var(--slate); }
.avena-contact-section .avena-form-card h3 { color: var(--navy); }
.avena-contact-section .avena-contact-lead { color: rgba(255, 255, 255, .88); }

.avena-contact-points { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.avena-contact-point {
  padding: var(--sp-3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--gold-br);
  border-radius: var(--r);
}
.avena-contact-point strong { display: block; color: #fff; font-size: 17.5px; letter-spacing: .03em; }
.avena-contact-point span { font-size: 15.5px; color: rgba(255, 255, 255, .74); line-height: 1.55; }

.avena-contact-info-card {
  padding: clamp(22px, 3vw, 34px);
  background: var(--parch);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--r);
}
.avena-contact-info-card h3 { margin-bottom: var(--sp-3); }
.avena-contact-info-card p { font-size: 16.5px; }

/* ---------- 20. Interactive tools ---------------------------------------- */
.tool {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.tool__head {
  padding: var(--sp-4);
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.tool__head h3 { margin-bottom: var(--sp-1); }
.tool__head p { margin: 0; font-size: 16px; color: var(--muted); }
.tool__body { padding: var(--sp-4); }
.tool__foot {
  padding: var(--sp-3) var(--sp-4);
  background: var(--parch);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* Segmented option buttons */
.optset { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3); }
.optset__label {
  display: block;
  width: 100%;
  margin-bottom: 2px;
  color: var(--navy);
  font-size: 15.5px;
  letter-spacing: .05em;
}
.opt {
  padding: 11px 18px;
  min-height: 48px;
  background: #fff;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 16px;
  cursor: pointer;
  transition: all .16s ease;
}
.opt:hover { border-color: var(--navy); background: var(--mist); }
.opt[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--gold-br);
}

/* Result panel */
.result { margin-top: var(--sp-4); }
.result[hidden] { display: none; }
.result__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.result__cell { padding: var(--sp-3); background: #fff; }
.result__cell dt {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.result__cell dd {
  margin: 0;
  color: var(--navy);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.2;
}
.result__cell dd small { display: block; font-size: 14.5px; color: var(--muted); letter-spacing: 0; margin-top: 5px; line-height: 1.5; }

/* Deadline countdown */
.countdown {
  display: flex;
  align-items: baseline;
  gap: .4em;
  color: var(--seal);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
}
.countdown small { font-size: 16px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

/* Triage widget */
.triage__step[hidden] { display: none; }
.triage__q { margin-bottom: var(--sp-3); font-size: clamp(19px, 1.6vw, 24px); color: var(--navy); line-height: 1.3; }
.triage__choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.triage__choice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-3);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  font-family: var(--font);
  cursor: pointer;
  transition: all .16s ease;
}
.triage__choice:hover { border-color: var(--navy); border-left-color: var(--gold-br); background: var(--mist); transform: translateX(2px); }
.triage__choice strong { color: var(--navy); font-size: 17.5px; letter-spacing: .02em; }
.triage__choice span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.triage__progress {
  display: flex;
  gap: 5px;
  margin-bottom: var(--sp-3);
}
.triage__progress i {
  height: 4px;
  flex: 1;
  background: var(--line);
  border-radius: 2px;
  transition: background .25s ease;
}
.triage__progress i.is-on { background: var(--gold-br); }

.tool__back {
  margin-top: var(--sp-3);
  padding: 8px 0;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.tool__back:hover { color: var(--navy); }
.tool__back[hidden] { display: none; }

/* ---------- 21. On-this-page rail ---------------------------------------- */
.onpage {
  position: sticky;
  top: 104px;
  align-self: start;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
  border-left: 2px solid var(--line);
}
.onpage h2 {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.onpage ul { list-style: none; margin: 0; padding: 0; }
.onpage li { margin: 0; }
.onpage a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: calc(-1 * var(--sp-3) - 2px);
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.45;
  text-decoration: none;
}
.onpage a:hover { color: var(--navy); }
.onpage a.is-current { color: var(--navy); border-left-color: var(--gold-br); }

/* ---------- 22. Trust: reviews, ratings, memberships --------------------- */
.avena-review-command,
.avena-home-review-sources { padding-block: var(--band); padding-inline: var(--gut); background: var(--parch); }
.avena-review-command-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.avena-review-command-head h2 { margin-bottom: 0; }
.avena-review-command-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 12px 22px;
  min-height: 50px;
  border: 2px solid var(--navy);
  border-radius: var(--r);
  color: var(--navy);
  font-size: 15.5px;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}
.avena-review-command-link:hover { background: var(--navy); color: #fff; }

.avena-review-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.25fr);
  gap: var(--sp-3);
  align-items: start;
}
.avena-featured-review {
  padding: var(--sp-4);
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  border-top: 4px solid var(--gold-br);
  box-shadow: var(--sh-2);
}
.avena-review-source {
  display: block;
  color: var(--gold-br);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.avena-featured-review strong { display: block; color: #fff; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; margin-bottom: var(--sp-2); }
.avena-featured-review p { color: rgba(255, 255, 255, .86); font-size: 17px; }
.avena-featured-review em { color: var(--gold-lt); border: 0; font-size: 15px; letter-spacing: .08em; }

.avena-review-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2);
}
.avena-review-proof-grid article,
.avena-review-source-card {
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
}
.avena-review-proof-grid article span,
.avena-review-source-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.avena-review-proof-grid article strong,
.avena-review-source-score {
  display: block;
  color: var(--navy);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
}
.avena-review-proof-grid article p { font-size: 14px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }

.avena-review-quotes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.avena-review-source-row,
.avena-mini-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.avena-review-source-row a,
.avena-mini-link-row a {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
  font-size: 14.5px;
  text-decoration: none;
}
.avena-review-source-row a:hover,
.avena-mini-link-row a:hover { border-color: var(--navy); color: var(--navy); background: var(--mist); }

/* Star rating, drawn in CSS (no image, no external asset) */
.stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.stars i {
  width: 17px;
  height: 17px;
  background: var(--gold-br);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stars i.is-half { background: linear-gradient(90deg, var(--gold-br) 50%, rgba(215, 168, 58, .28) 50%); }

/* Awards */
.awards {
  display: grid;
  grid-template-columns: minmax(210px, 300px) 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
.awards__plaque {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
  background: #fff;
  box-shadow: var(--sh-2);
}
.awards__plaque img { display: block; border-radius: 2px; background: none; }

/* Membership ticker - typographic badges, no scraped third-party logos */
.avena-membership-showcase { padding-block: var(--band); padding-inline: 0; background: var(--ink); color: #fff; overflow: hidden; border-block: 1px solid rgba(215, 168, 58, .3); }
.avena-membership-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: var(--shell);
  margin: 0 auto var(--sp-5);
  padding-inline: var(--gut);
}
.avena-membership-head h2 { color: #fff; margin-bottom: 0; }
.avena-membership-head .avena-review-command-link { color: var(--gold-br); border-color: var(--gold-br); }
.avena-membership-head .avena-review-command-link:hover { background: var(--gold-br); color: var(--ink); }
.avena-membership-ticker { position: relative; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.avena-membership-track { display: flex; gap: var(--sp-2); width: max-content; animation: ticker 46s linear infinite; }
.avena-membership-ticker:hover .avena-membership-track,
.avena-membership-ticker:focus-within .avena-membership-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .avena-membership-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .avena-membership-card[aria-hidden="true"] { display: none; }
}
.avena-membership-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  width: 250px;
  padding: var(--sp-3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--gold-br);
  border-radius: var(--r);
  text-decoration: none;
}
.avena-membership-card:hover { background: rgba(255, 255, 255, .1); }
.avena-membership-card strong { display: block; color: #fff; font-size: 16.5px; line-height: 1.3; letter-spacing: .02em; }
.avena-membership-card span { color: rgba(255, 255, 255, .62); font-size: 13.5px; line-height: 1.4; }

/* Third-party wordmarks rendered as text, per each brand's own look */
.google-logo { letter-spacing: .01em; }
.google-logo b:nth-child(1) { color: #4285F4; } .google-logo b:nth-child(2) { color: #DB4437; }
.google-logo b:nth-child(3) { color: #F4B400; } .google-logo b:nth-child(4) { color: #4285F4; }
.google-logo b:nth-child(5) { color: #0F9D58; } .google-logo b:nth-child(6) { color: #DB4437; }
.avvo-logo { color: #0d7c7c; text-transform: lowercase; letter-spacing: .02em; }
.elite-logo { color: var(--navy); }

/* ---------- 23. Office / map / counties ---------------------------------- */
.avena-office-map-section { padding-block: var(--band); padding-inline: var(--gut); }
.avena-office-map-section > * { max-width: var(--shell); margin-inline: auto; }
.avena-office-map-card {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
  margin-top: var(--sp-5);
}
.avena-office-map-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--mist);
}
.avena-office-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.avena-office-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-2); margin-block: var(--sp-4); }
.avena-office-facts span { display: block; padding: var(--sp-2) var(--sp-3); background: var(--parch); border-left: 3px solid var(--gold-br); border-radius: var(--r); }
.avena-office-facts strong { display: block; color: var(--navy); font-size: 16px; letter-spacing: .03em; }
.avena-office-facts em { color: var(--muted); font-size: 14px; border: 0; }

.avena-office-address {
  padding: var(--sp-3);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 16.5px;
  line-height: 1.7;
}

.avena-office-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.avena-office-photo-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.avena-office-photo-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.avena-office-photo-card > div { padding: var(--sp-3); border-top: 3px solid var(--gold-br); }
.avena-office-photo-card span { display: block; color: var(--gold); font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 4px; }
.avena-office-photo-card strong { color: var(--navy); font-size: 16.5px; line-height: 1.45; }

.avena-county-card,
.avena-pathway-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.avena-county-card:hover,
.avena-pathway-card:hover { border-top-color: var(--gold-br); box-shadow: var(--sh-2); }
.avena-pathway-card > span:first-child,
.avena-county-card > span:first-child { color: var(--gold); font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; }
.avena-pathway-card strong,
.avena-county-card strong { color: var(--navy); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; }
.avena-pathway-card a,
.avena-county-card a { margin-top: auto; padding-top: var(--sp-2); font-size: 15.5px; letter-spacing: .05em; }

.avena-county-grid,
.avena-county-card-grid,
.avena-service-pathways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.avena-county-media-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.1fr);
  gap: clamp(22px, 3.5vw, 48px);
  align-items: center;
  margin-top: var(--sp-5);
}
.avena-county-media-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.avena-county-media-image figcaption,
.media-credit { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.media-credit a { color: var(--muted); }

.avena-service-area { padding-block: var(--band); padding-inline: var(--gut); background: var(--parch); }
.avena-service-area > * { max-width: var(--shell); margin-inline: auto; }
.avena-service-area-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  align-items: baseline;
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-br);
  border-radius: var(--r);
  font-size: 16.5px;
}
.avena-section-shape { display: none; }

/* ---------- 24. Final CTA + SEO links ------------------------------------ */
.law-final-cta,
.avena-final-cta {
  padding-block: var(--band);
  padding-inline: var(--gut);
  text-align: center;
  background:
    radial-gradient(800px 340px at 50% 0%, rgba(215, 168, 58, .13), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, .86);
  border-block: 1px solid rgba(215, 168, 58, .32);
}
.law-final-cta > *,
.avena-final-cta > * { max-width: 800px; margin-inline: auto; }
.law-final-cta h2,
.avena-final-cta h2 { color: #fff; }
.law-final-cta p,
.avena-final-cta p { color: rgba(255, 255, 255, .84); }
.law-final-cta .law-disclaimer,
.avena-final-cta .avena-disclaimer { color: rgba(255, 255, 255, .55); margin-top: var(--sp-5); }

.seo-links,
.avena-seo-link-cloud { padding-block: var(--band); padding-inline: var(--gut); background: var(--mist); border-top: 1px solid var(--line); }
.seo-links > *,
.avena-seo-link-cloud > * { max-width: var(--shell); margin-inline: auto; }
.seo-links ul,
.avena-seo-link-cloud ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--sp-4);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-4);
}
.seo-links li,
.avena-seo-link-cloud li { margin: 0; border-bottom: 1px dotted var(--line); }
.seo-links a,
.avena-seo-link-cloud a { display: block; padding: 9px 0; color: var(--slate); font-size: 16px; text-decoration: none; }
.seo-links a:hover,
.avena-seo-link-cloud a:hover { color: var(--navy); padding-left: 6px; }

/* ---------- 25. Footer ---------------------------------------------------
   Rebuilt as three stacked bands rather than one wall of navy columns:

   1. A conversion band - photograph, the offer, and the two actions, so the
      last thing on every page is a way to reach the firm.
   2. A directory band on paper - link columns plus the office card, readable
      and scannable rather than grey-on-navy.
   3. A slim legal rail in ink for the advertising notice and credits.
   ------------------------------------------------------------------------ */

/* --- 1. Conversion band --- */
.fcta {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.fcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('/assets/img/places/capitol-square.jpg');
  background-size: cover;
  background-position: center 45%;
}
.fcta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(94deg, rgba(6, 15, 26, .93) 0%, rgba(8, 19, 32, .82) 42%, rgba(10, 23, 37, .48) 100%);
}
.fcta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 86px);
}
.fcta h2 { color: #fff; margin-bottom: var(--sp-2); max-width: 18ch; }
.fcta p { color: rgba(255, 255, 255, .88); max-width: 52ch; margin-bottom: 0; }
.fcta .law-eyebrow { color: var(--gold-br); }
.fcta .law-eyebrow::before { background: var(--gold-br); }
.fcta__actions { display: grid; gap: var(--sp-2); }
.fcta__actions .btn { width: 100%; }
.fcta__note {
  margin-top: var(--sp-2);
  font-size: 14px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.6;
}

/* --- 2. Directory band --- */
.footer {
  background: var(--parch);
  color: var(--slate);
  border-top: 3px solid var(--gold-br);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.5vw, 52px);
  padding-block: clamp(44px, 5vw, 72px);
}
.footer h3 {
  color: var(--navy);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.footer p { font-size: 16px; line-height: 1.7; color: var(--muted); }
.footer a { color: var(--slate); text-decoration: none; }
.footer a:hover { color: var(--navy); text-decoration: underline; }
.footer strong { color: var(--navy); }

.footer__logo { display: inline-block; margin-bottom: var(--sp-3); }
.footer__logo img { width: 240px; max-width: 100%; background: none; }
.footer__lead { max-width: 40ch; }

.footer__trust { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--sp-3); }
.footer__trust span {
  padding: 6px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--slate);
}

.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin: 0; }
.footer__links a {
  display: block;
  padding: 7px 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(16, 36, 58, .07);
}
.footer__links a:hover { padding-left: 5px; color: var(--navy); }

/* Office card sits inside the directory band */
.footer__office {
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.footer__office p { font-size: 15.5px; margin-bottom: var(--sp-2); }
.footer__office .footer__hours {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dotted var(--line);
  font-size: 14.5px;
}
.footer__office .footer__hours strong { display: block; margin-bottom: 3px; }
.footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--sp-3);
  padding: 13px 22px;
  min-height: 50px;
  background: var(--navy);
  color: #fff !important;
  border-radius: var(--r);
  font-size: 15.5px;
  letter-spacing: .05em;
  text-decoration: none !important;
}
.footer__button:hover { background: var(--gold-br); color: var(--ink) !important; }

/* Team thumbnails - puts faces in the footer instead of another link list */
.footer__faces { display: flex; align-items: center; margin-top: var(--sp-3); }
.footer__faces img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(10, 23, 37, .2);
  margin-right: -10px;
  background: var(--mist);
}
.footer__faces a:last-child img { margin-right: 0; }

/* --- 3. Legal rail --- */
.footer__legal { background: var(--ink); color: rgba(255, 255, 255, .6); }
.footer__legal .shell { padding-block: var(--sp-4); }
.footer__legal p { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .58); margin-bottom: var(--sp-2); }
.footer__legal a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: .18em; }
.footer__legal a:hover { color: var(--gold-br); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
}
.footer__bottom p { margin: 0; font-size: 13.5px; }
.footer__langs { display: flex; gap: var(--sp-2); }
.footer__langs a { text-decoration: none; }

@media (max-width: 900px) {
  .fcta__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
}
/* ---------- 26. Sticky mobile call bar ----------------------------------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: none;
  gap: 1px;
  background: rgba(215, 168, 58, .5);
  box-shadow: 0 -4px 20px rgba(10, 23, 37, .28);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.callbar.is-on { transform: translateY(0); }
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 15px 10px;
  min-height: 58px;
  font-size: 16px;
  letter-spacing: .05em;
  text-decoration: none;
}
.callbar a:first-child { background: var(--gold-br); color: var(--ink); }
.callbar a:last-child { background: var(--navy); color: #fff; }

/* ---------- 27. Utilities ------------------------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
[hidden] { display: none !important; }

/* ---------- 28. Responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  .avena-contact-grid,
  .avena-contact-page-grid,
  .avena-office-map-card,
  .avena-review-showcase,
  .avena-county-media-card,
  .awards { grid-template-columns: 1fr; }
  .law-attorney-intro { grid-template-columns: 1fr; justify-items: start; }
  .law-attorney-photo img { max-width: 200px; }
  .onpage { position: static; border-left: 0; border-top: 2px solid var(--line); padding-left: 0; }
  .onpage a { margin-left: 0; border-left: 0; border-top: 2px solid transparent; padding-left: 0; }
}

@media (max-width: 900px) {
  .navtoggle { display: inline-flex; }
  .masthead__inner { min-height: 70px; }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1000;
    width: min(400px, 88vw);
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
    background: #fff;
    border-left: 4px solid var(--gold-br);
    box-shadow: -12px 0 40px rgba(10, 23, 37, .3);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .28s ease;
    visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--line-soft); }
  .nav > ul > li > a,
  .nav > ul > li > button { width: 100%; justify-content: space-between; padding: 15px 4px; border-radius: 0; font-size: 18px; min-height: 54px; }
  .nav__panel {
    position: static;
    min-width: 0;
    columns: 1;
    padding: 0 0 var(--sp-3) var(--sp-3);
    border: 0;
    border-left: 2px solid var(--gold-br);
    box-shadow: none;
    border-radius: 0;
  }
  .nav__panel--wide { min-width: 0; }
  .navscrim {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(10, 23, 37, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
  }
  .navscrim.is-on { opacity: 1; visibility: visible; }
  .masthead__cta { display: none; }
  .callbar { display: flex; }
  body { padding-bottom: 0; }
  body.has-callbar { padding-bottom: 58px; }
}

@media (max-width: 640px) {
  :root { --band: clamp(40px, 9vw, 60px); }
  .idbar__inner { justify-content: center; gap: var(--sp-2); }
  .idbar__org { width: 100%; justify-content: center; font-size: 11px; }
  .hero, .law-hero, .avena-hero { min-height: 0; padding-block: var(--sp-6) var(--sp-6); }
  .hero__inner > *, .law-hero-content > *, .avena-hero-content > * { max-width: none; }
  .cta-row .btn, .law-cta-row .law-btn, .avena-cta-row .avena-btn,
  .cta-row .law-btn, .law-cta-row .avena-btn { width: 100%; }
  .avena-review-command-head, .avena-membership-head { flex-direction: column; align-items: flex-start; }
  .result__cell dd { font-size: 21px; }
  details > *:not(summary) { padding-inline: var(--sp-3); }
  summary { padding: var(--sp-3); }
}

/* ---------- 29. Print ---------------------------------------------------- */
@media print {
  .idbar, .masthead, .actionbar, .callbar, .nav, .navscrim, .onpage,
  .avena-membership-showcase, .tool, .avena-form-card, .crumbs { display: none !important; }
  body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
  .hero, .law-hero, .avena-hero, .law-dark, .avena-dark, .law-final-cta,
  .avena-final-cta, .avena-contact-section, .law-quote {
    background: #fff !important; color: #000 !important; border: 1px solid #999; min-height: 0; padding-block: 18pt;
  }
  .hero h1, .law-hero h1, .law-dark h2, .avena-dark h2, .law-final-cta h2,
  .law-quote p, .avena-contact-section h2 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a[href^="#"]::after, a[href^="tel"]::after { content: ""; }
  .law-card, .avena-card, details { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  details > *:not(summary) { display: block !important; }
}

/* ==========================================================================
   30. Page-specific modules
   These map the page-body class names onto the design system above.
   ========================================================================== */

/* ---- Attorney profile (Glenn) ------------------------------------------ */
.glenn-clean-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-8) var(--sp-7);
  background: var(--navy) url('/assets/img/places/capitol-building.jpg') center 30% / cover;
  color: #fff;
  overflow: hidden;
}
.glenn-clean-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(7, 17, 29, .95) 0%, rgba(10, 23, 37, .88) 48%, rgba(16, 36, 58, .68) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 10px);
}
.glenn-clean-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(270px, 350px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.glenn-clean-copy h1 { color: #fff; margin-bottom: var(--sp-2); }
.glenn-clean-copy h2 {
  color: var(--gold-br);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.4;
  letter-spacing: .02em;
  margin-bottom: var(--sp-3);
}
.glenn-clean-copy p { color: rgba(255, 255, 255, .88); font-size: clamp(17.5px, 1.25vw, 20px); }

.glenn-clean-card {
  padding: var(--sp-4);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(215, 168, 58, .4);
  border-top: 4px solid var(--gold-br);
  border-radius: var(--r);
  text-align: center;
  backdrop-filter: blur(4px);
}
.glenn-clean-card img {
  width: 168px;
  height: 168px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold-br);
  background: var(--navy);
  margin-bottom: var(--sp-3);
}
.glenn-clean-card-body { display: grid; gap: 3px; }
.glenn-clean-card-body strong { color: #fff; font-size: 21px; letter-spacing: .04em; }
.glenn-clean-card-body span { color: rgba(255, 255, 255, .66); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.glenn-clean-card-body a { color: var(--gold-br); font-size: 16.5px; text-decoration: none; }
.glenn-clean-card-body a:hover { color: #fff; text-decoration: underline; }

.glenn-clean-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.glenn-clean-proof > div { display: flex; flex-direction: column; gap: .3em; padding: var(--sp-4) var(--gut); background: var(--parch); }
.glenn-clean-proof strong { color: var(--navy); font-size: 18px; letter-spacing: .04em; }
.glenn-clean-proof span { color: var(--muted); font-size: 15.5px; line-height: 1.55; }

.glenn-clean-intro {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding-block: var(--band);
}
.glenn-clean-focus-panel {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  background: var(--parch);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--r);
}
.glenn-clean-focus-panel span {
  display: flex;
  align-items: baseline;
  gap: .6em;
  padding: 9px 0;
  border-bottom: 1px dotted var(--line);
  color: var(--slate);
  font-size: 16.5px;
}
.glenn-clean-focus-panel span:last-child { border-bottom: 0; }
.glenn-clean-focus-panel span::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  background: var(--gold-br);
  transform: rotate(45deg);
}

.glenn-clean-banner {
  padding-block: var(--band);
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(215, 168, 58, .12), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
  color: rgba(255, 255, 255, .86);
  border-block: 1px solid rgba(215, 168, 58, .3);
}
.glenn-clean-banner h2 { color: #fff; }
.glenn-clean-banner p { color: rgba(255, 255, 255, .84); max-width: 78ch; }
.glenn-clean-banner .avena-eyebrow { color: var(--gold-br); }

.glenn-clean-credentials,
.glenn-clean-cases,
.glenn-clean-orgs,
.glenn-clean-counties { padding-block: var(--band); }

.glenn-clean-card-grid,
.glenn-clean-org-grid,
.glenn-practice-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.glenn-clean-card-grid article,
.glenn-clean-org-grid article,
.glenn-clean-org-grid a:not(.avena-membership-card),
.glenn-practice-board article {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  text-decoration: none;
}
.glenn-clean-card-grid article:hover,
.glenn-clean-org-grid a:not(.avena-membership-card):hover,
.glenn-practice-board article:hover { border-top-color: var(--gold-br); box-shadow: var(--sh-2); }
.glenn-clean-card-grid strong,
.glenn-clean-org-grid strong,
.glenn-practice-board strong { color: var(--navy); font-size: 19px; line-height: 1.3; letter-spacing: .02em; }
.glenn-clean-card-grid span,
.glenn-clean-org-grid span,
.glenn-practice-board span { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.glenn-clean-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-1);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: 17px;
}
.glenn-county-office-card {
  padding: var(--sp-4);
  background: var(--parch);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-br);
  border-radius: var(--r);
  margin-top: var(--sp-4);
}
.glenn-practice-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.glenn-practice-links a {
  padding: 9px 17px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
  font-size: 15px;
  text-decoration: none;
}
.glenn-practice-links a:hover { border-color: var(--navy); background: var(--navy); color: #fff; }

/* ---- OWI hub ------------------------------------------------------------ */
.avena-owi-urgent { background: var(--seal-lt); border-block: 1px solid rgba(124, 28, 28, .2); }
.avena-owi-urgent .avena-eyebrow { color: var(--seal); }
.avena-owi-urgent .avena-eyebrow::before { background: var(--seal); }
.avena-owi-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.avena-owi-alert-grid > div {
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid rgba(124, 28, 28, .22);
  border-left: 4px solid var(--seal);
  border-radius: var(--r);
}
.avena-owi-alert-grid strong { display: block; color: var(--seal); font-size: 17.5px; letter-spacing: .02em; margin-bottom: 3px; }
.avena-owi-alert-grid span { color: var(--slate); font-size: 15.5px; line-height: 1.6; }

.avena-owi-home-command {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  background: var(--parch);
}
.avena-owi-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--sp-2);
}
.avena-owi-command-grid a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--r);
  text-decoration: none;
  transition: all .16s ease;
}
.avena-owi-command-grid a:hover { border-left-color: var(--gold-br); box-shadow: var(--sh-1); transform: translateX(2px); }
.avena-owi-command-grid strong { color: var(--navy); font-size: 17px; letter-spacing: .02em; }
.avena-owi-command-grid span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.avena-owi-accordion-grid { margin-top: var(--sp-5); }
.avena-owi-seo-panel { background: var(--mist); }
.avena-owi-image-signal img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--sh-2); }

/* ---- County pages -------------------------------------------------------- */
.avena-county-intro { background: var(--paper); }
.avena-county-local { background: var(--parch); }
.avena-county-review-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.avena-community-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.avena-community-hero {
  display: block;
  padding: var(--sp-5);
  background: var(--navy);
  color: #fff;
  border-radius: var(--r);
  border-left: 5px solid var(--gold-br);
  text-decoration: none;
  transition: background .18s ease;
}
.avena-community-hero:hover { background: var(--navy-2); color: #fff; }
.avena-community-hero > span { display: block; color: var(--gold-br); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 6px; }
.avena-community-hero strong { display: block; color: #fff; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; margin-bottom: var(--sp-2); }
.avena-community-hero p { color: rgba(255, 255, 255, .8); margin: 0; font-size: 16.5px; }
.avena-community-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-2); }
.avena-community-columns a {
  display: block;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--r);
  text-decoration: none;
  transition: all .16s ease;
}
.avena-community-columns a:hover { border-top-color: var(--gold-br); box-shadow: var(--sh-1); transform: translateY(-2px); }
.avena-community-columns span { display: block; color: var(--navy); font-size: 18.5px; letter-spacing: .03em; margin-bottom: 3px; }
.avena-community-columns strong { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.law-counties { background: var(--mist); }

/* ---- Google Review landing ---------------------------------------------- */
.avena-review-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-8) var(--sp-7);
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.avena-review-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 340px at 78% 12%, rgba(215, 168, 58, .16), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
}
.avena-review-hero-grid { display: grid; grid-template-columns: 1fr minmax(280px, 380px); gap: clamp(28px, 4vw, 58px); align-items: center; }
.avena-review-hero-copy h1 { color: #fff; }
.avena-review-hero-copy p { color: rgba(255, 255, 255, .86); }
.avena-review-phone-card {
  padding: var(--sp-4);
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--sh-3);
  border: 8px solid var(--ink);
  color: var(--slate);
  text-align: center;
}
.avena-review-phone-top { display: flex; align-items: center; justify-content: center; gap: .5em; margin-bottom: var(--sp-3); color: var(--muted); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.avena-review-phone-stars { display: flex; justify-content: center; gap: 5px; margin-bottom: var(--sp-2); }
.avena-review-phone-stars i,
.avena-review-stars-animation i {
  width: 26px;
  height: 26px;
  background: var(--gold-br);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: pop .5s backwards;
}
.avena-review-phone-stars i:nth-child(2) { animation-delay: .1s; }
.avena-review-phone-stars i:nth-child(3) { animation-delay: .2s; }
.avena-review-phone-stars i:nth-child(4) { animation-delay: .3s; }
.avena-review-phone-stars i:nth-child(5) { animation-delay: .4s; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.avena-review-main-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: 100%;
  padding: 16px 26px;
  min-height: 58px;
  background: var(--gold-br);
  color: var(--ink);
  border-radius: var(--r);
  font-size: 17px;
  letter-spacing: .05em;
  text-decoration: none;
}
.avena-review-main-button:hover { background: #e6bb55; color: var(--ink); }
.avena-review-google-mark { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: .01em; }
.avena-review-steps,
.avena-review-info,
.avena-review-prompt { padding-block: var(--band); padding-inline: var(--gut); }
.avena-review-steps > *,
.avena-review-info > *,
.avena-review-prompt > * { max-width: var(--shell); margin-inline: auto; }
.avena-review-step-grid,
.avena-review-info-grid,
.avena-review-prompt-grid,
.avena-review-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.avena-review-step-grid > * ,
.avena-review-info-grid > *,
.avena-review-prompt-grid > *,
.avena-review-copy-card {
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-br);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.avena-review-copy-card { background: var(--parch); }
.avena-review-progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-block: var(--sp-3); }
.avena-review-progress > * { display: block; height: 100%; background: var(--gold-br); }
.avena-review-landing .avena-review-logo { font-size: 21px; }

/* ---- Misc page wrappers -------------------------------------------------- */
.law-page-isolated,
.avena-page { display: block; }
.law-sticky-call { display: none; }
.avena-fees-page .law-card strong,
.client-service-page .law-card strong { font-size: 19px; }

/* ---- Media credit strip -------------------------------------------------- */
.credits { padding-block: var(--sp-5); background: var(--mist); border-top: 1px solid var(--line); }
.credits ul { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: 8px; }
.credits li { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---- Responsive overrides for page modules ------------------------------ */
@media (max-width: 1080px) {
  .glenn-clean-hero-grid,
  .glenn-clean-intro,
  .avena-owi-home-command,
  .avena-review-hero-grid { grid-template-columns: 1fr; }
  .glenn-clean-card { max-width: 420px; }
}

/* ---------- 31. Team roster ---------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.team__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: border-top-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.team__card:hover { border-top-color: var(--gold-br); box-shadow: var(--sh-2); transform: translateY(-2px); }
.team__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 18%;
  background: var(--mist);
}
.team__figure {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, transparent 63%, rgba(215, 168, 58, .35) 63%, rgba(215, 168, 58, .35) 64%, transparent 64%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
  color: var(--gold-lt);
  font-size: clamp(38px, 5vw, 54px);
  letter-spacing: .1em;
}
.team__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft); }
.team__name {
  display: block;
  margin-bottom: 3px;
  color: var(--navy);
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: .02em;
}
.team__role {
  display: block;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.team__note { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.team__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: var(--sp-2);
  font-size: 15px;
  letter-spacing: .05em;
  text-decoration: none;
  color: var(--navy);
}
.team__link::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.team__link:hover { color: var(--gold); }

/* On dark grounds */
.law-dark .team__card,
.avena-dark .team__card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  border-top-color: var(--gold-br);
}
.law-dark .team__name, .avena-dark .team__name { color: #fff; }
.law-dark .team__note, .avena-dark .team__note { color: rgba(255, 255, 255, .74); }
.law-dark .team__body, .avena-dark .team__body { border-top-color: rgba(255, 255, 255, .12); }

/* ---------- 32. Button contrast on dark surfaces -------------------------
   Every dark ground in the system, listed once. On these, an outline button
   must read white and a "dark" button must not become navy-on-navy.        */
.hero .btn--secondary,        .hero .law-btn-secondary,        .hero .avena-btn-secondary,
.law-hero .btn--secondary,    .law-hero .law-btn-secondary,    .law-hero .avena-btn-secondary,
.avena-hero .btn--secondary,  .avena-hero .law-btn-secondary,  .avena-hero .avena-btn-secondary,
.law-final-cta .btn--secondary,   .law-final-cta .law-btn-secondary,   .law-final-cta .avena-btn-secondary,
.avena-final-cta .btn--secondary, .avena-final-cta .law-btn-secondary, .avena-final-cta .avena-btn-secondary,
.avena-contact-section .btn--secondary, .avena-contact-section .law-btn-secondary, .avena-contact-section .avena-btn-secondary,
.glenn-clean-hero .btn--secondary,  .glenn-clean-hero .law-btn-secondary,  .glenn-clean-hero .avena-btn-secondary,
.glenn-clean-banner .btn--secondary, .glenn-clean-banner .law-btn-secondary, .glenn-clean-banner .avena-btn-secondary,
.avena-review-hero .btn--secondary, .avena-review-hero .law-btn-secondary, .avena-review-hero .avena-btn-secondary,
.law-quote .btn--secondary,   .law-quote .law-btn-secondary,   .law-quote .avena-btn-secondary,
.hero .btn--dark,        .hero .law-btn-dark,        .hero .avena-btn-dark,
.law-hero .btn--dark,    .law-hero .law-btn-dark,    .law-hero .avena-btn-dark,
.avena-hero .btn--dark,  .avena-hero .law-btn-dark,  .avena-hero .avena-btn-dark,
.law-dark .btn--dark,    .law-dark .law-btn-dark,    .law-dark .avena-btn-dark,
.avena-dark .btn--dark,  .avena-dark .law-btn-dark,  .avena-dark .avena-btn-dark,
.law-final-cta .btn--dark,   .law-final-cta .law-btn-dark,   .law-final-cta .avena-btn-dark,
.avena-final-cta .btn--dark, .avena-final-cta .law-btn-dark, .avena-final-cta .avena-btn-dark,
.avena-contact-section .btn--dark, .avena-contact-section .law-btn-dark, .avena-contact-section .avena-btn-dark,
.glenn-clean-hero .btn--dark,   .glenn-clean-hero .law-btn-dark,   .glenn-clean-hero .avena-btn-dark,
.glenn-clean-banner .btn--dark, .glenn-clean-banner .law-btn-dark, .glenn-clean-banner .avena-btn-dark,
.avena-review-hero .btn--dark,  .avena-review-hero .law-btn-dark,  .avena-review-hero .avena-btn-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .62);
  color: #fff;
}
.hero .btn--secondary:hover,        .hero .law-btn-secondary:hover,        .hero .avena-btn-secondary:hover,
.law-hero .btn--secondary:hover,    .law-hero .law-btn-secondary:hover,    .law-hero .avena-btn-secondary:hover,
.avena-hero .btn--secondary:hover,  .avena-hero .law-btn-secondary:hover,  .avena-hero .avena-btn-secondary:hover,
.law-final-cta .btn--secondary:hover,   .law-final-cta .law-btn-secondary:hover,   .law-final-cta .avena-btn-secondary:hover,
.avena-final-cta .btn--secondary:hover, .avena-final-cta .law-btn-secondary:hover, .avena-final-cta .avena-btn-secondary:hover,
.avena-contact-section .btn--secondary:hover, .avena-contact-section .law-btn-secondary:hover, .avena-contact-section .avena-btn-secondary:hover,
.glenn-clean-hero .btn--secondary:hover,  .glenn-clean-hero .law-btn-secondary:hover,  .glenn-clean-hero .avena-btn-secondary:hover,
.glenn-clean-banner .btn--secondary:hover, .glenn-clean-banner .law-btn-secondary:hover, .glenn-clean-banner .avena-btn-secondary:hover,
.avena-review-hero .btn--secondary:hover, .avena-review-hero .law-btn-secondary:hover, .avena-review-hero .avena-btn-secondary:hover,
.law-quote .btn--secondary:hover,   .law-quote .law-btn-secondary:hover,   .law-quote .avena-btn-secondary:hover,
.hero .btn--dark:hover,        .hero .law-btn-dark:hover,        .hero .avena-btn-dark:hover,
.law-hero .btn--dark:hover,    .law-hero .law-btn-dark:hover,    .law-hero .avena-btn-dark:hover,
.avena-hero .btn--dark:hover,  .avena-hero .law-btn-dark:hover,  .avena-hero .avena-btn-dark:hover,
.law-dark .btn--dark:hover,    .law-dark .law-btn-dark:hover,    .law-dark .avena-btn-dark:hover,
.avena-dark .btn--dark:hover,  .avena-dark .law-btn-dark:hover,  .avena-dark .avena-btn-dark:hover,
.law-final-cta .btn--dark:hover,   .law-final-cta .law-btn-dark:hover,   .law-final-cta .avena-btn-dark:hover,
.avena-final-cta .btn--dark:hover, .avena-final-cta .law-btn-dark:hover, .avena-final-cta .avena-btn-dark:hover,
.avena-contact-section .btn--dark:hover, .avena-contact-section .law-btn-dark:hover, .avena-contact-section .avena-btn-dark:hover,
.glenn-clean-hero .btn--dark:hover,   .glenn-clean-hero .law-btn-dark:hover,   .glenn-clean-hero .avena-btn-dark:hover,
.glenn-clean-banner .btn--dark:hover, .glenn-clean-banner .law-btn-dark:hover, .glenn-clean-banner .avena-btn-dark:hover,
.avena-review-hero .btn--dark:hover,  .avena-review-hero .law-btn-dark:hover,  .avena-review-hero .avena-btn-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

/* The form card sits on a dark section but is itself white - undo there. */
.avena-contact-section .avena-form-card .btn--primary,
.avena-contact-section .avena-form-card .law-btn-primary {
  background: var(--gold-br);
  border-color: var(--gold-br);
  color: var(--ink);
}

/* ---------- 33. Masthead source order ------------------------------------
   Markup order puts the CTA before the nav so that, on mobile, the drawer
   toggle is reachable without tabbing the whole menu. On desktop the visual
   order should read brand -> nav -> CTA.                                    */
@media (min-width: 901px) {
  .masthead__brand { order: 1; }
  .nav             { order: 2; margin-left: auto; }
  .masthead__right { order: 3; }
}

/* ---------- 34. Dark-context corrections --------------------------------
   Three real defects caught by an automated contrast pass:
   1. `.law-dark a` outranked `.btn--primary` (0,1,1 vs 0,1,0), turning gold
      buttons into gold-on-gold. Exclude anything with a btn class.
   2. Eyebrows default to the dark gold, which is unreadable on navy.
   3. The membership cards are <a> elements on near-black and were still
      inheriting the default link blue.                                     */

.law-dark a:not([class*="btn"]),
.avena-dark a:not([class*="btn"]),
.law-final-cta a:not([class*="btn"]),
.avena-final-cta a:not([class*="btn"]),
.law-quote a:not([class*="btn"]),
.glenn-clean-banner a:not([class*="btn"]) { color: var(--gold-br); }

.law-dark .law-eyebrow,        .law-dark .avena-eyebrow,        .law-dark .eyebrow,
.avena-dark .law-eyebrow,      .avena-dark .avena-eyebrow,      .avena-dark .eyebrow,
.law-final-cta .law-eyebrow,   .law-final-cta .avena-eyebrow,   .law-final-cta .eyebrow,
.avena-final-cta .law-eyebrow, .avena-final-cta .avena-eyebrow, .avena-final-cta .eyebrow,
.avena-contact-section .law-eyebrow, .avena-contact-section .avena-eyebrow, .avena-contact-section .eyebrow,
.glenn-clean-hero .law-eyebrow,   .glenn-clean-hero .avena-eyebrow,   .glenn-clean-hero .eyebrow,
.glenn-clean-banner .law-eyebrow, .glenn-clean-banner .avena-eyebrow, .glenn-clean-banner .eyebrow,
.avena-review-hero .law-eyebrow,  .avena-review-hero .avena-eyebrow,  .avena-review-hero .eyebrow,
.avena-membership-showcase .law-eyebrow, .avena-membership-showcase .avena-eyebrow,
.hero .eyebrow, .law-hero .law-eyebrow, .law-hero .avena-eyebrow,
.avena-hero .avena-eyebrow, .avena-hero .law-eyebrow { color: var(--gold-br); }

.law-dark .law-eyebrow::before,        .law-dark .avena-eyebrow::before,
.avena-dark .law-eyebrow::before,      .avena-dark .avena-eyebrow::before,
.law-final-cta .law-eyebrow::before,   .law-final-cta .avena-eyebrow::before,
.avena-final-cta .law-eyebrow::before, .avena-final-cta .avena-eyebrow::before,
.avena-contact-section .law-eyebrow::before, .avena-contact-section .avena-eyebrow::before,
.glenn-clean-hero .avena-eyebrow::before, .glenn-clean-banner .avena-eyebrow::before,
.avena-review-hero .avena-eyebrow::before,
.law-hero .law-eyebrow::before, .avena-hero .avena-eyebrow::before { background: var(--gold-br); }

/* The consultation form card is white even inside a dark section. */
.avena-contact-section .avena-form-card .law-eyebrow,
.avena-contact-section .avena-form-card .avena-eyebrow { color: var(--gold); }

.avena-membership-card { color: rgba(255, 255, 255, .9); }
.avena-membership-card:hover { color: #fff; }

/* ---------- 35. Grid/flex shrink correction ------------------------------
   Grid and flex items get `min-width: auto`, which refuses to shrink below
   their content. A nested grid then resolves its own columns against its
   max-content width and blows straight out of its parent track - which is
   exactly what .avena-owi-command-grid was doing (five 215px columns inside
   a 563px track). Resetting min-width to 0 on layout containers and their
   children makes every nested grid respect the track it was given.         */
[class*="grid"],
[class*="grid"] > *,
[class*="-row"] > *,
.team, .team > *,
.proof > *, .law-proof > *, .avena-proof > *, .glenn-clean-proof > *,
.law-attorney-intro > *, .avena-owi-home-command > *,
.glenn-clean-intro > *, .glenn-clean-hero-grid > *,
.avena-office-map-card > *, .avena-county-media-card > *,
.avena-review-showcase > *, .avena-review-hero-grid > *,
.awards > *, .footer__inner > *, .masthead__inner > *,
.glenn-practice-board > *, .avena-service-pathways > *,
.avena-office-photo-gallery > *, .avena-community-columns > *,
.avena-office-facts > *, .triage__choices > *, .optset > *,
.avena-contact-points > *, .footer__links > * {
  min-width: 0;
}

/* Long unbroken strings (URLs, statute cites) must not force a scrollbar. */
body { overflow-wrap: break-word; }
.law-card, .avena-card, .team__card, .triage__choice, .result__cell { overflow-wrap: anywhere; }

/* ---------- 36. (superseded) ---------------------------------------------
   The per-section opt-out that used to live here is no longer needed:
   section 14 now centres with padding, so grid sections stretch correctly on
   their own.                                                               */

/* ---------- 37. Touch targets --------------------------------------------
   Inline links inside prose keep their natural size; standalone action links
   that behave like buttons get a comfortable target on touch screens.       */
@media (max-width: 900px) {
  .avena-card-action,
  .team__link,
  .avena-pathway-card > a,
  .avena-county-card > a,
  .avena-review-source-row a,
  .avena-mini-link-row a,
  .glenn-practice-links a,
  .avena-review-command-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .callbar a { min-height: 60px; }
  /* A phone number sitting alone in its own paragraph is a call button. */
  .avena-office-address a[href^="tel"],
  .avena-contact-info-card a[href^="tel"],
  .glenn-clean-card-body a { display: inline-block; padding-block: 8px; }
}

/* ---------- 38. Membership cards inside the attorney profile -------------
   The Glenn profile reuses .glenn-clean-org-grid (light cards, navy text) as
   the ticker track, so those rules were repainting the dark membership cards
   with navy-on-near-black text. Scope the card's own colours one level deeper
   so they win wherever the card is reused.                                  */
.avena-membership-showcase .avena-membership-card { background: rgba(255, 255, 255, .05); }
.avena-membership-showcase .avena-membership-card strong { color: #fff; }
.avena-membership-showcase .avena-membership-card span { color: rgba(255, 255, 255, .68); }

/* ==========================================================================
   39. Photography components
   The rebuild is photo-led, so images need first-class layout primitives
   rather than being bolted onto card markup.
   ========================================================================== */

/* --- Media band: a real <img> with a caption, alternating sides ---------- */
.mediaband { padding-block: var(--band); padding-inline: var(--gut); }
.mediaband__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 66px);
  align-items: center;
  max-width: var(--shell);
  margin-inline: auto;
}
.mediaband--flip .mediaband__inner > figure { order: 2; }
.mediaband figure { margin: 0; position: relative; }
.mediaband img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}
/* Engraved corner mark, so a plain photo still reads as part of the system */
.mediaband figure::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 56px;
  height: 56px;
  border-top: 3px solid var(--gold-br);
  border-left: 3px solid var(--gold-br);
  border-radius: var(--r) 0 0 0;
  pointer-events: none;
}
.mediaband figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
.mediaband__copy > :last-child { margin-bottom: 0; }
.mediaband--tint { background: var(--parch); }

/* --- Image card: thumbnail + copy ---------------------------------------- */
.imgcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.imgcard:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.imgcard img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--mist);
}
.imgcard__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 3px solid var(--gold-br); }
.imgcard__body strong { display: block; color: var(--navy); font-size: 19px; line-height: 1.25; margin-bottom: 5px; }
.imgcard__body span { display: block; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* --- Figure strip: three photographs in a row ---------------------------- */
.figstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.figstrip figure { margin: 0; }
.figstrip img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.figstrip figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* --- Photo-backed band: replaces flat dark sections ---------------------- */
.law-dark,
.avena-dark {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  overflow: hidden;
}
.law-dark::before,
.avena-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--band-img, url('/assets/img/places/capitol-rotunda.jpg'));
  background-size: cover;
  background-position: center 40%;
}
.law-dark::after,
.avena-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(6, 15, 26, .94) 0%, rgba(8, 19, 32, .86) 46%, rgba(10, 23, 37, .62) 100%);
}

/* --- Stat band: numbers, not another wall of prose ----------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: var(--sp-5);
}
.stats > div { padding: var(--sp-4) var(--sp-3); background: #fff; text-align: center; }
.stats dt,
.stats > div > span {
  display: block;
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stats dd,
.stats > div > strong {
  display: block;
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
}
.stats small { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* --- Sticky lead rail (desktop) ------------------------------------------ */
.leadrail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(calc(100% - 46px), -50%);
  z-index: 880;
  display: flex;
  align-items: stretch;
  background: var(--navy);
  border-radius: var(--r) 0 0 var(--r);
  box-shadow: -6px 0 24px rgba(10, 23, 37, .25);
  transition: transform .28s ease;
}
.leadrail:hover,
.leadrail:focus-within { transform: translate(0, -50%); }
.leadrail__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  background: var(--gold-br);
  color: var(--ink);
  border-radius: var(--r) 0 0 var(--r);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-block: var(--sp-3);
}
.leadrail__body { padding: var(--sp-3) var(--sp-4); width: 268px; }
.leadrail__body p { color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.55; margin-bottom: var(--sp-2); }
.leadrail__body strong { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }
.leadrail__body .btn { width: 100%; margin-bottom: 8px; }
@media (max-width: 1200px) { .leadrail { display: none; } }
@media (prefers-reduced-motion: reduce) { .leadrail { transition: none; } }

@media (max-width: 900px) {
  .mediaband__inner { grid-template-columns: 1fr; }
  .mediaband--flip .mediaband__inner > figure { order: 0; }
  .mediaband figure::before { width: 40px; height: 40px; top: -6px; left: -6px; }
}

/* ---------- 40. Person profile pages ------------------------------------- */
.profile {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: var(--shell);
  margin-inline: auto;
}
.profile__card {
  position: sticky;
  top: 104px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-br);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}
.profile__card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 15%;
  background: var(--mist);
}
.profile__card-body { display: grid; gap: 3px; padding: var(--sp-4); border-top: 1px solid var(--line-soft); }
.profile__card-body strong { color: var(--navy); font-size: 23px; letter-spacing: .02em; line-height: 1.15; }
.profile__card-body span {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.profile__card-body a { display: block; padding: 4px 0; font-size: 16px; color: var(--slate); text-decoration: none; }
.profile__card-body a:hover { color: var(--navy); text-decoration: underline; }
.profile__copy h2 { margin-bottom: var(--sp-2); }
.profile__copy .rule { margin-bottom: var(--sp-4); }
.profile__copy p { font-size: clamp(17.5px, 1.2vw, 19.5px); }

@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; }
  .profile__card { position: static; max-width: 380px; }
}

/* ---------- 41. Callout variant used on the strategist profile ----------- */
.callout--gold .law-cta-row { margin-top: var(--sp-3); }
.callout--gold .law-btn { min-height: 48px; padding-block: 12px; }

/* ==========================================================================
   42. Hero + conversion band contrast, after the photography rebuild
   Sections 32 and 34 were written when every hero was dark navy. The split
   hero is now a LIGHT panel, so those rules were putting bright gold and
   white text onto near-white. Light treatment is asserted here (last wins at
   equal specificity), and the feature heroes - which really are dark - take
   it back with an extra ancestor class.
   ========================================================================== */

/* --- Split hero: light panel --------------------------------------------- */
.law-hero .law-eyebrow,   .law-hero .avena-eyebrow,
.avena-hero .law-eyebrow, .avena-hero .avena-eyebrow { color: var(--gold); }
.law-hero .law-eyebrow::before,   .law-hero .avena-eyebrow::before,
.avena-hero .law-eyebrow::before, .avena-hero .avena-eyebrow::before { background: var(--gold); }

.law-hero .btn--secondary,   .law-hero .law-btn-secondary,   .law-hero .avena-btn-secondary,
.avena-hero .btn--secondary, .avena-hero .law-btn-secondary, .avena-hero .avena-btn-secondary,
.law-hero .btn--dark,   .law-hero .law-btn-dark,   .law-hero .avena-btn-dark,
.avena-hero .btn--dark, .avena-hero .law-btn-dark, .avena-hero .avena-btn-dark {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.law-hero .btn--secondary:hover,   .law-hero .law-btn-secondary:hover,   .law-hero .avena-btn-secondary:hover,
.avena-hero .btn--secondary:hover, .avena-hero .law-btn-secondary:hover, .avena-hero .avena-btn-secondary:hover,
.law-hero .btn--dark:hover,   .law-hero .law-btn-dark:hover,   .law-hero .avena-btn-dark:hover,
.avena-hero .btn--dark:hover, .avena-hero .law-btn-dark:hover, .avena-hero .avena-btn-dark:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* --- Feature hero: genuinely dark, so take the dark treatment back -------- */
.avena-homepage .law-hero .law-eyebrow,    .avena-homepage .law-hero .avena-eyebrow,
.avena-county-page .avena-hero .law-eyebrow, .avena-county-page .avena-hero .avena-eyebrow,
.avena-team-page .avena-hero .law-eyebrow,   .avena-team-page .avena-hero .avena-eyebrow { color: var(--gold-br); }
.avena-homepage .law-hero .law-eyebrow::before,    .avena-homepage .law-hero .avena-eyebrow::before,
.avena-county-page .avena-hero .avena-eyebrow::before,
.avena-team-page .avena-hero .avena-eyebrow::before { background: var(--gold-br); }

.avena-homepage .law-hero .btn--secondary,   .avena-homepage .law-hero .law-btn-secondary,   .avena-homepage .law-hero .avena-btn-secondary,
.avena-homepage .law-hero .btn--dark,        .avena-homepage .law-hero .law-btn-dark,        .avena-homepage .law-hero .avena-btn-dark,
.avena-county-page .avena-hero .btn--secondary, .avena-county-page .avena-hero .law-btn-secondary, .avena-county-page .avena-hero .avena-btn-secondary,
.avena-county-page .avena-hero .btn--dark,      .avena-county-page .avena-hero .law-btn-dark,      .avena-county-page .avena-hero .avena-btn-dark,
.avena-team-page .avena-hero .btn--secondary,   .avena-team-page .avena-hero .law-btn-secondary,   .avena-team-page .avena-hero .avena-btn-secondary,
.avena-team-page .avena-hero .btn--dark,        .avena-team-page .avena-hero .law-btn-dark,        .avena-team-page .avena-hero .avena-btn-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .62);
  color: #fff;
}
.avena-homepage .law-hero .btn--secondary:hover,   .avena-homepage .law-hero .law-btn-secondary:hover,   .avena-homepage .law-hero .avena-btn-secondary:hover,
.avena-homepage .law-hero .btn--dark:hover,        .avena-homepage .law-hero .law-btn-dark:hover,        .avena-homepage .law-hero .avena-btn-dark:hover,
.avena-county-page .avena-hero .btn--secondary:hover, .avena-county-page .avena-hero .law-btn-secondary:hover, .avena-county-page .avena-hero .avena-btn-secondary:hover,
.avena-team-page .avena-hero .btn--secondary:hover,   .avena-team-page .avena-hero .law-btn-secondary:hover,   .avena-team-page .avena-hero .avena-btn-secondary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

/* --- Conversion band sits on a dark photograph --------------------------- */
.fcta .btn--secondary,
.fcta .law-btn-secondary,
.fcta .avena-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, .62);
  color: #fff;
}
.fcta .btn--secondary:hover,
.fcta .law-btn-secondary:hover,
.fcta .avena-btn-secondary:hover { background: #fff; border-color: #fff; color: var(--navy); }
.fcta a:not([class*="btn"]) { color: var(--gold-br); }

/* --- Media band caption links -------------------------------------------- */
.mediaband figcaption a { color: var(--muted); text-decoration: underline; }
.mediaband figcaption a:hover { color: var(--navy); }

/* ==========================================================================
   43. Live Google reviews
   The block renders with no numbers at all. JavaScript fills them in from
   /api/reviews. If the key is not configured the numbers stay hidden and only
   the link to the Google profile shows, so a stale figure can never appear.
   ========================================================================== */
.reviews {
  display: grid;
  gap: var(--sp-4);
}
.reviews__panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-br);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}
.reviews__score {
  display: block;
  color: var(--navy);
  font-size: clamp(52px, 7vw, 82px);
  line-height: .9;
  letter-spacing: -.02em;
}
.reviews__scorewrap { text-align: center; }
.reviews__outof { display: block; margin-top: 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reviews__count { display: block; margin-top: 6px; color: var(--slate); font-size: 16.5px; }
.reviews__stamp { display: block; margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.reviews__brand { display: flex; align-items: center; gap: .5em; margin-bottom: 8px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* States: hide the numeric side until the feed confirms it */
.reviews[data-state="unconfigured"] .reviews__scorewrap,
.reviews[data-state="unconfigured"] .reviews__count,
.reviews[data-state="unconfigured"] .reviews__stamp,
.reviews:not([data-state]) .reviews__scorewrap,
.reviews:not([data-state]) .reviews__count,
.reviews:not([data-state]) .reviews__stamp { display: none; }
.reviews[data-state="unconfigured"] .reviews__panel,
.reviews:not([data-state]) .reviews__panel { grid-template-columns: 1fr; }

/* Fractional star fill, so 4.6 draws as 4.6 and not as 5 */
.stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.stars i {
  width: 20px;
  height: 20px;
  background:
    linear-gradient(90deg, var(--gold-br) var(--fill, 100%), rgba(16, 36, 58, .16) var(--fill, 100%));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stars--lg i { width: 27px; height: 27px; }

.reviews__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-3);
}
.review {
  margin: 0;
  padding: var(--sp-4);
  background: var(--parch);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-br);
  border-radius: var(--r);
}
.review .stars { margin-bottom: var(--sp-2); }
.review blockquote { padding: 0; margin: 0 0 var(--sp-2); background: none; border: 0; font-size: 16.5px; line-height: 1.65; color: var(--slate); }
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review figcaption { color: var(--navy); font-size: 15px; letter-spacing: .03em; }
.review figcaption span { color: var(--muted); }

/* ==========================================================================
   44. Office / visit block
   ========================================================================== */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
.visit__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--mist);
}
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visit__facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-block: var(--sp-4); }
.visit__fact { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); background: #fff; align-items: baseline; }
.visit__fact dt { color: var(--gold); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.visit__fact dd { margin: 0; color: var(--slate); font-size: 16.5px; line-height: 1.6; }
.visit__fact dd strong { color: var(--navy); }
.visit__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--sp-3); }
.visit__shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }

/* ==========================================================================
   45. Practice-area filter grid
   ========================================================================== */
.filter__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--sp-4); }
.filter__btn {
  padding: 10px 18px;
  min-height: 44px;
  background: #fff;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15.5px;
  cursor: pointer;
  transition: all .16s ease;
}
.filter__btn:hover { border-color: var(--navy); background: var(--mist); }
.filter__btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter__count { margin-left: auto; color: var(--muted); font-size: 14.5px; letter-spacing: .08em; text-transform: uppercase; }

.svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--sp-3);
}
.svc__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.svc__card:hover { border-color: var(--navy); box-shadow: var(--sh-2); transform: translateY(-3px); }
.svc__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--mist);
  border: 1px solid var(--mist-2);
  color: var(--navy);
}
.svc__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc__card strong { display: block; color: var(--navy); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; }
.svc__card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.svc__meta { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 6px; }
.svc__tag { padding: 4px 11px; background: var(--parch); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); }
.svc__go { display: inline-flex; align-items: center; gap: .4em; color: var(--navy); font-size: 15px; letter-spacing: .05em; }
.svc__go::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }

/* ==========================================================================
   46. Animated process
   ========================================================================== */
.process { position: relative; margin-top: var(--sp-6); }
.process__rail {
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.process__rail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--progress, 0%);
  background: linear-gradient(180deg, var(--gold-br), var(--gold));
  transition: height .7s cubic-bezier(.22, .61, .36, 1);
}
.pstep {
  position: relative;
  padding-left: 76px;
  padding-bottom: var(--sp-5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.pstep.is-on { opacity: 1; transform: none; }
.pstep:last-child { padding-bottom: 0; }
.pstep__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--line);
  color: var(--muted);
  font-size: 19px;
  letter-spacing: .02em;
  transition: border-color .45s ease, background .45s ease, color .45s ease, transform .45s ease;
}
.pstep.is-on .pstep__num {
  border-color: var(--gold-br);
  background: var(--navy);
  color: var(--gold-br);
  transform: scale(1.04);
}
.pstep__num svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pstep__head {
  display: flex;
  align-items: baseline;
  gap: .6em;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  color: var(--navy);
}
.pstep__head h3 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); }
.pstep__head::after {
  content: "";
  margin-left: auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .25s ease;
  flex: 0 0 10px;
}
.pstep.is-open .pstep__head::after { transform: rotate(-135deg); }
.pstep__when { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pstep__body { margin-top: var(--sp-2); color: var(--slate); font-size: 17px; line-height: 1.7; max-width: 62ch; }
.pstep__more {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.pstep.is-open .pstep__more { max-height: 460px; }
.pstep__more ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.pstep__more li { color: var(--muted); font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .pstep { opacity: 1; transform: none; }
  .process__rail::after { transition: none; }
}

/* ==========================================================================
   47. County tile map
   A deliberately diagrammatic tile grid, not a fake outline map. Each tile
   sits roughly where the county sits, and every tile is a real button.
   ========================================================================== */
.cmap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  margin-top: var(--sp-5);
}
.cmap__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cmap__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--slate);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: all .16s ease;
}
.cmap__tile span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmap__tile:hover { border-color: var(--navy); background: var(--mist); transform: translateY(-2px); }
.cmap__tile[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: var(--sh-2);
}
.cmap__tile[aria-pressed="true"] span { color: var(--gold-br); }
.cmap__tile[data-hub] { border-color: var(--gold-br); border-width: 2px; }
.cmap__tile[data-hub]::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--gold-br);
  transform: rotate(45deg);
}
.cmap__tile[data-empty] { visibility: hidden; pointer-events: none; }

.cmap__panel {
  position: sticky;
  top: 104px;
  padding: var(--sp-4);
  background: var(--parch);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-br);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.cmap__panel h3 { margin-bottom: 2px; font-size: clamp(22px, 2vw, 28px); }
.cmap__seat { display: block; color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.cmap__panel p { color: var(--slate); font-size: 16.5px; line-height: 1.65; }
.cmap__panel .law-btn { margin-top: var(--sp-2); }

/* ==========================================================================
   48. Affiliation trust grid
   ========================================================================== */
.affil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.affil__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--gold-br);
  border-radius: var(--r);
  text-decoration: none;
}
.affil__card:hover { background: rgba(255, 255, 255, .12); }
.affil__mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(215, 168, 58, .16);
  border: 1px solid rgba(215, 168, 58, .4);
  color: var(--gold-br);
  font-size: 15px;
  letter-spacing: .06em;
}
.affil__card strong { display: block; color: #fff; font-size: 18.5px; line-height: 1.25; }
.affil__card p { margin: 0; color: rgba(255, 255, 255, .76); font-size: 15.5px; line-height: 1.6; }
.affil__why {
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: var(--gold-lt);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ==========================================================================
   49. Knowledge block - the AI-readable definition panel
   ========================================================================== */
.kb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3.5vw, 48px); margin-top: var(--sp-5); }
.kb__defs { margin: 0; }
.kb__defs > div {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.kb__defs dt { color: var(--navy); font-size: clamp(18px, 1.5vw, 21px); letter-spacing: .01em; margin-bottom: 4px; }
.kb__defs dd { margin: 0; color: var(--slate); font-size: 16.5px; line-height: 1.7; }
.kb__defs dd em { border: 0; color: var(--gold); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-top: 6px; }
.kb__aside {
  padding: var(--sp-4);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r);
  align-self: start;
  position: sticky;
  top: 104px;
}
.kb__aside h3 { font-size: 19px; }
.kb__aside ul { list-style: none; padding: 0; margin: 0; }
.kb__aside li { margin: 0; border-bottom: 1px dotted var(--line); }
.kb__aside a { display: block; padding: 9px 0; color: var(--slate); font-size: 16px; text-decoration: none; }
.kb__aside a:hover { color: var(--navy); padding-left: 5px; }

/* ==========================================================================
   50. Site index (moved off the homepage)
   ========================================================================== */
.sindex { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: var(--sp-5); }
.sindex h3 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sindex ul { list-style: none; padding: 0; margin: 0; }
.sindex li { margin: 0; }
.sindex a { display: block; padding: 8px 0; color: var(--slate); font-size: 16.5px; text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.sindex a:hover { color: var(--navy); padding-left: 5px; }

@media (max-width: 900px) {
  .reviews__panel { grid-template-columns: 1fr; text-align: center; }
  .reviews__brand { justify-content: center; }
  .visit,
  .cmap,
  .kb { grid-template-columns: 1fr; }
  .cmap__panel,
  .kb__aside { position: static; }
  .visit__fact { grid-template-columns: 1fr; gap: 2px; }
  .pstep { padding-left: 62px; }
  .process__rail { left: 21px; }
  .pstep__num { width: 44px; height: 44px; font-size: 16px; }
}
@media (max-width: 560px) {
  .cmap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmap__tile[data-empty] { display: none; }
  .visit__shots { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   51. Government Blue
   USWDS primary (#005ea2) adopted as the interactive colour of the site.
   Gold stays the conversion colour; navy/ink stay the ground. This is what
   makes the site read as institutional from the first paint.
   ========================================================================== */
:root {
  --gov: #005ea2;
  --gov-dark: #1a4480;
  --gov-darker: #162e51;
  --gov-light: #d9e8f6;
  --gov-lighter: #eff6fb;
}
a { color: var(--gov); }
a:hover { color: var(--gov-dark); }
.masthead::after {
  background: linear-gradient(90deg, var(--gov) 0 33.3%, var(--gold-br) 33.3% 66.6%, var(--gov) 66.6%);
}
.nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gov); }
.idbar { border-bottom-color: rgba(0, 94, 162, .55); }
.btn--gov {
  background: var(--gov);
  border-color: var(--gov);
  color: #fff;
}
.btn--gov:hover { background: var(--gov-dark); border-color: var(--gov-dark); color: #fff; }
.summary, .callout { border-left-color: var(--gov); }
.callout--urgent { border-left-color: var(--seal); }
.callout--good { border-left-color: var(--green); }
.callout--gold { border-left-color: var(--gold-br); }
details[open] { border-color: var(--gov); }
.opt[aria-pressed="true"],
.filter__btn[aria-pressed="true"],
.cmap__tile[aria-pressed="true"] { background: var(--gov-darker); border-color: var(--gov-darker); }
.footer__button { background: var(--gov-darker); }
.footer__button:hover { background: var(--gold-br); }

/* ==========================================================================
   52. Quick-grab strip - services in one swipe
   Sits directly under the hero. On phones it scroll-snaps horizontally so a
   low-attention visitor gets every service and the phone number in seconds.
   ========================================================================== */
.quickgrab {
  background: var(--gov-darker);
  border-block: 1px solid rgba(215, 168, 58, .35);
}
.quickgrab__inner {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding-block: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.quickgrab__inner::-webkit-scrollbar { display: none; }
.quickgrab a {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 10px 16px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 15px;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
}
.quickgrab a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.quickgrab a.is-hot {
  background: var(--gold-br);
  border-color: var(--gold-br);
  color: var(--ink);
}
.quickgrab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 17px; }

/* ==========================================================================
   53. Spotlight - the Priority Practice Area, rebuilt
   A full-width command panel: gov-blue depth, a wall-sized watermark, the
   10-day deadline as the hero statistic, and the OWI satellite pages as a
   lit grid. Steps stagger in on scroll like the process rail.
   ========================================================================== */
.spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -20%, rgba(0, 94, 162, .55), transparent 62%),
    radial-gradient(900px 480px at -10% 110%, rgba(215, 168, 58, .16), transparent 58%),
    linear-gradient(160deg, var(--gov-darker) 0%, var(--ink) 78%);
  color: #fff;
  padding-block: var(--band);
  padding-inline: max(var(--gut), calc((100vw - var(--shell)) / 2));
  border-block: 1px solid rgba(215, 168, 58, .3);
}
.spotlight::before {
  content: "OWI";
  position: absolute;
  right: -.06em;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  font-size: clamp(180px, 30vw, 420px);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .045);
  pointer-events: none;
  user-select: none;
}
.spotlight .law-eyebrow { color: var(--gold-br); }
.spotlight .law-eyebrow::before { background: var(--gold-br); }
.spotlight h2 { color: #fff; max-width: 18ch; }
.spotlight__lead { color: rgba(255, 255, 255, .85); max-width: 52ch; font-size: clamp(17.5px, 1.3vw, 20px); }

.spotlight__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
  overflow: hidden;
  margin-block: var(--sp-5);
  max-width: 880px;
}
.spotlight__stat { padding: var(--sp-4) var(--sp-3); background: rgba(10, 23, 37, .55); backdrop-filter: blur(2px); }
.spotlight__stat strong {
  display: block;
  color: var(--gold-br);
  font-size: clamp(34px, 4vw, 54px);
  line-height: .95;
  letter-spacing: -.01em;
}
.spotlight__stat span { display: block; margin-top: 7px; color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.5; }
.spotlight__stat em { border: 0; color: rgba(255, 255, 255, .5); font-size: 12px; letter-spacing: .08em; }

.spotlight__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
}
.spotlight__grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
  text-decoration: none;
  overflow: hidden;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.spotlight__grid a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-br), rgba(215, 168, 58, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.spotlight__grid a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(215, 168, 58, .5); transform: translateY(-3px); }
.spotlight__grid a:hover::after { transform: scaleX(1); }
.spotlight__grid strong { color: #fff; font-size: 17.5px; letter-spacing: .02em; }
.spotlight__grid span { color: rgba(255, 255, 255, .66); font-size: 14px; line-height: 1.5; }

/* ==========================================================================
   54. Portrait - the attorney introduction, rebuilt
   The photograph is the section now: large, layered, with the credentials
   pinned to it as physical badge cards.
   ========================================================================== */
.portrait {
  display: grid;
  grid-template-columns: minmax(300px, 470px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  max-width: var(--shell);
  margin-inline: auto;
  padding-block: var(--band);
  padding-inline: var(--gut);
}
.portrait__stage { position: relative; }
.portrait__stage::before {
  content: "";
  position: absolute;
  inset: 26px -26px -26px 26px;
  background:
    repeating-linear-gradient(45deg, rgba(0, 94, 162, .12) 0 2px, transparent 2px 12px),
    var(--gov-lighter);
  border: 1px solid var(--gov-light);
  border-radius: var(--r);
  z-index: -1;
}
.portrait__stage img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: center 12%;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  transition: transform .35s ease, box-shadow .35s ease;
}
.portrait__stage:hover img { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(10,23,37,.12), 0 34px 80px rgba(10,23,37,.24); }
.portrait__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-br);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  transition: transform .3s ease;
}
.portrait__stage:hover .portrait__badge { transform: translateY(-2px) rotate(-.5deg); }
.portrait__badge--award { right: -14px; bottom: 34px; }
.portrait__badge--bar { left: -14px; top: 30px; border-left-color: var(--gov); }
.portrait__badge i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-br);
  font-size: 13px;
  letter-spacing: .04em;
}
.portrait__badge--bar i { background: var(--gov-darker); color: #fff; }
.portrait__badge strong { display: block; color: var(--navy); font-size: 14.5px; line-height: 1.2; letter-spacing: .02em; }
.portrait__badge span { display: block; color: var(--muted); font-size: 12px; letter-spacing: .06em; }

.portrait__copy h2 { margin-bottom: 4px; font-size: clamp(34px, 4vw, 56px); }
.portrait__role { display: block; color: var(--gov); font-size: clamp(15px, 1.2vw, 18px); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.portrait__marks { display: flex; flex-wrap: wrap; gap: 8px; margin-block: var(--sp-4); }
.portrait__marks span {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 7px 14px;
  background: var(--gov-lighter);
  border: 1px solid var(--gov-light);
  border-radius: 999px;
  color: var(--gov-darker);
  font-size: 14px;
  letter-spacing: .03em;
}
.portrait__marks span::before { content: ""; width: 6px; height: 6px; background: var(--gov); transform: rotate(45deg); }

/* ==========================================================================
   55. Creed - the quote, rebuilt as the moment you pick up the phone
   ========================================================================== */
.creed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(64px, 9vw, 130px);
  padding-inline: var(--gut);
  background:
    radial-gradient(900px 400px at 50% 120%, rgba(0, 94, 162, .35), transparent 65%),
    var(--ink);
  color: #fff;
  border-block: 1px solid rgba(215, 168, 58, .3);
}
.creed__mark { display: block; margin: 0 auto var(--sp-3); color: var(--gold-br); font-size: 64px; line-height: .4; }
.creed blockquote {
  max-width: 22ch;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.18;
}
.creed blockquote em {
  border: 0;
  color: var(--gold-br);
  background: linear-gradient(transparent 62%, rgba(215, 168, 58, .28) 62%);
  padding: 0 .08em;
}
.creed cite { display: block; margin-top: var(--sp-3); color: rgba(255, 255, 255, .6); font-style: normal; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; }
.creed__act { margin-top: var(--sp-5); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.creed__call {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 18px 40px;
  min-height: 62px;
  background: var(--gold-br);
  color: var(--ink);
  border-radius: 999px;
  font-size: clamp(17px, 1.4vw, 21px);
  letter-spacing: .04em;
  text-decoration: none;
}
.creed__call:hover { background: #e6bb55; color: var(--ink); }
.creed__call::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(215, 168, 58, .55);
  border-radius: 999px;
  animation: creedring 2.6s ease-out infinite;
}
@keyframes creedring {
  0% { transform: scale(.96); opacity: .9; }
  70% { transform: scale(1.1); opacity: 0; }
  100% { transform: scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .creed__call::before { animation: none; opacity: 0; } }
.creed__sub { color: rgba(255, 255, 255, .55); font-size: 14.5px; }

/* ==========================================================================
   56. Glossary explorer (kbx) - the OWI terms, rebuilt
   The semantic <dl> stays (the DefinedTermSet schema is generated from it);
   JavaScript turns the terms into a selector and shows one definition at a
   time. Without JavaScript every definition is simply visible.
   ========================================================================== */
.kbx .kb__defs { display: block; }
.kbx.is-live { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; margin-top: var(--sp-5); }
.kbx.is-live .kb__defs { display: contents; }
.kbx__list { display: grid; gap: 6px; align-self: start; }
.kbx.is-live .kb__defs > div { display: contents; }
.kbx.is-live dt {
  order: 0;
  margin: 0;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--r);
  color: var(--slate);
  font-size: 16.5px;
  line-height: 1.3;
  cursor: pointer;
  transition: all .16s ease;
}
.kbx.is-live dt:hover { border-color: var(--gov); background: var(--gov-lighter); }
.kbx.is-live dt[aria-selected="true"] {
  background: var(--gov-darker);
  border-color: var(--gov-darker);
  border-left-color: var(--gold-br);
  color: #fff;
}
.kbx.is-live dd { display: none; margin: 0; }
.kbx.is-live dd.is-active {
  display: block;
  grid-column: 2;
  grid-row: 1 / span 40;
  align-self: start;
  position: sticky;
  top: 104px;
  padding: clamp(24px, 3vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gov);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  color: var(--slate);
  font-size: clamp(17.5px, 1.3vw, 20px);
  line-height: 1.75;
  animation: kbxin .3s ease;
}
@keyframes kbxin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kbx.is-live dd.is-active { animation: none; } }
.kbx.is-live dd.is-active::before {
  content: attr(data-term);
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--navy);
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.15;
}
.kbx dd strong { color: var(--navy); }
.kbx dd em {
  display: inline-block;
  border: 0;
  margin-top: var(--sp-3);
  padding: 5px 13px;
  background: var(--gov-lighter);
  border: 1px solid var(--gov-light);
  border-radius: 999px;
  color: var(--gov-darker);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: none;
}
/* no-JS and small-screen fallback: stacked cards */
.kbx:not(.is-live) .kb__defs > div {
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gov);
  border-radius: var(--r);
  margin-bottom: var(--sp-2);
}
.kbx:not(.is-live) dt { color: var(--navy); font-size: clamp(18px, 1.5vw, 21px); margin-bottom: 4px; }
@media (max-width: 900px) {
  .kbx.is-live { display: block; }
  .kbx.is-live .kb__defs { display: block; }
  .kbx.is-live .kb__defs > div { display: block; margin-bottom: var(--sp-2); }
  .kbx.is-live dt { border-left-color: var(--gov); }
  .kbx.is-live dt[aria-selected="true"] { border-radius: var(--r) var(--r) 0 0; }
  .kbx.is-live dd.is-active { position: static; animation: none; border-radius: 0 0 var(--r) var(--r); border-top: 0; grid-column: auto; grid-row: auto; }
}

/* ==========================================================================
   57. Affiliation logos
   Real marks, unmodified, each on a chip that suits its colourway. The card
   text still argues what the membership means - the logo just proves it.
   ========================================================================== */
.affil__logo {
  width: 132px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .2);
}
.affil__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: none; }
.affil__logo--navy { background: var(--gov-darker); }
.affil__logo--text {
  color: var(--gov-darker);
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
}

/* ==========================================================================
   58. Footer - Glenn front and centre, and circular faces
   ========================================================================== */
.footer__faces { display: flex; align-items: center; }
.footer__faces a { flex: 0 0 auto; }
.footer__faces img {
  width: 46px;
  height: 46px;
  min-width: 46px;
  aspect-ratio: 1;
  flex: 0 0 46px;
}
.footer__glenn { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-3); }
.footer__glenn img {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-br);
  background: var(--mist);
}
.footer__glenn strong { display: block; color: var(--navy); font-size: 17px; line-height: 1.2; }
.footer__glenn span { display: block; color: var(--muted); font-size: 13px; letter-spacing: .05em; }

/* ==========================================================================
   59. County crawl row + county page components
   ========================================================================== */
.cmap__links { margin-top: var(--sp-4); font-size: 15px; color: var(--muted); line-height: 2; }
.cmap__links a { color: var(--slate); text-decoration: none; padding: 2px 4px; }
.cmap__links a:hover { color: var(--gov); text-decoration: underline; }
.cmap__links i { color: var(--line); font-style: normal; }

.court-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--gov-lighter);
  border: 1px solid var(--gov-light);
  border-left: 4px solid var(--gov);
  border-radius: var(--r);
  margin-block: var(--sp-4);
}
.court-card i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gov-darker);
  color: #fff;
}
.court-card i svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.court-card strong { display: block; color: var(--navy); font-size: 18.5px; margin-bottom: 2px; }
.court-card p { margin: 0; font-size: 16px; color: var(--slate); }

/* ==========================================================================
   60. Mobile condensation
   The site read like a dictionary on phones. Three mechanisms fix that:
   scroll-snap quick-grab (52), clamped intros with a More toggle (here), and
   tighter rhythm.
   ========================================================================== */
.clamp-btn {
  display: none;
  margin-top: 2px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--gov);
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}
@media (max-width: 700px) {
  :root { --band: clamp(34px, 8vw, 52px); }
  .is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .clamp-btn { display: inline-block; }
  h1 { font-size: clamp(30px, 8.6vw, 38px); }
  h2 { font-size: clamp(24px, 6.6vw, 30px); }
  .lede, .law-subhead, .avena-subhead, .law-section-intro,
  .avena-section-intro, .avena-contact-lead { font-size: 16.5px; line-height: 1.62; }
  body { font-size: 16.5px; line-height: 1.7; }
  .sechead { margin-bottom: var(--sp-4); }
  .spotlight::before { font-size: 150px; top: auto; bottom: -20px; transform: none; }
  .portrait { grid-template-columns: 1fr; }
  .portrait__stage { max-width: 340px; margin-inline: auto 26px; }
  .portrait__badge--award { right: -20px; }
  .spotlight__stat strong { font-size: 30px; }
  .creed blockquote { font-size: clamp(26px, 8vw, 34px); }
  .visit__shots img { aspect-ratio: 4 / 3; }
  .stats > div { padding: var(--sp-3) var(--sp-2); }
  .stats dd, .stats > div > strong { font-size: 26px; }
}

/* ==========================================================================
   61. Practice-page alert grids, upgraded to the process standard
   Pure CSS - the existing markup on all eleven OWI pages picks this up.
   ========================================================================== */
.avena-owi-alert-grid { counter-reset: alert; }
.avena-owi-alert-grid > div {
  counter-increment: alert;
  position: relative;
  padding: var(--sp-4);
  padding-left: 66px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--seal);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.avena-owi-alert-grid > div:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.avena-owi-alert-grid > div::before {
  content: counter(alert, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--seal-lt);
  border: 2px solid var(--seal);
  color: var(--seal);
  font-size: 15px;
}

/* Spotlight links inherit the gov link colour on the <a> itself even though
   all visible text is in child elements - assert white so no bare text node
   could ever render low-contrast on the dark panel. */
.spotlight__grid a { color: #fff; }
.spotlight a:not([class*="btn"]) { color: var(--gold-br); }
.spotlight__grid a:hover { color: #fff; }

/* Spotlight and creed are dark surfaces the section-32 button list predates. */
.spotlight .btn--secondary, .spotlight .law-btn-secondary, .spotlight .avena-btn-secondary,
.creed .btn--secondary, .creed .law-btn-secondary, .creed .avena-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, .62);
  color: #fff;
}
.spotlight .btn--secondary:hover, .spotlight .law-btn-secondary:hover, .spotlight .avena-btn-secondary:hover,
.creed .btn--secondary:hover, .creed .law-btn-secondary:hover, .creed .avena-btn-secondary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

/* Clamp toggles injected into dark sections must not use the light link blue. */
.law-dark .clamp-btn, .avena-dark .clamp-btn, .spotlight .clamp-btn,
.creed .clamp-btn, .fcta .clamp-btn, .avena-contact-section .clamp-btn,
.law-final-cta .clamp-btn, .avena-final-cta .clamp-btn { color: var(--gold-br); }

/* ==========================================================================
   62. Fixes from design review
   ========================================================================== */

/* --- Affiliation logo containment ----------------------------------------
   Marks were escaping their chips (WACDL, GMC, ABA) and the text mark
   overflowed. Hard-contain everything; let text chips grow downward. */
.affil__logo {
  width: 150px;
  height: 60px;
  overflow: hidden;
  flex: 0 0 auto;
}
.affil__logo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.affil__logo--text {
  height: auto;
  min-height: 60px;
  padding: 10px 12px;
  font-size: 12.5px;
  letter-spacing: .06em;
  line-height: 1.25;
}

/* --- Glossary explorer: kill the phantom scroll --------------------------
   The active definition spanned 40 grid rows, and the grid gap applied to
   every one of those empty rows - hundreds of pixels of blank page. Rows now
   pack tight; the JS sizes the span to the real number of terms. */
.kbx.is-live {
  row-gap: 6px;
  column-gap: clamp(20px, 3vw, 44px);
  align-items: start;
  grid-auto-rows: min-content;
}
.kbx.is-live dd.is-active { grid-row: auto; }

/* --- Soft reveal ----------------------------------------------------------
   Cards and section headers ease in as they enter the viewport. The JS
   tags them and staggers siblings; reduced-motion shows everything at once. */
.reveal { transition-delay: var(--rd, 0ms); }
@media (prefers-reduced-motion: no-preference) {
  .sechead.reveal { transform: translateY(10px); }
}

/* ==========================================================================
   63. Glossary explorer v3 - accordion
   The two-pane grid kept inflating the section with phantom height. This
   layout has no spans and no sticky: a centered list of term rows, the
   active definition opening directly beneath its term. Height is always
   list + one definition. Overrides sections 56 and 62 entirely.
   ========================================================================== */
.kbx.is-live { display: block; }
.kbx.is-live .kb__defs { display: block; max-width: 920px; }
.kbx.is-live .kb__defs > div {
  display: block;
  margin-bottom: 8px;
  border-radius: var(--r);
  overflow: hidden;
}
.kbx.is-live dt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 46px 15px 18px;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gov);
  border-radius: var(--r);
  color: var(--navy);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.3;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.kbx.is-live dt::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 2px solid var(--gov);
  border-bottom: 2px solid var(--gov);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.kbx.is-live dt:hover { background: var(--gov-lighter); border-color: var(--gov); }
.kbx.is-live dt[aria-selected="true"] {
  background: var(--gov-darker);
  border-color: var(--gov-darker);
  color: #fff;
  border-radius: var(--r) var(--r) 0 0;
}
.kbx.is-live dt[aria-selected="true"]::after { border-color: var(--gold-br); transform: rotate(-135deg); margin-top: -3px; }
.kbx.is-live dd { display: none; margin: 0; }
.kbx.is-live dd.is-active {
  display: block;
  position: static;
  grid-row: auto;
  padding: clamp(18px, 2.4vw, 30px);
  background: #fff;
  border: 1px solid var(--gov-darker);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  color: var(--slate);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.75;
  animation: kbxin .25s ease;
}
.kbx.is-live dd.is-active::before { content: none; }