/* ═══ BLACKBURN LAW — MOBILE ═══
   Loaded last so it wins. Nothing here touches the desktop layout above 1020px.
   The page had no viewport meta and no breakpoints, so phones were rendering the
   full 1209px desktop layout shrunk to fit. */

img,svg,video{max-width:100%}

/* ── tablet and down ─────────────────────────────── */
@media (max-width:1020px){
  /* .wrap and .sec are the same element, so these must be longhands or the
     shorthand wipes the side gutters back to zero */
  .wrap{padding-inline:34px}
  .sec{padding-block:92px}
  .sec.tight{padding-block:72px}
  .navy.bandlow .sec{padding:120px 34px 64px}   /* build.css sets this as a shorthand */
  h2{font-size:44px}
  h2 em{font-size:42px}
  .shead{flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:44px}
  .shead p{max-width:none;padding-bottom:0}
  .tiles{grid-template-columns:repeat(2,1fr);gap:18px}
  .argue{grid-template-columns:1fr;gap:48px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .people{grid-template-columns:repeat(3,1fr);gap:24px}
  .quotes{grid-template-columns:1fr;gap:20px}
  .fq{grid-template-columns:1fr;gap:12px}
  .foot .cols{grid-template-columns:1fr 1fr;gap:40px}
  #afterhours .pgrid{grid-template-columns:1fr;gap:48px;justify-items:center}
  #afterhours .rc{width:100%}
  #pitch .pgrid2{grid-template-columns:1fr;gap:52px}
  .row{grid-template-columns:200px 1fr 90px;gap:24px}
  .row .amt{font-size:48px}
  .pull{font-size:34px}
}

/* ── phone ───────────────────────────────────────── */
@media (max-width:680px){
  .wrap{padding-inline:20px}
  .sec{padding-block:62px}
  .sec.tight{padding-block:52px}
  .navy.bandlow .sec{padding:92px 20px 52px}

  /* sandbox bar: the sentence does not fit, the label and the CTA do */
  body{padding-top:52px}
  .sandbox{height:52px;gap:12px;padding:0 14px;justify-content:space-between}
  .sandbox .say,.sandbox .sep{display:none}
  .sandbox .live{font-size:8.5px;letter-spacing:.22em}
  .sandbox a{font-size:8.5px;letter-spacing:.16em;padding:9px 12px;gap:7px}

  /* nav: wordmark and the phone number only */
  .stage.hero{height:auto;min-height:0}
  .content{min-height:calc(100vh - 52px)}
  nav{padding:20px 20px 0;gap:14px;flex-wrap:wrap}
  .links{display:none}
  .navcta{align-items:flex-end}
  .navcta .btn{display:none}
  .tel{font-size:11px;text-align:right}
  .mark .wm b{font-size:15px;letter-spacing:.18em}
  .mark .wm i{font-size:8px;letter-spacing:.28em}

  /* hero: three lines that have to behave on one left edge */
  main{padding:40px 20px 30px}
  /* the eyebrow is a nowrap flex row on desktop, which overruns a phone */
  .eyebrow{display:block;white-space:normal;font-size:8.5px;letter-spacing:.2em;
    line-height:1.75}
  .eyebrow .r{display:none}
  .hl .a{font-size:34px;line-height:1.02;letter-spacing:-.03em}
  .hl .b{margin:6px 0 2px}
  .hl .b em{font-size:27px;line-height:1.12;white-space:normal}
  .stage.hero footer{padding:0 20px 34px}
  .acts{flex-direction:column;align-items:stretch;gap:14px}
  .acts .btn{width:100%;justify-content:center;padding:16px 18px;font-size:10px}
  .acts .micro{text-align:center}

  /* type scale */
  h2{font-size:31px;line-height:1.06}
  h2 em{font-size:29px}
  .shead{gap:16px;margin-bottom:32px}
  .shead p,.lede2{font-size:15px;line-height:1.75}
  .pull{font-size:24px;line-height:1.42}

  /* the numbers */
  .tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .t{padding:26px 14px 24px}
  .t b{font-size:40px}
  .t span{margin-top:10px;font-size:8.5px;letter-spacing:.16em}

  /* the difference */
  .argue{gap:36px}
  .markbl{margin-top:34px;gap:18px;align-items:center}
  .markbl img{width:120px}
  .markbl span{font-size:8.5px;letter-spacing:.22em}
  .pt{grid-template-columns:40px 1fr;gap:14px;padding:24px 0}
  .pt h3{font-size:18px}
  .pt p{font-size:14.5px}

  /* practice cards */
  .grid3{grid-template-columns:1fr}
  .cell{min-height:0}
  .cell .ph{height:210px;overflow:hidden}
  .cell .ph img{width:100%;height:100%;object-fit:cover;display:block}
  .cell .txt{padding:24px 22px 26px}
  .cell h3{margin-top:18px;font-size:22px}

  /* verdict ledger */
  .ledger .row{grid-template-columns:1fr;gap:8px;padding:26px 0}
  .row .amt{font-size:42px}
  .row .yr{text-align:left}
  .disc{margin-top:24px}

  /* process, attorneys, quotes */
  .steps{grid-template-columns:1fr}
  .step{padding:26px 0}
  .people{grid-template-columns:1fr;gap:34px}
  .q{padding:26px 22px 24px}
  .q .mk{font-size:34px;line-height:.52}
  .q p{margin-top:8px;font-size:15px}
  .q .who{margin-top:20px;padding-top:16px}

  /* after hours: phone mockup centred, transcript readable */
  #afterhours .pgrid{gap:36px;margin-top:40px}
  #afterhours .phone{transform:scale(.86);transform-origin:top center;margin-bottom:-40px}
  #afterhours .rc h3{font-size:22px}
  #afterhours .callbox{padding:22px 18px}
  #afterhours .langrow{flex-wrap:wrap;gap:8px}
  #afterhours .tr{max-height:260px}
  #afterhours .tr div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  #afterhours .tr p{font-size:14px}
  #afterhours .queue{margin-top:40px}
  #afterhours .qrows{grid-template-columns:1fr;gap:0}

  /* closing cta and footer */
  .ctarow{flex-direction:column;align-items:stretch;gap:14px;margin-top:34px}
  .ctarow .btn{width:100%;justify-content:center}
  .ctaphone{margin-left:0;text-align:center}
  .foot{padding:56px 0 0}
  .foot .cols{grid-template-columns:1fr;gap:34px;padding-bottom:44px}
  .foot .bar{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 0 28px}
  .fphone{max-width:none}

  /* the chat launcher: compact so it does not sit on the copy */
  .pkdock{right:12px;bottom:12px}
  .pklaunch{padding:10px 15px 10px 11px;gap:10px}
  .pklaunch .av{width:26px;height:26px;font-size:14px}
  .pklaunch .lb b{font-size:12px}
  .pklaunch .lb s{margin-top:4px;font-size:7.5px;letter-spacing:.14em}

  /* the AIB pitch */
  #pitch .pgrid2{gap:40px}
  #pitch .pcta{flex-direction:column;align-items:stretch}
  #pitch .pcta .btn{width:100%;justify-content:center}
  #pitch .pwhat > div{grid-template-columns:36px minmax(0,1fr);gap:16px;padding:22px 0}
  #pitch .pwhat b{font-size:17px}
}

@media (max-width:380px){
  .tiles{grid-template-columns:1fr}
  .hl .a{font-size:30px}
  .hl .b em{font-size:24px}
}