/* /dwi-attorney/ and /traffic-attorney/. A solid navy strip carries the whole first screen (label, H1, their one line, the rating link, the
   call and the consultation buttons); the photo under it is shortened so strip and photo end above 900 px at 1440 and 844 px at 390; it
   stays pinned and the white sheet slides up over it. Then: the intro, the boxes (equal heights, sized to their content), the navy
   guidance band, the review row. Header is solid (hero false). Hairlines: only the "Charges we defend" list keeps them. */
.pa-stage { --pa-ph: clamp(200px, 34vh, 380px); position: relative; }
.pa-top { position: relative; z-index: 1; }
.pa-strip { background-color: var(--navy); color: #fff; padding: calc(var(--head-h) + 28px) 0 32px; }
.pa-strip__in > * + * { margin-top: 14px; }
.pa-top__label { display: inline-block; padding: 2px 0; color: #fff; }
.pa-top__h { color: #fff; max-width: 1100px; }
.pa-top__proof { display: flex; align-items: center; gap: 14px 28px; }
.pa-top__proof-text > * + * { margin-top: 10px; }
.pa-top__line { color: #fff; max-width: 760px; }
.pa-top__rating { color: #fff; }
/* their NCDD badge, 99 x 100, at its own size, in the proof line (the DWI page only); a 99 px link is far above the 24 px target floor */
.pa-top__ncdd { flex: none; display: block; width: 99px; height: 100px; }
.pa-top__ncdd img { display: block; width: 99px; height: 100px; }
.pa-inline { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pa-inline:hover { text-decoration-thickness: 2px; }
.pa-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pa-strip :focus-visible { outline-color: #fff; }
.pa-media { position: sticky; top: 0; z-index: 0; height: var(--pa-ph); overflow: hidden; background: var(--navy); }
.pa-media picture, .pa-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pa-media--traffic picture, .pa-media--traffic img { object-position: 50% 55%; }
.pa-media--dwi picture, .pa-media--dwi img { object-position: 50% 38%; }       /* the courthouse portico and the base of its dome sit in the strip */
@media (max-width: 767px) { .pa-media--dwi { height: clamp(200px, 27vh, 380px); } }   /* the NCDD badge makes the strip taller; the first screen still ends above 844 px */
.pa-sheet { position: relative; z-index: 2; background: #fff; }
@media (min-width: 768px) {
  .pa-strip { padding: calc(var(--head-h) + 40px) 0 44px; }
  .pa-strip__in > * + * { margin-top: 18px; }
  .pa-actions { margin-top: 26px; }
}

.btn--solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--solid:hover { background: #0e2331; border-color: #0e2331; }

.pa-intro { padding: 44px 0 60px; }
.pa-intro__in { display: grid; gap: 44px; }
.pa-intro__p { max-width: 760px; }
.pa-intro--solo .pa-intro__p { max-width: 860px; }
.pa-aside__h { color: var(--slate-ink); padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.pa-aside__lead { margin: 16px 0 4px; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.025em; }
.pa-charge { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--navy); }
.pa-charge--link:hover span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.arrow { flex: none; }
@media (min-width: 850px) {
  .pa-intro { padding: 80px 0 100px; }
  .pa-intro__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0 8vw; align-items: start; }
  .pa-intro--solo .pa-intro__in { grid-template-columns: minmax(0, 1fr); }
  .pa-aside { position: sticky; top: calc(var(--head-h) + 30px); }
}

/* the boxes: their title at 35 px / 200, equal heights, sized to their content, no numerals, no rules */
.cons { padding: 0 0 64px; }
.cons__lead { margin-top: 20px; max-width: 760px; }
.cons__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: 40px; }
.cons__box { align-content: start; padding: 32px 28px; background: var(--mist); }
.cons__t { font-weight: 200; font-size: 35px; line-height: 42px; letter-spacing: 0.011em; }
.cons__line { margin-top: 20px; }
.cons__btn { margin-top: 36px; }
@media (min-width: 768px) {
  .cons { padding: 0 0 110px; }
  .cons__box { padding: 40px; }
  .cons__list { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .cons__list--3 .cons__box { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .cons__list--3 .cons__box { grid-column: span 2; }
}
/* single words and short phrases (fix wave 3, planner K2): ONE mist box (padding 40) holding a two-column list at 35 px / 200, one column on phones,
   filled column by column; no photograph and no line inside. The DWI "Consequences" (five) and the profile "What's in it for you" (eight). */
.wbox { padding: 28px; background: var(--mist); }
.cons .wbox { margin-top: 40px; }      /* (the .btn--ghost-dark rules further down serve the profile page's scenario closing) */
.wbox__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 64px; margin: 0; padding: 0; list-style: none; }
.wbox__item { margin: 0; font-weight: 200; font-size: 35px; line-height: 42px; letter-spacing: 0.011em; color: var(--navy); overflow-wrap: break-word; }
@media (min-width: 480px) { .wbox { padding: 40px; } }
@media (min-width: 768px) {
  .wbox__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: 28px 64px; }
  .wbox__list--r3 { grid-template-rows: repeat(3, auto); }
  .wbox__list--r4 { grid-template-rows: repeat(4, auto); }
}

.fight { padding: 0 0 72px; }
.fight__in { display: grid; gap: 28px; }
.fight__body { display: grid; gap: 24px; max-width: 760px; }
@media (min-width: 850px) {
  .fight { padding: 0 0 120px; }
  .fight__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 8vw; align-items: start; }
}

/* the guidance band: three role boxes on a panel slightly lighter than the navy (white 12:1, mist 9.5:1 on it), spaced, no line, no marker */
.guid { background: var(--navy); color: #fff; padding: 56px 0 64px; }
.guid :focus-visible { outline-color: var(--gold); }
.guid__p { margin-top: 24px; max-width: 760px; }
.guid__btn { margin-top: 30px; }
.stops { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: 48px; }
.stop { align-content: start; padding: 28px; background: #20394d; }
.stop__years { color: #fff; font-weight: 200; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0.011em; }
.stop__role { margin-top: 12px; font-weight: 300; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: 0.0174em; color: var(--mist); }
@media (min-width: 768px) { .stop { padding: 36px 40px; } }
@media (min-width: 850px) { .guid { padding: 100px 0 120px; } .stops { margin-top: 72px; } }
@media (min-width: 1100px) { .stops { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; } }

.reviews { padding: 56px 0 64px; background: #fff; }
.reviews__sub { margin-top: 18px; max-width: 640px; }
.wall { display: grid; gap: var(--gap); margin-top: 40px; }
.rev { padding: 26px; background: var(--mist); }
.rev--navy { background: var(--navy); color: #fff; }
.rev--navy .rev__big { margin-bottom: 18px; }
.rev--navy :focus-visible { outline-color: var(--gold); }
.rev__q p { margin-bottom: 18px; }
.rev__by { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0.05em; color: var(--slate-ink); }
.rev__name { font-weight: 600; color: var(--navy); }
@media (min-width: 768px) { .wall { grid-template-columns: 1fr 1fr; } .reviews { padding: 80px 0 90px; } }
@media (min-width: 900px) { .wall--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wall { grid-template-columns: repeat(4, 1fr); } .wall--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reviews { padding: 100px 0 120px; } }

/* ---------------------------------------------------------------- /about-attorney-hannibal/ (fix wave 2, R1: his own profile page)
   A navy strip (his first two paragraphs, the buttons, his portrait), then a white sheet of static boxes: his bio, the career (eight boxes), "Why choose
   me" (four boxes), "Why you might be here" (seven rows), "What's in it for you" (eight small boxes), the reviews, the shared contact band.
   No hairlines. Every grid shares one width and one height per row of boxes. */
.ab-strip { background: var(--navy); color: #fff; padding: calc(var(--head-h) + 28px) 0 40px; }
.ab-strip :focus-visible { outline-color: #fff; }
.ab-strip__in { display: grid; gap: 36px; }
.ab-strip__text > * + * { margin-top: 14px; }
.ab-label { display: inline-block; padding: 2px 0; color: #fff; }
.ab-lead__wrap { display: grid; gap: 14px; max-width: 780px; }
.ab-lead { color: #fff; }
.ab-portrait { margin: 0; width: min(100%, 440px); }
.ab-portrait picture { display: block; }
.ab-portrait img { display: block; width: 100%; height: auto; }
.ab-portrait__cap { display: grid; gap: 2px; padding-top: 14px; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0.05em; color: var(--pale); }
.ab-portrait__name { font-weight: 600; color: #fff; }
@media (min-width: 768px) { .ab-strip { padding: calc(var(--head-h) + 40px) 0 48px; } .ab-strip__text > * + * { margin-top: 18px; } }
@media (min-width: 850px) {
  .ab-strip__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0 8vw; align-items: start; }
  .ab-portrait { justify-self: end; }
}

.ab-sheet { background: #fff; }
.ab-bio { padding: 56px 0 64px; }
.ab-bio__in { display: grid; gap: 28px; }
.ab-bio__body { display: grid; gap: 24px; max-width: 760px; }
.ab-cred { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 8px; }
.ab-cred p { margin: 0; }
.ab-cred__badge { display: block; flex: none; width: 99px; height: 100px; }
.ab-cred__badge img { display: block; width: 99px; height: 100px; }
@media (min-width: 850px) {
  .ab-bio { padding: 100px 0 110px; }
  .ab-bio__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 8vw; align-items: start; }
}

/* (fix wave 3, planner K1: the career band and the scenario cards on this page are the home page's own, devices.css) */
.ab-why { padding: 56px 0 64px; background: #fff; }
.ab-why__p { margin-top: 20px; max-width: 760px; }
.ab-why__sub { margin-top: 44px; }
.ab-boxes { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--gap); margin-top: 28px; }
.ab-box { align-content: start; padding: 28px; background: var(--mist); }
.ab-box__l { margin-top: 12px; }
.ab-why__btn { margin-top: 36px; }
@media (min-width: 640px) { .ab-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 850px) { .ab-why { padding: 100px 0 110px; } .ab-box { padding: 36px 32px; } }

.btn--ghost-dark { color: var(--navy); border-color: var(--navy); background: transparent; }
.btn--ghost-dark:hover { background: var(--mist); }

.ab-for { padding: 56px 0 64px; background: #fff; }
.ab-for__p { margin-top: 18px; max-width: 760px; }
.ab-for .wbox { margin-top: 36px; }      /* "What's in it for you": the eight words are one mist box (planner K2, .wbox above) */
@media (min-width: 850px) { .ab-for { padding: 100px 0 110px; } .ab-for .wbox { margin-top: 56px; } }