/* ============================================================
   Simms & Associates — design system
   Concept: "The Docket" — the firm runs two dockets (Personal
   Injury and Criminal Defense) and its real differentiator is an
   actual, citable trial record. The visual language borrows from
   filed case dockets, letterhead, and engraved seals rather than
   generic SaaS/glass UI. Palette stays within navy-blue / black /
   white / warm paper, per the firm's own letterhead.
   ============================================================ */

:root {
  --ink: #13151a;
  --black: #0a0b0d;
  --navy-deep: #0b1730;
  --navy: #142a52;
  --blue: #1e3f8f;
  --blue-mid: #2c53ab;
  --blue-bright: #3a67c9;
  --blue-pale: #eef2fb;
  --blue-pale-line: #d7e0f4;

  --paper: #ffffff;
  --parchment: #f8f6f1;
  --parchment-line: #e6e2d5;

  --line: #e3e1db;
  --line-on-dark: rgba(255, 255, 255, 0.14);
  --line-on-navy: rgba(255, 255, 255, 0.16);

  --gray-900: #14161b;
  --gray-700: #454851;
  --gray-600: #5b5e68;
  --gray-500: #80838d;
  --gray-400: #a7aab3;
  --gray-300: #c9cdd4;
  --gray-200: #dfe1e6;
  --gray-100: #f1f2f5;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(11, 23, 48, 0.07), 0 4px 12px -6px rgba(11, 23, 48, 0.16);
  --shadow-md: 0 10px 24px -10px rgba(11, 23, 48, 0.28);
  --shadow-lg: 0 22px 48px -16px rgba(11, 23, 48, 0.32);

  --maxw: 1220px;
  --maxw-narrow: 820px;

  --serif: "Frank Ruhl Libre", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.16;
  letter-spacing: -0.011em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.9rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem); }
h3 { font-size: clamp(1.28rem, 1.16rem + 0.5vw, 1.55rem); }
h4 { font-size: 1.08rem; letter-spacing: -0.005em; }

em { font-style: italic; color: var(--blue); }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 3px; }

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

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Type utilities ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--blue);
  display: inline-block;
}
.eyebrow-light { color: var(--blue-bright); }
.eyebrow-light::before { background: var(--blue-bright); }
.eyebrow-invert { color: rgba(255,255,255,0.72); }
.eyebrow-invert::before { background: rgba(255,255,255,0.5); }

.lead {
  font-size: 1.18rem;
  color: var(--gray-700);
  max-width: 62ch;
  line-height: 1.6;
}

.prose { max-width: var(--maxw-narrow); margin: 0 auto; }
.prose h3 { margin-top: 2em; }
.prose h4 { margin-top: 1.6em; color: var(--blue); }
.prose p { color: var(--gray-700); }
.prose ul { margin: 0 0 1.4em; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.55em;
  color: var(--gray-700);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1.5px;
  background: var(--blue);
}
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-pale-line); }
.prose a:hover { text-decoration-color: var(--blue); }
.prose img.inline-figure {
  float: right;
  margin: 4px 0 20px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 640px) {
  .prose img.inline-figure { float: none; margin: 0 0 20px; width: 100%; max-width: 240px; }
}

.cta-line {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--navy-deep);
  background: var(--blue-pale);
  border-left: 3px solid var(--blue);
  padding: 12px 18px;
  margin: 26px 0;
  display: inline-block;
}
.cta-line a { color: var(--blue-mid); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--blue-mid); border-color: var(--blue-mid); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  color: var(--navy-deep);
  border-color: var(--gray-400);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-pale); transform: translateY(-1px); }
.btn-invert {
  background: #fff;
  color: var(--navy-deep);
  border-color: #fff;
}
.btn-invert:hover { background: var(--blue-pale); transform: translateY(-1px); }
.btn-ghost-invert {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost-invert:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-sm { padding: 10px 18px; font-size: 0.86rem; }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal-stagger].in-view > * { opacity: 1; transform: none; }
[data-reveal-stagger].in-view > *:nth-child(1) { transition-delay: 0.03s; }
[data-reveal-stagger].in-view > *:nth-child(2) { transition-delay: 0.09s; }
[data-reveal-stagger].in-view > *:nth-child(3) { transition-delay: 0.15s; }
[data-reveal-stagger].in-view > *:nth-child(4) { transition-delay: 0.21s; }
[data-reveal-stagger].in-view > *:nth-child(5) { transition-delay: 0.27s; }
[data-reveal-stagger].in-view > *:nth-child(6) { transition-delay: 0.33s; }
[data-reveal-stagger].in-view > *:nth-child(7) { transition-delay: 0.39s; }
[data-reveal-stagger].in-view > *:nth-child(8) { transition-delay: 0.45s; }
[data-reveal-stagger].in-view > *:nth-child(9) { transition-delay: 0.51s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- Signature pen-stroke underline ----------
   Used once (hero + attorney signature) — an SVG path is drawn
   in via stroke-dashoffset, standing in for a signed line on a
   retainer letter. */
.signature-mark { position: relative; display: inline-block; }
.signature-mark svg path {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: draw-signature 1.1s var(--ease) 0.5s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .signature-mark svg path { animation: none; stroke-dashoffset: 0; }
}
@keyframes draw-signature {
  to { stroke-dashoffset: 0; }
}

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--navy-deep);
  color: var(--gray-400);
  font-size: 0.75rem;
  letter-spacing: 0.035em;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
  gap: 14px;
  flex-wrap: wrap;
  text-transform: uppercase;
}
.topbar-areas { display: flex; align-items: center; gap: 8px; }
.topbar a { color: var(--gray-400); }
.topbar a:hover { color: #fff; }
.topbar-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff !important;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none !important;
}
.topbar-call svg { width: 13px; height: 13px; color: var(--blue-bright); }
@media (max-width: 640px) { .topbar-areas span:not(.dot) { display: none; } }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(11, 23, 48, 0.22); }

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
}

.brand { display: flex; align-items: center; }
.brand-logo img { height: 46px; width: auto; }

.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a,
.nav-item-wrap > a {
  display: inline-block;
  padding: 10px 13px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--navy-deep);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.main-nav > ul > li > a:hover,
.nav-item-wrap > a:hover { color: var(--blue); background: var(--blue-pale); }
.main-nav > ul > li[aria-current="page"] > a,
.main-nav a[aria-current="page"] { color: var(--blue); }

.nav-item-wrap { display: inline-flex; align-items: center; }
.dropdown-toggle {
  background: none;
  border: none;
  padding: 8px 6px 8px 0;
  cursor: pointer;
  color: var(--gray-500);
  display: inline-flex;
}
.dropdown-toggle svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.has-dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }

.dropdown-panel {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 14px 10px 10px;
  min-width: 240px;
}
.dropdown-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--gray-700);
  font-size: 0.92rem;
  font-weight: 500;
}
.dropdown-panel a:hover { background: var(--blue-pale); color: var(--blue); text-decoration: none; }
.dropdown-panel .dropdown-hub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  padding-bottom: 12px;
}

@media (min-width: 961px) {
  /* Click-to-open, not hover-to-open. Hover-driven mega-menus are notoriously
     fragile (dead zones between trigger and panel, hover state getting out of
     sync with hover-independent click state, `:focus-within` getting pinned on
     by focus the browser restores after back/forward navigation) — three
     different ways a menu can end up looking "stuck open" with the cursor
     nowhere near it. A single explicit trigger (the chevron button, already
     built for mobile) sidesteps all of that: the only thing that opens the
     panel is a click, and the only things that close it are another click,
     a click elsewhere (below), or Escape. */
  .dropdown-panel { position: absolute; top: 100%; left: 0; z-index: 50; }
  .dropdown-panel.wide { columns: 2; column-gap: 4px; width: 460px; }
  .dropdown-panel.wide .dropdown-hub { column-span: all; }
  .has-dropdown.open > .dropdown-panel { display: block; }
}

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-cta-desktop { display: inline-flex; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  background: var(--navy-deep);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease), top 0.22s var(--ease);
}
.nav-toggle span { top: 19px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav-cta-desktop { display: none; }
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 65px 0 0 0;
    background: #fff;
    overflow-y: auto;
    max-height: calc(100vh - 65px);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .main-nav.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .main-nav > ul { flex-direction: column; align-items: stretch; padding: 10px 20px 30px; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); }
  .main-nav > ul > li > a, .nav-item-wrap > a { display: block; padding: 15px 4px; font-size: 1.02rem; }
  .nav-item-wrap { display: flex; justify-content: space-between; align-items: center; }
  .dropdown-toggle { padding: 15px 4px; }
  .dropdown-panel { border: none; box-shadow: none; padding: 0 0 10px 12px; }
  .dropdown-panel.wide { columns: 1; width: auto; }
  .has-dropdown.open .dropdown-panel { display: block; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  padding: 76px 0 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 420px at 88% -10%, rgba(58, 103, 201, 0.35), transparent 65%),
    radial-gradient(900px 500px at -10% 110%, rgba(30, 63, 143, 0.28), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 64px;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em, .section-navy em, .cta-band em { color: var(--blue-bright); }
.hero .lead { color: rgba(255,255,255,0.78); }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.hero-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero-portrait-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(10,17,31,0.92), rgba(10,17,31,0));
  color: #fff;
  padding: 40px 22px 18px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.hero-portrait-caption strong { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin-bottom: 3px; letter-spacing: 0; }

/* Same "photo with gradient caption" language as .hero-portrait, reused for the
   office photos so they read as part of one system rather than a bolted-on gallery. */
.photo-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
}
.photo-banner img { width: 100%; height: 100%; object-fit: cover; }
.photo-banner-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(10,17,31,0.88), rgba(10,17,31,0));
  color: #fff;
  padding: 46px 26px 18px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.photo-banner-caption strong { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin-bottom: 3px; letter-spacing: 0; }
@media (max-width: 640px) { .photo-banner { aspect-ratio: 4 / 3; } }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
  .hero-portrait { max-width: 320px; }
}

/* ---------- Intake panels (dual-docket hero device) ---------- */
.intake {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.intake-panel {
  display: block;
  padding: 34px 34px 30px;
  position: relative;
  transition: background 0.25s var(--ease);
  border-right: 1px solid rgba(255,255,255,0.14);
}
.intake-panel:last-child { border-right: none; }
.intake-panel:hover { background: rgba(255,255,255,0.045); text-decoration: none; }
.intake-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-bright);
  display: block;
  margin-bottom: 10px;
}
.intake-panel h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.intake-panel h3 svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue-bright); transition: transform 0.25s var(--ease); }
.intake-panel:hover h3 svg { transform: translateX(5px); }
.intake-panel p { color: rgba(255,255,255,0.68); font-size: 0.96rem; margin-bottom: 0; max-width: 42ch; }
@media (max-width: 720px) {
  .intake { grid-template-columns: 1fr; }
  .intake-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); }
}

/* ---------- Stat / track strip ---------- */
.track-strip {
  background: var(--black);
  color: #fff;
  padding: 26px 0;
}
.track-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.track-item { display: flex; flex-direction: column; gap: 4px; }
.track-figure { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; color: #fff; }
.track-label { font-size: 0.82rem; color: var(--gray-400); line-height: 1.4; }
.track-label a { color: var(--gray-400); text-decoration: underline; text-underline-offset: 2px; }
.track-label a:hover { color: #fff; }
@media (max-width: 860px) { .track-strip .container { grid-template-columns: 1fr; row-gap: 22px; } }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--parchment); }
.section-pi { background: var(--parchment); }
.section-cd { background: var(--blue-pale); }
.section-navy { background: var(--navy-deep); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .lead { color: rgba(255,255,255,0.72); }
.section-head { max-width: 720px; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--gray-700); }
@media (max-width: 640px) { .section { padding: 60px 0; } }

.divider { border: none; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.card h3 { margin-bottom: 12px; font-size: 1.15rem; }
.card p, .card ul { color: var(--gray-700); font-size: 0.94rem; }
/* .card defaults to dark-on-light text; a card dropped onto a dark section
   (like .section-navy) needs its own light-on-dark pairing, not the default. */
.section-navy .card p, .section-navy .card ul { color: rgba(255, 255, 255, 0.85); }
.card ul { padding-left: 0; margin: 0; }
.card ul li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.card ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 1.5px; background: var(--blue); }

/* Docket-style practice cards */
.docket-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
  position: relative;
}
.docket-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-pale-line);
  text-decoration: none;
}
.docket-index {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--blue);
  display: block;
  margin-bottom: 14px;
}
.docket-card h3 { margin-bottom: 8px; font-size: 1.14rem; }
.docket-card p { color: var(--gray-600); font-size: 0.92rem; margin-bottom: 14px; }
.docket-card .docket-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--navy-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.docket-card .docket-link svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.docket-card:hover .docket-link svg { transform: translateX(4px); }
.docket-card:hover .docket-link { color: var(--blue); }

/* ---------- Practice hub grid ---------- */
.practice-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--blue-pale);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.practice-icon svg { width: 21px; height: 21px; }

/* ---------- Differentiators list ---------- */
.diff-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.diff-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.diff-index { font-family: var(--mono); font-size: 0.82rem; color: var(--blue); font-weight: 700; padding-top: 4px; }
.diff-item h3 { font-size: 1.1rem; margin-bottom: 6px; }
.diff-item p { color: var(--gray-700); margin: 0; max-width: 60ch; }
@media (max-width: 640px) {
  .diff-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Pull quote ---------- */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  color: var(--navy-deep);
  line-height: 1.45;
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 26px;
  margin: 0;
}
.pull-quote cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 16px;
}

/* ---------- Case results (Significant Cases) ---------- */
.disclaimer-box {
  font-size: 0.86rem;
  color: var(--gray-600);
  background: var(--parchment);
  border: 1px solid var(--parchment-line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.disclaimer-box strong { color: var(--navy-deep); }

.case-list { margin-top: 20px; }
.case-entry {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.case-entry:first-child { border-top: 1px solid var(--line); }
.case-index { font-family: var(--mono); color: var(--gray-400); font-size: 0.9rem; padding-top: 3px; }
.case-heading { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.case-heading h3 { margin: 0; font-size: 1.08rem; }
.case-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--blue-pale);
  border: 1px solid var(--blue-pale-line);
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.case-entry p { color: var(--gray-700); margin: 0; font-size: 0.95rem; }
@media (max-width: 560px) { .case-entry { grid-template-columns: 1fr; } .case-index { display: none; } }

/* ---------- Penalty tables (DUI etc.) ---------- */
.penalty-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 30px;
  font-size: 0.92rem;
}
.penalty-table caption {
  text-align: left;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 10px;
  caption-side: top;
}
.penalty-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--gray-700);
  vertical-align: top;
}
.penalty-table td:first-child {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--blue);
  white-space: nowrap;
  width: 30%;
}
@media (max-width: 640px) {
  .penalty-table, .penalty-table tbody, .penalty-table tr, .penalty-table td { display: block; width: auto; }
  .penalty-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .penalty-table td { border-bottom: none; padding: 2px 0; }
}

/* ---------- Attorney bio ---------- */
.attorney {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: start;
}
.attorney-portrait { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.attorney-role {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 4px 0 18px;
}
.attorney-credentials { display: grid; gap: 10px; margin-top: 20px; }
.attorney-credentials li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--gray-700);
  font-size: 0.95rem;
}
.attorney-credentials svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 760px) { .attorney { grid-template-columns: 1fr; } .attorney-portrait { max-width: 240px; } }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: start; }
.contact-info-card {
  background: var(--navy-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 34px;
}
.contact-info-card h3 { color: #fff; margin-bottom: 20px; }
.info-row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-on-navy); }
.info-row:first-of-type { border-top: none; }
.info-row svg { width: 18px; height: 18px; color: var(--blue-bright); flex-shrink: 0; margin-top: 2px; }
.info-row strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); margin-bottom: 4px; }
.info-row a, .info-row span { color: #fff; font-weight: 500; }
.map-embed { margin-top: 22px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-on-navy); }
.map-embed iframe { display: block; width: 100%; height: 190px; border: 0; filter: grayscale(0.3) contrast(1.05); }

.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 8px; color: var(--navy-deep); }
.required { color: var(--blue); }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  background: var(--gray-100);
  transition: border-color 0.2s, background 0.2s;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.radio-group { display: flex; gap: 20px; }
.radio-group label { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 0.92rem; color: var(--gray-700); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input { margin-top: 4px; }
.checkbox-row label { margin: 0; font-weight: 500; font-size: 0.86rem; color: var(--gray-600); }
.form-note { font-size: 0.8rem; color: var(--gray-500); background: var(--parchment); padding: 12px 14px; border-radius: var(--radius-sm); }

/* Honeypot — off-screen rather than display:none, which some spam bots skip past. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  margin: 0 0 18px;
}
.form-status[data-state="success"] { background: var(--blue-pale); color: var(--navy-deep); border: 1px solid var(--blue-pale-line); }
.form-status[data-state="error"] { background: var(--parchment); color: var(--navy-deep); border: 1px solid var(--gray-400); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy-deep);
  color: #fff;
  padding: 64px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 50% 0%, rgba(58,103,201,0.28), transparent 70%);
}
.cta-band .container { position: relative; }
.cta-band h2 { color: #fff; max-width: 640px; margin: 0 auto 14px; }
.cta-band p { color: rgba(255,255,255,0.72); max-width: 560px; margin: 0 auto 30px; }
.cta-band .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--gray-500); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { color: var(--gray-300); }
.breadcrumb .current { color: var(--navy-deep); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--gray-400); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 42px;
}
/* logo.png has an opaque white background baked in, not a transparent one — a
   brightness/invert filter here would flatten the whole image to a solid white
   rectangle instead of a white logo. Letting it render as-is reads as a small
   card/badge against the dark footer, which is the correct treatment for a
   logo that wasn't authored with a dark-mode variant. */
.footer-logo img { height: 46px; margin-bottom: 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.footer-contact { font-size: 0.92rem; line-height: 1.7; }
.footer-contact a { color: var(--gray-300); font-weight: 600; }
.footer-contact a:hover { color: #fff; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul { display: grid; gap: 11px; }
.site-footer ul a { color: var(--gray-400); font-size: 0.92rem; }
.site-footer ul a:hover { color: #fff; }
.footer-areas { font-size: 0.86rem; line-height: 1.7; color: var(--gray-500); }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  color: var(--gray-300);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none !important;
}
.social-row a:hover { border-color: var(--blue-bright); color: #fff; background: rgba(58,103,201,0.15); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--gray-500);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; padding: 48px 0 30px; } }

/* ---------- Misc page hero (interior pages) ---------- */
.page-hero { padding: 46px 0 40px; border-bottom: 1px solid var(--line); }
.page-hero .section-head { margin-bottom: 0; }
.page-hero-cd { background: var(--blue-pale); border-bottom-color: var(--blue-pale-line); }
.page-hero-pi { background: var(--parchment); border-bottom-color: var(--parchment-line); }

/* ---------- Utility spacing ---------- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.center { text-align: center; }