/* MY TRIAL LAWYER — the site's stylesheet, grown from the design the client chose ("Intake",
 * round 1 candidate 2). Every rule the homepage needed is unchanged; the inner pages add their
 * components at the end in the same register.
 *
 * MOBILE FIRST. Every rule below is the 390 case; the wider arrangements are the adaptation.
 *
 * TYPE: Oswald condensed for display, IBM Plex Sans for body. Two families, high contrast —
 * a condensed display face beside a neutral grotesque is what gives this candidate its
 * dispatch temperament, and it is the fastest way to tell it apart from the other two.
 *
 * GROUND: light, with THREE REAL DARK BANDS — the coverage selector, the case carousel and the
 * intake router. The dark bands are exactly the interactive pieces, so the interaction reads as
 * the page's spine rather than as decoration scattered through it.
 */

:root {
  --ink: #14161a;
  --ink-2: #43474e;
  --ink-3: #64686f;          /* 5.4:1 on paper */
  --paper: #ffffff;
  --paper-2: #f4f5f6;
  --line: #e3e5e8;
  --line-2: #cfd2d7;
  --dark: #14161a;
  --dark-2: #1d2026;
  /* The client's red, measured off their own site. --red clears 4.5 on white for body-sized
     text; --red-lg is the unmodified brand red and is display-only, 24px and up. */
  --red: #d4020a;
  --red-lg: #ff020c;
  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --disp: "Oswald", "Arial Narrow", "IBM Plex Sans", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --wrap: 1180px;
  --pad: 20px;
  --band-y: 44px;   /* 56px until 16 Sep 2026 — the client: the spacing is too far apart */
}
/* [client] 16 Sep 2026: "The bottom spacing is too far the client wants it closer but not that
   close … if this is present then we change all of it." One token, so it lands on all 33 pages at
   once. 92px to 72px at desktop and 56px to 44px on a phone — about a fifth off each, which is
   closer without becoming cramped on the short pages. */
@media (min-width: 900px) { :root { --pad: 40px; --band-y: 72px } }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.62 var(--sans); letter-spacing: -.003em;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block }
a { color: inherit }
h1, h2, h3 { font-family: var(--disp); font-weight: 500; letter-spacing: .005em; margin: 0; line-height: 1.08 }
h1 { font-size: clamp(38px, 8.4vw, 76px); text-transform: uppercase }
h2 { font-size: clamp(27px, 4.4vw, 42px); text-transform: uppercase }
h3 { font-size: clamp(19px, 2.4vw, 24px) }
p { margin: 0 0 14px }
ul { margin: 0; padding: 0; list-style: none }

.skip { position: absolute; left: -9999px }
.skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--ink); color: #fff; padding: 12px 18px }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) }

/* FOCUS IS VISIBLE EVERYWHERE. A removed outline is a keyboard user locked out. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--red); outline-offset: 2px;
}

/* ---- buttons -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 2px solid var(--red); background: var(--red);
  color: #fff; text-decoration: none; cursor: pointer;
  font: 500 15px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: #b00208; border-color: #b00208 }
.btn:active { transform: translateY(1px) }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line-2) }
.btn.ghost:hover { border-color: var(--ink); background: none }
.btn.big { min-height: 56px; padding: 0 28px; font-size: 16px }
.dark .btn.ghost { color: #fff; border-color: rgba(255,255,255,.5) }
.dark .btn.ghost:hover { border-color: #fff }

.inline-cta {
  display: inline-block; margin-top: 6px; color: var(--red); text-decoration: none;
  font: 500 14px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid transparent; padding-bottom: 3px;
  transition: border-color .2s var(--ease);
}
.inline-cta:hover { border-bottom-color: var(--red) }

/* ---- strip + nav ----------------------------------------------------------------------- */
.strip { background: var(--dark); color: rgba(255,255,255,.9) }
.strip .wrap { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding-block: 9px; text-align: center }
.strip span { font: 400 13px/1.35 var(--sans) }
.strip-tel { font: 500 14px/1 var(--disp); letter-spacing: .07em; color: #fff; text-decoration: none }
.strip-tel:hover { color: var(--red-lg) }

/* TWO ROWS SINCE 16 SEP 2026 — a centred wordmark over the navigation, the structure the client's
   old site had. Only the BAR sticks: both rows stuck would take about 200px of the screen. */
/* THE HEADER IS THE STICKY ELEMENT, at a negative offset the height of the logo row. That pulls the
   logo above the screen as the page scrolls and leaves the bar resting at the top — the big logo on
   arrival, the slim bar thereafter. The bar cannot do this itself: a sticky element only travels
   inside its parent's box, and the header is only as tall as its own two rows, so a sticky bar simply
   left with it. Each offset is that step's logo row: 20 + 16 of padding plus the wordmark. */
.nav { position: sticky; top: -114px; z-index: 60; background: var(--paper) }
@media (max-width: 380px) { .nav { top: -108px } }
@media (min-width: 1000px) { .nav { top: -132px } }
@media (min-width: 1280px) { .nav { top: -140px } }
.nav-logo { display: flex; justify-content: center; padding-block: 20px 16px }
/* relative, not sticky: the mobile menu is dropped from it and needs it as a containing block */
.nav-bar { position: relative; background: var(--paper);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.nav-bar .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px }
.nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto }
/* THE PILL IS OUT OF FLOW ABOVE 1200, SO ITS ROOM HAS TO BE RESERVED — 18 Sep 2026. It is absolutely
   positioned at the container's outer edge so the rest of the row re-centres without it, which means
   nothing pushes the consultation button clear of it. Measured: 124px wide, intruding 84px into the
   bar's content area at 1280–1600 and 94px at 1200, where the gutter hits its 20px floor. 110px is
   the worst case plus the row's own 14px gap. Adding a menu item moves .nav-right right; without
   this the button ends up underneath the pill, which is what adding "Where we serve" did. */
@media (min-width: 1200px) { .nav-right { padding-right: 110px } }
/* From 1000px the bar centres as ONE group — the menu, the number, the button and the flag together.
   A three-column grid with the menu in the middle was tried first and does not centre it: the
   right-hand group is about 400px wide, so it outgrows its share and pushes the menu left, leaving
   330px of space on one side and 170px on the other. Centring the whole row is balanced and is what
   sitting under a centred logo asks for. */
@media (min-width: 1000px) {
  .nav-bar .wrap { justify-content: center; gap: 22px }
  .nav-right { margin-left: 0 }
  /* THE FLAG TO THE CORNER — 16 Sep 2026, the client: "can the toggle be at the far corner?" Taken
     out of the centred group and pinned to the container's right edge, the same edge the page's
     content lines up on, using the offset the flag already used before it joined the bar. Out of
     flow, so the menu, the number and the button re-centre without it. Below 1000px it stays in the
     row beside the menu button, which is already the corner there. */
  /* the container's OUTER edge, not its content edge — the content edge is 40px further in, which is
     40px short of the corner and 40px of clearance this pill needs to keep its word. The 20px floor
     stops it touching the side of the screen on a narrow desktop. */
  .langnav { position: absolute; top: 50%; transform: translateY(-50%);
    right: max(20px, (100% - var(--wrap)) / 2) }
}
.foot-lang { margin-left: 10px; color: inherit; text-decoration: underline; text-underline-offset: 3px }

/* ---- the language switch: a flag pill fixed at the right edge (language-switch/flag-pill) ---------
   Not a menu word. A visitor who does not read the page's language needs a control they see without
   looking for it, so it stays in view on every screen: a paper pill with the OTHER language's flag and
   name, at the lower right on a wide screen and above the sticky call bar on a phone. Below the modals
   (200) and the drawer (60/70) in the stack, so it never covers a dialog. */
/* THE LANGUAGE SWITCH (language-switch/flag-pill). Not a menu word: a visitor who does not read the
   page's language needs a control they see without looking for it.

   It lives inside <header class="nav"> but OUTSIDE the .wrap flex row. That is deliberate. In the row
   it overflows — the row's last item ends exactly on the container's content edge at every width, so
   there is no space in it, and adding the pill made the page scroll sideways at 360, 390, 1000 and
   1200. Outside the row it takes no width from anything. And because .nav is position:sticky it is a
   containing block, so the flag travels with the bar instead of drifting below it as the strip
   scrolls away.

   WIDE: in the header's own corner, level with the bar. Room beside the nav is (vw - --wrap) / 2 +
   --pad, which is 50px at 1200, 133 at 1366, 170 at 1440 and 410 at 1920. The flag alone needs about
   70 with its margin and the full pill about 144, hence the two thresholds below.

   NARROW: floating just under the header, right edge on the container's edge so it lines up with the
   Free consultation button. The strip is 36px and the nav 77px at 390 and 87px from 701px, so the
   header ends at 113 and 123 and these clear it by 12px. Re-measure if either changes height.
   100% not 100vw — a fixed element's percentage excludes the scrollbar, which is the basis .wrap is
   laid out on. It moved off the bottom-right corner on 14 Sep 2026 when the client's live-chat
   widget took that corner and covered it. See HANDOVER-NOTES.md, Round 7. */
/* IN THE BAR SINCE 16 SEP 2026, not floating. It was fixed at 125px from the top of the screen, an
   offset measured against the old one-row header; the header is two rows now and the pill landed on
   the menu button. Chasing it with a new offset cannot work, because at the top of the page it must
   clear a 210px header and after a scroll only the 64px bar is there. In the bar it travels with the
   bar, which is the sticky element, and cannot overlap anything in either state. */
.langnav { display: flex; align-items: center }
/* ON A PHONE IT IS BACK IN THE BAR, BESIDE THE MENU BUTTON — 17 Sep 2026.

   It floated there for a day. On 16 Sep the client asked for it by the live chat ("should be here,
   align with the chat") and it was pinned 20px from the right and 92px from the bottom: right edges
   flush with Tawk's launcher, clearing the launcher by 12px and the 58px call bar as well.

   THAT CORNER IS NOT OURS. Tawk opens with a greeting balloon — a "We Are Here!" bubble with its own
   close button — which hangs to the LEFT of the launcher and lands exactly on 92px from the bottom.
   The pill and the balloon overlapped, on top of the call bar, three controls deep in one corner.
   Then the menu grew to thirteen practice areas and the open list reached past 92px too, so the pill
   covered the last route in it.

   Both are the same fault, and this stylesheet already wrote down the answer when the pill was
   colliding with the MENU button in Round 11: an offset measured against something we do not control
   cannot be made safe by picking a different offset. Tawk's balloon is theirs, it is sized by them
   and it can change without us. In the bar the pill travels with the sticky bar, sits in the corner
   the client asked for, and cannot overlap anything in any state — which is also what the 1000px
   rule above has always said would happen below it: "it stays in the row beside the menu button,
   which is already the corner there."

   Nothing more is needed here: .langnav is a flex item of .nav-right by default, and below 1000px
   the menu, the telephone number and the button are hidden, so the row is the pill and MENU. */
.langfab { display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 16px 0 12px; background: var(--paper); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 999px;
  font: 500 14px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap }
.langfab:hover, .langfab:focus-visible { border-color: var(--red); color: var(--red) }
.langfab svg { width: 28px; height: 20px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(20,22,26,.12) }

/* in the bar it needs no shadow to lift it off the page, and the row is tighter than a floating pill */
.langfab { min-height: 40px; box-shadow: none }
/* THE WORD STAYS — the client, on the bare glyph: it should read like the second image, a pill that
   sits in the corner. The one exception is 1000 to 1199, where the bar carries the full menu and the
   button and there is no room for 124px of pill however it is anchored. */
@media (min-width: 1000px) and (max-width: 1199px) { .langfab { padding: 0 10px } .langfab span { display: none } }
@media (prefers-reduced-motion: no-preference) { .langfab { transition: border-color .2s var(--ease), color .2s var(--ease) } }
.brand { display: block; flex: 0 0 auto }
.brand img { max-width: none }
/* THE WORDMARK, ALONE ON ITS OWN ROW. 44px until 11 Sep, 52px, then 62px, and now it is not sharing
   the row with anything: the width available to it is the whole container, so it is set by what looks
   right rather than by what the menu leaves over. 78px at 390 is 323px of a 350px row. */
.brand img { height: 78px; width: auto }
/* a 360px phone has 320px of row; 72px is 298px of it */
@media (max-width: 380px) { .brand img { height: 72px } }
/* 16px rather than 22px since 16 Sep 2026: five gaps between six links, so this returns 30px to
   the row and is what lets the wordmark grow without the menu wrapping. */
.menu { display: none; gap: 16px }
.menu a { text-decoration: none; font: 500 14px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap }
.menu a:hover { color: var(--red) }
.nav-tel { display: none; font: 500 15px/1 var(--disp); letter-spacing: .05em; text-decoration: none; white-space: nowrap }
/* Between 1000 and 1199px the row gives up the number in both languages (it is in the strip above and
   in the hero) and tightens the menu, so the wordmark keeps its shape: before 11 Sep 2026 the brand
   was a flex item that shrank, and the logo rendered squeezed to 104px wide at 1000px. The Spanish
   labels run longer still and drop a point size here rather than wrap onto two lines. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav-tel { display: none !important }
  .menu { gap: 14px }
  html[lang="es"] .menu a { font-size: 12.5px; letter-spacing: .03em }
}
/* from 1200px the Spanish row still runs 60px past the container with the number in it, so Spanish
   gives the number up at every desktop width; English keeps it */
@media (min-width: 1200px) { html[lang="es"] .nav-tel { display: none !important } }
.nav .btn { display: none }
.nav-toggle {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); background: none;
  font: 500 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
/* dropped from the BAR, which is the sticky element now — anchored to .nav it would be left at the
   top of the page the moment the bar detached and scrolled with the visitor. */
.nav.open .nav-bar .menu { display: flex; position: absolute; inset: 100% 0 auto; flex-direction: column;
  background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px var(--pad) 20px; gap: 14px }
@media (min-width: 1000px) {
  .menu, .nav-tel, .nav .btn { display: flex }
  .nav-toggle { display: none }
}
/* nothing shares the row with it any more, so the flag no longer caps it */
@media (min-width: 1000px) { .brand img { height: 96px } }
@media (min-width: 1280px) { .brand img { height: 104px } }

/* ---- hero: full-bleed photograph, dark veil, panel to the right ------------------------- */
.hero { position: relative; background: var(--dark); color: #fff; isolation: isolate }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: 0 }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  /* LIGHTENED 16 SEP 2026 — the client: "too dark for the hero, need it lighter that the image will
     be much more visible but not too much that we cant see the white fonts". It was .90 / .74 / .92.
     This is the lightest it goes: contrast-check reads the real pixels behind every piece of text on
     all 39 pages, and one notch further (.80 / .60 / .84) puts the eyebrow under its floor on three
     pages. The white H1 was never the constraint — at 64px it clears easily. The 12px eyebrow was,
     and the settlement figure in the call panel second; both moved with this. */
  background: linear-gradient(180deg, rgba(12,14,17,.82) 0%, rgba(12,14,17,.64) 55%, rgba(12,14,17,.86) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-block: 52px 44px }
.hero-grid { display: grid; gap: 30px }
.eyebrow { font: 500 12px/1.4 var(--disp); letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: 0 0 14px }
.hero h1 { color: #fff; margin-bottom: 22px }
.hero .acts { display: flex; flex-direction: column; gap: 10px }
.hero-note { margin: 16px 0 0; font-size: 14.5px; color: rgba(255,255,255,.78) }

/* A DARK SCRIM, NOT A LIGHT ONE — 16 Sep 2026. The panel used to lighten whatever photograph was
   behind it by 7%, which was fine over the courtroom picture and is not over the one that replaced
   it: the red $2.2 million figure measured 2:1 against the lighter part of the new photograph on the
   Spanish homepage, where the longer word reaches further across it. A panel carrying the page's
   most important number must not depend on which picture is behind it, so it now supplies its own
   ground. */
/* .56, deepened from .46 on 16 Sep 2026. The panel supplies its own ground precisely so the
   photograph behind it does not have to stay dark — which is what let the veil lighten. At .46 the
   $2.2 million figure landed on exactly 3:1 against a 3:1 floor. */
.call-panel { background: rgba(10,12,16,.56); border: 1px solid rgba(255,255,255,.18); padding: 22px 20px 24px }
.call-panel h2 { font-size: 19px; color: #fff; margin-bottom: 14px; letter-spacing: .1em }
.call-panel ul { display: grid; gap: 10px; margin-bottom: 18px }
.call-panel li { padding-left: 22px; position: relative; font-size: 14.5px; color: rgba(255,255,255,.88); line-height: 1.5 }
.call-panel li::before { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 2px; background: var(--red-lg) }
.panel-tel { display: block; font: 500 clamp(21px, 3.4vw, 27px)/1 var(--disp); letter-spacing: .04em; color: #fff; text-decoration: none }
.panel-tel:hover { color: var(--red-lg) }
@media (min-width: 900px) {
  .hero .wrap { padding-block: 86px 78px }
  .hero-grid { grid-template-columns: 1.55fr .95fr; gap: 54px; align-items: end }
  .hero .acts { flex-direction: row }
}

/* ---- bands ------------------------------------------------------------------------------ */
.band { padding-block: var(--band-y); position: relative; isolation: isolate }
.band.dark { background: var(--dark); color: #fff }
.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0 }
.band-veil { position: absolute; inset: 0; z-index: 1; background: rgba(15,17,21,.90) }
.band > .wrap { position: relative; z-index: 2 }
.band.dark h2, .band.dark h3 { color: #fff }
.band.dark p { color: rgba(255,255,255,.84) }

.sec-head { max-width: 62ch; margin-bottom: 30px }
.sec-head h2 { margin-bottom: 12px }
.sec-head p { color: var(--ink-2) }
.band.dark .sec-head p { color: rgba(255,255,255,.8) }

/* THE OPENING PARAGRAPH FILLS ITS BAND — 16 Sep 2026, the client: the right side should line up like
   every section, and not by justifying it. Every other band's content reaches the container's content
   edge; this one stopped 277px short because of a 74ch cap, so the cap is gone.

   THE TYPE STAYS AT 17 TO 20px, which is where it was before, on the client's instruction of 17 Sep:
   "why is this bigger? keep the same size please". It had been raised to 28px for one round because
   the two together — full width and the original size — put the line at about 111 characters at
   1200px and wider, where the clean floor asks for 55 to 80. The client has the width and the size
   they asked for and the long line is the price; it is theirs, and it is written here rather than
   left to be rediscovered as a defect.

   If it is ever revisited, two columns at this size give roughly 54 characters each and keep both. */
.lede p { font-size: clamp(17px, 2vw, 20px); line-height: 1.62; color: var(--ink-2); max-width: none }
/* the document's orphan heading over the opening paragraph (two pages, 1 Oct 2026) */
.lede h2 { margin: 28px 0 0 }

.split { display: grid; gap: 28px }
.split h2 { margin-bottom: 14px }
.split p { color: var(--ink-2); max-width: 60ch }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start }
  .split.reverse > *:first-child { order: 2 } .split.reverse > *:last-child { order: 1 }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips a {
  display: block; padding: 12px 17px; text-decoration: none; border: 1px solid var(--line-2);
  font: 500 14px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.chips a:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px) }

/* ---- the coverage selector: THE SIGNATURE ----------------------------------------------- */
.sel { display: grid; gap: 22px }
.sel-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px }
.sel-choices legend { padding: 0; margin-bottom: 12px; font: 500 12px/1 var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--red-lg) }
.sel-choice input { position: absolute; opacity: 0; width: 0; height: 0 }
.sel-choice label {
  display: grid; gap: 3px; padding: 15px 17px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.sel-choice label b { font: 500 16px/1.25 var(--disp); letter-spacing: .04em; color: #fff }
.sel-choice label span { font-size: 13.5px; color: rgba(255,255,255,.7) }
.sel-choice label:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.4) }
.sel-choice input:checked + label { background: var(--red); border-color: var(--red) }
.sel-choice input:checked + label span { color: rgba(255,255,255,.9) }
.sel-choice input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px }

.sel-out { border: 1px solid rgba(255,255,255,.22); padding: 24px 20px 26px; background: rgba(255,255,255,.04) }
.sel-fig {
  font: 500 clamp(30px, 6vw, 46px)/1 var(--disp); letter-spacing: .01em;
  color: var(--red-lg); margin: 0 0 8px;
}
.sel-panel h3 { margin-bottom: 10px }
.sel-panel p { font-size: 15px }
.sel-panel .btn { margin-top: 8px }
.sel-note { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.72) }
.sel-note a { color: #fff }
@media (min-width: 900px) { .sel { grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: start } }

/* ---- the carousel ----------------------------------------------------------------------- */
.msb-stage { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--dark-2) }
.msb-frame { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none }
.msb-frame.on { opacity: 1; pointer-events: auto }
.msb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
/* The frame on show MOVES for the whole of its hold, linear so the motion never settles: a 20% push-in
   with a drift up and left, 6 seconds, then the cross-fade. The user, 11 Sep 2026, on this band: "This
   shouldn't stop moving", and again the next day when a 6% zoom and then an object-position pan both
   read as a frozen frame: "Needs to be moving always … it freezes for like 5 seconds then it moves." A
   zoom grows the image's box past the stage; the stage clips it (overflow: hidden) and the image carries
   data-fit-overflow="clipped" so the viewport-fit check records it as declared clipped media rather than
   as overflow. The hold is 6s here and in site.js (HOLD); change both together. */
.msb-frame.on .msb-img { animation: msb-drift 6s linear forwards }
@keyframes msb-drift { from { transform: scale(1) translate(0, 0) } to { transform: scale(1.2) translate(-3%, -2%) } }
/* Scrim measured against the BRIGHTEST frame in the set — six photographs under one type
   treatment means the worst case decides legibility. case-rideshare is the bright one. */
.msb-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,15,.30) 0%, rgba(10,12,15,.62) 42%, rgba(10,12,15,.93) 100%) }
.msb-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 26px; display: grid; gap: 9px }
.msb-panel h3 { color: #fff }
.msb-panel p { font-size: 15px; color: rgba(255,255,255,.87); max-width: 46ch; margin: 0 }
.msb-cta { font: 500 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 2px solid var(--red-lg); padding-bottom: 3px; justify-self: start }
.msb-chapters { display: flex; gap: 4px; margin-top: 12px }
.msb-chapters button { flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; display: grid; gap: 7px; text-align: left; color: rgba(255,255,255,.6); font: 500 11.5px/1.3 var(--disp); letter-spacing: .05em; text-transform: uppercase }
.msb-chapters button[aria-selected="true"] { color: #fff }
.msb-chapters .lab { display: none }
.msb-chapters .pb { display: block; height: 3px; background: rgba(255,255,255,.25); position: relative }
.msb-chapters .pb i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red-lg) }
.msb-chapters button[aria-selected="true"] .pb i { animation: msb-fill 6s linear forwards }
@keyframes msb-fill { from { width: 0 } to { width: 100% } }
/* The bar holds the position readout alone now — the pause control is gone, because the slide
     labels above it already advance the band. */
.msb-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px }
.msb-pause { min-height: 44px; padding: 0 16px; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; cursor: pointer; font: 500 12.5px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase }
.msb-pause:hover { border-color: #fff }
.msb-count { margin-left: 0; font: 500 13px/1 var(--disp); letter-spacing: .1em; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums }
.msb.paused .msb-frame.on .msb-img, .msb.paused .msb-chapters button[aria-selected="true"] .pb i { animation-play-state: paused }
@media (min-width: 800px) {
  .msb-stage { aspect-ratio: 16/7 }
  .msb-panel { right: auto; top: 0; bottom: 0; width: min(54%, 560px); align-content: center; padding: 34px 38px }
  .msb-scrim { background: linear-gradient(90deg, rgba(10,12,15,.93) 0 40%, rgba(10,12,15,.55) 70%, rgba(10,12,15,.20) 100%) }
  .msb-chapters .lab { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
}

/* ---- figure rail + proof ---------------------------------------------------------------- */
.figrail { display: grid; gap: 2px }
.figrail li { padding: 18px 20px; background: var(--paper-2); border-left: 3px solid var(--red); display: grid; gap: 4px }
.figrail b { font: 500 clamp(29px, 5vw, 40px)/1 var(--disp); letter-spacing: .01em; font-variant-numeric: tabular-nums }
.figrail span { font-size: 13.5px; color: var(--ink-3); line-height: 1.5 }

.proof { display: grid; gap: 2px; margin-bottom: 22px }
.proof li { padding: 22px 22px; background: var(--dark); color: #fff; display: grid; gap: 5px }
.proof b { font: 500 clamp(32px, 5.5vw, 46px)/1 var(--disp); color: var(--red-lg); font-variant-numeric: tabular-nums }
.proof span { font-size: 14px; color: rgba(255,255,255,.82) }
.proof-note { font-size: 14px; color: var(--ink-3); max-width: 72ch }
@media (min-width: 760px) { .proof, .figrail { grid-template-columns: repeat(3, 1fr) } }

/* ---- the intake router ------------------------------------------------------------------ */
.router { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); padding: 22px 20px 24px }
.router-progress { height: 4px; background: rgba(255,255,255,.2); margin-bottom: 12px }
.router-progress i { display: block; height: 4px; background: var(--red-lg); transition: width .35s var(--ease) }
.router-count { font: 500 12px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 18px }
.rstep { border: 0; padding: 0; margin: 0 0 18px }
.rstep legend { padding: 0; margin-bottom: 14px; font-family: var(--disp); font-size: clamp(20px, 3vw, 26px); font-weight: 500; color: #fff; text-transform: uppercase; letter-spacing: .03em }
.rchoices { display: grid; gap: 8px }
.rchoice input { position: absolute; opacity: 0; width: 0; height: 0 }
.rchoice label { display: block; padding: 14px 17px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.03); cursor: pointer; font: 500 15px/1.2 var(--disp); letter-spacing: .04em; color: #fff; transition: background .2s var(--ease), border-color .2s var(--ease) }
.rchoice label:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45) }
.rchoice input:checked + label { background: var(--red); border-color: var(--red) }
.rchoice input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px }
.router-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px }
.router-tel { color: rgba(255,255,255,.8); font-size: 14px; margin-left: auto }
@media (min-width: 640px) { .rchoices { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 980px) { .rstep[data-step="1"] .rchoices { grid-template-columns: repeat(5, 1fr) } }

/* ---- fields ----------------------------------------------------------------------------- */
.row2 { display: grid; gap: 14px }
@media (min-width: 620px) { .row2 { grid-template-columns: 1fr 1fr } }
.field { display: grid; gap: 6px; margin-bottom: 14px }
.field label { font: 500 12.5px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2) }
.dark .field label, .router .field label { color: rgba(255,255,255,.8) }
.field input, .field textarea, .field select {
  /* 16px, because anything smaller makes iOS Safari zoom the page on focus and a visitor reads
     that as a bug. */
  font: 400 16px/1.5 var(--sans); padding: 13px 14px; width: 100%;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(212,2,10,.18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); background: #fff6f6 }
.err { margin: 0; font-size: 13px; color: var(--red); min-height: 0 }
.dark .err, .router .err { color: #ff7a80 }
.hp { position: absolute; left: -9999px }      /* off-screen, NEVER display:none */
.form-note { font-size: 13px; color: var(--ink-3); margin-top: 10px }
.form-status { margin-top: 10px; font-size: 14px; min-height: 0 }

.nap { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--line) }
.nap li { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px }
.nap li > span:first-child { flex: 0 0 82px; font: 500 12px/1.5 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) }

/* ---- faq -------------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line) }
.faq-item { border-bottom: 1px solid var(--line) }
.faq-q { width: 100%; display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
  background: none; border: 0; padding: 20px 0; cursor: pointer; text-align: left;
  font: 500 clamp(16px, 2vw, 19px)/1.35 var(--disp); letter-spacing: .02em; color: var(--ink) }
.faq-q:hover { color: var(--red) }
.faq-q i { flex: 0 0 18px; height: 18px; position: relative; margin-top: 4px }
.faq-q i::before, .faq-q i::after { content: ""; position: absolute; background: var(--red); transition: transform .28s var(--ease) }
.faq-q i::before { inset: 8px 0 8px 0; height: 2px }
.faq-q i::after { inset: 0 8px 0 8px; width: 2px }
.faq-item.open .faq-q i::after { transform: scaleY(0) }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease) }
.faq-item.open .faq-a { grid-template-rows: 1fr }
.faq-a > div { overflow: hidden }
.faq-a p { color: var(--ink-2); max-width: 76ch; padding-bottom: 4px }
.faq-cta { display: inline-block; margin-bottom: 20px; color: var(--red); text-decoration: none; font: 500 13px/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid transparent; padding-bottom: 3px }
.faq-cta:hover { border-bottom-color: var(--red) }

/* ---- areas ------------------------------------------------------------------------------ */
/* THE FUNCTIONAL MAP. Since 11 Sep 2026 it is the whole of Florida — the client: "Map must show all
   major metro areas of Florida" — drawn from Census boundary data in content/geo.mjs, with a marker
   per metro and a button per metro beside it; selecting either one writes the metro into the router
   and moves the visitor there. The field gets its OWN ground rather than sitting on the aerial: the
   band veil is tuned for TEXT and the outline would compete with the lit streets underneath.
   LABELS ON THE FIELD FROM 760px, where the field is 300px and wider; below that twenty-two of them
   cannot be set legibly on a 358px field, and the buttons beside it carry every name as indexable
   text anyway. Marker radii repeat DOT_ON from content/geo.mjs — change both together. */
.areas-grid { display: grid; gap: 18px; align-items: start }
@media (min-width: 760px) { .areas-grid { grid-template-columns: minmax(300px, 46%) 1fr; gap: 30px } }
.minimap { margin: 0; border: 1px solid rgba(255,255,255,.26); background: rgba(6,6,8,.58) }
.minimap svg { width: 100%; height: auto; display: block }
.minimap .grat line { stroke: rgba(255,255,255,.10); stroke-width: .012 }
.minimap .outline path { fill: rgba(255,255,255,.075); stroke: rgba(255,255,255,.6); stroke-width: .024; stroke-linejoin: round }
.pt { cursor: pointer }
.pt-hit { fill: transparent }
.pt-dot { fill: rgba(255,255,255,.78); transition: fill .2s var(--ease), r .2s var(--ease) }
.pt:hover .pt-dot { fill: #fff }
.pt.on .pt-dot { fill: var(--red-lg, #ff5a61); r: .15 }
.pt-label { fill: rgba(255,255,255,.88); font-family: var(--disp); font-weight: 500; letter-spacing: .01em }
.pt:hover .pt-label { fill: #fff }
.pt.on .pt-label { fill: var(--red-lg, #ff5a61) }
@media (max-width: 759px) { .pt-label { display: none } }

.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px }
.areas li { background: rgba(255,255,255,.06) }
.areas button { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 15px 14px; font: 500 14px/1.25 var(--disp); letter-spacing: .04em; color: #fff;
  cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease) }
.areas button:hover { background: rgba(255,255,255,.12) }
.areas button[aria-current="true"] { background: var(--red); color: #fff }

/* The router says out loud what the map just did. Silent state changes are how a visitor ends
   up filling a field that was already answered. */
.router-loc { margin: 10px 0 0; font: 500 13px/1.5 var(--sans); color: #fff;
  background: rgba(255,255,255,.10); padding: 9px 13px; display: inline-block }
.router-loc b { color: var(--red-lg, #ff5a61); font-weight: 600 }

/* The select takes the same box as every other control, with a DRAWN chevron. It was the one
   browser default sitting beside four styled fields. */
.sel-wrap { position: relative }
.field select { appearance: none; -webkit-appearance: none; border-radius: 0; padding-right: 36px; cursor: pointer }
.sel-chev { position: absolute; right: 14px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none }
.dark .sel-chev, .router .sel-chev { border-color: rgba(255,255,255,.7) }
.field:focus-within .sel-chev { border-color: var(--red) }
@media (min-width: 700px) { .areas { grid-template-columns: repeat(3, 1fr) } }

/* ---- cta + footer ----------------------------------------------------------------------- */
.cta { text-align: center }
.cta .wrap { max-width: 760px }
.cta p { margin: 0 auto 24px; max-width: 56ch }
.cta .acts { display: flex; flex-direction: column; gap: 10px; align-items: center }
@media (min-width: 640px) { .cta .acts { flex-direction: row; justify-content: center } }

.foot { background: var(--paper-2); padding-block: 46px 34px; border-top: 1px solid var(--line) }
.foot-grid { display: grid; gap: 30px }
.foot-logo { height: 72px; width: auto; margin-bottom: 16px }
.foot p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 5px }
.foot b { display: block; font: 500 12px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px }
.foot ul { display: grid; gap: 8px }
.foot ul a { font-size: 14.5px; text-decoration: none; color: var(--ink-2) }
.foot ul a:hover { color: var(--red) }
.foot-base { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); line-height: 1.6 }
/* four columns from 760px: brand, practice areas, the firm, and the social marks in a column of their own
   at the right — the user, 11 Sep 2026: "next to them, like practice areas, the firm, then the social links" */
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr auto } }
/* from 1000px the three link columns sit at their own width with one equal gap between them, and the
   brand block takes what is left at the left — proportional columns left "The firm" a hundred pixels
   of labels in a 270px column and the social marks stranded at the far edge (the user: "Fix spacing") */
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1fr auto auto auto; column-gap: clamp(48px, 7vw, 110px) } }

/* ---- sticky call bar, under 700 only ---------------------------------------------------- */
/* THE LIVE CHAT IS LIFTED OFF IT — 17 Sep 2026. Tawk's launcher and its greeting balloon default to
   20px from the bottom right, which is on top of this bar and across its FREE CONSULTATION half.
   The chat snippet in build.mjs marks Tawk's own fixed panels with .chat-lift and this rule does the
   moving, inside the same media query as the bar so the two can never disagree about when the bar is
   there — Tawk's own customStyle switches on whether it judges the DEVICE to be mobile, which is not
   the same question and left the launcher on the bar in a narrow desktop window. 88px clears the
   58px bar by 30. The opened chat window is never marked; it is nearly full height. */
.callbar { display: none }
@media (max-width: 700px) { .chat-lift { bottom: 88px !important } }
@media (max-width: 700px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0; z-index: 70 }
  .callbar a, .callbar button { min-height: 58px; display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; text-decoration: none; font: 500 15px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase }
  .cb-call { background: var(--red); color: #fff }
  .cb-quote { background: var(--ink); color: #fff }
  body { padding-bottom: 58px }
}

/* ---- modals ----------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: end center }
.modal[hidden] { display: none }
.modal-back { position: absolute; inset: 0; background: rgba(10,12,15,.62) }
.modal-card { position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow: auto;
  background: var(--paper); padding: 26px 20px 28px; border-top: 4px solid var(--red) }
.modal-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-2) }
.modal-x:hover { color: var(--red) }
.modal-card h2 { margin-bottom: 8px }
.modal-sub { font-size: 14.5px; color: var(--ink-3); margin-bottom: 20px }
.sched { min-height: 220px }
.sched-pending { border: 1px dashed var(--line-2); padding: 20px; background: var(--paper-2) }
.sched-pending p { font-size: 14.5px; color: var(--ink-2) }
@media (min-width: 640px) { .modal { place-items: center } .modal-card { padding: 32px 34px 34px; border-top-width: 5px } }


/* ---- motion ----------------------------------------------------------------------------- */
/* THE MOST MOTION OF THE THREE — staggered reveals, counters, hover response, autoplay. But
   the script is what arms it: without .js the reveal state never applies, so a blocked script
   costs the page its animation and never its content. */
.js [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease) }
.js [data-rv].in { opacity: 1; transform: none }
.js .chips li, .js .areas li, .js .figrail li, .js .proof li { transition-delay: calc(var(--i, 0) * 55ms) }

@media (prefers-reduced-motion: reduce) {
  /* EVERY PATH LANDS ON THE FINISHED STATE. */
  .js [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important }
  .msb-frame { transition: none }
  .msb-frame.on .msb-img, .msb-chapters button[aria-selected="true"] .pb i { animation: none !important }
  .msb-chapters button[aria-selected="true"] .pb i { width: 100% }
  .faq-a { transition: none }
  .router-progress i { transition: none }
  * { scroll-behavior: auto !important }
}

/* The hero is dark but does not carry .dark — it has its own veil treatment — so the ghost
   button was inheriting the light-ground rule and rendering near-black on near-black. Scoping
   the reversal to a class the hero does not have is the same mistake as a content: url()
   override written against a ground that turned out not to be dark. Name both grounds. */
.hero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.55) }
.hero .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.1) }


/* SPECIFICITY, NOT INTENT, DECIDES. .sel-fig is the panel's headline figure and was written
   after .sel-panel p — but later does not beat more specific, so a 0,1,0 selector lost both its
   size and its colour to 0,2,0 rules and the figure rendered at 15px in body grey. Measured at
   15px against an intended clamp of 30-46px. Matched on specificity rather than nudged with
   !important, which would only move the problem. */
.sel-panel .sel-fig {
  font: 500 clamp(30px, 6vw, 46px)/1 var(--disp);
  letter-spacing: .01em; color: var(--red-lg); margin: 0 0 8px;
}

/* A STICKY HEADER COVERS EVERY ANCHOR TARGET BENEATH IT. The nav is 69px and scroll-margin-top
   was 0, so every in-page link — and this page is almost entirely in-page links — landed the
   section's heading behind the bar. Clearance is the nav height plus a little air. */
[id] { scroll-margin-top: 84px }
@media (min-width: 1000px) { [id] { scroll-margin-top: 96px } }
/* Still losing on colour: .band.dark p is 0,2,1 and .sel-panel .sel-fig is 0,2,0. Matching the
   band in the selector settles it without !important. Two rounds of this on one rule is the
   argument for keeping ground-dependent colour on tokens rather than on element selectors. */
.band.dark .sel-panel .sel-fig { color: var(--red-lg) }

/* [hidden] IS A UA RULE OF display:none AND ANY display DECLARATION BEATS IT. .btn sets
   display:inline-flex, so the router's Back and Send controls stayed visible on step 1 even
   though the script had set hidden on both — the attribute was correct and the paint was not.
   Anything toggled with .hidden needs this or it silently does nothing. */
[hidden] { display: none !important }

/* --red-lg IS DISPLAY-ONLY, 24px AND UP, and this file used it on two 12px labels — the hero
   eyebrow and the selector's legend — where it measures 4.07:1 and 3.79:1 on the dark ground
   against a 4.5 floor. The rule was written at the top of this file and then broken twice by
   the same hand. Small text on dark gets its own token: same hue, lifted until it clears. */
/* LIFTED AGAIN 16 SEP 2026, for the same reason it exists. It was #ff7a80, chosen for the brightest
   ground the OLD veil produced, rgb(49,51,53). The veil is lighter now and that ground reaches about
   rgb(71,73,75), where #ff7a80 falls under 4.5. Same hue, lifted until it clears — which is the rule
   written above, applied a second time rather than rediscovered. */
:root { --red-on-dark: #ff9ba0 }   /* clears 4.5 on rgb(71,73,75), the brightest ground the veil now produces */
.hero .eyebrow { color: var(--red-on-dark) }
.sel-choices legend { color: var(--red-on-dark) }

/* The proof band is now the document's own sentence about the firm rather than three figures
   with captions that were written. Same band, sourced copy. */
.standing { font-family: var(--disp); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.24;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink); max-width: 24ch; margin: 0 }

/* Meet Our Lawyer: sentence beside two portraits */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: start }
.person img, .person-slot { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; display: block }
.person-slot { background: var(--paper-2, #f2f2f2); display: grid; place-items: center; padding: 16px; text-align: center }
.person-slot span { font: 500 11.5px/1.5 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.person b { display: block; margin-top: 10px; font: 500 15px/1.25 var(--disp); letter-spacing: .03em; color: var(--ink) }
.person > span { display: block; font-size: 13px; color: var(--ink-3) }

.split .team { align-items: start; align-self: start }
.team .person > img, .team .person-slot { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20% }
.team .person-slot { height: auto; aspect-ratio: 4/5 }

.map-attr { font: 400 11.5px/1.4 var(--sans, system-ui); color: rgba(255,255,255,.55); margin: 8px 0 0; text-align: left }

/* =========================================================================================
   THE SITE'S INNER PAGES — components the homepage never needed, in the same register.
   ========================================================================================= */

/* ---- nav: real pages, and one dropdown for the practice areas -------------------------- */
.menu a[aria-current="page"] { color: var(--red) }
.menu li { position: relative }
.has-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.sub-toggle { width: 34px; height: 34px; border: 1px solid var(--line-2); background: none; cursor: pointer; position: relative }
.sub-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s var(--ease) }
.sub-toggle[aria-expanded="true"]::after { transform: translate(-50%, -30%) rotate(-135deg) }
.sub { display: none; flex-basis: 100%; padding: 6px 0 4px 14px; border-left: 2px solid var(--line) }
.sub li { padding: 6px 0 }
.sub a { font-size: 13px; letter-spacing: .04em }
.has-sub.open .sub { display: block }
@media (min-width: 1000px) {
  .has-sub { flex-wrap: nowrap; gap: 4px }
  .sub-toggle { width: 22px; height: 22px; border: 0 }
  .sub { position: absolute; left: -16px; top: 100%; z-index: 70; min-width: 300px; padding: 10px 16px 12px; margin-top: 14px; border: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--paper); box-shadow: 0 12px 30px rgba(20,22,26,.12) }
  .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px }
  .sub li { padding: 7px 0 }
  /* THIRTEEN PRACTICE AREAS, IN TWO COLUMNS — 17 Sep 2026. Six items made a short list; thirteen in
     one column ran the best part of 520px down the page and off the bottom of a laptop screen. The
     rows are fixed at seven and the flow is by column, so the list still reads top to bottom and then
     across, the way a single column did. The width is left to the content: the labels are short names
     now rather than page titles, so two columns of them are no wider than one column of the old ones,
     and the cap keeps the panel inside the window on a narrow laptop. */
  .has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto);
    column-gap: 30px; max-width: min(640px, calc(100vw - 32px)) }
  .menu { gap: 20px }
}

/* ---- prose beside a photograph, sides alternating (explainer/split-alternating) ---------- */
.band.alt { background: var(--paper-2) }
.split-img { margin: 0; align-self: stretch; min-height: 240px }
.split-img img { width: 100%; height: auto; min-height: 240px; aspect-ratio: 4 / 3; object-fit: cover; display: block }
@media (min-width: 900px) { .split .split-img img { aspect-ratio: auto; height: 100% } .split-img { max-height: 520px } }
.split .inline-cta { margin-top: 10px }

/* ---- card grids: the practice-area hub and the blog hub --------------------------------- */
.cards { display: grid; gap: 2px }
.card a { display: grid; gap: 10px; height: 100%; padding: 0 0 22px; background: var(--paper-2); color: inherit; text-decoration: none; transition: background .2s var(--ease), transform .18s var(--ease) }
.card a:hover { background: #eceef0; transform: translateY(-2px) }
.card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block }
.card h2 { font-size: clamp(19px, 2.2vw, 22px); text-transform: none; letter-spacing: 0; padding: 4px 20px 0; color: var(--ink) }
.card p { padding: 0 20px; margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.6 }
.card .inline-cta { margin: 6px 20px 0; justify-self: start }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr) } }
.js .cards .card { transition-delay: calc(var(--i, 0) * 55ms) }

/* ---- sibling links between the service pages (related-services/sibling-links) ------------ */
.siblings { display: grid; gap: 2px }
.siblings a { display: block; padding: 16px 18px; background: var(--paper-2); text-decoration: none; font: 500 15px/1.3 var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); border-left: 3px solid var(--red); transition: background .2s var(--ease) }
.siblings a:hover { background: var(--ink); color: #fff }
@media (min-width: 700px) { .siblings { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1000px) { .siblings { grid-template-columns: repeat(3, 1fr) } }

/* ---- numbered steps for a step-by-step article (process/numbered-row) ------------------- */
.steps { display: grid; gap: 2px; max-width: 760px }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0 24px; border-top: 1px solid var(--line) }
.step:last-child { border-bottom: 1px solid var(--line) }
.step-n { font: 500 clamp(28px, 4vw, 40px)/1 var(--disp); color: var(--red); letter-spacing: .01em }
.step h2 { font-size: clamp(21px, 2.6vw, 28px); margin-bottom: 10px }
.step p { color: var(--ink-2); max-width: 70ch }
@media (min-width: 900px) { .step { grid-template-columns: 96px 1fr; gap: 28px; padding: 30px 0 32px } }

/* ---- small things the inner pages add ---------------------------------------------------- */
.faq-more { margin: 22px 0 0 }
.pending-note { color: var(--ink-3); border-left: 3px solid var(--line-2); padding-left: 14px }

/* ---- the state's regions, at the foot of every page (service-area/region-links) — 16 Sep 2026 ----
   The client: "Hyperlinks for the areas of the state with a short description at the bottom of the
   page." One column on a phone, two from 560px and four from 1000px, so the eight regions never make
   a long thin list on a wide screen. The name is the link; the cities beneath it are not. */
.foot-regions { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line) }
.foot-regions > b { display: block; margin-bottom: 16px }
.foot-regions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 28px }
.foot-regions li { display: grid; gap: 3px }
.foot-regions a { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink-2) }
.foot-regions a:hover { color: var(--red) }
/* --ink-3, the colour .foot-base already uses at this size — the footer is a light ground, and the
   white this started as measured 1.06:1 against it. */
.foot-regions span { font-size: 13.5px; line-height: 1.45; color: var(--ink-3) }
@media (min-width: 560px) { .foot-regions ul { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1000px) { .foot-regions ul { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

/* ---- the case-result ledger (proof/results-ledger) — 16 Sep 2026 ---------------------------
   The client: "We would like to mention our case results of a $2.2 million settlement." One figure,
   so it sits inside the results block rather than taking a band; a single figure given a full-width
   band was rejected before as too much. An ordered list because more are coming and their order is
   the record's; with one entry there is no number worth showing. */
.ledger { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px }
.ledger li { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line-2) }
.ledger b { font: 500 clamp(34px, 6vw, 46px)/1 var(--disp); color: var(--red); letter-spacing: .01em;
  font-variant-numeric: tabular-nums }
.ledger span { font-size: 15px; color: var(--ink-2); line-height: 1.45 }
.ledger + .pending-note { margin-top: 24px }
@media (min-width: 701px) {
  .ledger li { grid-template-columns: minmax(0, 260px) 1fr; align-items: baseline; gap: 4px 28px }
  .ledger span { font-size: 16px }
}
.hero h1 { overflow-wrap: anywhere }

/* =========================================================================================
   ROUND 6 (11 Sep 2026) — the client's revisions: the one result, the accreditation marks, the
   biography, the social marks. In the same register as everything above.
   ========================================================================================= */

/* ---- the one result, as a row closing the hero's call panel on the homepage --------------------
   It was a band of its own (proof/one-figure, 116px figure) for one review and the user called it
   "just way too big … not its own section": the figure now sits under the panel's number at 26–30px,
   its label and the standing disclaimer beneath, so it is on the front page and read without a scroll. */
/* FIRST IN THE PANEL SINCE 16 SEP 2026, on the client's instruction, so the hairline is underneath
   it rather than above: it separates the figure from the heading below, not from a number above. */
.panel-result { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.18); display: grid; gap: 4px }
/* 32 to 38px, where it was 26 to 30 — "bigger … not that big but should be eye catching". It stays
   below the panel's own telephone number in weight of attention only by sitting first. */
.panel-result b { font: 500 clamp(32px, 2.9vw, 38px)/1 var(--disp); color: var(--red-lg); letter-spacing: .01em; font-variant-numeric: tabular-nums }
.panel-result span { font-size: 14.5px; color: rgba(255,255,255,.92); line-height: 1.4 }
.panel-result small { font-size: 12px; color: rgba(255,255,255,.62); line-height: 1.45 }
.band.dark .inline-cta { color: #fff; border-bottom-color: rgba(255,255,255,.35) }
.band.dark .inline-cta:hover { border-bottom-color: #fff }

/* ---- the accreditation marks (trust/mark-strip): one row, common height, two hairlines ---- */
/* The band lost its "Accreditations" label on 17 Sep 2026 (the client: "leave the logo"), so it lost
   the 20px that sat under the label too, and the top and bottom padding are now equal — with a
   heading the band read from the label down, without one it is a strip of marks between two rules
   and wants to sit centred between them. */
.marks-band { padding-block: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 34px }
.marks li { display: block }
.marks img { display: block; height: 44px; width: auto; max-width: 42vw }
@media (min-width: 700px) { .marks { gap: 24px 64px } .marks img { height: 56px; max-width: none } }

/* ---- the biography (about/masthead-two-col): masthead row, then two columns under a rule --- */
.bio-head { display: grid; gap: 26px; align-items: start; padding-bottom: 30px; border-bottom: 1px solid var(--line-2); margin-bottom: 30px }
.bio-intro h2 { margin-bottom: 18px }
.bio-quote { margin: 0 0 24px; padding-left: 16px; border-left: 3px solid var(--red) }
.bio-quote p { font-family: var(--disp); font-size: clamp(19px, 2.4vw, 26px); line-height: 1.3; color: var(--ink); margin: 0 0 8px; max-width: 30ch }
.bio-quote cite { font-style: normal; font: 500 12.5px/1 var(--disp); color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase }
.bio-plate { margin: 0; max-width: 420px }
.bio-plate img { width: 100%; height: auto; aspect-ratio: 1000 / 1222; object-fit: cover; display: block }
/* two real columns, not a grid: a grid aligns rows, and a three-line paragraph beside an eleven-line
   one leaves an eight-line hole. Column flow keeps every paragraph whole and in order. */
.bio-cols p { color: var(--ink-2); max-width: 60ch; break-inside: avoid; margin: 0 0 18px }
.bio-cols p b { font-weight: 500; color: var(--ink) }
@media (min-width: 900px) {
  .bio-head { grid-template-columns: 1fr minmax(260px, 38%); gap: 48px }
  .bio-cols { columns: 2; column-gap: 44px } .bio-cols p { max-width: none }
}

/* ---- the firm's social pages, in the footer brand block — glyphs, never emoji -------------- */
.foot .social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none }
.foot .social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--ink-2); transition: color .2s var(--ease), border-color .2s var(--ease) }
.foot .social a:hover, .foot .social a:focus-visible { color: var(--red); border-color: var(--red) }
.social svg { width: 22px; height: 22px; display: block }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }

/* The consultation button in the bar keeps to one line. Reserving the language pill's room narrowed
   the right group enough that "Free consultation" broke over two lines and the button grew taller
   than everything beside it. There is room for it: the row needs 1078px of the 1180px it has. */
@media (min-width: 1200px) { .nav-right .btn { white-space: nowrap } }


/* ---- the biography band carries two lawyers (about/masthead-two-col) ------------------------
   One block each. The rule under a name separates that name from that person's own paragraphs, which
   is the band's original device and still right; what was missing was anything between one lawyer
   and the next, so the second name butted onto the end of the first biography's columns. The gap and
   the rule that divide the two people belong here, between the wrappers. */
.bio-person + .bio-person { margin-top: 56px; padding-top: 56px; border-top: 2px solid var(--line-2) }
@media (min-width: 900px) { .bio-person + .bio-person { margin-top: 72px; padding-top: 72px } }
/* a person's columns should not run right up to the rule below them */
.bio-cols { padding-bottom: 4px }

/* ---- the attorney bio page (1 Oct 2026, the SEO manager's "Updated Florida Final" document) ----
   The masthead row is the biography band's own (.bio-head), with the four opening paragraphs beside
   the portrait instead of under a rule: the name is already the page's H1, so the row has no heading
   of its own, and a column holding only a role line and a button beside a 420px portrait left most of
   the row empty. On a phone the portrait comes first; at 900px it takes the second column. */
.bio-page { border-bottom: 0; padding-bottom: 0; margin-bottom: 0 }
.bio-page .bio-intro > p:not(.eyebrow) { color: var(--ink-2); max-width: 60ch; margin: 0 0 18px }
.bio-page .bio-intro p b { font-weight: 500; color: var(--ink) }
.bio-page .bio-intro .btn { margin-top: 8px }
.bio-page .bio-plate { order: -1 }
@media (min-width: 900px) { .bio-page .bio-plate { order: 0 } }
/* "At a Glance": a definition list in the ledger's register — term, then value, one hairline per row */
.glance { margin: 22px 0 0; display: grid; gap: 14px }
.glance > div { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line-2) }
.glance dt { font: 500 12px/1.3 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) }
.glance dd { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.5 }
.glance + .sign-off { margin-top: 40px }
@media (min-width: 701px) {
  .glance > div { grid-template-columns: minmax(0, 220px) 1fr; align-items: baseline; gap: 4px 28px }
  .glance dd { font-size: 17px }
}

/* ── the Results ledger carries the firm's published results (28 Sep 2026): the carrier or case-type
   label the old site set above each one sits as a small line over the description ── */
.ledger span small { display: block; font: 500 12px/1.3 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px }

/* ── two dark photo bands back to back — the intake form over the closing band on every inner page —
   read as one block (client screenshot, 28 Sep 2026). A hairline at the seam keeps them two bands. ── */
.band.dark + .band.dark { border-top: 1px solid rgba(255, 255, 255, .16) }

/* the Advocacy badge — the scales of justice the client asked for on the front page (28 Sep 2026) —
   leads the mark strip. It is a square emblem with a word under it, so it stands taller than the
   wordmarks beside it; at the wordmarks' height its word would be unreadable. */
.marks li.badge img { height: 84px }
@media (min-width: 700px) { .marks li.badge img { height: 112px } }

/* COOKIE POLICY PAGE — 5 Oct 2026: long legal text at reading measure; the footer's policy link beside the © line */
.legal-text { max-width: 72ch }
.legal-text h2 { margin: 1.6em 0 .5em }
.legal-text p { margin: 0 0 1em }
.legal-text .lede-p { margin-bottom: 1.4em }
.legal-updated { opacity: .7; font-size: .92em; margin-top: 2em }
.foot-base .foot-legal { color: inherit; text-decoration: underline; text-underline-offset: .15em }