/* ═══════════════════════════════════════════════════════════════════════════
   AGENT-LAW — LAYOUT. Structure only.
   No hex value, no rgb(), no font-family anywhere in this file. Colour and
   type live in theme.css; everything below reads tokens, so the whole palette
   and both typefaces can be swapped without touching a line of it.

   The identity device is "the docket": every section opens with a full-width
   hairline, and hangs a numbered rail off the left of it. That is a VERTICAL
   device, so it survives 375px intact rather than collapsing into the same
   single column every other archetype collapses into (archetypes §6.1).

   Section rhythm is varied on purpose — six different vertical paddings, a
   full-bleed fact band, one plane inversion, a narrow editorial measure and a
   dense index. Uniform section height is the loudest "this is a template"
   tell in the research, so it is the thing most deliberately avoided here.
   ═══════════════════════════════════════════════════════════════════════════ */

.in{max-width:var(--container);margin-inline:auto;padding-inline:var(--s5)}
h1,h2,h3{overflow-wrap:break-word}

/* ── masthead ─────────────────────────────────────────────────────────────
   Static, never sticky: pages.css pins inner pages static, and a header that
   is sticky on one page and not on the next reads as a bug. Corporate firms
   in the audit carry no shouty phone CTA, so the number stays as a quiet
   utility item rather than a button. */
.top{background:var(--bg);border-bottom:1px solid var(--line);position:static}
.top .in{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s7);min-height:92px}
.brand{text-decoration:none;margin-right:auto}
.top nav{display:flex;flex-wrap:wrap;column-gap:var(--s6)}
.top nav a{text-decoration:none}
.top nav a[aria-current]{border-bottom:1px solid var(--accent);padding-bottom:2px}
.call{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  margin-left:var(--s6)}

/* Explicit placement, not auto-flow: with three children and one of them
   spanning, auto-placement pushes the phone number onto a third row. */
@media (max-width:900px){
  .top .in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);
    align-items:center;min-height:0;padding-block:var(--s3)}
  .brand{margin-right:0;grid-area:1/1/2/2}
  .call{margin-left:0;justify-self:end;grid-area:1/2/2/3}
  .top nav{grid-area:2/1/3/3;border-top:1px solid var(--line);column-gap:var(--s5);
    margin:var(--s3) calc(-1 * var(--s5)) 0;padding-inline:var(--s5)}
}

/* ── hero: type only, no photograph ───────────────────────────────────────
   Tallest band on the page and the one with the widest measure, so the two
   sections after it read as different sections without changing anything else. */
.hero{padding-block:clamp(var(--s9),11vw,var(--s11)) clamp(var(--s8),8vw,var(--s10))}
.hero h1{max-width:17ch;margin:0 0 var(--s6)}
.hero .lede{max-width:47ch;margin:0}
.acts{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s7) 0 0}
.hero .acts{margin-top:var(--s8)}

/* ── hard facts instead of a picture ──────────────────────────────────────
   The audit's corporate firms answer "who are you" with places and dates. A
   short, full-bleed, inverted-plane band directly under a very tall one. */
.facts{background:var(--surface);border-block:1px solid var(--line)}
.facts .in{padding-block:clamp(var(--s6),5vw,var(--s7))}
.facts dl{margin:0;display:grid;gap:var(--s5) var(--s6);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:780px){.facts dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts dt{margin:0 0 var(--s1)}
.facts dd{margin:0}
.facts .fnote{margin:var(--s2) 0 0;max-width:28ch}

/* ── the docket rail ──────────────────────────────────────────────────────
   Full-width hairline, number and label hanging beneath it on the left, the
   content column to the right. Below 920px the rail sits above the column and
   the hairline stays — which is the whole point of choosing a vertical device. */
.sec{padding-block:clamp(var(--s8),8vw,var(--s9))}
.sec .in.ruled{border-top:1px solid var(--ink);padding-top:var(--s5);
  display:grid;gap:var(--s6)}
@media (min-width:920px){
  .sec .in.ruled{grid-template-columns:12rem minmax(0,1fr);column-gap:var(--s9);gap:0 var(--s9)}
}
.tag{margin:0;display:flex;align-items:baseline;gap:var(--s3)}
@media (min-width:920px){
  .tag{flex-direction:column;gap:var(--s2)}
  /* align-self:start is what gives a grid item room to be sticky at all */
  .sec .in.ruled .tag{position:sticky;top:var(--s6);align-self:start}
}
.col > :last-child{margin-bottom:0}
.col .prose > :last-child{margin-bottom:0}

/* six vertical rhythms, not one */
.sec--intro{padding-block:clamp(var(--s9),10vw,var(--s10)) clamp(var(--s8),8vw,var(--s9))}
.sec--tall{padding-block:clamp(var(--s8),8vw,var(--s9)) clamp(var(--s8),9vw,var(--s10))}
.sec--process{padding-block:clamp(var(--s9),10vw,var(--s10))}
.sec--short{padding-block:clamp(var(--s7),6vw,var(--s8))}
.sec--article{padding-block:clamp(var(--s8),8vw,var(--s9)) clamp(var(--s6),5vw,var(--s7))}
.sec--roster{padding-block:clamp(var(--s8),8vw,var(--s9)) clamp(var(--s7),7vw,var(--s9))}
.sec--points{padding-block:0 clamp(var(--s8),8vw,var(--s10))}

/* statement beside the argument, rather than above it — the two-column form
   is what stops the editorial measure leaving half the page empty at 1280 */
/* the page header already carries its own bottom padding, so the first
   section under it must not add a second helping of the same gap */
.phead + .sec{padding-top:clamp(var(--s6),5vw,var(--s8))}

.say{max-width:19ch;margin:0 0 var(--s6)}
.split{display:grid;gap:var(--s6)}
@media (min-width:1160px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:var(--s7);
    align-items:start}
  .split .say{margin:0;max-width:15ch}
  .split .prose{max-width:none}
}

/* ── practice index — the shared .rows furniture, re-proportioned ─────────── */
.rows--index .row{gap:var(--s3) var(--s6)}
@media (min-width:820px){
  .rows--index .row{grid-template-columns:3rem minmax(0,1fr) 7.5rem;align-items:baseline}
}
.rows--index .row h3{margin:0 0 var(--s3)}
.rows--index .row p{margin:0;max-width:56ch}
.rows--index .row .price{margin:var(--s2) 0 0}
.rows--index .go{white-space:nowrap}

/* ── the disclaimer component ─────────────────────────────────────────────
   Florida 4-7.12(d): a required disclaimer may not appear in fine print nor
   be buried in a footnote, and must have "equal or greater prominence… in
   close proximity" to the text it modifies. So a note is a bordered block
   sitting immediately under the claim it qualifies, at body size. Nothing
   here reduces its size, and nothing moves it to the footer. */
.note{border-top:2px solid var(--accent);margin:var(--s7) 0 0;padding-top:var(--s4);
  max-width:64ch}
.note-t{margin:0 0 var(--s2);max-width:none}
.note-b{margin:0 0 var(--s5);max-width:none}
.note > :last-child{margin-bottom:0}
.note--inv{border-top-color:var(--line)}
.enquiry .note{max-width:none}

/* ── the one plane inversion ──────────────────────────────────────────────
   A client comment is a claim about outcomes, so the "prior results" note
   lives inside this band rather than three screens away in a footer. */
.band-dark{background:var(--ink);color:var(--bg)}
.band-dark .in{padding-block:clamp(var(--s9),9vw,var(--s10));display:grid;gap:var(--s8)}
@media (min-width:980px){
  /* the note sits BESIDE the claim, not eight screens below it in a footer */
  .band-dark .in{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    column-gap:var(--s9);align-items:start;gap:0 var(--s9)}
}
.band-dark blockquote{margin:0}
.band-dark blockquote p{margin:0;max-width:26ch}
.band-dark .cite{margin:var(--s5) 0 0;max-width:40ch}
.band-dark .note{margin:0;max-width:44ch}

/* ── numbered sequence ────────────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
@media (min-width:680px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}}
.steps li{border-top:1px solid var(--ink);padding-top:var(--s4)}
.steps .n{display:block;margin-bottom:var(--s5)}
.steps h3{margin:0 0 var(--s3)}
.steps p{margin:0;max-width:34ch}

/* ── people, without portraits ────────────────────────────────────────────
   Most small firms have poor or mismatched headshots, and a template that
   collapses without professional imagery is a template we cannot sell. So
   the credentials do the work: admission year, practice, school, office.

   A directory row rather than a card grid: an auto-fit card grid orphans the
   last attorney the moment the headcount is not a multiple of the column
   count, and a firm's headcount is content, not a design decision. Rows
   never orphan. */
.roster{display:flex;flex-direction:column}
.person{border-top:1px solid var(--ink);padding-block:var(--s5);
  display:grid;gap:var(--s3) var(--s7)}
.roster > .person:last-child{border-bottom:1px solid var(--ink)}
@media (min-width:820px){
  .person{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:baseline}
}
.person .who h3{margin:0 0 var(--s2)}
.person .role{margin:0;max-width:none}
.person ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--s1) var(--s4)}
/* separator trails the item rather than leading the next one, so a wrap never
   starts a line with a hanging middot */
.person li{display:flex;gap:var(--s4)}
.person li:not(:last-child)::after{content:'\00B7';opacity:.5}

/* ── service detail: named points ─────────────────────────────────────────── */
.points{margin:0}
.points > div{border-top:1px solid var(--line);padding-block:var(--s5);
  display:grid;gap:var(--s2)}
.points > div:last-child{border-bottom:1px solid var(--line)}
@media (min-width:820px){
  .points > div{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--s6)}
}
.points dt{margin:0}
.points dd{margin:0;max-width:54ch}

/* ── questions: <details>, so it works with JavaScript off ─────────────────── */
.qa details{border-top:1px solid var(--line)}
.qa details:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  min-height:68px;padding-block:var(--s4);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0}
.qa summary::after{content:'+';line-height:1}
.qa details[open] summary::after{content:'\2013'}
.qa details > p{margin:0 0 var(--s6);max-width:62ch}

/* ── close ────────────────────────────────────────────────────────────────── */
.band-cta{background:var(--surface);border-top:1px solid var(--line)}
.band-cta .in{padding-block:clamp(var(--s8),8vw,var(--s9));display:grid;gap:var(--s6)}
@media (min-width:900px){
  .band-cta .in{grid-template-columns:minmax(0,1fr) auto;align-items:end;
    column-gap:var(--s8);gap:0 var(--s8)}
  .band-cta .acts{margin:0}
}
.band-cta h2{max-width:16ch;margin:0 0 var(--s5)}
.band-cta .lede{max-width:52ch;margin:0}
.band-cta .tel{display:inline-flex;align-items:center;min-height:54px;text-decoration:none;
  padding-inline:var(--s3)}

/* ── inner page headers, realigned to this template's container ───────────── */
.phead .in{max-width:var(--container);
  padding:clamp(var(--s8),7vw,var(--s10)) var(--s5) clamp(var(--s7),6vw,var(--s9))}
.phead h1{max-width:16ch;margin:0 0 var(--s5)}
.phead .lede{max-width:56ch}
.phead .eyebrow{margin:0}
.phead .eyebrow a{display:inline-flex;align-items:center;min-height:44px}

/* ── contact ──────────────────────────────────────────────────────────────── */
.enquiry .field:last-of-type{margin-bottom:0}
.enquiry .acts{margin-top:var(--s6)}
.hours{margin:0}
.hours > div{display:flex;justify-content:space-between;gap:var(--s4);
  border-top:1px solid var(--line);padding-block:var(--s3)}
.hours dt,.hours dd{margin:0}
.places + .places{margin-top:var(--s5)}
.places h3{margin:0 0 var(--s3)}
.places ul{list-style:none;margin:0;padding:0}
.places li{border-top:1px solid var(--line);padding-block:var(--s3)}
.col .places{max-width:26rem}
.aside .bignum{margin-bottom:var(--s2)}
/* a standalone contact link is a target, not running prose */
.aside p a{display:inline-flex;align-items:center;min-height:44px}

/* ── footer ───────────────────────────────────────────────────────────────
   bdlaw is the only firm in the 22-site audit that puts the advertising
   sentence on every page as literal text instead of a link to another page.
   That is the pattern, it costs nothing, and it renders here at body size. */
.foot{background:var(--ink);color:var(--bg)}
.foot .in{padding-block:clamp(var(--s7),6vw,var(--s8))}
.foot-top{display:grid;gap:var(--s6)}
@media (min-width:860px){
  .foot-top{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--s7)}
}
.foot p{margin:0 0 var(--s2);max-width:40ch}
.foot nav ul{list-style:none;margin:0;padding:0}
.foot .fcontact p{margin:0}
.foot .fnote-legal{border-top:1px solid var(--muted);margin:var(--s7) 0 0;
  padding-top:var(--s5);max-width:78ch}