/* ==========================================================================
   LawRank redesign concept: "Full stop."
   The wordmark's period becomes the system: a result, a position, a finished argument.
   Tokens first, then base, components and sections in page order.
   ========================================================================== */

:root {
  /* colour: from the live site's CSS (#002C3C, #008DF9, #E0E1EC) and LawRank's Instagram */
  --ink: #002C3C;          /* headings and body on light grounds (14.7:1 on white) */
  --ink-deep: #001B25;     /* dark sections */
  --ink-raised: #032634;   /* panels on dark sections */
  --blue: #008DF9;         /* the full stop, accents, buttons (ink-deep text 5.2:1) */
  --blue-text: #0070CC;    /* links on light grounds (5.0:1) */
  --blue-on-dark: #5CB6FF; /* small blue text on ink-deep (8.1:1) */
  --ground: #F3F5F8;       /* alternate light sections, never cream */
  --paper: #FFFFFF;
  --rule: #DDE1E9;
  --rule-dark: rgba(255, 255, 255, .12);
  --muted: #4A6470;        /* secondary text on white (6.3:1) */
  --muted-dark: #9FB4BD;   /* secondary text on ink-deep (8.2:1) */
  --hl: #E6F86A;           /* the highlighter, behind ink text only (12.6:1) */
  --notice: #FBE7B0;       /* the concept strip; used nowhere else */

  /* type */
  --sans: "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* display type: the hero and closing headlines, section heads and big figures */
  --display: var(--sans);
  --display-w: 300;
  --display-track: -0.04em;
  --display-lh: .98;
  --display-wdth: 100%;
  --head-w: 400;
  --head-track: -0.025em;
  --fig-w: 300;
  /* the hero heading, reduced on request (31 Oct; was clamp(2.875rem, 1.35rem + 5.3vw, 6.25rem), 100px at the top end) */
  --fs-display: clamp(2.625rem, 1.3rem + 4.3vw, 5.25rem);
  --fs-h2: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
  --fs-h3: 1.375rem;
  --fs-lede: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  /* layout */
  --wrap: 1320px;
  --dock-overlap: 104px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(88px, 10.5vw, 152px);
  --masthead-h: 76px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 20px;
  --shadow: 0 1px 2px rgba(0, 27, 37, .05), 0 18px 40px -22px rgba(0, 27, 37, .3);

  /* motion: one shared vocabulary */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-fade: cubic-bezier(0.25, 0.1, 0.25, 1);  /* fades: starts at once, settles gently (ease-out does most of a change in the first 80ms and snaps; in-out lags) */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: hidden; /* on html, not body, so position: sticky keeps working */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
address { font-style: normal; }
::selection { background: var(--hl); color: var(--ink-deep); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .hero :focus-visible, .footer :focus-visible, .menu :focus-visible { outline-color: var(--hl); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* keeps a hyphenated term on one line, so a headline never breaks after "SEO-" */
.nowrap { white-space: nowrap; }
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 1200;
  padding: 12px 18px; border-radius: var(--r-s);
  background: var(--ink-deep); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- typeface options for review (?type=, switcher bottom left) ---------- */
/* 1. Geist: a precise neo-grotesk, medium weight, tight. Corporate without the stiffness. */
html[data-type="geist"] {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --display-w: 500; --display-track: -0.052em; --display-lh: .96;
  --head-w: 500; --head-track: -0.035em;
  --fig-w: 400;
}
/* 2. Source Serif 4 for headlines and quotes, Inter for reading: the authority of a brief. */
html[data-type="serif"] {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --display-w: 400; --display-track: -0.028em; --display-lh: 1;
  --head-w: 400; --head-track: -0.018em;
  --fig-w: 400;
}
/* 3. Archivo semi-condensed: plain-spoken and confident, "no more excuses, just results". */
html[data-type="archivo"] {
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --display-w: 600; --display-track: -0.022em; --display-lh: .94; --display-wdth: 84%;
  --head-w: 600; --head-track: -0.012em;
  --fig-w: 500;
}

[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--ground { background: var(--ground); }
.section--dark { background: var(--ink-deep); color: #fff; }

/* ---------- type ---------- */
.h2 {
  font-family: var(--display); font-stretch: var(--display-wdth);
  font-size: var(--fs-h2);
  font-weight: var(--head-w);
  line-height: 1.08;
  letter-spacing: var(--head-track);
  text-wrap: balance;
}
.h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.section--dark .lede { color: var(--muted-dark); }
.section-head { max-width: 52rem; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .lede { margin-top: 20px; max-width: 40rem; }
@media (min-width: 960px) {
  .section-head--split {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px;
    align-items: end; max-width: none;
  }
  .section-head--split .lede { margin-top: 0; }
}

/* the full stop: the logo's period, in LawRank blue. Used twice. */
.stop {
  display: inline-block;
  width: .15em; height: .15em;
  margin-left: .045em;
  border-radius: 50%;
  background: var(--blue);
  vertical-align: baseline;
}

/* the highlighter, from LawRank's Instagram: marks the decisive line in a client's own words */
mark {
  color: inherit;
  padding: 0 .08em;
  margin: 0 -.04em;
  background-image: linear-gradient(100deg, rgba(230, 248, 106, .75) 0, var(--hl) 6px, var(--hl) calc(100% - 6px), rgba(230, 248, 106, .8) 100%);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 100% 82%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 3px;
}
.section--dark mark { color: var(--ink-deep); }
.js .testimony mark { background-size: 0% 82%; }
.js .testimony.is-lit mark { background-size: 100% 82%; transition: background-size 900ms var(--ease-out) 250ms; }
.js .section--dark .testimony mark { color: inherit; transition: color 300ms var(--ease-out) 450ms; }
.js .section--dark .testimony.is-lit mark { color: var(--ink-deep); transition: background-size 900ms var(--ease-out) 250ms, color 300ms var(--ease-out) 450ms; }

/* ---------- links and buttons ---------- */
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--blue-text); text-decoration: none;
}
.link svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.link--light { color: var(--blue-on-dark); }
.link span { text-decoration: underline; text-underline-offset: 3px; }

/* Raised buttons, after the client's reference: a top-lit gradient, a darker rim, a light inner edge and a soft shadow.
   Hover deepens the shadow (the fill stays put, so text contrast never drops); pressing sinks the button 1px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  border-radius: var(--r-m);
  font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn--sm { min-height: 42px; padding: 8px 18px; border-radius: 10px; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn--blue { /* white text holds 4.5:1 from 30% down, where the letters start; the brighter top is only the light catching the edge */
  color: #fff; text-shadow: 0 1px 1px rgba(0, 45, 100, .35);
  border-color: #00519F;
  background: linear-gradient(180deg, #2894F7 0%, #0A74DD 32%, #0060C2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 27, 37, .24), 0 8px 18px -8px rgba(0, 112, 224, .65);
}
.btn--ink {
  color: #fff; border-color: #00141C;
  background: linear-gradient(180deg, #0B4157 0%, #00303F 45%, #00232F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 27, 37, .3), 0 8px 18px -10px rgba(0, 27, 37, .6);
}
.btn--ghost { /* on dark grounds: frosted glass with the same lit edge */
  color: #fff; border-color: rgba(255, 255, 255, .24);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -10px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--outline {
  color: var(--ink); border-color: #C9D2DB;
  background: linear-gradient(180deg, #FFFFFF, #F0F3F7);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 44, 60, .08), 0 6px 14px -8px rgba(0, 44, 60, .22);
}
.btn--text { min-height: 44px; padding: 8px 4px; color: var(--muted); font-weight: 500; }

@media (hover: hover) and (pointer: fine) {
  .link:hover svg { transform: translateX(3px); }
  .link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .btn--blue:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 27, 37, .24), 0 12px 26px -8px rgba(0, 112, 224, .85); }
  .btn--ink:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 27, 37, .3), 0 12px 24px -10px rgba(0, 27, 37, .75); }
  .btn--ghost:hover { border-color: rgba(255, 255, 255, .42); background-color: rgba(255, 255, 255, .05); }
  .btn--outline:hover { border-color: #AEB9C4; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 44, 60, .08), 0 10px 20px -8px rgba(0, 44, 60, .28); }
  .btn--text:hover { color: var(--ink); }
}
/* pressed: after hover so it wins while the pointer is down */
.btn:active { transform: translateY(1px); }
.btn--blue:active { box-shadow: inset 0 1px 3px rgba(0, 30, 70, .45), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 1px rgba(0, 27, 37, .2); }
.btn--ink:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 27, 37, .25); }
.btn--ghost:active, .btn--outline:active { box-shadow: inset 0 1px 3px rgba(0, 27, 37, .22); }
/* v1, the flat buttons (replaced 30 Oct 2026 after the client's raised reference):
.btn { border-radius: var(--r-s); transition: background-color, color, border-color, transform; }
.btn:active { transform: scale(.97); }
.btn--blue { background: var(--blue); color: var(--ink-deep); }          hover: #2B9EFA
.btn--ghost { border-color: rgba(255, 255, 255, .34); color: #fff; }     hover: border #fff, background rgba(255, 255, 255, .06)
.btn--ink { background: var(--ink); color: #fff; }                       hover: var(--ink-deep)
.btn--outline { border-color: var(--rule); color: var(--ink); background: var(--paper); }   hover: border var(--ink)
*/

.tag {
  display: inline-flex; align-items: center;
  padding: 5px 10px 6px;
  border-radius: 4px;
  background: var(--blue); color: var(--ink-deep);
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
}
.tag--quiet { background: transparent; color: var(--blue-on-dark); box-shadow: inset 0 0 0 1px rgba(92, 182, 255, .45); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--rule-dark);
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.chip svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .04); } }

.placeholder {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 4px;
  background: #FFE08A; color: #4A3500; font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}

/* ==========================================================================
   LOADER: the wordmark rises letter by letter, the full stop lands last
   ========================================================================== */
.loader { display: none; }
.js .loader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink-deep); color: #fff;
}
.js body.is-loading { overflow: hidden; }
.loader__logo { width: clamp(190px, 26vw, 340px); height: auto; overflow: visible; }
.ld-glyph { transform: translateY(48px); }
.ld-dot { fill: var(--blue); opacity: 0; transform: translateY(-34px); }
.loader.is-playing .ld-glyph { animation: ld-rise 900ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--i) * 60ms); }
.loader.is-playing .ld-dot { animation: ld-drop 620ms cubic-bezier(.3, 0, .2, 1) 760ms forwards; }
@keyframes ld-rise { to { transform: none; } }
@keyframes ld-drop {
  0% { opacity: 0; transform: translateY(-34px); }
  40% { opacity: 1; }
  72% { transform: translateY(1.5px); }
  100% { opacity: 1; transform: none; }
}
.loader.is-lifting {
  transform: translateY(-100%);
  transition: transform 1000ms var(--ease-in-out);
}
.loader.is-lifting .loader__logo { opacity: 0; transform: translateY(-28px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-in-out); }

/* ==========================================================================
   CONCEPT NOTICE and MASTHEAD
   ========================================================================== */
.notice {
  position: relative; z-index: 60;
  padding: 9px var(--gutter);
  background: var(--notice); color: var(--ink-deep);
  font-size: .8125rem; line-height: 1.4; text-align: center;
}
.notice a { font-weight: 600; text-underline-offset: 2px; }

.masthead {
  position: sticky; top: 0; z-index: 100;
  height: var(--masthead-h);
  color: #fff;
  transition: background-color 280ms var(--ease-out), color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.masthead.is-scrolled { background: rgba(0, 27, 37, .82); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
@supports (backdrop-filter: blur(1px)) {
  .masthead.is-scrolled { background: rgba(0, 27, 37, .6); backdrop-filter: saturate(1.2) blur(16px); }
}
.masthead.is-solid, .masthead.is-open {
  background: rgba(255, 255, 255, .98);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule);
}
@supports (backdrop-filter: blur(1px)) {
  .masthead.is-solid { background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(14px); }
  .masthead.is-open { background: #fff; }
}
.masthead__bar { display: flex; align-items: center; gap: 28px; height: 100%; }
.masthead__logo { display: block; flex: none; color: inherit; }
.masthead__logo svg { width: 138px; height: auto; }

.nav { margin-right: auto; margin-left: 20px; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 12px; border-radius: var(--r-s);
  font-size: .9688rem; font-weight: 500; text-decoration: none; color: inherit;
  transition: background-color 160ms var(--ease-out);
}
.nav__link svg { width: 12px; height: 12px; opacity: .7; transition: transform 240ms var(--ease-in-out); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { background: rgba(255, 255, 255, .1); }
  .masthead.is-solid .nav__link:hover, .masthead.is-open .nav__link:hover { background: var(--ground); }
}

.masthead__actions { display: flex; align-items: center; gap: 18px; }
.masthead__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
}
.masthead__phone svg { width: 18px; height: 18px; opacity: .8; }
.masthead__toggle { display: none; width: 44px; height: 44px; margin-right: -8px; border-radius: var(--r-s); place-items: center; }

.burger { position: relative; display: block; width: 22px; height: 12px; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 300ms var(--ease-out); }
.burger span:first-child { top: 0; }
.burger span:last-child { bottom: 0; }
.burger.is-x span:first-child { top: 5px; transform: rotate(45deg); }
.burger.is-x span:last-child { bottom: 5px; transform: rotate(-45deg); }

/* services mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 0 var(--rule), 0 30px 60px -30px rgba(0, 27, 37, .35);
  opacity: 0; transform: translateY(-6px);
}
.mega.is-open { opacity: 1; transform: none; transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
.mega__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; padding-block: 36px 40px; }
.mega__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.mega__list a { display: block; padding: 14px 16px; margin-left: -16px; border-radius: var(--r-m); text-decoration: none; transition: background-color 160ms var(--ease-out); }
.mega__list strong { display: block; font-weight: 600; font-size: 1rem; }
.mega__list span { display: block; margin-top: 2px; font-size: .9063rem; line-height: 1.45; color: var(--muted); }
.mega__feature {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px; border-radius: var(--r-l);
  background: var(--ink-deep); color: #fff; text-decoration: none;
}
.mega__feature-label { font-size: .8125rem; font-weight: 600; color: var(--blue-on-dark); }
.mega__feature-title { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; }
.mega__feature-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; }
.mega__feature-more svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mega__list a:hover { background: var(--ground); }
  .mega__feature:hover .mega__feature-more svg { transform: translateX(3px); }
}

/* ==========================================================================
   MOBILE MENU (full screen dialog)
   ========================================================================== */
.menu {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  background: var(--ink-deep); color: #fff;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 550ms cubic-bezier(.7, 0, .2, 1) 140ms, visibility 0s linear 700ms;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 700ms cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--masthead-h); flex: none; }
.menu__logo svg { width: 128px; }
.menu__close { width: 44px; height: 44px; margin-right: -8px; display: grid; place-items: center; }
.menu__nav { flex: 1; display: flex; align-items: center; }
.menu__nav ul { width: 100%; }
.menu__nav li, .menu__foot { opacity: 0; transform: translateY(26px); transition: opacity 200ms, transform 200ms; }
.menu.is-open .menu__nav li, .menu.is-open .menu__foot {
  opacity: 1; transform: none;
  transition: opacity 500ms cubic-bezier(.2, .8, .2, 1) calc(300ms + var(--i) * 60ms), transform 750ms cubic-bezier(.2, .8, .2, 1) calc(300ms + var(--i) * 60ms);
}
.menu__nav a {
  display: block; padding: 10px 0;
  font-family: var(--display); font-stretch: var(--display-wdth);
  font-size: clamp(2.25rem, 9vw, 3.25rem); font-weight: var(--display-w); letter-spacing: var(--head-track); line-height: 1.15;
  text-decoration: none;
}
.menu__foot { display: grid; gap: 14px; padding-block: 24px max(28px, env(safe-area-inset-bottom)); }
.menu__phone { text-align: center; font-weight: 600; text-decoration: none; padding: 8px; }
.menu__phone span { color: var(--muted-dark); font-weight: 400; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  /* short enough that the docked form below shows in the first fold */
  min-height: clamp(560px, calc(100svh - 210px), 860px);
  margin-top: calc(var(--masthead-h) * -1);
  display: flex; align-items: flex-end;
  background: var(--ink-deep); color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--ink-deep) no-repeat var(--photo-pos, 50% 50%) / cover; }
/* each hero has its own photograph (also without JS); the review switcher can swap it through html[data-bg] */
html[data-bg="court"] .hero__media { background-image: url(../img/hero-court.jpg); --photo-pos: 50% 14%; --photo-pos-sm: 74% 50%; }
.hero--search .hero__media, html[data-bg="city"] .hero__media { background-image: url(../img/hero-city.jpg); --photo-pos: 50% 50%; --photo-pos-sm: 50% 50%; }
.hero--film .hero__media, html[data-bg="steps"] .hero__media { background-image: url(../img/hero-steps.jpg); --photo-pos: 50% 46%; --photo-pos-sm: 80% 50%; }
/* people, always in the right third; the bottom of each frame sits under the docked form */
html[data-bg="corridor"] .hero__media { background-image: url(../img/hero-corridor.jpg); --photo-pos: 50% 40%; --photo-pos-sm: 82% 50%; }
html[data-bg="courtroom"] .hero__media { background-image: url(../img/hero-courtroom.jpg); --photo-pos: 50% 45%; --photo-pos-sm: 92% 50%; }
html[data-bg="call"] .hero__media { background-image: url(../img/hero-call.jpg); --photo-pos: 50% 50%; --photo-pos-sm: 80% 50%; }
html[data-bg="client"] .hero__media { background-image: url(../img/hero-client.jpg); --photo-pos: 50% 55%; --photo-pos-sm: 80% 50%; }
html[data-bg="rain"] .hero__media { background-image: url(../img/hero-rain.jpg); --photo-pos: 50% 55%; --photo-pos-sm: 78% 50%; }
html[data-bg="office"] .hero__media { background-image: url(../img/hero-office.jpg); --photo-pos: 50% 40%; --photo-pos-sm: 70% 50%; }
html[data-bg="phone"] .hero__media { background-image: url(../img/hero-phone.jpg); --photo-pos: 30% 60%; --photo-pos-sm: 72% 100%; }
/* the marketing and the win in one frame (31 Oct, the switcher under the form): A the verdict meets the press on the steps,
   B a client who won tells it to camera, C the win becomes a five-star review */
html[data-bg="press"] .hero__media { background-image: url(../img/hero-press.jpg); --photo-pos: 50% 40%; --photo-pos-sm: 70% 50%; }
html[data-bg="film"] .hero__media { background-image: url(../img/hero-film.jpg); --photo-pos: 50% 40%; --photo-pos-sm: 66% 50%; }
html[data-bg="stars"] .hero__media { background-image: url(../img/hero-stars.jpg); --photo-pos: 50% 42%; --photo-pos-sm: 64% 50%; }
/* more takes on A press: B from the top of the steps, C the evening news, D the microphones close up */
html[data-bg="top"] .hero__media { background-image: url(../img/hero-press-top.jpg); --photo-pos: 50% 34%; --photo-pos-sm: 70% 50%; }
/* C evening news is final for the docked hero (31 Oct), so it is also the photo without JavaScript (the steps were) */
[data-hero-variant="dock"] .hero__media, html[data-bg="evening"] .hero__media { background-image: url(../img/hero-press-evening.jpg); --photo-pos: 50% 40%; --photo-pos-sm: 76% 50%; }
html[data-bg="mics"] .hero__media { background-image: url(../img/hero-press-mics.jpg); --photo-pos: 50% 40%; --photo-pos-sm: 66% 50%; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* calm the bokeh where the words sit; leave the phone untouched */
.hero::before {
  background: linear-gradient(90deg, rgba(0, 27, 37, .94) 0%, rgba(0, 27, 37, .84) 30%, rgba(0, 27, 37, .45) 52%, rgba(0, 27, 37, .08) 70%, rgba(0, 27, 37, 0) 82%);
}
.hero::after {
  background:
    linear-gradient(to top, rgba(0, 27, 37, .92) 0%, rgba(0, 27, 37, .5) 18%, rgba(0, 27, 37, 0) 38%),
    linear-gradient(to bottom, rgba(0, 27, 37, .55) 0%, rgba(0, 27, 37, 0) 22%);
}
/* more air between the masthead and the heading (31 Oct; was clamp(48px, 7vh, 96px)); the smaller heading gives back about
   what this takes, so the docked form stays in the first fold */
.hero__body { padding-top: calc(var(--masthead-h) + clamp(64px, 12vh, 144px)); padding-bottom: calc(var(--dock-overlap) + clamp(36px, 5vh, 64px)); }
.hero__copy { max-width: 46rem; }
.hero__title {
  font-family: var(--display); font-stretch: var(--display-wdth);
  font-size: var(--fs-display);
  font-weight: var(--display-w);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
}
.hero__title .line { display: block; }
.hero__lede {
  max-width: 38rem; margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(1.125rem, 1.02rem + .4vw, 1.3125rem); line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  text-wrap: pretty;
}

/* the orchestrated intro: lines rise as the curtain clears, the full stop lands last */
.js .hero__title .line { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.js .hero__title .line > span { display: inline-block; transform: translateY(108%); }
.js .hero .stop { transform: scale(0); }
.js .hero .hero__lede { opacity: 0; transform: translateY(14px); }
.js .intake { opacity: 0; transform: translateY(28px); }
.js body.is-ready .hero__title .line > span { transform: none; transition: transform 1100ms var(--ease-out); }
.js body.is-ready .hero__title .line:nth-child(2) > span { transition-delay: 80ms; }
.js body.is-ready .hero__title .line:nth-child(3) > span { transition-delay: 160ms; }
.js body.is-ready .hero .stop { transform: none; transition: transform 520ms cubic-bezier(.3, 1.6, .5, 1) 900ms; }
.js body.is-ready .hero .hero__lede { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 380ms, transform 900ms var(--ease-out) 380ms; }
.js body.is-ready .intake { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 560ms, transform 1000ms var(--ease-out) 560ms; }
.js .hero__media { transform: scale(1.06); }
.js body.is-ready .hero__media { transform: none; transition: transform 2400ms var(--ease-out); }

/* ==========================================================================
   INTAKE: the "check my market" form docked on the hero's bottom edge.
   Same form as the closing section, laid out wide: answers on the left,
   Continue on the right, so step 1 reads as one line on desktop.
   ========================================================================== */
.intake { position: relative; z-index: 2; margin-top: calc(var(--dock-overlap) * -1); }
.qform--dock { padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3.4vw, 44px); box-shadow: 0 0 0 1px rgba(0, 44, 60, .06), 0 36px 72px -36px rgba(0, 27, 37, .5); }
.qform__note { display: none; }
.qform--dock .qform__head { justify-content: flex-start; gap: 14px; }
.qform--dock .qform__note { display: block; font-size: .9375rem; color: var(--muted); }
.qform--dock .qform__count { margin-left: auto; }
.qform--dock .qform__progress { margin-top: 16px; }
.qform--dock .qstep { margin-top: 24px; }
.qform--dock .qstep legend { font-size: 1.375rem; line-height: 1.75rem; }
@media (min-width: 640px) {
  /* question and hint share a line */
  .qform--dock .qstep legend { float: left; margin: 0 14px 18px 0; }
  .qform--dock .qstep__hint { margin-top: 0; padding-top: 3px; line-height: 1.5625rem; }
  .qform--dock :is(.choices, .fields, .check, .qstep__error) { clear: both; }
  /* the floated legend's bottom margin spaces the answers; a cleared margin would collapse */
  .qform--dock :is(.choices, .fields) { margin-top: 0; }
}
.qform--dock .qstep--done { padding-top: 8px; }
@media (min-width: 1000px) {
  /* no label wraps: each column is at least as wide as its words ("PPC and paid ads" broke at 1280) */
  .qform--dock [data-step="1"] .choices { grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
  .qform--dock :is([data-step="2"], [data-step="3"]) .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qform--dock .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qform--dock .field--wide { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .qform--dock { display: grid; grid-template-columns: minmax(0, 1fr) 264px; column-gap: 40px; align-items: end; }
  .qform--dock > :is(.qform__head, .qform__progress, .qstep--done) { grid-column: 1 / -1; }
  .qform--dock > .qstep { grid-column: 1; }
  .qform--dock > .qform__actions { grid-column: 2; grid-row: 3; margin-top: 0; justify-content: flex-end; }
  /* errors sit on the question line, so Continue never jumps out from under the pointer */
  .qform--dock .qstep { position: relative; }
  .qform--dock .qstep__error { position: absolute; top: 0; right: 0; margin: 0; line-height: 1.75rem; }
  .qform--dock .qstep:has(> .qstep__error:not([hidden])) .qstep__hint { visibility: hidden; }
}
@media (max-width: 639px) {
  .qform--dock .qform__note { display: none; }
}

/* the dock is one card: the form on top, its proof as the footer band */
/* a lighter lift on request (31 Oct; was 0 36px 72px -36px at .5, which pooled grey under the card on the white) */
.intake__card { border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px rgba(0, 44, 60, .06), 0 2px 4px rgba(0, 27, 37, .04), 0 16px 32px -20px rgba(0, 27, 37, .22); }
.intake__card .qform--dock { border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: none; }

/* ==========================================================================
   The docked form, refined, final (31 Oct, "like the current layout, we just need to improve it visually, i am not liking
   the progress bar"; "perfext finalize this and remove switcher"): the same layout, with the thin progress line replaced by the four steps by name in the head, the head
   ruled off as the card's header, the answers finished with more care and an arrow on Continue. ?form=current shows the
   form as it was
   ========================================================================== */
.qsteps { display: none; }
html[data-form="refined"] .qform--dock { padding-top: clamp(20px, 2vw, 26px); }
html[data-form="refined"] .qform--dock .qform__progress { display: none; }
/* the count is still the live region for screen readers; the steps show it */
html[data-form="refined"] .qform--dock .qform__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-form="refined"] .qform--dock .qform__head {
  flex-wrap: wrap; row-gap: 14px;
  margin-inline: calc(clamp(24px, 3.4vw, 44px) * -1); padding: 0 clamp(24px, 3.4vw, 44px) clamp(18px, 1.9vw, 24px);
  border-bottom: 1px solid var(--rule);
}
html[data-form="refined"] .qform--dock .qsteps { display: flex; align-self: center; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 0; list-style: none; }
html[data-form="refined"] .qsteps li { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; line-height: 1.25rem; color: var(--muted); white-space: nowrap; transition: color 200ms var(--ease-out); }
/* the line between two steps turns blue once the step before it is done */
html[data-form="refined"] .qsteps li + li::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 1px; background: var(--rule); transition: background-color 360ms var(--ease-in-out); }
html[data-form="refined"] .qsteps li.is-done + li::before { background: var(--blue); }
html[data-form="refined"] .qsteps__n {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff center / 12px no-repeat; box-shadow: inset 0 0 0 1.5px #B8C4CC;
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted);
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), color 200ms var(--ease-out);
}
html[data-form="refined"] .qsteps li:is(.is-current, .is-done) { color: var(--ink); }
html[data-form="refined"] .qsteps .is-current .qsteps__n { background-color: var(--blue-text); box-shadow: 0 0 0 4px rgba(0, 141, 249, .16); color: #fff; }
html[data-form="refined"] .qsteps .is-done .qsteps__n {
  background-color: #E3F0FD; box-shadow: none; color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%230070CC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* the answers: a crisper edge, a slight lift, and a hover that answers the pointer */
html[data-form="refined"] .qform--dock .choice span {
  border-color: #D5DCE3; background: #fff; box-shadow: 0 1px 2px rgba(0, 27, 37, .05);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
html[data-form="refined"] .qform--dock .choice span::before { border-radius: 6px; border-color: #A3B1BA; }
html[data-form="refined"] .qform--dock .choices--radio .choice span::before { border-radius: 50%; }
html[data-form="refined"] .qform--dock .choice input:checked + span { border-color: var(--blue-text); background: #F2F8FF; box-shadow: inset 0 0 0 1px var(--blue-text), 0 4px 10px -6px rgba(0, 112, 204, .45); }
html[data-form="refined"] .qform--dock .choice input:checked + span::before { border-color: var(--blue-text); }
@media (hover: hover) and (pointer: fine) {
  html[data-form="refined"] .qform--dock .choice:hover input:not(:checked) + span { border-color: #AEBBC4; box-shadow: 0 1px 2px rgba(0, 27, 37, .06), 0 6px 14px -8px rgba(0, 27, 37, .22); }
}
/* Continue carries an arrow that steps forward on hover (the label is set by script, so the arrow is drawn here) */
html[data-form="refined"] .qform--dock [data-next]::after {
  content: ""; flex: none; width: 18px; height: 18px; margin-right: -4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  html[data-form="refined"] .qform--dock [data-next]:hover::after { transform: translateX(3px); }
}
@media (min-width: 1200px) {
  /* the progress line's grid row is gone, so the question and Continue move up into row 2 together */
  html[data-form="refined"] .qform--dock > :is(.qstep, .qform__actions) { grid-row: 2; }
}
/* the step names: all four from 1200px; narrower, only the current one's, and below 1000px without the note */
@media (max-width: 1199px) {
  html[data-form="refined"] .qsteps li:not(.is-current) .qsteps__t { display: none; }
}
@media (max-width: 999px) {
  html[data-form="refined"] .qform--dock .qform__note { display: none; }
}
/* phones: the steps on their own line under the title, spread across it */
@media (max-width: 639px) {
  html[data-form="refined"] .qform--dock .qsteps { width: 100%; margin-left: 0; }
  html[data-form="refined"] .qsteps li + li { flex: 1 1 auto; }
  html[data-form="refined"] .qsteps li + li::before { flex: 1 1 auto; width: auto; min-width: 12px; }
}

/* ==========================================================================
   The docked form, compact (31 Oct, "make compact versions"). Set aside for the refined look above (the client liked
   the layout as it was), reachable with ?form=pills|line|bar. Each is shorter than the form as it was; the steps,
   words and checks are the same, and the HTML says what each look does. Shared: one slim head line with the count and a four-part bar in place of the full-width line,
   smaller questions and answers, and the thank-you beside its check
   ========================================================================== */
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock {
  --pad-y: clamp(18px, 1.7vw, 22px); --pad-x: clamp(20px, 2.6vw, 32px);
  position: relative; padding: var(--pad-y) var(--pad-x);
}
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__head { align-items: center; gap: 12px; min-height: 24px; padding-right: 66px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__title { font-size: 1rem; line-height: 1.5rem; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__note { font-size: .875rem; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__count { font-size: .8125rem; }
/* the bar in four parts beside the count; it fills as before. Out of the grid (grid-area: auto), so it is placed from the
   card's edge and not from the grid's */
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__progress {
  position: absolute; grid-area: auto; top: calc(var(--pad-y) + 10px); right: var(--pad-x);
  width: 54px; height: 4px; margin: 0; border-radius: 0; background: var(--rule);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 4'%3E%3Crect width='12' height='4' rx='2'/%3E%3Crect x='14' width='12' height='4' rx='2'/%3E%3Crect x='28' width='12' height='4' rx='2'/%3E%3Crect x='42' width='12' height='4' rx='2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 4'%3E%3Crect width='12' height='4' rx='2'/%3E%3Crect x='14' width='12' height='4' rx='2'/%3E%3Crect x='28' width='12' height='4' rx='2'/%3E%3Crect x='42' width='12' height='4' rx='2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep { margin-top: 14px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep legend { font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -.015em; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock :is(.qstep__hint, .qstep__error) { font-size: .875rem; line-height: 1.5rem; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .choice span { min-height: 44px; padding: 10px 16px 10px 14px; gap: 10px; font-size: .9375rem; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .choice span::before { width: 18px; height: 18px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .fields { gap: 12px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .field label { margin-bottom: 4px; font-size: .8125rem; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .field input { height: 44px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .check { margin-top: 12px; font-size: .875rem; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__actions { margin-top: 16px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__actions .btn { min-height: 44px; padding-block: 10px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qform__actions [data-next] { min-width: 148px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep--done { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 6px 0 2px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep--done svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep--done h3 { margin-top: 0; font-size: 1.25rem; }
html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep--done p { margin-top: 2px; font-size: .9375rem; }
@media (min-width: 640px) {
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep legend { margin: 0 12px 12px 0; }
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep__hint { padding-top: 1px; line-height: 1.5rem; }
}
@media (min-width: 1200px) {
  /* Continue beside the answers, at the end of their row */
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; }
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock > .qform__head { grid-row: 1; }
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock > .qstep { grid-column: 1; grid-row: 2; }
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock > .qstep--done { grid-column: 1 / -1; }
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock > .qform__actions { grid-column: 2; grid-row: 2; margin-top: 0; }
  html:is([data-form="pills"], [data-form="line"], [data-form="bar"]) .qform--dock .qstep__error { line-height: 1.5rem; }
}

/* A pills: the question on its own line, the answers as pills after it, Continue at the end of their row. A plus turns
   into the check; the revenue (one answer) keeps a ring that fills */
html[data-form="pills"] .qform--dock .choices { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-form="pills"] .qform--dock .choice span { padding: 10px 18px 10px 12px; gap: 8px; border-radius: 999px; background: #fff; }
html[data-form="pills"] .qform--dock .choice span::before {
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%234A6470' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
html[data-form="pills"] .qform--dock .choices--radio .choice span::before { background: #fff; box-shadow: inset 0 0 0 1.5px #9AA9B1; }
html[data-form="pills"] .qform--dock .choice input:checked + span { border-color: var(--blue-text); background: #EEF6FF; box-shadow: inset 0 0 0 1px var(--blue-text); }
html[data-form="pills"] .qform--dock .choice input:checked + span::before {
  background: var(--blue-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
html[data-form="pills"] .qform--dock .choices--radio .choice input:checked + span::before { background: var(--blue-text) radial-gradient(circle, #fff 0 3.5px, transparent 4px); box-shadow: none; }

/* B one line: the question and its hint to the left, the answers in the middle, Continue at the end of the same line;
   the answers keep the square check, so it reads as the form as it was, folded into one line */
html[data-form="line"] .qform--dock .choices { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-form="line"] .qform--dock .choice span { border-radius: 10px; background: #fff; }
html[data-form="line"] .qform--dock .choice input:checked + span { background: rgba(0, 141, 249, .06); }
@media (min-width: 1200px) {
  html[data-form="line"] .qform--dock { --lead: clamp(216px, 18vw, 264px); align-items: center; }
  html[data-form="line"] .qform--dock > .qstep { display: grid; grid-template-columns: var(--lead) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 28px; align-items: center; }
  html[data-form="line"] .qform--dock .qstep legend { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
  html[data-form="line"] .qform--dock :is(.qstep__hint, .qstep__error) { grid-column: 1; grid-row: 2; align-self: start; position: static; margin: 2px 0 0; padding: 0; line-height: 1.375rem; }
  html[data-form="line"] .qform--dock :is(.choices, .fields) { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  html[data-form="line"] .qform--dock .check { grid-column: 2; grid-row: 3; margin-top: 10px; }
}

/* C bar: the question and its answers joined in one bar with Continue as its end cap, like a search bar; below 1200px
   the answers stay joined, in a grid under the question */
html[data-form="bar"] .qform--dock { --bar-edge: #C9D3DB; }
html[data-form="bar"] .qform--dock :is(.choices, .fields) { gap: 1px; border: 1px solid var(--bar-edge); border-radius: 12px; background: var(--rule); overflow: hidden; }
/* each cell fills its row, so the bar has no gaps when the question beside it is taller */
html[data-form="bar"] .qform--dock .choice { display: grid; }
html[data-form="bar"] .qform--dock .choice span { min-height: 52px; border: 0; border-radius: 0; background: #fff; }
html[data-form="bar"] .qform--dock .choice input:checked + span { background: #EEF6FF; box-shadow: none; }
html[data-form="bar"] .qform--dock .choice input:focus-visible + span { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  html[data-form="bar"] .qform--dock .choice:hover input:not(:checked) + span { background: #F7F9FB; }
}
/* the contact fields as cells, each label inside its cell */
html[data-form="bar"] .qform--dock .field { padding: 8px 14px 6px; background: #fff; transition: box-shadow 160ms var(--ease-out); }
html[data-form="bar"] .qform--dock .field label { margin-bottom: 0; color: var(--muted); font-size: .75rem; line-height: 1rem; }
html[data-form="bar"] .qform--dock .field input { height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; }
html[data-form="bar"] .qform--dock .field input:focus { box-shadow: none; }
html[data-form="bar"] .qform--dock .field:focus-within { box-shadow: inset 0 0 0 2px var(--blue-text); }
html[data-form="bar"] .qform--dock .field:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px #B42318; }
html[data-form="bar"] .qform--dock .field:has(input[aria-invalid="true"]) label { color: #B42318; }
@media (min-width: 1200px) {
  html[data-form="bar"] .qform--dock { column-gap: 0; align-items: stretch; isolation: isolate; }
  /* the bar's edge and lift, drawn once behind the question and the cap so the two read as one piece */
  html[data-form="bar"] .qform--dock::after {
    content: ""; grid-column: 1 / -1; grid-row: 2; z-index: -1; margin-top: 14px;
    border: 1px solid var(--bar-edge); border-radius: 14px; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 27, 37, .05), 0 10px 24px -16px rgba(0, 27, 37, .3);
  }
  html[data-form="bar"] .qform--dock:has(> .qstep--done:not([hidden]))::after { display: none; }
  html[data-form="bar"] .qform--dock > .qstep { display: grid; grid-template-columns: fit-content(240px) minmax(0, 1fr); grid-template-rows: auto auto; padding: 1px 0 1px 1px; }
  html[data-form="bar"] .qform--dock .qstep legend { grid-column: 1; grid-row: 1; align-self: end; margin: 0; padding: 12px 22px 0 19px; }
  html[data-form="bar"] .qform--dock :is(.qstep__hint, .qstep__error) { grid-column: 1; grid-row: 2; align-self: start; position: static; margin: 0; padding: 1px 22px 12px 19px; font-size: .8125rem; line-height: 1.25rem; }
  html[data-form="bar"] .qform--dock :is(.choices, .fields) { grid-column: 2; grid-row: 1 / 3; margin: 0; border: 0; border-inline: 1px solid var(--rule); border-radius: 0; }
  html[data-form="bar"] .qform--dock [data-step="1"] .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-form="bar"] .qform--dock .check { grid-column: 2; grid-row: 3; margin: 0; padding: 10px 16px; border-top: 1px solid var(--rule); border-inline: 1px solid var(--rule); }
  html[data-form="bar"] .qform--dock > .qform__actions { align-items: center; margin-top: 14px; padding: 8px 8px 8px 12px; }
}
.proof.proof--card {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0;
  margin: 0; padding: 18px clamp(24px, 3.4vw, 44px);
  background: var(--ground); border-top: 1px solid var(--rule); border-radius: 0 0 var(--r-l) var(--r-l);
}
.proof.proof--card li { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* hairlines between neighbours on a row */
.proof--card li:nth-child(even) { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--rule); }
.proof--card .proof__lead { flex: none; }
.proof--card .proof__score {
  font-family: var(--display); font-weight: 500; font-size: 2.25rem; line-height: 40px; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.proof--card .proof__seal { width: 42px; height: 42px; }
.proof--card .proof__badge { width: auto; height: 36px; }
.proof--card .proof__text { display: grid; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.proof--card .proof__text strong { font-size: .9375rem; font-weight: 600; color: var(--ink); }
/* five stars filled to the score: 4.8 fills four and most of the fifth */
.stars {
  display: block; width: 78px; height: 21px;
  background: linear-gradient(90deg, var(--ink) calc(var(--score) / 5 * 100%), #C3CCD6 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14'%3E%3Cg id='s'%3E%3Cpath d='M7 0l1.65 4.9h5.15L9.6 8l1.6 5L7 9.9 2.8 13l1.6-5L.2 4.9h5.15z'/%3E%3C/g%3E%3Cuse href='%23s' x='16'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='64'/%3E%3C/svg%3E") left center / 78px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14'%3E%3Cg id='s'%3E%3Cpath d='M7 0l1.65 4.9h5.15L9.6 8l1.6 5L7 9.9 2.8 13l1.6-5L.2 4.9h5.15z'/%3E%3C/g%3E%3Cuse href='%23s' x='16'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='64'/%3E%3C/svg%3E") left center / 78px 14px no-repeat;
}
@media (min-width: 1200px) {
  .proof.proof--card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof--card li + li { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  /* phones: the mark above its words, two to a row */
  .proof.proof--card { padding: 18px 24px 20px; gap: 18px 0; }
  .proof.proof--card li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .proof--card li:nth-child(even) { padding-left: 18px; }
  .proof--card .proof__score { font-size: 1.875rem; line-height: 34px; }
  .proof--card .proof__seal { width: 34px; height: 34px; }
  .proof--card .proof__badge { height: 30px; margin-block: 2px; }
  .proof--card .proof__text { font-size: .8125rem; }
}

/* ratings strip (hero A keeps the plain version) */
.proof {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin-top: clamp(28px, 3vw, 40px); padding-inline: clamp(24px, 3.4vw, 44px);
}
.proof li { display: grid; gap: 2px; font-size: .9375rem; line-height: 1.4; }
.proof strong { font-weight: 600; font-size: 1.0625rem; }
.proof span { color: var(--muted); }

/* ==========================================================================
   HERO LAYOUTS for review (?hero=a|b|c|dock|film). Only the chosen one renders;
   the docked form moves into hero A's slot and back (main.js).
   ========================================================================== */
html[data-hero]:not([data-hero="dock"]) [data-hero-variant="dock"],
html[data-hero]:not([data-hero="a"]) [data-hero-variant="a"],
html[data-hero]:not([data-hero="b"]) [data-hero-variant="b"],
html[data-hero]:not([data-hero="c"]) [data-hero-variant="c"],
html[data-hero]:not([data-hero="film"]) [data-hero-variant="film"],
/* without the head script there is no choice to read: show D, the final hero */
html:not([data-hero]) [data-hero-variant]:not([data-hero-variant="dock"]),
html[data-hero="a"] .intake { display: none; }

/* the parts that are not headline or lede arrive just after them */
.js .hero .rise { opacity: 0; transform: translateY(18px); }
.js body.is-ready .hero .rise { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) var(--rise-d, 520ms), transform 1000ms var(--ease-out) var(--rise-d, 520ms); }

/* masthead over a light hero */
.masthead.is-light { color: var(--ink); }

/* ---------- A. Split: light, the form floats over the photograph ---------- */
.hero--split { display: block; min-height: 0; overflow: visible; background: #fff; color: var(--ink); }
.hero--split::before, .hero--split::after { content: none; }
.hero--split :focus-visible { outline-color: var(--blue-text); }
.split { display: grid; gap: 40px; padding-top: calc(var(--masthead-h) + clamp(28px, 6vh, 72px)); padding-bottom: clamp(48px, 8vh, 88px); }
.split .hero__title { font-size: clamp(2.75rem, 1.3rem + 4.4vw, 5.5rem); }
.hero--split .hero__lede { max-width: 32rem; color: var(--muted); }
.proof--split { max-width: 32rem; margin-top: clamp(32px, 6vh, 64px); padding: 24px 0 0; border-top: 1px solid var(--rule); grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; --rise-d: 480ms; }
.split__stage { position: relative; --rise-d: 620ms; }
.split__media { overflow: hidden; height: clamp(260px, 64vw, 440px); border-radius: var(--r-l); background: var(--ink-deep); }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 86% 30%; }
.split__form { position: relative; z-index: 1; margin: -88px 12px 0; }
.qform--card { padding: clamp(22px, 2.4vw, 32px); }
@media (max-width: 1099px) {
  /* one column: the form comes straight after the lede, the ratings after the form */
  .split { gap: 0; }
  .split__copy { display: contents; }
  .split__stage { order: 1; margin-top: 40px; }
  .proof--split { order: 2; max-width: none; }
}
.qform--card .choice span { gap: 10px; padding: 10px 12px; font-size: .9375rem; }
@media (min-width: 1100px) {
  .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 5vw, 96px); align-items: center; }
  .split__media { height: clamp(540px, calc(100svh - 230px), 700px); }
  .split__form { position: absolute; left: -48px; bottom: 32px; width: 476px; margin: 0; }
}

/* ---------- B. Case file: dark, the proof is the picture ---------- */
.hero--case { display: block; background: var(--ink-deep); }
.hero--case::before, .hero--case::after { content: none; }
.casehero { display: grid; gap: 48px; padding-top: calc(var(--masthead-h) + clamp(36px, 7vh, 96px)); padding-bottom: calc(var(--dock-overlap) + clamp(40px, 6vh, 72px)); }
.casehero .hero__title { font-size: clamp(2.75rem, 1.3rem + 4.4vw, 5.5rem); }
.casehero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; --rise-d: 480ms; }
@media (min-width: 1100px) { .casehero { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(48px, 6vw, 112px); align-items: center; } }
.casefile { --rise-d: 640ms; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--r-l); background: var(--ink-raised); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .7); }
.casefile__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-dark); }
.casefile__head .tag { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.casefile__head strong { grid-column: 1; grid-row: 1; font-size: 1.0625rem; font-weight: 600; }
.casefile__head > span:last-child { grid-column: 1; grid-row: 2; font-size: .9375rem; color: var(--muted-dark); }
.casefile__lead { padding: 22px 0 24px; border-bottom: 1px solid var(--rule-dark); }
.casefile__metric { font-size: .9375rem; color: var(--muted-dark); }
.casefile__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 8px; }
.casefile__big span { font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(4rem, 3rem + 3vw, 5.5rem); font-weight: var(--fig-w); line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.casefile__big small { font-size: .9375rem; color: var(--blue-on-dark); }
.casefile__bars { display: grid; gap: 8px; margin-top: 22px; }
.casefile__bars span { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; --fill: var(--muted-dark); }
.casefile__bars span:last-child { --fill: var(--blue); }
.casefile__bars i { font-style: normal; font-size: .8125rem; color: var(--muted-dark); }
.casefile__bars span::after {
  content: ""; height: 8px; border-radius: 4px;
  background: linear-gradient(var(--fill), var(--fill)) 0 0 / calc(var(--v) * 100%) 100% no-repeat, rgba(255, 255, 255, .07);
}
.js .casefile__bars span::after { background-size: 0 100%, auto; }
.js body.is-ready .casefile__bars span::after { background-size: calc(var(--v) * 100%) 100%, auto; transition: background-size 1300ms var(--ease-out) 900ms; }
.casefile__rows > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-dark); }
.casefile__rows dt { font-size: .9375rem; color: var(--muted-dark); }
.casefile__rows dd { display: flex; align-items: center; gap: 8px; margin-left: auto; font-variant-numeric: tabular-nums; }
.casefile__rows dd span { color: var(--muted-dark); }
.casefile__rows dd svg { width: 14px; height: 14px; color: var(--blue-on-dark); }
.casefile__rows dd strong { font-size: 1.0625rem; font-weight: 600; }
.casefile__src { margin-top: 16px; font-size: .8125rem; color: var(--muted-dark); }
.casefile__src a { color: inherit; text-underline-offset: 2px; }

/* ---------- client film (hero D): the live site's banner testimonial, as a card under the lede ---------- */
.hero__film { --rise-d: 520ms; margin-top: clamp(24px, 3.4vh, 36px); }
.film {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 6px 22px 6px 6px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; text-decoration: none;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.film__thumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: var(--ink-raised); }
.film__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.film__play {
  position: absolute; left: 6px; bottom: 6px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
  transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.film__play svg { width: 13px; height: 13px; margin-left: 2px; }
.film__text { display: grid; gap: 1px; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .7); }
.film__text strong { font-size: 1rem; font-weight: 600; color: #fff; }
.film__kicker { color: var(--blue-on-dark); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .film:hover { background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
  .film:hover .film__thumb img { transform: scale(1.06); }
  .film:hover .film__play { transform: scale(1.08); background: var(--blue); color: #fff; }
}
.film:active .film__play { transform: scale(.94); }
.film:focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: 3px; }
@media (max-width: 640px) {
  .film { display: flex; gap: 14px; padding-right: 14px; }
  .film__thumb { width: 92px; }
  .film__text { font-size: .8125rem; }
  .film__text strong { font-size: .9375rem; }
}

/* the lightbox: native <dialog>, so focus is held and Escape closes it */
.filmbox {
  width: min(calc(100% - 32px), 1040px, calc((100svh - 190px) * 16 / 9)); max-width: none; max-height: none;
  padding: 0; border: 0; background: transparent; color: #fff; overflow: visible;
}
.filmbox::backdrop { background: rgba(0, 18, 25, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.filmbox[open] { animation: film-in 340ms var(--ease-out); }
.filmbox[open]::backdrop { animation: fade-in 340ms var(--ease-out); }
@keyframes film-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.filmbox__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.filmbox__title { font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.filmbox__title strong { display: block; font-size: 1.125rem; font-weight: 600; color: #fff; }
.filmbox__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color 160ms var(--ease-out); }
.filmbox__close svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .filmbox__close:hover { background: rgba(255, 255, 255, .2); } }
.filmbox__close:focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: 2px; }
.filmbox__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-l); background: #000; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8); }
.filmbox__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.filmbox__src { margin-top: 14px; font-size: .8125rem; color: var(--muted-dark); }
.filmbox__src a { color: #fff; text-underline-offset: 3px; white-space: nowrap; }
.filmbox__src svg { display: inline-block; width: 12px; height: 12px; margin-left: 2px; vertical-align: -1px; }

/* ---------- E. Film: the photograph is the film's poster; play sits on the right, beside the person ---------- */
/* a little taller than D: the photograph is the poster here, so it gets more room above the person */
.hero--film { --play-x: 60%; --play-y: 47%; min-height: clamp(580px, calc(100svh - 170px), 880px); }
html[data-bg] .hero--film .hero__media { background-position-y: 30%; }
/* where play sits depends on where the person stands in each photograph */
html[data-bg="steps"] .hero--film { --play-x: 60%; --play-y: 47%; }
html[data-bg="corridor"] .hero--film { --play-x: 58%; --play-y: 54%; }
html[data-bg="courtroom"] .hero--film { --play-x: 64%; --play-y: 50%; }
html[data-bg="call"] .hero--film { --play-x: 56%; --play-y: 56%; }
html[data-bg="client"] .hero--film { --play-x: 56%; --play-y: 52%; }
html[data-bg="rain"] .hero--film { --play-x: 56%; --play-y: 54%; }
html[data-bg="court"] .hero--film { --play-x: 72%; --play-y: 46%; }
html[data-bg="office"] .hero--film { --play-x: 64%; --play-y: 44%; }
html[data-bg="city"] .hero--film { --play-x: 72%; --play-y: 46%; }
html[data-bg="phone"] .hero--film { --play-x: 66%; --play-y: 44%; }
/* the words stay above the poster link; only the copy itself takes clicks */
.hero--film .hero__body { position: relative; z-index: 1; pointer-events: none; }
.hero--film .hero__copy { pointer-events: auto; }
.hero__poster { position: absolute; top: 0; right: 0; bottom: var(--dock-overlap); left: 50%; }
.playfilm {
  --rise-d: 640ms;
  position: absolute; z-index: 2; left: var(--play-x); top: var(--play-y); translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  color: #fff; text-align: center; text-decoration: none;
}
.playfilm__btn {
  position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7);
  transition: transform 260ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.playfilm__btn svg { width: 30px; height: 30px; margin-left: 4px; }
/* a hairline ring around the button, the way a player marks its poster */
.playfilm__btn::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  transition: transform 360ms var(--ease-out), opacity 360ms var(--ease-out);
}
.playfilm__text { display: grid; gap: 2px; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 14px rgba(0, 18, 25, .8); white-space: nowrap; }
.playfilm__text strong { font-size: 1.0625rem; font-weight: 600; color: #fff; }
.playfilm:focus-visible { outline: none; }
.playfilm:focus-visible .playfilm__btn { outline: 2px solid var(--blue-on-dark); outline-offset: 16px; }
.playfilm:active .playfilm__btn { transform: scale(.96); }
/* hovering anywhere on the poster readies the button and lifts the photograph a touch */
.js body.is-ready .hero--film .hero__media { transition: transform 2400ms var(--ease-out), filter 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .hero--film:has(.hero__poster:hover, .playfilm:hover) .hero__media { filter: brightness(1.12); }
  .hero--film:has(.hero__poster:hover, .playfilm:hover) .playfilm__btn { transform: scale(1.06); background: var(--blue); color: #fff; }
  .hero--film:has(.hero__poster:hover, .playfilm:hover) .playfilm__btn::before { transform: scale(1.18); opacity: 0; }
}
/* the compact card only stands in where the poster can't work */
.hero__film--compact { display: none; }
@media (max-width: 1099px) {
  .hero__poster, .playfilm { display: none; }
  .hero__film--compact { display: block; }
}

/* ---------- C. Search: the first question is the one clients ask Google ---------- */
.hero--search { text-align: center; }
/* dark where the words and the search bar sit, opening up toward the edges so the photograph still reads */
.hero--search::before { background: radial-gradient(64% 58% at 50% 46%, rgba(0, 27, 37, .88) 0%, rgba(0, 27, 37, .78) 46%, rgba(0, 27, 37, .42) 100%); }
.searchhero { display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--masthead-h) + clamp(40px, 9vh, 120px)); padding-bottom: calc(var(--dock-overlap) + clamp(40px, 6vh, 72px)); }
.searchhero .hero__title { font-size: clamp(2.75rem, 1.2rem + 5vw, 6rem); }
.hero--search .hero__lede { max-width: 36rem; margin-inline: auto; }
.seek { --rise-d: 560ms; width: min(100%, 760px); margin-top: clamp(32px, 5vh, 52px); }
.seek__label { display: block; margin-bottom: 14px; font-size: .9375rem; color: rgba(255, 255, 255, .72); }
.seek__bar {
  display: flex; align-items: center; gap: 12px;
  height: 68px; padding: 6px 6px 6px 24px;
  border-radius: 999px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  transition: box-shadow 200ms var(--ease-out);
}
.seek__bar:focus-within { box-shadow: 0 0 0 4px rgba(0, 141, 249, .45), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.seek__bar > svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.seek__bar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 1.125rem; }
.seek__bar input::placeholder { color: #8A9AA3; }
.seek__bar .btn { min-height: 56px; border-radius: 999px; padding-inline: 28px; }
.seek__try { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: .875rem; color: rgba(255, 255, 255, .66); }
.seek__try span { width: 100%; margin-bottom: 2px; }
.seek__try button { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .seek__try button:hover { border-color: #fff; background: rgba(255, 255, 255, .06); } }
.qform__market { padding: 4px 12px; border-radius: 999px; background: rgba(0, 141, 249, .08); color: var(--blue-text); font-size: .875rem; }
.qform__market strong { font-weight: 600; }
.qform--card .qform__head { flex-wrap: wrap; row-gap: 10px; }
.qform--card .qform__market { order: 3; }

/* ==========================================================================
   ON THE RECORD: pleading-paper rankings
   ========================================================================== */
.record__grid { display: grid; gap: 48px; }
.record__intro .lede { margin-top: 20px; max-width: 30rem; }
.record__intro .link { margin-top: 28px; }
@media (min-width: 960px) {
  .record__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .record__intro { position: sticky; top: calc(var(--masthead-h) + 48px); }
}
.pleading {
  position: relative;
  counter-reset: line;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* the double rule of a pleading page */
.pleading::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 52px; width: 4px;
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.pleading li {
  counter-increment: line;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center;
  padding: 26px 0 26px 84px;
}
.pleading li + li { border-top: 1px solid var(--rule); }
.pleading li::before {
  content: counter(line);
  position: absolute; left: 0; top: 50%; width: 36px; transform: translateY(-50%);
  text-align: right; font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pleading__q {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.25; letter-spacing: -0.015em;
}
.pleading__q svg { flex: none; width: 18px; height: 18px; color: var(--blue-text); }
.pleading__a { font-size: .9375rem; line-height: 1.4; text-align: right; color: var(--ink); font-weight: 500; }
.pleading__a small { display: block; font-size: .8125rem; font-weight: 400; color: var(--muted); }
/* ---------- rankings layouts for review (?record=map|search|index|pleading); only the chosen one renders ---------- */
html[data-record]:not([data-record="map"]) [data-record-variant="map"],
html[data-record]:not([data-record="search"]) [data-record-variant="search"],
html[data-record]:not([data-record="index"]) [data-record-variant="index"],
html[data-record]:not([data-record="pleading"]) [data-record-variant="pleading"],
html:not([data-record]) [data-record-variant]:not([data-record-variant="search"]) { display: none; }

/* A and C take the full width, so the heading runs across the top: headline left, the lede and link beside it */
@media (min-width: 960px) {
  :is(html[data-record="map"], html[data-record="index"]) .record__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 5.6vw, 88px); }
  :is(html[data-record="map"], html[data-record="index"]) .record__intro { position: static; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
  :is(html[data-record="map"], html[data-record="index"]) .record__intro .h2 { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
  :is(html[data-record="map"], html[data-record="index"]) .record__intro .lede { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
  :is(html[data-record="map"], html[data-record="index"]) .record__intro .link { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 20px; }
}

/* A. map: dots for the land, blue full stops for the markets */
.rmap { margin: 0; }
.rmap__canvas { position: relative; color: #BDC8D2; }
.rmap__land { display: block; width: 100%; height: auto; overflow: visible; }
.rmap__land path { fill: none; stroke: currentColor; stroke-width: 5.50; stroke-linecap: round; }
.rmap__pin {
  position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(0, 141, 249, .14);
}
.rmap__leaders { display: none; }
.rmap__list { display: grid; gap: 24px 40px; margin-top: 36px; }
.rmap__list li { display: grid; gap: 2px; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.rmap__q { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.rmap__q svg { flex: none; width: 15px; height: 15px; color: var(--blue-text); }
.rmap__firm { color: var(--ink); }
.rmap__site { font-size: .8125rem; }
@media (min-width: 640px) { .rmap__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .rmap__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* wide screens: the labels sit in the margins around the map, each tied to its city by a hairline */
@media (min-width: 1200px) {
  .rmap { position: relative; aspect-ratio: 1320 / 670; }
  .rmap__canvas { position: absolute; left: 21.970%; top: 14.328%; width: 56.061%; }
  .rmap__leaders { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .rmap__leaders line { stroke: var(--ink); stroke-opacity: .32; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .rmap__list { display: block; margin: 0; }
  /* labels take the width of their words; side labels may wrap, but only inside their own margin */
  .rmap__list li { position: absolute; width: max-content; }
  .rmap__list [data-side="left"] { max-width: var(--lx); }
  .rmap__list [data-side="right"] { max-width: calc(100% - var(--lx)); }
  .rmap__list [data-side="left"] { right: calc(100% - var(--lx)); top: var(--ly); transform: translateY(-50%); text-align: right; }
  .rmap__list [data-side="right"] { left: var(--lx); top: var(--ly); transform: translateY(-50%); }
  .rmap__list [data-side="top"] { left: var(--lx); bottom: calc(100% - var(--ly)); transform: translateX(-50%); text-align: center; }
  .rmap__list [data-side="bottom"] { left: var(--lx); top: var(--ly); transform: translateX(-50%); text-align: center; }
  .rmap__list [data-side="left"] .rmap__q { justify-content: flex-end; }
  .rmap__list :is([data-side="top"], [data-side="bottom"]) .rmap__q { justify-content: center; }
  .rmap__list li { font-size: .8125rem; }
  .rmap__q { font-size: .9375rem; }
  .rmap__q svg { display: none; }
}

/* tablets: no room for the margin labels, so each full stop is tagged with its city; the list below carries the rest */
@media (min-width: 640px) and (max-width: 1199px) {
  .rmap__pin::after {
    content: attr(data-city); position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%);
    padding: 2px 7px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--rule);
    font-size: .75rem; font-weight: 600; line-height: 1.4; color: var(--ink); white-space: nowrap;
  }
  .rmap__pin[data-place="left"]::after { left: auto; right: calc(100% + 9px); }
  .rmap__pin[data-place="above"]::after { left: 50%; top: auto; bottom: calc(100% + 11px); transform: translateX(-50%); }
}
/* B. search (final): the field types each search and the client firm that ranks for it is the result.
   The tabs underneath pick the search; the active tab's line fills while it waits and moves on when full. */
.rsearch__stage { display: grid; gap: 20px; padding: clamp(20px, 3.4vw, 44px); border-radius: var(--r-l); background: var(--ground); }
.rsearch__box {
  display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 26px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 18px 40px -26px rgba(0, 27, 37, .4);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); letter-spacing: -.01em; color: var(--ink);
}
.rsearch__box svg { flex: none; width: 20px; height: 20px; color: var(--blue-text); }
.rsearch__typed { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the caret blinks a few times after each search is typed, then stays */
.rsearch__typed::after {
  content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.16em;
  background: var(--blue); animation: caret 1.1s steps(1) 3;
}
.rsearch.is-typing .rsearch__typed::after { animation: none; }
/* before the next search, the last one shows as selected for a beat, the way you would select it to type over it */
.rsearch__typed.is-selected { border-radius: 3px; background: rgba(0, 141, 249, .2); }
.rsearch__typed.is-selected::after { visibility: hidden; }
@keyframes caret { 50% { opacity: 0; } }

/* the result: one card per search, all stacked in one cell, so the panel keeps the tallest card's height and
   nothing below jumps when a two-line firm name follows a one-line one; only the active card is shown */
.js .rsearch__panels { display: grid; }
.js .rsearch__panel { grid-area: 1 / 1; }
/* the change of result is a crossfade (31 Oct, "the animation is very crappy, fix it smooth transitions"): the new card
   fades in on top of the last one, which stays put underneath until it is covered, so the frame never empties and the
   ground never shows through. It was: the old card vanished, then the new one rose 8px in 360ms */
.js .rsearch__panel:not(.is-active) { visibility: hidden; transition: visibility 0s linear 520ms; }
.js .rsearch__panel.is-active { z-index: 1; transition: opacity 520ms var(--ease-fade), transform 720ms var(--ease-out); }
.js .rsearch__panels .rsearch__panel.is-waiting { opacity: 0; transform: translateY(4px); transition: none; }
.rcard { height: 100%; }
.rcard { padding: 22px 24px 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 12px 32px -24px rgba(0, 27, 37, .35); }
.rcard__head { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.rcard__mark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px;
  background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule); font-size: 1.0625rem; font-weight: 600; color: var(--ink);
}
/* each firm's own favicon, from its website (31 Oct, on request; was its first letter on a grey tile). The icons drawn on
   their own ground (Shaked's dark tile, Sachdev's white, Berenji's cream) fill the tile; the rest sit on white */
.rcard__mark { position: relative; overflow: hidden; background: #fff; }
.rcard__mark img { width: 30px; height: 30px; }
.rcard__mark--fill img { width: 100%; height: 100%; }
.rcard__mark--fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 44, 60, .1); }
.rcard__title { display: grid; gap: 2px; min-width: 0; }
.rcard__title strong { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--blue-text); }
.rcard__title span { font-size: .875rem; color: var(--muted); }
/* the tag carries the brand's full stop */
.rcard__badge {
  display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 11px 5px 10px; border-radius: 999px;
  background: var(--ground); font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--ink); white-space: nowrap;
}
.rcard__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.rcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; padding: 16px 0 0 60px; border-top: 1px solid var(--rule); }
.rcard__facts { display: flex; flex-wrap: wrap; gap: 12px 44px; }
.rcard__facts dt { font-size: .8125rem; color: var(--muted); }
.rcard__facts dd { margin: 2px 0 0; font-size: .9375rem; font-weight: 500; color: var(--ink); }
/* the field above already shows the search; the card keeps it for screen readers and for the list without JS */
.js .rcard__q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the tabs: a city over a thin line; the active line fills while it waits */
.rsearch__controls { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.rtabs { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.rtabs button {
  display: grid; gap: 10px; padding: 6px 0 4px; border-radius: 4px; text-align: left;
  font-size: .9375rem; line-height: 1.3; color: var(--muted); white-space: nowrap; transition: color 160ms var(--ease-out);
}
.rtabs button[aria-selected="true"] { color: var(--ink); }
.rtabs__track { position: relative; height: 2px; overflow: hidden; border-radius: 2px; background: #D3DAE2; }
.rtabs__fill { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; }
/* the fill only runs once the script has the widget live, so a page without motion never moves on */
.rsearch.is-live [aria-selected="true"] .rtabs__fill { animation: rtab-fill 6s linear forwards; }
@keyframes rtab-fill { to { transform: none; } }
/* paused by the button, held while pointed at or focused, and waiting while off screen */
.rsearch.is-live:is(.is-paused, .is-held, .is-away) [aria-selected="true"] .rtabs__fill { animation-play-state: paused; }
/* not live (reduced motion, or no script yet): nothing moves on by itself, so the active line simply shows full */
.rsearch:not(.is-live) [aria-selected="true"] .rtabs__fill { transform: none; }
.rsearch__pause {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--rule); transition: box-shadow 160ms var(--ease-out);
}
.rsearch__pause svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .rtabs button[aria-selected="false"]:hover { color: var(--ink); }
  .rsearch__pause:hover { box-shadow: 0 0 0 1px var(--ink); }
}
:is(.rtabs button, .rsearch__pause):focus-visible { outline: 2px solid var(--blue-text); outline-offset: 4px; }
/* without JS: no field, no tabs, the six cards as a list */
html:not(.js) :is(.rsearch__box, .rsearch__controls) { display: none; }
html:not(.js) .rsearch__panels { display: grid; gap: 12px; }

/* ==========================================================================
   The search's finish (31 Oct, "how can we make it more visually appealing", then "can we change the bg generate some
   abstract image"; final the same day: C pages). The layout is unchanged: the field, the result and the tabs on one
   panel; only the panel's ground and the depth on it change. Shared: the result sits on a deck, two cards' edges
   peeking under it for the searches still to come, and the tag takes the blue. Final: C pages, the edges of a stack of
   case files. ?rs=current is the grey panel as it was; set aside, reachable with ?rs=: night (the city), and the other
   abstract photographs from the law's own materials, bloom (fountain-pen ink in water) and seal (a wordless embossed
   seal), then ink (deep ink, a blue light behind the result) and daylight (a light blue wash)
   ========================================================================== */
html.js:not([data-rs="current"]) .rsearch__panels { position: relative; isolation: isolate; margin-bottom: 16px; }
html.js:not([data-rs="current"]) .rsearch__panels::before,
html.js:not([data-rs="current"]) .rsearch__panels::after {
  content: ""; position: absolute; z-index: -1; height: 48px; border-radius: 14px; background: #fff;
  transition: opacity 360ms var(--ease-out);
}
/* only their lower edges, under the card (whole cards showed as empty blocks when the card used to vanish, 31 Oct) */
html.js:not([data-rs="current"]) .rsearch__panels::before { right: 16px; bottom: -8px; left: 16px; opacity: var(--deck-1, .55); }
html.js:not([data-rs="current"]) .rsearch__panels::after { right: 34px; bottom: -16px; left: 34px; opacity: var(--deck-2, .28); }
html:not([data-rs="current"]) .rcard__badge { background: rgba(0, 141, 249, .09); color: var(--blue-text); }

/* the photographic grounds: the photo under an ink veil that deepens toward the tabs, so they always read; each photo
   sets its own veil */
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"]) .rsearch__stage {
  position: relative; isolation: isolate; overflow: hidden;
  background: #04202B 50% 50% / cover no-repeat;
}
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"]) .rsearch__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 27, 37, var(--veil-a, .28)) 0%, rgba(0, 27, 37, var(--veil-b, .46)) 50%, rgba(0, 27, 37, var(--veil-c, .82)) 100%);
}
/* A city: the city at night from above */
html[data-rs="night"] .rsearch__stage { background-image: url(../img/hero-city.jpg); }
/* B bloom: cobalt ink unfurling at the edges, calm and dark in the middle; a little more veil to settle its blue */
html[data-rs="bloom"] .rsearch__stage { background-image: url(../img/rs-bloom.jpg); --veil-a: .3; --veil-b: .38; --veil-c: .78; }
/* C pages: the edges of the case files sweeping across in cool light; already dark, so a light veil */
html[data-rs="pages"] .rsearch__stage { background-image: url(../img/rs-pages.jpg); background-position: 30% 50%; --veil-a: .08; --veil-b: .2; --veil-c: .7; }
/* D seal: the seal's rings at the right edge, the dyed paper elsewhere */
html[data-rs="seal"] .rsearch__stage { background-image: url(../img/rs-seal.jpg); background-position: 100% 50%; --veil-a: .12; --veil-b: .26; --veil-c: .74; }

/* ink (set aside): the deep ink of the dark sections, a blue light rising behind the result */
html[data-rs="ink"] .rsearch__stage {
  background:
    radial-gradient(55% 50% at 50% 52%, rgba(0, 141, 249, .24), transparent 72%),
    radial-gradient(80% 60% at 100% 0%, rgba(92, 182, 255, .12), transparent 60%),
    linear-gradient(180deg, #072B39, #021821);
}

/* the dark grounds: the tabs, the pause and the shadows turn for them */
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rsearch__stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -36px rgba(0, 27, 37, .6); }
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rsearch__box { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7); }
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rcard { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75); }
/* the deck in frosted glass on the dark grounds (white at part strength read as grey bars) */
html.js:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rsearch__panels::before { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); opacity: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.js:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rsearch__panels::after { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rtabs button { color: rgba(255, 255, 255, .66); }
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rtabs button[aria-selected="true"] { color: #fff; }
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rtabs__track { background: rgba(255, 255, 255, .2); }
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rsearch__pause { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .24); }
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) :is(.rtabs button, .rsearch__pause):focus-visible { outline-color: var(--blue-on-dark); }
@media (hover: hover) and (pointer: fine) {
  html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rtabs button[aria-selected="false"]:hover { color: #fff; }
  html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rsearch__pause:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
}

/* daylight (set aside): a light ground washed with the brand blue from two corners; the cards on blue-tinted shadows */
html[data-rs="daylight"] .rsearch__stage {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(0, 141, 249, .16), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(92, 182, 255, .14), transparent 66%),
    linear-gradient(180deg, #F7FAFD, #EDF3F9);
  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, .1);
}
html[data-rs="daylight"] .rsearch__box { box-shadow: 0 0 0 1px rgba(0, 44, 60, .08), 0 18px 40px -22px rgba(0, 60, 130, .38); }
html[data-rs="daylight"] .rcard { box-shadow: 0 0 0 1px rgba(0, 44, 60, .07), 0 28px 56px -28px rgba(0, 60, 130, .4); }
html[data-rs="daylight"] .rsearch__panels { --deck-1: 1; --deck-2: 1; }
html.js[data-rs="daylight"] .rsearch__panels::before { box-shadow: 0 0 0 1px rgba(0, 44, 60, .07), 0 10px 24px -16px rgba(0, 60, 130, .3); }
html.js[data-rs="daylight"] .rsearch__panels::after { background: #F9FBFD; box-shadow: 0 0 0 1px rgba(0, 44, 60, .06); }
html[data-rs="daylight"] .rtabs__track { background: rgba(0, 44, 60, .14); }

/* ==========================================================================
   The search's tabs (31 Oct, "what else can we do with bottom switcher + progress lines"; final the same day: A glide).
   The six cities and the 6s line that moves the search on are the same in each look. ?rt=current is the cities over
   thin lines, as it was; set aside, reachable with ?rt=: pills and route
   ========================================================================== */
.rsearch {
  --rt-glass: rgba(0, 44, 60, .04); --rt-edge: rgba(0, 44, 60, .1); --rt-line: #D3DAE2; --rt-node: #fff;
  --rt-pill-fill: rgba(0, 141, 249, .16); --rt-pill-edge: var(--blue-text);
}
html:is([data-rs="night"], [data-rs="bloom"], [data-rs="pages"], [data-rs="seal"], [data-rs="ink"]) .rsearch {
  --rt-glass: rgba(255, 255, 255, .08); --rt-edge: rgba(255, 255, 255, .16); --rt-line: rgba(255, 255, 255, .24); --rt-node: #0A2631;
  --rt-pill-fill: rgba(0, 141, 249, .42); --rt-pill-edge: rgba(92, 182, 255, .85);
}

/* A glide: the cities in one glass track; a white marker slides to the active one (placed by script from the tab
   itself), and the 6s runs round the pause button's edge */
html[data-rt="glide"] .rtabs {
  position: relative; gap: 0; padding: 4px; border-radius: 26px;
  background: var(--rt-glass); box-shadow: inset 0 0 0 1px var(--rt-edge);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* a real element, made by script: Chrome wouldn't transition a ::before whose place came from the tab */
.rtabs__marker { display: none; }
html[data-rt="glide"] .rtabs__marker {
  display: block; position: absolute; top: 0; left: 0; width: var(--rt-w, 0); height: var(--rt-h, 0);
  transform: translate(var(--rt-x, 0), var(--rt-y, 0)); border-radius: 22px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 27, 37, .14), 0 8px 18px -10px rgba(0, 27, 37, .55);
}
html[data-rt="glide"] .rtabs.is-placed .rtabs__marker { transition: transform 560ms var(--ease-in-out), width 560ms var(--ease-in-out), height 560ms var(--ease-in-out); }
html[data-rt="glide"] .rtabs button { position: relative; justify-items: center; gap: 0; padding: 12px 8px; border-radius: 22px; font-size: .875rem; text-align: center; }
html[data-rt="glide"] .rtabs button[aria-selected="true"] { color: var(--ink); }
/* the timer runs round the pause button's edge, not under the marker (31 Oct, "remove progress from each pill and make
   the progress bar border of pause button with gradient in border + subtle glow at the moving point"). The line under
   the city still runs, unseen, since the next search comes up when it ends */
html[data-rt="glide"] .rtabs__track { position: absolute; right: 18px; bottom: 6px; left: 18px; visibility: hidden; }
@property --rt-p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes rt-ring { from { --rt-p: 0; } to { --rt-p: 1; } }
html[data-rt="glide"] .rsearch__pause { position: relative; }
html[data-rt="glide"] .rsearch.is-live .rsearch__pause.is-ticking { animation: rt-ring 6s linear forwards; }
html[data-rt="glide"] .rsearch.is-live:is(.is-paused, .is-held, .is-away) .rsearch__pause { animation-play-state: paused; }
/* the ring: 2px on the button's edge, a faint blue where the search began brightening to its point */
html[data-rt="glide"] .rsearch.is-live .rsearch__pause::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(0, 141, 249, 0) 0turn, rgba(0, 141, 249, .6) calc(var(--rt-p) * .55turn), #6CBEFF calc(var(--rt-p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
/* and a soft light at the moving point */
html[data-rt="glide"] .rsearch.is-live .rsearch__pause::after {
  content: ""; position: absolute; top: -2px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
  background: #E6F4FF; box-shadow: 0 0 5px 1px rgba(108, 190, 255, .85), 0 0 12px 2px rgba(0, 141, 249, .35);
  transform-origin: 2px 20px; transform: rotate(calc(var(--rt-p) * 1turn));
}
html[data-rt="glide"] .rtabs button:focus-visible { outline-offset: 2px; }

/* B pills: each city a glass pill; the active one fills with blue from the left while it waits */
/* each pill as wide as its city, so Los Angeles has the room it needs and the six still fill the row */
html[data-rt="pills"] .rtabs { display: flex; gap: 6px; min-width: 0; }
html[data-rt="pills"] .rtabs button {
  position: relative; isolation: isolate; overflow: hidden; display: block; flex: 1 1 auto; padding: 9px 9px; border-radius: 999px;
  font-size: .875rem; text-align: center; white-space: nowrap;
  background: var(--rt-glass); box-shadow: inset 0 0 0 1px var(--rt-edge);
  transition: color 160ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
html[data-rt="pills"] .rtabs button[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--rt-pill-edge); }
html[data-rt="pills"] .rtabs__track { position: absolute; inset: 0; z-index: -1; height: auto; border-radius: inherit; background: none; }
html[data-rt="pills"] .rtabs__fill { background: var(--rt-pill-fill); }

/* C route: the cities as stops on one line; the line fills from stop to stop and stays filled behind, so the run
   through all six reads as one journey, and empties smoothly when it starts again */
html[data-rt="route"] .rtabs { gap: 0; }
html[data-rt="route"] .rtabs button { position: relative; gap: 12px; padding: 0 0 2px; border-radius: 0; }
html[data-rt="route"] .rtabs button > span:not(.rtabs__track) { padding-right: 10px; }
html[data-rt="route"] .rtabs__track { order: -1; margin-top: 4px; border-radius: 0; background: var(--rt-line); }
html[data-rt="route"] .rtabs__fill { transition: transform 700ms var(--ease-in-out); }
html[data-rt="route"] .rtabs button:has(~ [aria-selected="true"]) .rtabs__fill { transform: none; }
html[data-rt="route"] .rtabs button::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rt-node); box-shadow: inset 0 0 0 2px var(--rt-line);
  transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
html[data-rt="route"] .rtabs button:has(~ [aria-selected="true"])::before { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
html[data-rt="route"] .rtabs button[aria-selected="true"]::before { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 5px rgba(0, 141, 249, .22); }
html[data-rt="route"] .rtabs button:focus-visible { outline-offset: 6px; }

/* the six cities need about 490px in a row beside the pause. Narrower (the two columns from about 1000 to 1250 wide,
   and phones) they sit three to a row in every look, Current too, where New York and Los Angeles used to run into
   their neighbours (31 Oct) */
.rsearch__controls { container: rsc / inline-size; }
@container rsc (max-width: 540px) {
  .rtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  html[data-rt="glide"] .rtabs { row-gap: 0; }
  html[data-rt="pills"] .rtabs { flex-wrap: wrap; row-gap: 8px; }
  html[data-rt="pills"] .rtabs button { flex: 1 1 28%; padding-inline: 6px; }
  html[data-rt="route"] .rtabs { row-gap: 18px; }
}


/* C. index: the cities set large, hairlines between them */
.rindex { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.rindex li { display: flex; flex-direction: column; padding: 30px 0 32px; border-top: 1px solid var(--rule); }
.rindex__city {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--display); font-weight: 500; font-size: clamp(2.375rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -.045em; color: var(--ink);
}
.rindex__state { padding-top: .3em; font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.rindex__q { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 1rem; color: var(--ink); }
.rindex__q svg { flex: none; width: 15px; height: 15px; color: var(--blue-text); }
.rindex__firm { margin-top: auto; padding-top: 32px; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.rindex__firm small { display: block; font-size: .8125rem; font-weight: 400; color: var(--muted); }
@media (min-width: 640px) and (max-width: 959px) {
  .rindex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rindex li:nth-child(odd) { padding-right: 32px; }
  .rindex li:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--rule); }
}
@media (min-width: 960px) {
  .rindex { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rindex li { padding-right: clamp(24px, 3vw, 44px); }
  .rindex li:not(:nth-child(3n+1)) { padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--rule); }
}

@media (max-width: 640px) {
  .rsearch__box { height: 56px; padding: 0 18px; gap: 10px; font-size: 1rem; }
  .rcard { padding: 18px 18px 16px; }
  .rcard__head { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .rcard__mark { width: 40px; height: 40px; border-radius: 10px; }
  .rcard__mark:not(.rcard__mark--fill) img { width: 28px; height: 28px; }
  .rcard__foot { padding-left: 0; }
  .rcard__facts { gap: 12px 32px; }
  /* phones: the six tabs in two rows of three, pause under them */
  .rsearch__controls { flex-direction: column; align-items: stretch; gap: 14px; }
  .rtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .rsearch__pause { align-self: flex-end; }
  /* a phone-width map: smaller full stops, so Los Angeles and San Diego stay two */
  .rmap__pin { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(0, 141, 249, .14); }
  .rindex li { padding: 24px 0 26px; }
  .rindex__q { margin-top: 14px; }
  .rindex__firm { padding-top: 20px; }
  .pleading::before { left: 30px; }
  .pleading li { grid-template-columns: 1fr; padding: 20px 0 20px 50px; }
  .pleading li::before { width: 18px; }
  .pleading__a { text-align: left; padding-left: 30px; }
}

/* ==========================================================================
   EXHIBIT A
   ========================================================================== */
.exhibit__head { max-width: 58rem; }
/* the case opens on the firm's own logo, in one ink for the band */
.exhibit__logo { display: block; width: auto; height: clamp(44px, 2.6rem + 1.4vw, 60px); }
.exhibit__head .h2 { margin-top: clamp(28px, 3vw, 36px); }
.exhibit__head .lede { margin-top: 24px; max-width: 46rem; }
/* the headline sets in two lines where it fits: the firm and what grew, then the numbers */
.exhibit__br { display: none; }
@media (min-width: 1100px) {
  .exhibit__head { max-width: none; }
  /* the first line is about 22.7 ems long, so between 1100 and 1340px the size follows the width to keep it whole */
  .exhibit__head .h2 { font-size: min(var(--fs-h2), 3.9vw); text-wrap: wrap; }
  .exhibit__br { display: inline; }
}
.exhibit__grid { display: grid; gap: 40px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 1040px) { .exhibit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }

/* the climb: a column of fifty results, five pages of ten. The firm is the blue line with its full stop; scroll lifts it from #48 to #11 */
.climb {
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-l);
  background: var(--ink-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 48px 80px -56px rgba(0, 0, 0, .8);
}
.climb__query {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: .9375rem;
}
.climb__query svg { width: 17px; height: 17px; color: var(--muted-dark); }
.climb__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 32px; }
/* --track is the x of the full stop's path, --lines where the results start */
.climb__rail { --track: 58px; --lines: 72px; position: relative; height: 400px; }
.climb__rail::before { /* page one, where the argument ends */
  content: ""; position: absolute; left: -10px; right: -10px; top: -9px; height: calc(20% + 9px);
  border-radius: 10px; background: rgba(0, 141, 249, .11);
}
.climb__rail::after { content: ""; position: absolute; left: calc(var(--track) - 1px); top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .07); }
.climb__pages span {
  position: absolute; left: 0; top: calc(var(--p) * 20%);
  font-size: .6875rem; line-height: 1; color: var(--muted-dark); white-space: nowrap;
}
.climb__pages span:first-child { color: #fff; font-weight: 600; }
.climb__results {
  position: absolute; top: 0; bottom: 0; left: var(--lines); right: 0;
  display: grid; grid-template-rows: repeat(50, minmax(0, 1fr));
  background: repeating-linear-gradient(to bottom, transparent 0 calc(20% - 1px), rgba(255, 255, 255, .1) calc(20% - 1px) 20%);
}
.climb__results i { align-self: center; width: calc(var(--w) * 100%); height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .13); }
.climb__results i:nth-child(-n+10) { background: rgba(255, 255, 255, .24); }
.climb__dot, .climb__ghost, .climb__hit { position: absolute; top: calc((var(--pos, 11) - .5) * 2%); }
.climb__dot, .climb__ghost { left: var(--track); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.climb__dot { background: var(--blue); box-shadow: 0 0 0 5px rgba(0, 141, 249, .22), 0 0 20px rgba(0, 141, 249, .55); }
.climb__ghost { --pos: 48; background: var(--ink-raised); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.climb__hit { /* the firm's own result line */
  left: var(--lines); right: 6%; height: 5px; margin-top: -2.5px; border-radius: 3px;
  background: var(--blue); box-shadow: 0 0 14px rgba(0, 141, 249, .5);
}
.climb__trail {
  position: absolute; left: calc(var(--track) - 1px); width: 2px;
  top: calc((var(--pos, 11) - .5) * 2%);
  bottom: calc(100% - (48 - .5) * 2%);
  background: linear-gradient(to bottom, var(--blue), rgba(0, 141, 249, .2));
  border-radius: 2px;
}
.climb__read { display: flex; flex-direction: column; }
.climb__pos {
  display: flex; align-items: flex-start;
  font-family: var(--display); font-stretch: var(--display-wdth);
  font-size: clamp(4.5rem, 3rem + 4vw, 7rem); font-weight: var(--fig-w); line-height: .9; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.climb__pos span:first-child { font-size: .42em; margin: .14em .06em 0 0; color: var(--blue-on-dark); letter-spacing: 0; }
.climb__label { margin-top: 12px; font-size: .9375rem; color: var(--muted-dark); }
.climb__gain {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(92, 182, 255, .13);
  font-size: .875rem; font-weight: 600; color: var(--blue-on-dark); font-variant-numeric: tabular-nums;
}
.climb__gain svg { width: 14px; height: 14px; }
.climb__gain { transition: opacity 300ms var(--ease-out); }
.climb__gain.is-zero { opacity: 0; }
/* Before and After double as the key: the ring and the full stop on the rail */
.climb__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--rule-dark); }
.climb__facts dt { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted-dark); }
.climb__facts dt::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.climb__facts div + div dt::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(0, 141, 249, .25); }
.climb__facts dd { margin-top: 6px; font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.625rem; font-weight: var(--fig-w); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.climb__cap { display: block; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule-dark); }
.climb__also { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.climb__q2 { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: .875rem; }
.climb__q2 svg { width: 15px; height: 15px; color: var(--muted-dark); }
.climb__move { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.climb__move > span { font-size: .9375rem; color: var(--muted-dark); }
.climb__move svg { width: 14px; height: 14px; align-self: center; color: var(--blue-on-dark); }
.climb__move strong { font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.375rem; font-weight: var(--fig-w); line-height: 1; letter-spacing: -0.01em; }
.climb__note { display: block; margin-top: 16px; font-size: .875rem; line-height: 1.5; color: var(--muted-dark); }

/* the ledger: the headline row sits on a blue band; each bar compares before (grey) with after (blue) on its row's own scale */
.ledger { --band: #002538; }
.ledger__title { font-size: 1.125rem; font-weight: 500; }
.ledger__table { width: 100%; margin-top: 18px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ledger__table thead th {
  padding: 0 18px 14px; text-align: right;
  font-size: .8125rem; font-weight: 500; color: var(--muted-dark);
}
.ledger__table thead th:first-child { text-align: left; }
/* the column heads carry the bar colours */
.ledger__table thead th:not(:first-child)::before { content: ""; display: inline-block; width: 12px; height: 6px; margin-right: 8px; border-radius: 3px; vertical-align: 1px; background: #9FB4BD; }
.ledger__table thead th:last-child::before { background: var(--blue); }
.ledger__table tbody th, .ledger__table td { padding: 22px 18px; border-bottom: 1px solid var(--rule-dark); vertical-align: top; }
.ledger__table tbody th { width: 54%; padding-right: 28px; text-align: left; font-weight: 500; font-size: 1.0625rem; line-height: 1.35; }
.ledger__table tbody th > span:not(.bar, .stars, .nowrap) { display: block; font-weight: 400; font-size: .875rem; color: var(--muted-dark); }
.ledger__table td { text-align: right; padding-left: 12px; }
.ledger__table td:nth-child(2) { font-size: 1.25rem; color: var(--muted-dark); }
.ledger__table td strong { display: block; font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); font-weight: var(--fig-w); line-height: 1.05; letter-spacing: -0.02em; }
.ledger__table td em {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 8px; padding: 3px 8px 3px 5px; border-radius: 999px;
  background: rgba(92, 182, 255, .14); font-style: normal; font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--blue-on-dark);
}
.ledger__table td em svg { width: 13px; height: 13px; }
.ledger__table td small { display: block; margin-top: 8px; font-size: .8125rem; line-height: 1.3; color: var(--muted-dark); }
/* the headline row: on a band, with a larger figure */
.ledger__table tbody tr:first-child > * { padding-block: 26px; background: var(--band); border-bottom-color: transparent; }
.ledger__table tbody tr:first-child > :first-child { border-radius: 14px 0 0 14px; }
.ledger__table tbody tr:first-child > :last-child { border-radius: 0 14px 14px 0; }
.ledger__table tbody tr:first-child th { font-size: 1.1875rem; }
.ledger__table tbody tr:first-child td strong { font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); line-height: .95; letter-spacing: -0.035em; }
.ledger__table tbody tr:first-child .bar { --row: var(--band); }
.ledger__src { margin-top: 18px; padding-left: 18px; font-size: .8125rem; color: var(--muted-dark); }
.ledger__src a { color: inherit; text-underline-offset: 2px; }
.stars.stars--dark { margin-top: 14px; background: linear-gradient(90deg, #fff calc(var(--score) / 5 * 100%), rgba(255, 255, 255, .22) 0); }

/* before (grey) over after (blue), with a cut between them; the after bar grows out of the before bar once */
.bar { position: relative; display: block; height: 8px; margin-top: 16px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar::before, .bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.bar::before { width: calc(var(--after) * 100%); background: var(--blue); transform-origin: 0 50%; }
.bar::after { width: calc(var(--before) * 100%); background: #9FB4BD; box-shadow: 2px 0 0 var(--row, var(--ink-deep)); }
.js [data-bar] .bar::before { transform: scaleX(calc(var(--before) / var(--after))); }
.js [data-bar].is-in .bar::before { transform: none; transition: transform 1400ms var(--ease-in-out) calc(var(--d, 0) * 140ms); }

/* ==========================================================================
   Exhibit A's finish (31 Oct, "similarly how can we make it slightly compact and more visually appealing, just
   slightly compact"; final the same day: A trim. ?xf=current is the exhibit as it was, ?xf=pair the option set aside). The layout is unchanged: the climb on its
   card, the ledger beside it. Shared: about a sixth shorter (the rail 400 to 320px, the ledger's rows 22 to 16px), the
   bars slimmer in a blue that brightens toward its end, and the cards and the headline row in glass.
   A trim: the ledger on the ground, as it is. B pair: the ledger on a card of its own, the two cards one height.
   Current is the exhibit as it was
   ========================================================================== */
html:not([data-xf="current"]) .exhibit__grid { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 1040px) { html:not([data-xf="current"]) .exhibit__grid { gap: 48px; } }

/* the climb, tighter: the rail is shorter, so the gap under the figure closes */
html:not([data-xf="current"]) .climb { padding: clamp(18px, 2vw, 26px); }
html:not([data-xf="current"]) .climb__query { padding: 10px 16px; }
html:not([data-xf="current"]) .climb__body { gap: 24px; margin-top: 22px; }
html:not([data-xf="current"]) .climb__rail { height: 320px; }
/* page one, where the argument ends, edged in light */
html:not([data-xf="current"]) .climb__rail::before { background: rgba(0, 141, 249, .12); box-shadow: inset 0 0 0 1px rgba(92, 182, 255, .16); }
html:not([data-xf="current"]) .climb__pos { font-size: clamp(4rem, 2.6rem + 3.4vw, 6.25rem); }
html:not([data-xf="current"]) .climb__label { margin-top: 10px; }
html:not([data-xf="current"]) .climb__gain { margin-top: 14px; }
html:not([data-xf="current"]) .climb__facts { padding-top: 16px; }
html:not([data-xf="current"]) .climb__cap { margin-top: 20px; padding-top: 18px; }
html:not([data-xf="current"]) .climb__note { margin-top: 12px; }

/* the ledger, tighter */
html:not([data-xf="current"]) .ledger__table { margin-top: 14px; }
html:not([data-xf="current"]) .ledger__table thead th { padding-bottom: 12px; }
html:not([data-xf="current"]) .ledger__table tbody th,
html:not([data-xf="current"]) .ledger__table td { padding-block: 16px; }
html:not([data-xf="current"]) .ledger__table tbody th { font-size: 1rem; }
html:not([data-xf="current"]) .ledger__table td :is(em, small) { margin-top: 6px; }
html:not([data-xf="current"]) .ledger__table td:nth-child(2) { font-size: 1.125rem; }
html:not([data-xf="current"]) .ledger__table td strong { font-size: clamp(1.5rem, 1.2rem + .7vw, 1.875rem); }
html:not([data-xf="current"]) .ledger__table tbody tr:first-child > * { padding-block: 20px; }
html:not([data-xf="current"]) .ledger__table tbody tr:first-child th { font-size: 1.125rem; }
html:not([data-xf="current"]) .ledger__table tbody tr:first-child td strong { font-size: clamp(2.25rem, 1.5rem + 1.6vw, 3rem); }
html:not([data-xf="current"]) .ledger__src { margin-top: 14px; }
@media (max-width: 640px) {
  html:not([data-xf="current"]) .climb__rail { height: 300px; }
  html:not([data-xf="current"]) .ledger__table td:nth-child(2) { font-size: .9375rem; }
  html:not([data-xf="current"]) .ledger__table td strong { font-size: 1.5rem; }
  html:not([data-xf="current"]) .ledger__table tbody tr:first-child th { font-size: 1.0625rem; }
}

/* the bars: slimmer, the after bar deepening from the firm's blue to light at its end, with a soft light round it */
html:not([data-xf="current"]) .bar { height: 6px; margin-top: 12px; border-radius: 3px; overflow: visible; }
html:not([data-xf="current"]) .bar::before { border-radius: 3px; background: linear-gradient(90deg, #0A6FD1, var(--blue) 55%, #6CBEFF); box-shadow: 0 0 14px -2px rgba(0, 141, 249, .6); }
html:not([data-xf="current"]) .bar::after { border-radius: 3px; }

/* glass (31 Oct, "not liking this grad, can we make some apple style glass treatment to this section"): the cards and the
   headline row as one material, a clear pane on the ink. A faint fill, brightest where the light comes in at the top
   left; a rim of light round the edge, strongest top left and catching again bottom right; a hairline highlight along
   the top; a soft shadow under. It replaced a blue light behind the headline figure */
.exhibit {
  --glass-fill: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035) 36%, rgba(255, 255, 255, .02) 68%, rgba(255, 255, 255, .045));
  --glass-rim: linear-gradient(150deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .13) 18%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, .05) 74%, rgba(255, 255, 255, .26));
}
html:not([data-xf="current"]) .climb,
html[data-xf="pair"] .ledger {
  position: relative; isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .3), 0 36px 64px -34px rgba(0, 0, 0, .8);
}
/* the rims: a 1px ring cut from the light's gradient */
html:not([data-xf="current"]) .climb::after,
html[data-xf="pair"] .ledger::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the headline row's pane runs unbroken behind its three cells. A table row can't carry it (Chrome counts a row's
   ::before as a cell, which pushed the row along), so the ledger draws the pane and its rim and pins them to the row
   (anchor positioning). Where that isn't supported, the row keeps its plain band */
html:not([data-xf="current"]) .ledger { position: relative; isolation: isolate; }
@supports (anchor-name: --a) {
  html:not([data-xf="current"]) .ledger { --band: #0F2A33; } /* the pane on the ink, as one opaque colour, since the bars cut with it */
  html[data-xf="pair"] .ledger { --band: #1A3540; }
  html:not([data-xf="current"]) .ledger__table tbody tr:first-child { anchor-name: --xf-headline; }
  html:not([data-xf="current"]) .ledger__table tbody tr:first-child > * { background: none; }
  html:not([data-xf="current"]) .ledger::before,
  html:not([data-xf="current"]) .ledger__title::before {
    content: ""; position: absolute; z-index: -1; position-anchor: --xf-headline; pointer-events: none;
    top: anchor(top); right: anchor(right); bottom: anchor(bottom); left: anchor(left); border-radius: 14px;
  }
  html:not([data-xf="current"]) .ledger::before {
    background: var(--glass-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .25), 0 20px 40px -26px rgba(0, 0, 0, .75);
  }
  html[data-xf="pair"] .ledger::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .2), 0 12px 24px -16px rgba(0, 0, 0, .55); }
  html:not([data-xf="current"]) .ledger__title::before {
    padding: 1px; background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
}
/* the ring that marks #48 is filled to match the pane, so the rail stops at it */
html:not([data-xf="current"]) .climb__ghost { background: #0B2530; }

/* B pair: the ledger on a card like the climb's; the two cards one height, each closing on its source line */
@media (min-width: 1040px) { html[data-xf="pair"] .exhibit__grid { align-items: stretch; } }
html[data-xf="pair"] .climb { display: flex; flex-direction: column; }
/* the climb's rail takes any height the ledger adds, so its card has no empty band */
html[data-xf="pair"] .climb__body { flex: 1 0 auto; margin-bottom: 0; }
html[data-xf="pair"] .climb__rail { height: auto; min-height: 300px; }
/* and the ledger's rows a little closer on their card */
html[data-xf="pair"] .ledger__table tbody th,
html[data-xf="pair"] .ledger__table td { padding-block: 14px; }
html[data-xf="pair"] .ledger__table tbody tr:first-child > * { padding-block: 18px; }
html[data-xf="pair"] .ledger {
  display: flex; flex-direction: column;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
  border-radius: var(--r-l);
}
html[data-xf="pair"] .ledger__title { padding-left: 18px; }
html[data-xf="pair"] .ledger__table tbody tr { --row: #0D2731; }
html[data-xf="pair"] .ledger__table tbody tr:last-child > * { border-bottom: 0; }
html[data-xf="pair"] .ledger__src { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule-dark); }
@media (max-width: 640px) { html[data-xf="pair"] .ledger__title { padding-left: 10px; } }

/* a switcher on the dark band, should one return */
.exhibit .svc-switch { box-shadow: 0 0 0 1px var(--rule-dark), 0 14px 30px -12px rgba(0, 0, 0, .6); }

/* testimony on the record */
.testimony blockquote p { font-family: var(--serif); }
.testimony figcaption strong { display: block; font-weight: 600; }
/* Mark Anderson's quote beside his own portrait (LawRank's photograph, framed). Phones: the photo, then the quote */
.testimony--exhibit { display: grid; gap: 32px; margin-top: clamp(72px, 9vw, 120px); }
.testimony__photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--r-l);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -48px rgba(0, 0, 0, .8);
}
.testimony--exhibit blockquote::before {
  content: "\201C"; display: block; height: .52em;
  font-family: var(--serif); font-size: clamp(4.5rem, 3.4rem + 3vw, 7rem); line-height: 1; color: var(--blue);
}
.testimony--exhibit blockquote p { max-width: 38rem; font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem); line-height: 1.34; letter-spacing: -0.01em; text-wrap: pretty; }
/* the name, then the link under it, both on the quote's left edge */
.testimony.testimony--exhibit figcaption { display: grid; justify-items: start; gap: 18px; margin: 0; font-size: .9375rem; } /* doubled class: the general .testimony rule comes later */
.testimony--exhibit figcaption span { color: var(--muted-dark); }
.testimony.testimony--exhibit figcaption strong { color: #fff; }
@media (min-width: 640px) and (max-width: 1039px) { .testimony__photo { aspect-ratio: 16 / 10; object-position: 50% 30%; } }
@media (min-width: 1040px) {
  /* two rows that share any height the photo adds, so the quote and name stay centred against it (equal 1fr rows made a tall empty band) */
  .testimony--exhibit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; column-gap: clamp(48px, 6vw, 96px); row-gap: 32px; }
  .testimony__photo { grid-area: 1 / 2 / 3 / 3; align-self: center; aspect-ratio: 1; }
  .testimony--exhibit blockquote { grid-area: 1 / 1 / 2 / 2; align-self: end; }
  .testimony--exhibit figcaption { grid-area: 2 / 1 / 3 / 2; align-self: start; }
}

/* ==========================================================================
   Mark Anderson's quote (31 Oct, "now its time for this section, i am not liking the image used here as well"; final
   the same day: C cinema. ?tq=film|byline|current stay reachable). The portrait gives way to Mark's own film, LawRank's
   "Mark Testimonial" (2024, 1:03), from its own frame; it plays in the site's film box. A film: the layout as it was,
   the film where the portrait stood. B byline: the quote alone at full measure, Mark from the film beside his name, a
   button to watch it. C cinema: the film large on the left, the quote beside it. Current is the portrait, as it was
   ========================================================================== */
html:not([data-tq="current"]) .testimony__photo,
html:is([data-tq="current"], [data-tq="byline"]) .tfilm,
html:not([data-tq="byline"]) :is(.testimony__face, .tq-watch) { display: none; }

/* the film: its frame, and a glass bar at its foot (play, whose words, how long), clear of Mark's face */
.tfilm {
  position: relative; isolation: isolate; display: block; overflow: hidden;
  border-radius: var(--r-l); background: #0B2530;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -48px rgba(0, 0, 0, .8);
}
.tfilm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 900ms var(--ease-out); }
.tfilm::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 27, 37, 0) 62%, rgba(0, 27, 37, .55)); }
.tfilm__bar {
  position: absolute; bottom: 16px; left: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px); padding: 6px 16px 6px 6px; border-radius: 999px;
  color: #fff; font-size: .875rem; font-weight: 500; white-space: nowrap;
  background: rgba(0, 27, 37, .3);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(0, 0, 0, .5);
  transition: background-color 250ms var(--ease-out);
}
.tfilm__play {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--ink-deep); transition: transform 250ms var(--ease-out);
}
.tfilm__play svg { width: 13px; height: 13px; margin-left: 2px; }
.tfilm__time { color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.tfilm:focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .tfilm:hover img { transform: scale(1.03); }
  .tfilm:hover .tfilm__bar { background: rgba(0, 27, 37, .45); }
  .tfilm:hover .tfilm__play { transform: scale(1.06); }
}

/* A film: where the portrait stood, the same shapes (4:3 on phones, 16:10 on tablets, square beside the quote) */
html[data-tq="film"] .tfilm { aspect-ratio: 4 / 3; }
@media (min-width: 640px) and (max-width: 1039px) { html[data-tq="film"] .tfilm { aspect-ratio: 16 / 10; } }
@media (min-width: 1040px) { html[data-tq="film"] .tfilm { grid-area: 1 / 2 / 3 / 3; align-self: center; aspect-ratio: 1; } }

/* C cinema: the film at its own 16:9, large on the left; the quote a size down beside it */
html[data-tq="cinema"] .tfilm { aspect-ratio: 16 / 9; }
@media (min-width: 1040px) {
  html[data-tq="cinema"] .testimony--exhibit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 72px); }
  html[data-tq="cinema"] .tfilm { grid-area: 1 / 1 / 3 / 2; align-self: center; }
  html[data-tq="cinema"] .testimony--exhibit blockquote { grid-area: 1 / 2 / 2 / 3; }
  html[data-tq="cinema"] .testimony--exhibit figcaption { grid-area: 2 / 2 / 3 / 3; }
  html[data-tq="cinema"] .testimony--exhibit blockquote::before { font-size: clamp(3.5rem, 2.8rem + 2vw, 5rem); }
  html[data-tq="cinema"] .testimony--exhibit blockquote p { font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); }
}

/* B byline: the quote alone, at a wider measure; under it Mark from the film beside his name, then the way to watch him say it */
@media (min-width: 1040px) { html[data-tq="byline"] .testimony--exhibit { grid-template-columns: minmax(0, 1fr); } }
html[data-tq="byline"] .testimony--exhibit blockquote p { max-width: 64rem; font-size: clamp(1.5rem, 1.1rem + 1.35vw, 2.5rem); line-height: 1.3; }
html[data-tq="byline"] .testimony.testimony--exhibit figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  max-width: 64rem; padding-top: 28px; border-top: 1px solid var(--rule-dark);
}
html[data-tq="byline"] .testimony--exhibit figcaption > span { flex: 1 1 14rem; min-width: 0; } /* grows to push the buttons right; on phones it sits beside the face */
.testimony.testimony--exhibit .testimony__face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.tq-watch {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); color: #fff; font-size: .9375rem; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background-color 200ms var(--ease-out);
}
.testimony--exhibit figcaption .tq-watch__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; }
.tq-watch__icon svg { width: 12px; height: 12px; margin-left: 2px; }
.testimony--exhibit figcaption .tq-watch__time { color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.tq-watch:focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .tq-watch:hover { background: rgba(255, 255, 255, .11); } }


.exhibits { display: grid; gap: 40px; margin-top: clamp(72px, 9vw, 120px); }
@media (min-width: 800px) { .exhibits { grid-template-columns: 1fr 1fr; gap: 56px; } }
.exhibit-card { display: flex; flex-direction: column; align-items: flex-start; padding-top: 28px; border-top: 1px solid var(--rule-dark); }
.exhibit-card h3 { margin-top: 18px; font-size: 1.25rem; font-weight: 500; }
.exhibit-card__fig { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 18px; }
.exhibit-card__fig > span { font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); font-weight: var(--fig-w); line-height: 1; letter-spacing: -0.03em; }
.exhibit-card__fig svg { width: 28px; height: 28px; color: var(--blue); }
.exhibit-card__fig small { flex-basis: 100%; font-size: .9375rem; color: var(--muted-dark); }
.exhibit-card > p:not([class]) { margin-top: 14px; max-width: 34rem; color: var(--muted-dark); }
.exhibit-card .link { margin-top: 20px; }

/* ---------- Exhibit A layouts (?exhibit=): A dots, B report, C brief, and the current climb and ledger ---------- */
html[data-exhibit]:not([data-exhibit="dots"]) [data-exhibit-variant="dots"],
html[data-exhibit]:not([data-exhibit="report"]) [data-exhibit-variant="report"],
html[data-exhibit]:not([data-exhibit="brief"]) [data-exhibit-variant="brief"],
html[data-exhibit]:not([data-exhibit="current"]) [data-exhibit-variant="current"],
html:not([data-exhibit]) [data-exhibit-variant]:not([data-exhibit-variant="current"]) { display: none; }
.xdots, .xreport, .xbrief { margin-top: clamp(48px, 6vw, 80px); }
:is(.xdots__src, .xreport__src, .xbrief__src) { margin-top: 18px; font-size: .8125rem; color: var(--muted-dark); }
:is(.xdots__src, .xreport__src, .xbrief__src) a { color: inherit; text-underline-offset: 2px; }

/* A. dots: one dot for each signed case a month. The seven the firm had are white; the 43 since are LawRank's full stop */
.xdots__fig { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .xdots__fig { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 112px); } }
.xdots__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(7px, 1.3vw, 18px); max-width: 640px; }
.xdots__grid i { aspect-ratio: 1; border-radius: 50%; background: var(--blue); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0); }
.xdots__grid i:nth-child(-n+7) { background: #fff; }
.js .xdots__fig:not(.is-in) .xdots__grid i:nth-child(n+8) { background-color: rgba(0, 141, 249, 0); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); transform: scale(.84); }
.js .xdots__fig.is-in .xdots__grid i:nth-child(n+8) {
  transition: background-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc((var(--i) - 8) * 24ms);
}
.xdots__label { font-size: 1rem; color: var(--muted-dark); }
.xdots__n {
  margin-top: 10px;
  font-family: var(--display); font-stretch: var(--display-wdth);
  font-size: clamp(5.5rem, 3.2rem + 7vw, 10rem); font-weight: var(--display-w); line-height: .84; letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.xdots__key { display: grid; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule-dark); font-size: .9375rem; line-height: 1.45; color: var(--muted-dark); }
.xdots__key li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; }
.xdots__key i { width: 12px; height: 12px; margin-top: .3em; border-radius: 50%; background: #fff; }
.xdots__key li + li i { background: var(--blue); }
.xdots__facts { display: grid; column-gap: clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 104px); }
@media (min-width: 600px) { .xdots__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .xdots__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xdots__facts > div { padding: 22px 0 26px; border-top: 1px solid var(--rule-dark); }
.xdots__facts dt { font-size: .875rem; line-height: 1.4; color: var(--muted-dark); }
.xdots__facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.xdots__facts dd > span:first-child { font-size: 1.125rem; color: var(--muted-dark); }
.xdots__facts dd svg { width: 16px; height: 16px; align-self: center; color: var(--blue-on-dark); }
.xdots__facts dd strong { font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: var(--fig-w); line-height: 1; letter-spacing: -0.025em; }
.xdots__facts dd em { font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--blue-on-dark); }

/* B. report: the case as the report a client reads. Grey is 2022, blue is four years later, in every chart */
.xreport { border-radius: var(--r-l); background: var(--ink-raised); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.xreport__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 18px clamp(20px, 2.6vw, 32px); border-bottom: 1px solid var(--rule-dark); }
.xreport__firm { display: flex; align-items: center; gap: 12px; font-size: .875rem; line-height: 1.35; color: var(--muted-dark); }
.xreport__firm strong { display: block; font-size: 1rem; font-weight: 500; color: #fff; }
.xreport__mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-weight: 600; color: #fff; }
.xreport__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .8125rem; color: var(--muted-dark); }
.xreport__legend span { display: inline-flex; align-items: center; gap: 8px; }
.xreport__legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); }
.xreport__legend span:first-child::before { background: rgba(255, 255, 255, .5); }
.xreport__body { display: grid; }
@media (min-width: 960px) { .xreport__body { grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); } }
.xreport__tabs { display: grid; align-content: start; }
@media (min-width: 960px) { .xreport__tabs { border-right: 1px solid var(--rule-dark); } }
.xreport__tabs [role="tab"] {
  position: relative; padding: 20px clamp(20px, 2.4vw, 28px) 22px; text-align: left; color: var(--muted-dark);
  border-bottom: 1px solid var(--rule-dark);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.xreport__tabs [aria-selected="true"] { background: rgba(255, 255, 255, .045); color: #fff; }
.xreport__tabs [aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue); }
@media (hover: hover) and (pointer: fine) { .xreport__tabs [aria-selected="false"]:hover { background: rgba(255, 255, 255, .025); color: #fff; } }
.xreport__tl { display: block; font-size: .875rem; }
.xreport__tv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.xreport__tv > span:first-child { font-size: .9375rem; }
.xreport__tv svg { width: 14px; height: 14px; align-self: center; color: var(--blue-on-dark); }
.xreport__tv strong { font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.75rem; font-weight: var(--fig-w); line-height: 1; letter-spacing: -0.02em; color: #fff; }
.xreport__panels { padding: clamp(24px, 3vw, 40px); }
.js .xreport__panels { display: grid; }
.js .xreport__panel { grid-area: 1 / 1; }
.js .xreport__panel:not(.is-active) { visibility: hidden; }
html:not(.js) .xreport__panels { display: grid; gap: 56px; }
.xreport__panel:focus-visible { outline-offset: 10px; border-radius: 4px; }
.xreport__ph h3 { font-size: 1.125rem; font-weight: 500; }
.xreport__ph p { max-width: 38rem; margin-top: 6px; font-size: .9375rem; color: var(--muted-dark); }
.xreport__note { margin-top: 22px; font-size: .8125rem; color: var(--muted-dark); }
.xreport__src { padding: 0 clamp(20px, 2.6vw, 32px) 22px; }
/* below 960px the metrics sit two by two above the chart, and only the open panel takes up room */
@media (max-width: 959px) {
  .xreport__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xreport__tabs [role="tab"] { padding: 16px 16px 18px; }
  .xreport__tabs [role="tab"]:nth-child(odd) { border-right: 1px solid var(--rule-dark); }
  .js .xreport__panel:not(.is-active) { display: none; }
}

/* columns on a scale: the grid labels sit in a 52px gutter, the bars stand on the base line */
.xplot { position: relative; height: clamp(220px, 24vw, 296px); margin: 48px 0 40px; }
.xplot__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.xplot__grid span { position: relative; height: 0; font-size: .75rem; line-height: 0; color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.xplot__grid span::after { content: ""; position: absolute; left: 52px; right: 0; top: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.xplot__grid span:last-child::after { border-top-color: rgba(255, 255, 255, .34); }
.xplot__cols { position: absolute; inset: 0 0 0 52px; display: flex; justify-content: space-around; align-items: flex-end; }
.xplot__group { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 100%; }
.xplot__x { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); font-size: .8125rem; color: var(--muted-dark); white-space: nowrap; }
.xbar { position: relative; width: clamp(40px, 6vw, 84px); height: calc(var(--v) / var(--max) * 100%); border-radius: 6px 6px 0 0; }
.xbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform-origin: 50% 100%; }
.xbar--before::before { background: rgba(255, 255, 255, .5); }
.xbar b { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: 1.25rem; font-weight: var(--fig-w); line-height: 1.1; text-align: center; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xbar b em { display: block; font-family: var(--sans); font-style: normal; font-size: .75rem; font-weight: 600; color: var(--blue-on-dark); }
.xbar--before b { font-size: 1rem; color: var(--muted-dark); }
.js .xreport__panel:not(.is-drawn) .xbar::before { transform: scaleY(0); }
.js .xreport__panel:not(.is-drawn) .xbar b { opacity: 0; }
.js .xreport__panel.is-drawn .xbar::before { transition: transform 800ms var(--ease-out); }
.js .xreport__panel.is-drawn .xbar:not(.xbar--before)::before { transition-delay: 120ms; }
.js .xreport__panel.is-drawn .xbar b { transition: opacity 300ms var(--ease-out) 560ms; }

/* rankings on a track of five pages: the ring is where the firm was, the full stop where it is */
.xrank { display: grid; gap: 28px; margin-top: 40px; }
.xrank__axis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: -14px; font-size: .75rem; color: var(--muted-dark); }
.xrank__axis span:first-child { color: #fff; font-weight: 600; }
.xrank__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px 24px; }
.xrank__q { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.xrank__q svg { flex: none; width: 16px; height: 16px; color: var(--muted-dark); }
.xrank__val { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.xrank__val > span:first-child { font-size: .9375rem; color: var(--muted-dark); }
.xrank__val svg { width: 14px; height: 14px; align-self: center; color: var(--blue-on-dark); }
.xrank__val strong { font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.5rem; font-weight: var(--fig-w); line-height: 1; }
.xrank__track {
  grid-column: 1 / -1; position: relative; height: 44px; border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(255, 255, 255, .12) calc(20% - 1px) 20%),
    linear-gradient(90deg, rgba(0, 141, 249, .14) 0 20%, rgba(255, 255, 255, .03) 20%);
}
.xrank__from, .xrank__to { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.xrank__from { left: calc((var(--from) - .5) * 2%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .65); }
.xrank__to { left: calc((var(--to) - .5) * 2%); background: var(--blue); box-shadow: 0 0 0 5px rgba(0, 141, 249, .22); }
.xrank__trail {
  position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  left: calc((var(--to) - .5) * 2%); right: calc(100% - (var(--from) - .5) * 2%);
  background: linear-gradient(90deg, var(--blue), rgba(0, 141, 249, .25)); transform-origin: 100% 50%;
}
/* only the page is published for this one, so the marks cover whole pages */
.xrank__track--pages :is(.xrank__from, .xrank__to) { top: 4px; bottom: 4px; width: auto; height: auto; margin: 0; border-radius: 6px; }
.xrank__track--pages .xrank__from { left: calc(60% + 4px); right: calc(20% + 4px); }
.xrank__track--pages .xrank__to { left: 4px; right: calc(80% + 4px); background: rgba(0, 141, 249, .6); box-shadow: none; }
.js .xreport__panel:not(.is-drawn) .xrank__trail { transform: scaleX(0); }
.js .xreport__panel:not(.is-drawn) .xrank__to { opacity: 0; transform: scale(.4); }
.js .xreport__panel.is-drawn .xrank__trail { transition: transform 900ms var(--ease-in-out) 100ms; }
.js .xreport__panel.is-drawn .xrank__to { transition: opacity 250ms var(--ease-out) 800ms, transform 450ms var(--ease-out) 800ms; }

/* the Local Pack: every directional zone of Fort Worth held */
.xpack { display: grid; gap: 28px; align-items: center; margin-top: 36px; }
@media (min-width: 640px) { .xpack { grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); } }
.xpack__map { display: grid; grid-template-columns: repeat(3, clamp(76px, 8vw, 92px)); grid-auto-rows: clamp(76px, 8vw, 92px); gap: 6px; }
.xpack__map span { position: relative; display: flex; align-items: flex-end; padding: 8px 10px; border-radius: 8px; background: var(--blue); font-size: .75rem; font-weight: 600; color: var(--ink-deep); }
.xpack__map svg { position: absolute; top: 9px; right: 9px; width: 14px; height: 14px; }
.js .xreport__panel:not(.is-drawn) .xpack__map span { background-color: rgba(0, 141, 249, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: var(--muted-dark); }
.js .xreport__panel:not(.is-drawn) .xpack__map svg { opacity: 0; }
.js .xreport__panel.is-drawn .xpack__map :is(span, svg) { transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), color 300ms var(--ease-out), opacity 300ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.xpack__list li { padding: 14px 0; border-top: 1px solid var(--rule-dark); font-size: .9375rem; color: var(--muted-dark); }
.xpack__list li:first-child { padding-top: 0; border-top: 0; }
.xpack__list strong { display: block; margin-bottom: 2px; font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.5rem; font-weight: var(--fig-w); line-height: 1.15; color: #fff; }

/* C. brief: the case in order along the four years. The line draws once, from where the firm started to what changed */
.xbrief__cols { position: relative; display: grid; gap: 48px; }
.xbrief__cols::before, .xbrief__cols::after { content: ""; position: absolute; left: 6px; top: 8px; bottom: 0; width: 2px; background: rgba(255, 255, 255, .14); }
.xbrief__cols::after { background: var(--blue); transform-origin: 50% 0; }
.xbrief__col { position: relative; padding-left: 36px; }
.xbrief__when { position: relative; font-size: .875rem; font-weight: 600; color: var(--muted-dark); }
.xbrief__when::before { content: ""; position: absolute; left: -36px; top: 2px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-deep); box-shadow: inset 0 0 0 2px #fff; }
.xbrief__col:nth-child(2) .xbrief__when::before { box-shadow: inset 0 0 0 2px var(--blue); }
.xbrief__col--out .xbrief__when::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(0, 141, 249, .22); }
@media (min-width: 1040px) {
  .xbrief__cols { grid-template-columns: minmax(0, 4fr) minmax(0, 4.4fr) minmax(0, 4.6fr); gap: clamp(32px, 4vw, 64px); }
  .xbrief__cols::before, .xbrief__cols::after { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .xbrief__cols::after { transform-origin: 0 50%; }
  .xbrief__col { padding-left: 0; }
  .xbrief__when { padding-top: 34px; }
  .xbrief__when::before { left: 0; top: 0; }
}
.js .xbrief:not(.is-in) .xbrief__cols::after { transform: scaleY(0); }
@media (min-width: 1040px) { .js .xbrief:not(.is-in) .xbrief__cols::after { transform: scaleX(0); } }
.js .xbrief:not(.is-in) .xbrief__col--out .xbrief__when::before { background: var(--ink-deep); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.js .xbrief.is-in .xbrief__cols::after { transition: transform 1600ms var(--ease-in-out); }
.js .xbrief.is-in .xbrief__col--out .xbrief__when::before { transition: background-color 300ms var(--ease-out) 1400ms, box-shadow 400ms var(--ease-out) 1400ms; }
.xbrief__h { margin-top: 10px; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); font-weight: var(--head-w); line-height: 1.2; letter-spacing: -0.02em; }
.xbrief__col > p:not([class]) { margin-top: 16px; font-size: .9375rem; line-height: 1.55; color: var(--muted-dark); }
.xbrief__sub { margin-top: 24px; font-size: .9375rem; font-weight: 600; }
.xbrief__h + .xbrief__sub { margin-top: 18px; }
.xbrief__list { display: grid; gap: 10px; margin-top: 12px; }
.xbrief__list li { position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.5; color: var(--muted-dark); }
.xbrief__list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.xbrief__col:nth-child(2) .xbrief__list li::before { background: var(--blue); box-shadow: none; }
.xbrief__big { display: flex; align-items: flex-end; gap: 16px; margin-top: 18px; }
.xbrief__big strong { font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(4.5rem, 3rem + 4vw, 6.5rem); font-weight: var(--display-w); line-height: .8; letter-spacing: -0.05em; }
.xbrief__big span { max-width: 13rem; font-size: .9375rem; line-height: 1.4; color: var(--muted-dark); }
.xbrief__facts { margin-top: 28px; }
.xbrief__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule-dark); }
.xbrief__facts dt { font-size: .875rem; line-height: 1.4; color: var(--muted-dark); }
.xbrief__facts dd { display: flex; flex: none; align-items: baseline; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xbrief__facts dd > span:first-child { font-size: .875rem; color: var(--muted-dark); }
.xbrief__facts dd svg { width: 12px; height: 12px; align-self: center; color: var(--blue-on-dark); }
.xbrief__facts dd strong { font-size: 1.125rem; font-weight: 500; }
/* the lede tells the same story the first column does */
html[data-exhibit="brief"] .exhibit__head .lede { display: none; }

/* ==========================================================================
   SERVICES: four takes on one grid while we choose (?services=grid|drawn|ink|halo; halo by default). In each, every cell is one link (its name,
   stretched over the cell) and the eighth sends the undecided to the market check
   ========================================================================== */
html[data-services]:not([data-services="grid"]) [data-services-variant="grid"],
html[data-services]:not([data-services="drawn"]) [data-services-variant="drawn"],
html[data-services]:not([data-services="ink"]) [data-services-variant="ink"],
html[data-services]:not([data-services="halo"]) [data-services-variant="halo"],
html:not([data-services]) [data-services-variant]:not([data-services-variant="halo"]) { display: none; }

.services { position: relative; isolation: isolate; overflow: clip; }   /* clip, not hidden: the switcher still sticks */
/* the heading's right side: B plan is final (30 Oct 2026), from 1100px (see below). The isometric drawing (from 960px) and
   the other takes stay reachable with ?svchead=iso|call|brief|phone|cases and the Heading row in ?review */
.services__art, .svh { display: none; }
@media (min-width: 960px) {
  .section-head--art {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px);
    align-items: center; max-width: none;
  }
  .section-head--art .section-head__text { max-width: 44rem; }
  .services__art {
    display: block; justify-self: end; width: 100%; max-width: 520px; height: auto; overflow: visible; margin-block: -32px;
    filter: drop-shadow(0 14px 18px rgba(0, 44, 60, .12));
  }
}
html[data-svchead]:not([data-svchead="iso"]) [data-svchead-variant="iso"],
html[data-svchead]:not([data-svchead="call"]) [data-svchead-variant="call"],
html[data-svchead]:not([data-svchead="plan"]) [data-svchead-variant="plan"],
html[data-svchead]:not([data-svchead="brief"]) [data-svchead-variant="brief"],
html[data-svchead]:not([data-svchead="phone"]) [data-svchead-variant="phone"],
html[data-svchead]:not([data-svchead="cases"]) [data-svchead-variant="cases"],
html[data-svchead]:not([data-svchead="line"]) [data-svchead-variant="line"],
html:not([data-svchead]) [data-svchead-variant] { display: none; }
/* the new takes carry words, which are too small to read in a narrower column, so they wait for 1100px; until then the
   heading takes the width */
@media (min-width: 960px) and (max-width: 1099.98px) {
  html:not([data-svchead]) .section-head--art,
  html:is([data-svchead="call"], [data-svchead="plan"], [data-svchead="brief"], [data-svchead="line"]) .section-head--art { display: block; max-width: 52rem; }
}
/* lighter takes (31 Oct, "adding too much weight to this section, i want to hide it"; final the same day: A split, also
   without JS): no art; the heading on the left, its paragraph on the right, their first lines level. Set aside: B line
   (below) and C plain, no art, the heading as every other section has it (?svchead=line|plain) */
@media (min-width: 960px) {
  html:is([data-svchead="split"], :not([data-svchead])) .section-head--art { display: block; max-width: none; }
  html:is([data-svchead="split"], :not([data-svchead])) .section-head--art .section-head__text {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px);
    align-items: start; max-width: none;
  }
  html:is([data-svchead="split"], :not([data-svchead])) .section-head--art .lede { margin: 0; max-width: 34rem; }
  html[data-svchead="plain"] .section-head--art { display: block; max-width: 52rem; }
}
/* the section's ground (31 Oct, "can we do anything subtle in the sections bg?"; final the same day: A window, also
   without JS): afternoon light through an office window falls across the heading from the upper right, a light map
   screened over the grey. Set aside (?svcbg=): current, the flat grey; paper, the photographs' fine grain, as if the
   section were printed; light, lit from above under the dark exhibit, settling to the grey, fading to white into the
   films below. Source: source-images/make_svc_ground.py */
html:is([data-svcbg="window"], [data-svcbg="paper"], :not([data-svcbg])) .services::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html:is([data-svcbg="window"], :not([data-svcbg])) .services::before {
  background: url("../img/svc-window.jpg") right top / max(100%, 1280px) auto no-repeat;
  mix-blend-mode: screen; opacity: .9;
}
html[data-svcbg="paper"] .services::before { background: url("../img/svc-paper.png") 0 0 / 160px 160px; opacity: .2; }
html[data-svcbg="light"] .services {
  background:
    radial-gradient(80% 460px at 50% 0, #fff, rgba(255, 255, 255, 0)),
    linear-gradient(0deg, #fff, rgba(255, 255, 255, 0) 160px),
    var(--ground);
}
/* B line: the plan as hairlines, no card, at its own size (text at 1:1) */
@media (min-width: 1100px) { .svh.svh-line { max-width: 460px; margin-block: 0; } }
.js .svhL-flow { stroke-dasharray: 1; stroke-dashoffset: 1; }
.svh.is-in .svhL-flow { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-in-out) calc(var(--i) * 120ms + 150ms); }
.js .svhL-goal { opacity: 0; transform: translateX(-6px); }
.svh.is-in .svhL-goal { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out) 800ms, transform 600ms var(--ease-out) 800ms; }
@media (min-width: 1100px) {
  .svh { display: block; justify-self: end; width: 100%; max-width: 540px; height: auto; overflow: visible; margin-block: -24px; }
}
/* each one's single moment, when it first comes into view: A's cards slide in from the photograph's edge and the call follows;
   B's lanes fill in from January, one after another, and meet the goal; C's highlighter crosses the conclusion once */
.js .svhA-card { opacity: 0; transform: translateX(-14px); }
.js .svhA-call, .js .svhB-goal { opacity: 0; transform: translateY(8px); }
.svh.is-in :is(.svhA-card, .svhA-call, .svhB-goal) {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out) var(--d), transform 700ms var(--ease-out) var(--d);
}
.svhA-card { --d: calc(var(--i) * 110ms + 120ms); }
.svhA-call { --d: 560ms; }
.svhB-goal { --d: 760ms; }
.js :is(.svhB-bar, .svhC-mark) { clip-path: inset(0 100% 0 0); }
.js :is(.svhB-join, .svhB-now) { opacity: 0; }
.svh.is-in .svhB-bar { clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--ease-out) calc(var(--i) * 120ms + 120ms); }
.svh.is-in .svhB-join { opacity: 1; transition: opacity 400ms var(--ease-out) calc(var(--i) * 120ms + 640ms); }
.svh.is-in .svhB-now { opacity: 1; transition: opacity 500ms var(--ease-out) 1000ms; }
.svh.is-in .svhC-mark { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-in-out) 450ms; }
/* the isometric takes: D's ring spreads once across the firm's tile; E's path runs on to the signed cases and the seal lands */
.js :is(.svhD-ring, .svhE-seal) { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.js .svhE-out { clip-path: inset(0 100% 0 0); }
.svh-iso.is-in .svhD-ring { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 250ms, transform 1000ms var(--ease-out) 250ms; }
.svh-iso.is-in .svhE-out { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--ease-in-out) 250ms; }
.svh-iso.is-in .svhE-seal { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out) 900ms, transform 450ms var(--ease-out) 900ms; }

/* service icons: a chip that holds the hand-drawn icon. The accent is registered as a colour so it can fade like the strokes
   (an unregistered custom property flips at once) */
@property --ic-accent { syntax: '<color>'; inherits: true; initial-value: #008DF9; }
.svc-ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); --ic-accent: var(--blue);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.svc-ic svg { width: 24px; height: 24px; }

/* ---------- the layout switcher at the foot of the section; it rides the bottom of the screen while the section is in view ---------- */
.svc-switch {
  position: sticky; bottom: 16px; z-index: 5;
  display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
  width: fit-content; max-width: 100%; margin: clamp(40px, 5vw, 64px) auto 0; padding: 4px;
  border-radius: 999px; background: var(--ink-deep);
  box-shadow: 0 1px 2px rgba(0, 27, 37, .2), 0 14px 30px -12px rgba(0, 27, 37, .45);
  font-size: .875rem;
}
.svc-switch__label { padding: 0 10px 0 12px; color: var(--muted-dark); font-weight: 500; }
.svc-switch button { min-height: 36px; padding: 6px 14px; border-radius: 999px; color: rgba(255, 255, 255, .82); font-weight: 500; white-space: nowrap; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.svc-switch button b { margin-right: 5px; font-weight: 700; color: var(--blue-on-dark); }
.svc-switch button[aria-pressed="true"] { background: #fff; color: var(--ink-deep); }
.svc-switch button[aria-pressed="true"] b { color: var(--blue-text); }
.svc-switch button:focus-visible { outline-color: var(--blue-on-dark); }
@media (hover: hover) and (pointer: fine) { .svc-switch button[aria-pressed="false"]:hover { color: #fff; background: rgba(255, 255, 255, .08); } }
.svc-switch::-webkit-scrollbar { display: none; }
.svc-switch button { flex: none; }
@media (max-width: 760px) { .svc-switch__label { display: none; } }
@media (max-width: 480px) { .svc-switch button { padding-inline: 11px; } }
/* several groups in one switcher: side by side where they fit, a row each where they don't */
.svc-switch--multi { flex-wrap: wrap; justify-content: center; gap: 2px 16px; border-radius: 24px; }
.svc-switch__group { display: flex; flex: none; align-items: center; gap: 2px; }
@media (max-width: 760px) { .svc-switch--multi .svc-switch__group { flex: 1 0 100%; justify-content: center; } }
@media (max-width: 480px) { .svc-switch--multi { font-size: .8125rem; } .svc-switch--multi button { padding-inline: 9px; } }
/* a group with more choices than a phone's width (the first tile's seven) runs onto a second line rather than scrolling */
@media (max-width: 480px) { .svc-switch--multi .svc-switch__group { flex-wrap: wrap; row-gap: 2px; } }

/* ---------- grid ---------- */
/* one ruled grid: hairlines between the cells (the 1px gaps show the rule colour behind) rather than eight floating cards.
   Each cell is one link, its name, stretched over the cell; the facts sit on one line across a row */
.sg { --pad: clamp(22px, 2.4vw, 32px); display: grid; gap: 1px; overflow: hidden; border-radius: var(--r-l); background: var(--rule); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -48px rgba(0, 27, 37, .45); }
.sg__cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--pad); background: var(--paper); transition: background-color 200ms var(--ease-out); }
.sg__cell .svc-ic { margin-bottom: 12px; }
.sg__name { padding-right: 32px; font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.25rem; font-weight: var(--head-w); letter-spacing: -0.015em; line-height: 1.2; }
.sg__name a { color: inherit; text-decoration: none; }
.sg__name a::after { content: ""; position: absolute; inset: 0; }
.sg__name a:focus-visible { outline: none; }
.sg__cell:not(.sg__cell--ask):has(a:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.sg__sum { margin-bottom: 14px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.sg__fact { align-self: stretch; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .875rem; line-height: 1.45; }
.sg__fact strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.sg__go { position: absolute; pointer-events: none; top: calc(var(--pad) + 12px); right: var(--pad); width: 20px; height: 20px; color: var(--blue-text); transition: transform 200ms var(--ease-out); }
/* the eighth cell: for the firm that doesn't know which it needs */
.sg__cell--ask { justify-content: flex-end; background: var(--ink-deep); color: #fff; }
.sg__cell--ask .sg__name { padding-right: 0; }
.sg__cell--ask .sg__sum { color: var(--muted-dark); }
.sg__cell--ask :focus-visible { outline-color: var(--hl); }
@media (hover: hover) and (pointer: fine) {
  .sg__cell:not(.sg__cell--ask):hover { background: #FBFCFD; }
  .sg__cell:hover .sg__go { transform: translateX(4px); }
  .sg__cell:hover .svc-ic { background: var(--ink-deep); color: #fff; box-shadow: none; --ic-accent: var(--blue-on-dark); }
}
@media (max-width: 639px) {
  /* phones: the icon sits beside the name, so eight cells stay short */
  .sg__cell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 10px; }
  .sg__cell .svc-ic { margin: 0; }
  .sg__sum, .sg__fact, .sg__cell--ask > * { grid-column: 1 / -1; }
  .sg__sum { margin-bottom: 6px; }
  .sg__cell--ask .btn { justify-self: start; }
}
@media (min-width: 640px) { .sg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    /* each cell takes four rows of the grid (icon, name, summary, fact), so a row's summaries share one height and its facts and
       their rules line up, however long each summary runs. The dark cell keeps its words at the foot */
    .sg__cell:not(.sg__cell--ask) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; justify-items: start; }
    .sg__cell--ask { grid-row: span 4; }
    .sg__fact { justify-self: stretch; margin-top: 0; }
  }
}

/* ---------- A. drawn ---------- */
/* the grid with a picture: each card opens on its service's drawing, set in a plate like a print in a mount, with the icon
   pinned to the plate's edge. The one movement is the drawing lifting in its plate under the pointer */
.sd { display: grid; gap: 16px; }
.sd__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 10px 24px; border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 44, 60, .07), 0 1px 2px rgba(0, 27, 37, .04); transition: box-shadow 300ms var(--ease-out); }
.sd__art { align-self: stretch; display: grid; place-items: center; padding: clamp(16px, 1.6vw, 22px) 14px; border-radius: 14px; background: #EBF0F4; transition: background-color 300ms var(--ease-out); }
.sd__art svg { display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 400 / 260; filter: drop-shadow(0 8px 12px rgba(0, 44, 60, .12)); transition: transform 300ms var(--ease-out); }
.sd__card .svc-ic { position: relative; margin: -32px 0 4px 16px; box-shadow: inset 0 0 0 1px var(--rule), 0 6px 14px -8px rgba(0, 27, 37, .3); }
.sd__name, .sd__sum, .sd__fact { margin-inline: 16px; }
.sd__name { font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.1875rem; font-weight: var(--head-w); letter-spacing: -0.015em; line-height: 1.2; }
.sd__name a { color: inherit; text-decoration: none; }
.sd__name a::after { content: ""; position: absolute; inset: 0; }
.sd__name a:focus-visible { outline: none; }
.sd__card:not(.sd__card--ask):has(a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.sd__sum { margin-bottom: 12px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.sd__fact { align-self: stretch; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .875rem; line-height: 1.45; }
.sd__fact strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.sd__card--ask { justify-content: flex-end; padding: 26px; background: var(--ink-deep); color: #fff; box-shadow: 0 30px 60px -40px rgba(0, 27, 37, .6); }
.sd__card--ask > * { margin-inline: 0; }
.sd__card--ask .sd__sum { color: var(--muted-dark); }
.sd__card--ask :focus-visible { outline-color: var(--hl); }
@media (hover: hover) and (pointer: fine) {
  .sd__card:not(.sd__card--ask):hover { box-shadow: 0 0 0 1px rgba(0, 44, 60, .1), 0 24px 48px -28px rgba(0, 27, 37, .4); }
  .sd__card:hover .sd__art { background: #E3EBF2; }
  .sd__card:hover .sd__art svg { transform: translateY(-6px); }
  .sd__card:hover .svc-ic { background: var(--ink-deep); color: #fff; box-shadow: none; --ic-accent: var(--blue-on-dark); }
}
@media (max-width: 1099px) {
  /* below 1100 the cards swipe sideways, the next one peeking in, so the section stays one card tall. The row bleeds to the
     screen edge; the bottom padding keeps the cards' shadow */
  .sd { grid-auto-flow: column; grid-auto-columns: min(80%, 320px); margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 40px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .sd::-webkit-scrollbar { display: none; }
  .sd__card { scroll-snap-align: start; }
}
@media (min-width: 1100px) { .sd { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@supports (grid-template-rows: subgrid) {
  /* each card takes five rows (drawing, icon, name, summary, fact), so the names, summaries and facts line up across a row */
  .sd__card:not(.sd__card--ask) { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; justify-items: start; }
  .sd__card--ask { grid-row: span 5; }
  @media (max-width: 1099px) { .sd { grid-template-rows: repeat(5, auto); } }
  .sd__art, .sd__fact { justify-self: stretch; }
  .sd__fact { margin-top: 0; }
}

/* ---------- B. ink ---------- */
/* the grid on a dark stage. AI optimization leads (the first service on LawRank's homepage and in its form) with its full
   description and its drawing on a raised plate; the other six are compact; the market check is the one light cell. The
   hairlines are the stage showing through 1px gaps */
.si { --pad: clamp(24px, 2.6vw, 36px); display: grid; gap: 1px; overflow: hidden; border-radius: 28px; background: #1A323B; color: #fff; box-shadow: 0 40px 80px -48px rgba(0, 27, 37, .7); }
.si__cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--pad); background: var(--ink-deep); transition: background-color 200ms var(--ease-out); }
.si .svc-ic { margin-bottom: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; --ic-accent: var(--blue-on-dark); }
.si__name { padding-right: 32px; font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.25rem; font-weight: var(--head-w); letter-spacing: -0.015em; line-height: 1.2; }
.si__name a { color: inherit; text-decoration: none; }
.si__name a::after { content: ""; position: absolute; inset: 0; }
.si__name a:focus-visible { outline: none; }
.si__cell:not(.si__cell--ask):has(a:focus-visible) { outline: 2px solid var(--blue-on-dark); outline-offset: -2px; }
.si__sum { margin-bottom: 14px; color: var(--muted-dark); line-height: 1.5; text-wrap: pretty; }
.si__fact { align-self: stretch; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule-dark); color: var(--muted-dark); font-size: .875rem; line-height: 1.45; }
.si__fact strong { display: block; margin-bottom: 2px; color: #fff; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.si__go { position: absolute; pointer-events: none; top: calc(var(--pad) + 12px); right: var(--pad); width: 20px; height: 20px; color: var(--blue-on-dark); transition: transform 200ms var(--ease-out); }
.si__cell--lead .si__name { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.1; }
.si__cell--lead .si__sum { max-width: 34em; color: rgba(255, 255, 255, .86); font-size: 1.125rem; }
.si__art { position: relative; align-self: stretch; flex: none; aspect-ratio: 400 / 290; border-radius: 18px; background: var(--ink-raised); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.si__art svg { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45)); transition: transform 300ms var(--ease-out); }
.si__cell--ask { justify-content: flex-end; gap: 20px; background: var(--ground); color: var(--ink); }
.si__cell--ask .si__name { padding-right: 0; }
.si__cell--ask .si__sum { margin: 4px 0 0; color: var(--muted); }
.si__cell--ask :focus-visible { outline-color: var(--blue-text); }
@media (hover: hover) and (pointer: fine) {
  .si__cell:not(.si__cell--lead, .si__cell--ask):hover { background: var(--ink-raised); }
  .si__cell:hover .si__go { transform: translateX(4px); }
  .si__cell:hover .svc-ic { background: #fff; color: var(--ink); box-shadow: none; --ic-accent: var(--blue); }
  .si__cell--lead:hover .si__art svg { transform: translateY(-6px); }
}
@media (max-width: 639px) {
  /* phones: the icon sits beside the name in the compact cells */
  .si__cell:not(.si__cell--lead, .si__cell--ask) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 10px; }
  .si__cell:not(.si__cell--lead, .si__cell--ask) .svc-ic { margin: 0; }
  .si__cell:not(.si__cell--lead, .si__cell--ask) :is(.si__sum, .si__fact) { grid-column: 1 / -1; }
  .si__sum { margin-bottom: 6px; }
  .si__art { margin-top: 10px; }
}
@media (min-width: 640px) {
  .si { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si__cell--lead, .si__cell--ask { grid-column: 1 / -1; }
  /* two across: the lead's words beside its drawing */
  .si__cell--lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(24px, 3vw, 40px); align-items: start; }
  .si__cell--lead > :not(.si__art) { grid-column: 1; }
  .si__cell--lead .si__art { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .si__cell--lead .si__fact { align-self: end; }
  .si__cell--lead .si__go { display: none; }  /* it would sit on the drawing; the name is still the link */
  .si__cell--lead .si__name { padding-right: 0; }
  /* the market check runs the full width: its words and button side by side */
  .si__cell--ask { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (min-width: 1100px) {
  .si { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* four across: the lead takes two columns and two rows, its drawing filling the space under its words */
  .si__cell--lead { grid-column: span 2; display: flex; }
  .si__cell--lead .si__go { display: block; }
  .si__cell--lead .si__name { padding-right: 32px; }
  .si__cell--lead .si__fact { margin-top: 0; }
  .si__cell--lead :is(.si__fact, .si__art) { align-self: stretch; }
  .si__cell--lead .si__art { flex: 1 1 0; min-height: 220px; aspect-ratio: auto; margin-top: 14px; }
  .si__cell--ask { grid-column: span 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    /* each compact cell takes four rows (icon, name, summary, fact), so a row's facts and their rules line up */
    .si__cell:not(.si__cell--lead, .si__cell--ask) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; justify-items: start; }
    .si__cell:not(.si__cell--lead, .si__cell--ask) .si__fact { justify-self: stretch; margin-top: 0; }
    .si__cell--lead, .si__cell--ask { grid-row: span 4; }
  }
  @media (min-width: 1100px) { .si__cell--lead { grid-row: span 8; } }
}

/* ---------- C. halo ---------- */
/* the grid's layout, light, with only the icons, made more of. Each icon sits on a raised tile in the buttons' material (its two
   faint rings and the round arrows are hidden, below); under the pointer a raised blue tile fades in over it */
.sl { --pad: clamp(24px, 2.6vw, 36px); --tile: 56px; display: grid; gap: 1px; overflow: hidden; border-radius: 24px; background: var(--rule); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 27, 37, .04), 0 40px 80px -56px rgba(0, 27, 37, .5); }
.sl__cell { --fade: 360ms var(--ease-fade); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--pad); background: var(--paper); transition: background-color var(--fade); }
.sl__tile {
  position: relative; display: grid; place-items: center; width: var(--tile); height: var(--tile); margin-bottom: 20px;
  border-radius: 16px; border: 1px solid #CDD6DF; color: var(--ink); --ic-accent: var(--blue);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%) #EDF1F5;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 44, 60, .08), 0 10px 20px -12px rgba(0, 44, 60, .35);
  isolation: isolate; transition: color var(--fade), --ic-accent var(--fade);
}
.sl__tile svg { position: relative; z-index: 1; width: 28px; height: 28px; }
/* the hover's blue: a raised blue tile laid over the light one, faded in. An opacity crossfade is even all the way; a colour
   interpolated from grey to blue passes through dull in-betweens and reads as a jump */
.sl__tile::after { content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; border: 1px solid #00519F; background: linear-gradient(180deg, #2894F7 0%, #0A74DD 32%, #0060C2 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 12px 24px -8px rgba(0, 112, 224, .55); opacity: 0; pointer-events: none; transition: opacity var(--fade); }
/* the rings around the tiles, hidden on request (30 Oct 2026); to bring them back, restore these and the two hover rules below,
   on an element of their own (the hover's blue layer now uses the tile's ::after):
   .sl__tile::before, .sl__tile::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; border-radius: 50%; border: 1px solid rgba(0, 44, 60, .08); transform: translate(-50%, -50%); pointer-events: none; transition: border-color var(--fade), background-color var(--fade); }
   .sl__tile::before { width: calc(var(--tile) + 48px); height: calc(var(--tile) + 48px); border-color: rgba(0, 44, 60, .11); }
   .sl__tile::after { width: calc(var(--tile) + 112px); height: calc(var(--tile) + 112px); border-color: rgba(0, 44, 60, .07); }
*/
.sl__name { padding-right: 0; font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.3125rem; font-weight: var(--head-w); letter-spacing: -0.018em; line-height: 1.2; }
.sl__name a { color: inherit; text-decoration: none; }
.sl__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sl__name a:focus-visible { outline: none; }
.sl__cell:not(.sl__cell--ask):has(a:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.sl__sum { margin-bottom: 16px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.sl__fact { align-self: stretch; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .875rem; line-height: 1.45; }
.sl__fact strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.sl__go { position: absolute; top: calc(var(--pad) + (var(--tile) - 36px) / 2); right: var(--pad); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--blue-text); transition: background-color var(--fade), border-color var(--fade), color var(--fade); }
.sl__go svg { width: 16px; height: 16px; transition: transform 320ms var(--ease-out); }
/* the arrows, hidden on request (30 Oct 2026): the whole cell is still the link. Remove this line to bring them back (and give
   .sl__name its padding-right: 44px again) */
.sl__go { display: none; }
/* the market check: the one pale blue cell. Its drawing takes whatever height the row leaves (it never makes the row taller),
   its words follow, and the button sits at the foot, full width. Under the pointer the pin lifts a little */
.sl__cell--ask { display: flex; background: #EDF6FE; }
.sl__cell--ask .sl__name { padding-right: 0; }
.sl__iso { flex: 1 1 0; width: 100%; min-height: 120px; margin: calc(var(--pad) * -.5) 0 12px; overflow: visible; filter: drop-shadow(0 12px 16px rgba(0, 44, 60, .12)); }
.sl__pin { transition: transform 400ms var(--ease-out); }
.sl__cell--ask .sl__sum { margin-bottom: 8px; }
.sl__cell--ask .btn { align-self: stretch; margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .sl__cell:not(.sl__cell--ask):hover { background: #FAFCFE; }
  /* in quickly (260ms), out a little slower (the 360ms above), the way a light comes on and fades */
  .sl__cell:hover { --fade: 260ms var(--ease-fade); }
  .sl__cell:not(.sl__cell--ask):hover .sl__tile { color: #fff; --ic-accent: #fff; }
  .sl__cell:not(.sl__cell--ask):hover .sl__tile::after { opacity: 1; }
  /* (hidden with the rings)
    .sl__cell:not(.sl__cell--ask):hover .sl__tile::before { border-color: rgba(0, 141, 249, .3); background-color: rgba(0, 141, 249, .04); }
    .sl__cell:not(.sl__cell--ask):hover .sl__tile::after { border-color: rgba(0, 141, 249, .16); }
  */
  .sl__cell:hover .sl__go { border-color: var(--blue-text); background: var(--blue-text); color: #fff; }
  .sl__cell:hover .sl__go svg { transform: translateX(2px); }
  .sl__cell--ask:hover .sl__pin { transform: translateY(-4px); }
}
@media (max-width: 639px) {
  /* phones: the tile sits beside the name, so eight cells stay short */
  .sl { --tile: 48px; }
  .sl__cell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 10px; }
  .sl__tile { margin: 0; border-radius: 14px; }
  .sl__tile svg { width: 24px; height: 24px; }
  .sl__sum, .sl__fact { grid-column: 1 / -1; }
  .sl__sum { margin: 6px 0 4px; }
  .sl__cell--ask { display: flex; align-items: flex-start; }
  .sl__iso { flex: none; height: auto; min-height: 0; max-width: 340px; margin-top: 0; align-self: center; aspect-ratio: 236 / 152; }
}
@media (min-width: 640px) { .sl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    /* each cell takes four rows (tile, name, summary, fact), so the names, summaries and facts line up across a row; the market
       check's button sits on the facts' line */
    .sl__cell { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; justify-items: start; }
    .sl__cell--ask { display: flex; }
    .sl__fact { justify-self: stretch; margin-top: 0; }
  }
}

/* ==========================================================================
   TERMS OF ENGAGEMENT
   ========================================================================== */
.clauses { display: grid; gap: 0 clamp(32px, 4vw, 56px); counter-reset: none; }
@media (min-width: 680px) { .clauses { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .clauses { grid-template-columns: repeat(3, 1fr); } }
.clauses li { padding: 28px 0 44px; border-top: 1px solid var(--ink); }
.clauses__n { font-size: .9375rem; font-weight: 600; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.clauses h3 { margin-top: 14px; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.clauses p { margin-top: 10px; color: var(--muted); max-width: 26rem; }

/* ==========================================================================
   TESTIMONY: LawRank's eight client films (lawrank.com/testimonials/), on request in place of the written reviews
   (31 Oct 2026). Portrait frames from each film's own poster, four across from 720px and two on phones; each opens the
   film lightbox. The two ratings sit in the head as links to their sources
   ========================================================================== */
/* the quote caption, shared with Exhibit A's quote */
.testimony figcaption { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.testimony figcaption img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 44, 60, .1); }
.testimony figcaption strong { color: var(--ink); }

.scores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.scores a {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule); font-size: .875rem; line-height: 1.3; color: var(--muted); text-decoration: none;
  transition: box-shadow 200ms var(--ease-out);
}
.scores b { font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.25rem; font-weight: var(--fig-w); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.scores strong { font-weight: 600; color: var(--ink); }
.scores svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out), color 200ms; }
@media (hover: hover) and (pointer: fine) {
  .scores a:hover { box-shadow: inset 0 0 0 1px #AEB9C4; }
  .scores a:hover svg { color: var(--blue-text); transform: translate(2px, -2px); }
}
/* phones: the two side by side as small tiles, the source over its count */
@media (max-width: 480px) {
  .scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .scores a { gap: 10px; padding: 10px 12px; border-radius: var(--r-m); font-size: .8125rem; }
  .scores span { display: grid; line-height: 1.3; }
  .scores svg { display: none; }
}

.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
@media (min-width: 720px) { .clips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(16px, 2vw, 28px); } }
.clip { display: block; color: var(--ink); text-decoration: none; }
.clip__frame {
  position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: var(--r-l); background: var(--ink-deep);
  box-shadow: 0 1px 2px rgba(0, 27, 37, .08), 0 22px 44px -30px rgba(0, 27, 37, .55);
}
.clip__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
/* a shade along the foot, so the play button holds on light frames */
.clip__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 27, 37, 0) 60%, rgba(0, 27, 37, .45) 100%); }
.clip__time {
  position: absolute; z-index: 1; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 27, 37, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.clip__play {
  position: absolute; z-index: 1; left: 14px; bottom: 14px; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6);
  transition: transform 260ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.clip__play svg { width: 18px; height: 18px; margin-left: 2px; }
.clip__who { display: grid; gap: 4px; margin-top: 16px; font-size: .875rem; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.clip__who strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.clip:focus-visible { outline: none; }
.clip:focus-visible .clip__frame { outline: 2px solid var(--blue-text); outline-offset: 4px; }
.clip:active .clip__play { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .clip:hover .clip__frame img { transform: scale(1.04); }
  .clip:hover .clip__play { background: var(--blue); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .clip:hover .clip__frame img { transform: none; } }
/* four across on tablets and two on phones: the cards are narrow, so the type and the button come down */
@media (max-width: 1099.98px) {
  .clip__play { left: 10px; bottom: 10px; width: 40px; height: 40px; }
  .clip__play svg { width: 16px; height: 16px; }
  .clip__time { top: 8px; right: 8px; }
  .clip__who { margin-top: 12px; font-size: .8125rem; }
  .clip__who strong { font-size: .9375rem; }
}
.clips__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--muted);
}

/* ==========================================================================
   WORK: real client sites on a rail
   ========================================================================== */
.work { overflow: hidden; }
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.work__head .lede { margin-top: 20px; max-width: 38rem; }
.work__nav { display: flex; gap: 10px; flex: none; }
.round-btn { /* raised like .btn--ghost (v1: a flat 1px var(--rule-dark) ring) */
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -10px rgba(0, 0, 0, .6);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), opacity 180ms, transform 160ms var(--ease-out);
}
.round-btn svg { width: 20px; height: 20px; }
.round-btn[data-rail-prev] svg { transform: rotate(180deg); }
.round-btn:disabled { opacity: .35; cursor: default; }
.round-btn:disabled { box-shadow: none; }
.round-btn:not(:disabled):active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
@media (hover: hover) and (pointer: fine) { .round-btn:not(:disabled):hover { border-color: rgba(255, 255, 255, .45); background-color: rgba(255, 255, 255, .05); } }

.rail {
  /* % not vw: vw includes the scrollbar, which pushed the first site off the column */
  --inset: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -4px; }
.rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.rail.is-dragging * { pointer-events: none; }
.rail__track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; padding-inline: var(--inset); }
.site { width: clamp(288px, 44vw, 660px); scroll-snap-align: start; }
.site__frame { overflow: hidden; border-radius: var(--r-m); background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.site__bar { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; background: #EEF1F4; border-bottom: 1px solid #DDE1E9; }
.site__url { min-width: 50%; padding: 3px 12px; border-radius: 999px; background: #fff; color: #4A6470; font-size: .75rem; text-align: center; letter-spacing: .01em; }
.site__frame img { width: 100%; aspect-ratio: 1200 / 748; object-fit: cover; object-position: top; }
.site__name { margin-top: 20px; font-size: 1.125rem; font-weight: 500; }
.site__meta { margin-top: 4px; font-size: .9375rem; color: var(--muted-dark); }
.work__foot { margin-top: clamp(40px, 5vw, 56px); }

/* ==========================================================================
   ABOUT, PODCAST, CONFERENCES
   ========================================================================== */
.about__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 7vw, 112px); } }
.about__photo { position: relative; }
.about__photo img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-l); }
.about__copy .lede { margin-top: 24px; color: var(--ink); }
.about__copy > p:not(.lede) { margin-top: 18px; color: var(--muted); max-width: 38rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 40px; }
.facts div { padding: 16px 0; border-top: 1px solid var(--rule); }
.facts dt { font-size: .8125rem; color: var(--muted); }
.facts dd { margin-top: 2px; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }

.podcast {
  display: grid; gap: 40px;
  margin-top: clamp(72px, 9vw, 128px);
  padding: clamp(24px, 4vw, 56px);
  border-radius: 24px;
  background: var(--ink-deep); color: #fff;
}
@media (min-width: 1040px) { .podcast { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; } }
.podcast__intro { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: start; }
.podcast__cover { width: 132px; border-radius: var(--r-m); }
.podcast__intro .h3 { font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.75rem; font-weight: var(--head-w); letter-spacing: -0.02em; }
.podcast__intro p { margin-top: 10px; color: var(--muted-dark); font-size: 1rem; }
.podcast__subs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.episodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.episodes a { display: block; text-decoration: none; }
.episodes img { width: 100%; border-radius: var(--r-m); }
.episodes__n { display: block; margin-top: 14px; font-size: .8125rem; color: var(--blue-on-dark); font-weight: 600; }
.episodes strong { display: block; margin-top: 4px; font-weight: 500; line-height: 1.3; }
.episodes span:last-child { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.4; color: var(--muted-dark); }
@media (hover: hover) and (pointer: fine) { .episodes a:hover strong { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 640px) {
  .podcast__intro { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; }
  .podcast__cover { width: 88px; }
  .episodes { grid-template-columns: 1fr; gap: 16px; }
  .episodes a { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .episodes img { grid-row: 1 / span 3; }
  .episodes__n { margin-top: 0; }
}

/* where we meet trial lawyers: four layouts (?meet=); A wall is final (31 Oct), the others stay reachable with ?meet= and the
   Conferences row in ?review. One list serves them all,
   each conference with its logo (one ink, made from the logos LawRank publishes), dates, name, event and city.
   A wall: the heading on an ink tile, then a tile per conference, its logo in the middle and the dates and city at the foot.
   B map: the heading and the conferences as a list, beside the US with a pin on each city; pointing at one lights its pin.
   C rows: the heading above a row per conference: logo, name and event, city, dates.
   Current (?meet=grid): the heading as the first cell and the conferences under rules, four across, no logos.
   Set aside earlier: v1 the names as pills (.meet__list { display: flex; flex-wrap: wrap; gap: 10px; } li { padding: 8px 14px;
   border-radius: 999px; border: 1px solid var(--rule); }), v2 a docket beside the heading (rows of 7rem 1fr 9.5rem under a
   1px ink rule, the dates in --blue-text, the city right) */
.meet { margin-top: clamp(72px, 9vw, 120px); }
.meet__year, .meet__item time { font-size: .9375rem; font-weight: 600; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.meet__title { margin-top: 12px; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.meet__name { display: flex; flex-direction: column; gap: 4px; }
.meet__name strong { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.meet__event, .meet__city { font-size: .875rem; color: var(--muted); }
.meet__logo { width: calc(var(--w) * var(--k, 1)); }
.meet__map { display: none; }
.meet__when { display: contents; }
.meet__months { display: none; }
html[data-meet="grid"] .meet__name { order: 1; }
html[data-meet="grid"] .meet__city { order: 2; }

/* current: the grid */
html[data-meet="grid"] .meet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
@media (min-width: 1000px) { html[data-meet="grid"] .meet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(24px, 2.6vw, 40px); } }
html[data-meet="grid"] .meet__list { display: contents; }
html[data-meet="grid"] :is(.meet__head, .meet__item) { display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid var(--ink); }
html[data-meet="grid"] .meet__logo { display: none; }
html[data-meet="grid"] .meet__name { margin-top: 12px; }
html[data-meet="grid"] .meet__city { margin-top: auto; padding-top: 18px; }
@media (max-width: 599.98px) { html[data-meet="grid"] :is(.meet__year, .meet__item time) { font-size: .8125rem; } html[data-meet="grid"] .meet__city { padding-top: 12px; } }

/* A wall: eight tiles, the heading first, so the rows close evenly at two and four across */
html[data-meet="wall"] .meet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { html[data-meet="wall"] .meet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
html[data-meet="wall"] .meet__list { display: contents; }
html[data-meet="wall"] :is(.meet__head, .meet__item) { position: relative; display: flex; flex-direction: column; min-height: clamp(184px, 9vw + 112px, 248px); padding: clamp(16px, 1.8vw, 24px); border-radius: var(--r-m); }
html[data-meet="wall"] .meet__head { justify-content: space-between; background: var(--ink-deep); }
html[data-meet="wall"] .meet__head .meet__year { color: var(--blue-on-dark); }
html[data-meet="wall"] .meet__head .meet__title { color: #fff; }
html[data-meet="wall"] .meet__item { background: var(--ground); --k: .7; }
@media (min-width: 1100px) { html[data-meet="wall"] .meet__item { --k: 1; } }
html[data-meet="wall"] .meet__logo { margin: auto; padding-block: 8px 20px; }
/* the logo names the conference; the name stays for screen readers */
html[data-meet="wall"] .meet__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-meet="wall"] .meet__item time { font-size: .875rem; }
html[data-meet="wall"] .meet__city { margin-top: 2px; }

/* the wall's finish, while we choose (31 Oct, "some visual improvement needed here as well"; ?mf=, the switcher under it).
   The same wall, a better finish. In each: every logo at its optical width (--ow, by visual weight, so the square badge
   and the heavy marks no longer outweigh the light wordmarks), and the ink tile lit a little from its upper right.
   A paper: white cards on a hairline with a soft shadow, a rule over the dates. B badge: each a conference badge, the
   lanyard slot at the top, the logo on white, the dates and city on a grey foot. C ruled: one panel, hairlines between
   the tiles, as the services grid has. Current: the wall as it was */
html[data-meet="wall"]:not([data-mf="current"]) .meet__logo { width: calc(var(--ow, var(--w)) * var(--k, 1)); }
html[data-meet="wall"]:not([data-mf="current"]) .meet__head {
  background: radial-gradient(130% 100% at 100% 0, #0D3546, rgba(13, 53, 70, 0) 62%), var(--ink-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
html[data-meet="wall"]:not([data-mf="current"]) :is(.meet__head, .meet__item) { --mp: clamp(16px, 1.8vw, 24px); padding: var(--mp); }

/* A paper */
html[data-meet="wall"][data-mf="paper"] .meet__item {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 27, 37, .04), 0 20px 40px -30px rgba(0, 27, 37, .3);
}
html[data-meet="wall"][data-mf="paper"] .meet__item time { padding-top: 14px; border-top: 1px solid var(--rule); }

/* B badge: the slot, then the foot (drawn from the dates down to the card's edge) */
html[data-meet="wall"][data-mf="badge"] .meet__item {
  isolation: isolate; overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 27, 37, .04), 0 20px 40px -30px rgba(0, 27, 37, .3);
}
html[data-meet="wall"][data-mf="badge"] :is(.meet__head, .meet__item)::before {
  content: ""; position: absolute; top: 14px; left: 50%; width: 38px; height: 8px; margin-left: -19px; border-radius: 4px;
  background: var(--ground); box-shadow: inset 0 1px 2px rgba(0, 27, 37, .22), 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-meet="wall"][data-mf="badge"] .meet__head::before { background: rgba(0, 0, 0, .32); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .08); }
html[data-meet="wall"][data-mf="badge"] .meet__head .meet__year { padding-top: 14px; }
html[data-meet="wall"][data-mf="badge"] .meet__item time { position: relative; padding-top: 16px; }
html[data-meet="wall"][data-mf="badge"] .meet__item time::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: calc(var(--mp) * -1); right: calc(var(--mp) * -1); height: 200px;
  background: var(--ground); box-shadow: inset 0 1px 0 var(--rule);
}

/* C ruled */
html[data-meet="wall"][data-mf="ruled"] .meet {
  gap: 1px; overflow: hidden; border-radius: var(--r-l); background: var(--rule);
  box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -48px rgba(0, 27, 37, .45);
}
html[data-meet="wall"][data-mf="ruled"] :is(.meet__head, .meet__item) { border-radius: 0; }
html[data-meet="wall"][data-mf="ruled"] .meet__item { background: var(--paper); }

/* ---------- the wall's dates and its first tile, while we choose (31 Oct, "change the date position totally think
   creatively", "chnage layout if needed in some variants", "1st tile needs visual treastment"; ?md= and ?mh=, the
   switcher under the wall). Dates: A calendar, a calendar leaf in the tile's corner, the city at its foot. B stamp, the
   dates and city in a round passport stamp, each at its own angle. C season, the wall as the season's calendar: June to
   October across the top, each conference under its month (one a month runs tall, two stack), only its days on the
   card; under 1100px, cards with their month. First tile: A map, the US faint with a point on each city. B route, the
   year's tour drawn once across it in date order. C seal, an embossed seal at the corner. Current: as they were ---------- */
html[data-meet="wall"] :is(.meet__head, .meet__item) { --mp: clamp(16px, 1.8vw, 24px); }
html[data-meet="wall"]:not([data-md="current"]) .meet__item { text-align: center; }
html[data-meet="wall"]:not([data-md="current"]) .meet__item time { padding-top: 0; border-top: 0; }
html[data-meet="wall"][data-mf]:not([data-md="current"]) .meet__item time::before { content: none; }
.meet__mon, .meet__days { font: inherit; }

/* A calendar */
html[data-meet="wall"][data-md="calendar"] .meet__item { padding-top: calc(var(--mp) + 26px); }
html[data-meet="wall"][data-md="calendar"] .meet__logo { padding-block: 0 16px; }
html[data-meet="wall"][data-md="calendar"] .meet__item time {
  position: absolute; top: var(--mp); left: var(--mp); display: flex; flex-direction: column; min-width: 54px; overflow: hidden;
  border-radius: 8px; background: var(--paper); color: var(--ink); text-align: center;
  box-shadow: 0 0 0 1px var(--rule), 0 1px 1px rgba(0, 27, 37, .04), 0 10px 18px -12px rgba(0, 27, 37, .4);
}
html[data-meet="wall"][data-md="calendar"] .meet__mon { padding: 3px 8px 2px; background: var(--blue); color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html[data-meet="wall"][data-md="calendar"] .meet__days { padding: 5px 8px 6px; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
html[data-meet="wall"][data-md="calendar"] .meet__city { margin-top: 0; font-size: .8125rem; }
/* two to a row on phones: the logo starts under the leaf rather than beside it */
@media (max-width: 599.98px) {
  html[data-meet="wall"][data-md="calendar"] .meet__item { padding-top: calc(var(--mp) + 52px); }
  html[data-meet="wall"][data-md="calendar"] .meet__logo { padding-block: 0 12px; }
}

/* B stamp: an oval passport stamp at the foot, the city over the dates; the logo takes the room above it */
html[data-meet="wall"][data-md="stamp"] .meet__item { padding-bottom: calc(var(--mp) + 56px); }
html[data-meet="wall"][data-md="stamp"] .meet__logo { padding-block: 0; }
html[data-meet="wall"][data-md="stamp"] .meet__when {
  position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 118px; height: 62px; border: 1.5px solid currentColor; border-radius: 50%; outline: 1px solid currentColor; outline-offset: -5px;
  color: var(--blue-text); opacity: .9; transform: rotate(var(--rot, -7deg));
}
html[data-meet="wall"][data-md="stamp"] .meet__item time { order: 2; font-size: .875rem; font-weight: 700; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; color: inherit; }
html[data-meet="wall"][data-md="stamp"] .meet__city { order: 1; margin: 0; font-size: .53125rem; font-weight: 600; line-height: 1.1; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; color: inherit; }
html[data-meet="wall"][data-md="stamp"] .meet__item:nth-child(2) .meet__when { --rot: 6deg; }
html[data-meet="wall"][data-md="stamp"] .meet__item:nth-child(3) .meet__when { --rot: -3deg; }
html[data-meet="wall"][data-md="stamp"] .meet__item:nth-child(4) .meet__when { --rot: 8deg; }
html[data-meet="wall"][data-md="stamp"] .meet__item:nth-child(5) .meet__when { --rot: -9deg; }
html[data-meet="wall"][data-md="stamp"] .meet__item:nth-child(6) .meet__when { --rot: 4deg; }
html[data-meet="wall"][data-md="stamp"] .meet__item:nth-child(7) .meet__when { --rot: -5deg; }
@media (max-width: 599.98px) {
  html[data-meet="wall"][data-md="stamp"] .meet__item { padding-bottom: calc(var(--mp) + 48px); }
  html[data-meet="wall"][data-md="stamp"] .meet__when { right: 8px; bottom: 8px; width: 104px; height: 54px; }
  html[data-meet="wall"][data-md="stamp"] .meet__item time { font-size: .75rem; }
  html[data-meet="wall"][data-md="stamp"] .meet__city { font-size: .5rem; }
}

/* C season: the days large on the card, the month above it (below 1100px) or at the head of its column */
html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]) .meet__logo { padding-block: 4px 16px; }
html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]) .meet__item time { display: flex; justify-content: center; align-items: baseline; gap: 6px; color: var(--ink); }
html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]) .meet__mon { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-text); }
html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]) .meet__days {
  font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]) .meet__city { margin-top: 2px; font-size: .8125rem; }
@media (min-width: 1100px) {
  html[data-meet="wall"][data-md="season"] .meet {
    grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); grid-template-rows: auto minmax(168px, auto) minmax(168px, auto);
  }
  html[data-meet="wall"][data-md="season"] .meet__head { grid-column: 1; grid-row: 1 / 4; }
  html[data-meet="wall"][data-md="season"] .meet__months { display: contents; }
  html[data-meet="wall"][data-md="season"] .meet__months li {
    grid-row: 1; align-self: end; padding: 6px 2px 10px; border-bottom: 2px solid var(--ink);
    font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--ink);
  }
  html[data-meet="wall"][data-md="season"] .meet__months li:nth-child(1) { grid-column: 2; }
  html[data-meet="wall"][data-md="season"] .meet__months li:nth-child(2) { grid-column: 3; }
  html[data-meet="wall"][data-md="season"] .meet__months li:nth-child(3) { grid-column: 4; }
  html[data-meet="wall"][data-md="season"] .meet__months li:nth-child(4) { grid-column: 5; }
  html[data-meet="wall"][data-md="season"] .meet__months li:nth-child(5) { grid-column: 6; }
  html[data-meet="wall"][data-md="season"] .meet__item { min-height: 0; --k: .78; }
  html[data-meet="wall"][data-md="season"] .meet__item[data-month="6"] { grid-column: 2; grid-row: 2 / 4; }
  html[data-meet="wall"][data-md="season"] .meet__item[data-month="7"] { grid-column: 3; grid-row: 2 / 4; }
  html[data-meet="wall"][data-md="season"] .meet__item[data-month="8"] { grid-column: 4; }
  html[data-meet="wall"][data-md="season"] .meet__item[data-month="9"] { grid-column: 5; }
  html[data-meet="wall"][data-md="season"] .meet__item[data-month="10"] { grid-column: 6; grid-row: 2 / 4; }
  html[data-meet="wall"][data-md="season"] .meet__item:nth-child(3), html[data-meet="wall"][data-md="season"] .meet__item:nth-child(5) { grid-row: 2; }
  html[data-meet="wall"][data-md="season"] .meet__item:nth-child(4), html[data-meet="wall"][data-md="season"] .meet__item:nth-child(6) { grid-row: 3; }
  /* the column says the month, so the card needn't (it stays for screen readers) */
  html[data-meet="wall"][data-md="season"] .meet__mon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* ruled: the month heads sit on white, the panel's rules between them */
  html[data-meet="wall"][data-mf="ruled"][data-md="season"] .meet__months li { padding: 14px 16px 10px; border-bottom: 0; background: var(--paper); }
}

/* ---------- two more layouts for the wall's right side (1 Nov, "give me 2 more layout for right section"; ?md=line and
   ?md=rack, under Layout in the switcher). The first tile stays on the left at the season's height; under 1100px both
   are the season's cards, two or four across.
   D timeline: the season as one line. Each conference is a dot on it in date order with its card above or below,
   alternating so seven fit; the months mark the line. 16 tracks: each card spans four, its dot at its centre.
   E rack: each conference's badge hangs from a rail on its lanyard, the months on the rail. The lanyards differ in
   length, the badges hang a little off true, and they swing once, gently, when the wall comes into view. ---------- */
@media (min-width: 1100px) {
  html[data-meet="wall"]:is([data-md="line"], [data-md="rack"]) .meet__months { display: contents; }
  html[data-meet="wall"]:is([data-md="line"], [data-md="rack"]) .meet__item { min-height: 0; --k: .78; }
  /* the badge finish clips its card for the grey foot, which these don't use: let the stems and lanyards out */
  html[data-meet="wall"][data-mf="badge"]:is([data-md="line"], [data-md="rack"]) .meet__item { overflow: visible; }
  /* the ruled finish's panel would show grey between the cards: here each card takes the hairline itself */
  html[data-meet="wall"][data-mf="ruled"]:is([data-md="line"], [data-md="rack"]) .meet { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  html[data-meet="wall"][data-mf="ruled"]:is([data-md="line"], [data-md="rack"]) .meet__item { box-shadow: 0 0 0 1px var(--rule); }
  html[data-meet="wall"][data-mf="ruled"]:is([data-md="line"], [data-md="rack"]) .meet__head { border-radius: var(--r-m); }

  /* D timeline */
  html[data-meet="wall"][data-md="line"] .meet {
    grid-template-columns: minmax(0, 1.3fr) repeat(16, minmax(0, .3125fr)); grid-template-rows: minmax(180px, 1fr) 64px minmax(180px, 1fr); gap: 0;
  }
  html[data-meet="wall"][data-md="line"] .meet__head { grid-column: 1; grid-row: 1 / 4; margin-right: 12px; }
  html[data-meet="wall"][data-md="line"] .meet__item { margin-inline: 6px; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(odd) { grid-row: 1; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(even) { grid-row: 3; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(1) { grid-column: 2 / span 4; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(2) { grid-column: 4 / span 4; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(3) { grid-column: 6 / span 4; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(4) { grid-column: 8 / span 4; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(5) { grid-column: 10 / span 4; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(6) { grid-column: 12 / span 4; }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(7) { grid-column: 14 / span 4; }
  /* the stem and its dot on the line, 32px off the card (the line is the middle of its 64px row) */
  html[data-meet="wall"][data-md="line"] .meet__item::after {
    content: ""; position: absolute; top: 100%; left: 50%; width: 14px; height: 39px; margin-left: -7px; pointer-events: none;
    background:
      radial-gradient(circle 7px at 50% calc(100% - 7px), var(--blue) 0 3.5px, var(--paper) 4px 5.5px, rgba(255, 255, 255, 0) 6px),
      linear-gradient(var(--ink), var(--ink)) 50% 0 / 1.5px calc(100% - 7px) no-repeat;
  }
  html[data-meet="wall"][data-md="line"] .meet__item:nth-child(even)::after {
    top: auto; bottom: 100%;
    background:
      radial-gradient(circle 7px at 50% 7px, var(--blue) 0 3.5px, var(--paper) 4px 5.5px, rgba(255, 255, 255, 0) 6px),
      linear-gradient(var(--ink), var(--ink)) 50% 100% / 1.5px calc(100% - 7px) no-repeat;
  }
  /* the line: each month a stretch of it, a tick where it starts, its name under the line */
  html[data-meet="wall"][data-md="line"] .meet__months li {
    grid-row: 2; position: relative; padding: 42px 0 0 10px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
    background: linear-gradient(var(--ink), var(--ink)) 0 31px / 100% 2px no-repeat;
  }
  html[data-meet="wall"][data-md="line"] .meet__months li::before { content: ""; position: absolute; top: 25px; left: 0; width: 2px; height: 14px; background: var(--ink); }
  html[data-meet="wall"][data-md="line"] .meet__months li:last-child::after { content: ""; position: absolute; top: 25px; right: 0; width: 2px; height: 14px; background: var(--ink); }
  html[data-meet="wall"][data-md="line"] .meet__months li:nth-child(1) { grid-column: 2 / 5; }
  html[data-meet="wall"][data-md="line"] .meet__months li:nth-child(2) { grid-column: 5 / 7; }
  html[data-meet="wall"][data-md="line"] .meet__months li:nth-child(3) { grid-column: 7 / 11; }
  html[data-meet="wall"][data-md="line"] .meet__months li:nth-child(4) { grid-column: 11 / 15; }
  html[data-meet="wall"][data-md="line"] .meet__months li:nth-child(5) { grid-column: 15 / 18; }

  /* E rack */
  html[data-meet="wall"][data-md="rack"] .meet {
    grid-template-columns: minmax(0, 1.3fr) repeat(7, minmax(0, .7143fr)); grid-template-rows: auto minmax(376px, 1fr); column-gap: 14px; row-gap: 0;
  }
  html[data-meet="wall"][data-md="rack"] .meet__head { grid-column: 1; grid-row: 1 / 3; }
  /* the rail, one rod under the months, through the gaps between them */
  html[data-meet="wall"][data-md="rack"] .meet__months li {
    grid-row: 1; align-self: end; position: relative; padding: 0 0 14px 2px;
    font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--ink);
  }
  html[data-meet="wall"][data-md="rack"] .meet__months li::after {
    content: ""; position: absolute; left: 0; right: -14px; bottom: 0; height: 5px; border-radius: 3px;
    background: linear-gradient(180deg, #2A4A5A, var(--ink-deep));
  }
  html[data-meet="wall"][data-md="rack"] .meet__months li:last-child::after { right: 0; }
  html[data-meet="wall"][data-md="rack"] .meet__months li:nth-child(1) { grid-column: 2; }
  html[data-meet="wall"][data-md="rack"] .meet__months li:nth-child(2) { grid-column: 3; }
  html[data-meet="wall"][data-md="rack"] .meet__months li:nth-child(3) { grid-column: 4 / 6; }
  html[data-meet="wall"][data-md="rack"] .meet__months li:nth-child(4) { grid-column: 6 / 8; }
  html[data-meet="wall"][data-md="rack"] .meet__months li:nth-child(5) { grid-column: 8; }
  html[data-meet="wall"][data-md="rack"] .meet__item {
    grid-row: 2; align-self: start; min-height: 236px; margin-top: var(--drop); --k: .7;
    transform: rotate(var(--tilt)); transform-origin: 50% calc(-1 * var(--drop));
  }
  html[data-meet="wall"][data-md="rack"] .meet__item:nth-child(1) { grid-column: 2; --drop: 26px; --tilt: -1.2deg; --i: 0; }
  html[data-meet="wall"][data-md="rack"] .meet__item:nth-child(2) { grid-column: 3; --drop: 64px; --tilt: 1.1deg; --i: 1; }
  html[data-meet="wall"][data-md="rack"] .meet__item:nth-child(3) { grid-column: 4; --drop: 38px; --tilt: -.7deg; --i: 2; }
  html[data-meet="wall"][data-md="rack"] .meet__item:nth-child(4) { grid-column: 5; --drop: 84px; --tilt: 1.2deg; --i: 3; }
  html[data-meet="wall"][data-md="rack"] .meet__item:nth-child(5) { grid-column: 6; --drop: 48px; --tilt: -1.1deg; --i: 4; }
  html[data-meet="wall"][data-md="rack"] .meet__item:nth-child(6) { grid-column: 7; --drop: 18px; --tilt: -.6deg; --i: 5; }
  html[data-meet="wall"][data-md="rack"] .meet__item:nth-child(7) { grid-column: 8; --drop: 70px; --tilt: 1deg; --i: 6; }
  /* its lanyard from the rail, and the clip that holds the badge */
  html[data-meet="wall"][data-md="rack"] .meet__item::after {
    content: ""; position: absolute; bottom: calc(100% - 12px); left: 50%; width: 18px; height: calc(var(--drop) + 12px); margin-left: -9px; pointer-events: none;
    background:
      linear-gradient(180deg, #E4E9EF, #A9B4C0) 50% 100% / 18px 9px no-repeat,
      linear-gradient(90deg, #005FAE, var(--blue) 30%, #33A4FA 52%, var(--blue) 74%, #005FAE) 50% 0 / 11px calc(100% - 6px) no-repeat;
    border-radius: 0 0 3px 3px;
  }
  /* the badge finish already cuts a slot at the top: the clip sits in it */
  html[data-meet="wall"][data-mf="badge"][data-md="rack"] .meet__item::after { bottom: calc(100% - 22px); height: calc(var(--drop) + 22px); }
  /* narrow badges: a little less margin at the sides, so a city fits on one line */
  html[data-meet="wall"][data-md="rack"] .meet__item { padding-inline: 10px; }
  html[data-meet="wall"][data-md="rack"] .meet__city { font-size: .75rem; white-space: nowrap; }
  /* the rail says the month */
  html[data-meet="wall"][data-md="rack"] .meet__mon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* they swing, once, a little, from where they hang; on hover a badge settles true */
@keyframes meet-swing {
  0% { transform: rotate(var(--tilt)); }
  30% { transform: rotate(calc(var(--tilt) * -2.2)); }
  58% { transform: rotate(calc(var(--tilt) * 1.5)); }
  80% { transform: rotate(calc(var(--tilt) * -.5)); }
  100% { transform: rotate(var(--tilt)); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .js[data-meet="wall"][data-md="rack"] .meet.is-in .meet__item { animation: meet-swing 1800ms cubic-bezier(.37, 0, .63, 1) calc(var(--i) * 70ms + 100ms) 1 both; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-meet="wall"][data-md="rack"] .meet__item { transition: transform 700ms cubic-bezier(.34, 1.56, .64, 1); }
  html[data-meet="wall"][data-md="rack"] .meet__item:hover { transform: rotate(0deg); animation: none; }
}

/* the first tile */
.meet__art, .meet__seal, .meet__photo { display: none; }
/* D photo: Maria at Law-Di-Gras fills the tile; ink falls over its top for the year, its foot for the heading, and its sides */
html[data-meet="wall"][data-mh="photo"] .meet__photo {
  position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%;
}
html[data-meet="wall"][data-mh="photo"] .meet__head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(0, 27, 37, .72) 0, rgba(0, 27, 37, 0) 26%, rgba(0, 27, 37, 0) 46%, rgba(0, 27, 37, .55) 68%, rgba(0, 27, 37, .94) 100%),
    linear-gradient(90deg, rgba(0, 27, 37, .4), rgba(0, 27, 37, 0) 24%, rgba(0, 27, 37, 0) 76%, rgba(0, 27, 37, .4)),
    rgba(0, 27, 37, .12);
}
html[data-meet="wall"][data-mh="photo"] .meet__head .meet__title { text-shadow: 0 1px 12px rgba(0, 27, 37, .5); }
/* the wall's tiles are wider than tall: her face, not her badge */
html[data-meet="wall"][data-mh="photo"]:not(:is([data-md="season"], [data-md="line"], [data-md="rack"])) .meet__photo { object-position: 50% 24.5%; }
html[data-meet="wall"]:not([data-mh="current"]) .meet__head { overflow: hidden; isolation: isolate; }

/* E step out and F cover (31 Oct, "use tis image creatively in our section", "use this w/o bg"): Maria and Thalia, cut
   out, on the ink tile. E: the tile is a frame, their heads step out over its top edge, the year moves down to sit over
   the heading. F: a magazine cover, the year set huge behind their heads. In both a soft light behind them keeps dark hair
   off the ink, and ink rises over their badges for the heading. The box clips them to the tile at the sides and foot;
   in E it reaches above the tile by --pop. */
.meet__pair { display: none; }
html[data-meet="wall"]:is([data-mh="pop"], [data-mh="cover"]) .meet__head {
  --pk: 1; --pop: 18px;
  background:
    radial-gradient(60% 40% at 50% 46%, rgba(92, 182, 255, .2), rgba(92, 182, 255, 0)),
    radial-gradient(130% 100% at 100% 0, #0D3546, rgba(13, 53, 70, 0) 62%), var(--ink-deep);
}
html[data-meet="wall"]:is([data-mh="pop"], [data-mh="cover"]) .meet__pair {
  position: absolute; z-index: -1; display: block; inset: var(--pt, 0) 0 0; overflow: hidden; pointer-events: none;
  border-radius: 0 0 var(--r-m) var(--r-m);
}
html[data-meet="wall"]:is([data-mh="pop"], [data-mh="cover"]) .meet__pair img {
  position: absolute; top: var(--it, 0); left: 50%; width: calc(var(--pk) * 100%); max-width: none; height: auto; translate: -50% -8.3%;
  /* the photograph ends at their thighs: let that edge go into the ink */
  -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0) 97%); mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0) 97%);
}
html[data-meet="wall"]:is([data-mh="pop"], [data-mh="cover"]) .meet__head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 27, 37, 0) 36%, rgba(0, 27, 37, .62) 58%, rgba(0, 27, 37, .95) 100%);
}
html[data-meet="wall"]:is([data-mh="pop"], [data-mh="cover"]) .meet__head .meet__title { text-shadow: 0 1px 14px rgba(0, 27, 37, .6); }
/* they rise a little into place, once, when the wall comes into view */
.js[data-mh] .meet__pair img { opacity: 0; transform: translateY(14px); }
html[data-mh] .meet__pair.is-in img { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out) 120ms, transform 900ms var(--ease-out) 120ms; }
@media (prefers-reduced-motion: reduce) { .js[data-mh] .meet__pair img { transform: none; } }

/* E step out: the box starts above the tile, the image's own top margin (8.3%, above Thalia's sunglasses) pulled up so
   the tops of their heads stand --pop above the edge */
html[data-meet="wall"][data-mh="pop"] .meet__head { --pt: calc(-1 * var(--pop) - 8px); --it: 8px; overflow: visible; justify-content: flex-end; }

/* F cover: the year as the masthead, behind them */
html[data-meet="wall"][data-mh="cover"] .meet__head { container-type: inline-size; --pk: .86; --it: calc(var(--mp) + 17cqi); }
html[data-meet="wall"][data-mh="cover"] .meet__pair { border-radius: inherit; }
html[data-meet="wall"][data-mh="cover"] .meet__head .meet__year {
  position: relative; z-index: -2; margin: -.06em 0 0 -.04em; font-size: 37cqi; font-weight: 600; line-height: .8; letter-spacing: -0.06em;
  color: #fff;
}

/* the season's tall tile: them larger, the ink lower, and further out of the frame */
@media (min-width: 1100px) {
  html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]):is([data-mh="pop"], [data-mh="cover"]) .meet__head { --pk: 1.15; --pop: 28px; }
  html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"])[data-mh="cover"] .meet__head { --pk: 1.12; }
  html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]):is([data-mh="pop"], [data-mh="cover"]) .meet__head::after {
    background: linear-gradient(180deg, rgba(0, 27, 37, 0) 56%, rgba(0, 27, 37, .6) 72%, rgba(0, 27, 37, .95) 100%);
  }
}
/* the wall under 1100px (1 Nov, "not looking good on mob"): the first tile had a single cell, too small for its cover (the
   two of them a sliver, the heading over their faces). On phones it now spans both columns, a square cover; from 600px it
   takes two columns and two rows. Either way it comes out about 350px wide, so the cover keeps its proportions. The seven
   then fill the grid, October closing on a wide tile instead of leaving a hole in the ruled panel */
@media (max-width: 1099.98px) {
  html[data-meet="wall"] .meet__item:last-child { grid-column: span 2; }
}
@media (max-width: 599.98px) {
  html[data-meet="wall"] .meet__head { grid-column: 1 / -1; min-height: 0; aspect-ratio: 1 / 1.04; }
  html[data-meet="wall"] .meet__item { min-height: 152px; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  html[data-meet="wall"] .meet__head { grid-column: 1 / span 2; grid-row: 1 / span 2; }
}
html[data-meet="wall"]:is([data-mh="map"], [data-mh="route"]) .meet__art {
  position: absolute; z-index: -1; top: 11%; right: 5%; display: block; width: 62%; aspect-ratio: 975 / 610; pointer-events: none;
}
/* the season's tile runs the wall's full height, so the map can take more of it */
@media (min-width: 1100px) { html[data-meet="wall"]:is([data-md="season"], [data-md="line"], [data-md="rack"]) .meet__art { top: 13%; right: 6%; width: 78%; } }
.meet__art::before {
  content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .075);
  -webkit-mask: url("../img/us-map.svg") center / 100% 100% no-repeat; mask: url("../img/us-map.svg") center / 100% 100% no-repeat;
}
.meet__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.meet__art path { fill: none; stroke: var(--blue-on-dark); stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .7; }
.meet__art i {
  position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--blue-on-dark); box-shadow: 0 0 0 3px rgba(0, 141, 249, .22), 0 0 12px rgba(92, 182, 255, .55);
}
html[data-mh="map"] .meet__art svg { display: none; }
.js[data-mh="route"] .meet__art path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js[data-mh="route"] .meet__art i { opacity: 0; transform: scale(.3); }
html[data-mh="route"] .meet__art.is-in path { stroke-dashoffset: 0; transition: stroke-dashoffset 2400ms cubic-bezier(.45, .05, .35, 1) 200ms; }
html[data-mh="route"] .meet__art.is-in i { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out) calc(var(--t) + 200ms), transform 500ms var(--ease-out) calc(var(--t) + 200ms); }
@media (prefers-reduced-motion: reduce) { html[data-mh="route"] .meet__art :is(path, i) { transition: none !important; } }
html[data-meet="wall"][data-mh="seal"] .meet__seal {
  position: absolute; z-index: -1; top: -30px; right: -30px; display: block; width: min(64%, 230px); aspect-ratio: 1; pointer-events: none;
  transform: rotate(-14deg); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
}
.meet__seal :is(.s-line, .s-rim) { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.meet__seal .s-rim { stroke: rgba(255, 255, 255, .13); stroke-width: 5; stroke-dasharray: 1.2 2.2; }
.meet__seal .s-words { fill: rgba(255, 255, 255, .38); font-size: 10px; font-weight: 600; letter-spacing: .5px; }
.meet__seal .s-mark { fill: rgba(255, 255, 255, .26); }
.meet__seal .s-dot { fill: var(--blue-on-dark); opacity: .85; }

/* B map, and C rows below 900px: the logo beside the name, the dates and city under it */
:is(html[data-meet="map"], html[data-meet="rows"]) .meet__list { margin-top: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--rule); }
:is(html[data-meet="map"], html[data-meet="rows"]) .meet__item {
  display: grid; grid-template-columns: 104px auto minmax(0, 1fr); grid-template-areas: "logo name name" "logo date city";
  column-gap: 14px; row-gap: 4px; padding-block: 16px; border-top: 1px solid var(--rule); --k: .62;
}
:is(html[data-meet="map"], html[data-meet="rows"]) .meet__logo { grid-area: logo; align-self: center; max-height: 40px; margin-right: 6px; object-fit: contain; object-position: left center; }
:is(html[data-meet="map"], html[data-meet="rows"]) .meet__name { grid-area: name; align-self: end; }
:is(html[data-meet="map"], html[data-meet="rows"]) .meet__name strong { font-size: 1rem; }
:is(html[data-meet="map"], html[data-meet="rows"]) .meet__item time { grid-area: date; align-self: start; font-size: .875rem; }
:is(html[data-meet="map"], html[data-meet="rows"]) .meet__city { grid-area: city; align-self: start; }
html[data-meet="map"] .meet__event { display: none; }
@media (max-width: 599.98px) { :is(html[data-meet="map"], html[data-meet="rows"]) .meet__item { grid-template-columns: 84px auto minmax(0, 1fr); --k: .54; } }

/* B map: the list on the left, the map on a ground panel beside it; below 1000px the map sits between heading and list */
html[data-meet="map"] .meet__map { display: grid; place-items: center; margin-top: 28px; padding: clamp(16px, 3vw, 40px); border-radius: var(--r-l); background: var(--ground); }
@media (min-width: 1000px) {
  html[data-meet="map"] .meet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(48px, 5vw, 80px); }
  html[data-meet="map"] .meet__map { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.meet__plot { position: relative; width: 100%; }
.meet__plot img { width: 100%; }
.meet__pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 7px; transform: translate(-6px, -50%); font-size: .8125rem; font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; }
.meet__pin::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 9px rgba(0, 141, 249, .16);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.meet__pin--below { flex-direction: column; gap: 10px; transform: translate(-50%, -6px); }
.meet__pin.is-lit::before { transform: scale(1.3); box-shadow: 0 0 0 3px var(--paper), 0 0 0 10px rgba(0, 141, 249, .28); }
@media (max-width: 599.98px) {
  .meet__pin > span { display: none; }
  .meet__pin { transform: translate(-5px, -50%); }
  .meet__pin--below { transform: translate(-50%, -5px); }
  .meet__pin::before { width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 6px rgba(0, 141, 249, .16); }
}
@media (prefers-reduced-motion: reduce) { .meet__pin::before { transition: none; } }

/* C rows: one row per conference from 900px: logo, name and event, city, dates */
@media (min-width: 900px) {
  html[data-meet="rows"] .meet__item { grid-template-columns: 196px minmax(0, 1fr) minmax(9rem, 12rem) 7rem; grid-template-areas: "logo name city date"; align-items: center; min-height: 96px; column-gap: clamp(24px, 3vw, 48px); padding-block: 20px; --k: .86; }
  /* one box height for every logo, so the rows keep one rhythm */
  html[data-meet="rows"] .meet__logo { height: 52px; max-height: none; margin-right: 0; }
  html[data-meet="rows"] :is(.meet__name, .meet__item time, .meet__city) { align-self: center; }
  html[data-meet="rows"] .meet__name strong { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
  html[data-meet="rows"] .meet__item time { text-align: right; font-size: .9375rem; }
}

/* ==========================================================================
   RECOGNITION
   ========================================================================== */
.recognition { padding-block: clamp(48px, 6vw, 72px); border-top: 1px solid var(--rule); }
.recognition__inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .recognition__inner { grid-template-columns: 180px minmax(0, 1fr); gap: 48px; } }
.recognition__title { font-size: .9375rem; font-weight: 500; color: var(--muted); }
/* the gaps narrow a little with the screen, so the five stay on one line where the title moves beside them (960px) */
.recognition__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px clamp(24px, 3vw, 40px); }
.recognition__list img { height: var(--h, 32px); width: auto; opacity: .82; }
/* on phones (1 Nov, "on mob make it marquee"): the five in one line that runs on its own, edge to edge with the ends
   faded, and a pause button beside the title. Without the script's copies (reduced motion, ?static, no script) the line
   scrolls sideways under a finger instead */
.recognition__pause, .recognition__list .is-dup { display: none; }
@media (max-width: 767.98px) {
  .recognition__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .recognition__rail {
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .recognition__rail::-webkit-scrollbar { display: none; }
  .recognition__list { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; }
  .recognition__list li { flex: none; padding-inline-end: 44px; }
  .recognition__list li:nth-child(5) { padding-inline-end: 0; }
  .recognition.is-marquee .recognition__rail {
    overflow: hidden; padding-inline: 0;
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .recognition.is-marquee .recognition__list .is-dup { display: block; }
  /* every logo carries its gap after it, so the two sets are equal and moving by half lands exactly on the start */
  .recognition.is-marquee .recognition__list li:nth-child(5) { padding-inline-end: 44px; }
  .recognition.is-marquee .recognition__list { animation: recog-run 32s linear infinite; }
  .recognition.is-marquee:is(.is-paused, .is-away) .recognition__list { animation-play-state: paused; }
  .recognition.is-marquee .recognition__pause {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--rule); transition: box-shadow 160ms var(--ease-out);
  }
  .recognition__pause svg { width: 13px; height: 13px; }
  .recognition__pause:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; }
}
@keyframes recog-run { to { transform: translateX(-50%); } }

/* ---------- about + podcast: B on air is final (31 Oct 2026); the first layout, A profile and C spread stay reachable with
   ?about= and the About row in ?review ---------- */
html[data-about]:not([data-about="current"]) [data-about-variant="current"],
html[data-about]:not([data-about="profile"]) [data-about-variant="profile"],
html[data-about]:not([data-about="air"]) [data-about-variant="air"],
html[data-about]:not([data-about="spread"]) [data-about-variant="spread"],
html:not([data-about]) [data-about-variant]:not([data-about-variant="air"]) { display: none; }
[data-podcast] { scroll-margin-top: calc(var(--masthead-h) + 24px); }
.chip--light { border-color: var(--rule); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .chip--light:hover { border-color: #AEB9C4; background: var(--ground); } }

/* A. profile: a directory listing. A firm rule opens it, hairlines part the entries */
.abp { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) {
  .abp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 7vw, 112px); }
  /* the photo stands the full height of the listing beside it */
  .abp .abp__photo { align-self: stretch; }
  .abp__photo img { height: 100%; min-height: 520px; aspect-ratio: auto; object-position: 50% 30%; }
}
.abp__body .lede { margin-top: 24px; max-width: 38rem; color: var(--ink); }
.profile { margin-top: 40px; border-top: 1px solid var(--ink); }
.profile > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.profile dt { padding-top: 3px; font-size: .875rem; color: var(--muted); }
.profile dd { font-size: 1.0625rem; line-height: 1.45; }
.profile dd > span { display: block; color: var(--muted); font-size: .9375rem; }
.profile dd > span + span { margin-top: 10px; }
.profile dd strong { display: block; font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
@media (min-width: 1200px) { .profile dd:has(> span) { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .profile dd > span + span { margin-top: 0; } }
@media (max-width: 520px) { .profile > div { grid-template-columns: 1fr; } }

.docket { margin-top: clamp(72px, 9vw, 128px); }
.docket__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px 24px; align-items: center; padding-bottom: 28px; }
.docket__cover { width: 100%; border-radius: var(--r-m); box-shadow: 0 1px 2px rgba(0, 27, 37, .08), 0 14px 28px -16px rgba(0, 27, 37, .4); }
.docket__title { font-family: var(--display); font-stretch: var(--display-wdth); font-size: 1.75rem; font-weight: var(--head-w); line-height: 1.1; letter-spacing: var(--head-track); }
.docket__about p { margin-top: 8px; max-width: 40rem; color: var(--muted); }
.docket__subs { grid-column: 1 / -1; margin-top: 0; }
@media (min-width: 900px) { .docket__head { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 32px; } .docket__subs { grid-column: auto; } }
.docket__list { border-top: 1px solid var(--ink); }
.docket__list a {
  display: grid; grid-template-columns: 56px 7rem minmax(0, 1fr) auto 18px; align-items: center; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.docket__list img { width: 56px; height: 56px; border-radius: 50%; }
.docket__n { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.docket__t { font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.docket__t strong { display: block; font-size: 1.125rem; font-weight: 500; color: var(--ink); transition: color 200ms var(--ease-out); }
.docket__len { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.docket__list svg { width: 18px; height: 18px; color: var(--blue-text); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .docket__list a:hover strong { color: var(--blue-text); } .docket__list a:hover svg { transform: translateX(3px); } }
@media (max-width: 719.98px) {
  .docket__list a { grid-template-columns: 48px minmax(0, 1fr) 18px; grid-template-areas: "img n go" "img t go"; gap: 2px 16px; }
  .docket__list img { grid-area: img; width: 48px; height: 48px; }
  .docket__n { grid-area: n; font-size: .8125rem; }
  .docket__t { grid-area: t; }
  .docket__len { display: none; }
  .docket__list svg { grid-area: go; }
}

/* B. on air: an editorial opening for the firm, then the show on a dark band, its guests first */
.aba { display: grid; gap: 40px; }
@media (min-width: 960px) { .aba { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: end; } }
.aba__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-l); }
.aba__side > p { max-width: 30rem; color: var(--muted); }
.aba__facts { grid-template-columns: 1fr; margin-top: 28px; }
.aba__ic, .aba__figs, .aba__step { display: none; }
/* on phones the whole photograph, head to toe (1 Nov, "on mob make the image height full") */
@media (max-width: 599.98px) { .aba__photo .aba__still { aspect-ratio: 900 / 1122; object-position: 50% 0; } }

/* the opening, A refined (1 Nov, "make this more visually appealing"): the same layout, a better finish.
   - The photo: a softer corner, a hairline edge and a deep, quiet shadow, so it sits on the page rather than being cut
     into it.
   - The paragraph's first sentence is the firm's promise, so it leads: the display face, larger, under a short blue rule.
   - The facts: a light panel that balances the photo, each fact with a line icon (drawn as the service icons are: a 1.6
     line in the ink, one accent in the blue) on a white tile, the labels in small capitals so the values lead */
/* the side column starts where the lede above it does (the same columns and gap as the heading row), and the two columns
   share a top line: the photo's edge level with the blue rule. Below 1280px the side runs taller than the photo, and
   aligned at the foot it left a gap over the photo */
@media (min-width: 960px) { html:is([data-aba="refined"], [data-aba="polished"], [data-aba="figures"]) .aba { column-gap: 48px; align-items: start; } }
html[data-aba="refined"] .aba__photo { position: relative; }
html[data-aba="refined"] .aba__photo img {
  border-radius: 24px; box-shadow: 0 1px 2px rgba(0, 27, 37, .08), 0 44px 80px -44px rgba(0, 27, 37, .55);
}
html[data-aba="refined"] .aba__photo::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 27, 37, .08);
}
html:is([data-aba="refined"], [data-aba="polished"], [data-aba="figures"]) .aba__lead {
  display: block; margin-bottom: 14px;
  font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem); font-weight: 500;
  line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}
html:is([data-aba="refined"], [data-aba="polished"], [data-aba="figures"]) .aba__lead::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 18px; border-radius: 2px; background: var(--blue); }
html[data-aba="refined"] .aba__facts {
  margin-top: 32px; padding: 4px 22px; border-radius: 20px;
  background: linear-gradient(180deg, #F8FAFC, #F1F4F8);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 1px 0 #fff;
}
html[data-aba="refined"] .aba__facts div { position: relative; padding: 16px 0 16px 60px; }
html[data-aba="refined"] .aba__facts div:first-child { border-top: 0; }
html[data-aba="refined"] .aba__ic {
  position: absolute; left: 0; top: 50%; display: block; width: 44px; height: 44px; padding: 10px; translate: 0 -50%;
  border-radius: 13px; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule), 0 6px 14px -8px rgba(0, 27, 37, .3);
}
html[data-aba="refined"] .aba__facts dt { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html[data-aba="refined"] .aba__facts dd { margin-top: 3px; font-size: 1rem; font-weight: 500; color: var(--ink); }

/* B polished (1 Nov, "make it more refined"): A, quieter and more exact. Nothing moves; only the finish changes.
   - One corner radius (the system's 20px) for the photo and the facts panel, so the two read as a pair.
   - The photo's shadow lighter and tighter: it lifts the photo rather than smudging the page under it.
   - The facts on white with a hairline edge and the faintest lift, not a grey box.
   - The icons on a pale blue tint, flat: no border, no shadow, so they stop reading as buttons.
   - The rules between facts start where the text does, as a list's do, not under the icons.
   - The paragraph's first sentence under a shorter rule; the rest of it a step smaller, so the lead carries the column */
html[data-aba="polished"] .aba__photo { position: relative; }
/* where the facts run longer than the photo (about 960-1279px), the photo keeps pace with them as the page scrolls,
   rather than leaving a gap under it; where the two are level it never moves */
@media (min-width: 960px) { html:is([data-aba="polished"], [data-aba="figures"]) .aba__photo { position: sticky; top: calc(var(--masthead-h) + 32px); } }
html[data-aba="polished"] .aba__photo img {
  border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(0, 27, 37, .06), 0 28px 56px -34px rgba(0, 27, 37, .4);
}
html[data-aba="polished"] .aba__photo::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-l); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 27, 37, .07);
}
html[data-aba="polished"] .aba__side > p { font-size: 1rem; line-height: 1.6; }
html[data-aba="polished"] .aba__lead { margin-bottom: 12px; }
html[data-aba="polished"] .aba__lead::before { width: 24px; margin-bottom: 20px; }
html[data-aba="polished"] .aba__facts {
  margin-top: 32px; padding: 6px 24px; border-radius: var(--r-l); background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 27, 37, .08), 0 1px 2px rgba(0, 27, 37, .04), 0 16px 32px -24px rgba(0, 27, 37, .2);
}
html[data-aba="polished"] .aba__facts div { position: relative; padding: 17px 0 17px 56px; border-top: 0; }
html[data-aba="polished"] .aba__facts div + div::before {
  content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--rule);
}
html[data-aba="polished"] .aba__ic {
  position: absolute; left: 0; top: 50%; display: block; width: 40px; height: 40px; padding: 10px; translate: 0 -50%;
  border-radius: var(--r-m); background: #EDF5FD; color: var(--ink);
}
html[data-aba="polished"] .aba__facts dt { font-size: .6875rem; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html[data-aba="polished"] .aba__facts dd {
  margin-top: 4px; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: pretty;
}

/* C figures (1 Nov, after "not looking good"): no panel, no icons. The four facts as an editorial figure grid, two by
   two between hairlines, each led by its figure in the display face (as the results ledger's are), the units in the
   logo's blue, a short muted note under each. The photo as B has it */
html[data-aba="figures"] .aba__photo { position: relative; }
@media (min-width: 960px) { html[data-aba="figures"] .aba__photo { position: sticky; } }
html[data-aba="figures"] .aba__photo img {
  border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(0, 27, 37, .06), 0 28px 56px -34px rgba(0, 27, 37, .4);
}
html[data-aba="figures"] .aba__photo::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-l); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 27, 37, .07);
}
html[data-aba="figures"] .aba__side > p { font-size: 1rem; line-height: 1.6; }
html[data-aba="figures"] .aba__lead { margin-bottom: 12px; }
html[data-aba="figures"] .aba__lead::before { width: 24px; margin-bottom: 20px; }
html[data-aba="figures"] .aba__facts { display: none; }
html[data-aba="figures"] .aba__figs {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
html[data-aba="figures"] .aba__figs li { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 22px 0; }
html[data-aba="figures"] .aba__figs li:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--rule); }
html[data-aba="figures"] .aba__figs li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
html[data-aba="figures"] .aba__fig {
  font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(2.25rem, 1.8rem + 1vw, 2.75rem); font-weight: var(--fig-w);
  line-height: 1; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums;
}
html[data-aba="figures"] .aba__fig small { font-size: .55em; font-weight: 500; letter-spacing: -0.01em; color: var(--blue); }
html[data-aba="figures"] .aba__fig small:first-child { margin-right: .18em; }
html[data-aba="figures"] .aba__fig small:last-child { margin-left: .06em; }
/* the two columns share a top line and a foot: the side runs the photo's height with its figures at the bottom (where
   the side is the taller, from about 960 to 1279px, the photo keeps pace with it instead) */
@media (min-width: 960px) {
  html[data-aba="figures"] .aba__side { align-self: stretch; display: flex; flex-direction: column; row-gap: 36px; }
  html[data-aba="figures"] .aba__figs { margin-top: auto; }
}
html[data-aba="figures"] .aba__note { max-width: 17em; font-size: .875rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

@media (max-width: 479.98px) {
  html[data-aba="polished"] .aba__facts { padding-inline: 18px; }
  html[data-aba="polished"] .aba__facts div { padding-left: 52px; }
  html[data-aba="polished"] .aba__facts div + div::before { left: 52px; }
}
/* the photo, D step out and E blueprint (1 Nov, "can we use this image creatively"): the same 3:2 footprint, so nothing
   around it moves. The frame now starts a quarter of the way down and holds the office; the four, cut out, lie over it
   exactly (the same slice of the same photograph), so inside the frame they are one picture, and above it their heads
   rise onto the page: the man's to his eyes, the next to her brow, the third just her crown. The cut-out's foot is
   rounded as the frame's is, so it never shows past the frame's corners. E: the office in the brand's blue, ink to
   pale, the four in full colour against it */
html:is([data-abp="step"], [data-abp="blue"]) .aba__photo .aba__still { display: none; }
html:is([data-abp="step"], [data-abp="blue"]) .aba__photo .aba__step { position: relative; display: block; aspect-ratio: 3 / 2; }
html:is([data-abp="step"], [data-abp="blue"])[data-abp] .aba__photo::after { display: none; }
html:is([data-abp="step"], [data-abp="blue"]) .aba__frame {
  position: absolute; inset: auto 0 0; height: 74.06%; overflow: hidden; border-radius: var(--r-l);
  background: #DCE3E8; box-shadow: 0 1px 2px rgba(0, 27, 37, .06), 0 28px 56px -34px rgba(0, 27, 37, .4);
}
html:is([data-abp="step"], [data-abp="blue"]) .aba__photo .aba__step img {
  display: block; width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover;
}
html:is([data-abp="step"], [data-abp="blue"]) .aba__photo .aba__step .aba__cut {
  position: absolute; inset: 0; clip-path: inset(0 round 0 0 var(--r-l) var(--r-l));
}
html[data-abp="step"] .aba__photo .aba__step .aba__room--blue,
html[data-abp="blue"] .aba__photo .aba__step .aba__room:not(.aba__room--blue) { display: none; }

.air { display: grid; gap: 40px; margin-top: clamp(72px, 9vw, 128px); padding: clamp(24px, 4vw, 56px); border-radius: 24px; background: var(--ink-deep); color: #fff; }
@media (min-width: 1040px) { .air { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 80px); align-items: center; } }
.air__art { position: relative; display: block; }
.air__cover { width: 100%; border-radius: var(--r-l); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
@media (max-width: 1039.98px) { .air__cover { max-width: 360px; } }
.air__kicker, .air__app small { display: none; }
.air__title { font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: var(--display-w); line-height: 1; letter-spacing: var(--display-track); }
.air__host { margin-top: 14px; color: var(--blue-on-dark); font-weight: 500; }
.air__desc { margin-top: 12px; max-width: 34rem; color: var(--muted-dark); }
.air__list { margin-top: 32px; border-top: 1px solid var(--rule-dark); }
.air__list a {
  display: grid; grid-template-columns: 52px minmax(0, 12rem) minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--rule-dark); color: #fff; text-decoration: none;
}
.air__list img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.air__who { font-size: .875rem; line-height: 1.35; color: var(--muted-dark); }
.air__who strong { display: block; font-size: 1.0625rem; font-weight: 600; color: #fff; }
.air__ep { font-size: .9375rem; line-height: 1.4; color: rgba(255, 255, 255, .82); transition: color 200ms var(--ease-out); }
.air__ep span { display: block; font-size: .8125rem; font-weight: 600; color: var(--blue-on-dark); }
.air__len { font-size: .875rem; color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.air .podcast__subs { margin-top: 28px; }
@media (hover: hover) and (pointer: fine) { .air__list a:hover .air__ep { color: #fff; } }
@media (max-width: 719.98px) {
  .air__list a { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "img who len" "img ep len"; gap: 6px 16px; }
  .air__list img { grid-area: img; width: 48px; height: 48px; align-self: start; }
  .air__who { grid-area: who; } .air__ep { grid-area: ep; } .air__len { grid-area: len; align-self: start; }
}

/* ---------- the podcast panel, A refined (1 Nov, "make this more visually appealing, no layout change"): the layout as it
   was, a better finish.
   - The cover lights the panel: a glow in the cover's own blue behind it, and the cover's rings carried out into the
     panel, fading as they go, like a broadcast. The cover sits on a blue shadow with a hairline edge and a soft sheen.
   - "Podcast" is named over the title (nowhere else in the panel says what the show is but the app names).
   - Each episode is a row that lights on hover; its number is set small in capitals, and its length is a play pill that
     fills blue as the row is pointed at.
   - The two apps are "Listen on" badges, each icon in its app's colour ---------- */
html[data-air="refined"] .air {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(42% 80% at 21% 50%, rgba(23, 70, 140, .52), rgba(23, 70, 140, 0) 72%),
    linear-gradient(180deg, #02212D, var(--ink-deep) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -48px rgba(0, 27, 37, .55);
}
@media (max-width: 1039.98px) {
  html[data-air="refined"] .air { background: radial-gradient(80% 50% at 30% 22%, rgba(23, 70, 140, .42), rgba(23, 70, 140, 0) 72%), linear-gradient(180deg, #02212D, var(--ink-deep) 60%); }
}
/* the rings: centred on the cover, every 46px, fading out by about two covers' width */
html[data-air="refined"] .air__art::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(120, 170, 255, .12) 0 1px, rgba(120, 170, 255, 0) 1.5px 46px);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .5) 34%, rgba(0, 0, 0, 0) 58%);
  mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .5) 34%, rgba(0, 0, 0, 0) 58%);
}
html[data-air="refined"] .air__art { max-width: 100%; }
@media (max-width: 1039.98px) { html[data-air="refined"] .air__art { width: fit-content; } }
html[data-air="refined"] .air__cover {
  display: block; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .35), 0 44px 70px -34px rgba(4, 14, 40, .95), 0 24px 90px -24px rgba(23, 70, 140, .7);
}
/* a soft sheen across the top left of the cover, as on a printed sleeve */
html[data-air="refined"] .air__art::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%);
  mix-blend-mode: soft-light;
}
/* the title block */
html[data-air="refined"] .air__kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-on-dark);
}
html[data-air="refined"] .air__kicker svg { width: 16px; height: 16px; }
html[data-air="refined"] .air__host { margin-top: 16px; }
/* the episodes: rows that light on hover, the rules between them */
html[data-air="refined"] .air__list { border-top: 0; }
html[data-air="refined"] .air__list li { position: relative; }
html[data-air="refined"] .air__list li::before, html[data-air="refined"] .air__list li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, .02));
}
html[data-air="refined"] .air__list li:last-child::after { top: auto; bottom: 0; }
html[data-air="refined"] .air__list a {
  margin-inline: -14px; padding: 16px 14px; border-bottom: 0; border-radius: 16px;
  transition: background-color 220ms var(--ease-out);
}
html[data-air="refined"] .air__list img {
  box-shadow: 0 0 0 2px var(--ink-deep), 0 0 0 3.5px rgba(92, 182, 255, .3), 0 8px 18px -8px rgba(0, 0, 0, .7);
  transition: box-shadow 220ms var(--ease-out);
}
html[data-air="refined"] .air__ep span { margin-bottom: 3px; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 1280px) { html[data-air="refined"] .air__list a { column-gap: 16px; } }
/* the length as a play pill, from 1280px (narrower, it would push the titles onto more lines than the panel as it was,
   and the rows only light under a pointer anyway) */
@media (min-width: 1280px) {
html[data-air="refined"] .air__len {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 11px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: #fff; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
html[data-air="refined"] .air__len::before {
  content: ""; flex: none; width: 9px; height: 10px; margin-left: 1px; background: var(--blue-on-dark);
  clip-path: polygon(0 0, 100% 50%, 0 100%); transition: background-color 220ms var(--ease-out);
}
}
@media (hover: hover) and (pointer: fine) {
  html[data-air="refined"] .air__list a:hover { background-color: rgba(255, 255, 255, .045); }
  html[data-air="refined"] .air__list a:hover img { box-shadow: 0 0 0 2px var(--ink-deep), 0 0 0 3.5px var(--blue-on-dark), 0 8px 18px -8px rgba(0, 0, 0, .7); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  html[data-air="refined"] .air__list a:hover .air__len {
    border-color: #00519F; background-color: #0A74DD;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(0, 112, 224, .7);
  }
  html[data-air="refined"] .air__list a:hover .air__len::before { background: #fff; }
}
/* the apps as "Listen on" badges */
html[data-air="refined"] .air .podcast__subs { gap: 12px; margin-top: 28px; }
html[data-air="refined"] .air__app {
  gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px; border-radius: 14px;
  color: #fff; border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -12px rgba(0, 0, 0, .7);
}
html[data-air="refined"] .air__app svg { width: 26px; height: 26px; }
html[data-air="refined"] .air__app--apple svg { color: #C36BF5; }
html[data-air="refined"] .air__app--spotify svg { color: #1ED760; }
html[data-air="refined"] .air__app span { display: flex; flex-direction: column; font-size: 1rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; }
html[data-air="refined"] .air__app small { display: block; font-size: .6875rem; font-weight: 500; letter-spacing: .02em; color: var(--muted-dark); }
@media (max-width: 479.98px) {
  html[data-air="refined"] .air .podcast__subs { gap: 8px; }
  html[data-air="refined"] .air__app { gap: 8px; min-height: 48px; padding: 6px 12px 6px 10px; border-radius: 12px; }
  html[data-air="refined"] .air__app svg { width: 22px; height: 22px; }
  html[data-air="refined"] .air__app span { font-size: .9375rem; }
}
@media (hover: hover) and (pointer: fine) {
  html[data-air="refined"] .air__app:hover { border-color: rgba(255, 255, 255, .32); background-color: rgba(255, 255, 255, .05); }
}

/* C. spread: two panels of one size, two materials, each opening on a strip of faces */
.spread { display: grid; gap: 20px; }
@media (min-width: 960px) {
  .spread { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .spread__panel { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
}
.spread__panel { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; }
.spread__firm { background: var(--ground); }
.spread__show { background: var(--ink-deep); color: #fff; }
.spread__media { position: relative; min-height: 220px; }
.spread__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.spread__media--guests { display: grid; align-items: center; padding: 28px clamp(20px, 3vw, 40px) 8px; background: radial-gradient(120% 100% at 85% 0%, rgba(0, 141, 249, .26), transparent 60%); }
.spread__guests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.spread__guests a { display: grid; justify-items: center; text-align: center; color: #fff; text-decoration: none; font-size: .8125rem; line-height: 1.35; }
.spread__guests img { position: static; width: 88px; height: 88px; margin-bottom: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 28px -14px rgba(0, 0, 0, .7); transition: transform 260ms var(--ease-out); }
.spread__guests strong { font-size: 1rem; font-weight: 600; }
.spread__guests span { color: var(--muted-dark); }
.spread__guests .spread__ep { margin-top: 6px; color: var(--blue-on-dark); text-wrap: balance; }
@media (hover: hover) and (pointer: fine) { .spread__guests a:hover img { transform: translateY(-3px); } }
.spread__body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.spread__title { font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); font-weight: var(--head-w); line-height: 1.12; letter-spacing: var(--head-track); text-wrap: balance; }
.spread__body > p { margin-top: 16px; color: var(--muted); }
.spread__show .spread__body > p { color: var(--muted-dark); }
.spread__firm .facts { margin-top: 28px; }
.spread__show .podcast__subs { margin-top: auto; padding-top: 28px; }
@media (max-width: 520px) { .spread__guests img { width: 64px; height: 64px; } .spread__guests .spread__ep { display: none; } }

/* ==========================================================================
   CONTACT (31 Oct, in place of the closing call to action). Four layouts while we choose (?contact=, the switcher under
   the section; the HTML says what each one does). Shared here: the phone and the office text; each layout sets its
   ground, its arrangement, how the number reads (a button or set as type) and which drawing shows
   ========================================================================== */
.contact__grid { display: grid; gap: clamp(48px, 6vw, 64px); }
.contact__label { font-size: .9375rem; color: var(--muted); }
.contact__phone { font-variant-numeric: tabular-nums; }
.contact__phone svg { width: 20px; height: 20px; }
.contact__vanity { margin-top: 4px; font-size: .9375rem; font-weight: 500; color: var(--muted); }

.offices { display: grid; gap: 16px; }
@media (min-width: 600px) { .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } }
.office { display: flex; flex-direction: column; }
.office__map { position: relative; overflow: hidden; }
.office__img { width: 100%; height: 100%; object-fit: cover; }
.office__body { display: flex; flex: 1; flex-direction: column; }
.office__city { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.office__time { margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.office address { margin-top: 8px; font-style: normal; line-height: 1.5; color: var(--muted); }
.office__link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--blue-text); text-underline-offset: 3px; }
.office__link svg { width: 14px; height: 14px; }
/* street names sit on their streets, haloed in the street's colour like a printed map */
.office__street {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(var(--a));
  font-size: .6875rem; font-weight: 500; color: var(--muted); white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 4px #fff;
}
.office__pin {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 12px rgba(0, 141, 249, .18), 0 4px 10px rgba(0, 27, 37, .25);
}
.contact__credit { margin-top: 14px; font-size: .75rem; color: var(--muted); }
.contact__credit a { color: inherit; text-underline-offset: 2px; }
.contact__route, .office__img--night, .office__img--split, .office__img--refined, .office__street--night, .office__street--refined, .office__marker { display: none; }
.office__time small { font-size: inherit; }

/* Current and C call: the number set as type under its label (the link is a blue button in A and B, so it sheds that here),
   and a white card per office, its light map inset by the card's padding so the corners nest; the office cards beside the
   intro from 1040px */
html:is([data-contact="current"], [data-contact="call"], [data-contact="glass"]) .contact__call { margin-top: clamp(32px, 4vw, 48px); }
html:is([data-contact="current"], [data-contact="call"], [data-contact="glass"]) .contact__phone {
  display: inline-block; min-height: 0; margin-top: 6px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; text-shadow: none; transform: none;
  font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem); font-weight: var(--display-w); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink); transition: color 150ms var(--ease-out);
}
html:is([data-contact="current"], [data-contact="call"], [data-contact="glass"]) .contact__phone svg { display: none; }
@media (hover: hover) and (pointer: fine) { html[data-contact="current"] .contact__phone:hover { color: var(--blue-text); } }
@media (min-width: 1040px) { html:is([data-contact="current"], [data-contact="call"]) .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 7vw, 120px); align-items: start; } }
html:is([data-contact="current"], [data-contact="call"]) .office { padding: 8px 8px 24px; border-radius: var(--r-l); background: var(--paper); }
html:is([data-contact="current"], [data-contact="call"]) .office__map { aspect-ratio: 4 / 3; border-radius: calc(var(--r-l) - 8px); background: #E6EBF0; }
html:is([data-contact="current"], [data-contact="call"]) .office__body { padding: 20px 16px 0; }
html[data-contact="current"] .contact { background: var(--ground); }
html[data-contact="current"] .office__time { display: none; }

/* A coast to coast and B night: the heading and the call as one bar above the drawing, the number a button with the phone
   glyph (it says "call" on its own, so the label and the vanity line step back); the button drops under the heading when
   the two won't fit side by side */
html:is([data-contact="coast"], [data-contact="night"], [data-contact="flight"], [data-contact="split"], [data-contact="refined"]) .contact__intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
html:is([data-contact="coast"], [data-contact="night"], [data-contact="flight"], [data-contact="split"], [data-contact="refined"]) :is(.contact__label, .contact__vanity) { display: none; }
html:is([data-contact="coast"], [data-contact="night"], [data-contact="flight"], [data-contact="split"], [data-contact="refined"]) .contact__phone { min-height: 56px; padding: 14px 28px 14px 24px; font-size: 1.125rem; letter-spacing: .01em; }

/* A coast to coast: the lower 48 on a white panel, an arc drawn once from San Diego to New York, each office under its end */
html[data-contact="coast"] .contact { background: var(--ground); }
html[data-contact="coast"] .contact__offices { padding: clamp(20px, 3.2vw, 48px); border-radius: 24px; background: var(--paper); }
html:is([data-contact="coast"], [data-contact="flight"]) .contact__route { position: relative; display: block; }
.contact__route img { width: 100%; }
.contact__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.contact__arc path { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 599.98px) { .contact__arc path { stroke-width: 5; } }
/* the arc waits, undrawn, until the panel comes into view; the transition sits on the drawn state only */
html.js .contact__route .contact__arc path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .contact__route.is-drawn .contact__arc path { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-in-out) 150ms; }
.contact__end { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -8px); font-size: .875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.contact__end::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--paper), 0 0 0 12px rgba(0, 141, 249, .16); }
@media (max-width: 599.98px) { .contact__end > span { display: none; } .contact__end { transform: translate(-50%, -6px); } .contact__end::before { width: 12px; height: 12px; } }
html:is([data-contact="coast"], [data-contact="flight"]) .offices { margin-top: clamp(20px, 3vw, 36px); padding-top: clamp(20px, 2.6vw, 32px); border-top: 1px solid var(--rule); }
html:is([data-contact="coast"], [data-contact="flight"]) .office__map, html:is([data-contact="coast"], [data-contact="flight"]) .contact__credit { display: none; }
/* New York sits at the right-hand end of the arc, so its office reads from the right */
@media (min-width: 600px) {
  html:is([data-contact="coast"], [data-contact="flight"]) .office:last-child { text-align: right; }
  html:is([data-contact="coast"], [data-contact="flight"]) .office:last-child .office__link { align-self: flex-end; }
}
/* from 1100px each office stands beside its end of the map: San Diego low on the left, New York high on the right */
@media (min-width: 1100px) {
  html:is([data-contact="coast"], [data-contact="flight"]) .contact__offices { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 3fr) minmax(15rem, 1fr); column-gap: clamp(24px, 3vw, 40px); }
  html:is([data-contact="coast"], [data-contact="flight"]) .offices { display: contents; }
  html:is([data-contact="coast"], [data-contact="flight"]) .contact__route { grid-column: 2; grid-row: 1; }
  html:is([data-contact="coast"], [data-contact="flight"]) .office:first-child { grid-column: 1; grid-row: 1; align-self: end; }
  html:is([data-contact="coast"], [data-contact="flight"]) .office:last-child { grid-column: 3; grid-row: 1; align-self: start; }
}

/* B night: the dark ground, the two street maps side by side at night with each address over the foot of its map */
html[data-contact="night"] .contact { background: var(--ink-deep); color: #fff; }
html[data-contact="night"] .contact .h2 { color: #fff; }
html[data-contact="night"] .offices { gap: 12px; }
html[data-contact="night"] .office { overflow: hidden; border-radius: var(--r-l); background: #062633; }
html[data-contact="night"] .office__map { aspect-ratio: 4 / 3; }
html[data-contact="night"] .office__img { display: none; }
html[data-contact="night"] .office__img--night { display: block; }
html[data-contact="night"] .office__street { display: none; }
html[data-contact="night"] .office__street--night { display: block; color: var(--muted-dark); text-shadow: 0 0 3px #062633, 0 0 3px #062633, 0 0 6px #062633; }
html[data-contact="night"] .office__pin { top: 38%; box-shadow: 0 0 0 3px #062633, 0 0 0 14px rgba(0, 141, 249, .22), 0 0 40px 12px rgba(0, 141, 249, .32); }
html[data-contact="night"] .office__body { padding: 4px 20px 24px; }
html[data-contact="night"] .office__city, html[data-contact="night"] .office__link { color: #fff; }
html[data-contact="night"] .office__time { color: var(--blue-on-dark); }
html[data-contact="night"] .office address { color: var(--muted-dark); }
/* the address goes over the foot of the map once the cards are wide enough to keep it clear of the pin */
@media (min-width: 1100px) {
  html[data-contact="night"] .office { position: relative; }
  html[data-contact="night"] .office__body {
    position: absolute; inset: auto 0 0; padding: 64px clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 28px);
    background: linear-gradient(to top, #001B25 30%, rgba(0, 27, 37, .82) 62%, rgba(0, 27, 37, 0));
  }
}
html[data-contact="night"] .contact .svc-switch { box-shadow: 0 0 0 1px var(--rule-dark), 0 14px 30px -12px rgba(0, 0, 0, .6); }

/* C call: the brand blue, the number set as large as a headline, ink-deep type (5.2:1 on the blue) */
html[data-contact="call"] .contact { background: var(--blue); color: var(--ink-deep); }
html[data-contact="call"] .contact .h2, html[data-contact="call"] :is(.contact__label, .contact__vanity, .contact__credit) { color: var(--ink-deep); }
/* as large as the column allows on one line: twelve characters at about 7em */
html[data-contact="call"] .contact__phone { font-size: clamp(2.5rem, 1rem + 3.4vw, 4.125rem); letter-spacing: -0.045em; white-space: nowrap; color: var(--ink-deep); }
@media (hover: hover) and (pointer: fine) { html[data-contact="call"] .contact__phone:hover { color: #fff; } }

/* ---------- the street maps' credit (1 Nov, "remove openstreet map line"): small in a corner of the maps rather than a line
   under them. The maps are OpenStreetMap data, whose licence (ODbL) asks for the credit to show, as Google's and Mapbox's
   maps keep theirs in a corner ---------- */
html:is([data-contact="night"], [data-contact="split"], [data-contact="glass"], [data-contact="refined"]) .contact__credit {
  position: absolute; z-index: 2; margin: 0; padding: 3px 7px; border-radius: 6px;
  font-size: .625rem; line-height: 1.3; letter-spacing: .01em; color: rgba(255, 255, 255, .6); background: rgba(0, 27, 37, .6);
}
html:is([data-contact="night"], [data-contact="split"], [data-contact="refined"]) .contact__offices { position: relative; }
html:is([data-contact="night"], [data-contact="split"]) .contact__credit { top: 10px; right: 10px; }

/* ---------- the dark layouts share a ground and the office type ---------- */
html:is([data-contact="split"], [data-contact="flight"], [data-contact="glass"]) .contact { background: var(--ink-deep); color: #fff; }
html:is([data-contact="split"], [data-contact="flight"], [data-contact="glass"]) .contact .h2 { color: #fff; }
html:is([data-contact="split"], [data-contact="flight"], [data-contact="glass"]) :is(.office__city, .office__link) { color: #fff; }
html:is([data-contact="split"], [data-contact="flight"], [data-contact="glass"]) .office__time { color: var(--blue-on-dark); }
html:is([data-contact="split"], [data-contact="flight"], [data-contact="glass"]) :is(.office address, .contact__label, .contact__vanity) { color: var(--muted-dark); }
html:is([data-contact="split"], [data-contact="flight"], [data-contact="glass"]) .contact .svc-switch { box-shadow: 0 0 0 1px var(--rule-dark), 0 14px 30px -12px rgba(0, 0, 0, .6); }
@media (hover: hover) and (pointer: fine) {
  html:is([data-contact="split"], [data-contact="flight"], [data-contact="glass"]) .office__link:hover { color: var(--blue-on-dark); }
}

/* ---------- D split: the section split down the middle, each half a city's streets at night, edge to edge; the pins
   turned toward the seam; the heading and the call centred over the seam; each office's local time set huge at the foot
   of its half, San Diego from the left edge and New York from the right. Under 900px, the halves stack as cards ---------- */
html[data-contact="split"] .office__time { display: flex; flex-direction: column; margin-top: 4px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
html[data-contact="split"] .office__time span {
  order: -1; font-family: var(--display); font-size: clamp(2.75rem, 1.4rem + 3.6vw, 5.25rem); font-weight: 300; line-height: 1;
  letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums;
}
html[data-contact="split"] .office__time small { margin-left: .14em; font-size: .36em; font-weight: 500; letter-spacing: .04em; color: var(--muted-dark); }
html[data-contact="split"] .office__city { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-on-dark); }
html[data-contact="split"] .office__time { color: var(--muted-dark); }
html[data-contact="split"] .office__time span { margin-block: 10px 6px; }
@media (max-width: 899.98px) {
  html[data-contact="split"] .offices { gap: 12px; }
  html[data-contact="split"] .office { overflow: hidden; border-radius: var(--r-l); background: #03202B; }
  html[data-contact="split"] .office__map { aspect-ratio: 4 / 3; }
  html[data-contact="split"] :is(.office__img, .office__street) { display: none; }
  html[data-contact="split"] .office__img--split { display: block; object-position: 62% 42%; }
  html[data-contact="split"] .office:last-child .office__img--split { object-position: 38% 42%; }
  html[data-contact="split"] .office__pin { left: 62%; top: 42%; box-shadow: 0 0 0 3px #03202B, 0 0 0 14px rgba(0, 141, 249, .22), 0 0 40px 12px rgba(0, 141, 249, .32); }
  html[data-contact="split"] .office:last-child .office__pin { left: 38%; }
  html[data-contact="split"] .office__body { padding: 8px 20px 24px; }
}
@media (min-width: 900px) {
  html[data-contact="split"] .contact { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 6vw, 96px) clamp(48px, 4.4vw, 72px); }
  /* the two cities: each pseudo a half, its map covering it with the office's point held where the pin is drawn */
  html[data-contact="split"] .contact::before, html[data-contact="split"] .contact::after {
    content: ""; position: absolute; top: 0; bottom: 0; z-index: -2; width: 50%; pointer-events: none;
  }
  html[data-contact="split"] .contact::before {
    left: 0;
    background:
      radial-gradient(circle at 62% 42%, var(--blue) 0 6.5px, #03202B 7px 9.5px, rgba(0, 141, 249, .34) 10px, rgba(0, 141, 249, .1) 26px, rgba(0, 141, 249, 0) 70px),
      url("../img/office-sd-split.svg") 62% 42% / cover no-repeat;
  }
  html[data-contact="split"] .contact::after {
    right: 0;
    background:
      radial-gradient(circle at 38% 42%, var(--blue) 0 6.5px, #03202B 7px 9.5px, rgba(0, 141, 249, .34) 10px, rgba(0, 141, 249, .1) 26px, rgba(0, 141, 249, 0) 70px),
      url("../img/office-ny-split.svg") 38% 42% / cover no-repeat;
  }
  /* ink over the top for the heading, over the foot for the offices and at the outer edges; the seam a hairline */
  html[data-contact="split"] .contact__grid::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) 50% 100% / 1px 64% no-repeat,
      linear-gradient(180deg, rgba(0, 27, 37, .94) 0, rgba(0, 27, 37, .55) 18%, rgba(0, 27, 37, 0) 34%, rgba(0, 27, 37, 0) 50%, rgba(0, 27, 37, .7) 70%, rgba(0, 27, 37, .96) 100%),
      linear-gradient(90deg, rgba(0, 27, 37, .6), rgba(0, 27, 37, 0) 18%, rgba(0, 27, 37, 0) 82%, rgba(0, 27, 37, .6));
  }
  html[data-contact="split"] .contact__grid { min-height: clamp(520px, 44vw, 640px); grid-template-rows: auto 1fr; gap: 0; }
  html[data-contact="split"] .contact__intro { flex-direction: column; justify-content: flex-start; text-align: center; gap: 24px; }
  html[data-contact="split"] .contact__offices { align-self: end; }
  html[data-contact="split"] :is(.office__map, .contact__credit) { display: none; }
  html[data-contact="split"] .offices { gap: 48px; }
  html[data-contact="split"] .office:last-child { text-align: right; }
  html[data-contact="split"] .office:last-child :is(.office__time, .office__link) { align-items: flex-end; align-self: flex-end; }
  /* the credit on the maps, at the section's corner */
  html[data-contact="split"] .contact__credit { display: block; top: auto; right: 12px; bottom: 10px; }
  html[data-contact="split"] .contact__offices { position: static; }
  html[data-contact="split"] .contact .svc-switch { margin-top: 40px; }
}

/* ---------- E night flight: A coast to coast at night. The lower 48 as a field of dots (the outline masks a dot pattern),
   the arc from San Diego to New York drawn once in light, the ends glowing, each office beside its end from 1100px ---------- */
html[data-contact="flight"] .contact__offices {
  padding: clamp(20px, 3.2vw, 48px); border-radius: 24px;
  background: radial-gradient(120% 90% at 50% 0, #0A3141, rgba(10, 49, 65, 0) 70%), #04222E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(255, 255, 255, .05);
}
html[data-contact="flight"] .contact__route { aspect-ratio: 951 / 602; }
html[data-contact="flight"] .contact__route img { opacity: 0; }
html[data-contact="flight"] .contact__route::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(159, 180, 189, .5) 0 1.15px, rgba(159, 180, 189, 0) 1.7px) 50% 50% / 8px 8px;
  -webkit-mask: url("../img/us-lower48.svg") 0 0 / 100% 100% no-repeat; mask: url("../img/us-lower48.svg") 0 0 / 100% 100% no-repeat;
}
@media (max-width: 599.98px) { html[data-contact="flight"] .contact__route::before { background-size: 6px 6px; } }
html[data-contact="flight"] .contact__arc { filter: drop-shadow(0 0 5px rgba(0, 141, 249, .95)) drop-shadow(0 0 14px rgba(0, 141, 249, .5)); }
html[data-contact="flight"] .contact__arc path { stroke: #7CC4FF; stroke-width: 2.2; }
@media (max-width: 599.98px) { html[data-contact="flight"] .contact__arc path { stroke-width: 4; } }
html[data-contact="flight"] .contact__end { color: #fff; }
html[data-contact="flight"] .contact__end::before { box-shadow: 0 0 0 3px #04222E, 0 0 0 12px rgba(0, 141, 249, .22), 0 0 30px 8px rgba(0, 141, 249, .45); }
html[data-contact="flight"] .offices { border-top-color: rgba(255, 255, 255, .1); }
html[data-contact="flight"] .office__time { font-size: 1rem; }

/* ---------- F glass: both cities' streets behind a frosted glass panel (the two maps share the ground, side by side; one
   above the other on phones), their pins glowing through it. On the glass: the heading, the number as large as a
   headline, and the two offices ---------- */
html[data-contact="glass"] .contact { position: relative; isolation: isolate; overflow: hidden; }
html[data-contact="glass"] .contact::before, html[data-contact="glass"] .contact::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; height: 50%; pointer-events: none;
}
html[data-contact="glass"] .contact::before {
  top: 0;
  background:
    linear-gradient(180deg, rgba(0, 27, 37, .55), rgba(0, 27, 37, 0) 40%),
    radial-gradient(circle at 62% 42%, var(--blue) 0 7px, rgba(0, 141, 249, .45) 9px, rgba(0, 141, 249, .14) 40px, rgba(0, 141, 249, 0) 110px),
    url("../img/office-sd-split.svg") 62% 42% / cover no-repeat;
}
html[data-contact="glass"] .contact::after {
  bottom: 0;
  background:
    linear-gradient(0deg, rgba(0, 27, 37, .55), rgba(0, 27, 37, 0) 40%),
    radial-gradient(circle at 38% 42%, var(--blue) 0 7px, rgba(0, 141, 249, .45) 9px, rgba(0, 141, 249, .14) 40px, rgba(0, 141, 249, 0) 110px),
    url("../img/office-ny-split.svg") 38% 42% / cover no-repeat;
}
@media (min-width: 900px) {
  html[data-contact="glass"] .contact::before, html[data-contact="glass"] .contact::after { top: 0; bottom: 0; height: auto; width: 50%; }
  html[data-contact="glass"] .contact::before {
    right: auto;
    background:
      linear-gradient(90deg, rgba(0, 27, 37, .6), rgba(0, 27, 37, 0) 35%),
      radial-gradient(circle at 62% 42%, var(--blue) 0 7px, rgba(0, 141, 249, .45) 9px, rgba(0, 141, 249, .14) 40px, rgba(0, 141, 249, 0) 110px),
      url("../img/office-sd-split.svg") 62% 42% / cover no-repeat;
  }
  html[data-contact="glass"] .contact::after {
    left: auto;
    background:
      linear-gradient(270deg, rgba(0, 27, 37, .6), rgba(0, 27, 37, 0) 35%),
      radial-gradient(circle at 38% 42%, var(--blue) 0 7px, rgba(0, 141, 249, .45) 9px, rgba(0, 141, 249, .14) 40px, rgba(0, 141, 249, 0) 110px),
      url("../img/office-ny-split.svg") 38% 42% / cover no-repeat;
  }
}
html[data-contact="glass"] .contact__grid {
  position: relative; max-width: min(1040px, calc(100% - var(--gutter) * 2)); padding: clamp(28px, 4.4vw, 64px); gap: clamp(32px, 4vw, 48px);
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, .07));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .24), 0 60px 120px -50px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
}
html[data-contact="glass"] .contact__call { margin-top: clamp(20px, 2.4vw, 32px); }
html[data-contact="glass"] .contact__phone { font-size: clamp(2.25rem, 1rem + 4.6vw, 5.25rem); letter-spacing: -0.045em; white-space: nowrap; color: #fff; }
@media (hover: hover) and (pointer: fine) { html[data-contact="glass"] .contact__phone:hover { color: var(--blue-on-dark); } }
html[data-contact="glass"] .office__map { display: none; }
html[data-contact="glass"] .offices { padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(255, 255, 255, .14); }
html[data-contact="glass"] .contact__credit { right: 16px; bottom: 12px; }
@media (max-width: 599.98px) { html[data-contact="glass"] .contact__credit { position: static; align-self: flex-start; margin-top: 4px; } }

/* ---------- G night, refined (1 Nov, "i want this exact layout but improve it visually"): B night's layout exactly, with a
   better finish.
   - The ground: the ink with a faint light from above, so the section has depth instead of a flat fill.
   - The cards: a hairline edge and a lit top edge, so each reads as an object even where its foot meets the ground.
   - The maps: redrawn with the buildings (OpenStreetMap footprints), the streets weighted by class and the parks a muted
     green. The streets around the office are lit: a brighter copy of the same drawing, masked to a circle at the pin.
   - The pin: LawRank's mark standing over it, like a place on a phone's map, and a ring that pulses three times when the
     cards come into view.
   - The text: the city in the display face, the local time as a live line (the time in white, the zone muted), the
     address and the directions as a glass button.
   Under 1100px the address sits under its map, as in B ---------- */
html[data-contact="refined"] .contact {
  background: radial-gradient(90% 60% at 50% 0, rgba(9, 64, 86, .5), rgba(9, 64, 86, 0) 72%), var(--ink-deep); color: #fff;
}
html[data-contact="refined"] .contact .h2 { color: #fff; }
html[data-contact="refined"] .contact .svc-switch { box-shadow: 0 0 0 1px var(--rule-dark), 0 14px 30px -12px rgba(0, 0, 0, .6); }
html[data-contact="refined"] .offices { gap: 16px; }
@media (min-width: 600px) { html[data-contact="refined"] .offices { gap: clamp(16px, 1.8vw, 24px); } }
html[data-contact="refined"] .office {
  position: relative; overflow: hidden; border-radius: 24px; background: #04202A;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 40px 80px -40px rgba(0, 0, 0, .85);
}
html[data-contact="refined"] .office::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: box-shadow 300ms var(--ease-out);
}
/* the map */
html[data-contact="refined"] .office__map { aspect-ratio: 4 / 3; }
html[data-contact="refined"] :is(.office__img, .office__street) { display: none; }
html[data-contact="refined"] .office__img--refined { display: block; }
html[data-contact="refined"] .office__map::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/office-sd-refined.svg?v=2") 50% 50% / cover no-repeat;
  filter: brightness(1.9) saturate(1.2);
  -webkit-mask: radial-gradient(circle at 50% 38%, #000 0, rgba(0, 0, 0, .55) 20%, rgba(0, 0, 0, 0) 46%);
  mask: radial-gradient(circle at 50% 38%, #000 0, rgba(0, 0, 0, .55) 20%, rgba(0, 0, 0, 0) 46%);
  opacity: .85; transition: opacity 500ms var(--ease-out);
}
html[data-contact="refined"] .office:last-child .office__map::before { background-image: url("../img/office-ny-refined.svg?v=2"); }
/* the edges fall away into the card, and under 1240px the foot fades into the address below it */
html[data-contact="refined"] .office__map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 32, 42, 0) 70%, #04202A),
    radial-gradient(120% 100% at 50% 38%, rgba(4, 32, 42, 0) 50%, rgba(4, 32, 42, .65) 100%);
}
@media (min-width: 1240px) {
  html[data-contact="refined"] .office__map::after { background: radial-gradient(120% 100% at 50% 38%, rgba(4, 32, 42, 0) 50%, rgba(4, 32, 42, .65) 100%); }
}
@media (min-width: 1100px) {
  html[data-contact="refined"] .office__street--refined {
    display: block; z-index: 1; font-size: .6875rem; font-weight: 500; letter-spacing: .02em; color: rgba(159, 180, 189, .85);
    text-shadow: 0 0 3px #04202A, 0 0 3px #04202A, 0 0 6px #04202A;
  }
}
/* (the pin and the mark sit over the address's fade, which from 1100px reaches up past them) */
/* the pin: a small point of light on the office, with LawRank's mark standing over it (no tail: 1 Nov, "just remove this
   iner chevron") */
html[data-contact="refined"] .office__pin {
  top: 38%; z-index: 3; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #7CC4FF;
  box-shadow: 0 0 0 4px rgba(0, 141, 249, .3), 0 0 10px 4px rgba(0, 141, 249, .55), 0 0 48px 14px rgba(0, 141, 249, .35);
}
html[data-contact="refined"] .office__pin::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(92, 182, 255, .9); opacity: 0;
}
html[data-contact="refined"] .offices.is-in .office__pin::after { animation: office-pulse 2400ms var(--ease-out) 900ms 3; }
@keyframes office-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(4.2); } }
html[data-contact="refined"] .office__marker {
  position: absolute; left: 50%; top: 38%; z-index: 3; display: block; width: 40px; height: 40px;
  border-radius: 12px; transform: translate(-50%, calc(-100% - 12px));
  background: url("../../favicon.svg") 50% 50% / 32px 32px no-repeat, #fff;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
  transition: translate 400ms var(--ease-out);
}
/* it drops onto the pin once, as the cards come into view; the transition sits on the arrived state only */
html.js[data-contact="refined"] .offices .office__marker { opacity: 0; translate: 0 -14px; }
html.js[data-contact="refined"] .offices.is-in .office__marker {
  opacity: 1; translate: 0 0; transition: opacity 400ms var(--ease-out) 300ms, translate 700ms cubic-bezier(.34, 1.4, .64, 1) 300ms;
}
html.js[data-contact="refined"] .offices.is-in .office:last-child .office__marker { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) { html[data-contact="refined"] .offices.is-in .office__pin::after { animation: none; } }
html.is-static[data-contact="refined"] .offices.is-in .office__pin::after { animation: none; }
/* the text */
html[data-contact="refined"] .office__body { position: relative; z-index: 1; padding: 0 24px 24px; }
html[data-contact="refined"] .office__city {
  font-family: var(--display); font-size: clamp(1.5rem, 1.25rem + .6vw, 1.875rem); font-weight: 500; letter-spacing: -0.025em; color: #fff;
}
html[data-contact="refined"] .office__time {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 8px;
  font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--muted-dark);
}
html[data-contact="refined"] .office__time::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-on-dark); box-shadow: 0 0 0 3px rgba(92, 182, 255, .18);
}
html[data-contact="refined"] .office__time span { font-weight: 600; color: #fff; }
html[data-contact="refined"] .office address { margin-top: 12px; font-size: .9375rem; line-height: 1.55; color: var(--muted-dark); }
html[data-contact="refined"] .office__link {
  min-height: 40px; margin-top: 20px; padding: 0 14px 0 16px; gap: 8px; border-radius: 10px;
  font-size: .875rem; font-weight: 600; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -10px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
html[data-contact="refined"] .office__link span { text-decoration: none; }
html[data-contact="refined"] .office__link svg { width: 13px; height: 13px; opacity: .8; }
/* the address goes over the foot of the map from 1240px, where it clears the pin by 44px and more (B does from 1100px,
   where it would come within 18px of the mark) */
@media (min-width: 1240px) {
  html[data-contact="refined"] .office__body {
    position: absolute; inset: auto 0 0; padding: 88px clamp(24px, 2.4vw, 32px) clamp(24px, 2.4vw, 32px);
    background: linear-gradient(to top, #04202A 34%, rgba(4, 32, 42, .86) 62%, rgba(4, 32, 42, 0));
  }
}
@media (hover: hover) and (pointer: fine) {
  html[data-contact="refined"] .office:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .16); }
  html[data-contact="refined"] .office:hover .office__map::before { opacity: 1; }
  html[data-contact="refined"] .offices.is-in .office:hover .office__marker { translate: 0 -3px; transition: translate 400ms var(--ease-out); }
  html[data-contact="refined"] .office__link:hover { border-color: rgba(255, 255, 255, .34); background-color: rgba(255, 255, 255, .06); }
}
/* the credit as a small glass chip in a corner of a map: the top right of New York's from 1240px; below that the cards
   are narrow enough for the mark to reach the top, so the chip goes to the foot of the map (New York's beside San Diego,
   San Diego's when they stack), placed from the offices' width */
html[data-contact="refined"] .contact__credit {
  top: 12px; right: 12px; z-index: 3; padding: 4px 8px; border-radius: 8px; background: rgba(4, 32, 42, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html[data-contact="refined"] .contact__offices { container-type: inline-size; }
@media (max-width: 599.98px) { html[data-contact="refined"] .contact__credit { top: calc(75cqi - 36px); } }
@media (min-width: 600px) and (max-width: 1239.98px) {
  html[data-contact="refined"] .contact__credit { top: calc((100cqi - clamp(16px, 1.8vw, 24px)) * .375 - 36px); }
}
/* seven layouts and the first build: the switcher wraps onto two rows until there is room for one */
@media (max-width: 960px) { .contact .svc-switch--multi .svc-switch__group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 2px; } }

/* ==========================================================================
   The four-step form (docked under the hero)
   ========================================================================== */
.qform {
  position: relative;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--r-l);
  background: #fff; color: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.qform__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.qform__title { font-size: 1.25rem; font-weight: 600; }
.qform__count { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.qform__progress { height: 3px; margin-top: 18px; border-radius: 2px; background: var(--ground); overflow: hidden; }
.qform__progress span { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--p, .25)); transition: transform 420ms var(--ease-in-out); }
.qstep { margin-top: 32px; }
.qstep.is-entering { animation: step-in 380ms var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } }
.qstep legend { font-family: var(--display); font-stretch: var(--display-wdth); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: var(--head-w); letter-spacing: -0.02em; line-height: 1.2; }
.qstep__hint { margin-top: 8px; color: var(--muted); font-size: .9375rem; }
.qstep__error { margin-top: 14px; color: #B42318; font-size: .9375rem; font-weight: 500; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
@media (max-width: 420px) { .choices { grid-template-columns: 1fr; } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--rule); border-radius: var(--r-m);
  font-weight: 500; line-height: 1.3;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.choice span::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid #9AA9B1; background: #fff center / 12px no-repeat;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.choices--radio .choice span::before { border-radius: 50%; }
.choice input:checked + span { border-color: var(--blue-text); background: rgba(0, 141, 249, .06); box-shadow: inset 0 0 0 1px var(--blue-text); }
.choice input:checked + span::before {
  border-color: var(--blue-text); background-color: var(--blue-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choices--radio .choice input:checked + span::before { background-image: radial-gradient(circle, #fff 0 3.5px, transparent 4px); background-size: 100%; }
.choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .choice:hover span { border-color: #A9B6BE; } }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.field--wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .fields { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; }
.field input {
  width: 100%; height: 52px; padding: 0 14px;
  border: 1px solid #C5CED5; border-radius: var(--r-s); background: #fff;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field input::placeholder { color: #8A9AA3; }
.field input:focus { outline: none; border-color: var(--blue-text); box-shadow: 0 0 0 3px rgba(0, 141, 249, .2); }
.field input[aria-invalid="true"] { border-color: #B42318; }
.check { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .9375rem; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--blue-text); }

.qform__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.qform__actions [data-next] { margin-left: auto; min-width: 160px; }
.qstep--done { padding: 24px 0 8px; text-align: left; }
.qstep--done:focus { outline: none; }
.qstep--done svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--blue); color: var(--ink-deep); }
.qstep--done :is(h3, h4) { margin-top: 20px; font-family: var(--display); font-size: 1.5rem; font-weight: var(--head-w); letter-spacing: -0.02em; }
.qstep--done p { margin-top: 10px; color: var(--muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-block: clamp(64px, 8vw, 104px) 40px; background: var(--ink-deep); color: var(--muted-dark); border-top: 1px solid var(--rule-dark); font-size: .9375rem; }
.footer a { text-decoration: none; transition: color 160ms; }
.footer__top { display: grid; gap: 48px; }
@media (min-width: 960px) { .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } }
.footer__logo { display: inline-block; color: #fff; }
.footer__logo svg { width: 150px; }
.footer__brand p { margin-top: 16px; font-size: 1.0625rem; color: #fff; }
.social { display: flex; gap: 8px; margin-top: 24px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-dark); color: #fff; }
.social svg { width: 18px; height: 18px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 720px) { .footer__cols { grid-template-columns: 1fr 1fr; } .footer__cols > div:last-child { grid-column: 1 / -1; } }
.footer__cols h2 { font-size: .875rem; font-weight: 600; color: #fff; margin-bottom: 12px; }
.footer__cols ul + h2 { margin-top: 28px; }
.footer__cols li + li { margin-top: 8px; }
.footer__cols address { line-height: 1.55; }
.footer__cols address + address { margin-top: 16px; }
.footer__cols address strong { display: block; color: #fff; font-weight: 500; }
.footer__phone { display: inline-block; margin-top: 18px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule-dark); font-size: .875rem; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal button { color: inherit; font-size: inherit; }
.footer__concept { margin-top: 24px; max-width: 64rem; font-size: .8125rem; line-height: 1.6; color: #7F97A1; }
.footer__concept a { color: var(--muted-dark); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .footer a:hover, .footer__legal button:hover { color: #fff; }
  .social a:hover { border-color: rgba(255, 255, 255, .4); }
}

/* ==========================================================================
   COOKIE CONSENT (from the skill, restyled to the brand)
   ========================================================================== */
.consent {
  position: fixed; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); z-index: 90;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 24px;
  border-radius: var(--r-l);
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0, 44, 60, .08), 0 28px 56px -24px rgba(0, 27, 37, .55);
  opacity: 0; transform: translateY(16px) scale(.97); transform-origin: 100% 100%;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.is-open { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 560ms var(--ease-drawer); }
.consent.is-leaving { opacity: 0; transform: translateY(40px); transition: opacity 440ms cubic-bezier(.4, 0, .2, 1), transform 560ms cubic-bezier(.4, 0, .2, 1); }
.consent__head, .consent__text, .consent__manage, .consent__actions { opacity: 0; transform: translateY(8px); }
.consent.is-open :is(.consent__head, .consent__text, .consent__manage, .consent__actions),
.consent.is-leaving :is(.consent__head, .consent__text, .consent__manage, .consent__actions) { opacity: 1; transform: none; }
.consent.is-open :is(.consent__head, .consent__text, .consent__manage, .consent__actions) {
  transition: opacity 360ms var(--ease-out) calc(90ms + var(--i, 0) * 50ms), transform 480ms var(--ease-out) calc(90ms + var(--i, 0) * 50ms);
}
.consent__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.consent__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); transform: scale(0); }
.consent.is-open .consent__dot, .consent.is-leaving .consent__dot { transform: none; }
.consent.is-open .consent__dot { transition: transform 520ms cubic-bezier(.3, 1.6, .5, 1) 200ms; }
.consent__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.2; }
.consent__title:focus { outline: none; }
.consent__close { display: none; position: relative; flex: none; width: 36px; height: 36px; margin: -6px -10px -6px auto; border-radius: 50%; color: var(--muted); transition: background-color .2s, color .2s, transform 160ms var(--ease-out); }
.consent.can-dismiss .consent__close { display: block; }
.consent__close:active { transform: scale(.92); }
.consent__close span, .consent__close span::before { position: absolute; left: 11px; top: 17px; width: 14px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.consent__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
.consent__text { font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.consent__text a { color: var(--blue-text); }
.consent__manage { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 0; font-size: .9375rem; font-weight: 600; color: var(--blue-text); }
.consent__manage svg { width: 12px; height: 12px; transition: transform 260ms var(--ease-in-out); }
.consent.is-expanded .consent__manage svg { transform: rotate(180deg); }
.consent__prefs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-in-out); }
.consent.is-expanded .consent__prefs { grid-template-rows: 1fr; transition-duration: 380ms; }
.consent__prefs-inner { min-height: 0; overflow: hidden; margin: 0 -4px; padding: 0 4px; }
.consent__row, .consent__save { opacity: 0; transform: translateY(6px); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
.consent.is-expanded :is(.consent__row, .consent__save) { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out) calc(70ms + var(--i, 0) * 40ms), transform 420ms var(--ease-out) calc(70ms + var(--i, 0) * 40ms); }
.consent__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.consent__label { font-weight: 600; }
label.consent__label { cursor: pointer; }
.consent__row p { grid-column: 1 / -1; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.consent__always { font-size: .875rem; font-weight: 600; color: var(--blue-text); }
.consent__save { padding: 6px 0 4px; }
.consent__switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: #C3CDD3; cursor: pointer; transition: background-color 200ms var(--ease-out); }
.consent__switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 27, 37, .3); transition: transform 220ms var(--ease-out), width 160ms var(--ease-out); }
.consent__switch:checked { background: var(--ink); }
.consent__switch:checked::before { transform: translateX(18px); }
.consent__switch:active::before { width: 24px; }
.consent__switch:checked:active::before { transform: translateX(14px); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.consent__actions .btn { min-height: 46px; padding: 10px 14px; }
@media (hover: hover) and (pointer: fine) { .consent__close:hover { background: var(--ground); color: var(--ink); } }
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; padding: 18px 20px 20px; transform: translateY(calc(100% + 24px)); transform-origin: 50% 100%; transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out); }
  .consent.is-leaving { transform: translateY(calc(100% + 24px)); }
}


/* ==========================================================================
   DESIGN REVIEW switcher (concept only). Its own neutral type, so it never
   changes with the typeface it controls.
   ========================================================================== */
html:not(.is-review) .review { display: none; }
.review {
  position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 95;
  display: grid; justify-items: start; gap: 8px;
  font: 500 13px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0; color: #fff;
}
.review__toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px;
  border-radius: 999px; background: rgba(0, 20, 28, .94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -10px rgba(0, 0, 0, .5);
  color: rgba(255, 255, 255, .86);
}
.review__toggle::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.review__toggle svg { width: 12px; height: 12px; transform: rotate(180deg); transition: transform 200ms var(--ease-out); }
.review__toggle[aria-expanded="false"] svg { transform: none; }
.review__panel {
  display: grid; gap: 8px; padding: 10px; border-radius: 14px;
  background: rgba(0, 20, 28, .94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 48px -16px rgba(0, 0, 0, .55);
}
.review.is-collapsed .review__panel { display: none; }
.review__row { display: flex; align-items: center; gap: 10px; }
.review__label { width: 62px; flex: none; padding-left: 4px; font-size: 12px; color: rgba(255, 255, 255, .58); }
.review__seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(255, 255, 255, .07); }
.review__seg button { padding: 7px 10px; border-radius: 7px; color: rgba(255, 255, 255, .8); white-space: nowrap; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.review__seg button b { margin-right: 4px; font-weight: 700; color: var(--blue-on-dark); }
.review__seg button[aria-pressed="true"] { background: #fff; color: var(--ink-deep); }
.review__seg button[aria-pressed="true"] b { color: var(--blue-text); }
.review :focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .review__seg button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .1); color: #fff; } }
@media (max-width: 640px) {
  .review { right: 12px; }
  .review__panel { width: 100%; }
  .review__label { width: 44px; font-size: 11px; }
  .review__seg { flex: 1; overflow-x: auto; scrollbar-width: none; }
  .review__seg button { padding: 7px 8px; font-size: 12px; }
}

/* ==========================================================================
   RESPONSIVE: masthead and hero
   ========================================================================== */
@media (max-width: 1180px) {
  .masthead__phone span { display: none; }
  .nav__link { padding: 0 10px; }
}
@media (max-width: 1023px) {
  :root { --masthead-h: 68px; }
  .nav, .masthead__phone { display: none; }
  .masthead__actions { margin-left: auto; gap: 10px; }
  .masthead__toggle { display: grid; }
  .masthead__logo svg { width: 124px; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
}
@media (max-width: 640px) {
  .masthead__cta { display: none; }
  :root { --dock-overlap: 56px; }
  .hero { min-height: 0; }
  .hero__media { background-position: var(--photo-pos-sm, var(--photo-pos, 50% 50%)); }
  .hero::before { background: linear-gradient(180deg, rgba(0, 27, 37, .86) 0%, rgba(0, 27, 37, .72) 46%, rgba(0, 27, 37, .3) 70%, rgba(0, 27, 37, .5) 100%); }
  .hero__body { padding-top: calc(var(--masthead-h) + 64px); }
  .proof { padding-inline: 0; gap: 18px 16px; }
  .proof strong { font-size: 1rem; }
  .proof li { font-size: .875rem; }
  .work__nav { display: none; }
  .casehero__actions .btn { flex: 1 1 auto; }
  /* hero C's two set lines are too long for a phone: let them reflow, balanced */
  .searchhero .hero__title { text-wrap: balance; }
  .searchhero .hero__title .line, .js .searchhero .hero__title .line > span { display: inline; transform: none; }
  .seek__bar { display: grid; grid-template-columns: 20px minmax(0, 1fr); row-gap: 6px; height: auto; padding: 8px 8px 8px 18px; border-radius: 20px; }
  .seek__bar input { height: 48px; font-size: 1rem; }
  .seek__bar .btn { grid-column: 1 / -1; border-radius: 14px; }
  .climb__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .climb__rail { --track: 46px; --lines: 58px; height: 340px; }
  .climb__also { display: grid; justify-items: start; }
  .ledger__table thead th { padding-inline: 10px; }
  .ledger__table tbody th, .ledger__table td { padding-inline: 10px; }
  .ledger__table tbody th { width: auto; padding-right: 14px; font-size: 1rem; }
  .ledger__table tbody tr:first-child th { font-size: 1.0625rem; }
  .ledger__table td:nth-child(2) { font-size: .9375rem; }
  .ledger__table td strong { font-size: 1.5rem; }
  .ledger__table tbody tr:first-child td strong { font-size: 2.25rem; }
  .ledger__src { padding-left: 10px; }
}

/* ==========================================================================
   REDUCED MOTION and ?static: gentler, not zero
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__title .line > span, .js .hero .stop, .js .hero__media { transform: none !important; transition: none !important; }
  .js :is(.hero .hero__lede, .intake, .hero .rise) { transform: none !important; }
  .js [data-bar] .bar::before { transform: none; transition: none; }
  .qstep.is-entering, .filmbox[open] { animation-name: fade-in; }
  .sd__art svg, .si__art svg, .sl__go svg, .sl__pin { transition: none; }
  :is(.svh, .svh-iso) * { transition: none !important; }
  .rsearch__typed::after { animation: none; }
  .xdots__grid i, .xbar::before, .xbar b, .xrank__trail, .xrank__to, .xpack__map span, .xpack__map svg,
  .xbrief__cols::after, .xbrief__when::before { transition: none !important; }
  .menu, .menu.is-open { transition: opacity 300ms, visibility 0s linear 300ms; clip-path: none; opacity: 0; }
  .menu.is-open { opacity: 1; transition: opacity 300ms, visibility 0s; }
  .menu__nav li, .menu__foot { transform: none !important; }
  .consent, .consent :is(.consent__head, .consent__text, .consent__manage, .consent__actions, .consent__row, .consent__save) { transform: none !important; }
}
@keyframes fade-in { from { opacity: 0; } }
.is-static .loader { display: none !important; }
.is-static *, .is-static *::before, .is-static *::after { transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s !important; animation-delay: 0s !important; }