/* Pana Law Firm, P.A. — shared design system.
   One stylesheet for every page. Edit here, not in a page.

   Type roles are defined once, in rem, and scale with clamp(). Choose a
   heading by document structure and pick up its size from the role class,
   never the other way round. */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Dark surfaces: hero, page headers, footer, call bar */
  --navy:        #0B1825;
  --navy-mid:    #112031;
  --navy-light:  #18293B;

  /* Light surfaces */
  --paper:       #FAF9F6;
  --paper-alt:   #F1F0EB;

  /* Ink on light */
  --ink:         #1B2430;
  --ink-body:    #3A4048;
  --ink-soft:    #545861;

  /* Ink on navy. --on-navy-soft measures 8.9:1 on --navy. */
  --on-navy:      #E9E4DB;
  --on-navy-soft: #B9BAB2;

  --hair: rgba(27,36,48,.14);
  --rule: rgba(27,36,48,.22);
  --hair-navy: rgba(233,228,219,.18);
  --rule-navy: rgba(233,228,219,.30);

  /* Gold is a brand accent and a small rule. Never body text. */
  --gold: #7E6423;

  /* Spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px;

  /* Shared container */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1200px;

  /* The header's design minimum. Never written to by script. */
  --navh-base: 68px;
  /* The header's measured height, written by script and read only by
     things that sit below or beside it. Nothing affecting the header's own
     size may read this, or measuring it would change it. */
  --navh: 68px;
  /* Fixed mobile call bar height. Zero until the bar exists. */
  --bar-h: 0px;

  /* Type roles */
  --fs-display: clamp(2.5rem,   1.60rem + 4.20vw, 4.500rem); /* 40 → 72 */
  --fs-h1:      clamp(2.25rem,  1.60rem + 2.40vw, 3.500rem); /* 36 → 56 */
  --fs-h2:      clamp(1.75rem,  1.35rem + 1.50vw, 2.625rem); /* 28 → 42 */
  --fs-h3:      clamp(1.4375rem,1.30rem + 0.50vw, 1.750rem); /* 23 → 28 */
  --fs-lead:    clamp(1.0625rem,1.00rem + 0.30vw, 1.250rem); /* 17 → 20 */
  --fs-body:    clamp(1rem,     0.97rem + 0.12vw, 1.0625rem);/* 16 → 17 */
  --fs-small:   0.875rem;   /* 14 */
  --fs-label:   0.8125rem;  /* 13 */
  --fs-eyebrow: 0.75rem;    /* 12 */
}

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

/* Class-based display rules outrank the browser's own [hidden] rule, so
   a hidden .btn would otherwise still be drawn. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header, and anything scrolled to by
     keyboard focus clears the fixed call bar at the foot of the page. */
  scroll-padding-top: calc(var(--navh) + var(--s2));
  scroll-padding-bottom: calc(var(--bar-h) + var(--s2));
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h);
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

/* One container convention. The element pads by --gutter; .wrap centres
   inside it. Header, hero and every section share this, so the nav brand
   and the body copy start on the same vertical line. */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }

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

.skip {
  position: absolute; left: var(--s2); top: -100px; z-index: 300;
  background: var(--navy); color: var(--on-navy);
  padding: 12px 20px; border-radius: 2px;
  font-size: var(--fs-label); font-weight: 600;
  transition: top .15s ease;
}
.skip:focus { top: var(--s2); }

/* ── TYPE ROLES ──────────────────────────────────────────────── */
.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;     /* enhancement; ordinary wrapping is the fallback */
}
.esq { font-size: .6em; letter-spacing: 0; font-weight: inherit; }

.t-display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.014em; }
.t-h1      { font-size: var(--fs-h1);      line-height: 1.12; letter-spacing: -0.012em; }
.t-h2      { font-size: var(--fs-h2);      line-height: 1.20; letter-spacing: -0.008em; }
.t-h3      { font-size: var(--fs-h3);      line-height: 1.25; letter-spacing: -0.004em; }

/* Inter subheads for utility groups, credential labels, preparation lists */
.t-subhead {
  font-family: inherit;
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  font-weight: 600; line-height: 1.4; color: var(--ink);
  letter-spacing: -0.005em;
}

.t-lead  { font-size: var(--fs-lead);  line-height: 1.6;  font-weight: 400; }
.t-body  { font-size: var(--fs-body);  line-height: 1.65; font-weight: 400; }
.t-small { font-size: var(--fs-small); line-height: 1.6;  font-weight: 400; }

.t-eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.t-label {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

/* Prose defaults inside body copy */
.measure     { max-width: 62ch; }
.measure--lead { max-width: 54ch; }

p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
p a:not(.btn):hover { text-decoration-thickness: 2px; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  text-align: center;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  cursor: pointer;
  min-height: 46px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary   { background: var(--ink); color: var(--paper); }
.btn--primary:hover   { background: var(--navy); border-color: var(--navy); }
.btn--secondary { background: transparent; }
.btn--secondary:hover { background: rgba(27,36,48,.06); }

/* On navy the palette inverts */
.on-navy .btn--primary { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }
.on-navy .btn--primary:hover { background: #FFF; border-color: #FFF; }
.on-navy .btn--secondary { color: var(--on-navy); border-color: var(--rule-navy); }
.on-navy .btn--secondary:hover { background: rgba(233,228,219,.10); border-color: var(--on-navy); }

/* ── HEADER ──────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,249,246,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  padding: 0 var(--gutter);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  /* Wrapping matters at 200% text: the header grows a row instead of
     letting the wordmark run under the Menu button. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px var(--s3);
  min-height: var(--navh-base);
  padding: 8px 0;
}
.nav__brand { display: flex; align-items: center; gap: 12px; min-height: 44px; flex: 0 1 auto; min-width: 0; }
.nav__brand img { width: 38px; height: 38px; flex: none; }
.nav__wordmark {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); line-height: 1.3;
  min-width: 0; overflow-wrap: anywhere;
}
/* At 320–400px the brand and the Menu button need ~13px more room than
   they have. Tightening the wordmark keeps both on one row, and keeps it
   well above the 9.5px it used to be. */
@media (max-width: 400px) {
  .nav__wordmark { font-size: 0.75rem; letter-spacing: .05em; }
}
.nav__pa { color: var(--gold); }

.nav__menu { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.nav__links a {
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-body);
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.nav__cta[aria-current="page"] { box-shadow: inset 0 -3px 0 0 var(--gold); }

.nav__actions { display: flex; align-items: center; gap: var(--s2); }
.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-small); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink); white-space: nowrap; min-height: 44px;
}
.nav__phone svg { width: 15px; height: 15px; flex: none; }
.nav__cta { padding: 11px 20px; min-height: 42px; }

.nav__toggle {
  display: none;
  align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 14px;
  font-family: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--ink); background: none;
  border: 1px solid var(--rule); border-radius: 2px;
  cursor: pointer;
}
.nav__bars { display: block; width: 16px; }
.nav__bars span { display: block; height: 1.5px; background: currentColor; }
.nav__bars span + span { margin-top: 4px; }

/* Keep the brand and the Menu button on one row on a small phone. */
@media (max-width: 480px) {
  .nav__inner { gap: 8px 12px; }
  .nav__brand { gap: 10px; }
  .nav__brand img { width: 32px; height: 32px; }
  .nav__toggle { padding: 8px 12px; gap: 8px; }
}

/* The horizontal bar needs about 1,060px before brand, links and actions
   stop competing; with Home added it wrapped to two rows at 1,025. Below
   this width the compact menu takes over instead of crowding. */
@media (max-width: 1100px) {
  /* Without the script the menu stays an ordinary row under the brand and
     no button is offered, so navigation never depends on JavaScript. */
  .nav__menu { flex: 1 0 100%; }
  .js-ready .nav__toggle { display: inline-flex; }
  .js-ready .nav__menu[data-open="false"] { display: none; }
  .js-ready .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 36px rgba(11,24,37,.10);
    padding: var(--s2) var(--gutter) var(--s3);
    max-height: calc(100vh - var(--navh)); overflow-y: auto;
  }
  .nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a {
    font-size: 1.0625rem; padding: 14px 0;
    border-bottom: 1px solid var(--hair);
  }
  .nav__links a:hover { border-bottom-color: var(--hair); }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--gold); }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: var(--s3); }
  .nav__phone { justify-content: center; border: 1px solid var(--rule); border-radius: 2px; min-height: 46px; }
  .nav__cta { min-height: 46px; }
}

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  /* The scrim fades out on the right and the video mounts after idle, so
     the hero needs a ground of its own or cream shows through light text. */
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(44px, 5.5vw, 68px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(58vh, 560px);
}
.hero__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--navy); }
.hero__video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.77vh;
  transform: translate(-50%, -50%);
  pointer-events: none; border: 0;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(11,24,37,.94) 0%, rgba(11,24,37,.82) 38%, rgba(11,24,37,.42) 70%, rgba(11,24,37,.28) 100%),
    linear-gradient(180deg, rgba(11,24,37,.55) 0%, rgba(11,24,37,0) 30%, rgba(11,24,37,.38) 78%, var(--navy) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s2);
}
.hero__headline { color: var(--on-navy); max-width: 15ch; }
.hero__lede { color: var(--on-navy-soft); max-width: 52ch; }
.hero__meta {
  font-size: var(--fs-small); color: var(--on-navy-soft);
  margin-top: calc(var(--s2) * -0.5);
}

.hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.hero__chips span {
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-navy-soft);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__callout { color: var(--on-navy-soft); font-size: var(--fs-small); }
.hero__callout a { color: var(--on-navy); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

/* Pause control. Injected only when the video actually mounts. */
/* The frame is revealed only once the player has confirmed itself, so a
   spinner or an error page is never shown over the navy ground. */
.hero__video iframe { opacity: 0; transition: opacity .4s ease; }
.hero__video[data-ready="true"] iframe { opacity: 1; }

/* ── PAGE HEADER (inner pages) ───────────────────────────────── */
.pagehead {
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(44px, 5.5vw, 68px);
}
.pagehead .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pagehead .t-eyebrow { color: var(--on-navy-soft); }
.pagehead__title { color: var(--on-navy); max-width: 20ch; }
.pagehead__lede { color: var(--on-navy-soft); max-width: 56ch; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.section { padding: clamp(40px, 6vw, 80px) var(--gutter); }
.section--alt { background: var(--paper-alt); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 12px;
  align-items: end;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--s4);
}
.section__head > .t-eyebrow,
.section__head > h2 { grid-column: 1; }
.section__head > h2 { margin-top: 6px; }
.section__note {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: end;
  color: var(--ink-body);
  max-width: 46ch;
}
/* The section head collapses to one column well before the note column
   runs out of room. Tested at 769, 820, 900 and 1024. */
@media (max-width: 1024px) {
  .section__head { grid-template-columns: 1fr; margin-bottom: var(--s3); }
  .section__note { grid-column: 1; grid-row: auto; margin-top: 4px; }
}

.section__foot { margin-top: var(--s4); }

/* A caveat is an aside, not prose. */
.caveat {
  font-size: var(--fs-small); line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}
.caveat a { text-decoration: underline; text-underline-offset: .18em; }

/* ── PRACTICE DIRECTORY ──────────────────────────────────────── */
.dir { border-top: 0; }
.dir__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 260px) minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 6px;
  align-items: baseline;
  padding: 22px 6px;
  border-bottom: 1px solid var(--hair);
  transition: background .18s ease, border-color .18s ease;
}
.dir__row:hover { background: rgba(27,36,48,.03); border-bottom-color: var(--rule); }
.dir__num { color: var(--ink-soft); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; }
.dir__name { color: var(--ink); }
.dir__desc { color: var(--ink-body); font-size: var(--fs-body); }
.dir__go {
  color: var(--ink-soft); font-size: var(--fs-small); font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease;
}
.dir__go::after { content: ' \2192'; }
.dir__row:hover .dir__go { color: var(--ink); }

@media (max-width: 1024px) {
  .dir__row { grid-template-columns: 44px minmax(0, 220px) minmax(0, 1fr); }
  .dir__go { grid-column: 2 / -1; }
}
@media (max-width: 700px) {
  .dir__row { grid-template-columns: 1fr; row-gap: 6px; padding: 18px 0; }
  /* The whole row is the link, so a separate action line is a third
     line of text doing nothing the row does not already say. */
  .dir__go { display: none; }
  .dir__name::after { content: ' \2192'; color: var(--ink-soft); }
}

/* ── TWO-AUDIENCE COLUMNS ────────────────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
}
.duo > * + * {
  border-left: 1px solid var(--hair);
  padding-left: clamp(32px, 5vw, 72px);
}
.duo h2, .duo h3 { margin-bottom: 10px; }
/* One wraps to two lines and the other does not, which left the two
   columns out of step. Reserving two lines keeps the rows aligned
   without a forced break that would fail at another width. */
@media (min-width: 821px) { .duo > * > h2 { min-height: 2.4em; } }
.duo p { color: var(--ink-body); max-width: 46ch; }
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; row-gap: var(--s4); }
  .duo > * + * {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hair); padding-top: var(--s4);
  }
}

/* Plain service lists. Separated enough to scan, not boxed. */
.slist { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: var(--s2); }
.slist li {
  font-size: var(--fs-body); line-height: 1.5; color: var(--ink-body);
  padding-left: 18px; position: relative;
}
.slist li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 6px; height: 1px; background: var(--ink-soft);
}

/* Short verified facts, shown in a row rather than boxed. */
.factrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px); row-gap: var(--s3);
}
.factrow dt {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-top: 14px; border-top: 1px solid var(--rule);
}
.factrow dd { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); margin-top: 6px; }
@media (max-width: 820px) {
  .factrow { grid-template-columns: 1fr; row-gap: var(--s2); }
}

/* ── NUMBERED PROCESS ────────────────────────────────────────── */
.steps {
  list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px); row-gap: var(--s4);
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block; width: 32px; margin-bottom: 10px;
  padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em;
  color: var(--ink-soft);
}
.steps p { color: var(--ink-body); margin-top: 6px; font-size: var(--fs-body); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; row-gap: var(--s3); } }

/* ── FAQ (native disclosure) ─────────────────────────────────── */
.faq { border-top: 0; }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 18px 0;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  font-weight: 600; line-height: 1.45; color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  margin-left: auto; flex: none;
  font-size: 1.25rem; font-weight: 400; line-height: 1.1;
  color: var(--ink-soft);
}
.faq__item[open] .faq__q::after { content: '\2212'; }
.faq__q:hover { color: #000; }
.faq__a { padding: 0 var(--s5) 22px 0; color: var(--ink-body); max-width: 68ch; }
.faq__a p + p { margin-top: 12px; }
.faq__src { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--ink-soft); }
.faq__src a { text-decoration: underline; text-underline-offset: .18em; }

/* ── CONTACT ROWS ────────────────────────────────────────────── */
.crow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s4);
  row-gap: 3px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.crow:last-child { border-bottom: 0; }
.crow__label { grid-column: 1; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.crow__value {
  grid-column: 1; min-width: 0;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem);
  line-height: 1.35; color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.crow__action {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap;
  transition: color .18s ease;
}
.crow__action::after { content: ' \2192'; }
.crow:hover .crow__action { color: var(--ink); }
/* Below 700px the value and the action collide inside the row long before
   the page itself overflows. The action moves under the value. */
@media (max-width: 700px) {
  .crow { grid-template-columns: 1fr; row-gap: 4px; padding: 18px 0; }
  .crow__action { grid-column: 1; grid-row: auto; justify-self: start; align-self: auto; }
}

/* ── PROSE + ASIDE LAYOUT ────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: var(--s5);
  align-items: start;
}
.split--asidefirst { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
.split__body { display: flex; flex-direction: column; gap: var(--s3); max-width: 64ch; }
.split__body p { color: var(--ink-body); }
.split__body .t-lead { color: var(--ink); }
.split__aside {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  position: sticky; top: calc(var(--navh) + var(--s3));
}
.split__aside .btn { width: 100%; }
@media (max-width: 1024px) {
  .split, .split--asidefirst { grid-template-columns: 1fr; row-gap: var(--s4); }
  .split__aside { position: static; }
  /* On narrow screens the aside carries the booking action, so it leads. */
  .split--asidefirst .split__aside { order: -1; }
}

/* Definition list for credentials and structured facts */
.facts { display: grid; grid-template-columns: 1fr; gap: 0; }
.facts dt {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--hair);
}
.facts dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.facts dd { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); margin-top: 4px; }
.facts dd a { font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }

/* ── TABLE ───────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin-top: var(--s3); }
.tablewrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dtable { border-collapse: collapse; width: 100%; min-width: 620px; }
.dtable caption {
  text-align: left; color: var(--ink-soft);
  font-size: var(--fs-small); line-height: 1.6;
  padding-bottom: var(--s2);
}
.dtable th, .dtable td {
  text-align: left; vertical-align: top;
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--hair);
}
.dtable th {
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  border-bottom-color: var(--rule);
}
.dtable td { font-size: var(--fs-body); line-height: 1.5; color: var(--ink-body); }
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 0; }
.scrollnote { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 10px; }
@media (min-width: 821px) { .scrollnote { display: none; } }

/* ── ON THIS PAGE ────────────────────────────────────────────── */
.toc { position: sticky; top: calc(var(--navh) + var(--s3)); }
.toc__panel > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 10px 16px;
  border: 1px solid var(--rule); border-radius: 2px;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
}
.toc__panel > summary::-webkit-details-marker { display: none; }
.toc__panel > summary::after { content: '+'; margin-left: auto; font-size: 1.15rem; font-weight: 400; color: var(--ink-soft); }
.toc__panel[open] > summary::after { content: '\2212'; }
.toc__title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.toc__list { list-style: none; display: flex; flex-direction: column; }
.toc__list a {
  display: block; padding: 11px 0;
  font-size: var(--fs-small); line-height: 1.4; color: var(--ink-body);
  border-bottom: 1px solid var(--hair);
  border-left: 2px solid transparent; padding-left: 12px; margin-left: -12px;
  transition: color .18s ease, border-color .18s ease;
}
.toc__list a:hover { color: var(--ink); }
.toc__list a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--gold); }
@media (max-width: 1024px) {
  /* As a disclosure the list needs no sidebar rule above it; the rule
     inherited from .split__aside reads as an orphan line. */
  .toc { position: static; margin-bottom: var(--s4); border-top: 0; padding-top: 0; }
  .toc__title { display: none; }
  .toc__list { padding-top: var(--s1); }
}
@media (min-width: 1025px) {
  .toc__panel > summary { display: none; }
}

/* ── PRACTICE AREA DETAIL ────────────────────────────────────── */
.area { scroll-margin-top: calc(var(--navh) + var(--s3)); }
.area + .area { padding-top: var(--s5); border-top: 1px solid var(--hair); }
.area__lead { color: var(--ink-body); max-width: 60ch; margin-top: var(--s2); }
.groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: var(--s4);
  margin-top: var(--s4);
}
.group { border-top: 1px solid var(--hair); padding-top: var(--s2); }
.group__name {
  display: flex; align-items: flex-start; gap: var(--s2);
  cursor: pointer; list-style: none;
  padding: 2px 0;
}
.group__name::-webkit-details-marker { display: none; }
.group__name::after {
  content: '+'; margin-left: auto; flex: none;
  font-size: 1.1rem; font-weight: 400; line-height: 1.2; color: var(--ink-soft);
}
.group[open] > .group__name::after { content: '\2212'; }
.group .slist { margin-top: 10px; }
@media (max-width: 820px) {
  .groups { grid-template-columns: 1fr; row-gap: var(--s2); }
  .group__name { padding: 6px 0; }
}

/* ── BOOKING ─────────────────────────────────────────────────── */
.booking { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.booking__quick { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: var(--s3); }
/* Duration and format are read from the firm's own booking event. Keep
   this line in step with the Calendly event if it is ever changed. */
.booking__meta { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-soft); }
.booking__quick a { text-decoration: underline; text-underline-offset: .18em; font-weight: 600; }

/* The slot carries the state; the frame and the message are both inside
   it, so a message is still visible when the frame is collapsed.

   No state at all is the shipped default: the script has not run, so the
   box claims nothing and reserves nothing. Only the script, which is the
   only thing that can load a calendar, opens it up.

   loading: a modest reserved box with the message above it.
   loaded:  the iframe document finished loading. Not proof that a booking
            interface rendered -- a provider error page finishes loading
            too -- which is why the reader gets a control to dismiss it.
   slow:    nothing finished before the deadline. The box closes rather
            than standing open, while the frame stays in the DOM so a late
            completion can still resolve it.
   failed:  no frame was ever created.
   hidden:  the reader dismissed it. */
.booking__slot { position: relative; }
.booking__frame { height: auto; min-height: 0; }
.booking__slot[data-state="loading"] .booking__frame { height: 240px; }
.booking__slot[data-state="loaded"] .booking__frame { height: 700px; }
.booking__slot[data-state="slow"] .booking__frame,
.booking__slot[data-state="hidden"] .booking__frame { height: 0; overflow: hidden; }
.booking__frame > div, .booking__frame iframe { height: 100%; min-height: 100%; }

.booking__status { font-size: var(--fs-small); color: var(--ink-soft); }
.booking__status:empty { display: none; }
.booking__slot[data-state="loading"] .booking__status { padding-bottom: var(--s2); }
.booking__slot[data-state="slow"] .booking__status,
.booking__slot[data-state="failed"] .booking__status { padding-top: var(--s1); }
.booking__action { margin-top: var(--s2); }
/* The alternatives sit under the calendar rather than beside it, so the
   embed gets the full container width. Below about 900px Calendly stacks
   its own layout and needs a much taller box. */
.booking__alts {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  column-gap: clamp(32px, 4vw, 64px); row-gap: var(--s3);
  align-items: center;
}
.booking__links { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 820px) {
  .booking__alts { grid-template-columns: 1fr; }
  .booking__links { flex-direction: column; }
  .booking__links .btn { width: 100%; }
}
@media (max-width: 1024px) {
  .booking__slot[data-state="loaded"] .booking__frame { height: 960px; }
}
@media (max-width: 480px) {
  .booking__slot[data-state="loaded"] .booking__frame { height: 1040px; }
}

/* ── TELEGRAM INVITATION ─────────────────────────────────────── */
/* A restrained block in the page's own palette. Not a floating bubble:
   the mobile call bar already occupies that corner. */
.tg {
  margin-top: var(--s4);
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  background: var(--paper);
  max-width: 62ch;
}
.section--alt .tg { background: var(--paper-alt); }
.tg__head { display: flex; align-items: center; gap: 10px; }
.tg__icon { width: 18px; height: 18px; flex: none; fill: var(--ink); }
.tg__body { color: var(--ink-body); margin: 8px 0 var(--s2); }
.tg .btn { display: inline-flex; }
.tg__note { margin-top: var(--s2); }
@media (max-width: 600px) { .tg .btn { width: 100%; } }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background: var(--navy-mid); color: var(--on-navy);
  padding: var(--s5) var(--gutter) var(--s5);
  text-align: center;
  border-top: 1px solid var(--hair-navy);
}
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: var(--maxw); margin: 0 auto; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { width: 30px; height: 30px; }
.footer__brand .t-label { color: var(--on-navy); }
.footer__addr { color: var(--on-navy); font-size: var(--fs-small); }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.footer__nav a { font-size: var(--fs-small); color: var(--on-navy-soft); min-height: 44px; display: inline-flex; align-items: center; }
.footer__nav a:hover { color: var(--on-navy); text-decoration: underline; text-underline-offset: .2em; }
.footer__social { display: flex; gap: var(--s2); }
.footer__social a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-navy); border-radius: 2px;
  transition: border-color .18s ease, background .18s ease;
}
.footer__social a:hover { border-color: var(--on-navy); background: rgba(233,228,219,.07); }
.footer__social svg { width: 17px; height: 17px; fill: var(--on-navy); }
.footer__disclaimer { color: var(--on-navy-soft); max-width: 68ch; font-size: var(--fs-small); line-height: 1.6; }
.footer__copy { color: var(--on-navy-soft); font-size: var(--fs-small); }

/* ── MOBILE CALL BAR ─────────────────────────────────────────── */
.callbar { display: none; }
@media (max-width: 768px) {
  :root { --bar-h: 74px; }
  .callbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--navy-light);
    border-top: 1px solid var(--rule-navy);
    padding: 12px var(--gutter);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .callbar .btn { width: 100%; background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }
}

/* ── RESPONSIVE ODDS AND ENDS ────────────────────────────────── */
@media (max-width: 768px) {
  .hero { min-height: auto; }
  .hero__video { display: none; }   /* no desktop-framed video over cellular */
  .hero__scrim {
    background: linear-gradient(180deg, rgba(11,24,37,.88) 0%, rgba(11,24,37,.76) 45%, rgba(11,24,37,.84) 75%, var(--navy) 100%);
  }
  .hero__ctas { flex-direction: column; align-self: stretch; width: 100%; }
  .hero__ctas .btn { width: 100%; }
  .split__aside .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero__video { display: none; }   /* belt and braces; the iframe never mounts */
}

/* ── FOCUS ───────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible,
.pagehead :focus-visible,
.footer :focus-visible,
.callbar :focus-visible { outline-color: var(--on-navy); }