/* ==========================================================================
   pages.css: page-specific styles
   Scope: cases.html (case archive), practice-areas.html, contact.html

   ADDITIVE ONLY. Tokens, layout (.wrap/.section), typography, buttons, chips,
   cards, base form controls, header/footer, .reveal and .hero-in all come from
   css/styles.css, which MUST be linked first. Nothing here redefines a class
   that styles.css already owns.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CATEGORY SIGNATURE COLOURS

   One palette entry per archive category, carried on [data-cat] and consumed by
   the filter pills, the category chips, the card accent stripe, the expanded
   panel tint and the distribution bar, so a colour always means the same thing.

     --cat      the signature colour (fills, stripes, swatches)
     --cat-ink  the darker text-safe version (AA on white and on tints)
     --cat-rgb  the same colour as raw channels, for low-alpha tints

   Contrast: every --cat-ink is at least 7:1 on white and at least 6.5:1 on its
   own 9% tint; white on --cat-ink is at least 5:1.
   -------------------------------------------------------------------------- */

[data-cat="class-action"] {                     /* bronze */
  --cat: var(--accent);
  --cat-ink: var(--accent-deep);
  --cat-rgb: 140, 106, 47;
}

[data-cat="merger"] {                           /* navy */
  --cat: var(--navy);
  --cat-ink: var(--navy);
  --cat-rgb: 22, 50, 79;
}

[data-cat="investigation"] {                    /* oxblood */
  --cat: #7A2E2E;
  --cat-ink: #6B2626;
  --cat-rgb: 122, 46, 46;
}

[data-cat="consumer"] {                         /* forest */
  --cat: var(--success);
  --cat-ink: #245942;
  --cat-rgb: 47, 107, 79;
}

[data-cat="all"] {
  --cat: var(--navy);
  --cat-ink: var(--navy);
  --cat-rgb: 22, 50, 79;
}

/* --------------------------------------------------------------------------
   1. CASE ARCHIVE: notice + sticky toolbar
   -------------------------------------------------------------------------- */

.archive-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.archive-notice > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: .22rem;
  color: var(--accent-deep);
  stroke-width: 1.7;
}

.archive-notice p { margin: 0; line-height: 1.62; }

.cases-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  margin-bottom: 1.75rem;
  padding: 1rem 0 .9rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}

@supports not (backdrop-filter: blur(1px)) {
  .cases-toolbar { background: var(--paper); }
}

.cases-toolbar.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgba(19, 26, 36, .05);
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1rem;
  align-items: center;
}

.toolbar-row + .toolbar-row { margin-top: .85rem; }

/* Search ------------------------------------------------------------------ */
.case-search {
  position: relative;
  flex: 1 1 21rem;
  min-width: 14rem;
}

.case-search > svg {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--ink-faint);
  stroke-width: 1.8;
  pointer-events: none;
}

.case-search input[type="search"] {
  padding-left: 2.9rem;
  padding-right: 2.75rem;
  border-radius: 999px;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
  appearance: none;
}

.case-search input[type="search"]::-webkit-search-decoration,
.case-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-clear {
  position: absolute;
  right: .55rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

.search-clear[hidden] { display: none; }
.search-clear:hover { background: var(--paper-2); color: var(--ink); }
.search-clear svg { width: 14px; height: 14px; stroke-width: 2; }

/* Sort -------------------------------------------------------------------- */
.toolbar-sort {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
}

.toolbar-sort label { margin: 0; white-space: nowrap; }

.toolbar-sort select {
  width: auto;
  padding: .58rem 2.5rem .58rem 1rem;
  font-size: .92rem;
  font-weight: 500;
  border-radius: 999px;
  border-color: var(--line);
}

/* Filter pills ------------------------------------------------------------ */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-pills li { margin: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: color .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease);
}

.pill:hover { color: var(--ink); border-color: var(--line-strong); }

.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Category swatch, same rotated square as the practice-area bullets. */
.pill[data-cat]:not([data-cat="all"])::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--cat, var(--accent));
  border-radius: 2px;
  transform: rotate(45deg);
  transition: background-color .18s var(--ease);
}

.pill[aria-pressed="true"] {
  color: #fff;
  background: var(--cat-ink, var(--navy));
  border-color: var(--cat-ink, var(--navy));
}

.pill[aria-pressed="true"]::before { background: rgba(255, 255, 255, .85); }

.pill[disabled] { opacity: .45; cursor: not-allowed; }

.pill-count {
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

.results-count { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.results-count strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* A to Z letter rail ------------------------------------------------------ */
.toolbar-row.toolbar-row--rail {
  gap: .5rem 1.5rem;
  margin-top: .8rem;
  padding-top: .35rem;
  padding-bottom: .05rem;
  border-top: 1px solid var(--line);
}

.letter-rail { flex: 1 1 20rem; min-width: 0; }
.letter-rail[hidden] { display: none; }

.letter-rail-list {
  position: relative;          /* offsetParent for the keep-in-view maths */
  display: flex;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.letter-rail-list::-webkit-scrollbar { display: none; }
.letter-rail-list li { flex: 0 0 auto; margin: 0; }

.letter-btn {
  display: block;
  min-width: 1.6rem;
  padding: .3rem .12rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-soft);
  border-radius: 7px;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}

.letter-btn:hover:not([disabled]) {
  color: var(--accent-deep);
  background: rgba(140, 106, 47, .12);
}

.letter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.letter-btn[disabled] { color: var(--ink-faint); opacity: .35; cursor: default; }

.letter-btn[aria-current="true"] {
  color: #fff;
  background: var(--accent-deep);
}

.toolbar-row--rail .results-count { flex: 0 0 auto; margin-left: auto; }

/* --------------------------------------------------------------------------
   1b. ARCHIVE AT A GLANCE

   Two graphics, both drawn with plain elements: a stacked share-of-archive bar
   and a matters-by-year strip. cases.js supplies --w (segment width), --h (bar
   height) and --i (stagger index); the growth animation lives here and only
   runs once .is-in lands.
   -------------------------------------------------------------------------- */

.archive-glance {
  overflow: hidden;
  margin: 0 0 1.9rem;
  padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.25rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 1.6rem);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(140, 106, 47, .07), transparent 58%),
    linear-gradient(168deg, var(--paper-2), var(--paper) 72%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.archive-glance[hidden] { display: none; }
.archive-glance.is-in { opacity: 1; transform: none; }
.glance-eyebrow { margin: 0 0 1.15rem; }

.glance-grid { display: grid; gap: 1.5rem; }

.glance-block + .glance-block {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 60rem) {
  .glance-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 0;
    align-items: start;
  }

  .glance-block + .glance-block {
    margin-left: 2.6rem;
    padding-top: 0;
    padding-left: 2.6rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.glance-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem .9rem;
  margin-bottom: .95rem;
}

.glance-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.glance-meta {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.glance-meta strong { color: var(--ink); font-weight: 600; }

/* Stacked distribution bar ------------------------------------------------ */
.glance-bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  background: var(--paper-3);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(19, 26, 36, .06);
}

.glance-seg {
  flex: 0 0 auto;
  width: 0;
  height: 100%;
  background: var(--cat, var(--accent));
  transition: width .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.glance-seg + .glance-seg { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .6); }
.archive-glance.is-in .glance-seg { width: var(--w, 0%); }

.glance-legend {
  display: grid;
  gap: .5rem;
  margin: 1.05rem 0 0;
  padding: 0;
  list-style: none;
}

.glance-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .87rem;
}

.glance-swatch {
  width: 8px;
  height: 8px;
  background: var(--cat, var(--accent));
  border-radius: 2px;
  transform: rotate(45deg);
}

.glance-legend-label {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
  color: var(--ink);
}

.glance-legend-label::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-.28em);
}

.glance-legend-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cat-ink, var(--ink));
}

.glance-legend-pct {
  min-width: 2.5rem;
  font-size: .8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

/* Matters by year --------------------------------------------------------- */
.glance-years {
  --track: 84px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: clamp(2px, .7vw, 7px);
  margin: 0;
  padding: 0;
  list-style: none;
  /* the baseline rule, drawn across the full width at the foot of the bars */
  background-image: linear-gradient(var(--line-strong), var(--line-strong));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 var(--track);
}

.glance-year { position: relative; margin: 0; }

.glance-year-hit {
  position: relative;
  display: block;
  width: 100%;
  height: var(--track);
  padding: 0;
  border-radius: 5px 5px 0 0;
}

.glance-year-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.glance-year.is-empty .glance-year-hit { cursor: default; }

.glance-year-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border-radius: 4px 4px 0 0;
  transition: height .75s var(--ease), filter .18s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.archive-glance.is-in .glance-year-bar { height: var(--h, 0%); }
.glance-year:not(.is-empty) .glance-year-bar { min-height: 4px; }

.archive-glance .glance-year.is-empty .glance-year-bar {
  height: 2px;
  background: var(--line-strong);
}

button.glance-year-hit:hover .glance-year-bar,
button.glance-year-hit:focus-visible .glance-year-bar { filter: brightness(.88); }

.glance-year-label {
  display: block;
  padding-top: .42rem;
  font-size: .68rem;
  letter-spacing: .02em;
  text-align: center;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.glance-year-label::before { content: "\2019"; }
.glance-year-hit:hover ~ .glance-year-label { color: var(--ink); }

.glance-year-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 8px);
  z-index: 3;
  padding: .28rem .55rem;
  font-size: .7rem;
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  background: var(--ink);
  border-radius: 7px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 5px);
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease),
              visibility 0s linear .16s;
}

.glance-year-tip b { font-weight: 600; letter-spacing: .03em; }

.glance-year-hit:hover .glance-year-tip,
.glance-year-hit:focus-visible .glance-year-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* Keep the first and last tooltips inside the band. */
.glance-year:first-child .glance-year-tip { left: 0; transform: translate(0, 5px); }
.glance-year:first-child .glance-year-hit:hover .glance-year-tip,
.glance-year:first-child .glance-year-hit:focus-visible .glance-year-tip { transform: translate(0, 0); }
.glance-year:last-child .glance-year-tip { left: auto; right: 0; transform: translate(0, 5px); }
.glance-year:last-child .glance-year-hit:hover .glance-year-tip,
.glance-year:last-child .glance-year-hit:focus-visible .glance-year-tip { transform: translate(0, 0); }

.glance-note {
  margin: .9rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   2. CASE ARCHIVE: cards
   -------------------------------------------------------------------------- */

.cases-grid {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases-grid > li { margin: 0; }

.case-card {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
  /* --toolbar-h is measured and published by cases.js; the fallback covers the
     window before it runs. Keeps deep-linked cards clear of the sticky bar. */
  scroll-margin-top: calc(var(--header-h) + var(--toolbar-h, 12.5rem) + 1rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s var(--ease), box-shadow .26s var(--ease),
              transform .26s var(--ease);
}

/* Category accent, a hairline down the leading edge of every card. */
.case-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: .9rem;
  bottom: .9rem;
  width: 3px;
  background: var(--cat, var(--accent));
  border-radius: 0 3px 3px 0;
  opacity: .5;
  transition: opacity .22s var(--ease);
}

.case-card[hidden] { display: none; }
.case-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.case-card:hover::before { opacity: 1; }

.case-card.is-open {
  content-visibility: visible;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.case-card.is-open::before { opacity: 1; }

/* Entrance animation. Cards are injected after main.js has already collected
   its .reveal set, so the archive runs its own observer (see cases.js). */
.cases-grid.js-anim .case-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              border-color .22s var(--ease), box-shadow .26s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.cases-grid.js-anim .case-card.is-in { opacity: 1; transform: none; }

/* Slight lift on hover. Declared after the entrance rules so it outranks the
   .is-in transform reset, and with its own zero delay so it never inherits the
   stagger (cases.js also drops --reveal-delay once a card has landed). */
.cases-grid.js-anim .case-card.is-in:hover {
  transform: translateY(-2px);
  transition-delay: 0s;
}

/* Card header. The button carries only the company name so its accessible
   name stays short; a stretched ::after makes the whole header clickable. */
.case-card-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem 1.25rem;
  padding: 1.3rem 1.45rem;
  cursor: pointer;
}

.case-head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .7rem;
}

.case-heading { margin: 0; }

.case-toggle {
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
  text-align: left;
  color: var(--ink);
}

.case-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.case-toggle:focus { outline: none; }
.case-toggle:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Chips take the category signature at low alpha, never a solid block. */
.cat-chip {
  border-color: rgba(var(--cat-rgb, 140, 106, 47), .3);
  background: rgba(var(--cat-rgb, 140, 106, 47), .09);
  color: var(--cat-ink, var(--accent-deep));
}

.case-summary {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  max-width: 64ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.case-chevron {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  width: 34px;
  height: 34px;
  padding: 8px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-radius: 999px;
  transition: transform .32s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
}

.case-card-head:hover .case-chevron,
.case-card.is-open .case-chevron {
  background: rgba(var(--cat-rgb, 140, 106, 47), .12);
  color: var(--cat-ink, var(--accent-deep));
}

.case-card.is-open .case-chevron { transform: rotate(180deg) scale(1.04); }

/* Expanding panel: grid-template-rows, so no JS height measurement. */
.case-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease);
}

.case-card.is-open .case-panel { grid-template-rows: 1fr; }

.case-panel-inner {
  overflow: hidden;
  visibility: hidden;
  /* Category tint, kept at 4% so the body copy contrast is untouched. */
  background: rgba(var(--cat-rgb, 140, 106, 47), .04);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: visibility 0s linear .42s;
}

.case-card.is-open .case-panel-inner { visibility: visible; transition-delay: 0s; }

.case-panel-body {
  margin: 0 1.45rem;
  padding: .3rem 0 1.6rem;
  border-top: 1px solid var(--line);
}

.case-facts {
  display: grid;
  gap: .5rem 1.5rem;
  margin: 1.2rem 0 0;
}

.case-facts > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .2rem 1rem;
  align-items: baseline;
}

@media (max-width: 32rem) {
  .case-facts > div { grid-template-columns: minmax(0, 1fr); }
}

.case-facts dt {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.case-facts dd { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ink); }

.case-body {
  margin-top: 1.2rem;
  max-width: 72ch;
  font-size: .97rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.case-body > :first-child { margin-top: 0; }
.case-body > :last-child { margin-bottom: 0; }
.case-body p { margin: 0 0 1em; }
.case-body strong { color: var(--ink); font-weight: 600; }
.case-body ul, .case-body ol { margin: 0 0 1em; padding-left: 1.25rem; }
.case-body li { margin-bottom: .35em; color: inherit; }
.case-body h2, .case-body h3, .case-body h4 {
  margin: 1.5em 0 .5em;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

.case-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.15rem;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.case-cta p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
}

/* States ------------------------------------------------------------------ */
.cases-status {
  margin: 2.5rem 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cases-status[hidden] { display: none; }
.cases-status h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.cases-status p { margin: 0 auto; max-width: 48ch; color: var(--ink-soft); font-size: .96rem; }
.cases-status .btn { margin-top: 1.35rem; }

.cases-loading { display: grid; gap: .85rem; }

.skeleton-card {
  height: 120px;
  background: linear-gradient(100deg, var(--paper-2) 30%, #FAF8F3 50%, var(--paper-2) 70%);
  background-size: 220% 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  animation: skeletonPan 1.4s ease-in-out infinite;
}

@keyframes skeletonPan {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* Back to top ------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(19, 26, 36, .2);
  opacity: 0;
  visibility: hidden;                 /* also keeps it out of the tab order */
  transform: translateY(10px) scale(.94);
  transition: opacity .26s var(--ease), transform .26s var(--ease),
              background-color .18s var(--ease), visibility 0s linear .26s;
}

.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.to-top:hover { background: var(--accent-deep); }
.to-top:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.to-top svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   3. PRACTICE AREAS: layout, scrollspy nav, sections
   -------------------------------------------------------------------------- */

.practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}

@media (min-width: 62rem) {
  .practice-layout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 15;
  padding: .8rem 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
}

@supports not (backdrop-filter: blur(1px)) {
  .section-nav { background: var(--paper); }
}

.section-nav-title { display: none; margin: 0 0 .9rem; }

.section-nav ol {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0 0 .2rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.section-nav ol::-webkit-scrollbar { display: none; }
.section-nav li { margin: 0; }

.section-nav a {
  display: block;
  padding: .5rem 1.05rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease);
}

.section-nav a:hover { color: var(--ink); border-color: var(--line-strong); }
.section-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.section-nav a[aria-current="true"] {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

@media (min-width: 62rem) {
  .section-nav {
    top: calc(var(--header-h) + 2.5rem);
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .section-nav-title { display: block; }

  .section-nav ol {
    display: block;
    overflow: visible;
    border-left: 1px solid var(--line);
  }

  .section-nav li + li { margin-top: .1rem; }

  .section-nav a {
    padding: .55rem 0 .55rem 1.05rem;
    margin-left: -1px;
    white-space: normal;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
  }

  .section-nav a[aria-current="true"] {
    color: var(--ink);
    font-weight: 600;
    background: none;
    border-left-color: var(--accent);
  }
}

.practice-section {
  scroll-margin-top: calc(var(--header-h) + 5.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
}

.practice-section + .practice-section {
  padding-top: clamp(2.75rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 62rem) {
  .practice-section { scroll-margin-top: calc(var(--header-h) + 3rem); }
}

/* Numbered eyebrows carry each area's signature colour, the same four the case
   archive uses, plus graphite for the arbitration practice. */
.eyebrow[data-accent] { color: var(--eyebrow-c, var(--accent-deep)); }
.eyebrow[data-accent]::before { background: var(--eyebrow-c, var(--accent)); }

.eyebrow[data-accent="bronze"]   { --eyebrow-c: var(--accent-deep); }
.eyebrow[data-accent="navy"]     { --eyebrow-c: var(--navy); }
.eyebrow[data-accent="oxblood"]  { --eyebrow-c: #6B2626; }
.eyebrow[data-accent="graphite"] { --eyebrow-c: #3D4A5C; }
.eyebrow[data-accent="forest"]   { --eyebrow-c: #245942; }

.practice-section h2 {
  margin: 0 0 1.35rem;
  font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.15rem);
  line-height: 1.15;
}

.practice-section h2:focus { outline: none; }

.practice-list {
  list-style: none;
  margin: 0 0 1.3em;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.practice-list li {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
  color: var(--ink-soft);
}

.practice-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

.practice-list b { display: block; color: var(--ink); font-weight: 600; }

.practice-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.35rem;
  margin-top: 2rem;
  padding: 1.4rem 1.55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.practice-cta p {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   4. CONTACT: layout, sidebar, form errors
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
}

@media (min-width: 64rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 3.5rem;
    align-items: start;
  }

  .contact-aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

.contact-aside { display: grid; gap: 1rem; }

.info-card--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.info-card--navy .info-card-head { background: var(--navy-deep); border-bottom-color: rgba(255, 255, 255, .14); }
.info-card--navy h3 { color: #fff; }
.info-card--navy p { color: rgba(255, 255, 255, .84); }

.office-list { display: grid; gap: 1.15rem; margin: 0; font-style: normal; }

.office-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}

.office-item > svg {
  width: 18px;
  height: 18px;
  margin-top: .25rem;
  color: var(--accent);
  stroke-width: 1.7;
}

.office-label {
  display: block;
  margin-bottom: .1rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.office-value { font-size: .97rem; line-height: 1.55; color: var(--ink); }
.office-value a { font-weight: 500; }

.next-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.next-steps li { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--ink-soft); }

/* Form cards get a 3px top accent: bronze for the case evaluation, navy for the
   general enquiry, matching the archive palette. */
.form-card--accent,
.form-card--navy {
  border-top-width: 3px;
  border-top-style: solid;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.form-card--accent { border-top-color: var(--accent); }
.form-card--navy { border-top-color: var(--navy); }

/* Form groups ------------------------------------------------------------- */
.form-fieldset + .form-fieldset {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.form-fieldset > legend { margin-bottom: 1.15rem; color: var(--accent-deep); }

.form-block + .form-block {
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line);
}

.form-block > h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); }
.form-block > .lede { margin-bottom: 1.75rem; font-size: 1.02rem; }

/* Validation -------------------------------------------------------------- */
.field-error {
  display: none;
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: #8E2D25;
}

.field-error.is-shown { display: block; }

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: #A3352C;
  background-color: #FDF7F6;
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  border-color: #A3352C;
  box-shadow: 0 0 0 3px rgba(163, 53, 44, .16);
}

.form-error-summary {
  margin-bottom: 1.6rem;
  padding: 1.05rem 1.3rem;
  background: #FDF7F6;
  border: 1px solid #E4C4C0;
  border-left: 3px solid #A3352C;
  border-radius: 10px;
}

.form-error-summary[hidden] { display: none; }
.form-error-summary:focus-visible { outline: 2px solid #A3352C; outline-offset: 2px; }

.form-error-summary h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  color: #8E2D25;
}

.form-error-summary ul { margin: 0; padding-left: 1.15rem; font-size: .89rem; }
.form-error-summary li { color: #8E2D25; margin-bottom: .25rem; }
.form-error-summary a { color: inherit; }

.form-disclaimer {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  font-size: .88rem;
}

.form-disclaimer p { margin: 0; }
.form-disclaimer p + p { margin-top: .7em; }

/* --------------------------------------------------------------------------
   5. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cases-grid.js-anim .case-card,
  .cases-grid.js-anim .case-card.is-in:hover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .case-panel,
  .case-panel-inner,
  .case-chevron,
  .cases-toolbar,
  .skeleton-card,
  .glance-seg,
  .glance-year-bar,
  .glance-year-tip,
  .letter-btn,
  .to-top {
    transition: none !important;
    animation: none !important;
  }

  .archive-glance {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .case-card.is-open .case-chevron { transform: rotate(180deg); }
  .letter-rail-list { scroll-behavior: auto; }
  .to-top { transform: none; }
}


/* ===================================================================
   Mobile polish pass (v2): compact sticky archive toolbar.
   On phones the toolbar collapses to one search/sort row plus a single
   horizontally swipeable pill row, so it stops eating the viewport.
   =================================================================== */
@media (max-width: 880px) {
  .cases-toolbar { padding-top: .6rem; padding-bottom: .55rem; }
  .toolbar-row + .toolbar-row { margin-top: .55rem; }

  /* search + sort share one row */
  .cases-toolbar .toolbar-row:first-child {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    align-items: center;
  }
  .cases-toolbar .case-search { flex: 1 1 auto; min-width: 0; }
  .cases-toolbar .toolbar-sort { flex: 0 0 auto; }
  .cases-toolbar .toolbar-sort label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cases-toolbar .toolbar-sort select { max-width: 138px; }

  /* pills: single swipeable row, edge-to-edge */
  .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 2px;
  }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pills .pill { white-space: nowrap; flex: 0 0 auto; }

  .results-count { font-size: .84rem; }

  /* letter rail: full-width swipeable strip, count sits under it */
  .toolbar-row.toolbar-row--rail {
    margin-top: .5rem;
    padding-top: .3rem;
    gap: .3rem .75rem;
  }

  .letter-rail { flex: 1 1 100%; }

  /* edge to edge swipe, matching the pill row above it */
  .letter-rail-list {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .letter-btn { min-width: 1.45rem; padding: .26rem .1rem; }

  .toolbar-row--rail .results-count { margin-left: 0; }
}

/* ===================================================================
   Mobile polish pass (v3): archive at a glance on small screens.
   The band stacks, the year track shortens, and the legend tightens
   so the whole thing still reads at 390px.
   =================================================================== */
@media (max-width: 40rem) {
  .archive-glance { margin-bottom: 1.5rem; }
  .glance-grid { gap: 1.35rem; }
  .glance-legend-item { gap: .45rem; font-size: .82rem; }
  .glance-legend-pct { min-width: 2.2rem; }
  .glance-years { --track: 64px; gap: 2px; }
  .glance-year-label { font-size: .62rem; padding-top: .35rem; }
  .to-top { width: 42px; height: 42px; }
}