/* ==========================================================================
   BOGGS & LEVIN, Criminal Defence
   Editorial, quiet, spacious. Black · white · one brass accent.
   Rules: hairlines not boxes. Air not borders. One accent, used rarely.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces: warm paper, not cool grey, so the brass sits in the same family */
  --w:    #FFFFFF;
  --s1:   #F7F4EC;   /* a real cream, not a neutral grey */
  --s2:   #EFE9DA;
  --line: #E7E2D5;
  --line-strong: #D5CFBE;

  /* Ink: deep and slightly cool, for authority against the warm paper */
  --ink:   #0B0D10;
  --ink-2: #3C4048;   /* body */
  --ink-3: #5E626A;   /* muted */
  --ink-4: #686C73;   /* small labels, AA on white, paper and tint */
  /* The wordmark subtitle is 9.9px and sits on white in the header but on the
     darker --s2 band in the footer, where #686C73 measured 4.35:1 and failed
     WCAG AA. One step darker: 4.98 on the footer band, 6.04 on white, 5.49 on
     paper. Measured on the rendered pixels, not estimated. */
  --wordmark-sub: #5F636A;
  --ink-hover: #22262C;

  /* Gold leaf. Warmer and a full step more luminous than the ochre it
     replaces, without going near the 89%-saturation amber that reads as
     signage. Every value below is measured, not eyeballed. */
  --y:       #DBAC33;   /* primary fill: ink on it 9.2:1                  */
  --y-hover: #C4972C;   /* darker on hover: a light fill must deepen      */
  --y-press: #AC8324;   /* deeper still when pressed                       */
  --y-lift:  #E8C255;   /* gold on dark: 11.4:1 on the band               */
  --y-deep:  #AD8623;   /* rules and marks on light: 3.4:1 / 3.1:1        */
  --y-text:  #856716;   /* gold as text on light: 5.3:1 / 4.8:1           */
  --y-tint:  #FCF8EB;
  --y-line:  #EBDCAF;

  /* Text on dark bands */
  --on-ink:      #C4C7CC;
  --on-ink-mute: #9BA0A8;

  /* Type */
  /* Resolved locally, in this order. Nothing is fetched from a third party,
     so there is no blocking request on a first visit and no swap when the
     webfont lands. Inter first for anyone who has it; then the platform UI
     face, which on Apple hardware is SF Pro and is very close to it. */
  --f: "Inter", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
       "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --sec: clamp(3.25rem, 5.6vw, 5.25rem);
  --content: 1120px;
  /* four tracks sized to what each column actually carries, so the policy
     links and the city list both sit on one line */
  --foot-track: 1.34fr 1.34fr 1.21fr 1.11fr;   /* one content width, sitewide */
  /* Exactly three measures, and no fourth. Every block on the site is one of
     these, chosen by what it is, not by how it happens to look:
       full      structure: section rules, records, grids, accordions, stats
       --measure headings and ledes
       --read    body copy: prose, notes, answers                            */
  --measure: 46rem;
  --read: 40rem;

  /* Form */
  --r:    16px;
  --r-sm: 12px;
  --pill: 980px;

  --sh:    0 1px 2px rgba(11,13,16,.05), 0 2px 8px rgba(11,13,16,.04);
  --sh-md: 0 2px 6px rgba(11,13,16,.06), 0 10px 24px rgba(11,13,16,.07);
  --sh-lg: 0 18px 50px rgba(11,13,16,.10);
  --sh-gold: 0 2px 10px rgba(169,132,44,.28);

  /* Motion: one easing for entrances, one for interface feedback */
  --e:    cubic-bezier(.16,1,.3,1);
  --e-io: cubic-bezier(.4,0,.2,1);
  --t-fast: 160ms;
  --t-mid:  240ms;
  --nav-h: 3.25rem;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--w);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--y); color: var(--ink); }
/* One focus treatment, legible on paper and on the dark bands alike */
:focus-visible {
  outline: 2px solid var(--focus, var(--ink));
  outline-offset: 3px;
  border-radius: 5px;
}
.bg-ink :focus-visible, .navsheet :focus-visible { --focus: var(--y-lift); }

.skip {
  position: fixed; left: 50%; top: -6rem; transform: translateX(-50%); z-index: 300;
  background: var(--ink); color: #fff; padding: .75rem 1.4rem; border-radius: var(--pill);
  font-size: .9rem; font-weight: 500; text-decoration: none;
  transition: top .2s var(--e);
}
.skip:focus { top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.1; letter-spacing: -.022em; }
.d1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.07; letter-spacing: -.032em; font-weight: 700; }
.d2 { font-size: clamp(1.9rem, 3.7vw, 3rem);   line-height: 1.08; letter-spacing: -.03em;  font-weight: 700; }
.d3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.2; letter-spacing: -.022em; }
.d4 { font-size: clamp(1.1rem, 1.5vw, 1.25rem);  line-height: 1.3; letter-spacing: -.014em; }

.lede {
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  line-height: 1.5; color: var(--ink-3); font-weight: 400;
  letter-spacing: -.012em; max-width: var(--measure);
}
p { text-wrap: pretty; }
/* balance only the large display headings; on small headings it forces
   equal-width lines and breaks them in odd places */
h1, h2 { text-wrap: balance; }
h3, h4, .step h3, .card h3 { text-wrap: pretty; }

.eyebrow {
  display: block; font-size: .8rem; font-weight: 600;
  letter-spacing: .02em; color: var(--y-text); margin-bottom: .85rem;
}

/* Question links. A guide points at the answer on faq.html rather than
   reprinting it, so the same 20 answers are not published twice. */
.qlinks { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.qlinks li { padding: 0; margin: 0; }
.qlinks li::before { content: none; }
.qlinks li + li { margin-top: .1rem; }
.qlinks .tlink {
  display: flex; width: 100%; max-width: none;
  padding: .95rem 0; border-bottom: 1px solid var(--line);
  font-size: 1.02rem; align-items: baseline;
}
.qlinks li:first-child .tlink { border-top: 1px solid var(--line); }
.qlinks .tlink::before { bottom: -1px; }

/* Citations. Each row is a provision and what it says, so the list is readable
   as content rather than as a bibliography nobody opens. */
.sources { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.sources li {
  display: grid; gap: .2rem .9rem;
  padding: .95rem 0; border-bottom: 1px solid var(--line);
}
.sources li:first-child { border-top: 1px solid var(--line); }
.sources li a {
  font-weight: 640; color: var(--ink); font-size: 1rem;
  text-underline-offset: .18em; width: fit-content;
}
.sources li a:hover { color: var(--y-text); }
.sources li span { color: var(--ink-3); font-size: .95rem; line-height: 1.55; }
@media (min-width: 720px) {
  .sources li { grid-template-columns: 15.5rem minmax(0, 1fr); align-items: baseline; }
}

/* Byline. It belongs with the disclaimer at the foot of a guide, not in a band
   of its own across the page. Set at note size and colour so it reads as part of
   the same small print. */
.note__by { margin-top: .55rem; }
.note__by a { color: inherit; font-weight: 600; text-underline-offset: .18em; }
.note__by a:hover { color: var(--y-text); }

/* Reading column */
.prose { max-width: var(--read); font-size: 1.09rem; line-height: 1.68; color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose section > * + *, .prose div > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-top: 2.4em; letter-spacing: -.024em; }
.prose h3 { font-size: clamp(1.28rem, 1.7vw, 1.45rem); letter-spacing: -.02em; margin-top: 2.2em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { display: grid; gap: .7rem; padding-left: 1.6rem; }
.prose ul li, .prose ol li { position: relative; list-style: none; }
/* markers hang in the indent so the marker itself lands on the left spine */
.prose ul li::before {
  content: ""; position: absolute; left: -1.6rem; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--y);
}
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before {
  content: counter(li) "."; position: absolute; left: -1.6rem; top: 0;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.prose a:not(.tlink):not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--y-text); }

.hl { background: linear-gradient(180deg, transparent 68%, var(--y) 68%, var(--y) 95%, transparent 95%); }

.tnum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gut); }
/* Every page, every section and every element shares one container and one
   left edge. Text blocks are capped for readability but never re-centred. */

.section { padding-block: var(--sec); position: relative; overflow: clip; }
/* the header is sticky, so anything jumped to has to clear it */
[id] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

/* ---------------------------------------------------------------------------
   GROUND

   The first attempt put a number in the margin and a ruled line across the
   surface. Both were patterns, and a pattern is the one thing a reader keeps
   noticing. What makes printed matter look expensive is not a pattern at all;
   it is the stock. A faint, irregular grain in the paper, and light falling
   unevenly across it.

   So the ground is now material rather than graphic: a stitched fractal-noise
   grain, slightly anisotropic so it reads as fibre rather than as static, laid
   over the existing directional wash. It costs no bytes and no request, it
   resolves at any pixel density, and there is nothing in it to read.
   --------------------------------------------------------------------------- */
.section::before {
  content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62 0.42' numOctaves='4' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0.0' in='n' result='d'/%3E%3CfeGaussianBlur stdDeviation='0.55' in='d'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: .20;
  mix-blend-mode: multiply;
}
/* on the dark band the grain has to lift rather than deepen */
.bg-ink.section::before { mix-blend-mode: screen; opacity: .11; }
/* the cream surface carries a slightly coarser stock than the white one */
.bg-s1.section::before { background-size: 340px 340px; opacity: .26; }
.section > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-transparency: reduce) { .section::before { display: none; } }

/* The clerk's tick: the mark made against an entry in a record. */
.shead::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1;
  width: 2px; height: 1.15rem; border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, var(--y-lift), var(--y-deep));
}
.bg-ink .shead::before { background: var(--y-lift); }
.shead--plain::before { content: none; }
.section--sm { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

.bg-w  { background: var(--w); }
.bg-s1 { background: var(--s1); }
/* a white section that follows a cream one is given the faintest warm edge, so
   the page reads as one warm object rather than as alternating blank panels */
.bg-w  { background-image: linear-gradient(180deg, rgba(219,172,51,.045), transparent 220px); }
/* A cream section is lit, not filled. Two very low radials keep the surface
   from reading as one flat panel, which is most of what made the accent feel
   monotonous. The gold was fine, the ground under it was inert. */
.bg-s1 {
  background-image:
    radial-gradient(120% 90% at 78% 0%, rgba(219,172,51,.075), transparent 62%),
    radial-gradient(90% 80% at 0% 100%, rgba(11,13,16,.028), transparent 60%);
}
.bg-ink { background: var(--ink); color: var(--on-ink); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-ink .lede { color: var(--on-ink-mute); }
.bg-ink .eyebrow { color: var(--y); }


/* ---------------------------------------------------------------------------
   THE SECTION MOTIF
   Every section on every page opens the same way: a hairline, a numbered
   label, a heading, a lede. Sections number themselves with a CSS counter,
   so the sequence is always correct and never hand-maintained.
   --------------------------------------------------------------------------- */
main { counter-reset: sec; }

/* The section rule spans the whole section. It is a rule, not a text block.
   The heading and lede sit on the measure inside it. */
.shead {
  position: relative;
  margin-bottom: clamp(1.75rem, 3vw, 2.4rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.bg-ink .shead { border-top-color: rgba(255,255,255,.14); }

.shead__meta {
  display: flex; align-items: baseline; gap: .7rem;
  margin-bottom: clamp(.9rem, 1.6vw, 1.25rem);
}
.shead__n {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--y-text); font-variant-numeric: tabular-nums;
}
.shead__n::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); }
.bg-ink .shead__n { color: var(--y-lift); }
.shead__label {
  font-size: .78rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
}
.shead > h2, .shead > h3, .shead > .lede { max-width: var(--measure); }
.bg-ink .shead__label { color: var(--on-ink-mute); }
.shead h2 + .lede { margin-top: .9rem; }

/* a section head that opens a page-level band, without a number */
.shead--plain .shead__n { display: none; }

.grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.g-2, .g-3, .g-4, .g-stack { display: grid; }
.g-stack { grid-template-columns: 1fr; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* every split variant declares display:grid here so a modifier can never be
   used on its own and silently fall back to block layout */
.split, .split--top, .split--counsel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.split--top { align-items: start; }
/* counsel rows: a fixed, elegant plate beside a wider column for the writing */
.split--counsel {
  grid-template-columns: 22rem minmax(0,1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .split--counsel { grid-template-columns: 1fr; } }

@media (max-width: 1000px) { .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px)  { .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .split { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.stack   { display: grid; gap: 1rem; }
.stack-lg{ display: grid; gap: clamp(2rem,4vw,3rem); }
.mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.5rem; }

hr.rule { border: 0; height: 1px; background: var(--line); margin: 0; }

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
/* Buttons
   A light fill deepens on hover; a dark fill lifts. Both gain a shadow so the
   state reads without relying on colour alone. Nothing moves. A law firm's
   controls should feel solid, not springy. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem; border-radius: var(--pill);
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  background: var(--y); color: var(--ink);
  box-shadow: var(--sh);
  transition: background var(--t-fast) var(--e-io),
              border-color var(--t-fast) var(--e-io),
              color var(--t-fast) var(--e-io),
              box-shadow var(--t-mid) var(--e-io);
}
.btn:hover  { background: var(--y-hover); box-shadow: var(--sh-gold); }
.btn:active { background: var(--y-press); box-shadow: none; }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover  { background: var(--ink-hover); box-shadow: var(--sh-md); }
.btn--ink:active { background: #000; box-shadow: none; }

.btn--quiet {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong); box-shadow: none;
}
.btn--quiet:hover  { background: var(--s1); border-color: var(--ink); box-shadow: var(--sh); }
.btn--quiet:active { background: var(--s2); border-color: var(--ink); box-shadow: none; }

.bg-ink .btn--quiet { color: #fff; border-color: rgba(255,255,255,.32); }
.bg-ink .btn--quiet:hover  { background: rgba(255,255,255,.09); border-color: var(--y-lift); color: var(--y-lift); box-shadow: none; }
.bg-ink .btn--quiet:active { background: rgba(255,255,255,.04); box-shadow: none; }

.btn--lg { padding: 1rem 1.9rem; font-size: 1.06rem; }
.btn--sm { padding: .55rem 1.05rem; font-size: .9rem; }
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

.btns { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn--sm svg { width: .95rem; height: .95rem; }

/* Text link with chevron */
/* Text link: a brass rule grows from the left on hover */
.tlink {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  width: fit-content; max-width: 100%;
  font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none;
  padding-bottom: 2px;
  /* 23.3px at desktop sizes, which is under the 24px floor in WCAG 2.5.8 for
     the ones that stand alone rather than sitting inside a sentence. */
  min-height: 24px;
  transition: color var(--t-fast) var(--e-io);
}
.tlink::before {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--y-deep); border-radius: 2px;
  transition: right 420ms var(--e);
}
.tlink::after {
  content: "›"; font-size: 1.25em; line-height: 1; color: var(--y-deep);
  transform: translateY(-.05em);
  transition: transform var(--t-mid) var(--e), color var(--t-fast) var(--e-io);
}
.tlink:hover { color: var(--y-text); }
.tlink:hover::before { right: 0; }
.tlink:hover::after { color: var(--y-text); transform: translate(4px,-.05em); }
.bg-ink .tlink { color: #fff; }
.bg-ink .tlink::before { background: var(--y-lift); }
.bg-ink .tlink::after { color: var(--y-lift); }
.bg-ink .tlink:hover { color: var(--y-lift); }
.bg-ink .tlink:hover::after { color: var(--y-lift); }
/* comfortable touch height on small screens */
@media (max-width: 760px) { .tlink { padding-block: .6rem; } }

/* Phone shown as text, never as a shouting block */
.telrow { display: inline-flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.telrow a { font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -.015em; }
.telrow small { color: var(--ink-4); font-size: .9rem; }

/* Every telephone number on the site, wherever it appears: ink at rest, ink on
   hover, with a brass rule underneath as the affordance. Michael's note: a
   phone number should never turn yellow. */
a[href^="tel:"]:not(.btn):not(.navcall):not(.navtel) {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--y-deep), var(--y-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 380ms var(--e), color var(--t-fast) var(--e-io);
}
a[href^="tel:"]:not(.btn):not(.navcall):not(.navtel):hover {
  color: var(--ink);
  background-size: 100% 1.5px;
}
.bg-ink a[href^="tel:"]:not(.btn):not(.navcall):not(.navtel),
.bg-ink a[href^="tel:"]:not(.btn):not(.navcall):not(.navtel):hover { color: #fff; }
.bg-ink a[href^="tel:"]:not(.btn):not(.navcall):not(.navtel) {
  background-image: linear-gradient(var(--y-lift), var(--y-lift));
}
.telrow a[href^="tel:"] { background-position: 0 calc(100% + 2px); }

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
.nav-root { position: sticky; top: 0; z-index: 200; }

.navbar {
  position: relative; z-index: 3;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-mid) var(--e-io),
              box-shadow var(--t-mid) var(--e-io),
              border-color var(--t-mid) var(--e-io);
}
.navbar.is-panel { background: var(--s1); backdrop-filter: none; -webkit-backdrop-filter: none; }
.navbar.is-panel.is-scrolled { box-shadow: none; }
.navbar.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(11,13,16,.06); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .navbar { background: var(--w); }
}
/* One reading order, left to right: who they are, where to go, how to call.
   A centred link row cannot be spaced evenly when the two things flanking it
   are different widths. This one can, and the rule is obvious on sight. */
.navbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  height: var(--nav-h);
  max-width: var(--content);
}
.navlist { margin-right: auto; }
.navbar__end { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }

/* Wordmark: a brass rule, the firm name, the practice beneath it */
.wordmark {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; flex-shrink: 0;
  padding-block: .45rem;
}
.wordmark__rule {
  width: 2px; height: 1.85rem; border-radius: 2px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--y-lift), var(--y-deep));
  transition: transform var(--t-mid) var(--e);
  transform-origin: center;
}
.wordmark:hover .wordmark__rule { transform: scaleY(1.14); }
.wordmark__txt { display: grid; gap: .14rem; }
.wordmark b {
  font-size: .82rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); line-height: 1; white-space: nowrap;
}
.wordmark i {
  font-style: normal; font-size: .62rem; font-weight: 500; letter-spacing: .19em;
  text-transform: uppercase; color: var(--wordmark-sub); line-height: 1; white-space: nowrap;
}
.wordmark--foot b { font-size: .92rem; }
.wordmark--foot .wordmark__rule { height: 2.1rem; }
@media (max-width: 400px) { .wordmark b { font-size: .75rem; letter-spacing: .09em; } }

/* One gap, set once. The visible space between two labels is the gap plus the
   two paddings, so both numbers are chosen together rather than guessed. */
.navlist { display: none; align-items: center; gap: .15rem; }
@media (min-width: 1000px) { .navlist { display: flex; } }
.navlink {
  position: relative;
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .55rem .8rem;
  font-size: .925rem; font-weight: 400; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; transition: color var(--t-fast) var(--e-io);
}
/* a brass rule grows from the centre, the same gesture as .tlink, not a
   grey pill, which reads as a web app rather than a firm */
.navlink::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .28rem;
  height: 1.5px; border-radius: 2px; background: var(--y-deep);
  transform: scaleX(0); transform-origin: center;
  transition: transform 380ms var(--e);
}
.navlink:hover { color: var(--ink); }
.navlink:hover::after { transform: scaleX(1); }
.navlink[aria-current="page"] { color: var(--ink); font-weight: 500; }
.navlink[aria-current="page"]::after { transform: scaleX(1); }
.navlink__chev { width: .55rem; height: .55rem; opacity: .5; transition: transform .3s var(--e); }
.navlink[aria-expanded="true"] { color: var(--ink); }
.navlink[aria-expanded="true"]::after { transform: scaleX(1); }
.navlink[aria-expanded="true"] .navlink__chev { transform: rotate(180deg); opacity: .9; }

/* 23px tall, against the 24px floor in WCAG 2.5.8. It is a standalone control
   in the header rather than a link inside a sentence, so the inline exception
   does not cover it, and it was one pixel short. */
.navtel {
  display: none; align-items: baseline; gap: .45rem; text-decoration: none;
  font-size: .9rem; color: var(--ink-3); white-space: nowrap;
  min-height: 24px;
}
@media (min-width: 700px) { .navtel { display: inline-flex; } }
.navtel b { color: var(--ink); font-weight: 600; letter-spacing: -.012em; }
.navtel:hover b { color: var(--ink); }

/* The mobile call control. It says what it does: a bare handset pictogram is
   a weaker affordance than the word, and it was the one element whose colour
   came only from the stylesheet, so it fell back to link blue wherever the CSS
   had not applied. */
.navcall {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.4rem; padding: 0 1.15rem;
  border-radius: var(--pill);
  background: var(--y); color: var(--ink);
  font-size: .9rem; font-weight: 600; letter-spacing: -.005em; text-decoration: none;
  white-space: nowrap;
  transition: background .18s var(--e);
}
.navcall:hover { background: var(--y-hover); }
@media (min-width: 700px) { .navcall { display: none; } }

.navburger {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; margin-right: -.55rem; border-radius: 10px;
}
@media (min-width: 1000px) { .navburger { display: none; } }
.navburger i { display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--e), opacity .2s var(--e); }
.navburger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navburger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.navburger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Desktop mega panel */
/* The panel is a cream surface, and the bar above it adopts the same colour
   while it is open, so the two read as one sheet dropping down. */
.navpanel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
  background: var(--s1);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(11,13,16,.10);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--e-io),
              transform 380ms var(--e),
              visibility 380ms;
}
/* belt and braces: a closed panel is display:none as well as invisible, so no
   author rule can accidentally out-specify the hidden attribute */
.navpanel[hidden] { display: none !important; }
.navpanel.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.navpanel__in { max-width: var(--content); padding-block: clamp(1.6rem, 2.6vw, 2.25rem); }
/* Two tight columns of links and a panel that earns the rest of the width,
   rather than six short labels stretched across the whole header. */
.navpanel__grid { display: grid; grid-template-columns: minmax(0,1fr) 20rem; gap: 2.5rem; align-items: start; }
.navpanel__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .1rem 1.25rem; }
.navpanel__aside {
  padding: 1.25rem 1.35rem; border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(219,172,51,.16), rgba(219,172,51,.05));
  border: 1px solid var(--y-line);
}
/* These three were h3 elements sitting in <header>, before the h1 in <main>,
   so every page on the site opened its heading outline at level three. They
   are promotional labels inside a navigation panel, not sections of the
   document, so they are paragraphs now and carry the heading's look instead of
   its meaning.

   Two class names, because .navpanel__aside p already scores 0,1,1 and would
   otherwise hand this label the body size, colour and margin. */
.navpanel__aside .navpanel__ah {
  font-size: 1rem; font-weight: 600; letter-spacing: -.014em;
  /* 1.1 is what the h3 computed to here, measured rather than guessed: at 1.3
     the panel came out 3.3px taller. Headings also get text-wrap: balance on
     this site and paragraphs get pretty, so balance is restored explicitly. */
  line-height: 1.1; color: var(--ink); margin-bottom: .4rem;
  text-wrap: balance;
}
.navpanel__aside p { font-size: .88rem; line-height: 1.5; color: var(--ink-2); margin-bottom: 1rem; }
.navpanel__aside .btn { width: 100%; }
@media (max-width: 1180px) { .navpanel__grid { grid-template-columns: minmax(0,1fr) 17rem; gap: 2rem; } }
.navpanel__hd {
  font-size: .74rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
  margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.navpanel a.pl {
  display: block; padding: .55rem .7rem; margin-left: -.7rem; border-radius: 10px; text-decoration: none;
  transition: background .16s var(--e);
}
.navpanel a.pl { transition: background var(--t-fast) var(--e-io); }
.navpanel a.pl:hover { background: rgba(219,172,51,.13); }
.navpanel a.pl:hover b { color: var(--y-text); }
.navpanel a.pl b { display: block; font-size: 1.02rem; font-weight: 500; color: var(--ink); letter-spacing: -.014em; }
.navpanel a.pl span { display: block; font-size: .86rem; color: var(--ink-3); margin-top: .08rem; line-height: 1.4; }
.navpanel__foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.navpanel__foot .tlink { font-size: .95rem; }
.navpanel__foot p { font-size: .9rem; color: var(--ink-3); margin: 0; }

.navscrim {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 1;
  background: rgba(11,13,16,.20); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--e), visibility .3s;
}
.navscrim.is-on { opacity: 1; visibility: visible; }

/* Mobile sheet */
.navsheet {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 190;
  background: var(--w); overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--e), visibility .28s, transform .28s var(--e);
}
.navsheet.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1000px) { .navsheet { display: none; } }
.navsheet__in { padding-block: 1.25rem 4rem; }
.navsheet details { border-bottom: 1px solid var(--line); }
.navsheet summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; font-size: 1.22rem; font-weight: 500; color: var(--ink); letter-spacing: -.018em;
}
.navsheet summary::-webkit-details-marker { display: none; }
.navsheet summary svg { width: .7rem; height: .7rem; opacity: .45; transition: transform .25s var(--e); }
.navsheet details[open] summary svg { transform: rotate(180deg); }
.navsheet__sub { padding-bottom: 1rem; display: grid; gap: .1rem; }
.navsheet__sub a { display: block; padding: .55rem 0 .55rem 1rem; font-size: 1.02rem; color: var(--ink-3); text-decoration: none; border-left: 2px solid var(--line); }
.navsheet__sub a:hover { color: var(--ink); border-left-color: var(--y); }
.navsheet > .wrap > a.navsheet__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; font-size: 1.22rem; font-weight: 500; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--line); letter-spacing: -.018em;
}
.navsheet__cta { margin-top: 2rem; display: grid; gap: .75rem; }
.navsheet__cta .btn { width: 100%; }
.navsheet__meta { margin-top: 1.5rem; font-size: .92rem; color: var(--ink-3); line-height: 1.6; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   HERO: warm ground, statement, and a drawing that gives the page an anchor
   --------------------------------------------------------------------------- */
/* ===========================================================================
   THE HERO: a photographic band that changes state.

   Four photographs, each paired with its own headline and lede, crossfading on
   a fixed cadence. The picture and the words move together so each state reads
   as one idea rather than as a caption dropped on an image.

   Three things make it feel expensive rather than like a slideshow widget:
   the crossfade is long and the hold is longer, the incoming photograph drifts
   very slightly while it is on screen, and the text leads the image out and
   follows it back in rather than switching at the same instant.
   =========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0A0C10;
  display: grid;
  align-items: center;
  min-height: clamp(30rem, 76vh, 46rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* --- the photographs ------------------------------------------------------ */
.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  background-size: cover;          /* the blurred placeholder, until the file lands */
  background-repeat: no-repeat;
  transition: opacity 900ms var(--e-io);
  will-change: opacity;
}
.hero__slide.is-on { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  display: block;
}
/* The photograph does not move. Motion belongs to the crossfade and to the
   words; a drifting background reads as a slideshow plugin. */

/* --- the scrim ------------------------------------------------------------
   Measured, not guessed: the headline sits in the left half, so the darkening
   is heaviest there and releases across to the right so the photograph is
   still legible as a photograph. The bottom band keeps the small print off a
   bright waterline. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(101deg,
      rgba(7,9,13,.90) 0%, rgba(7,9,13,.84) 26%,
      rgba(7,9,13,.62) 50%, rgba(7,9,13,.30) 74%, rgba(7,9,13,.16) 100%),
    linear-gradient(180deg,
      rgba(7,9,13,.46) 0%, rgba(7,9,13,.08) 24%,
      rgba(7,9,13,.24) 54%, rgba(7,9,13,.64) 79%, rgba(7,9,13,.82) 100%);
}

.hero__in { position: relative; z-index: 2; }

/* The page's only h1. It sits outside the rotation so the heading never
   disappears as the states cycle, and it names the practice and the city in
   plain words. Set small and quiet: the rotating display line below is still
   the thing you read first. */
/* Deliberately set in white rather than the gold used for eyebrows elsewhere:
   the call button directly below is gold, and two golds this close compete.
   The rule below .hero h1 in the cascade, so it has to restate the family and
   size the display headline sets. */
.hero .hero__h1 {
  font-family: var(--f);
  font-size: clamp(.78rem, 1.15vw, .88rem);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #FFFFFF;
  max-width: none;
  margin: 0 0 1.15rem;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* --- the words ------------------------------------------------------------ */
.hero__texts { display: grid; align-items: end; }
/* All four states occupy the same grid cell, so the block is always as tall as
   the tallest state and nothing below it can shift. The headline and the lede
   arrive a beat apart, which is what makes the change feel authored. */
.hero__text {
  grid-area: 1 / 1;
  align-self: end;          /* every state ends the same distance above the button,
                               so a shorter one grows upward instead of leaving a
                               gap under the lede */
  visibility: hidden;
  pointer-events: none;
}
.hero__text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--e-io), transform 720ms var(--e);
}
.hero__text.is-on { visibility: visible; pointer-events: auto; }
.hero__text.is-on > * { opacity: 1; transform: none; }
.hero__text.is-on .lede { transition-delay: 110ms; }

/* Each state sets its own scale, so a short line is set large and a longer one
   smaller, so the states read as four designs, not one template refilled. */
.hero h1, .hero .d1 {
  color: #fff;
  margin-bottom: 1.15rem;
  letter-spacing: -.032em;
  line-height: 1.03;
  text-shadow: 0 1px 30px rgba(5,7,10,.45);
}
.hero__text[data-scale="xl"] .d1,
.hero__text[data-scale="xl"] h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); max-width: 15ch; }
.hero__text[data-scale="lg"] .d1,
.hero__text[data-scale="lg"] h1 { font-size: clamp(2.3rem, 4.4vw, 3.7rem); max-width: 18ch; }
.hero__text[data-scale="md"] .d1,
.hero__text[data-scale="md"] h1 { font-size: clamp(2.05rem, 3.7vw, 3.1rem); max-width: 21ch; }
/* On a narrow screen the shortest headline sets in two lines while the others
   set in three or four, which left the block 50px shorter on that one state.
   Tightening its measure brings it onto the same number of lines. */
@media (max-width: 520px) {
  .hero__text[data-scale="xl"] .d1,
  .hero__text[data-scale="xl"] h1 { max-width: 11ch; }
  .hero__text[data-scale="lg"] .d1,
  .hero__text[data-scale="lg"] h1 { max-width: 15ch; }
}
.hero .lede {
  color: #E6E7E9;
  max-width: 34rem;
  font-size: clamp(1.06rem, 1.35vw, 1.24rem);
  line-height: 1.55;
  text-shadow: 0 1px 22px rgba(5,7,10,.5);
}
.hero__cta { margin-top: 2.25rem; }
.hero__meta {
  margin-top: 1.5rem; font-size: .93rem; color: #E8EAEC;
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-start;
  text-shadow: 0 1px 18px rgba(5,7,10,.6);
}
.hero__meta span { display: inline-flex; align-items: flex-start; gap: .4rem; }
.hero__meta svg { width: .95em; height: .95em; color: var(--y-lift); flex: none;
  margin-top: .28em; }

/* the secondary link has to work on a photograph rather than on paper */
.tlink--on-photo { color: #fff; }
.tlink--on-photo::before { background: var(--y-lift); }
.tlink--on-photo::after { color: var(--y-lift); }
.tlink--on-photo:hover { color: var(--y-lift); }

/* --- the indicators ------------------------------------------------------- */
/* The dots carry 11px of padding above and below now, so the gap that used to
   sit under the strapline is pulled back out of the margin. */
.hero__dots { display: flex; gap: .6rem; margin-top: calc(clamp(2rem, 4vw, 3rem) - 11px); margin-bottom: -11px; }
.hero__dot {
  /* The rule the eye sees is 3px. The box the thumb hits is 25px, made of
     padding that the background is clipped out of, so the control satisfies
     the 24px minimum without becoming a visible slab. */
  width: 2.5rem; height: 25px; border-radius: 3px; border: 0;
  padding-block: 11px; padding-inline: 0;
  background: rgba(255,255,255,.34); background-clip: content-box;
  cursor: pointer;
  transition: background var(--t-mid) var(--e-io), transform var(--t-mid) var(--e-io);
}
/* background-color, not the background shorthand: the shorthand resets
   background-clip back to border-box and paints the whole 25px hit area. */
.hero__dot:hover { background-color: rgba(255,255,255,.62); transform: scaleY(1.6); }
.hero__dot.is-on { background-color: var(--y-lift); }
.hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* --- narrow screens ------------------------------------------------------- */
@media (max-width: 939px) {
  .hero { min-height: clamp(27rem, 74vh, 36rem); }
  .hero__slide img { object-position: center 58%; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(7,9,13,.64) 0%, rgba(7,9,13,.54) 32%,
        rgba(7,9,13,.72) 68%, rgba(7,9,13,.88) 100%);
  }
  .hero h1, .hero .d1 { max-width: none; }
}

/* --- reduced motion -------------------------------------------------------
   No drift, no crossfade, no rotation. The first state simply is the hero. */
@media (prefers-reduced-motion: reduce) {
  .js .hero__slide.is-on img, .js .hero__slide img { transform: none; transition: none; }
  .hero__slide, .hero__text { transition: none; }
}

/* The hero ground.
   The wash alone left the left-hand field empty. This adds three quiet devices,
   all of them structural rather than decorative:
     · arcs of a seal, bleeding off the left edge and cropped by the frame
     · two fine brass rules rising from the base, near the column break
     · a soft gold field under the portrait so it sits on something, and a
       little ink weight in the bottom corner so the composition has a base
   Everything is masked away from the top of the section, so nothing crosses
   the headline at full strength. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(38% 44% at 71% 52%, rgba(219,172,51,.24), transparent 70%),
    radial-gradient(46% 54% at 1% 102%, rgba(11,13,16,.05), transparent 72%),
    radial-gradient(circle at 6% 84%, transparent 0 300px, rgba(173,134,35,.26) 300px 301px, transparent 301px),
    radial-gradient(circle at 6% 84%, transparent 0 372px, rgba(173,134,35,.15) 372px 373px, transparent 373px),
    radial-gradient(circle at 6% 84%, transparent 0 222px, rgba(173,134,35,.12) 222px 223px, transparent 223px),
    linear-gradient(180deg, transparent 30%, rgba(173,134,35,.20) 100%),
    linear-gradient(180deg, transparent 58%, rgba(173,134,35,.13) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 1px 100%, 1px 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 26.5% 100%, 30.5% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.32) 32%, #000 62%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.32) 32%, #000 62%);
}

/* Stacked layout: the portrait moves below the text, so the seal is brought up
   into the text field, made smaller, and stopped before it reaches the frame.
   The vertical rules are dropped. At this width they read as noise. */
@media (max-width: 939px) {
  .hero::after {
    background-image:
      radial-gradient(58% 30% at 62% 26%, rgba(219,172,51,.20), transparent 72%),
      radial-gradient(60% 30% at 0% 66%, rgba(11,13,16,.045), transparent 74%),
      radial-gradient(circle at 12% 44%, transparent 0 172px, rgba(173,134,35,.24) 172px 173px, transparent 173px),
      radial-gradient(circle at 12% 44%, transparent 0 214px, rgba(173,134,35,.13) 214px 215px, transparent 215px),
      radial-gradient(circle at 12% 44%, transparent 0 128px, rgba(173,134,35,.11) 128px 129px, transparent 129px);
    background-size: 100% 100%;
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 18%, #000 34%, #000 52%, transparent 68%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 18%, #000 34%, #000 52%, transparent 68%);
  }
}

/* --- interior page headers ------------------------------------------------
   The same photographic language as the home page at a third of the height, so
   the site has one front door rather than two. Text is white over a scrim that
   is heaviest on the left, exactly as the hero's is. */
.phero.phero--photo {
  position: relative;
  /* Specific enough to beat the cream declared on .phero further down the file.
     Without this the true painted background is cream, and if a photograph ever
     fails to load the white text lands on it and disappears. */
  background: #0A0C10;
  border-bottom: 0;
  padding-block: clamp(3.25rem, 6vw, 5rem) clamp(2.75rem, 5vw, 4rem);
  overflow: hidden;
}
.phero.phero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(101deg,
      rgba(7,9,13,.92) 0%, rgba(7,9,13,.86) 28%,
      rgba(7,9,13,.66) 54%, rgba(7,9,13,.40) 78%, rgba(7,9,13,.28) 100%),
    linear-gradient(180deg,
      rgba(7,9,13,.62) 0%, rgba(7,9,13,.34) 34%, rgba(7,9,13,.22) 62%,
      rgba(7,9,13,.52) 100%);
}
.phero__art { position: absolute; inset: 0; z-index: 0; }
.phero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }
.phero.phero--photo > .wrap { position: relative; z-index: 2; }

.phero.phero--photo .d1, .phero.phero--photo h1 { color: #fff; text-shadow: 0 1px 30px rgba(5,7,10,.45); }
.phero.phero--photo .lede { color: #E6E7E9; text-shadow: 0 1px 22px rgba(5,7,10,.5); }
.phero.phero--photo .eyebrow { color: #F6DE97; }
.phero.phero--photo .crumbs { color: #D9DBDE; }
.phero.phero--photo .crumbs a { color: #E9EBEC; }
.phero.phero--photo .crumbs a:hover { color: #fff; }
.phero.phero--photo .crumbs [aria-current] { color: #EDEEF0; }
.phero--photo .phero__mark .mark { color: var(--y-lift); opacity: .22; }
@media (max-width: 860px) {
  .phero.phero--photo::after {
    background: linear-gradient(180deg,
      rgba(7,9,13,.82) 0%, rgba(7,9,13,.62) 40%, rgba(7,9,13,.80) 100%);
  }
}

.phero {
  position: relative; overflow: hidden;
  background: var(--s1);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}
/* Each practice page is signed with its own drawing, set large and quiet in
   the outer margin so the six pages are told apart at a glance. */
.phero__mark { position: absolute; inset: 0; pointer-events: none; }
.phero__mark .mark {
  position: absolute; right: clamp(-1.5rem, -1vw, 0rem); top: 50%;
  width: clamp(11rem, 17vw, 15rem); height: auto;
  transform: translateY(-50%);
  color: var(--y-deep); opacity: .17; stroke-width: .55;
}
.phero--mark .wrap { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .phero__mark .mark { right: -3rem; top: auto; bottom: -2.5rem; transform: none;
    width: 11rem; opacity: .1; }
}
.phero .eyebrow { margin-bottom: .7rem; }
.phero h1 { max-width: var(--measure); }
.phero .lede { margin-top: 1.1rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .85rem; color: var(--ink-4); margin-bottom: 1.1rem; }
/* Both the link and the current page carry the padding, so the row keeps one
   height and the separator stays on the centre line. */
.crumbs a, .crumbs [aria-current] { display: inline-block; padding-block: .16rem; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); }

/* Figure band */
.band { border-radius: clamp(16px, 2vw, 22px); overflow: hidden; background: var(--s1); }
.band img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: .55rem;
  box-shadow: 0 1px 2px rgba(11,13,16,.04), 0 6px 18px rgba(11,13,16,.035);
  background: var(--s1); border-radius: var(--r);
  padding: clamp(1.25rem, 1.8vw, 1.6rem);
  border: 1px solid transparent;
  transition: background var(--t-mid) var(--e-io),
              border-color var(--t-mid) var(--e-io),
              box-shadow var(--t-mid) var(--e-io);
}
.bg-s1 .card { background: var(--w); }
a.card, .card--link { text-decoration: none; }
/* a brass rule draws across the head of a card on hover */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #F0CE68 0%, var(--y) 42%, var(--y-deep) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 480ms var(--e);
}
a.card:hover::before, .card--link:hover::before { transform: scaleX(1); }
/* A card answers to the pointer without moving. The brass rule draws across its
   head, the border warms and the shadow deepens, and the card itself stays
   exactly where it was. It used to lift 2px as well, which is a common enough
   gesture but a restless one on a page of nine cards, and the rule alone reads
   as more considered. Nothing inside the card animates either: the line at its
   foot has its own hover and answers only when the pointer is on it. */
a.card:hover, .card--link:hover {
  border-color: var(--y-line);
  box-shadow: var(--sh-md);
}
a.card:hover { background: var(--w); }
.bg-s1 a.card:hover { background: var(--w); }
.card h3 { font-size: 1.16rem; letter-spacing: -.018em; }
.card p { font-size: .97rem; color: var(--ink-3); line-height: 1.55; }
.card__foot { margin-top: auto; padding-top: .9rem; }
.card__foot .tlink { font-size: .95rem; }

/* MARKS: the drawn set. One weight, one colour, three placements: on a card,
   beside a record key, and enlarged behind a page header. */
.mark { display: block; width: 1.55rem; height: 1.55rem; flex-shrink: 0; }
.card__mark {
  display: block; color: var(--y-deep); margin-bottom: .35rem;
  transition: color var(--t-mid) var(--e-io);
}
/* The mark deepens in colour on hover and does not move. It used to shift up a
   pixel, which read as a wobble against a card that is itself lifting, and two
   things moving by different amounts at the same time looks like a fault. */
a.card:hover .card__mark { color: var(--y-press); }

/* Chips: small labels for sub-charges */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.chips li {
  font-size: .85rem; color: var(--ink-2); line-height: 1.3;
  background: rgba(11,13,16,.055); padding: .35rem .75rem; border-radius: var(--pill);
}
.card .chips li { font-size: .8rem; padding: .22rem .6rem; color: var(--ink-3); }
.bg-s1 .card .chips li { background: var(--s1); }

/* ---------------------------------------------------------------------------
   THE RECORD, AS AN INDEX
   The case results section on the home page. Twelve matters, each carrying the
   one line it turned on, narrowable by the route the case took. It is built on
   the card, not beside it, so the hover lift, the brass rule and the focus ring
   are the same ones used everywhere else on the site.

   The filter bar ships hidden and is revealed by JavaScript. Without it every
   matter is on the page and there is no control that does nothing.
   --------------------------------------------------------------------------- */
.results { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* display:grid on an element carrying the hidden attribute beats the browser's
   own display:none for it, so with JavaScript off the bar was rendering after
   all and offering a filter that could never run. Caught by loading the page
   with scripting disabled, not by reading the rule. */
.results__bar[hidden] { display: none; }
.results__bar {
  display: grid; gap: .8rem;
  padding-bottom: clamp(1.2rem, 2.2vw, 1.65rem);
  margin-bottom: clamp(1.35rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--line);
}
.results__lab {
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4);
}
.rchips { display: flex; flex-wrap: wrap; gap: .5rem; }
/* On a phone the labels are long enough that only one pill fits a line anyway,
   and six pills of six different widths stacked up read as a mistake. Full
   width, counts flush right, and it reads as the list of filters it is. */
@media (max-width: 560px) {
  .rchips { display: grid; gap: .45rem; }
  .rchip { width: 100%; justify-content: space-between; padding-right: .7rem; }
}

/* 40px tall and never less, so the chips clear WCAG 2.5.8 on a phone without
   an inline exception being argued for them. */
.rchip {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px;
  font: inherit; font-size: .92rem; font-weight: 500; color: var(--ink-2);
  background: var(--s1); border: 1px solid var(--line);
  border-radius: var(--pill); padding: .45rem .85rem .45rem 1.05rem;
  cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--e-io), border-color var(--t-fast) var(--e-io),
              color var(--t-fast) var(--e-io), box-shadow var(--t-mid) var(--e-io);
}
.bg-s1 .rchip, .bg-s2 .rchip { background: var(--w); }
.rchip:hover { border-color: var(--y-line); background: var(--y-tint); color: var(--ink); }
.rchip__n {
  font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 600;
  /* --ink-4 measured 4.65:1 on the tinted badge, which passes and leaves no
     room at all. One step darker is 5.6:1 and still sits behind the label. */
  color: var(--ink-3); background: rgba(11,13,16,.06);
  border-radius: var(--pill); padding: .12rem .42rem; min-width: 1.5rem; text-align: center;
  transition: background var(--t-fast) var(--e-io), color var(--t-fast) var(--e-io);
}
.rchip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--sh);
}
.rchip[aria-pressed="true"]:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.rchip[aria-pressed="true"] .rchip__n { background: rgba(255,255,255,.15); color: var(--y-lift); }
/* The running count is carried off screen rather than deleted. On the page it
   said nothing the chips were not already saying, but it is the only thing that
   tells a screen reader the grid changed when a filter is pressed, so it stays
   in the accessibility tree as a live region. */

.rgrid { display: grid; gap: clamp(.8rem, 1.3vw, 1.1rem); }
@media (min-width: 660px)  { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rgrid > li { display: flex; }
.rgrid > li[hidden] { display: none; }
/* Three at rest. The class ships in the HTML so the page paints three rather
   than painting twelve and collapsing them a moment later. */
.results.is-capped .rgrid > li:nth-child(n+4) { display: none; }

.results__showall { margin-top: clamp(1.1rem, 2vw, 1.5rem); }
.results__showall[hidden] { display: none; }
/* .tlink assumes an anchor. On a button the UA styles have to come off first. */
.tlink--btn {
  background: none; border: 0; padding: 0 0 2px; margin: 0;
  font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
  color: var(--ink);
}

.rcase__in { width: 100%; gap: .4rem; }
/* align-items:center hung the tick halfway down a two-line outcome, so
   "Acquitted / Property returned" and "Original charge withdrawn" both had a
   mark floating in the gutter between their lines. It belongs on the first
   line, optically centred against its cap height. */
.rcase__in .rcase__out {
  display: flex; align-items: flex-start; gap: .42rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--y-text); line-height: 1.35;
}
.rcase__in .rcase__out svg {
  width: .95em; height: .95em; flex-shrink: 0; color: var(--y-deep); margin-top: .15em;
}
.rcase__t { margin-top: .15rem; }
.rcase__in .rcase__meta { font-size: .8rem; color: var(--ink-4); line-height: 1.45; }
.rcase__in .rcase__turn { margin-top: .35rem; }
.rcase__in .rcase__more { margin-top: auto; padding-top: .95rem; }
.rcase__in .rcase__more .tlink { font-size: .93rem; }

/* The hover forwarding that used to live here now sits on a.card in section 6,
   because every card on the site is a link with a line at its foot and they
   should all behave the way these do. */

/* A filter that swaps the contents of a grid with no motion at all reads as a
   glitch. One short rise, and nothing for anyone who has asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .rgrid.is-sifting > li:not([hidden]) { animation: rsift 400ms var(--e) both; }
}
@keyframes rsift {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.results__foot { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); display: grid; gap: 1rem; }
@media (min-width: 880px) {
  .results__foot {
    grid-template-columns: minmax(0, var(--measure)) auto;
    align-items: center; gap: 2.5rem;
  }
  .results__all { justify-self: end; }
}

/* ---------------------------------------------------------------------------
   RECORDS: one component for every labelled list on the site.
   Case results, courthouses, regions, case timeline, the steps of a first
   call, biography facts and contact details were six patterns; they are now
   one. Left column carries the key, right column the content.
   --------------------------------------------------------------------------- */
.rec { border-top: 1px solid var(--line); }
.bg-ink .rec { border-top-color: rgba(255,255,255,.14); }

.rec__row {
  display: grid;
  grid-template-columns: 13rem minmax(0,1fr);
  gap: .35rem 2rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.bg-ink .rec__row { border-bottom-color: rgba(255,255,255,.14); }
.rec--tight .rec__row { padding: clamp(.85rem, 1.4vw, 1.1rem) 0; }
.rec--wide .rec__row { grid-template-columns: 16rem minmax(0,1fr); }
/* an outcome word does not need thirteen rems of track. Desktop only: below
   the stacking breakpoint every record row is one column, and a narrower
   track here would out-specify that and squeeze the text to nothing. */
@media (min-width: 761px) {
  .rec--results .rec__row { grid-template-columns: 10rem minmax(0,1fr); }
}
.rec--facts .rec__row { grid-template-columns: 8rem minmax(0,1fr); gap: .3rem 1.25rem; padding: .8rem 0; }
/* numeric keys are two or three characters; they get a track that fits them */
.rec--seq .rec__row { grid-template-columns: 3.25rem minmax(0,1fr); gap: .35rem 1.5rem; }
.rec--when .rec__row { grid-template-columns: 7.5rem minmax(0,1fr); gap: .35rem 1.75rem; }
.rec--seq .rec__k, .rec--when .rec__k { padding-top: .28rem; }
/* On a phone a 52px number gutter costs a fifth of the line and leaves an empty
   channel running the height of every step. The number goes above the text and
   the text takes the screen. */
@media (max-width: 620px) {
  .rec--seq .rec__row, .rec--when .rec__row { grid-template-columns: 1fr; gap: .1rem; }
  .rec--seq .rec__k, .rec--when .rec__k { padding-top: 0; }
}
.rec--facts .rec__k { font-size: .9rem; font-weight: 500; color: var(--ink-4); }
.rec--facts .rec__v p { font-size: .93rem; color: var(--ink-2); }

.rec__k {
  display: flex; flex-direction: column; gap: .18rem;
  font-size: .96rem; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.bg-ink .rec__k { color: #fff; }
.rec__k small {
  font-size: .84rem; font-weight: 400; color: var(--ink-4); letter-spacing: 0;
}
.bg-ink .rec__k small { color: var(--on-ink-mute); }
/* numeric keys (steps, timeline) read as a sequence */
.rec__k--num { font-variant-numeric: tabular-nums; color: var(--y-text); font-size: .84rem; letter-spacing: .04em; }
.bg-ink .rec__k--num { color: var(--y-lift); }
/* a key that carries a drawn mark */
.rec__k--mark { display: flex; align-items: center; gap: .6rem; }
.rec__k--mark .mark { width: 1.25rem; height: 1.25rem; color: var(--y-deep); }
.bg-ink .rec__k--mark .mark { color: var(--y-lift); }
/* an outcome key carries a small brass tick */
.rec__k--out { display: inline-flex; align-items: baseline; gap: .45rem; }
.rec__k--out svg { display: inline-block; width: .8em; height: .8em; color: var(--y-deep); flex-shrink: 0; transform: translateY(.06em); }

.rec__v { min-width: 0; }
.rec__v h3 { font-size: 1.1rem; letter-spacing: -.018em; margin-bottom: .3rem; }
.bg-ink .rec__v h3 { color: #fff; }
.rec__v p { font-size: .98rem; color: var(--ink-3); max-width: var(--measure); }
.bg-ink .rec__v p { color: var(--on-ink-mute); }
.rec__v p + p { margin-top: .55rem; }
.rec__meta { font-size: .84rem; color: var(--ink-4); margin-bottom: .45rem; }
.bg-ink .rec__meta { color: var(--on-ink-mute); }
.rec__v strong { color: var(--ink); font-weight: 600; }
.rec__v a:not(.tlink):not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--y-deep); text-underline-offset: 3px; }

@media (max-width: 760px) {
  .rec__row, .rec--wide .rec__row, .rec--facts .rec__row { grid-template-columns: 1fr; gap: .3rem; }
  .rec--facts .rec__row { padding: .7rem 0; }
  .rec__k { flex-direction: row; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
  .rec__k small { font-size: .82rem; }
}

/* Quote: used inline within a section, never as a wall */
.revtop { margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 clamp(1.5rem, 2.6vw, 2rem); }
.quote { display: flex; flex-direction: column; gap: 1rem; break-inside: avoid; }
.quote blockquote { font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); letter-spacing: -.008em; }
.quote figcaption { margin-top: auto; font-size: .92rem; color: var(--ink); font-weight: 600; }
.quote figcaption span { display: block; font-weight: 400; color: var(--ink-4); font-size: .85rem; margin-top: .1rem; }
.stars { display: flex; gap: 1px; color: var(--y); }
.stars svg { width: .95rem; height: .95rem; }

/* An open quote, set large and pale, in place of the five stars that used to
   head every card. It carries no claim, and it gives the grid a rhythm that a
   repeated row of identical stars never did. */
/* Decorative and aria-hidden, so 1.4.3 does not reach it, but at --y-line it
   was faint enough on the card to read as a rendering fault rather than an
   ornament. Two steps deeper on each surface: still quiet, now deliberate. */
.quote__mk {
  font-size: 2.4rem; line-height: .6; color: #D8C48E;
  font-family: Georgia, "Times New Roman", serif; height: 1.1rem;
}
.bg-s1 .quote__mk { color: #D2BC82; }

/* ---------------------------------------------------------------------------
   THE GOOGLE RATING, STATED ONCE
   The real figure off the firm's listing, with the count and the date it was
   read, linked so it can be checked. It replaces a row of five gold stars that
   used to sit above all 18 quotations, including the five that came from
   letters where nobody ever gave a rating.
   --------------------------------------------------------------------------- */
.grate {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .7rem;
  padding: .7rem 1.1rem .7rem .9rem;
  background: var(--w); border: 1px solid var(--y-line); border-radius: var(--pill);
  box-shadow: var(--sh); width: fit-content; max-width: 100%;
}
.bg-w .grate { background: var(--s1); }
.grate__mk { display: flex; }
.grate__mk svg { width: 1.15rem; height: 1.15rem; display: block; }
.grate__n {
  font-size: 1.28rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* Two star rows, one clipped over the other, so 4.8 is drawn as 4.8 and not
   rounded up to a fifth full star the firm has not earned. */
.grate__stars { position: relative; display: inline-block; line-height: 0; }
.grate__base, .grate__fill { display: flex; gap: 1px; }
.grate__base { color: var(--y-line); }
.grate__fill {
  position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--y);
  white-space: nowrap;
}
.grate__base svg, .grate__fill svg { width: .95rem; height: .95rem; flex-shrink: 0; }
.grate__c { font-size: .86rem; color: var(--ink-4); line-height: 1.4; }
.grate__c a { color: var(--ink-3); text-decoration: underline;
  text-decoration-color: var(--y-deep); text-underline-offset: 2px; }
.grate__c a:hover { color: var(--ink); }
.grate__when { display: block; font-size: .78rem; color: var(--ink-4); }
@media (max-width: 460px) {
  .grate { border-radius: var(--r); padding: .8rem 1rem; }
}

/* A single large testimonial, set as a pull-quote */
.pullquote { border-top: 1px solid var(--line); padding-top: clamp(1.5rem,3vw,2.25rem); display: grid; gap: 1.25rem; }
.pullquote blockquote {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.4; letter-spacing: -.02em;
  color: var(--ink); font-weight: 500; max-width: 34em;
}
.pullquote blockquote::before { content: "\201C"; color: var(--y-deep); }
.pullquote blockquote::after  { content: "\201D"; color: var(--y-deep); }
.pullquote figcaption { font-size: .95rem; color: var(--ink); font-weight: 600; }
.pullquote figcaption span { color: var(--ink-4); font-weight: 400; }

/* People */
.person { display: grid; gap: 1.1rem; }
.person__photo { border-radius: var(--r); overflow: hidden; background: var(--s1); aspect-ratio: 4/5; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.person__role { font-size: .92rem; color: var(--ink-4); margin-top: .2rem; }
.person__bio { font-size: 1rem; color: var(--ink-2); line-height: 1.62; }
.person__bio + .person__bio { margin-top: .9rem; }
.person--sq .person__photo { aspect-ratio: 1/1; max-width: 26rem; }
.person--tall .person__photo { max-width: 24rem; }
/* On a phone the portrait takes the column. Capped, it stopped short of the
   right edge and left a strip of dead paper beside every face. */
@media (max-width: 620px) {
  .person--sq .person__photo, .person--tall .person__photo { max-width: none; }
}

/* Quiet notices */
.notice {
  background: var(--s1); border-radius: var(--r);
  padding: clamp(1.5rem, 2.4vw, 2rem); display: grid; gap: .6rem; justify-items: start;
}
.notice p { max-width: 54ch; }
.bg-s1 .notice { background: var(--w); }
.notice--accent { background: var(--y-tint); border: 1px solid var(--y-line); }
.notice h2, .notice h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: -.016em; }
.notice p { font-size: .99rem; color: var(--ink-2); }
.note {
  font-size: .88rem; line-height: 1.6; color: var(--ink-4);
  max-width: var(--read);
}
.split .note, .split--counsel .note, .prose .note, .form ~ .note { text-align: left; margin-inline: 0; }
/* A note that sits directly in a section is a one-line disclaimer about the
   whole section, not body copy. Capping it at the reading measure was breaking
   a single sentence over two lines and stranding three words on the second. */
.section > .wrap > .note { max-width: none; }
.note .tlink { display: flex; margin-top: .8rem; font-size: .95rem; line-height: 1.4; }

/* Column head: a section head one step down, so two columns beside each other
   read as peers rather than as two unrelated fragments. */
.colhead {
  padding-top: .9rem; margin-bottom: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
}
.bg-ink .colhead { border-top-color: rgba(255,255,255,.14); color: var(--on-ink-mute); }

/* Mark list: `rec` sized for a column: rule, mark, title, line, chevron. */
.mlist { border-top: 1px solid var(--line); }
.bg-ink .mlist { border-top-color: rgba(255,255,255,.14); }
.mlist__row {
  display: grid; grid-template-columns: 1.9rem minmax(0,1fr) .9rem;
  gap: 0 1rem; align-items: start;
  padding: 1.05rem .25rem 1.05rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left var(--t-mid) var(--e), background var(--t-mid) var(--e-io);
}
.bg-ink .mlist__row { border-bottom-color: rgba(255,255,255,.14); }
/* The row used to slide right and the chevron with it. A hover should mark
   the target, not move it. Only the tint changes now. */
.mlist__row:hover { background: rgba(219,172,51,.06); }
.bg-ink .mlist__row:hover { background: rgba(216,180,63,.07); }
.mlist__ico { display: block; color: var(--y-deep); padding-top: .1rem; }
.bg-ink .mlist__ico { color: var(--y-lift); }
.mlist__ico .mark { width: 1.35rem; height: 1.35rem; }
.mlist__txt b {
  display: block; font-size: 1.04rem; font-weight: 500; color: var(--ink);
  letter-spacing: -.016em; line-height: 1.35;
}
.bg-ink .mlist__txt b { color: #fff; }
.mlist__txt > span {
  display: block; margin-top: .22rem; font-size: .91rem; line-height: 1.5; color: var(--ink-3);
}
.bg-ink .mlist__txt > span { color: var(--on-ink-mute); }
.mlist__go {
  font-size: 1.35rem; line-height: 1; color: var(--y-deep); justify-self: end; padding-top: .1rem;
  transition: transform var(--t-mid) var(--e);
}
.bg-ink .mlist__go { color: var(--y-lift); }
.mlist__row:hover .mlist__go { color: var(--y-text); }

/* The right-to-silence module, restrained */
.silence { position: relative; display: grid; gap: 1.1rem; justify-items: start; }
/* an oversized quotation mark, set quietly behind the opening line */
.silence__q {
  position: absolute; left: -.1em; top: -.30em; z-index: 0;
  font-size: clamp(4.5rem, 8vw, 6.5rem); line-height: 1; font-weight: 700;
  color: var(--y-deep); opacity: .14; pointer-events: none;
}
.bg-ink .silence__q { color: var(--y-lift); opacity: .16; }
.silence > *:not(.silence__q) { position: relative; z-index: 1; }
.silence__say {
  font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600; color: var(--ink);
  line-height: 1.25; letter-spacing: -.026em; max-width: 24ch;
}
.silence p:not(.silence__say) { font-size: 1.02rem; color: var(--ink-3); max-width: var(--read); }
.silence__more { margin-top: .5rem; }
.bg-ink .silence__say { color: #fff; }
.bg-ink .silence p:not(.silence__say) { color: var(--on-ink-mute); }

/* --------------------------------------------------------------------------
   9. ACCORDION
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; gap: 1.5rem; align-items: baseline; justify-content: space-between;
  padding: 1.15rem 0; font-size: 1.06rem; font-weight: 500; color: var(--ink); line-height: 1.4; letter-spacing: -.014em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary { transition: color var(--t-fast) var(--e-io); }
.acc summary:hover { color: var(--y-text); }
.accsign { position: relative; width: .8rem; height: .8rem; flex-shrink: 0; align-self: center; }
.accsign::before, .accsign::after { content: ""; position: absolute; background: var(--ink-4); transition: transform .25s var(--e), background .2s var(--e); }
.accsign::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); border-radius: 2px; }
.accsign::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); border-radius: 2px; }
.acc details[open] .accsign::after { transform: translateX(-50%) rotate(90deg); }
.acc details[open] .accsign::before, .acc details[open] .accsign::after { background: var(--y-press); }
.acc__body { padding: 0 0 1.4rem; max-width: var(--read); overflow: hidden;
  transition: height 320ms var(--e-io); }
.acc__body p { font-size: 1rem; color: var(--ink-3); line-height: 1.62; }
.acc__body p + p { margin-top: .8rem; }

/* In-page contents */
.toc {
  display: grid; gap: .5rem; max-width: var(--read);
  border-top: 2px solid var(--y); padding-top: 1.05rem;
}
.toc b { font-size: .8rem; font-weight: 600; color: var(--ink-4); }
.toc a { font-size: 1rem; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--y); text-underline-offset: 3px; }

/* Table */
/* Data table: same hairlines and type as a record list */
.tbl { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tbl th, .tbl td { text-align: left; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th {
  font-size: .78rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); border-bottom-color: var(--line-strong); padding-bottom: .7rem;
}
.tbl tbody th { font-weight: 600; color: var(--ink); }
.tbl td { color: var(--ink-3); }
.tbl td strong, .tbl th strong { color: var(--ink); font-weight: 600; }
.tblwrap { overflow-x: auto; max-width: 100%; }
/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   content's minimum, which means a wide table pushes its whole section past
   the viewport and the scroll wrapper above never engages. Every child of a
   grid container on this site is allowed to shrink. */
.prose > *, .rec__v > *, .split > *, .grid > * { min-width: 0; }

/* Stat row */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 1.5rem; } }
/* a brass rule over each figure, the same 2px mark as the wordmark, so the
   numbers read as part of the identity rather than as a widget */
.stat { position: relative; padding-top: 1.1rem; }
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2rem; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, #F0CE68 0%, var(--y) 42%, var(--y-deep) 100%);
  transform-origin: left;
  transition: transform 620ms var(--e) var(--rv-delay, 0ms);
}
/* drawn in only when the script is running and the figure has not yet arrived,
   so the rule is simply present without JS and under reduced motion */
.js .stat[data-rv]:not(.is-in)::before { transform: scaleX(0); }
.stat b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 700; color: var(--ink); letter-spacing: -.035em; line-height: 1; }
.stat span { display: block; margin-top: .5rem; font-size: .95rem; color: var(--ink-3); line-height: 1.45; }
.bg-ink .stat b { color: #fff; }
.bg-ink .shead__n, .bg-ink .mlist__go, .bg-ink .mlist__ico {
  filter: drop-shadow(0 0 12px rgba(232,194,85,.30));
}
.bg-ink .stat span { color: var(--on-ink-mute); }

/* --------------------------------------------------------------------------
   10. CLOSING CONTACT BLOCK  (replaces every hard-sell strip)
   -------------------------------------------------------------------------- */
.speak h2 { margin-bottom: 1rem; }
.speak .shead { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.speak__tel {
  display: inline-block; margin-top: .25rem;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; letter-spacing: -.035em;
  color: var(--ink); text-decoration: none;
}

.speak .btns { margin-top: 1.75rem; }
.speak__meta { margin-top: 1.4rem; font-size: .93rem; color: var(--ink-4); }
/* The cost paragraph. It is here to be read by somebody deciding whether to
   call, so it sits with the telephone number rather than buried in a guide.
   It used to be fenced off behind a rule and split into two text columns,
   which made one thought look like two notices. One block now. */
.speak__terms {
  margin-top: 1.35rem;
  font-size: .95rem; line-height: 1.62; color: var(--ink-3);
}
@media (max-width: 899px) { .speak__terms { max-width: var(--read); } }
.bg-ink .speak__terms { color: var(--on-ink-mute); }

/* --------------------------------------------------------------------------
   11. FORM (contact page only)
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .92rem; font-weight: 500; color: var(--ink); }
.field label span { color: var(--ink-4); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem .95rem;
  background: var(--w); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: 1rem; color: var(--ink);
  transition: border-color .16s var(--e), box-shadow .16s var(--e);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7C8087; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(219,172,51,.30);
}
.field select {
  appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236B6F78' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 11px;
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }
.formstatus { padding: .9rem 1.05rem; border-radius: var(--r-sm); background: var(--y-tint); border: 1px solid var(--y-line); font-size: .95rem; line-height: 1.55; color: var(--ink); }
.formstatus a { color: var(--ink); }

/* --------------------------------------------------------------------------
   12. FOOTER: a composed signature, not a list of links
   -------------------------------------------------------------------------- */
/* The footer sits on the deeper cream, so its small print needs a step more
   ink than the rest of the site: --ink-4 measures 4.35:1 there and fails. */
.site-footer, .site-footer .foot__legal, .site-footer .foot__hd,
.site-footer .foot__sig small, .site-footer .foot__bottom { color: #565A62; }
.site-footer a { color: #52565E; }
.site-footer a:hover { color: var(--ink); }

.site-footer {
  /* The footer takes the third surface. Sections alternate white and cream, so
     if the footer shared either of them the last boundary on the page would
     disappear. This way it always reads as the base the page sits on. */
  background: var(--s2); border-top: 1px solid var(--line-strong);
  font-size: .92rem; color: var(--ink-3);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.foot__top { display: grid; gap: clamp(2.25rem, 4vw, 3rem); }
@media (min-width: 900px) { .foot__top { grid-template-columns: var(--foot-track); gap: 3rem; } }

.foot__sig p { line-height: 1.6; max-width: 30ch; margin-top: 1rem; }
.foot__tel {
  display: inline-block; margin-top: 1.25rem;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em;
  color: var(--ink); text-decoration: none;
}

.foot__sig small { display: block; margin-top: .4rem; color: var(--ink-4); font-size: .88rem; }

/* One of these is an h3 and the rest are paragraphs, and they were inheriting
   two different line-heights: 13.7px on the heading, 22.5px on the paragraph in
   the legal block. Same font size, but an 8.75px taller line box, which pushed
   the rule under Licensed by the Law Society below the rule under Office and
   took the whole column down with it. Stated once here so the element it is
   written on cannot change where it sits. */
.foot__hd {
  font-size: .78rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
/* Two class names, so no bare `p` rule in the footer can outrank it.
   .foot__office p and .foot__legal p both score 0,1,1 against .foot__hd at
   0,1,0, and each was handing this label a different line-height depending on
   whether it happened to be written as an h3 or a p. That put the rule under
   Licensed by the Law Society below the rule under Office. One line box for
   every label in the footer, whatever element carries it. */
.site-footer .foot__hd { line-height: 1.1; }
.foot ul { display: grid; gap: 0; }
.foot a { color: var(--ink-3); text-decoration: none; transition: color var(--t-fast) var(--e-io); }
.foot a:hover { color: var(--ink); }

/* Tap targets. Set at .92rem these links draw an 18px line box, which is under
   the 24px WCAG 2.2 asks for (2.5.8, Target Size Minimum). The padding below is
   taken back out of the list gap, so the footer looks exactly as it did while
   each link becomes a thumb-sized target with no dead space between them. */
.foot li > a,
.foot__policies a { display: inline-block; padding-block: .3rem; }
.foot__policies { display: inline-flex; flex-wrap: wrap; gap: 0 1.5rem; }

.foot__office {
  margin-top: clamp(2.5rem, 4vw, 3.25rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: grid; gap: 1.5rem;
}
@media (min-width: 900px) {
  .foot__office { grid-template-columns: var(--foot-track); gap: 3rem; }
  /* One block, from the Charges edge to the right margin. It was set in two
     text columns to keep the measure short, which read as two separate notes.
     Fine print at this width is normal; the extra leading keeps it trackable. */
  .foot__legal { grid-column: 2 / -1; }
}
/* Office and the licences now sit under the same label as Charges, Guides and
   Firm above them, so all four rules across the footer land on one line and the
   whole block reads as one system rather than two. */
.foot__office h3.foot__hd { font-size: .78rem; }
.foot__office p { line-height: 1.65; }
.nb { white-space: nowrap; }
.foot__legal { font-size: .84rem; line-height: 1.85; color: var(--ink-4); }
/* The block now carries three things: whose licences these are, where to check
   them, and the standing disclaimer. Set as separate paragraphs so a reader can
   find the licence numbers without reading the disclaimer to get to them. */
/* :not() because .foot__legal p scores 0,1,1 and .foot__hd scores 0,1,0, so a
   bare `p` selector here quietly outranks the label's own line-height and puts
   its rule 8.75px below the one across the column from it. */
.foot__legal p:not(.foot__hd) { line-height: 1.8; }
.foot__legal p + p { margin-top: .75rem; }
.foot__legal .foot__lic { color: var(--ink-3); }
.site-footer .foot__legal .foot__lic { color: #4E525A; }
/* Underlined, because these are the two claims on the page a reader is most
   likely to want to verify, and a link that does not look like one gets missed. */
.foot__legal a {
  text-decoration: underline; text-decoration-color: var(--y-deep);
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.foot__legal a:hover { text-decoration-color: var(--y-press); }

.foot__bottom {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  display: grid; gap: .5rem; font-size: .84rem; color: var(--ink-4);
}
/* The copyright keeps the left edge. Everything else sits on the same four
   tracks as the two rows above, so Privacy policy starts exactly where the
   licence paragraph starts and the city list ends where that paragraph ends.
   It was on its own flex row before, which left the policy links floating a
   few pixels inside the column edge above them. */
@media (min-width: 900px) {
  .foot__bottom {
    display: grid; grid-template-columns: var(--foot-track);
    align-items: baseline; gap: 1rem 3rem;
  }
  .foot__meta {
    grid-column: 2 / -1;
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: .45rem 2rem;
  }
}


/* Line breaking. A two-line lede that put eight words on the first line and
   three on the second left a hole the size of a paragraph. Balanced wrapping
   splits the lines evenly instead. */
h1, h2, h3, h4, .d1, .d2, .d3, .lede, .hero__text .lede, .silence__say,
.card h3, .mlist__t, .rec__v h3, .acc__q, .notice h2, .notice h3 { text-wrap: balance; }
p, li, dd, .prose p, .form__consent, .note { text-wrap: pretty; }


/* ---------------------------------------------------------------------------
   TRIAGE
   Three states, three sets of actions. Radio inputs rather than script, so it
   works with JavaScript off and needs no key handling of our own.
   --------------------------------------------------------------------------- */
.triage { position: relative; }
.triage__in { position: absolute; opacity: 0; pointer-events: none; }

.triage__tabs {
  border: 0; margin: 0 0 clamp(1.5rem, 2.6vw, 2.1rem); padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.triage__tab {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem; border-radius: var(--pill);
  border: 1px solid var(--line-strong); background: var(--w);
  font-size: .95rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: background var(--t-fast) var(--e-io), color var(--t-fast) var(--e-io),
              border-color var(--t-fast) var(--e-io);
}
.triage__tab::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--line-strong); flex: none;
  transition: background var(--t-fast) var(--e-io);
}
.triage__tab:hover { border-color: var(--y-deep); color: var(--ink); }
.triage__in:checked + .triage__tab {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.triage__in:checked + .triage__tab::before { background: var(--y); }
.triage__in:focus-visible + .triage__tab {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

/* The panels are visible by default and hidden by the selection, not the other
   way round: a browser that does not understand :has() shows all three rather
   than none, which is a degraded page instead of an empty one. */
.triage__panel { border-top: 1px solid var(--line); }
.triage__panel + .triage__panel { margin-top: 2rem; }
.triage:has(.triage__in:checked) .triage__panel { display: none; margin-top: 0; }
.triage:has(#tg-now:checked)   [data-for="tg-now"],
.triage:has(#tg-out:checked)   [data-for="tg-out"],
.triage:has(#tg-trial:checked) [data-for="tg-trial"] { display: block; }

.triage__step {
  display: grid; grid-template-columns: 3.25rem minmax(0,1fr); gap: .35rem 1.5rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.triage__n {
  padding-top: .28rem; font-size: .84rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--y-text);
}
.triage__step h3 { font-size: 1.1rem; letter-spacing: -.018em; margin-bottom: .3rem; }
/* short blocks take the wider measure: at the reading width a two-sentence
   answer was breaking over two lines with three words stranded on the second */
.triage__step p { font-size: .98rem; color: var(--ink-3); max-width: var(--measure); }
.triage__go { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; padding-top: 1.35rem; }

@media (max-width: 620px) {
  .triage__tabs { gap: .5rem; }
  .triage__tab { width: 100%; }
  .triage__step { grid-template-columns: 1fr; gap: .2rem; }
  .triage__n { padding-top: 0; }
}

/* The intaglio plate, printed as a band across the foot of the closing section:
   the device at the end of a document rather than a picture behind the copy.
   The section reserves height for it, so it can never sit under text. */
/* a third less air under the last line than before, with the plate sized to
   fit what remains rather than overrunning it */
.has-plate { padding-bottom: calc(var(--sec) * .19 + var(--plate-h)); }
.plate {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--plate-h);
  z-index: 0; pointer-events: none;
  background-size: cover; background-position: 50% 64%; background-repeat: no-repeat;
  opacity: .135;
  mask-image: linear-gradient(to top, #000 42%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 100%);
}
:root { --plate-h: clamp(76px, 8.6vw, 112px); }
.plate--dark { opacity: .20; filter: invert(1); }
@media (max-width: 700px) { .plate { opacity: .085; } }
@media (prefers-reduced-transparency: reduce) { .plate, .has-plate { display: revert; } .plate { display: none; } }

/* ---------------------------------------------------------------- cookies ---
   A notice, not a wall. It does not block the page, it sets nothing until it is
   answered, and declining is exactly as easy as allowing. */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 260;
  background: var(--ink); color: var(--on-ink);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: translateY(101%);
  transition: transform 320ms var(--e);
}
.cookie.is-up { transform: none; }
.cookie[hidden] { display: none; }
.cookie__in {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .8rem 2.4rem;
  justify-content: space-between;
  padding-block: .72rem;
}
/* The text takes every pixel up to the 2.4rem gutter before the buttons, which
   keeps it to two lines at any desktop width instead of wrapping short and
   leaving a hole in the middle of the bar. */
.cookie__txt {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: .88rem; line-height: 1.5; color: var(--on-ink-mute);
}
.cookie__txt strong { color: #fff; font-weight: 600; }
.cookie__txt a {
  color: #fff; text-decoration: underline;
  text-decoration-color: var(--y-lift); text-underline-offset: 3px;
  /* Same 24px minimum as the footer. The bar is fixed to the bottom of the
     screen, so this is the one link a thumb is most likely to reach for. */
  display: inline-block; padding-block: .28rem;
}
.cookie__btns { display: flex; gap: .55rem; flex: none; }
.cookie__btns .btn--quiet {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.34);
}
.cookie__btns .btn--quiet:hover { border-color: #fff; background: rgba(255,255,255,.06); }
/* Below this the text column is too narrow to hold two lines beside the
   buttons, so the buttons take their own row rather than squeezing it. */
@media (max-width: 880px) {
  .cookie__in { flex-wrap: wrap; gap: .7rem; padding-block: .8rem; }
  .cookie__txt { flex: 1 1 100%; }
  .cookie__btns { width: 100%; }
  .cookie__btns .btn { flex: 1; justify-content: center; }
}
@media (max-width: 480px) { .cookie__txt { font-size: .84rem; line-height: 1.45; } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }

/* A three-column table on a 390px screen gives every cell about a hundred
   pixels: two words a line, rows a screen and a half tall, and nothing that
   reads as a comparison any more. Below this width it stops being a table and
   becomes one block per row, with the column headings carried down as labels. */
@media (max-width: 720px) {
  .tblwrap { overflow: visible; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
               clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl tr {
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--line);
  }
  .tbl tr:first-child { padding-top: 0; }
  .tbl td { border: 0; padding: 0 0 .7rem; }
  .tbl td:last-child { padding-bottom: 0; }
  .tbl td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: .15rem;
    font-size: .72rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-4);
  }
  .tbl td:first-child[data-label]::before { display: none; }
  .tbl td:first-child { font-size: 1.05rem; padding-bottom: .5rem; }
}

/* --------------------------------------------------------------------------
   13. MOTION
   -------------------------------------------------------------------------- */
/* Entrances: one gesture, used sparingly. A short rise and fade, slow enough
   to feel considered rather than animated. Children of a revealed grid follow
   in sequence so a row resolves left to right instead of all at once. */
/* Scoped to .js so that without JavaScript nothing is ever hidden. */
.js [data-rv] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms var(--e), transform 800ms var(--e);
  transition-delay: var(--rv-delay, 0ms);
}
.js [data-rv].is-in { opacity: 1; transform: none; }
/* The opening of a page is already on screen when it loads, so it is never
   hidden and never animated. Nobody should have to wait for the top of a page,
   and nothing above the fold should arrive a beat late. */
.js main > section:nth-of-type(-n+2) [data-rv],
.js main > section:nth-of-type(-n+2) [data-rv] > * {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   14. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .nav-root, .site-footer, .navsheet, .navscrim, .speak, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .bg-ink { background: #fff !important; color: #000 !important; }
  .bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink .silence__say { color: #000 !important; }
  .section { padding-block: 1.25rem; }
  a { text-decoration: none; color: #000; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ===========================================================================
   CENTRED HOMEPAGE

   The instruction, read correctly: **the text stays left-aligned, and the
   block it sits in is centred.** Not centred text.

   The clean way to do that is to narrow the container and let it centre
   itself, rather than centring each child as its own box. Centring the boxes
   is what produced the ragged mess: a heading narrower than the column would
   float to the middle while the paragraph under it started somewhere else.
   With one narrower column, every element shares its left edge and the whole
   column sits in the middle of the page.

   Scoped to `.is-centred`, which only the home page carries.
   =========================================================================== */
.is-centred { --col: 60rem; }

/* The closing block sits outside <main>, so it carries `is-centred` on the
   section itself rather than inheriting it from an ancestor. Both forms have to
   be matched or that one section stays full width while everything above it is
   in the column, which is exactly what happened. */
.is-centred .section > .wrap,
section.section.is-centred > .wrap { max-width: var(--col); }   /* .wrap already centres itself */
section.section.is-centred { --col: 60rem; }
@media (max-width: 1100px) { section.section.is-centred { --col: 100%; } }

/* blocks with their own internal layout keep it, narrowed so they read as
   centred within the column rather than filling it edge to edge */
.is-centred .split--counsel { max-width: 52rem; margin-inline: auto; }

/* The hero is a photographic band with its own composition, and is not part of
   the centred treatment: it keeps the full content width and the left spine. */
.hero > .wrap { max-width: var(--content); }
.hero__texts, .hero__text { text-align: left; }
.hero__cta { justify-content: flex-start; }
.hero__meta, .hero__dots { justify-content: flex-start; }

@media (max-width: 1100px) { .is-centred { --col: 100%; } }



/* The honeypot. Hidden from sight and from assistive technology, but a bot
   parsing the HTML will fill it in and give itself away. Not display:none,
   because some bots skip those; moved off-screen instead. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Form status. One element, three tones, announced by moving focus to it. */
.formstatus--wait { opacity: .75; }
.formstatus--ok {
  border-color: var(--y-line); background: var(--y-tint);
}
.formstatus--warn {
  border-color: var(--y-deep);
}
.form [type="submit"][disabled] { opacity: .6; cursor: progress; }


/* Leave-a-review card. Same paper, rule and gold as the rest of the site; it
   is an invitation, not an advertisement, so it stays quiet. */
.cta-card {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--w); border: 1px solid var(--line);
  border-radius: var(--r); max-width: var(--measure);
}
@media (min-width: 860px) {
  /* The body is capped at the reading measure, so a 1fr column left 135px of
     dead air between the last word and the button. Sizing the card to its
     content instead keeps the two halves reading as one object. */
  .cta-card {
    grid-template-columns: minmax(0, var(--read)) auto;
    align-items: center;
    max-width: calc(var(--read) + 17rem);
  }
}
.cta-card__body { max-width: var(--read); }
.cta-card__body h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.cta-card__body p { color: var(--ink-3); line-height: 1.65; }
.cta-card__body p + p { margin-top: .9rem; }
/* The button was 158px under a 183px text link, which read as a ragged left
   and right edge on two controls doing the same job. justify-content sizes the
   single column to its widest child, which is the link, and the button then
   takes the whole column. The link keeps its own width, so its underline still
   runs the length of the words rather than past them. */
.cta-card__act {
  display: grid; gap: .9rem; align-content: center;
  justify-content: start; justify-items: stretch;
}
.cta-card__act .btn { width: 100%; }
@media (min-width: 860px) { .cta-card__act { justify-content: center; } }


/* Where the quotations came from, and the way through to leaving one.
   The mark sits at the size of the surrounding text and is muted at rest, so
   it reads as attribution rather than as a logo pinned to the page. */
.revfoot {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.revfoot__act { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; }

/* The source mark on a quotation. Sized to the caption it sits in and held a
   little back, so it reads as attribution rather than as a badge. Only the
   reviews that actually came from Google carry one. */
.srcmark {
  display: inline-flex; vertical-align: -2px; margin-right: .4rem;
  opacity: .8; transition: opacity var(--t-fast) var(--e-io);
}
.srcmark .gmark { width: 13px; height: 13px; }
.quote:hover .srcmark, .pullquote:hover .srcmark { opacity: 1; }

/* The mark beside the heading on the leave-a-review card. */
.gmark__wrap { display: inline-flex; vertical-align: -3px; margin-right: .55rem; }
.cta-card__body h3 { display: flex; align-items: center; }
.cta-card__body h3 .gmark__wrap { margin-top: -1px; }


/* WCAG 2.5.8 Target Size (Minimum). Most links on this site are inside
   sentences and take the criterion's Inline exception. These two do not, and
   were measured failing:

   1. The footer city row is a run of links, not a sentence. At 390px it wraps,
      and "Vaughan" and "Hamilton" ended up 21.5px apart, centre to centre,
      which fails the Spacing exception too.
   2. The contact page telephone numbers sit alone in their own paragraph, so
      they are not "in a sentence" either. They measured 19px tall, and they
      are the most important thing to tap on the whole site. */
.foot__where a {
  display: inline-block;
  padding-block: .28rem;
}
.foot__where { line-height: 2.1; }

.rec__v a[href^="tel"],
.rec__v a[href^="mailto"] {
  display: inline-block;
  padding-block: .2rem;
}