/* ═══ BLACKBURN LAW — PHOTOGRAPHY + MISSING SECTIONS ═══ */

/* ── practice cards, now with photography ──────────── */
.grid3 .cell{padding:0;min-height:0}
.cell .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#EDEDEC}
.cell .ph img{width:100%;height:100%;object-fit:cover;display:block}
.cell .ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(46,51,58,0) 62%,rgba(46,51,58,.06) 100%)}
.cell .ph::before{content:'';position:absolute;top:0;left:0;width:170px;height:110px;
  z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 0% 0%,rgba(13,31,53,.42),rgba(13,31,53,0) 72%)}
.cell .ph .k{position:absolute;top:18px;left:20px;z-index:2;
  font:600 9.5px/1 'Inter',sans-serif;color:#FFF;letter-spacing:.26em;
  text-shadow:0 1px 10px rgba(13,31,53,.55)}
.cell .txt{padding:32px 34px 34px;display:flex;flex-direction:column;
  justify-content:space-between;flex:1}
.cell .txt h3{margin-top:0;font-size:24px}
.cell .txt p{margin-top:14px}
.cell .txt .go{margin-top:24px}

/* ── attorney portraits ────────────────────────────── */
.person .shot{overflow:hidden;background:#E8E9EA}
.person .shot img{width:100%;height:100%;object-fit:cover;display:block}
.person .shot::after{display:none}

/* ── navy bands: full-bleed photography under a wash ─ */
.bandimg{position:absolute;inset:0;overflow:hidden;z-index:0}
.bandimg i{position:absolute;inset:0;display:block;background-size:cover;
  background-position:50% 46%;filter:grayscale(1) contrast(1.06) brightness(.88)}
.bandimg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(122deg,rgba(13,31,53,.93) 0%,rgba(22,41,74,.88) 28%,
    rgba(30,58,95,.82) 54%,rgba(23,48,79,.90) 78%,rgba(13,31,53,.95) 100%)}
.navy .wrap{position:relative;z-index:2}
.navy::before{z-index:1}

/* ── signage band. Uses the client-supplied file EXACTLY as delivered.
      Do not composite, flatten, relight, crop or add shadow to this image. ── */
.signband{position:relative;overflow:hidden;background:#DEDEE2;
  display:flex;justify-content:center}
.signband i{position:relative;display:block;width:100%;max-width:1720px;
  aspect-ratio:1672/426;background:url('img/signage-band.jpg') 50% 50%/100% 100% no-repeat}
/* narrow screens: give the plate air rather than cropping or scaling it up */
@media(max-width:760px){.signband{padding:22px 0}}

/* ═══ PARKER / AFTER HOURS — ported in, fully scoped ═══ */
#afterhours{background:var(--canvas)}
#afterhours .pgrid{margin-top:60px;display:grid;grid-template-columns:400px 1fr;gap:86px;
  align-items:start}
#afterhours h2{max-width:1000px}

#afterhours .phone{position:relative;width:352px;height:700px;border-radius:52px;padding:11px;
  background:linear-gradient(160deg,#3A4048,#22262C 42%,#14171B);
  box-shadow:0 50px 90px -34px rgba(30,44,66,.52),0 8px 20px rgba(30,44,66,.14)}
#afterhours .scr{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;
  background:linear-gradient(168deg,#1A3453 0%,#132A46 40%,#0C1D33 100%);
  display:flex;flex-direction:column;align-items:center}
#afterhours .scr::before{content:'';position:absolute;inset:0;
  background:radial-gradient(58% 34% at 50% 6%,rgba(80,128,186,.26),rgba(80,128,186,0) 70%)}
#afterhours .fbar{position:relative;width:100%;padding:20px 30px 0;display:flex;
  align-items:center;justify-content:space-between;
  font:600 13px/1 'Inter',sans-serif;color:rgba(255,255,255,.92)}
#afterhours .island{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:106px;height:28px;border-radius:16px;background:#0B0D10}
#afterhours .dots{display:flex;align-items:center;gap:5px}
#afterhours .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.78)}
#afterhours .dots b{width:20px;height:10px;border:1px solid rgba(255,255,255,.62);
  border-radius:3px;display:block}
#afterhours .ah{position:relative;margin-top:52px;font:600 9.5px/1 'Inter',sans-serif;
  color:rgba(255,255,255,.44);letter-spacing:.34em;text-transform:uppercase}
#afterhours .hr{position:relative;width:calc(100% - 60px);height:1px;
  background:rgba(255,255,255,.13);margin-top:22px}
#afterhours .callee{position:relative;margin-top:auto;text-align:center}
#afterhours .ring{position:relative;width:98px;height:98px;border-radius:50%;margin:0 auto;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  display:grid;place-items:center}
#afterhours .ring::after{content:'';position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(255,255,255,.09)}
#afterhours .ring svg{width:40px;height:40px;fill:rgba(255,255,255,.90)}
#afterhours .pnum{position:relative;margin-top:34px;font:500 15px/1 'Inter',sans-serif;
  color:rgba(255,255,255,.92);letter-spacing:.06em}
#afterhours .pmeta{position:relative;margin-top:13px;font:500 9.5px/1.9 'Inter',sans-serif;
  color:rgba(255,255,255,.42);letter-spacing:.24em;text-transform:uppercase}
#afterhours .pacts{position:relative;margin:44px 0 46px;display:flex;gap:56px}
#afterhours .ab{width:62px;height:62px;border-radius:50%;display:grid;place-items:center}
#afterhours .ab.dec{background:#C0403C}
#afterhours .ab.acc{background:#37A05A}
#afterhours .ab svg{width:26px;height:26px;fill:#fff}
#afterhours .ab.dec svg{transform:rotate(134deg)}

#afterhours .rc .lbl{font:600 9.5px/1 'Inter',sans-serif;color:var(--navy);letter-spacing:.30em;
  text-transform:uppercase}
#afterhours .rc h3{margin-top:20px;font:400 46px/1.16 'Instrument',serif;color:#2E333A;
  letter-spacing:-.012em;text-transform:none}
#afterhours .rc .lede2{margin-top:20px;max-width:600px;font:400 16px/1.82 'Inter',sans-serif;
  color:var(--mid)}
#afterhours .steps2{margin-top:40px;border-top:1px solid rgba(46,51,58,.13)}
#afterhours .st{display:grid;grid-template-columns:54px 1fr;gap:22px;padding:24px 0;
  border-bottom:1px solid rgba(46,51,58,.10)}
#afterhours .st .rn{font:400 17px/1.3 'Instrument',serif;color:var(--navy);letter-spacing:.06em}
#afterhours .st b{display:block;font:600 18px/1.4 'Outfit',sans-serif;color:#2E333A;
  letter-spacing:-.012em}
#afterhours .st span{display:block;margin-top:7px;font:400 14.5px/1.7 'Inter',sans-serif;
  color:var(--mid)}
#afterhours .cta2{margin-top:36px;display:flex;align-items:center;gap:16px}
#afterhours .cta2 .btn{padding:19px 32px}
#afterhours .mic{font:500 10px/1 'Inter',sans-serif;color:var(--soft);letter-spacing:.24em;
  text-transform:uppercase;margin-left:6px}

/* ═══ EDITORIAL ITALIC — Playfair 600, replaces Instrument italic ═══
   Instrument Serif ships 400 only, so it could never go bold. Playfair carries a real
   600 italic. Sizes lifted slightly to match its smaller apparent weight. */
h2 em{font:600 italic 62px/1 'Playfair',serif;letter-spacing:-.016em}
.pull{font:600 italic 46px/1.34 'Playfair',serif;letter-spacing:-.008em}
#afterhours .rc h3{font:600 46px/1.16 'Playfair',serif;letter-spacing:-.02em}

/* ═══ BOOK A TIME ═══ */
#booking .bkgrid{display:grid;grid-template-columns:1fr 1fr;gap:86px;align-items:start}
#booking h2{margin-top:22px}
#booking .bklede{margin-top:28px;max-width:520px;font:400 16px/1.82 'Inter',sans-serif;
  color:var(--mid)}
#booking .bkpts{margin-top:40px;border-top:1px solid var(--line-2)}
#booking .bkpts div{padding:20px 0;border-bottom:1px solid var(--line-2)}
#booking .bkpts b{display:block;font:600 15px/1.4 'Outfit',sans-serif;color:#3C424A;
  letter-spacing:-.008em}
#booking .bkpts span{display:block;margin-top:6px;font:400 14px/1.7 'Inter',sans-serif;
  color:var(--mid)}

#booking .bkcard{background:#FFF;border:1px solid var(--line-2);padding:36px 36px 32px;
  box-shadow:0 30px 70px -34px rgba(46,51,58,.26)}
#booking .bkhd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:24px;border-bottom:1px solid var(--line-2)}
#booking .bkhd s{display:block;text-decoration:none;font:600 9px/1 'Inter',sans-serif;
  color:var(--navy);letter-spacing:.28em;text-transform:uppercase}
#booking .bkhd b{display:block;margin-top:11px;font:400 15px/1.5 'Inter',sans-serif;
  color:var(--mid)}
#booking .bkav{flex:none;display:flex;align-items:center;gap:8px;
  font:500 9.5px/1 'Inter',sans-serif;color:var(--soft);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;padding-top:2px}
#booking .bkav i{width:5px;height:5px;border-radius:50%;background:#37A05A;display:block}
#booking .bkday{margin-top:26px;font:600 10px/1 'Inter',sans-serif;color:#3C424A;
  letter-spacing:.26em;text-transform:uppercase}
#booking .bkslots{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#booking .bkslots span{padding:14px 0;text-align:center;border:1px solid var(--line);
  font:500 13.5px/1 'Inter',sans-serif;color:#3C424A;cursor:pointer}
#booking .bkslots span.on{background:var(--navy);border-color:var(--navy);color:#FFF}
#booking .bkslots span.off{color:#C2C7CC;border-color:var(--line-2);
  text-decoration:line-through;cursor:default}
#booking .bkbtn{margin-top:30px;width:100%;justify-content:center;padding:19px 28px}
#booking .bkfoot{margin-top:18px;text-align:center;font:400 13px/1.6 'Inter',sans-serif;
  color:var(--soft)}
#booking .bkfoot b{color:#3C424A;font-weight:600}

/* ── BL mark, fills the space under the pull quote ── */
.markbl{margin-top:64px;display:flex;align-items:flex-end;gap:32px}
.markbl img{width:168px;height:auto;display:block}
.markbl span{font:500 9.5px/1.8 'Inter',sans-serif;color:var(--soft);letter-spacing:.30em;
  text-transform:uppercase}

/* ── Parker phone sits too low against the right column ── */
#afterhours .pgrid{margin-top:34px}
#afterhours .phone{margin-top:-24px}

/* ── the stat tiles now live on the light section, not the navy band ── */
.tiles.onlight{margin:0 0 104px}
.argue{padding-top:8px}


/* ── play the call ── */
#afterhours .callbox{margin-top:34px;border-top:1px solid var(--line);padding-top:30px}
#afterhours .playrow{display:flex;align-items:center;gap:20px}
#afterhours .play{width:62px;height:62px;flex:none;border:0;cursor:pointer;border-radius:50%;
  background:linear-gradient(146deg,#2C5182,#1A3453 62%,#0F2340);display:grid;place-items:center;
  box-shadow:0 18px 38px -16px rgba(13,31,53,.6)}
#afterhours .play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
#afterhours .play.on svg{margin-left:0}
#afterhours .playmeta b{display:block;font:600 15px/1.3 'Outfit',sans-serif;color:#3C424A}
#afterhours .playmeta span{display:block;margin-top:6px;font:500 9.5px/1 'Inter',sans-serif;
  color:var(--soft);letter-spacing:.24em;text-transform:uppercase}
#afterhours .tr{margin-top:28px;max-height:300px;overflow-y:auto;padding-right:8px}
#afterhours .tr div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;
  padding:11px 0;opacity:.34;transition:opacity .4s ease}
#afterhours .tr div.now{opacity:1}
#afterhours .tr s{text-decoration:none;font:600 8.5px/1.9 'Inter',sans-serif;
  letter-spacing:.20em;text-transform:uppercase;color:var(--soft)}
#afterhours .tr div.a s{color:var(--navy)}
#afterhours .tr p{font:400 15px/1.66 'Inter',sans-serif;color:#454B54}
#afterhours .cdisc{margin-top:22px;font:400 12px/1.6 'Inter',sans-serif;color:var(--soft)}

/* ═══ ONE TYPEFACE PER HEADING ═══
   Headings no longer switch face for the accent word. The accent is carried by a
   navy gradient on the same face instead. */
h2 em{font:inherit !important;font-style:normal !important;letter-spacing:inherit !important;
  text-transform:inherit !important;
  background:linear-gradient(104deg,#0D1F35 0%,#1E3A5F 26%,#2C5182 52%,#1E3A5F 76%,#0D1F35 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block}
/* on the navy band the same idea has to run light, not dark */
.navy h2 em{background:linear-gradient(104deg,#7BA6CE 0%,#BFD8EF 30%,#FFFFFF 52%,#BFD8EF 72%,#7BA6CE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* the pull quote keeps its own face all the way through, accent goes navy */
.pull b{font:inherit !important;font-style:italic !important;font-weight:600 !important;
  text-transform:none !important;letter-spacing:inherit !important;
  background:linear-gradient(104deg,#0D1F35 0%,#1E3A5F 26%,#2C5182 52%,#1E3A5F 76%,#0D1F35 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

#afterhours .rc h3{font:600 42px/1.16 'Outfit',sans-serif;letter-spacing:-.028em}

/* the mark, centred. No rule above it, and pulled up to sit against the
   quote so the left column reads level with the three points on the right. */
.markbl{margin:26px 0 0;padding-top:0;border-top:0;
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.markbl img{width:280px;height:auto;display:block}
/* the signature rule and the mark block share one width so they read as one column */
.sig{max-width:none}

/* ── language toggle ── */
#afterhours .langrow{display:flex;align-items:center;gap:0;margin-bottom:26px}
#afterhours .langlbl{font:600 9px/1 'Inter',sans-serif;color:var(--soft);letter-spacing:.28em;
  text-transform:uppercase;margin-right:20px}
#afterhours .lang{font:600 10px/1 'Inter',sans-serif;letter-spacing:.20em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--line);background:#FFF;color:var(--mid);cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
#afterhours .lang + .lang{border-left:0}
#afterhours .lang.on{background:var(--navy);border-color:var(--navy);color:#FFF}

/* ── the intake queue, fills as the call runs ── */
#afterhours .queue{margin-top:64px;border:1px solid var(--line-2);background:#FBFBFA;
  padding:26px 32px 8px}
#afterhours .qhd{display:flex;align-items:center;gap:12px;padding-bottom:18px;
  border-bottom:1px solid var(--line-2)}
#afterhours .qdot{width:6px;height:6px;border-radius:50%;background:#C2C7CC;flex:none;
  transition:background .4s ease}
#afterhours .queue.live .qdot{background:#37A05A;
  box-shadow:0 0 0 0 rgba(55,160,90,.5);animation:pulse 2.4s ease-out infinite}
#afterhours .qhd b{font:600 10px/1 'Inter',sans-serif;color:#3C424A;letter-spacing:.26em;
  text-transform:uppercase}
#afterhours .qhd s{margin-left:auto;text-decoration:none;font:500 10px/1 'Inter',sans-serif;
  color:var(--soft);letter-spacing:.18em;text-transform:uppercase}
#afterhours .qrows{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
#afterhours .qrows > div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line-2)}
#afterhours .qrows s{text-decoration:none;font:500 9.5px/1.5 'Inter',sans-serif;color:var(--soft);
  letter-spacing:.20em;text-transform:uppercase;flex:none}
#afterhours .qrows b{font:400 14.5px/1.5 'Inter',sans-serif;color:#C2C7CC;text-align:right;
  transition:color .5s ease}
#afterhours .qrows > div.in b{color:#2E333A;font-weight:500}


/* ── the navy band's supporting paragraph, larger and centred ── */
.navy .shead{align-items:center}
.navy .shead p{font:400 19px/1.72 'Inter',sans-serif;max-width:440px}


/* ── the In Court band: copy sits low, clear of the juror seats ── */
.navy.bandlow .sec{padding:230px 0 78px}
.navy.bandlow .shead{margin-bottom:0}
.navy.bandlow .shead p{align-self:flex-end}

/* the accent word on navy runs light blue into white, not a symmetric band */
.navy h2 em{background:linear-gradient(96deg,#6E9AC4 0%,#9CC6EE 34%,#DCEBF9 66%,#FFFFFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}