/* ═══ BLACKBURN LAW — full site system ═══ */
.stage{height:auto}
html,body{height:auto;overflow:visible}
section{position:relative}
.wrap{max-width:1452px;margin:0 auto;padding:0 74px}
.sec{padding:132px 0}
.sec.tight{padding:104px 0}

/* section headers */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:64px}
.shead.center{flex-direction:column;align-items:center;text-align:center;gap:0}
h2{font:800 60px/1.02 'Outfit',sans-serif;letter-spacing:-.034em;text-transform:uppercase;
  color:#3C424A;max-width:800px;margin-top:22px}
h2 em{font:400 italic 58px/1 'Instrument',serif;color:var(--navy);text-transform:none;
  letter-spacing:0;display:inline-block}
.shead p{font:400 16px/1.8 'Inter',sans-serif;color:var(--mid);max-width:400px;padding-bottom:8px}
.shead.center p{max-width:640px;margin-top:26px;text-align:center;padding:0}
.num{font:500 10px/1 'Inter',sans-serif;color:var(--soft);letter-spacing:.30em}

/* ── navy gradient surface ─────────────────────── */
.navy{background:linear-gradient(122deg,#0E2138 0%,#16294A 26%,#1E3A5F 52%,#17304F 76%,#0D1F35 100%);
  color:#EAEEF3;overflow:hidden}
.navy::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 74% at 82% 10%,rgba(60,104,158,.18),rgba(60,104,158,0) 68%),
             radial-gradient(50% 60% at 6% 92%,rgba(44,81,130,.15),rgba(44,81,130,0) 70%)}
.navy .wrap{position:relative;z-index:2}
.navy h2{color:#F1F4F8}
.navy h2 em{color:var(--navy-br)}
.navy .eyebrow{color:var(--navy-br)}
.navy .eyebrow .r.l{background:linear-gradient(270deg,var(--navy-br),rgba(0,0,0,0))}
.navy .shead p,.navy p{color:rgba(234,238,243,.66)}
.navy .num{color:rgba(234,238,243,.40)}
.hairline{height:1px;background:rgba(234,238,243,.13)}

/* ── numbers: floating navy gradient tiles ──────── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.t{position:relative;padding:46px 34px 42px;text-align:center;overflow:hidden;
  background:linear-gradient(146deg,#2C5182 0%,#22406A 32%,#1A3453 64%,#0F2340 100%);
  box-shadow:0 22px 44px -20px rgba(21,44,72,.55),0 4px 10px rgba(21,44,72,.14)}
.t::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%)}
.t b{position:relative;display:block;font:400 68px/1 'Instrument',serif;color:#FFF;
  letter-spacing:-.012em}
.t b i{font-style:normal;color:rgba(255,255,255,.62)}
.t span{position:relative;display:block;margin-top:16px;font:500 10px/1.5 'Inter',sans-serif;
  color:rgba(255,255,255,.78);letter-spacing:.24em;text-transform:uppercase}

/* ── two-column argument ───────────────────────── */
.argue{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.pt{padding:32px 0;border-top:1px solid var(--line-2);display:grid;
  grid-template-columns:60px 1fr;gap:26px}
.pt:first-of-type{border-top:0;padding-top:0}
.pt .n{font:500 11px/1.5 'Inter',sans-serif;color:var(--navy);letter-spacing:.20em}
.pt h3{font:600 21px/1.4 'Outfit',sans-serif;color:#3C424A;letter-spacing:-.012em}
.pt p{margin-top:12px;font:400 15px/1.8 'Inter',sans-serif;color:var(--mid)}
.pull{font:400 italic 44px/1.36 'Instrument',serif;color:#3C424A;letter-spacing:.002em}
.pull b{font-weight:600;font-style:normal;color:var(--navy);
  font-family:'Outfit',sans-serif;font-size:36px;text-transform:uppercase;letter-spacing:-.02em}
.sig{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-2);
  font:500 10px/1.7 'Inter',sans-serif;color:var(--soft);letter-spacing:.26em;text-transform:uppercase}

/* ── practice grid ─────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2)}
.cell{background:#FBFBFA;padding:44px 40px 48px;min-height:264px;display:flex;
  flex-direction:column;justify-content:space-between}
.cell .k{font:500 9.5px/1 'Inter',sans-serif;color:var(--navy);letter-spacing:.26em}
.cell h3{margin-top:26px;font:700 27px/1.16 'Outfit',sans-serif;color:#3C424A;letter-spacing:-.024em;
  text-transform:uppercase}
.cell p{margin-top:16px;font:400 14.5px/1.75 'Inter',sans-serif;color:var(--mid)}
.cell .go{margin-top:28px;font:600 10px/1 'Inter',sans-serif;color:var(--navy);letter-spacing:.22em;
  text-transform:uppercase;display:flex;align-items:center;gap:10px}

/* ── verdict ledger ────────────────────────────── */
.ledger{border-top:1px solid rgba(234,238,243,.16)}
.row{display:grid;grid-template-columns:280px 1fr 150px;gap:40px;align-items:center;
  padding:34px 0;border-bottom:1px solid rgba(234,238,243,.11)}
.row .amt{font:400 62px/1 'Instrument',serif;color:#F1F4F8;letter-spacing:-.032em}
.row .amt i{font-style:normal;color:var(--navy-br)}
.row h3{font:600 20px/1.3 'Outfit',sans-serif;color:#EAEEF3;letter-spacing:-.01em}
.row p{margin-top:9px;font:400 14px/1.7 'Inter',sans-serif;color:rgba(234,238,243,.56)}
.row .yr{text-align:right;font:500 10px/1 'Inter',sans-serif;color:rgba(234,238,243,.42);
  letter-spacing:.26em}
.disc{margin-top:34px;font:400 12px/1.7 'Inter',sans-serif;color:rgba(234,238,243,.38);max-width:640px}

/* ── process ───────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:0 36px 0 0;border-top:2px solid var(--navy);padding-top:28px}
.step:not(:first-child){border-top-color:var(--line)}
.step .k{font:500 10px/1 'Inter',sans-serif;color:var(--navy);letter-spacing:.28em}
.step h3{margin-top:20px;font:700 23px/1.2 'Outfit',sans-serif;color:#3C424A;letter-spacing:-.02em}
.step p{margin-top:14px;font:400 14.5px/1.78 'Inter',sans-serif;color:var(--mid)}

/* ── attorneys ─────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.person .shot{aspect-ratio:4/5;background:
  radial-gradient(72% 58% at 34% 24%,#FFFFFF 0%,#EFEFEE 42%,#DFE0E1 78%,#D2D4D6 100%);
  border:1px solid var(--line-2);display:grid;place-items:center;position:relative}
.person .shot span{font:400 62px/1 'Instrument',serif;color:rgba(46,51,58,.16);letter-spacing:.04em}
.person .shot::after{content:'PORTRAIT';position:absolute;bottom:18px;left:20px;
  font:500 8px/1 'Inter',sans-serif;color:rgba(46,51,58,.26);letter-spacing:.30em}
.person h3{margin-top:26px;font:700 24px/1.2 'Outfit',sans-serif;color:#3C424A;letter-spacing:-.022em}
.person .role{margin-top:10px;font:500 9.5px/1 'Inter',sans-serif;color:var(--navy);
  letter-spacing:.26em;text-transform:uppercase}
.person p{margin-top:16px;font:400 14.5px/1.76 'Inter',sans-serif;color:var(--mid)}

/* ── quotes ────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.q{background:#FFF;border:1px solid var(--line-2);padding:40px 38px 36px;
  box-shadow:0 22px 50px -30px rgba(46,51,58,.20)}
.q .mk{font:700 46px/1 'Instrument',serif;color:var(--navy);opacity:.30}
.q p{margin-top:14px;font:400 16px/1.78 'Inter',sans-serif;color:#4A5058}
.q .who{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2);
  font:500 9.5px/1.7 'Inter',sans-serif;color:var(--soft);letter-spacing:.22em;text-transform:uppercase}

/* ── testimonial audio ──────────────────────────── */
.q .play{margin-top:18px;display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px 10px 15px;border:1px solid var(--line);background:#FCFCFB;
  cursor:pointer;font:500 9.5px/1 'Inter',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray-2);transition:border-color .2s,background .2s}
.q .play:hover{border-color:var(--navy-lt);background:#FFF}
.q .play.on{border-color:var(--navy);background:#FFF}
.q .play .ic{position:relative;width:9px;height:10px;flex:none}
.q .play .ic::before,.q .play .ic::after{content:'';position:absolute;top:0}
.q .play .ic::before{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--navy);left:0;top:0;
  transition:opacity .12s}
.q .play .ic::after{width:8px;height:10px;left:0;top:0;opacity:0;
  background:linear-gradient(90deg,var(--navy) 3px,transparent 3px 5px,var(--navy) 5px 8px);
  transition:opacity .12s}
.q .play.on .ic::before{opacity:0}
.q .play.on .ic::after{opacity:1}
.q .play .tx b{margin-left:7px;font-weight:500;color:var(--soft);letter-spacing:.06em}

/* ── faq ───────────────────────────────────────── */
.faq{border-top:1px solid var(--line-2)}
.fq{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:34px 0;
  border-bottom:1px solid var(--line-2)}
.fq h3{font:600 21px/1.42 'Outfit',sans-serif;color:#3C424A;letter-spacing:-.012em}
.fq p{font:400 15px/1.85 'Inter',sans-serif;color:var(--mid)}

/* ── closing cta ───────────────────────────────── */
.cta h2{font-size:82px;max-width:1000px}
.ctarow{display:flex;align-items:center;gap:18px;margin-top:48px}
.ctarow .btn.lite{background:#FFF;border-color:#FFF;color:var(--gray);padding:19px 34px}
.ctarow .btn.lite .ar{color:var(--navy-lt)}
.ctarow .btn.outline{background:none;border-color:rgba(234,238,243,.32);color:#F1F4F8;padding:19px 34px}
.ctarow .btn.outline .ar{color:var(--navy-br)}
.ctaphone{margin-left:14px;font:400 15px/1.5 'Inter',sans-serif;color:rgba(234,238,243,.62)}
.ctaphone b{display:block;font:500 22px/1.3 'Inter',sans-serif;color:#F1F4F8;letter-spacing:.02em}

/* ── footer ────────────────────────────────────── */
.foot{background:#2A2E34;color:rgba(234,238,243,.60);padding:84px 0 0}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:60px;padding-bottom:64px}
.foot .wm b{display:block;font:600 19px/1 'Outfit',sans-serif;color:#F1F4F8;letter-spacing:.24em;
  text-transform:uppercase}
.foot .wm i{display:block;margin-top:9px;font:400 9px/1 'Inter',sans-serif;font-style:normal;
  color:var(--navy-br);letter-spacing:.40em;text-transform:uppercase}
.foot .wm p{margin-top:24px;font:400 14px/1.85 'Inter',sans-serif;color:rgba(234,238,243,.52);
  max-width:300px}
.foot h4{font:600 9.5px/1 'Inter',sans-serif;color:rgba(234,238,243,.44);letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:22px}
.foot a{display:block;margin-bottom:13px;font:400 14.5px/1.5 'Inter',sans-serif;
  color:rgba(234,238,243,.74);text-decoration:none}
.foot .bar{border-top:1px solid rgba(234,238,243,.12);padding:26px 0 34px;display:flex;
  align-items:center;justify-content:space-between;
  font:400 12px/1.5 'Inter',sans-serif;color:rgba(234,238,243,.42)}
.foot .bar span{font-size:11px;letter-spacing:.04em}
