/* ==========================================================================
   MS&B Inc — theme stylesheet
   --------------------------------------------------------------------------
   Ported from the Claude Design system, which is 100% React inline styles with
   JavaScript hover state and NO media queries. Every :hover, :focus-visible and
   @media rule in this file is therefore authored, not transcribed — see
   docs/design-source-notes/hover-map.md for the JS-ternary-to-CSS mapping and
   divergences.md for every deliberate deviation.

   RULES FOR THIS FILE, enforced by pre-deploy greps:
     1. No colour literal. Ever. Only var(--token). tokens.css owns the values.
     2. Breakpoints are literal px (custom properties cannot be used in @media)
        and are declared once, here:
              1120  4-col -> 2-col
              1000  services sidebar unsticks; footer tightens
               900  THE HINGE: splits collapse, mobile nav, hero scrim rotates
               640  single column; padding steps down
               400  display type steps down again
   ========================================================================== */


/* ══ BASE ══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}

/* DS: tokens/effects.css shipped these two bare rules. */
a{ color:var(--link); text-decoration:none; transition:color var(--dur-fast) var(--ease-brand); }
a:hover{ color:var(--link-hover); }

img{ max-width:100%; height:auto; }
svg{ display:block; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; color:var(--text-heading); margin:0; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--msb-focus);
  outline-offset:2px;
}
.msb-band--navy :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline-color:var(--msb-focus-on-navy);
}

.msb-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface-page); color:var(--text-heading);
  padding:var(--space-3) var(--space-5);
  font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
}
.msb-skip:focus{ left:0; }

.msb-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}


/* ══ LAYOUT ════════════════════════════════════════════════════════════════ */

.msb-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding-inline:var(--container-pad);
}

/* The design pads every section 96px 32px; the hero is the one exception. */
.msb-section{ padding-block:var(--space-9); }
.msb-section--tight{ padding-block:var(--space-8); }

.msb-band--paper{ background:var(--surface-paper); }
.msb-band--page { background:var(--surface-page); }
.msb-band--navy {
  background:var(--surface-navy);
  color:var(--text-on-navy);
}
.msb-band--navy-deep{ background:var(--surface-navy-deep); color:var(--text-on-navy); }
.msb-band--ruled{ border-top:1px solid var(--border-hairline); }

.msb-band--navy a{ color:var(--text-on-navy); }
.msb-band--navy a:hover{ color:var(--text-on-navy); }

/* Anchor targets: #practice-01..04 are a brand device and inbound links from the
   old /servicees/ page use them, so the offset has to be right. */
[id]{ scroll-margin-top:calc(var(--msb-header-h) + var(--space-6)); }

/* Grids. --auto is intrinsic and needs no media queries at all: it yields 3 at a
   1200 container, 2 around 900, 1 around 640 — the exact ladder we want, and it
   is correct for the articles grid where the item count is unbounded. */
.msb-grid--auto{
  display:grid; gap:var(--space-5);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.msb-grid--practices{ display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
.msb-grid--team     { display:grid; gap:var(--space-5); grid-template-columns:repeat(3,1fr); }

.msb-split{ display:grid; gap:var(--space-8); }
.msb-split--overview{ grid-template-columns:1fr 1.2fr; align-items:center; }
.msb-split--contact { grid-template-columns:1fr 1.1fr; }

.msb-headrow{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-6); }
.msb-stack  { display:flex; flex-direction:column; gap:var(--space-5); }

/* The design sets marginTop:56px on every grid that follows a section heading. */
.msb-section__body{ margin-top:56px; }


/* ══ REVEAL ════════════════════════════════════════════════════════════════
   FAILURE MODE THIS GUARDS AGAINST: if the resting state were opacity:0 and the
   script failed to load, the entire site would render blank. So the resting
   state is visible, and only the `js` class (set by an inline head script)
   opts in to the hidden state. ======================================== */

.js .msb-reveal{
  opacity:0;
  transform:translateY(var(--msb-reveal-y));
  transition:opacity var(--msb-reveal-dur) var(--ease-brand) var(--msb-reveal-delay,0ms),
             transform var(--msb-reveal-dur) var(--ease-brand) var(--msb-reveal-delay,0ms);
  will-change:opacity,transform;
}
.js .msb-reveal.is-revealed{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js .msb-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}


/* ══ WORDMARK ══════════════════════════════════════════════════════════════
   Both surfaces render the official mark as an image element pointing at a vector —
   msb-logo.svg on light, msb-logo-reverse.svg on navy.

   The live-type branch and its colour rules used to live here, because the
   supplied mark was a raster with no reverse variant and its "Inc." measured
   1.12:1 on navy. Both variants are now outlines, so there is nothing left to
   fall back to and those rules are gone — including the one that set the
   reverse B in --red-600. The reverse mark is blues and greys only; its colours
   live in the SVG itself. See divergences.md §5. */

.msb-wordmark{
  --msb-wordmark-size:26px;
  display:inline-flex; flex-direction:column; line-height:1;
  text-decoration:none;
}
/* Sized by HEIGHT off --msb-wordmark-size, which is what keeps the mark in step
   with the type around it at every size: the multiplier sets the mark's cap
   height to that value, the art being ~65% cap and ~35% sub-label. width:auto
   keeps the aspect; the intrinsic width/height on the tag still reserves the
   box, so this does not shift layout while the image loads. */
.msb-wordmark__img{
  display:block;
  height:calc(var(--msb-wordmark-size) * 1.53);
  width:auto;
}

.msb-wordmark--lg{ --msb-wordmark-size:30px; }
.msb-wordmark--xl{ --msb-wordmark-size:34px; }


/* ══ NAVBAR ════════════════════════════════════════════════════════════════ */

.msb-nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  padding:20px 40px;
  background:var(--surface-page);
  border-bottom:1px solid var(--border-hairline);
}
.msb-nav__list{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0;
}
.msb-nav__link{
  display:inline-block;
  font-family:var(--font-body); font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--navy-800);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-brand);
}
.msb-nav__link:hover,
.msb-nav__link:focus-visible{ color:var(--red-600); }
.msb-nav__link--active{ color:var(--red-600); border-bottom-color:var(--red-600); }

.msb-nav__toggle{ display:none; }

/* The design has no mobile navigation at all. Measured, the desktop bar fits to
   about 880px, so 900 is the honest collapse point. A dropdown, not a drawer —
   a drawer is showy and this brand is restrained. */
.msb-nav__panel{ display:contents; }

@media (max-width:1120px){
  .msb-nav{ gap:var(--space-5); }
  .msb-nav__list{ gap:20px; }
}

@media (max-width:900px){
  .msb-nav{ padding:16px var(--container-pad); position:relative; }

  .msb-nav__toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px;
    background:none; border:0; cursor:pointer;
  }
  .msb-nav__toggle span{
    display:block; height:2px; width:100%;
    background:var(--navy-800);
    transition:transform var(--dur-fast) var(--ease-brand),
               opacity   var(--dur-fast) var(--ease-brand);
  }
  .msb-nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .msb-nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .msb-nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .msb-nav__panel{
    display:block;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface-page);
    border-bottom:1px solid var(--border-hairline);
    box-shadow:var(--shadow-lift);
    padding:var(--space-2) var(--container-pad) var(--space-5);
  }
  /* Progressive enhancement: only JS-enabled browsers get the collapsed state.
     Without JS the panel stays a plain stacked list — a law firm site that
     cannot be navigated without scripts is not acceptable. */
  .js .msb-nav__panel{ display:none; }
  .js .msb-nav__panel.is-open{ display:block; }

  .msb-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .msb-nav__link{
    padding:var(--space-4) 0 var(--space-4) var(--space-3);
    font-size:var(--text-sm);
    border-bottom:0;
    border-top:1px solid var(--border-hairline);
    border-left:2px solid transparent;
  }
  /* The active device rotated 90 degrees. */
  .msb-nav__link--active{ border-left-color:var(--red-600); border-bottom-color:transparent; }

  .msb-nav__cta{ display:flex; width:100%; justify-content:center; margin-top:var(--space-4); }
}


/* ══ BUTTON ════════════════════════════════════════════════════════════════
   Note the border rule: for variants whose DS border is 'transparent', the
   border colour tracks the background so the box never changes size. Outline
   and onDark keep a fixed border and only change fill. */

.msb-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:0.14em; text-transform:uppercase;
  padding:14px 28px;
  border:1px solid transparent;
  border-radius:var(--radius-0);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-brand),
             color            var(--dur-fast) var(--ease-brand),
             border-color     var(--dur-fast) var(--ease-brand),
             transform        var(--dur-fast) var(--ease-brand);
}
.msb-btn__arrow{
  display:inline-block; letter-spacing:0;
  transition:transform var(--dur-fast) var(--ease-brand);
}
.msb-btn:hover .msb-btn__arrow,
.msb-btn:focus-visible .msb-btn__arrow{ transform:translateX(4px); }
.msb-btn:active{ transform:translateY(1px); }
.msb-btn[disabled],.msb-btn[aria-disabled="true"]{ opacity:0.45; cursor:not-allowed; }
.msb-btn[disabled]:active,.msb-btn[aria-disabled="true"]:active{ transform:none; }

.msb-btn--sm{ padding:10px 20px; font-size:11px; }
.msb-btn--lg{ padding:18px 36px; }

.msb-btn--primary{ background:var(--navy-800); border-color:var(--navy-800); color:var(--surface-page); }
.msb-btn--primary:hover,.msb-btn--primary:focus-visible{ background:var(--navy-950); border-color:var(--navy-950); color:var(--surface-page); }

.msb-btn--accent{ background:var(--red-600); border-color:var(--red-600); color:var(--surface-page); }
.msb-btn--accent:hover,.msb-btn--accent:focus-visible{ background:var(--red-700); border-color:var(--red-700); color:var(--surface-page); }

.msb-btn--outline{ background:transparent; border-color:var(--navy-800); color:var(--navy-800); }
.msb-btn--outline:hover,.msb-btn--outline:focus-visible{ background:var(--navy-800); color:var(--surface-page); }

.msb-btn--on-dark{ background:transparent; border-color:var(--border-on-navy-strong); color:var(--text-on-navy); }
.msb-btn--on-dark:hover,.msb-btn--on-dark:focus-visible{ background:var(--overlay-on-navy-hover); color:var(--text-on-navy); }

.msb-btn--ghost{ background:transparent; border:0; padding:4px 0; color:var(--red-600); }
.msb-btn--ghost:hover,.msb-btn--ghost:focus-visible{ color:var(--red-700); }


/* ══ SECTION HEADING ═══════════════════════════════════════════════════════ */

.msb-heading{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.msb-heading--center{ align-items:center; text-align:center; }

.msb-heading__eyebrow{
  font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}
.msb-heading__title{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--text-display); line-height:var(--leading-display);
  color:var(--text-heading);
  max-width:640px;
}
.msb-heading__rule{ width:48px; height:2px; background:var(--red-600); }
.msb-heading__lead{
  margin:0;
  font-size:var(--text-body-lg); line-height:var(--leading-body);
  color:var(--text-body);
  max-width:560px;
}
.msb-heading--on-dark .msb-heading__title{ color:var(--text-on-navy); }
.msb-heading--on-dark .msb-heading__lead { color:var(--text-on-navy-muted); }
/* The on-dark modifier recoloured the title and the lead but never the eyebrow,
   so the "CONTACT" eyebrow on the home contact band and the CTA band both kept
   --red-600 on navy. .msb-heading__rule below stays --red-600: it is a 2px
   decorative bar, and contrast minima do not apply to it. */
.msb-heading--on-dark .msb-heading__eyebrow{ color:var(--text-accent-on-navy); }
.msb-heading__title--on-dark{ color:var(--text-on-navy); }


/* ══ BADGE ═════════════════════════════════════════════════════════════════ */

.msb-badge{
  display:inline-block;
  font-family:var(--font-body); font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:0.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-0);
  background:var(--navy-100); color:var(--navy-800);
}
.msb-badge--red    { background:var(--red-100);  color:var(--red-700); }
.msb-badge--grey   { background:var(--grey-100); color:var(--grey-600); }
.msb-badge--on-dark{ background:var(--overlay-on-navy-hover); color:var(--text-on-navy); }

.msb-badges{ display:flex; gap:10px; flex-wrap:wrap; }


/* ══ PRACTICE CARD (DS: ServiceCard) ═══════════════════════════════════════ */

.msb-card-practice{
  display:flex; flex-direction:column; gap:14px;
  padding:28px 24px; height:100%;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-top:2px solid var(--border-hairline);
  box-shadow:var(--shadow-card);
  transition:border-color var(--dur-med) var(--ease-brand),
             box-shadow   var(--dur-med) var(--ease-brand),
             background   var(--dur-med) var(--ease-brand);
}
.msb-card-practice:hover,
.msb-card-practice:focus-visible{
  border-color:var(--border-strong);
  border-top-color:var(--red-600);
  box-shadow:var(--shadow-lift);
}
.msb-card-practice__num{
  font-family:var(--font-display); font-size:15px;
  color:var(--numeral);
  transition:color var(--dur-fast) var(--ease-brand);
}
.msb-card-practice__title{
  font-family:var(--font-display); font-weight:600;
  font-size:20px; line-height:1.25;
  color:var(--text-heading);
}
.msb-card-practice__summary{
  font-family:var(--font-body); font-size:var(--text-sm); line-height:1.6;
  color:var(--text-body);
}
.msb-card-practice__arrow{
  margin-top:auto;
  font-family:var(--font-body); font-size:16px;
  color:var(--grey-400);
  transition:color var(--dur-fast) var(--ease-brand),
             transform var(--dur-fast) var(--ease-brand);
}
.msb-card-practice:hover .msb-card-practice__num,
.msb-card-practice:focus-visible .msb-card-practice__num,
.msb-card-practice:hover .msb-card-practice__arrow,
.msb-card-practice:focus-visible .msb-card-practice__arrow{ color:var(--red-600); }
.msb-card-practice:hover .msb-card-practice__arrow,
.msb-card-practice:focus-visible .msb-card-practice__arrow{ transform:translateX(4px); }

.msb-card-practice--on-dark{
  background:transparent; box-shadow:none;
  border-color:var(--border-on-navy); border-top-color:var(--border-on-navy);
}
.msb-card-practice--on-dark:hover{ background:var(--overlay-on-navy-hover); box-shadow:none; border-color:var(--border-on-navy); border-top-color:var(--red-600); }
.msb-card-practice--on-dark .msb-card-practice__title  { color:var(--text-on-navy); }
.msb-card-practice--on-dark .msb-card-practice__summary{ color:var(--text-on-navy-muted); }
.msb-card-practice--on-dark .msb-card-practice__arrow  { color:var(--text-on-navy-muted); }


/* ══ DIRECTOR CARD (DS: ProfileCard) ═══════════════════════════════════════
   The photo well is navy, per the <style> override injected by pages/home.jsx.
   The component default (hatch) is stale; the override is the design's intent. */

.msb-card-director{
  display:flex; flex-direction:column; height:100%;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--dur-med) var(--ease-brand);
}
.msb-card-director:hover,
.msb-card-director:focus-visible{ box-shadow:var(--shadow-lift); }

.msb-card-director__well{
  display:flex; justify-content:center; align-items:flex-end;
  height:260px; overflow:hidden;
  background:var(--navy-800);
}
.msb-card-director__photo{
  height:240px; width:auto; max-width:none; display:block;
  filter:saturate(0.9);
  transition:filter var(--dur-med) var(--ease-brand);
}
.msb-card-director:hover .msb-card-director__photo{ filter:none; }

/* Shown only where no portrait has been supplied yet — better than an empty
   navy box or a broken image, and it reads as intentional. */
.msb-card-director__initials{
  font-family:var(--font-display); font-weight:500; font-size:64px;
  color:var(--border-on-navy-strong);
  align-self:center; margin-bottom:var(--space-8);
  letter-spacing:0.02em;
}

.msb-card-director__body{
  padding:20px 22px;
  border-top:2px solid transparent;
  transition:border-color var(--dur-fast) var(--ease-brand);
}
.msb-card-director:hover .msb-card-director__body,
.msb-card-director:focus-visible .msb-card-director__body{ border-top-color:var(--red-600); }

.msb-card-director__name{
  font-family:var(--font-display); font-weight:600; font-size:21px;
  color:var(--text-heading);
}
.msb-card-director__role{
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
  margin:6px 0 10px;
}
.msb-card-director__contact{
  display:flex; flex-direction:column; gap:2px;
  font-size:13px; color:var(--text-muted);
}
.msb-card-director__contact a{ color:inherit; }
.msb-card-director__contact a:hover{ color:var(--red-600); }


/* ══ ARTICLE CARD ══════════════════════════════════════════════════════════ */

.msb-card-article{
  display:flex; flex-direction:column; gap:14px; height:100%;
  padding:28px;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-top:2px solid var(--navy-800);
  box-shadow:var(--shadow-card);
  transition:border-color var(--dur-fast) var(--ease-brand),
             box-shadow   var(--dur-fast) var(--ease-brand),
             transform    var(--dur-fast) var(--ease-brand);
}
.msb-card-article:hover,
.msb-card-article:focus-visible{
  border-color:var(--border-strong);
  border-top-color:var(--red-600);
  box-shadow:var(--shadow-lift);
  transform:translateY(-2px);
}
.msb-card-article__cat{
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}
.msb-card-article__title{
  font-family:var(--font-display); font-weight:500;
  font-size:22px; line-height:1.25;
  color:var(--text-heading);
}
.msb-card-article__excerpt{ font-size:14.5px; line-height:1.6; color:var(--text-body); }
.msb-card-article__meta{
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--space-4);
  border-top:1px solid var(--border-hairline);
  font-size:12.5px; color:var(--text-muted);
}
.msb-card-article__arrow{
  color:var(--red-600); font-weight:var(--weight-caps);
  transition:transform var(--dur-fast) var(--ease-brand);
}
.msb-card-article:hover .msb-card-article__arrow,
.msb-card-article:focus-visible .msb-card-article__arrow{ transform:translateX(4px); }


/* ══ FORM FIELDS ═══════════════════════════════════════════════════════════ */

.msb-field{ display:block; }
.msb-field__label{
  display:block;
  font-family:var(--font-body); font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-500);
  margin-bottom:var(--space-2);
}
.msb-field__control{
  width:100%;
  font-family:var(--font-body); font-size:15px;
  color:var(--text-heading);
  background:var(--surface-page);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  transition:border-color var(--dur-fast) var(--ease-brand);
}
/* NO `outline:none` here. The design system sets outline:'none' inline on Input,
   Textarea and Select, and transcribing it silently cancelled the global focus
   ring in the BASE block above — the two rules have equal specificity, so the
   later one won. The result was that the only four controls on the site a
   keyboard user has to operate, the ones that contact the firm, were also the
   only four with no focus ring; the :focus border-colour change below was doing
   the whole job on its own at 1px. Verified by focusing all 43 focusable
   elements on the front page and reading the computed outline of each. */
.msb-field__control:focus{ border-color:var(--navy-800); }
textarea.msb-field__control{ resize:vertical; }

.msb-field__error{
  display:block;
  font-family:var(--font-body); font-size:13px;
  color:var(--red-600);
  margin-top:6px;
}
.msb-field--error .msb-field__control{ border-color:var(--red-600); }

/* The contact form only ever renders inside the navy band, so its error text
   was --red-600 on navy at 2.56:1 — the least readable thing on the page and
   the one a user most needs to read. The control's error border stays
   --red-600; it is a border, not text. */
.msb-field--on-dark .msb-field__error{ color:var(--text-accent-on-navy); }

.msb-field--on-dark .msb-field__label{ color:var(--text-on-navy-muted); }
.msb-field--on-dark .msb-field__control{
  background:var(--overlay-on-navy-field);
  color:var(--text-on-navy);
  border-color:var(--border-on-navy-field);
}
.msb-field--on-dark .msb-field__control:focus{ border-color:var(--text-on-navy); }
.msb-field--on-dark .msb-field__control::placeholder{ color:var(--text-on-navy-muted); }

/* Select — chevron is a rotated 7px box with two borders, as authored. */
.msb-select{ position:relative; display:block; }
.msb-select select{ appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; }
.msb-select__chevron{
  position:absolute; right:16px; top:50%;
  width:7px; height:7px; margin-top:-2px;
  border-right:1.5px solid var(--grey-500);
  border-bottom:1.5px solid var(--grey-500);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
}
.msb-field--on-dark .msb-select__chevron{
  border-right-color:var(--text-on-navy-muted);
  border-bottom-color:var(--text-on-navy-muted);
}
.msb-select option{ color:var(--text-heading); }

/* Checkbox — the DS hides the real input at zero size with NO focus indicator
   at all. Here the input is properly screen-reader-visible and the fake box
   takes a focus ring. */
.msb-check{
  display:inline-flex; align-items:flex-start; gap:var(--space-3);
  font-family:var(--font-body); cursor:pointer;
}
.msb-check__input{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.msb-check__box{
  flex:none; width:18px; height:18px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--grey-300);
  border-radius:var(--radius-sm);
  background:var(--surface-page);
  transition:background var(--dur-fast) var(--ease-brand),
             border-color var(--dur-fast) var(--ease-brand);
}
.msb-check__tick{ opacity:0; transition:opacity var(--dur-fast) var(--ease-brand); }
.msb-check__input:checked + .msb-check__box{ background:var(--navy-800); border-color:var(--navy-800); }
.msb-check__input:checked + .msb-check__box .msb-check__tick{ opacity:1; }
.msb-check__input:focus-visible + .msb-check__box{ outline:2px solid var(--msb-focus); outline-offset:2px; }
.msb-check__label{ font-size:var(--text-sm); line-height:1.5; color:var(--text-body); }

.msb-check--on-dark .msb-check__box{ background:var(--overlay-on-navy-field); border-color:var(--border-on-navy-strong); }
.msb-check--on-dark .msb-check__input:checked + .msb-check__box{ background:var(--text-on-navy); border-color:var(--text-on-navy); }
.msb-check--on-dark .msb-check__tick{ color:var(--navy-800); }
.msb-check--on-dark .msb-check__label{ color:var(--text-on-navy-muted); }
.msb-check--on-dark .msb-check__input:focus-visible + .msb-check__box{ outline-color:var(--msb-focus-on-navy); }

.msb-form{ display:flex; flex-direction:column; gap:18px; }
.msb-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.msb-form__summary{
  border:1px solid var(--red-600);
  padding:var(--space-4) var(--space-5);
  color:var(--text-on-navy);
  font-size:var(--text-sm);
}
.msb-form__summary ul{ margin:var(--space-2) 0 0; padding-left:var(--space-4); }
.msb-form__summary a{ color:var(--text-on-navy); text-decoration:underline; }

/* Honeypot. Off-canvas rather than display:none, which bots detect. */
.msb-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.msb-form-done{
  border:1px solid var(--border-on-navy);
  padding:var(--space-7);
  display:flex; flex-direction:column; gap:var(--space-3); justify-content:center;
}
.msb-form-done__title{ font-family:var(--font-display); font-size:28px; color:var(--text-on-navy); }
.msb-form-done__body { font-size:15px; line-height:1.6; color:var(--text-on-navy-muted); }
.msb-form-done__again{ align-self:flex-start; margin-top:var(--space-2); }
.msb-form__submit{ align-self:flex-start; }


/* ══ HERO ══════════════════════════════════════════════════════════════════ */

.msb-hero{
  position:relative; overflow:hidden;
  background:var(--navy-900); color:var(--text-on-navy);
}
.msb-hero__media{ position:absolute; inset:0; }
.msb-hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center right;
}
.msb-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(var(--scrim-navy),0.95) 0%,
    rgba(var(--scrim-navy),0.93) 34%,
    rgba(var(--scrim-navy),0.80) 44%,
    rgba(var(--scrim-navy),0.34) 51%,
    rgba(var(--scrim-navy),0)    55%);
}
.msb-hero__inner{ position:relative; padding-block:128px 112px; }
.msb-hero__content{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-5);
  max-width:min(620px,58%);
}
.msb-hero__eyebrow{
  font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  /* On navy, same as .msb-page-hero__eyebrow. This was --red-600 and so was
     the one on-navy accent the divergence missed: 3.12:1 over the scrim, and
     visibly a different colour from the eyebrow on every other page. */
  color:var(--text-accent-on-navy);
}
.msb-hero__title{
  font-family:var(--font-display); font-weight:500;
  /* Cap below --text-display-xl so the 55-character limit still fits two lines. */
  font-size:clamp(36px,4vw,52px); line-height:var(--leading-display);
  color:var(--text-on-navy);
}
.msb-hero__lead{
  margin:0; max-width:520px;
  font-size:var(--text-body-lg); line-height:var(--leading-body);
  color:var(--text-on-navy-muted);
}
.msb-hero__actions{ display:flex; gap:var(--space-4); flex-wrap:wrap; }


/* ══ AWARD TICKER ════════════════════════════════════════════════════════════ */

.msb-award-ticker{
  border-top:1px solid var(--border-on-navy);
  padding-block:var(--space-3);
  overflow:hidden;
}
.msb-award-ticker__viewport{ overflow:hidden; }
.msb-award-ticker__track{
  display:flex; width:max-content;
  animation:msb-award-ticker 48s linear infinite;
}
.msb-award-ticker__group{
  display:flex; align-items:center; gap:var(--space-5);
  padding-inline:var(--space-6);
  flex-shrink:0;
  white-space:nowrap;
}
.msb-award-ticker__text{
  font-size:var(--text-sm); font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-on-navy);
}
.msb-award-ticker__link{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm); font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-accent-on-navy);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-brand);
}
.msb-award-ticker__link:hover,
.msb-award-ticker__link:focus-visible{
  color:var(--text-on-navy);
  text-decoration:underline;
  text-underline-offset:3px;
}
.msb-award-ticker:hover .msb-award-ticker__track,
.msb-award-ticker:focus-within .msb-award-ticker__track{
  animation-play-state:paused;
}
@keyframes msb-award-ticker{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .msb-award-ticker__viewport{ overflow:visible; }
  .msb-award-ticker__track{
    animation:none; width:100%; justify-content:center;
  }
  .msb-award-ticker__group[aria-hidden="true"]{ display:none; }
}


/* ══ PAGE HERO ═════════════════════════════════════════════════════════════ */

.msb-page-hero{ padding-block:88px 72px; }
.msb-page-hero__eyebrow{
  display:block;
  font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-accent-on-navy);
}
.msb-page-hero__title{
  margin-top:20px; max-width:760px;
  font-family:var(--font-display); font-weight:500;
  font-size:52px; line-height:var(--leading-display);
  color:var(--text-on-navy);
}
.msb-page-hero__lead{
  margin:22px 0 0; max-width:620px;
  font-size:17px; line-height:var(--leading-body);
  color:var(--text-on-navy-muted);
}

@media (max-width:900px){ .msb-page-hero__title{ font-size:var(--text-h1); } }
@media (max-width:640px){
  .msb-page-hero{ padding-block:var(--space-8) var(--space-7); }
  .msb-page-hero__title{ font-size:clamp(28px,6.5vw,40px); }
}

/* ══ SERVICES ══════════════════════════════════════════════════════════════ */

.msb-services{ display:grid; grid-template-columns:240px 1fr; gap:var(--space-8); align-items:start; }

.msb-services__nav{
  position:sticky; top:calc(var(--msb-header-h) + var(--space-6));
  display:flex; flex-direction:column;
}
.msb-services__navlink{
  display:flex; gap:var(--space-3); align-items:baseline;
  padding:var(--space-3) 0 var(--space-3) var(--space-3);
  border-left:2px solid var(--border-hairline);
  color:var(--text-body);
  transition:border-color var(--dur-fast) var(--ease-brand),
             color var(--dur-fast) var(--ease-brand);
}
.msb-services__navlink:hover,
.msb-services__navlink:focus-visible,
.msb-services__navlink.is-active{ border-left-color:var(--red-600); color:var(--text-heading); }
.msb-services__navnum{
  font-family:var(--font-display); font-size:var(--text-caption);
  color:var(--numeral); flex:none;
}
.msb-services__navlink.is-active .msb-services__navnum{ color:var(--red-600); }
.msb-services__navtitle{ font-size:13.5px; line-height:1.35; }

.msb-services__body{ display:flex; flex-direction:column; gap:var(--space-9); }

.msb-practice__num{
  display:block; font-family:var(--font-display); font-size:var(--text-h3);
  color:var(--numeral); margin-bottom:var(--space-2);
}
.msb-practice__title{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--text-h2); line-height:var(--leading-heading);
  color:var(--text-heading);
}
.msb-practice__summary{
  margin:var(--space-4) 0 0; max-width:640px;
  font-size:var(--text-body-lg); line-height:var(--leading-body); color:var(--text-body);
}
.msb-practice__body{ margin-top:var(--space-5); max-width:680px; }
.msb-practice__subheading{
  margin:var(--space-6) 0 var(--space-3);
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}
.msb-practice__list{ margin:0; padding-left:var(--space-5); color:var(--text-body); }
.msb-practice__list li + li{ margin-top:var(--space-2); }

/* ══ PEOPLE ════════════════════════════════════════════════════════════════ */

.msb-people{ display:flex; flex-direction:column; gap:var(--space-9); }

.msb-person{ display:grid; grid-template-columns:1fr 1.6fr; gap:var(--space-8); align-items:start; }
.msb-person--flip .msb-person__media{ order:2; }

.msb-person__media{ position:sticky; top:calc(var(--msb-header-h) + var(--space-6)); }
.msb-person__well{
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--navy-800); height:420px; overflow:hidden;
}
.msb-person__photo{ height:400px; width:auto; max-width:none; display:block; }

.msb-person__name{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--text-h2); color:var(--text-heading);
}
.msb-person__role{
  margin:var(--space-2) 0 0;
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}
.msb-person__quals{ margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--text-muted); }
.msb-person__bio{ margin-top:var(--space-5); }
.msb-person__subheading{
  margin:var(--space-6) 0 var(--space-3);
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}
.msb-person__list{ margin:0; padding-left:var(--space-5); color:var(--text-body); font-size:var(--text-sm); }
.msb-person__areas{ margin-top:var(--space-5); }
.msb-person__contact{
  margin:var(--space-5) 0 0; display:flex; gap:var(--space-5); flex-wrap:wrap;
  font-size:13px; color:var(--text-muted);
}
.msb-person__contact a{ color:inherit; }
.msb-person__contact a:hover{ color:var(--red-600); }

.msb-person__namelink{ color:inherit; text-decoration:none; }
.msb-person__namelink:hover{ color:var(--red-600); }
.msb-person__more{ margin:var(--space-5) 0 0; }

/* The team page's link through to a full profile, and the profile's link back. */
.msb-link-arrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600); text-decoration:none;
}
.msb-link-arrow span{ display:inline-block; letter-spacing:0;
  transition:transform var(--dur-fast) var(--ease-brand); }
.msb-link-arrow:hover span,
.msb-link-arrow:focus-visible span{ transform:translateX(4px); }
.msb-link-arrow--back:hover span,
.msb-link-arrow--back:focus-visible span{ transform:translateX(-4px); }

/* ── A single profile ───────────────────────────────────────────────────── */
/* Reuses the .msb-person grid: same portrait well, same sticky column, same
   collapse at 900px. Only the section headings below are new, and they borrow
   .msb-person__subheading so CAREER here and ADMISSIONS on the team page are
   demonstrably the same label. */
.msb-profile__section{ margin-top:var(--space-7); }
.msb-profile__section:first-of-type{ margin-top:var(--space-6); }
.msb-profile__back{ margin:var(--space-8) 0 0; }

/* ══ ARTICLES INDEX ════════════════════════════════════════════════════════ */

.msb-filters-group{
  display:flex; flex-direction:column; gap:var(--space-4);
}
.msb-filters{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.msb-filters__item{
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--border-hairline);
  font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-body);
  text-decoration:none;
}
.msb-filters__item:hover,.msb-filters__item:focus-visible{ border-color:var(--border-strong); color:var(--red-600); }
.msb-filters__item.is-active{ background:var(--navy-800); border-color:var(--navy-800); color:var(--text-on-navy); }

/* ══ SINGLE ARTICLE ════════════════════════════════════════════════════════ */

.msb-article__header{ padding-block:var(--space-8) var(--space-7); }
.msb-article__cat{
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}
.msb-band--navy .msb-article__cat{ color:var(--text-accent-on-navy); }
.msb-article__title{
  margin:var(--space-5) 0 0;
  font-family:var(--font-display); font-weight:500;
  font-size:44px; line-height:var(--leading-display);
  color:var(--text-on-navy);
}
.msb-article__meta{
  margin:var(--space-5) 0 0;
  font-size:13px; color:var(--text-on-navy-muted);
}
.msb-article__standfirst{
  margin:0 0 var(--space-7);
  padding-left:22px; border-left:2px solid var(--red-600);
  font-family:var(--font-display); font-size:var(--text-h4); line-height:1.5;
  color:var(--text-heading);
}
.msb-article__disclaimer{
  margin:var(--space-8) 0 0; padding-top:var(--space-5);
  border-top:1px solid var(--border-hairline);
  font-size:13px; line-height:1.6; color:var(--text-muted);
}

.msb-adjacent{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5);
  padding-block:0 var(--space-8);
}
.msb-adjacent__link{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-5);
  border:1px solid var(--border-hairline);
  transition:border-color var(--dur-fast) var(--ease-brand);
}
.msb-adjacent__link:hover,.msb-adjacent__link:focus-visible{ border-color:var(--border-strong); }
.msb-adjacent__link--next{ text-align:right; }
.msb-adjacent__label{
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}
.msb-adjacent__title{
  font-family:var(--font-display); font-size:var(--text-h4); line-height:1.3;
  color:var(--text-heading);
}

/* ══ MATTER ════════════════════════════════════════════════════════════════
   A matter is an article with a citation line and a document set. It reuses
   the article header wholesale rather than introducing a second header shape,
   so the two read as one publication.
   ========================================================================== */

.msb-matter__role{
  margin:var(--space-4) 0 0;
  font-size:var(--text-body-md); color:var(--text-on-navy-muted);
}
.msb-matter__held{ margin:0 0 var(--space-7); }
.msb-matter__heldtitle{
  margin:0 0 var(--space-4);
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
}

/* The citation on a card, between the title and the summary. Not the article
   card's __excerpt colour: it is a reference, so it sits back. */
.msb-card-article__cite{
  font-size:12.5px; line-height:1.5; color:var(--text-muted);
}

/* ══ CLIENT REFERENCES ═════════════════════════════════════════════════════
   Same card chassis as insights. No link state on the card itself — there is
   no single view. The director tag is the only thing that navigates, and it
   filters the archive.
   ========================================================================== */

.msb-card-reference{
  display:flex; flex-direction:column; gap:14px; height:100%;
  padding:28px;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-top:2px solid var(--navy-800);
  box-shadow:var(--shadow-card);
}

.msb-card-reference__title{
  margin:0;
  font-family:var(--font-display); font-weight:500;
  font-size:22px; line-height:1.25;
  color:var(--text-heading);
  text-wrap:balance;
}

.msb-card-reference__quote{
  margin:0;
  font-size:14.5px; line-height:1.6;
  color:var(--text-body);
}
.msb-card-reference__quote p{ margin:0 0 0.8em; }
.msb-card-reference__quote p:last-child{ margin-bottom:0; }

.msb-card-reference__source{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2);
  margin-top:auto;
  padding-top:var(--space-4);
  border-top:1px solid var(--border-hairline);
}

.msb-card-reference__attribution{
  margin:0;
  font-size:14.5px;
  font-weight:var(--weight-medium);
  color:var(--text-heading);
}

.msb-card-reference__director{
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--red-600);
  text-decoration:none;
}
a.msb-card-reference__director:hover,
a.msb-card-reference__director:focus-visible{ color:var(--navy-800); }

.msb-card-reference__meta{
  margin:0;
  font-size:12.5px; line-height:1.5;
  color:var(--text-muted);
}

/* ══ DOCUMENT SET ══════════════════════════════════════════════════════════
   Tier 2: every document listed, sized and downloadable, with no JavaScript
   whatsoever. The in-page reader is layered on top of this and can fail
   completely without taking it with it.

   The 01/02 numerals are the practice-area device reused. They come from the
   loop index, never from storage.
   ========================================================================== */

.msb-docset{ margin:0; padding:0; list-style:none; }

.msb-docset__item{
  display:grid;
  grid-template-columns:auto 64px 1fr auto;
  align-items:center;
  gap:var(--space-5);
  padding:var(--space-5) 0;
  border-top:1px solid var(--border-hairline);
}
.msb-docset__item:last-child{ border-bottom:1px solid var(--border-hairline); }

.msb-docset__numeral{
  font-family:var(--font-display);
  font-size:var(--text-h4);
  color:var(--numeral);
  font-variant-numeric:tabular-nums;
}

.msb-docset__cover{
  width:64px; height:88px;
  object-fit:cover; object-position:top center;
  border:1px solid var(--border-hairline);
  background:var(--surface-page);
}
/* Shown when WordPress could not raster a first page — see msb_pdf_has_cover().
   A deliberate placeholder rather than core's grey document icon, which on this
   design reads as an image that failed to load. */
.msb-docset__cover--blank{
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps);
  color:var(--text-muted);
  background:var(--surface-paper);
}

.msb-docset__body{ display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.msb-docset__label{
  font-family:var(--font-display); font-size:var(--text-h4); line-height:1.3;
  color:var(--text-heading);
  overflow-wrap:anywhere;
}
.msb-docset__facts{ font-size:12.5px; color:var(--text-muted); }

.msb-docset__actions{ display:flex; align-items:center; gap:var(--space-5); }
.msb-docset__download{
  font-size:12.5px; font-weight:var(--weight-caps);
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-brand);
}
.msb-docset__download:hover,.msb-docset__download:focus-visible{ color:var(--red-600); }

.msb-docset__source{
  margin:var(--space-6) 0 0;
  font-size:12.5px; color:var(--text-muted);
}

/* ══ DOCUMENT READER ═══════════════════════════════════════════════════════
   Tier 3. A fixed overlay over the matter page — the site stays visible
   behind a dimmed backdrop and the reader sits in front as a closable window.
   The rail borrows the services rail's vocabulary: sticky column, left border
   that turns red when active.

   An inner scroller rather than page scroll, so a 118-page judgment does not
   turn the overlay into a 90 000-pixel column and the scrollbar means
   something. overscroll-behavior stops scroll chaining inside the pane; body
   scroll is locked while the overlay is open.
   ========================================================================== */

html.msb-reader-open{ overflow:hidden; }

.msb-reader{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-5);
}
.msb-reader[hidden]{ display:none !important; }

.msb-reader__backdrop{
  position:absolute; inset:0;
  background:var(--overlay-backdrop);
}

.msb-reader__panel{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:min(100%,var(--container-max));
  max-height:min(92vh,960px);
  overflow:hidden;
  box-shadow:var(--shadow-lift);
}

.msb-reader__inner{
  display:grid; grid-template-columns:240px 1fr; gap:var(--space-7);
  flex:1; min-height:0; padding:var(--space-6);
  align-items:stretch;
}
.msb-reader:not(:has(.msb-reader__rail)) .msb-reader__inner{ grid-template-columns:1fr; }

.msb-reader__main{ display:flex; flex-direction:column; min-height:0; }

.msb-reader__rail{ position:sticky; top:0; align-self:start; display:flex; flex-direction:column; max-height:100%; overflow-y:auto; }
.msb-reader__railitem{
  display:flex; gap:var(--space-3); align-items:baseline;
  padding:var(--space-3) 0 var(--space-3) var(--space-3);
  border-left:2px solid var(--border-on-navy);
  color:var(--text-on-navy-muted);
  transition:border-color var(--dur-fast) var(--ease-brand), color var(--dur-fast) var(--ease-brand);
}
.msb-reader__railitem:hover,
.msb-reader__railitem:focus-visible,
.msb-reader__railitem.is-active{ border-left-color:var(--red-600); color:var(--text-on-navy); }
.msb-reader__railnum{ font-family:var(--font-display); font-size:var(--text-sm); color:var(--text-accent-on-navy); }
.msb-reader__railtitle{ font-size:13px; line-height:1.4; }

.msb-reader__bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--space-5); flex-wrap:wrap;
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border-on-navy);
}
.msb-reader__title{
  margin:0;
  font-family:var(--font-display); font-weight:500;
  font-size:var(--text-h3); line-height:1.25;
  color:var(--text-on-navy);
}
.msb-reader__tools{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:nowrap; margin-left:auto; }
.msb-reader__close{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25em; padding-left:var(--space-3); padding-right:var(--space-3);
  font-size:20px; line-height:1;
}
.msb-reader__pager{ display:flex; align-items:center; gap:var(--space-2); }
.msb-reader__pagefield{
  display:flex; align-items:center; gap:var(--space-2);
  font-size:12.5px; color:var(--text-on-navy-muted); font-variant-numeric:tabular-nums;
}
.msb-reader__pagelabel{ display:contents; }
.msb-reader__pageinput{
  width:3.5em; padding:var(--space-2) var(--space-2);
  border:1px solid var(--border-on-navy-field);
  background:var(--overlay-on-navy-field);
  color:var(--text-on-navy);
  font-size:12.5px; font-variant-numeric:tabular-nums; text-align:center;
}
.msb-reader__pageinput:focus-visible{ outline:2px solid var(--msb-focus-on-navy); outline-offset:2px; }
.msb-reader__pageinput::-webkit-outer-spin-button,
.msb-reader__pageinput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.msb-reader__pageinput{ -moz-appearance:textfield; }
.msb-reader__pagetotal{ white-space:nowrap; }
.msb-reader__tool{
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border-on-navy-strong);
  background:var(--overlay-on-navy-field);
  color:var(--text-on-navy);
  font-size:12.5px;
  transition:background var(--dur-fast) var(--ease-brand), border-color var(--dur-fast) var(--ease-brand);
}
.msb-reader__tool:hover,.msb-reader__tool:focus-visible{ background:var(--overlay-on-navy-hover); border-color:var(--red-600); }
.msb-reader__tool--text{ font-weight:var(--weight-caps); letter-spacing:0.08em; text-transform:uppercase; }

.msb-reader__pages{
  flex:1; min-height:200px;
  margin-top:var(--space-5);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface-navy);
}

/* Placeholders carry the page's real aspect ratio from the moment the
   catalogue resolves, so the scrollbar is honest before anything has rendered
   and the reader cannot shift layout as pages arrive. This is what keeps CLS
   at zero on a 118-page document. */
.msb-reader__page{
  position:relative;
  aspect-ratio:1 / var(--msb-page-ratio,1.414);
  margin:0 auto var(--space-4);
  max-width:900px;
  background:var(--surface-page);
  box-shadow:var(--shadow-card);
}
.msb-reader__page canvas{ display:block; width:100%; height:100%; }
.msb-reader__page.is-failed::after{
  content:"—";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
}

/* PDF.js text layer: invisible, selectable, and exactly on top of the raster.
   `transparent` is a keyword rather than a colour literal, so the hex gate in
   bin/preflight.sh is satisfied honestly and not by an exception. */
.msb-reader__text{
  position:absolute; inset:0;
  overflow:hidden; opacity:1; line-height:1;
  text-align:initial;
  forced-color-adjust:none;
  transform-origin:0 0;
}
.msb-reader__text span,
.msb-reader__text br{
  position:absolute;
  color:transparent;
  white-space:pre;
  cursor:text;
  transform-origin:0 0;
}
.msb-reader__text ::selection{ background:var(--reader-selection); }

.msb-reader__error{ margin:var(--space-6) 0 0; color:var(--text-on-navy-muted); }

/* ══ CTA BAND ══════════════════════════════════════════════════════════════ */

.msb-cta-band__inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--space-7); flex-wrap:wrap;
}

/* ══ MISC ══════════════════════════════════════════════════════════════════ */

.msb-measure{ max-width:760px; }
.msb-empty{ color:var(--text-muted); font-size:var(--text-body-lg); }

.msb-pagination{ margin-top:var(--space-8); }
.msb-pagination .nav-links{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.msb-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 var(--space-3);
  border:1px solid var(--border-hairline);
  font-size:var(--text-sm); color:var(--text-body);
}
.msb-pagination .page-numbers:hover{ border-color:var(--border-strong); color:var(--red-600); }
.msb-pagination .page-numbers.current{
  background:var(--navy-800); border-color:var(--navy-800); color:var(--text-on-navy);
}

/* ══ PROSE ═════════════════════════════════════════════════════════════════
   The single class governing ALL editor output — ACF WYSIWYG fields and the
   block editor alike. It is the only place editors can emit arbitrary markup. */

.msb-prose{ color:var(--text-body); font-size:var(--text-body-md); line-height:var(--leading-body); }
.msb-prose > * + *{ margin-top:var(--space-5); }
.msb-prose h2{ font-size:var(--text-h2); line-height:var(--leading-heading); margin-top:var(--space-7); }
.msb-prose h3{ font-size:var(--text-h3); line-height:var(--leading-heading); margin-top:var(--space-6); }
.msb-prose p{ margin:0; }
.msb-prose ul,.msb-prose ol{ margin:0; padding-left:var(--space-5); }
.msb-prose li + li{ margin-top:var(--space-2); }
.msb-prose a{ text-decoration:underline; text-underline-offset:2px; }
.msb-prose blockquote{
  margin:0; padding-left:var(--space-5);
  border-left:2px solid var(--red-600);
  font-family:var(--font-display); font-style:italic; font-size:var(--text-h4);
  color:var(--text-heading);
}
.msb-prose img,.msb-prose figure{ margin-inline:0; }
.msb-prose hr{ border:0; border-top:1px solid var(--border-hairline); }
/* Statute names and case citations must never be broken across lines. */
.msb-prose{ hyphens:none; }


/* ══ FOOTER ════════════════════════════════════════════════════════════════ */

.msb-footer{
  font-family:var(--font-body);
  background:var(--surface-navy-deep); color:var(--text-on-navy);
  padding:var(--space-8) 40px var(--space-6);
}
.msb-footer__top{
  display:flex; justify-content:space-between; gap:var(--space-7); flex-wrap:wrap;
  max-width:var(--container-max); margin:0 auto;
}
/* align-items:flex-start, not the default stretch. .msb-wordmark is an
   inline-flex element, so as a flex item here it stretches to the full 300px
   and takes the image element with it — the mark then sits away from the left edge the
   address below it starts at. flex-start makes both shrink to their content, so
   the mark and the address share one left edge. */
.msb-footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; max-width:300px; }
.msb-footer__address{ margin:0; font-size:var(--text-sm); line-height:var(--leading-body); color:var(--text-on-navy-muted); }
.msb-footer__tel{ font-size:13px; color:var(--text-on-navy-muted); }
.msb-footer__directors{ display:flex; gap:56px; flex-wrap:wrap; }
.msb-footer__director{ display:flex; flex-direction:column; gap:var(--space-2); }
.msb-footer__name{
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-on-navy-muted);
}
.msb-footer__role{
  font-size:var(--text-caption); font-weight:var(--weight-caps);
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-accent-on-navy);
}
.msb-footer__line{ font-size:13px; color:var(--text-on-navy-muted); }
.msb-footer a.msb-footer__line{ color:var(--text-on-navy-muted); }
.msb-footer a.msb-footer__line:hover{ color:var(--text-on-navy); }
.msb-footer__baseline{
  max-width:var(--container-max); margin:var(--space-7) auto 0;
  padding-top:20px; border-top:1px solid var(--border-on-navy);
  display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  font-size:11px; font-weight:var(--weight-caps);
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-on-navy-muted);
}


/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */

@media (max-width:1120px){
  /* 4 -> 2, deliberately skipping 3: 4->2 keeps the numeral rhythm even
     (01/02 over 03/04), whereas 4->3 orphans 04 in a row of its own, which
     reads as a mistake in a design whose entire device is the numbered set. */
  .msb-grid--practices{ grid-template-columns:repeat(2,1fr); }
  .msb-hero__content{ max-width:min(620px,66%); }
  .msb-hero__scrim{
    background:linear-gradient(90deg,
      rgba(var(--scrim-navy),0.95) 0%,
      rgba(var(--scrim-navy),0.93) 40%,
      rgba(var(--scrim-navy),0.80) 52%,
      rgba(var(--scrim-navy),0.34) 62%,
      rgba(var(--scrim-navy),0)    70%);
  }
}

@media (max-width:1000px){
  .msb-footer__directors{ gap:var(--space-6); }

  /* The sticky sidebar becomes a rail pinned under the header. Negative inline
     margin lets it bleed to the viewport edges so the scroll affordance is
     obvious, while the items stay aligned to the container. */
  .msb-services{ grid-template-columns:1fr; gap:var(--space-6); }
  .msb-services__nav{
    position:sticky; top:var(--msb-header-h); z-index:5;
    flex-direction:row; gap:var(--space-1);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:var(--surface-paper);
    border-bottom:1px solid var(--border-hairline);
    margin-inline:calc(var(--container-pad) * -1);
    padding-inline:var(--container-pad);
  }
  .msb-services__navlink{
    flex:none; white-space:nowrap;
    border-left:0; border-bottom:2px solid transparent;
    padding:var(--space-3) var(--space-4);
  }
  .msb-services__navlink:hover,
  .msb-services__navlink:focus-visible,
  .msb-services__navlink.is-active{ border-left-color:transparent; border-bottom-color:var(--red-600); }
  .msb-services__body{ gap:var(--space-8); }
}

@media (max-width:900px){
  .msb-split--overview,
  .msb-split--contact{ grid-template-columns:1fr; align-items:start; gap:var(--space-6); }
  .msb-split--contact{ gap:40px; }

  /* Three directors in a 2-col grid leaves a stretched widow card, which looks
     broken against a 260px photo well. Go straight to one column. */
  .msb-grid--team{ grid-template-columns:1fr; }

  .msb-headrow{ flex-direction:column; align-items:flex-start; gap:var(--space-5); }

  /* The horizontal scrim stops working here — its clear zone is off-screen.
     Rotate it to vertical over the whole image. */
  .msb-hero__scrim{
    background:linear-gradient(180deg,
      rgba(var(--scrim-navy),0.88) 0%,
      rgba(var(--scrim-navy),0.94) 100%);
  }
  .msb-hero__img{ object-position:center 30%; }
  .msb-hero__content{ max-width:620px; }
  .msb-hero__inner{ padding-block:96px 80px; }

  .msb-heading__title{ font-size:var(--text-h1); }

  /* The alternation is a desktop rhythm device. Preserving it here would put
     every second portrait BELOW its own biography, which reads as a bug. */
  .msb-person{ grid-template-columns:1fr; gap:var(--space-6); }
  .msb-person--flip .msb-person__media{ order:0; }
  .msb-person__media{ position:static; }
  .msb-person__well { height:340px; }
  .msb-person__photo{ height:320px; }

  .msb-article__title{ font-size:var(--text-h1); }
  .msb-adjacent{ grid-template-columns:1fr; }
  .msb-adjacent__link--next{ text-align:left; }
  .msb-cta-band__inner{ flex-direction:column; align-items:flex-start; gap:var(--space-5); }
}

@media (max-width:640px){
  /* Titles off, numerals only. Ellipsising four legal practice-area names in a
     scrolling rail reads worse than showing the brand device on its own. */
  .msb-services__navtitle{ display:none; }
  .msb-services__navnum { font-size:var(--text-sm); }
  .msb-services__navlink{ padding:var(--space-3) var(--space-5); }

  .msb-practice__title { font-size:var(--text-h3); }
  .msb-practice__summary{ font-size:var(--text-body-md); }
  .msb-person__name    { font-size:var(--text-h3); }
  .msb-person__well    { height:280px; }
  .msb-person__photo   { height:260px; }

  .msb-article__title     { font-size:clamp(28px,6.5vw,44px); }
  .msb-article__standfirst{ padding-left:16px; }
  .msb-section{ padding-block:var(--space-7); }
  .msb-grid--practices{ grid-template-columns:1fr; }
  .msb-form__row{ grid-template-columns:1fr; }

  .msb-hero__title{ font-size:clamp(28px,7vw,52px); }
  .msb-hero__lead { font-size:17px; }
  .msb-hero__actions{ flex-direction:column; align-items:stretch; width:100%; }
  .msb-hero__actions .msb-btn{ justify-content:center; }

  .msb-card-director__well { height:220px; }
  .msb-card-director__photo{ height:200px; }

  /* A 240px rail plus a readable page will not fit. The rail goes horizontal
     above the viewport, matching how the services rail behaves at this width,
     and the pane shortens so the toolbar and the page are on screen together. */
  .msb-reader{ padding:var(--space-3); }
  .msb-reader__inner{ grid-template-columns:1fr; gap:var(--space-5); padding:var(--space-5); }
  .msb-reader__panel{ max-height:96vh; }
  .msb-reader__rail{ position:static; flex-direction:row; overflow-x:auto; gap:var(--space-4); max-height:none; }
  .msb-reader__railitem{ border-left:0; border-bottom:2px solid var(--border-on-navy); padding:var(--space-2) 0; white-space:nowrap; }
  .msb-reader__railitem:hover,
  .msb-reader__railitem:focus-visible,
  .msb-reader__railitem.is-active{ border-bottom-color:var(--red-600); }
  .msb-reader__pages{ min-height:160px; }
  .msb-reader__bar{ align-items:flex-start; }

  /* Four columns will not fit a phone. The cover goes — it is decoration, and
     the label and the actions are the two things anyone came for. The numeral
     stays: it is the brand device, and it is 20px wide. */
  .msb-docset__item{ grid-template-columns:auto 1fr; gap:var(--space-3) var(--space-4); }
  .msb-docset__cover{ display:none; }
  .msb-docset__actions{ grid-column:2; justify-content:flex-start; }

  .msb-footer{ padding:var(--space-7) var(--container-pad) 28px; }
  .msb-footer__directors{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
  .msb-footer__baseline{ flex-direction:column; gap:var(--space-2); }
}

@media (max-width:400px){
  .msb-heading__title{ font-size:var(--text-h2); }
  .msb-footer__directors{ grid-template-columns:1fr; }
}


/* ══ PRINT ═════════════════════════════════════════════════════════════════
   Law firms print pages. Cheap, and disproportionate to perceived quality. */

@media print{
  /* The reader is a scrolling pane of canvases. Printing it yields a handful
     of blank slabs and then stops, so it goes — the document list above it
     prints properly, and the PDF is the thing to print anyway. */
  .msb-nav,.msb-footer,.msb-hero__media,.msb-hero__scrim,.msb-form,.msb-skip,.msb-reader{ display:none !important; }
  .msb-band--navy,.msb-band--navy-deep,.msb-hero{ background:var(--surface-page) !important; color:var(--text-heading) !important; }
  .msb-hero__title,.msb-hero__lead,.msb-heading--on-dark .msb-heading__title,.msb-heading--on-dark .msb-heading__lead{ color:var(--text-heading) !important; }
  .js .msb-reveal{ opacity:1 !important; transform:none !important; }
  .msb-card-practice,.msb-card-article,.msb-card-director{ box-shadow:none !important; break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}