/* 22 Docket: Brannock & Vale, Attorneys at Law (sample)
   Re-skin: change the shared token layer below. Theme names map onto it. */
:root {
  /* Shared token layer (library-wide names) */
  --c-bg: #FFFFFF;          /* paper */
  --c-surface: #EEF0F3;     /* the desk the letter and files sit on */
  --c-ink: #13213C;         /* Oxford navy: text, rules, footer */
  --c-muted: #4A5368;
  --c-line: #D8DCE3;        /* decorative rules */
  --c-line-strong: #6A7285; /* form lines, chip borders (3:1+) */
  --c-accent: #A4262C;      /* red tape: main buttons, docket numbers */
  --c-on-accent: #FFFFFF;
  --c-accent-2: #F5E27A;    /* legal-pad yellow: the highlighter only (fill, never text) */
  --f-display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* docket numbers only */
  --r-sm: 0px;
  --r-lg: 0px;
  --r-pill: 0px;
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 80px;

  /* Theme names mapped to the shared layer */
  --paper: var(--c-bg);
  --desk: var(--c-surface);
  --red-tape: var(--c-accent);
  --highlighter: var(--c-accent-2);
  --manila: #E6CF9A;        /* folder tabs and folder edges only */
  --manila-back: #D9BF84;   /* folders behind the open one */
  --manila-edge: #BF9F5C;
  --r-tab: 4px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-3); scroll-padding-bottom: 88px; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 17px/1.6 var(--f-body); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem); letter-spacing: -0.01em; }
h4 { margin: 0; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure, blockquote { margin: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.sample { font-size: 13px; font-weight: 400; color: var(--c-muted); font-family: var(--f-body); }
.docket { font: 500 13px/1.3 var(--f-mono); color: var(--red-tape); letter-spacing: .02em; }

a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

.skip { position: absolute; left: var(--s-3); top: -100px; z-index: 50; background: var(--paper); color: var(--c-ink); padding: 12px 16px; }
.skip:focus { top: var(--s-2); }
.demo { background: var(--c-ink); color: #FFFFFF; font-size: 13px; line-height: 1.3; text-align: center; padding: 6px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent;
  border-radius: var(--r-sm); font: 600 17px/1.1 var(--f-body); text-decoration: none; cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 160ms ease; }
.btn:active { transform: scale(.97); }
.btn-tape { background: var(--red-tape); color: var(--c-on-accent); }
.btn-line { background: var(--paper); color: var(--c-ink); border-color: var(--c-ink); font-variant-numeric: tabular-nums; }
.btn-lg { min-height: 56px; padding: 0 26px; }
.btn-block { width: 100%; }

/* ---------- Header: the letterhead ---------- */
.site-head { background: var(--paper); border-bottom: 5px double var(--c-ink); }
.head-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "nav nav"; align-items: center; column-gap: var(--s-3); padding-top: 12px; }
.brand { grid-area: brand; display: flex; flex-direction: column; text-decoration: none; color: var(--c-ink); min-height: 48px; justify-content: center; }
.brand-name { font: 400 26px/1 var(--f-display); letter-spacing: -0.005em; }
.brand-sub { font-size: 13px; color: var(--c-muted); margin-top: 4px; letter-spacing: .04em; }
.head-actions { grid-area: actions; display: flex; align-items: center; gap: var(--s-4); }
.head-phone { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 48px; text-decoration: none; color: var(--c-ink); font-weight: 600; font-size: 17px; line-height: 1.2; }
.head-phone small { display: none; font-weight: 400; font-size: 13px; color: var(--c-muted); border-top: 1px solid var(--c-ink); padding-top: 3px; margin-top: 3px; }
.head-cta { display: none; }
.site-nav { grid-area: nav; margin-inline: -16px; }
.site-nav ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-inline: 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; white-space: nowrap; font-weight: 600; font-size: 16px; text-decoration: none; }

/* ---------- Hero: the letter ---------- */
.hero { background: var(--desk); padding: 20px 0 40px; }
.hero-grid { display: grid; gap: var(--s-5); }
.letter { background: var(--paper); padding: 22px 20px 26px; box-shadow: 0 1px 2px rgba(19, 33, 60, .08), 0 24px 48px -30px rgba(19, 33, 60, .45); }
.letterhead { text-align: center; padding-bottom: 12px; border-bottom: 5px double var(--c-ink); margin-bottom: 18px; }
.lh-name { font: 400 22px/1.1 var(--f-display); }
.lh-line { margin-top: 4px; font-size: 13px; color: var(--c-muted); }
.re { font-size: 15px; color: var(--c-muted); }
.re span { font-weight: 600; color: var(--c-ink); margin-right: 4px; }
.hero h1 { margin-top: 10px; font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.2rem); line-height: 1.02; letter-spacing: -0.015em; max-width: 14ch; }
.lede { margin-top: var(--s-3); font-size: 18px; color: var(--c-muted); max-width: 38ch; }
.cta-row { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .btn { flex: 1 1 100%; }
.signoff { margin-top: 28px; }
.sincerely { font-size: 16px; color: var(--c-muted); }
.sig { margin-top: 6px; display: inline-block; font: 400 24px/1.2 var(--f-display); padding: 0 40px 4px 0; border-bottom: 1px solid var(--c-ink); }
.sig-name { margin-top: 6px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-photo figcaption { margin-top: 10px; font-size: 14px; color: var(--c-muted); }

/* ---------- Trust strip ---------- */
.trust { border-bottom: 1px solid var(--c-line); }
.trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 22px; }
.trust-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--c-muted); }
.trust-list li:last-child { grid-column: 1 / -1; }
.trust-list .i { width: 22px; height: 22px; color: var(--c-ink); margin-top: 1px; }
.trust-list strong { display: block; font-weight: 600; color: var(--c-ink); font-size: 16px; }

/* ---------- Signature: practice-area file folders ---------- */
.files { padding: 56px 0 64px; }
.files-intro { margin-top: 10px; color: var(--c-muted); max-width: 44ch; }
.cabinet { margin-top: 28px; }
.fr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; position: relative; z-index: 1; }
.tab { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 6px; background: var(--manila-back);
  border: 1px solid var(--manila-edge); border-bottom: 0; border-radius: var(--r-tab) var(--r-tab) 0 0; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background-color 160ms ease, min-height 0s; }
.cabinet:has(#fd-family:checked) .tab[for="fd-family"],
.cabinet:has(#fd-estates:checked) .tab[for="fd-estates"],
.cabinet:has(#fd-injury:checked) .tab[for="fd-injury"],
.cabinet:has(#fd-business:checked) .tab[for="fd-business"] { background: var(--manila); min-height: 56px; margin-bottom: -1px; }
.cabinet:has(#fd-family:focus-visible) .tab[for="fd-family"],
.cabinet:has(#fd-estates:focus-visible) .tab[for="fd-estates"],
.cabinet:has(#fd-injury:focus-visible) .tab[for="fd-injury"],
.cabinet:has(#fd-business:focus-visible) .tab[for="fd-business"] { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.folders { background: var(--manila); border: 1px solid var(--manila-edge); padding: 10px;
  box-shadow: 0 5px 0 -1px var(--manila-back), 0 5px 0 0 var(--manila-edge), 0 10px 0 -1px var(--manila-back), 0 10px 0 0 var(--manila-edge); }
/* No layout shift: the four folders share one grid cell, so the cabinet is always as tall as the fullest folder and
   nothing below it moves when a tab is picked. Closed folders stay laid out but hidden (out of the tab order and
   screen readers); each sheet fills the cell so every folder looks the same size. */
.folders { display: grid; }
.folder { grid-area: 1 / 1; display: grid; min-width: 0; visibility: hidden; }
.cabinet:has(#fd-family:checked) .f-family,
.cabinet:has(#fd-estates:checked) .f-estates,
.cabinet:has(#fd-injury:checked) .f-injury,
.cabinet:has(#fd-business:checked) .f-business { visibility: visible; }
.sheet { background: var(--paper); padding: 20px 18px 24px; box-shadow: 0 1px 2px rgba(19, 33, 60, .12); }
.sheet-head { padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.sheet-head h3 { margin-top: 6px; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); }
.scope { margin-top: 4px; color: var(--c-muted); font-size: 16px; }
.sheet-cols { display: grid; gap: 22px; margin-top: 18px; }
.sheet-cols h4 { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.sheet-cols p { font-size: 16px; line-height: 1.6; }
.bring li { position: relative; padding: 5px 0 5px 24px; font-size: 16px; line-height: 1.45; }
.bring li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; border: 1.5px solid var(--c-line-strong); }
.steps li { display: grid; grid-template-columns: 8.2em 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--c-line); font-size: 16px; line-height: 1.4; }
.steps li:last-child { border-bottom: 0; }
.steps span { font-weight: 600; font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
/* The one motion: a highlighter swipe across the key fee line when a folder opens */
.hl { color: var(--c-ink); padding: 1px 3px; margin: 0 -3px; background: linear-gradient(var(--highlighter), var(--highlighter)) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 420ms var(--ease-out) 150ms; }
.folder:not(:is(.cabinet:has(#fd-family:checked) .f-family, .cabinet:has(#fd-estates:checked) .f-estates, .cabinet:has(#fd-injury:checked) .f-injury, .cabinet:has(#fd-business:checked) .f-business)) .hl { background-size: 0% 100%; transition: none; }
@starting-style { .hl { background-size: 0% 100%; } }

/* ---------- Work: results docket ---------- */
.results { background: var(--desk); padding: 56px 0; }
.results-grid { display: grid; gap: 22px; }
.results-head p { margin-top: 10px; color: var(--c-muted); max-width: 40ch; }
.results-photo { display: none; }
.docket-list { background: var(--paper); padding: 4px 18px; box-shadow: 0 1px 2px rgba(19, 33, 60, .08); }
.docket-list li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.docket-list li:last-child { border-bottom: 0; }
.matter { font-weight: 600; font-size: 17px; line-height: 1.35; }
.outcome { font: 400 21px/1.2 var(--f-display); margin-top: 2px; }
.disclaim { font-size: 14px; color: var(--c-muted); }

/* ---------- Reviews ---------- */
.reviews { padding: 56px 0; }
.rating { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 16px; color: var(--c-muted); }
.rating strong { color: var(--c-ink); }
.rev-rail { margin: 22px -16px 0; padding: 0 16px 8px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
.rev { flex: 0 0 84%; scroll-snap-align: start; border-top: 1px solid var(--c-ink); padding: 18px 2px 4px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.rev blockquote p { font-size: 18px; line-height: 1.5; }
.rev-lead blockquote p { font: 400 25px/1.25 var(--f-display); }
.rev figcaption { font-weight: 600; font-size: 15px; display: flex; flex-direction: column; gap: 2px; }

/* ---------- About: attorneys ---------- */
.team { background: var(--desk); padding: 56px 0; }
.team-intro p { margin-top: 12px; color: var(--c-muted); max-width: 52ch; }
.team-grid { margin-top: 28px; display: grid; gap: 22px; }
.atty { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; align-content: start; }
.atty img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.atty:nth-child(2) img { object-position: 42% 50%; }
.atty h3 { font-size: 1.7rem; }
.role { margin-top: 4px; font-size: 16px; color: var(--c-muted); }
.creds { margin-top: 10px; }
.creds div { display: grid; grid-template-columns: 6.4em 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--c-line); font-size: 15px; line-height: 1.4; }
.creds dt { color: var(--c-muted); }
.office-note { font-size: 16px; }

/* ---------- Contact: intake slip ---------- */
.contact { padding: 56px 0 64px; }
.contact-grid { display: grid; gap: 48px; }
.slip { border: 1px solid var(--c-ink); padding: 22px 18px 24px; display: grid; gap: 18px; background: var(--paper); }
.slip-top { border-bottom: 5px double var(--c-ink); padding-bottom: 12px; display: grid; gap: 6px; }
.slip-top h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); }
.field label, .slots legend { display: block; font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.opt { font-weight: 400; color: var(--c-muted); }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--f-body); color: var(--c-ink); background: #F7F8FA;
  border: 0; border-bottom: 1.5px solid var(--c-line-strong); border-radius: 0; padding: 0 12px; }
.field input, .field select { height: 48px; }
.field textarea { padding: 10px 12px; min-height: 96px; resize: vertical; }
.slots { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.slots legend { padding: 0; width: 100%; }
.slots input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.slots label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--c-line-strong); font-weight: 600; font-size: 16px; cursor: pointer; }
.slots input:checked + label { background: var(--c-ink); border-color: var(--c-ink); color: #FFFFFF; }
.slots input:focus-visible + label { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.conf { font-size: 14px; color: var(--c-muted); }
.sent { display: none; border-left: 4px solid var(--red-tape); background: #F7F8FA; padding: 12px 14px; font-size: 16px; }
.sent:target { display: block; }

.side-h { font-size: 1.7rem; }
.first-call { margin-top: 14px; counter-reset: call; }
.first-call li { counter-increment: call; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-line); font-size: 16px; line-height: 1.5; }
.first-call li p { margin: 0; }
.first-call li::before { content: counter(call); font: 400 32px/1 var(--f-display); color: var(--red-tape); }
.first-call strong { display: block; font-weight: 600; }
.contact-side .side-h + address, .contact-side .first-call + .side-h { margin-top: 32px; }
/* Phones: the numeral sits on the heading line only (no side column), and the folder's frame is slimmer, so the reading
   text runs nearly the full width. The section nav fits at 375px with no scroller. */
@media (max-width: 759.98px) {
  .site-nav ul { justify-content: space-between; gap: 0; -webkit-mask-image: none; mask-image: none; }
  .site-nav a { padding: 0 8px; }
  .folders { padding-inline: 6px; }
  .sheet { padding-inline: 14px; }
  .first-call li { display: block; }
  .first-call li::before { float: left; min-width: 26px; margin-right: 10px; line-height: 24px; height: 24px; }
}
.contact-side address { margin-top: 12px; display: grid; gap: 2px; }
.addr { display: flex; align-items: center; gap: 14px; min-height: 60px; text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.35; }
.addr .i { width: 24px; height: 24px; }
.addr small { display: block; font-weight: 400; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; color: var(--c-muted); }
.hours { width: 100%; margin-top: 12px; }
.hours th, .hours td { padding: 10px 0; border-top: 1px solid var(--c-line); font-size: 16px; }
.hours th { text-align: left; font-weight: 600; }
.hours td { text-align: right; }

/* ---------- Footer ---------- */
.site-foot { background: var(--c-ink); color: #DCE1EA; padding: 48px 0 calc(104px + env(safe-area-inset-bottom)); font-size: 16px; }
.site-foot :focus-visible { outline-color: #FFFFFF; }
.foot-grid { display: grid; gap: 24px; }
.foot-name { font: 400 30px/1.1 var(--f-display); color: #FFFFFF; margin-bottom: 8px; }
.site-foot address { display: grid; }
.site-foot address a { display: flex; align-items: center; min-height: 44px; color: #FFFFFF; text-underline-offset: 3px; overflow-wrap: anywhere; }
.site-foot p { line-height: 1.6; }
.foot-credit { font-size: 14px; color: #C3CAD7; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .22); }

/* ---------- C1 Action Bar (phones) ---------- */
.actionbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper);
  border-top: 1px solid var(--c-ink); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--c-ink); }
.actionbar .ab-call { background: var(--red-tape); color: var(--c-on-accent); }
.actionbar a:active { background: var(--desk); }
.actionbar .ab-call:active { background: #8A1F24; }

/* ---------- Tablet: 760px ---------- */
@media (min-width: 760px) {
  .actionbar { display: none; }
  .site-foot { padding-bottom: 48px; }
  html { scroll-padding-bottom: 0; }
  .head-cta { display: inline-flex; }
  .head-phone small { display: block; }
  .cta-row .btn { flex: 0 0 auto; }
  .letter { padding: 32px 40px 36px; }
  .trust-list { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .trust-list li:last-child { grid-column: auto; }
  .tabs { grid-template-columns: repeat(4, minmax(0, 220px)); justify-content: start; gap: 8px; }
  .tab { font-size: 16px; }
  .folders { padding: 14px; }
  .sheet { padding: 28px 32px 32px; }
  .sheet-head { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: end; }
  .sheet-head .docket { grid-column: 2; grid-row: 1; text-align: right; }
  .sheet-head h3 { grid-row: 1; grid-column: 1; margin: 0; }
  .sheet-head .scope { grid-column: 1 / -1; }
  .sheet-cols { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .sheet-cols > div:last-child { grid-column: 1 / -1; }
  .docket-list { padding: 4px 28px; }
  .docket-list li { grid-template-columns: 7em 1fr; column-gap: 20px; }
  .docket-list .docket { grid-row: span 2; padding-top: 4px; }
  .rev-rail { margin-inline: 0; padding: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; overflow: visible; }
  .rev { flex: none; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .atty { grid-template-columns: 150px 1fr; }
  .slip { padding: 32px; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .slip > :is(.slip-top, .slots, .btn, .conf, .sent), .slip > .field:has(textarea) { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .foot-credit { grid-column: 1 / -1; }
}

/* ---------- Desktop: 1080px ---------- */
@media (min-width: 1080px) {
  .head-row { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav actions"; padding-block: 14px; column-gap: 40px; }
  .site-nav { margin: 0; justify-self: center; }
  .site-nav ul { overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; gap: 12px; }
  .hero { padding: 56px 0 72px; }
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 56px; align-items: stretch; }
  .letter { padding: 36px 56px 40px; }
  .hero-photo { display: flex; flex-direction: column; }
  .hero-photo img { aspect-ratio: 4 / 5; }
  .hero-photo img { flex: 1; aspect-ratio: auto; min-height: 0; height: 100%; }
  .files { padding: 88px 0 96px; }
  .tabs { grid-template-columns: repeat(4, 240px); gap: 0 60px; }
  .sheet { padding: 36px 44px 40px; }
  .sheet-cols { grid-template-columns: 1fr 1fr 1.15fr; gap: 48px; }
  .sheet-cols > div:last-child { grid-column: auto; }
  .results, .reviews, .team { padding: 88px 0; }
  .results-grid { grid-template-columns: 4fr 8fr; column-gap: 64px; align-items: start; }
  .results-head { grid-row: span 2; }
  .results-photo { display: block; margin-top: 28px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .docket-list li { grid-template-columns: 7em 1fr auto; align-items: baseline; }
  .docket-list .docket { grid-row: auto; padding-top: 0; }
  .outcome { text-align: right; margin: 0; }
  .team .wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
  .team-grid { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 40px; }
  .atty { grid-template-columns: 1fr; gap: 18px; }
  .contact { padding: 88px 0 96px; }
  .contact-grid { grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
}

@media (hover: hover) and (pointer: fine) {
  .btn-tape:hover { background: #8A1F24; }
  .btn-line:hover { background: var(--desk); }
  .site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
  .tab:hover { background: #E0C78F; }
  .slots label:hover { border-color: var(--c-ink); }
  .addr:hover small { color: var(--c-ink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}