/* ═══════════════════════════════════════════════════════════════════════════
   AGENT-LAW — THEME. Colour and type only. No layout in this file.

   COLOUR — ten values, not 131. Warm paper rather than white, a near-black
   with a cool cast for ink, four neutrals between them, and one accent: a
   burnt clay. Deliberately not navy-and-gold (every firm in the market) and
   deliberately not the personal-injury red. Every text/ground pair used
   anywhere in the template is ≥4.5:1; the lowest in use is 4.81:1 (muted on
   surface). --muted is never placed on --ink, which is the one pair that
   would fail, and the dark band uses --bg and --line only.

   TYPE — exactly two faces, both self-hosted, both SIL OFL.
   Body copy is a GROTESQUE (IBM Plex Sans), because 7 of the 8 law firms in
   the market audit set their paragraphs in a sans and "law firm = serif" is a
   decade stale. The serif survives where it survives on the best of those
   sites — as display only. Fraunces is run with WONK and SOFT at 0 and the
   optical size pinned high, which turns a friendly Windsor revival into a
   high-contrast Scotch: the register a firm founded in 2009 can carry without
   looking like it is pretending to be founded in 1909.

   h1 ÷ body = 4.85rem ÷ 1.1875rem = 4.08 at full width, inside the 3.8–4.4
   band the research says reads expensive. Both fluid clamps have max ÷ min
   ≤ 2.5 (1.87 and 1.12), so neither fails WCAG 1.4.4 at 500% zoom, where vw
   stops scaling and only the clamp minimum is left.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#f6f4f0;
  --surface:#eae6de;
  --card:#ffffff;
  --ink:#15181c;
  --body:#3b4046;
  --muted:#5e646b;
  --line:#d4cfc5;
  --accent:#97452a;
  --accent-dark:#7c3620;
  --on-accent:#fff7f2;

  --font-head:Fraunces,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-num:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Sans",system-ui,-apple-system,Helvetica,Arial,sans-serif;

  --head-weight:400;
  --head-lead:1.04;
  --head-track:-.021em;
  --lead:1.62;

  --radius:0;
  --btn-radius:0;

  --step-0:clamp(1.0625rem,1.01rem + .24vw,1.1875rem);
  --step-6:clamp(2.6rem,1.6rem + 5vw,4.85rem);
}

/* ── display roles ────────────────────────────────────────────────────────
   font-variation-settings overrides font-weight, so 'wght' is named on every
   rule that sets it rather than left to be silently ignored. */
h1,h2,h3,h4{font-optical-sizing:none}
h1{font-size:var(--step-6);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0,"wght" 380}
h2{font-size:var(--step-3);font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0,"wght" 450}
h3{font-size:var(--step-1);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0,"wght" 500}
.phead h1{font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0,"wght" 400}

/* ── the rail ─────────────────────────────────────────────────────────────
   An h2 in the body face, small and tracked. Heading level is structure;
   size is emphasis. Keeping the two apart is what lets the section label do
   its landmark job without competing with the statement beside it. */
.tag{font-family:var(--font-body);font-size:var(--step--1);font-weight:600;
  font-variation-settings:normal;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.3;color:var(--ink)}
.tag .num{font-family:var(--font-num);color:var(--accent-dark);
  font-variant-numeric:tabular-nums;letter-spacing:.08em}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.brand{font-family:var(--font-head);font-size:var(--step-2);color:var(--ink);
  font-optical-sizing:none;font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0,"wght" 460;
  letter-spacing:-.025em;line-height:1.1}
.top nav a{font-size:var(--step--1);color:var(--body);letter-spacing:.02em}
.top nav a:hover{color:var(--accent-dark)}
.top nav a[aria-current]{color:var(--ink)}
.call{font-size:var(--step--1);color:var(--body);font-variant-numeric:tabular-nums;
  letter-spacing:.02em}
.call:hover{color:var(--accent-dark)}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero .lede{font-size:var(--step-1);color:var(--body);line-height:1.5}

/* ── facts ────────────────────────────────────────────────────────────────── */
.facts dt{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;
  font-weight:600;color:var(--muted)}
.facts dd{font-family:var(--font-head);font-size:var(--step-2);color:var(--ink);
  line-height:1.1;letter-spacing:-.02em;font-optical-sizing:none;
  font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0,"wght" 420}
.facts .fnote{font-size:var(--step--1);color:var(--muted)}

/* ── editorial statement ──────────────────────────────────────────────────── */
.say{font-family:var(--font-head);font-size:var(--step-4);color:var(--ink);
  line-height:1.08;letter-spacing:-.022em;font-optical-sizing:none;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0,"wght" 400}
.prose p{color:var(--body)}

/* ── practice index ───────────────────────────────────────────────────────── */
.rows--index .row h3{font-size:var(--step-2);color:var(--ink)}
.rows--index .row p{font-size:var(--step-0);color:var(--body)}
.rows--index .row .price{font-size:var(--step--1);color:var(--muted)}
/* pages.css sets these labels at .75rem, which lands at 12px on a phone.
   Nothing on this template is allowed below the --step--1 floor. */
.rows--index .n{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  color:var(--muted);letter-spacing:.08em;font-size:var(--step--1)}
.aside h3,.sec-label{font-size:var(--step--1)}
.rows--index .go{color:var(--accent-dark)}
.rows--index a.row:hover h3{color:var(--accent-dark)}
.rows--index a.row:hover{background:var(--surface)}

/* ── disclaimers: body size, never smaller ────────────────────────────────
   The whole point of the component. A note that shrinks breaks the rule it
   exists to satisfy, so the size is stated here explicitly rather than left
   to inheritance. */
.note{font-size:var(--step-0)}
.note-t{font-weight:600;color:var(--ink)}
.note-b{color:var(--body)}
.note--inv .note-t{color:var(--bg)}
.note--inv .note-b{color:var(--line)}

/* ── inverted band ────────────────────────────────────────────────────────── */
.band-dark blockquote p{font-family:var(--font-head);font-size:var(--step-3);
  color:var(--bg);line-height:1.18;letter-spacing:-.018em;font-optical-sizing:none;
  font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0,"wght" 380}
.band-dark .cite{font-size:var(--step--1);color:var(--line);text-transform:uppercase;
  letter-spacing:.12em;font-weight:600}

/* ── sequence ─────────────────────────────────────────────────────────────── */
.steps .n{font-family:var(--font-num);font-size:var(--step--1);font-weight:600;
  letter-spacing:.1em;color:var(--accent-dark);font-variant-numeric:tabular-nums}
.steps h3{font-size:var(--step-1);color:var(--ink)}
.steps p{color:var(--body)}

/* ── people ───────────────────────────────────────────────────────────────── */
.person h3{font-size:var(--step-2);color:var(--ink)}
.person .role{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;
  font-weight:600;color:var(--accent-dark)}
.person li{font-size:var(--step-0);color:var(--body)}

/* ── points ───────────────────────────────────────────────────────────────── */
.points dt{font-family:var(--font-body);font-weight:600;color:var(--ink)}
.points dd{color:var(--body)}

/* ── questions ────────────────────────────────────────────────────────────── */
.qa summary{font-family:var(--font-head);font-size:var(--step-1);color:var(--ink);
  line-height:1.25;letter-spacing:-.015em;font-optical-sizing:none;
  font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0,"wght" 480}
.qa summary h3{font:inherit;color:inherit;letter-spacing:inherit;
  font-variation-settings:inherit}
.qa summary:hover{color:var(--accent-dark)}
.qa summary::after{color:var(--accent-dark);font-family:var(--font-body);
  font-size:var(--step-2);font-weight:400}
.qa details > p{color:var(--body)}

/* ── close ────────────────────────────────────────────────────────────────── */
.band-cta h2{font-size:var(--step-3);color:var(--ink)}
.band-cta .lede{font-size:var(--step-1);color:var(--body);line-height:1.5}
.band-cta .tel{font-family:var(--font-num);font-size:var(--step-1);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.band-cta .tel:hover{color:var(--accent-dark)}

/* ── forms ────────────────────────────────────────────────────────────────── */
.field label{font-size:var(--step--1);color:var(--ink);font-weight:600;
  letter-spacing:.01em}
.field .req{text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  color:var(--muted);font-size:inherit}
.aside h2{font-size:var(--step-2);color:var(--ink)}
.aside .bignum{font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0,"wght" 420;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hours dt{font-weight:600;color:var(--ink);font-size:var(--step--1)}
.hours dd{color:var(--body);font-size:var(--step--1)}
.places h3{font-size:var(--step--1);font-family:var(--font-body);text-transform:uppercase;
  letter-spacing:.12em;font-weight:600;color:var(--muted);font-variation-settings:normal}
.places li{color:var(--body)}

/* ── footer: light type on ink, and the advertising line at body size ─────── */
.foot{color:var(--bg)}
.foot a{color:var(--bg)}
.foot a:hover{color:var(--line)}
.foot .fbrand{font-family:var(--font-head);font-size:var(--step-2);color:var(--bg);
  font-optical-sizing:none;font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0,"wght" 440;
  letter-spacing:-.025em;line-height:1.15}
.foot .ftag{color:var(--line);font-size:var(--step--1)}
.foot nav a{font-size:var(--step--1);text-decoration:none;letter-spacing:.02em}
.foot .fcontact a{font-size:var(--step-0);text-decoration:none;
  font-variant-numeric:tabular-nums}
.foot .fnote-legal{font-size:var(--step-0);color:var(--line);line-height:1.55}
.foot .fnote-legal strong{color:var(--bg)}

/* focus ring has to stay visible on the ink plane too */
.band-dark :focus-visible,.foot :focus-visible{outline-color:var(--bg)}