/* ==========================================================================
   Calder & Roche Injury Law (fictional demo, fm-aithor law build) - stylesheet
   Chalk editorial layout system, carried over verbatim from the donor theme
   Type: Brygada 1918 (display 600 + italic) / Glory (body)
   ========================================================================== */

/* ---------- fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: "Brygada 1918";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/brygada1918-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Brygada 1918";
  font-style: italic;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/brygada1918-latin-italic-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- Latin Extended and Cyrillic, phase C item 2 ------------------------
   The two original files are Latin-only subsets, so Polish diacritics fell
   back per character inside otherwise Brygada or Glory words (visible at h1
   size) and Cyrillic fell back wholesale to the OS stack. These are the
   matching open-licence subsets of the SAME two families, self hosted, each
   scoped with unicode-range so a page only fetches the scripts it prints.
   They carry font-display: swap rather than optional: an optional face that
   is not preloaded is skipped for that page load, which is the bug itself.
   Glory has no Cyrillic at all, so the Cyrillic body and UI face is Onest,
   chosen next to Glory at 16px and 13.6px (x-height 8.4 against 7.6, width
   +20%) and corrected with size-adjust so the two sit at the same size. */
@font-face {
  font-family: "Brygada 1918";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/brygada1918-latinext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Brygada 1918";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/brygada1918-latinext-italic-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Brygada 1918";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/brygada1918-cyrillic-var.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Glory";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/glory-latinext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 90%;
  src: url("../fonts/onest-cyrillic-var.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Glory";
  font-style: normal;
  font-weight: 100 800;
  font-display: optional;
  src: url("../fonts/glory-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  /* palette: Chalk / Ash / Obsidian / Graphite / Slate / Stone / Ember */
  --paper: #f0f0f0;          /* Chalk        page canvas          */
  --paper-2: #e4e4e4;        /* Ash          shelf / recessed      */
  --face: rgba(255, 255, 255, 0.72); /* Veil  floating card face   */
  --ink: #0a0a0a;            /* Obsidian     display + headings    */
  --dark: #151619;           /* Graphite     dark panels           */
  --body: #4b4b4b;           /* Slate        body copy 7.4:1       */
  --muted: #666666;          /* Stone        labels 4.9:1          */
  --accent: #c22800;         /* Ember        accent on light 4.9:1 */
  --accent-lift: #ff5a2b;    /* Ember Glow   accent on dark 5.8:1  */
  --on-dark: #f0f0f0;        /* Chalk on Graphite 18.1:1           */
  --on-dark-2: rgba(240, 240, 240, 0.78); /* 11.2:1               */
  --line: rgba(10, 10, 10, 0.14);
  --line-soft: rgba(10, 10, 10, 0.08);
  --line-dark: rgba(240, 240, 240, 0.16);
  --rule: rgba(0, 0, 0, 0.2); /* Rule        dashed rails + band rules   */
  --ghost: #6b6b6b;         /* Mist        ghosted client wall 4.5:1  */

  /* type: a three step ladder, one step per responsive tier */
  --display: "Brygada 1918", "Iowan Old Style", Georgia, serif;
  --ui: "Glory", "Onest", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: 67.2px;
  --fs-h2: 56px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --lh-h4: 1.35;
  --fs-quote: 28.8px;
  --lh-quote: 1.3;
  --fs-lead: 17.6px;
  --fs-body: 16px;
  --fs-sm: 14.4px;
  --fs-micro: 11.2px;
  --tr-display: -0.04em;

  /* structure */
  --shell: 1480px;
  --rail: 40px;    /* dashed rail inset, measured from the shell edge   */
  --gutter: 40px;  /* content inset, measured from the rail            */
  --hdr-h: 69px;
  --hdr-pad: 0px;  /* extra header inset beyond the rail               */
  --r-shelf: 20px;
  --r-tile: 15px;
  --r-cell: 10px;
  --r-pill: 50px;
  --pad-shelf: 5px;
  --gap-tile: 5px;
  --sec-y: 92px;

  /* motion */
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.55s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; color: var(--ink); letter-spacing: var(--tr-display); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: 1.05; }
h3 { font-size: var(--fs-h3); line-height: 1.1; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; z-index: 90; background: var(--dark); color: var(--on-dark); padding: 10px 16px; border-radius: 0 0 var(--r-cell) 0; }
.skip:focus { left: 0; }

/* grain: fine paper tooth over the WHOLE canvas, images and header included.
   It has to be the top layer: anything it cannot reach reads as a lighter
   rectangle against the grained page (that is what boxed the hero figure). */
.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPSczJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzAuMzUnLz48L3N2Zz4=");
}

/* ---------- shell + rails ----------
   The rails are a pair of dashed hairlines that run the FULL height of every
   band, top of page to the foot of the footer, so they read as one continuous
   pair behind the whole document. They sit at the shell's content edge, which
   is why they are painted per band rather than once: a band is full bleed, the
   shell is capped. Content sits one more --gutter inside them. */
.shell { position: relative; max-width: var(--shell); margin: 0 auto; padding: 0 var(--rail); }
.wrap { position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter); }
section { position: relative; z-index: 2; }

.hero, .band, .strip, .mq, .ftr { position: relative; }
.hero::before, .band::before, .strip::before, .mq::before, .ftr::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(max(0px, (100% - var(--shell)) / 2) + var(--rail));
  right: calc(max(0px, (100% - var(--shell)) / 2) + var(--rail));
  border-left: 1px dashed var(--rule);
  border-right: 1px dashed var(--rule);
  pointer-events: none;
  z-index: 0;
}
/* full bleed dashed rule between bands */
.band { border-top: 1px dashed var(--rule); padding: var(--sec-y) 0; }
.band--flush { padding-top: 0; }
.band--inner { padding-top: 73px; }
.band--contact { padding-bottom: 218px; }
.band--faqtight { padding-top: 18px; padding-bottom: 18px; }
.band--faqtight .head--center { margin-bottom: 26px; }
.band--inner > .shell > .wrap > h1 { max-width: 600px; }
.contact__l h1 { max-width: 615px; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--hdr-h); background: var(--paper); }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--rule); pointer-events: none; }
.hdr__in { display: flex; align-items: center; gap: 24px; height: 49px; margin: 10px auto 0; max-width: var(--shell); padding: 0 calc(var(--rail) + var(--hdr-pad)); }
.mark { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mark__glyph { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); display: grid; place-items: center; flex-shrink: 0; }
.mark__glyph svg { width: 15px; height: 15px; color: var(--paper); }
.mark__word { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 0; margin: 0 auto; }
.nav a {
  position: relative; font-size: var(--fs-sm); font-weight: 500; color: var(--body);
  padding: 6px 2px; transition: color var(--t-base) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); margin: 0 14px; flex-shrink: 0; }
.hdr .btn { flex-shrink: 0; }
/* two 20x2 bars 7px apart inside a 39px dashed disc: the reference's own burger */
.burger {
  display: none; width: 39px; height: 39px; flex-shrink: 0; margin-left: auto;
  align-items: center; justify-content: center; border-radius: 50%;
  border: 1px dashed var(--rule); background: rgba(10, 10, 10, 0.035);
}
.burger span { display: block; width: 20px; height: 2px; background: transparent; position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); transition: transform var(--t-base) var(--ease); }
.burger span::before { top: -3.5px; }
.burger span::after { top: 3.5px; }
.burger[aria-expanded="true"] span::before { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-3.5px) rotate(-45deg); }
.panel { display: none; }

/* page starts under the fixed header */
.page { padding-top: var(--hdr-h); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 49px; padding: 0 22px; border-radius: var(--r-pill);
  font-family: var(--ui); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.975); }
.btn--dark { background: var(--dark); color: var(--on-dark); }
.btn--dark:hover { background: #23252a; }
.btn--dark .btn__dot { background: var(--accent-lift); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--face); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); flex-shrink: 0; transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease); }
.btn:hover .btn__dot { width: 11px; height: 11px; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 13.6px; }

/* ---------- small parts ---------- */
.eyebrow {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: 100px; border: 1px solid var(--line); background: var(--face);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow b { color: var(--ink); font-weight: 600; }
.flag {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 12px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--face);
  font-size: 13.6px; font-weight: 500; color: var(--body);
}
.flag__new { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; }
.flag__new svg { width: 13px; height: 13px; }
.flag__arrow { width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; color: var(--ink); }
.flag__arrow svg { width: 12px; height: 12px; }
.tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 100px;
  background: var(--paper); border: 1px solid var(--line-soft);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; color: var(--body); }
.ital { font-style: italic; }
.num { font-family: var(--display); font-weight: 600; letter-spacing: var(--tr-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; }
.bars i { width: 2px; background: var(--accent); border-radius: 1px; }
.bars i:nth-child(1) { height: 5px; }
.bars i:nth-child(2) { height: 8px; }
.bars i:nth-child(3) { height: 11px; }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 14px; height: 14px; }

/* shelves + tiles (concentric 20 / 15 / 10) */
.shelf { background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.tile { background: var(--paper); border-radius: var(--r-tile); }
.tile--face { background: var(--face); }
.tile--dark { background: var(--dark); color: var(--on-dark-2); }
.tile--dark h2, .tile--dark h3, .tile--dark h4, .tile--dark .num { color: var(--on-dark); }
.tile--dark .label { color: rgba(240, 240, 240, 0.66); }
.tile--dark .tile h3, .tile--dark .tile h4, .tile--dark .tile p { color: initial; }
.pad { padding: 28px; }
.pad-sm { padding: 20px; }

.icon-tile { width: 44px; height: 44px; border-radius: var(--r-cell); display: grid; place-items: center; background: var(--paper-2); color: var(--ink); }
.icon-tile svg { width: 20px; height: 20px; }
.tile--dark .icon-tile { background: rgba(240, 240, 240, 0.1); color: var(--on-dark); }

/* ---------- section head (left h2, right lead) ---------- */
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; align-items: end; margin-bottom: 36px; }
.head__l > .eyebrow { margin-bottom: 22px; }
.head__r { padding-bottom: 6px; }
.head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 640px; margin: 0 auto 40px; }
.head--stack { grid-template-columns: 1fr; gap: 0; }
.head--stack .head__r { margin-top: 14px; max-width: 440px; padding: 0; }
.head__cta { display: flex; justify-content: flex-end; align-items: flex-end; }
/* stackHead pulls its CTA up beside the h2 at desktop. It was an inline style,
   which no media query could cancel, so at tablet and phone it landed on top of
   the lead paragraph. */
.head__cta--lift { margin-top: -58px; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 2; padding: 109px 0 25px; }
.hero--about { padding-bottom: 0; }
.hero--about h1 { margin-top: 39px; }
/* 6fr / 5fr with a 50px gutter: the reference's own hero split at every width */
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 50px; align-items: start; }
.hero__copy { padding-top: 0; min-width: 0; }
.hero .flag { margin-bottom: 25px; }
.hero h1 { margin-bottom: 25px; }
.hero__lead { max-width: 440px; margin-bottom: 25px; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 75px; }
.proof { display: flex; align-items: center; gap: 14px; }
.faces { display: flex; }
.faces span {
  width: 47px; height: 47px; border-radius: 50%; border: 2px solid var(--paper);
  margin-left: -23px; overflow: hidden; background: var(--paper-2); flex-shrink: 0;
}
.faces span:first-child { margin-left: 0; }
.faces img { width: 100%; height: 100%; object-fit: cover; }
.faces .faces__more {
  background: var(--dark); color: var(--on-dark); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
}
.proof__txt { font-family: var(--display); font-size: 16px; line-height: 1.3; font-weight: 500; letter-spacing: var(--tr-display); color: var(--ink); }
.proof__txt .stars { display: flex; margin-bottom: 3px; }

.stage { position: relative; margin-top: -78px; }
/* The well is a stage, not a photo frame: the orbit globe sits at the back with
   no panel and no edge, the alpha cut figure stands in front sized by HEIGHT
   (so her head, the raised hand and the scales are never cropped at any width),
   and the chips float over both. */
.stage__well { position: relative; min-height: 700px; background: none; }

.stage__globe {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  height: 70%; aspect-ratio: 1; max-width: 100%;
  color: var(--ink); opacity: 0.30; pointer-events: none; z-index: 0;
}
.stage__globe svg { width: 100%; height: 100%; overflow: visible; }

.stage__fig {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 94%; width: auto; max-width: none; z-index: 1;
  filter: drop-shadow(0 18px 26px rgba(10, 10, 10, 0.16));
}
.js .rz.stage__fig { transform: translateX(-50%) scale(1.045); transition: transform 0.75s var(--ease); }
.js .rz.stage__fig.in { transform: translateX(-50%); }
.chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 16px 0 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 8px 22px rgba(10, 10, 10, 0.07);
  font-size: 13.6px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.chip__glyph { width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; flex-shrink: 0; }
.chip__glyph svg { width: 14px; height: 14px; }
/* chip slots measured off the reference stage at each tier (desktop here) */
.chip--1 { top: 150px; right: 0; }
.chip--2 { top: 330px; left: 0; }
.chip--3 { top: 600px; right: 60px; }

/* ---------- ghost wall ----------
   Eight cells spanning the rails, each ghost name blurring out and its pair
   blurring in on a stagger. The reference does not slide this row; it swaps in
   place, so the cell grid stays locked to the rails at every width. */
.strip { border-top: 1px dashed var(--rule); overflow: hidden; }
.strip__track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, 1fr); }
.strip__cell { position: relative; height: 80px; overflow: hidden; border-right: 1px dashed var(--rule); }
.strip__cell:nth-child(8n) { border-right: 0; }
.strip__cell b {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 10px;
  font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ghost); filter: blur(0.3px); text-align: center;
}
.strip__cell b:nth-child(1) { animation: roll-a 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.strip__cell b:nth-child(2) { animation: roll-b 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.strip__cell:nth-child(2) b { animation-delay: 0.1s; }
.strip__cell:nth-child(3) b { animation-delay: 0.2s; }
.strip__cell:nth-child(4) b { animation-delay: 0.3s; }
.strip__cell:nth-child(5) b { animation-delay: 0.4s; }
.strip__cell:nth-child(6) b { animation-delay: 0.5s; }
.strip__cell:nth-child(7) b { animation-delay: 0.6s; }
.strip__cell:nth-child(8) b { animation-delay: 0.7s; }
/* Measured off the reference screen recording: 2.8s between swaps, each cell's
   swap runs 0.7s, cells ripple left to right 0.1s apart. The outgoing name
   rolls UP and blurs out while its pair rises in from below, blurred to sharp,
   both clipped by the cell. One full A-B-A loop is therefore 5.6s: 0 to 37.5%
   hold, 37.5 to 50% swap, 50 to 87.5% hold, 87.5 to 100% swap back. */
@keyframes roll-a {
  0%, 37.5% { transform: translateY(0); opacity: 1; filter: blur(0.3px); }
  50% { transform: translateY(-72%); opacity: 0; filter: blur(9px); }
  50.01%, 87.5% { transform: translateY(72%); opacity: 0; filter: blur(9px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0.3px); }
}
@keyframes roll-b {
  0%, 37.5% { transform: translateY(72%); opacity: 0; filter: blur(9px); }
  50%, 87.5% { transform: translateY(0); opacity: 1; filter: blur(0.3px); }
  100% { transform: translateY(-72%); opacity: 0; filter: blur(9px); }
}
@keyframes slide-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- about / capability shelf ---------- */
.about__shelf { display: grid; grid-template-columns: minmax(0, 370fr) minmax(0, 895fr); gap: var(--gap-tile); }
.about__figure { position: relative; border-radius: var(--r-tile); overflow: hidden; min-height: 535px; }
.about__figure img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.about__figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 10, 0.86) 0%, rgba(8, 8, 10, 0.5) 34%, rgba(8, 8, 10, 0.06) 66%); }
.about__figtop { position: absolute; top: 16px; left: 16px; z-index: 2; }
.about__figtop .tag { background: rgba(255, 255, 255, 0.9); }
.about__figbot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; }
.about__figbot h3 { color: #fff; margin-bottom: 4px; }
.about__figbot p { color: rgba(255, 255, 255, 0.86); font-size: var(--fs-body); }
.about__figstats { margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.about__figstats div { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.about__figstats div:last-child { border-bottom: 0; }
.about__figstats b { font-family: var(--display); font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.03em; }
.about__figstats span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.about__right { display: grid; grid-template-columns: minmax(0, 534fr) minmax(0, 356fr); grid-template-rows: 380px 1fr; gap: var(--gap-tile); }
.about__doing { padding: 26px; display: flex; flex-direction: column; }
.about__doing h3 { margin: 14px 0 auto; max-width: 330px; }
.about__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.about__metric { padding: 26px; display: flex; flex-direction: column; }
.about__metric .num { font-size: 40px; line-height: 1; }
.about__metricrow { display: flex; align-items: center; gap: 12px; }
.about__bar { margin-top: auto; }
.about__bar > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.about__bar em { font-style: normal; font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.about__track { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-bottom: 18px; }
.about__track i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.about__track--acc i { background: var(--accent); }
.about__plat { grid-column: 1 / -1; padding: 26px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; overflow: hidden; }
.about__platcopy { max-width: 330px; }
.about__platcopy .about__metricrow { margin-bottom: 10px; }
.about__rail { display: flex; gap: 8px; flex-shrink: 0; }
.about__rail span { width: 74px; height: 74px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; flex-shrink: 0; }
.about__rail span i { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--ink); }
.about__rail svg { width: 26px; height: 26px; }

/* ---------- services accordion ---------- */
.svc { display: flex; gap: 8px; min-height: 551px; }
.svc__panel {
  position: relative; border-radius: var(--r-tile); overflow: hidden; background: var(--paper);
  flex: 0 1 142px; transition: flex-grow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc__panel[aria-expanded="true"] { flex-grow: 1; }
.svc__closed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 0; cursor: pointer; width: 100%; }
.svc__panel[aria-expanded="true"] .svc__closed { opacity: 0; pointer-events: none; }
.svc__idx { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em; color: var(--accent); }
.svc__vert { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.svc__plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); }
.svc__plus svg { width: 12px; height: 12px; }
.svc__open { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s 0.1s var(--ease); pointer-events: none; }
.svc__panel[aria-expanded="true"] .svc__open { opacity: 1; pointer-events: auto; }
.svc__open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.48) 40%, rgba(8, 8, 10, 0) 74%); }
.svc__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px; max-width: 640px; opacity: 0; transition: opacity 0.55s 0.35s var(--ease); }
.svc__panel[aria-expanded="true"] .svc__body { opacity: 1; }
.svc__body .bars { margin-bottom: 14px; }
.svc__body h3 { color: #fff; font-size: 26px; margin-bottom: 10px; }
.svc__body p { color: rgba(255, 255, 255, 0.88); max-width: 430px; }
.svc__body ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.svc__body li { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; }

/* ---------- process ---------- */
.proc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 615px); gap: 56px; align-items: start; }
.proc__l .eyebrow { margin-bottom: 22px; }
.proc__l h2 { margin-bottom: 14px; }
.proc__l .lead { max-width: 400px; margin-bottom: 26px; }
.proc__step { display: flex; flex-direction: column; gap: var(--gap-tile); outline-offset: 3px; }
.proc__steps { display: flex; flex-direction: column; gap: var(--gap-tile);
  background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.proc__when { display: flex; align-items: center; justify-content: space-between;
  height: 42px; padding: 0 18px; border-radius: 16px; }
.proc__when, .proc__card { transition: background-color 0.45s var(--ease), color 0.45s var(--ease); }
.proc__step.is-on .proc__when { background: var(--dark); }
.proc__step.is-on .proc__when .label { color: rgba(240, 240, 240, 0.8); }
.proc__step.is-on .proc__card { background: var(--dark); color: var(--on-dark-2); }
.proc__step.is-on .proc__card h3 { color: var(--on-dark); }
.proc__step.is-on .proc__card .num { color: var(--accent-lift); }
.proc__step.is-on .proc__card p { color: var(--on-dark-2); }
.proc__when--dark { background: var(--dark); }
.proc__card { border-radius: 18px; min-height: 180px; }
.proc__when--dark .label { color: rgba(240, 240, 240, 0.8); }
.proc__card { padding: 26px; }
.proc__card .num { display: block; font-size: 24px; line-height: 1; margin-bottom: 16px; }
.proc__card h3 { margin-bottom: 8px; }
.proc__card p { max-width: 420px; }
.proc__card--dark .num { color: var(--accent-lift); }
.proc__card--dark p { color: var(--on-dark-2); }

/* ---------- case rows ---------- */
.cases { display: flex; flex-direction: column; gap: 15px; }
.case { display: grid; grid-template-columns: minmax(0, 633fr) minmax(0, 632fr); gap: var(--gap-tile);
  background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.case__fig { position: relative; border-radius: var(--r-tile); overflow: hidden; min-height: 502px; }
.case__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__col { display: grid; grid-template-rows: minmax(66px, auto) 1fr 1fr; grid-template-columns: 1fr 1fr; gap: var(--gap-tile); }
.case__name { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 22px; }
.case__name h2, .case__name h3 { font-size: 22px; line-height: 1.1; }
.case__cell { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 213px; }
.case__cell .num { font-size: 26px; line-height: 1; overflow-wrap: break-word; }
.case__cell .label { max-width: 190px; }
/* the practice-area row's fourth cell is the row's own call to action: the same
   tile, with the accent on the display line and an underline out on hover */
a.case__cell { transition: background-color var(--t-base) var(--ease); }
.case__cell--go .num { color: var(--accent); }
a.case__cell:hover { background: #fff; }
a.case__cell:hover .num { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- comparison ---------- */
.cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cmp__col { padding: 30px; border-radius: var(--r-tile); background: var(--face); border: 1px solid var(--line-soft); }
.cmp__col--win { background: var(--dark); border-color: var(--dark); }
.cmp__col h3 { font-size: 20px; margin-bottom: 20px; }
.cmp__col--win h3 { color: var(--on-dark); }
.cmp__col li { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--body); }
.cmp__col li:last-child { border-bottom: 0; }
.cmp__col--win li { border-bottom-color: rgba(240, 240, 240, 0.16); color: var(--on-dark-2); }
.cmp__col svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--muted); }
.cmp__col--win svg { color: var(--accent-lift); }

/* ---------- testimonial ---------- */
.quote { display: grid; grid-template-columns: minmax(0, 465fr) minmax(0, 697fr) minmax(0, 98fr); gap: var(--gap-tile); }
.quote__fig { border-radius: var(--r-tile); overflow: hidden; position: relative; min-height: 525px; }
.quote__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote__body { display: grid; grid-template-rows: 44px 1fr 76px; gap: var(--gap-tile); }
.quote__top { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.quote__top span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.quote__mid { display: flex; align-items: flex-end; padding: 30px; }
.quote__mid blockquote { margin: 0; font-family: var(--display); font-size: var(--fs-quote); line-height: var(--lh-quote); letter-spacing: -0.035em; color: var(--ink); }
.quote__who { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.quote__who b { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.quote__who em { font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
.quote__x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); }
.quote__x svg { width: 12px; height: 12px; }
.quote__rail { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--gap-tile); }
.quote__thumb { border-radius: var(--r-cell); overflow: hidden; position: relative; border: 2px solid transparent; padding: 0; }
.quote__thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.quote__thumb[aria-current="true"] { border-color: transparent; }
.quote__thumb:not([aria-current="true"]) img { filter: grayscale(1); opacity: 0.7; }

/* ---------- stat band ----------
   Four cells spanning the rails, each exactly 198px tall with a dashed right
   divider, and no section padding: the band IS the cell row. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 calc(var(--gutter) * -1); }
.stats__cell { display: flex; flex-direction: column; min-height: 198px; padding: 25px; border-right: 1px dashed var(--rule); }
.stats__cell:last-child { border-right: 0; }
.stats__row { display: flex; align-items: flex-start; justify-content: space-between; }
.stats__cell .num { font-size: 46px; line-height: 1; }
.stats__cell .num i { font-style: normal; color: var(--accent); }
.stats__cell .label { display: block; margin-top: auto; padding-top: 24px; }

/* ---------- pricing ---------- */
.price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.price__card { background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); display: flex; flex-direction: column; }
.price__head { background: var(--dark); border-radius: var(--r-tile); padding: 22px; }
.price__head h3 { color: var(--on-dark); margin-bottom: 4px; }
.price__head p { color: var(--on-dark-2); font-size: var(--fs-sm); }
.price__head .icon-tile { margin-bottom: 18px; }
.price__amt { display: flex; align-items: baseline; gap: 8px; margin-top: 52px; }
.price__amt b { font-family: var(--display); font-size: 32px; font-weight: 600; color: var(--on-dark); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price__amt > span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240, 240, 240, 0.7); }
.price__pop { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 100px; background: var(--paper); color: var(--ink); font-size: 10.4px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 10px; }
.price__inc { padding: 22px; flex: 1; }
.price__inc h4 { font-family: var(--ui); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: 0; margin-bottom: 14px; }
.price__inc li { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: var(--fs-sm); color: var(--body); }
.price__inc svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.price__card .btn { margin: 0 5px 5px; }
.toggle { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 6px 0 16px; border-radius: 100px; background: var(--paper-2); }
.toggle span { font-size: 13.6px; font-weight: 600; color: var(--ink); }
.toggle__sw { width: 42px; height: 24px; border-radius: 100px; background: var(--dark); position: relative; flex-shrink: 0; }
.toggle__sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); transition: transform var(--t-base) var(--ease); }
.toggle[aria-pressed="true"] .toggle__sw i { transform: translateX(18px); }
.toggle__off { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 100px; background: var(--paper); font-size: 13.6px; font-weight: 600; color: var(--muted); }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-tile); }
.team__card { background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.team__fig { border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 314 / 312; position: relative; }
.team__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team__meta { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; }
.team__meta b { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.team__meta .label { margin-top: 2px; }
.team__link { width: 30px; height: 30px; border-radius: var(--r-cell); background: var(--paper); display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.team__link svg { width: 14px; height: 14px; }
.hiring { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; }
.hiring__t { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hiring h3 { font-size: 20px; }

/* ---------- roles (about) ---------- */
.roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 612px); gap: 56px; align-items: start; }
.roles__list { display: flex; flex-direction: column; gap: var(--gap-tile); }
.role { background: var(--paper-2); border-radius: var(--r-tile); padding: var(--pad-shelf); }
.role__top { display: flex; align-items: center; justify-content: space-between; padding: 24px 20px; }
.role__top h3 { font-size: 20px; }
.role__arrow { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); }
.role__arrow svg { width: 15px; height: 15px; }
.role__tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 22px 20px; border-radius: var(--r-cell); background: var(--paper); }
.role__tags .tag { background: var(--paper-2); border-color: transparent; gap: 6px; }
.role__tags svg { width: 11px; height: 11px; color: var(--accent); }

/* ---------- values grid ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.values__cell { padding: 26px 24px; border-radius: var(--r-tile); background: var(--face); border: 1px solid var(--line-soft); }
.values__cell .icon-tile { margin-bottom: 44px; }
.values__cell h3 { font-size: 20px; margin-bottom: 8px; }
.values__cell p { font-size: var(--fs-sm); max-width: 240px; }

/* ---------- mission slab ---------- */
.mission { text-align: center; padding: 0 40px; }
.mission .eyebrow { margin-bottom: 30px; }
.mission p {
  font-family: var(--display); font-weight: 400; color: var(--muted);
  font-size: clamp(26px, 10px + 2vw, 40px); line-height: 1.32; letter-spacing: -0.03em;
  max-width: 1060px; margin: 0 auto;
}
.mission p b { font-weight: 600; color: var(--ink); }
.mission p i { font-style: italic; color: var(--ink); }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 615px); gap: 56px; align-items: start; }
.faq--center { grid-template-columns: 1fr; gap: 0; }
.faq--center .faq__list { max-width: none; margin: 0 auto; width: 100%; }
.faq__list { display: flex; flex-direction: column; gap: var(--gap-tile);
  background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.faq__item { border-radius: 16px; background: var(--paper); overflow: hidden; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 75px; padding: 0 24px; text-align: left; }
.faq__q h3 { font-size: 20px; }
.faq__q i { width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; flex-shrink: 0; color: var(--ink); }
.faq__q svg { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); }
.faq__item[data-open="true"] .faq__q svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease); }
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 24px 26px; max-width: 560px; font-size: var(--fs-sm); }

/* ---------- notes / blog ---------- */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.note { background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); display: block; transition: transform var(--t-base) var(--ease); }
.note:hover { transform: translateY(-3px); }
.note__fig { border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 16 / 10; position: relative; }
.note__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.note:hover .note__fig img { transform: scale(1.03); }
.note__meta { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px; }
.note__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.note h2, .note h3 { font-size: 20px; line-height: 1.22; padding: 0 16px 20px; max-width: 290px; }
.notes--wide { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
/* the related pair at the foot of an article: two cards, so the row does not
   leave an empty third cell */
.notes--pair { grid-template-columns: repeat(2, 1fr); }
.filters { display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 5px; border-radius: 35px; background: var(--paper-2); }
.filters button { height: 34px; padding: 0 16px; border-radius: 30px; font-size: 13.6px; font-weight: 600; color: var(--body); transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.filters button[aria-pressed="true"] { background: var(--dark); color: var(--on-dark); }
.filters button:hover:not([aria-pressed="true"]) { background: var(--paper); color: var(--ink); }

/* ---------- article ---------- */
.art { max-width: 760px; margin: 0 auto; }
.art__fig { border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 16 / 8; position: relative; margin-bottom: 40px; }
.art__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art__body h2 { font-size: 30px; margin: 38px 0 12px; }
.art__body p { margin-bottom: 18px; }
.art__body ul { margin: 0 0 22px; }
.art__body li { display: flex; gap: 12px; padding: 7px 0; }
.art__body li svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; margin-top: 5px; }
/* links inside long-form body copy have to read as links (the 404 list) */
.art__body p a, .art__body li a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.art__body p a:hover, .art__body li a:hover { color: var(--ink); }
.art__note { padding: 22px 24px; border-radius: var(--r-tile); background: var(--face); border: 1px solid var(--line-soft); font-size: var(--fs-sm); margin: 30px 0; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 615px); gap: 50px; align-items: start; }
.contact__l h1 { margin-bottom: 20px; }
.contact__l .lead { max-width: 400px; }
.contact__facts { margin-top: 110px; padding: 6px 24px; border-radius: var(--r-tile); background: var(--dark); max-width: 382px; }
.contact__facts div { padding: 18px 0; border-bottom: 1px dashed rgba(240, 240, 240, 0.22); }
.contact__facts div:last-child { border-bottom: 0; }
.contact__facts .label { color: rgba(240, 240, 240, 0.66); display: block; margin-bottom: 6px; }
.contact__facts b { font-family: var(--ui); font-size: var(--fs-body); font-weight: 500; color: var(--on-dark); }
.form { background: var(--paper-2); border-radius: var(--r-shelf); padding: 24px; }
.form__row { margin-bottom: 16px; }
.form label.label { display: block; margin-bottom: 7px; }
.form input, .form textarea, .form select {
  width: 100%; height: 48px; padding: 0 16px; border-radius: var(--r-cell);
  border: 1px solid transparent; background: var(--paper); color: var(--ink);
  font-family: var(--ui); font-size: var(--fs-body);
  transition: border-color var(--t-base) var(--ease);
}
/* the language select: same field as the inputs, with the layout's own chevron
   drawn in rather than the platform arrow */
.form select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px;
}
.form textarea { height: 116px; padding: 14px 16px; resize: vertical; line-height: 1.45; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--ink); outline: none; }
.form__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.form__seg button { height: 48px; border-radius: var(--r-cell); background: var(--paper); font-size: var(--fs-sm); font-weight: 600; color: var(--body); transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.form__seg button[aria-pressed="true"] { background: var(--dark); color: var(--on-dark); }
.form .btn { width: 100%; margin-top: 6px; }
.form__ok { display: none; padding: 18px 20px; border-radius: var(--r-cell); background: var(--paper); border: 1px solid var(--line); margin-top: 14px; font-size: var(--fs-sm); color: var(--ink); }
.form__ok.on { display: block; }
.form__fine { margin-top: 12px; font-size: 12.8px; color: var(--muted); }

/* ---------- marquee CTA ---------- */
.mq { border-top: 1px dashed var(--rule); overflow: hidden; padding: 30px 0; }
/* the marquee runs INSIDE the dashed rails (as the original does): a static clip box inset to the rails, 1px clear of them, so the lines stay visible and no text crosses them */
.mq__clip { overflow: hidden; margin: 0 calc(max(0px, (100% - var(--shell)) / 2) + var(--rail) + 1px); }
.mq__track { position: relative; z-index: 1; display: flex; align-items: center; gap: 44px; width: max-content; animation: slide-l 34s linear infinite; }
.mq__track span { font-family: var(--display); font-size: var(--fs-h1); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.mq__track svg { width: 34px; height: 34px; color: var(--ink); flex-shrink: 0; }

/* ---------- footer ---------- */
.ftr { background: var(--paper-2); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0; }
.ftr h3 { font-size: 18.4px; line-height: 1.3; font-weight: 700; margin-bottom: 14px; }
.ftr p { font-size: 13.6px; color: var(--body); max-width: 250px; }
/* footer list type = the original's: 13.6px / 600, one size for links AND plain items (addresses, "also handled") */
.ftr ul { display: flex; flex-direction: column; gap: 12px; }
.ftr ul li, .ftr ul a { font-size: 13.6px; line-height: 1.3; font-weight: 600; color: var(--body); font-synthesis: none; }
.ftr ul a { transition: color var(--t-base) var(--ease); }
.ftr ul a:hover { color: var(--ink); }
.ftr__sub { display: flex; align-items: center; gap: 0; margin-top: 18px; background: var(--paper); border-radius: var(--r-pill); padding: 5px; max-width: 300px; }
.ftr__sub input { flex: 1; height: 40px; border: 0; background: transparent; padding: 0 14px; font-family: var(--ui); font-size: var(--fs-sm); color: var(--ink); min-width: 0; }
.ftr__sub input::placeholder { color: var(--muted); }
.ftr__sub .btn { height: 40px; padding: 0 18px; }
.ftr__ok { margin-top: 10px; font-size: 13.6px; color: var(--ink); display: none; }
.ftr__ok.on { display: block; }
/* footer lockup at a real logo size, never stretched to the container (owner review: the giant donor wordmark read as "insanely large") */
.ftr__word { border-top: 1px dashed var(--rule); padding: 32px 0 28px; margin: 0; }
.ftr__word img { display: block; width: 300px; max-width: 70%; height: auto; }
/* typeset wordmark (fictional firm, real type, no logo file): glyph tile + serif name + small caps line */
.mark__lock { display: flex; flex-direction: column; line-height: 1; }
.mark__sub { font-family: var(--ui); font-weight: 600; font-size: 10.4px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.ftr__word .mark { gap: 16px; }
.ftr__word .mark__glyph { width: 52px; height: 52px; border-radius: 12px; }
.ftr__word .mark__glyph svg { width: 30px; height: 30px; }
.ftr__word .mark__word { font-size: 44px; }
.ftr__word .mark__sub { font-size: 12.8px; margin-top: 7px; }
.ftr__word span { margin: 0 -6vw; }
.ftr__word span {
  display: block; font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: min(392px, calc(26.9vw + 5px)); line-height: 0.82; letter-spacing: -0.035em;
  text-align: center; white-space: nowrap;
}
.ftr__legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px dashed var(--rule); padding: 16px 0; }
.ftr .ftr__note { padding: 0 0 26px; font-size: 12.8px; color: var(--muted); max-width: none; }
.ftr__legal p { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); max-width: none; }
.credit {
  position: fixed; right: 21px; bottom: 21px; z-index: 35;
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: var(--r-cell); background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.14), 0 6px 18px rgba(10, 10, 10, 0.08);
  font-size: 12.8px; font-weight: 600;
}
.credit svg { width: 14px; height: 14px; color: var(--accent); }


/* grid children default to a min-content floor, which is what pushed the 001
   shelf 12px past the rail at 1200 and the 004 rows 18px past it at 320 */
.hero__grid > *, .head > *, .about__shelf > *, .about__right > *, .case > *,
.case__col > *, .quote > *, .quote__body > *, .proc > *, .proc__steps > *,
.faq > *, .faq__list > *, .cmp > *, .team > *, .notes > *, .stats > *,
.values > *, .price > *, .roles > *, .contact > *, .ftr__grid > *,
.strip__track > *, .form__seg > * { min-width: 0; }

/* ---------- reveals ---------- */
/* reveals only arm when the script is running, so the no-JS render is complete */
.js .rv { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .rz img { transform: scale(1.045); transition: transform 0.75s var(--ease); }
.js .rz.in img { transform: none; }

/* ==========================================================================
   responsive
   ========================================================================== */
/* ==========================================================================
   TIERS. These are the reference's own breakpoints, read off its stylesheet:
   phone 0 to 809.98, tablet 810 to 1199.98, desktop 1200 and up. Nothing here
   is invented; every value below was measured on the reference at 390, 768,
   809, 810, 930, 1100, 1199, 1200, 1440 and 1920.
   ========================================================================== */

/* ---------- everything below desktop: one stacked column ----------
   The reference stacks every multi column band the moment it leaves the
   1200 tier, so this block is shared by the tablet and phone tiers. */
@media (max-width: 1199.98px) {
  /* only the header ROW's desktop CTA hides below 1200: .hdr .btn also caught
     every button inside the burger panel, which is why the panel's phone and
     evaluation buttons never rendered */
  .nav, .hdr__in .btn { display: none; }
  .burger { display: flex; }
  .panel {
    display: block; position: fixed; left: 0; right: 0; top: var(--hdr-h); z-index: 39;
    background: var(--paper); border-bottom: 1px dashed var(--rule);
    padding: 8px var(--gutter) 24px; transform: translateY(-8px); opacity: 0;
    visibility: hidden; transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
  }
  .panel.on { transform: none; opacity: 1; visibility: visible; }
  .panel a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 17px; font-weight: 600; color: var(--ink); }
  .panel .btn { width: 100%; margin-top: 18px; }

  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__lead { max-width: 440px; }
  .hero__cta { margin-bottom: 51px; }
  .stage { margin-top: 0; }
  .stage__well { min-height: 0; height: 700px; }

  .band--contact { padding-bottom: 44px; }
  .band--faqtight { padding-top: 18px; padding-bottom: 18px; }
  .head, .head--stack { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .head__cta--lift { margin-top: 0; }
  .head__r { padding: 0; }
  .head__cta { justify-content: flex-start; }
  .about__shelf { grid-template-columns: 1fr; }
  .about__figure { min-height: 440px; }
  .about__doing { min-height: 340px; }
  .about__metric { min-height: 330px; }
  .about__right { grid-template-columns: 1fr; grid-template-rows: auto; }
  .about__plat { grid-template-columns: 1fr; gap: 20px; }
  .svc { flex-direction: column; min-height: 0; }
  .svc__panel { flex: none; height: 66px; transition: height 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
  .svc__panel[aria-expanded="true"] { height: 570px; }
  /* the desktop accordion turns its closed titles on their side with
     writing-mode plus rotate(180deg). The writing-mode was reset here and the
     rotate was not, so every closed strip below 1200 read upside down. */
  .svc__closed { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 0 20px; }
  .svc__idx { flex-shrink: 0; }
  .svc__vert { writing-mode: horizontal-tb; transform: none; flex: 1; min-width: 0; text-align: center; }
  .svc__plus { margin-left: 0; flex-shrink: 0; }
  .roles, .contact { grid-template-columns: 1fr; gap: 28px; }
  .proc__steps, .roles__list { max-width: none; }
  .case { grid-template-columns: 1fr; }
  .case__fig { min-height: 260px; }
  .case__col { grid-template-rows: minmax(60px, auto) auto auto; }
  .case__cell { min-height: 130px; }
  .proc { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .cmp, .values, .notes, .price, .team { grid-template-columns: 1fr; }
  .note h2, .note h3 { max-width: none; padding-bottom: 26px; }
  .note__meta { padding-top: 20px; }
  .team__card { max-width: none; }
  .quote { grid-template-columns: 1fr; }
  .quote__fig { min-height: 360px; }
  .quote__fig img { object-position: 50% 12%; }
  .quote__rail { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .quote__thumb { aspect-ratio: 1; }
  .hiring { flex-direction: column; align-items: flex-start; gap: 16px; }
  .contact__facts { margin-top: 8px; max-width: none; }
  .form { padding: 18px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 44px 0; }
  .ftr__grid > div:first-child { grid-column: 1 / -1; }
  .mission { padding: 0; }
  .cmp__col--last { order: -1; }
}

/* ---------- tablet: 810 to 1199.98 ---------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  :root {
    --rail: 15px; --gutter: 40px; --hdr-h: 59px; --hdr-pad: 20px;
    --fs-h1: 56px; --fs-h2: 48px; --fs-h3: 24px; --fs-h4: 19.2px; --lh-h4: 1.2;
    --fs-quote: 27.2px; --lh-quote: 1.15; --sec-y: 72px;
  }
  .hdr__in { height: 39px; margin-top: 10px; }
  .hero { padding: 91px 0 40px; }
  .strip__track { grid-template-columns: repeat(4, 1fr); }
  .strip__cell:nth-child(4n) { border-right: 0; }
  .strip__cell:nth-child(-n+4) { border-bottom: 1px dashed var(--rule); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__cell:nth-child(2n) { border-right: 0; }
  .stats__cell:nth-child(-n+2) { border-bottom: 1px dashed var(--rule); }
  .mq { padding: 20px 0; }
  .chip--1 { top: 60px; right: 0; left: auto; }
  .chip--2 { top: 230px; left: 0; right: auto; }
  .chip--3 { top: 620px; left: 0; right: auto; }

  /* ---- QC round 2 -------------------------------------------------------
     Measured off the live original at 715, 930 and 1100. The block above is
     shared with the phone tier and collapses every grid to one column, which
     is right below 810 and wrong here: the original keeps these bands two up
     all the way down to 810. Nothing here touches 1200+ or 0 to 809.98. */

  /* section heads: h2 left, lead or CTA right, baseline aligned */
  .head { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 32px; align-items: end; }
  .head__r { padding-bottom: 6px; }
  .head__cta { justify-content: flex-end; align-items: flex-end; }
  /* services head: h2 with its lead stacked under it on the left, CTA right */
  .head--stack { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
  .head--stack .head__r { margin-top: 14px; max-width: 440px; }
  /* comparison and the centred FAQ stay centred and single column */
  .head--center { grid-template-columns: 1fr; gap: 0; }

  /* 001: figure full width, the two tiles side by side, platforms full width */
  .about__right { grid-template-columns: minmax(0, 534fr) minmax(0, 356fr); grid-template-rows: auto; }
  .about__plat { grid-template-columns: minmax(0, 1fr) auto; gap: 30px; }

  /* 006: portrait left, quote card right, the thumb rail one row beneath */
  .quote { grid-template-columns: minmax(0, 465fr) minmax(0, 697fr); }
  .quote__fig { min-height: 430px; }
  .quote__rail { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }

  /* attorneys 2 x 2, visit tile full width beneath with its button inline */
  .team { grid-template-columns: repeat(3, 1fr); }
  .hiring { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }

  /* the about page's six standards: 2 columns x 3 rows */
  .values { grid-template-columns: repeat(2, 1fr); }

  /* reading cards two up. A trio band shows two, as the original's does; the
     reading index runs its odd last card full width so no card is left alone
     in a half row. */
  .notes, .notes--wide, .notes--pair { grid-template-columns: repeat(2, 1fr); }
  .notes--trio > :nth-child(n+3) { display: none; }
  .notes--wide > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .notes--wide > :last-child:nth-child(odd) .note__fig { aspect-ratio: 24 / 9; }
  .note h2, .note h3 { max-width: 290px; padding-bottom: 20px; }
  .note__meta { padding-top: 16px; }
}

/* ---------- phone: 0 to 809.98 ---------- */
@media (max-width: 809.98px) {
  :root {
    --rail: 5px; --gutter: 15px; --hdr-h: 69px; --hdr-pad: 10px;
    --fs-h1: 43.2px; --fs-h2: 36.8px; --fs-h3: 22.4px; --fs-h4: 17.6px; --lh-h4: 1.1;
    --fs-quote: 20.8px; --lh-quote: 1.15; --sec-y: 64px;
  }
  .hdr__in { height: 39px; margin-top: 15px; }
  .hero { padding: 81px 0 40px; }
  .hero__cta { flex-direction: column; gap: 10px; margin-bottom: 25px; }
  .hero__cta .btn { width: 100%; }
  .stage__well { height: clamp(420px, 66vw, 560px); }
  .strip__track { grid-template-columns: repeat(2, 1fr); }
  .strip__cell:nth-child(2n) { border-right: 0; }
  .strip__cell:nth-child(-n+4) { border-bottom: 1px dashed var(--rule); }
  .strip__cell:nth-child(n+7) { display: none; }
  .stats { grid-template-columns: 1fr; }
  .stats__cell { border-right: 0; }
  .stats__cell + .stats__cell { border-top: 1px dashed var(--rule); }
  .mq { padding: 20px 0; }
  .chip--1 { top: 250px; right: 0; left: auto; }
  .chip--2 { top: 318px; left: 0; right: auto; }
  .chip--3 { top: 380px; right: 0; left: auto; }
  .note__fig { aspect-ratio: 4 / 3; }
  /* Below 810 each card takes the full column. The original answers that with
     a short landscape band rather than a near square; 3:2 is as short as these
     four source photographs allow (see the README). */
  .team__fig { aspect-ratio: 3 / 2; }
  .notes--wide { grid-template-columns: 1fr; }
  /* a row title plus its category will not sit side by side in 390px: the two
     collided at "Motorcycle accidents / Personal injury", so the name cell
     stacks and the row grows to fit instead of clipping */
  .case__col { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(60px, auto) auto auto; }
  .case__name { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 12px 18px; }
  /* 26px display type snapped a long town name in half in a 135px cell */
  .case__cell { padding: 16px; min-height: 105px; }
  .case__cell .num { font-size: 22px; }
  .case__fig { min-height: 180px; }
  .form__seg { grid-template-columns: 1fr; }
  .mission p { font-size: 24px; }
  .credit { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .rz img { transform: none; transition: none; }
  .strip__track, .mq__track { animation: none; }
  .strip__cell b { animation: none; transform: none; }
  .strip__cell b:nth-child(1) { opacity: 1; filter: blur(0.3px); }
  .strip__cell b:nth-child(2) { opacity: 0; }
  .note:hover { transform: none; }
  .note:hover .note__fig img { transform: none; }
  .svc__panel, .svc__open, .faq__a, .toggle__sw i { transition: none; }
  .btn, .btn__dot, .nav a, .nav a::after { transition: none; }
  .svc__panel, .svc__body, .proc__when, .proc__card { transition: none; }
  .btn:active { transform: none; }
}

/* phone footer: balanced room around the real logo lockup, and clearance so the fixed sample chip never covers the legal note */
@media (max-width: 809.98px) {
  .ftr__word { padding: 26px 0 22px; }
  .ftr__word img { width: 230px; }
  .ftr__word .mark__glyph { width: 40px; height: 40px; border-radius: 10px; }
  .ftr__word .mark__glyph svg { width: 23px; height: 23px; }
  .ftr__word .mark__word { font-size: 32px; }
  .ftr__note { padding-bottom: 76px; }
}

/* ==========================================================================
   MEGA MENU  (phase A, 2026-09-19)
   Built from the layout's own vocabulary: ash shelf, chalk tiles, dashed
   hairlines, uppercase micro labels, Graphite strip for the featured card.
   Desktop 1200+ only; below that the burger panel carries an accordion.
   No backdrop-filter anywhere (known fixed-header bug in this workspace).
   ========================================================================== */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.mega { display: none; }

@media (min-width: 1200px) {
  .mega {
    display: block; position: fixed; left: 0; right: 0; top: var(--hdr-h); z-index: 39;
    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .mega.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  /* 1px clear of the dashed rails, the way the marquee clip is, so the rails
     stay visible down both sides of an open panel */
  .mega__in { max-width: var(--shell); margin: 0 auto; padding: 0 calc(var(--rail) + 1px); }
  .mega__card {
    background: var(--paper-2); border-radius: 0 0 var(--r-shelf) var(--r-shelf);
    padding: var(--pad-shelf);
    box-shadow: 0 2px 4px rgba(10, 10, 10, 0.09), 0 24px 52px rgba(10, 10, 10, 0.17);
  }
  .mega__cols { display: grid; gap: var(--gap-tile); grid-template-columns: repeat(var(--cols, 4), minmax(260px, 1fr)); }
  .mega__col { background: var(--paper); border-radius: var(--r-tile); padding: 22px 22px 14px; min-width: 0; }
  .mega__h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--rule); }
  .mega__h svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
  .mega__col li + li { border-top: 1px dashed var(--line-soft); }
  .mega__col a { display: block; padding: 10px 0; }
  .mega__col a b {
    position: relative; display: inline; font-family: var(--ui); font-size: 15.2px;
    font-weight: 600; line-height: 1.25; color: var(--ink); font-synthesis: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size 0.3s var(--ease);
  }
  .mega__col a:hover b, .mega__col a:focus-visible b { background-size: 100% 1px; }
  .mega__col a em { display: block; font-style: normal; font-size: 13.6px; font-weight: 500; color: var(--muted); margin-top: 2px; }
  .mega__feat {
    margin-top: var(--gap-tile); background: var(--dark); color: var(--on-dark-2);
    border-radius: var(--r-tile); padding: 20px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
  }
  .mega__feat h3 { color: var(--on-dark); font-size: 20px; margin-bottom: 5px; }
  .mega__feat p { font-size: var(--fs-sm); color: var(--on-dark-2); max-width: 660px; }
  .mega__acts { display: flex; gap: 8px; flex-shrink: 0; }
  .mega__feat .btn--ghost { border-color: rgba(240, 240, 240, 0.34); color: var(--on-dark); }
  .mega__feat .btn--ghost:hover { background: rgba(240, 240, 240, 0.09); border-color: var(--on-dark); }
  .nav__item[data-open="true"] > a { color: var(--ink); }
  .nav__item[data-open="true"] > a::after { transform: scaleX(1); transform-origin: left; }
}

/* ==========================================================================
   BURGER PANEL ACCORDION  (0 to 1199.98)
   ========================================================================== */
@media (max-width: 1199.98px) {
  .panel {
    max-height: calc(100vh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 0;
  }
  .panel > .btn { width: 100%; margin: 10px 0 14px; }
  .macc { border-bottom: 1px dashed var(--rule); }
  .macc__btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0; font-family: var(--ui); font-size: 17px; font-weight: 600; color: var(--ink); text-align: left;
  }
  .macc__btn i { width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; flex-shrink: 0; }
  .macc__btn svg { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); }
  .macc[data-open="true"] .macc__btn svg { transform: rotate(45deg); }
  .macc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease); }
  .macc[data-open="true"] .macc__body { grid-template-rows: 1fr; }
  .macc__body > div { overflow: hidden; }
  .macc__grp { padding-bottom: 10px; }
  .macc__grp > .label { display: block; padding: 10px 0 2px; }
  .panel .macc__grp a {
    display: block; padding: 9px 0 9px 14px; margin-left: 2px; border-bottom: 0;
    border-left: 1px dashed var(--rule); font-size: 15.2px; font-weight: 600; color: var(--ink);
    font-synthesis: none;
  }
  .panel .macc__grp a em { display: block; font-style: normal; font-size: 13.6px; font-weight: 500; color: var(--muted); }
  .panel > a.panel__top { font-size: 17px; }
  .panel__foot {
    position: sticky; bottom: 0; z-index: 2; background: var(--paper);
    padding: 14px 0 18px; margin-top: 4px; border-top: 1px dashed var(--rule);
  }
  .panel__foot .btn { width: 100%; }
  /* .panel a paints every anchor as a plain list row: the buttons opt out */
  .panel .btn { display: inline-flex; justify-content: center; padding: 0 22px; border-bottom: 0; }
  .panel .btn--dark { color: var(--on-dark); }
  .panel .btn--ghost { color: var(--ink); }
  .panel__foot .btn + .btn { margin-top: 8px; }
}
html.nav-open, html.nav-open body { overflow: hidden; }

/* ==========================================================================
   PAGE MODULES  (content files drive the order; see build/content/README.md)
   ========================================================================== */

/* breadcrumb, in the eyebrow vocabulary */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.crumb a, .crumb span {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--face);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.crumb a { transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.crumb a:hover { color: var(--ink); border-color: var(--ink); }
.crumb span[aria-current] { color: var(--ink); background: var(--paper-2); border-color: transparent; }
.crumb i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }

/* answer-first opener: the shelf carries one large sentence */
.ans { background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.ans__in { background: var(--paper); border-radius: var(--r-tile); padding: 34px 36px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.ans p {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: var(--fs-quote); line-height: 1.28; letter-spacing: -0.03em; max-width: 900px;
}
.ans .label { display: block; margin-bottom: 14px; }

/* index grid of tiles keyed to an event */
.idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.idx__cell {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  border-radius: var(--r-tile); background: var(--face); border: 1px solid var(--line-soft);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
a.idx__cell:hover { background: #fff; transform: translateY(-2px); }
.idx__cell h3 { font-size: 20px; }
.idx__cell p { font-size: var(--fs-sm); }
.idx__go { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.idx__go span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.idx__go i { width: 30px; height: 30px; border-radius: var(--r-cell); background: var(--paper-2); display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.idx__go svg { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease); }
a.idx__cell:hover .idx__go svg { transform: translate(3px, -3px); }

/* label / value / note rows (evidence countdown, town list, office facts) */
.drow { display: flex; flex-direction: column; gap: var(--gap-tile); background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.drow__r { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 210px) minmax(0, 1fr); gap: 20px; align-items: center; background: var(--paper); border-radius: var(--r-tile); padding: 22px 26px; }
.drow__r h3 { font-size: 20px; }
.drow__r .num { font-size: 22px; line-height: 1.1; display: block; }
.drow__r p { font-size: var(--fs-sm); }
.drow__r .label { display: block; margin-bottom: 4px; }
a.drow__r { transition: background-color var(--t-base) var(--ease); }
a.drow__r:hover { background: #fff; }
a.drow__r h3 { text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.drow__r:hover h3 { text-decoration: underline; }

/* the language wall: sixteen cells, each in its own script */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-tile); background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.wall__c { background: var(--paper); border-radius: var(--r-tile); padding: 22px; min-height: 148px; display: flex; flex-direction: column; }
.wall__c b { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.15; font-synthesis: none; }
.wall__c .label { margin-top: 4px; }
.wall__c span.who { margin-top: auto; padding-top: 14px; font-size: var(--fs-sm); color: var(--body); }
.wall__c em { margin-top: 6px; }
a.wall__c { transition: background-color var(--t-base) var(--ease); }
a.wall__c:hover { background: #fff; }
a.wall__c b { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.3s var(--ease); }
a.wall__c:hover b { background-size: 100% 1px; }
.wall__c em { font-style: normal; color: var(--accent); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }

/* the address, set as the page's opening statement */
.addr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 40px; align-items: end; }
.addr__l h1 { margin-bottom: 0; }
.addr__street { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.06; font-weight: 600; letter-spacing: var(--tr-display); color: var(--ink); margin-top: 22px; }
.addr__street span { display: block; color: var(--muted); }
.addr__r { display: flex; flex-direction: column; gap: var(--gap-tile); }
.addr__r > div { background: var(--paper-2); border-radius: var(--r-tile); padding: 18px 22px; }
.addr__r b { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-top: 3px; }

/* the two-pin road diagram (no map tile, no stock photography) */
.roadmap { background: var(--paper-2); border-radius: var(--r-shelf); padding: 34px var(--pad-shelf) var(--pad-shelf); }
.roadmap__line { position: relative; height: 54px; margin: 0 26px; }
.roadmap__line::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; border-top: 1px dashed var(--rule); }
.roadmap__pin { position: absolute; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; }
.roadmap__pin svg { width: 14px; height: 14px; }
.roadmap__pin--a { left: 0; }
.roadmap__pin--b { right: 0; }
.roadmap__road { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: var(--paper-2); padding: 0 14px; }
.roadmap__ends { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-tile); margin-top: 10px; }
.roadmap__ends > * { background: var(--paper); border-radius: var(--r-tile); padding: 24px 26px; }
.roadmap__ends h3 { font-size: 20px; margin-bottom: 6px; }
.roadmap__ends p { font-size: var(--fs-sm); }
.roadmap__ends .label { display: block; margin-bottom: 10px; }

/* question and answer list (the FAQ hub: no imagery by design) */
.qa { display: flex; flex-direction: column; gap: var(--gap-tile); background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.qa__i { background: var(--paper); border-radius: var(--r-tile); padding: 26px 28px; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
.qa__n { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }
.qa__i h2 { font-size: 24px; margin-bottom: 10px; }
.qa__i p { font-size: var(--fs-body); max-width: 700px; }
.qa__i p + p { margin-top: 10px; }
.art--figonly .art__fig { margin-bottom: 0; }
.qa__i a.qa__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.qa__i a.qa__go svg { width: 13px; height: 13px; transition: transform var(--t-base) var(--ease); }
.qa__i a.qa__go:hover svg { transform: translate(3px, -3px); }

/* attorney rows: portrait, one line of work, a language chip row */
.atrow { display: flex; flex-direction: column; gap: 15px; }
.atrow__r { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--gap-tile); background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.atrow__fig { border-radius: var(--r-tile); overflow: hidden; position: relative; aspect-ratio: 280 / 300; }
.atrow__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atrow__b { background: var(--paper); border-radius: var(--r-tile); padding: 28px 30px; display: flex; flex-direction: column; }
.atrow__b h3 { font-size: 26px; }
.atrow__b .label { margin-top: 6px; display: block; }
.atrow__b p { margin-top: 14px; max-width: 560px; }
.atrow__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 22px; }
.atrow__tags .tag { background: var(--paper-2); border-color: transparent; }
.atrow__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.atrow__go svg { width: 13px; height: 13px; transition: transform var(--t-base) var(--ease); }
.atrow__r:hover .atrow__go svg { transform: translate(3px, -3px); }

/* a verbatim line, set as a slab */
.pull { background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.pull__in { background: var(--paper); border-radius: var(--r-tile); padding: 38px 40px; }
.pull blockquote { margin: 0; font-family: var(--display); font-size: var(--fs-quote); line-height: var(--lh-quote); letter-spacing: -0.035em; color: var(--ink); max-width: 860px; }
.pull__who { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--rule); }
.pull__who b { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pull__who em { font-style: normal; font-size: var(--fs-sm); color: var(--muted); }

/* statute sources */
.srcs { border-top: 1px dashed var(--rule); padding-top: 20px; margin-top: 30px; }
.srcs .label { display: block; margin-bottom: 12px; }
.srcs li { display: flex; gap: 12px; padding: 7px 0; font-size: var(--fs-sm); color: var(--body); }
.srcs li b { font-family: var(--display); font-weight: 600; color: var(--ink); flex-shrink: 0; min-width: 132px; letter-spacing: -0.02em; }

/* a 0 to 100 line with one mark on it */
.scale { background: var(--paper-2); border-radius: var(--r-shelf); padding: 30px var(--pad-shelf) var(--pad-shelf); }
.scale__bar { position: relative; height: 60px; margin: 0 26px; }
.scale__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; border-top: 1px dashed var(--rule); }
.scale__mark { position: absolute; top: 24px; width: 2px; height: 20px; background: var(--accent); }
.scale__mark b { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.scale__ends { display: flex; justify-content: space-between; margin: 0 26px 16px; }
.scale__ends span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.scale__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-tile); }
.scale__cards > div { background: var(--paper); border-radius: var(--r-tile); padding: 24px 26px; }
.scale__cards h3 { font-size: 20px; margin-bottom: 6px; }
.scale__cards p { font-size: var(--fs-sm); }

/* a plain prose block inside a band (never more than two in a row) */
.prose { max-width: 760px; }
.prose h2 + p { margin-top: 14px; }
.prose p + p { margin-top: 16px; }
.prose--wide { max-width: 980px; }

/* tick list as a band-level module */
.ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 34px; }
.ticks li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-body); color: var(--body); }
.ticks svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }

/* the grid children floor, extended to the new modules */
.idx > *, .wall > *, .drow__r > *, .qa__i > *, .atrow__r > *, .mega__cols > *,
.roadmap__ends > *, .scale__cards > *, .ticks > *, .addr > * { min-width: 0; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .idx { grid-template-columns: repeat(2, 1fr); }
  .wall { grid-template-columns: repeat(4, 1fr); }
  .drow__r { grid-template-columns: minmax(0, 1fr) minmax(0, 190px); }
  .drow__r p { grid-column: 1 / -1; }
  .addr { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .atrow__r { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .ans__in { padding: 30px; }
}

@media (max-width: 809.98px) {
  .idx, .ticks, .roadmap__ends, .scale__cards { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .wall__c { min-height: 0; padding: 18px; }
  .wall__c b { font-size: 22px; }
  .ans__in { grid-template-columns: 1fr; padding: 24px 22px; gap: 22px; }
  .ans p { font-size: 20.8px; }
  .drow__r { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .qa__i { grid-template-columns: 1fr; padding: 22px 20px; gap: 6px; }
  .qa__i h2 { font-size: 21px; }
  .atrow__r { grid-template-columns: 1fr; }
  .atrow__fig { aspect-ratio: 3 / 2; }
  .atrow__b { padding: 22px 20px; }
  .addr { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .addr__street { font-size: 28px; }
  .pull__in { padding: 26px 22px; }
  .srcs li { flex-direction: column; gap: 2px; }
  .roadmap { padding: 26px var(--pad-shelf) var(--pad-shelf); }
  .roadmap__line { margin: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
  .mega__col a b, a.wall__c b { transition: none; }
  .macc__body, .macc__btn svg { transition: none; }
  .idx__cell, a.idx__cell:hover, a.drow__r, a.wall__c { transition: none; transform: none; }
  .idx__go svg, .qa__go svg, .atrow__go svg { transition: none; }
}

/* module trim: the callout tile carries an h2 when it is the band's own
   heading, the comparison runs two columns as well as three, and the four
   fact cells sit in one shelf */
.hiring h2 { font-size: 20px; }
/* the inner page hero's CTA pair: side by side from 810 up, stacked and full
   width on a phone, where two nowrap buttons ran 31px past the rail at 320 */
.head__cta--hero { flex-wrap: wrap; gap: 10px; }
.atrow__r--hero { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.atrow__fig--hero { aspect-ratio: 465 / 525; }
.atrow__b--hero { justify-content: center; }
@media (max-width: 809.98px) {
  .head__cta--hero { flex-direction: column; align-items: stretch; width: 100%; }
  .head__cta--hero .btn { width: 100%; }

  /* PORTRAITS, phase C item 1. Below 810 the attorney rows used to give the
     photograph the whole column, which at 715 and 809 painted a 447 to 628px
     source into a 665 to 759px box (up to 1.69x, visibly soft) and, at 3/2,
     cropped through the top of the head. Two rules fix both without inventing
     a breakpoint: the row reflows to two columns as soon as the space is there
     (auto-fit, so 390 is untouched and stays one column), and the figure is
     capped at 440px, which is inside every portrait source on this site.
     The aspect ratios are chosen against the sources: the four library
     portraits are square, so a 1/1 or 4/5 box crops the sides, never the head. */
  .atrow__r, .atrow__r--hero { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .atrow__fig, .atrow__fig--hero { width: 100%; max-width: 440px; margin-inline: auto; }
  .atrow__fig { aspect-ratio: 1 / 1; }
  .atrow__fig--hero { aspect-ratio: 4 / 5; }
  /* the cards themselves reflow to two columns as soon as there is room, so
     the photograph fills its card instead of floating in the middle of it,
     and no card is ever wider than the landscape crop behind it. At 390 this
     is still one column, exactly as it was. */
  /* three attorneys: three up while they fit, one column on phones, never 2 + 1 */
  .team { grid-template-columns: repeat(3, 1fr); }
  .quote__fig { max-width: 750px; margin-inline: auto; }
  /* a short chips tile left a dead zone under it, because the h3 pushes the
     tags down with margin-bottom:auto inside a 340px floor */
  .about__doing { min-height: 0; }
}
.cmp--2 { grid-template-columns: repeat(2, 1fr); }
.cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-tile); background: var(--paper-2); border-radius: var(--r-shelf); padding: var(--pad-shelf); }
.cells > * { min-width: 0; }
.cells .case__cell { min-height: 158px; }
.ftr__nap { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.panel__foot .btn { margin: 0; }
@media (max-width: 1199.98px) {
  .cells { grid-template-columns: repeat(2, 1fr); }
  .cmp--2 { grid-template-columns: 1fr; }
}
@media (max-width: 809.98px) { .cells .case__cell { min-height: 118px; } }

@media (max-width: 599.98px) {
  .team { grid-template-columns: 1fr; }
}

/* phone tier: the text block covers most of the photo, so the scrim reaches
   further up and the body copy is full white (measured 3.72:1 at 390 before) */
@media (max-width: 809.98px) {
  .svc__open::after { background: linear-gradient(to top, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.72) 55%, rgba(8, 8, 10, 0.2) 100%); }
  .svc__body p { color: #fff; }
}

/* the typeset footer lockup: reset the donor's giant-wordmark span rule */
.ftr__word .mark span { margin: 0; line-height: 1; letter-spacing: normal; text-align: left; white-space: nowrap; }
.ftr__word .mark .mark__glyph { display: grid; font-size: 0; }
.ftr__word .mark .mark__lock { display: flex; font-size: inherit; }
.ftr__word .mark .mark__word { display: block; font-size: 44px; letter-spacing: -0.03em; }
.ftr__word .mark .mark__sub { display: block; font-family: var(--ui); font-weight: 600; font-size: 12.8px; letter-spacing: 0.16em; color: var(--muted); }
@media (max-width: 809.98px) {
  .ftr__word .mark .mark__word { font-size: 32px; }
}