/* ════════════════════════════════════════════════════════════════════════
 * PI Base v2.0 — Hero Banner Block
 * Layered composition: navy texture bg + ghost text + lawyers PNG + content
 * No video — fast page load, better Core Web Vitals.
 * v2.0.1 — Fixed photo flush-to-bottom anchoring.
 * ════════════════════════════════════════════════════════════════════════ */

.pi-hero-banner {
  position: relative;
  background: var(--pi-navy);
  color: var(--pi-white);
  min-height: 780px;
  padding-top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height));
  padding-bottom: 0;             /* CHANGED — photo flush to bottom */
  overflow: hidden;
  isolation: isolate;
}

/* Texture background layer */
.pi-hero-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 1;
}

/* v2.0.6 — match prototype: directional fade right-to-left, leaves the
 * left side mostly clear so the texture reads through. Only the right side
 * gets a soft navy overlay for headline legibility. */
.pi-hero-banner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(265deg, rgba(0, 17, 78, 0.55) 0%, rgba(0, 17, 78, 0.15) 45%, rgba(0, 17, 78, 0) 70%);
}

/* Soft bottom fade to blend into the gold results strip below */
.pi-hero-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(0deg, rgba(0, 17, 78, 0.6) 0%, rgba(0, 17, 78, 0.25) 50%, rgba(0, 17, 78, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Ghost text layer ("INJURED?") — v2.0.6 fix
 * Position: top-right corner, bleeding off the right edge (matches prototype).
 * Style: upright (no italic), Playfair Display, stroked outline only.
 */
.pi-hero-banner__ghost {
  position: absolute;
  top: 24px;
  right: -2vw;
  font-family: var(--pi-font-serif);
  font-weight: 700;
  font-size: clamp(140px, 18vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.015em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.18);
  text-stroke: 1.5px rgba(255, 255, 255, 0.18);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  z-index: 2;
}

/* Lawyers PNG — flush to bottom of section */
.pi-hero-banner__photo {
  position: absolute;
  left: 0;
  bottom: 0;                     /* flush */
  width: 54%;
  max-width: 780px;
  z-index: 3;
  pointer-events: none;
  line-height: 0;                /* removes inline-image baseline gap */
}

.pi-hero-banner__photo img {
  width: 100%;
  height: auto;
  display: block;                /* removes baseline gap */
  margin-bottom: 0;
  vertical-align: bottom;
}

/* Content column */
.pi-hero-banner__inner {
  position: relative;
  z-index: 4;
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding-left:  var(--pi-content-padding);
  padding-right: var(--pi-content-padding);
  padding-bottom: 80px;          /* breathing room for content above bottom edge */
  display: flex;
  align-items: center;
  min-height: calc(780px - var(--pi-topbar-height) - var(--pi-nav-height) - var(--pi-notice-height) - 80px);
}

.pi-hero-banner__content {
  margin-left: auto;
  max-width: 640px;
  width: 100%;
}

.pi-hero-banner__eyebrow {
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-base);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pi-gold);
  margin-bottom: var(--pi-space-5);
}

.pi-hero-banner__title {
  font-family: var(--pi-font-serif);
  font-size: clamp(46px, 5.6vw, 86px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: var(--pi-space-6);
}

.pi-hero-banner__title-line1 {
  color: var(--pi-white);
  font-weight: 700;
  display: block;
}

.pi-hero-banner__title-line2 {
  background: var(--pi-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  font-weight: 800;
  display: block;
}

.pi-hero-banner__sub {
  font-size: var(--pi-text-lg);
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--pi-space-8);
  max-width: 580px;
}

.pi-hero-banner__ctas {
  display: flex;
  gap: var(--pi-space-4);
  flex-wrap: wrap;
}

.pi-hero-banner__ctas .pi-btn-gold,
.pi-hero-banner__ctas .pi-btn-outline-white {
  padding: 18px 32px;
  font-size: var(--pi-text-base);
}

/* ───── INNER PAGE BANNER (page.php template) ───── */
.pi-page-banner {
  position: relative;
  background: var(--pi-navy);
  color: var(--pi-white);
  padding-top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height) + var(--pi-space-20));
  padding-bottom: var(--pi-space-20);
  overflow: hidden;
}

.pi-page-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}

.pi-page-banner__inner {
  position: relative;
  z-index: 2;
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding-left:  var(--pi-content-padding);
  padding-right: var(--pi-content-padding);
}

.pi-page-banner__eyebrow {
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-sm);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pi-gold);
  margin-bottom: var(--pi-space-4);
}

.pi-page-banner__title {
  font-family: var(--pi-font-serif);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  margin-bottom: var(--pi-space-4);
}

.pi-page-banner__sub {
  font-size: var(--pi-text-lg);
  color: rgba(255,255,255,0.8);
  max-width: 680px;
}

/* ───── RESPONSIVE ───── */
@media (max-width: 1100px) {
  .pi-hero-banner__photo { width: 50%; opacity: 0.5; }
  .pi-hero-banner__content { max-width: none; }
}

@media (max-width: 768px) {
  .pi-hero-banner {
    min-height: auto;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  /* v2.0.10 — show the attorneys PNG on mobile, flowing below the content
     (was display:none). Switch from absolute to relative full-width. */
  .pi-hero-banner__photo {
    display: block;
    position: relative;
    order: 2;                       /* v2.0.22 — render BELOW the text, not above it */
    width: 100%;
    max-width: 520px;
    margin: var(--pi-space-6) auto 0; /* top breathing room; bottom flush to the case-results strip */
    left: auto;
    bottom: auto;
    opacity: 1;
  }
  /* v2.0.6 — keep ghost top-right positioning on mobile, just smaller */
  .pi-hero-banner__ghost {
    font-size: clamp(64px, 16vw, 130px);
    top: 96px;          /* v2.0.26 — push below the logo/header so it isn't crammed at the very top */
    right: -1vw;
    opacity: 0.5;
  }
  .pi-hero-banner__inner { order: 1; min-height: auto; padding-top: var(--pi-space-6); padding-bottom: 0; }
  .pi-hero-banner__content { max-width: 100%; }
  .pi-hero-banner__ctas .pi-btn-gold,
  .pi-hero-banner__ctas .pi-btn-outline-white { width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════════
 * UNIFIED PAGE BANNER (v2.0.3)
 * Used by every inside-page template via:
 *   get_template_part('template-parts/sections/page-banner')
 *
 * Replaces the old per-template .page-hero blocks.
 * Backwards-compatible: old .page-hero CSS still works for legacy templates.
 * ════════════════════════════════════════════════════════════════════════ */

.pi-page-banner {
  position: relative;
  background: var(--pi-navy);
  color: var(--pi-white);
  padding-top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height) + var(--pi-space-16));
  padding-bottom: var(--pi-space-16);
  overflow: hidden;
  isolation: isolate;
}

/* Background image layer (featured image OR ACF banner_image) */
.pi-page-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 1;
}

/* Dark navy gradient overlay so text stays readable on photos */
.pi-page-banner.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(0,17,78,0.92) 0%,
    rgba(0,17,78,0.85) 45%,
    rgba(0,17,78,0.6)  100%
  );
}

/* Stronger right-side fade so right-aligned faces remain visible if used */
.pi-page-banner.bg-from-featured::before {
  background: linear-gradient(
    95deg,
    rgba(0,17,78,0.9) 0%,
    rgba(0,17,78,0.75) 55%,
    rgba(0,17,78,0.45) 100%
  );
}

/* Ghost text layer (Haymond-style large outlined text behind title) */
.pi-page-banner__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--pi-font-serif);
  font-weight: 800;
  font-size: clamp(110px, 14vw, 220px);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.14);
  text-stroke: 1px rgba(255,255,255,0.14);
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.pi-page-banner__inner {
  position: relative;
  z-index: 4;
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding-left:  var(--pi-content-padding);
  padding-right: var(--pi-content-padding);
}

/* Breadcrumb */
.pi-page-banner__breadcrumb {
  font-size: var(--pi-text-xs);
  letter-spacing: 0.3px;
  margin-bottom: var(--pi-space-4);
}
.pi-page-banner__bc-link    { color: rgba(255,255,255,0.55); text-decoration: none; }
.pi-page-banner__bc-link:hover { color: var(--pi-gold); }
.pi-page-banner__bc-sep     { color: rgba(255,255,255,0.25); padding: 0 5px; }
.pi-page-banner__bc-current { color: rgba(255,255,255,0.85); }

/* Eyebrow */
.pi-page-banner__eyebrow {
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-base);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pi-gold);
  margin-bottom: var(--pi-space-3);
}

/* Title */
.pi-page-banner__title {
  font-family: var(--pi-font-serif);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  margin: 0 0 var(--pi-space-4);
  color: var(--pi-white);
}

/* Sub */
.pi-page-banner__sub {
  font-size: var(--pi-text-lg);
  color: rgba(255,255,255,0.8);
  max-width: 680px;
  margin: 0 0 var(--pi-space-6);
  line-height: 1.6;
}

/* Trust strip */
.pi-page-banner__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pi-space-3);
  margin-bottom: var(--pi-space-6);
  font-size: var(--pi-text-sm);
  color: rgba(255,255,255,0.85);
}
.pi-page-banner__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pi-page-banner__trust-item svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--pi-gold);
}
.pi-page-banner__trust-sep { color: rgba(255,255,255,0.3); }

/* CTAs */
.pi-page-banner__ctas {
  display: flex;
  gap: var(--pi-space-3);
  flex-wrap: wrap;
}
.pi-page-banner__ctas .pi-btn-gold,
.pi-page-banner__ctas .pi-btn-outline-white {
  padding: 14px 26px;
  font-size: var(--pi-text-sm);
}

/* Responsive */
@media (max-width: 768px) {
  .pi-page-banner {
    padding-top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height) + var(--pi-space-10));
    padding-bottom: var(--pi-space-12);
  }
  .pi-page-banner__ghost { font-size: clamp(60px, 22vw, 120px); }
  .pi-page-banner__title { font-size: clamp(32px, 8vw, 48px); }
  .pi-page-banner__trust { font-size: var(--pi-text-xs); }
  .pi-page-banner__ctas .pi-btn-gold,
  .pi-page-banner__ctas .pi-btn-outline-white { width: 100%; justify-content: center; }
}


/* ============================================================
   GOLD "CASE RESULTS" STRIP  (v2.0.4 — Haymond-style)
   ------------------------------------------------------------
   Rendered immediately below .pi-page-banner on every inside
   page (auto-included by page-banner.php). Shows the firm's
   top 4 verdicts globally.
   ============================================================ */

.pi-results-strip {
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg, #f7d878 0%, #e8a020 45%, #c08515 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 24px rgba(0, 0, 0, 0.12);
  padding: 0 var(--pi-space-6, 24px);
}

.pi-results-strip__inner {
  max-width: var(--pi-content-max, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto repeat(4, 1fr) auto;
  align-items: stretch;
  gap: 0;
}

.pi-results-strip__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--pi-navy, #00114e);
  padding: 22px 36px 22px 0;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
}

.pi-results-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.pi-results-strip__item:last-of-type {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.pi-results-strip__amount {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--pi-navy, #00114e);
  display: flex;
  align-items: flex-start;
  gap: 2px;
  letter-spacing: -0.5px;
}

.pi-results-strip__amount sup {
  font-size: 22px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1;
}

.pi-results-strip__num {
  font-size: 42px;
  line-height: 1;
}

.pi-results-strip__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pi-navy, #00114e);
  margin-top: 6px;
  opacity: 0.85;
}

.pi-results-strip__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 24px;
}

.pi-btn-view-all {
  display: inline-block;
  background: var(--pi-navy, #00114e);
  color: var(--pi-gold, #c9943a);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pi-btn-view-all:hover {
  background: #001f7a;
  color: #e9b956;
  transform: translateY(-1px);
}

/* Responsive — collapse to vertical stack on mobile */
@media (max-width: 1024px) {
  .pi-results-strip__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .pi-results-strip__label {
    grid-column: 1 / -1;
    text-align: center;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding: 18px 0;
    justify-content: center;
  }
  .pi-results-strip__label br { display: none; }
  .pi-results-strip__item {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 18px 12px;
  }
  .pi-results-strip__item:nth-of-type(2n) { border-right: none; }
  .pi-results-strip__cta {
    grid-column: 1 / -1;
    padding: 20px 0;
  }
  .pi-results-strip__amount,
  .pi-results-strip__num { font-size: 34px; }
  .pi-results-strip__amount sup { font-size: 18px; }
}

@media (max-width: 480px) {
  .pi-results-strip__amount,
  .pi-results-strip__num { font-size: 30px; }
  .pi-results-strip__cat { font-size: 10px; letter-spacing: 1.2px; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * .page-hero — LEGACY BANNER STYLING (blog archive, blog single, attorney
 * CPT archive). The markup existed but had NO CSS, so these banners were
 * invisible. Styled to match the unified pi-page-banner (navy, header-offset).
 * ═══════════════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  background: var(--pi-navy);
  color: var(--pi-white);
  padding-top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height) + var(--pi-space-16));
  padding-bottom: var(--pi-space-16);
  overflow: hidden;
}
.page-hero-inner {
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding: 0 var(--pi-content-padding);
  position: relative;
  z-index: 2;
}
.page-hero .hero-eyebrow {
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-sm);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pi-gold);
  margin-bottom: var(--pi-space-3);
}
.page-hero .page-h1 {
  font-family: var(--pi-font-serif);
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.08;
  color: var(--pi-white);
  margin: 0;
}
.page-hero .page-hero-sub {
  font-size: var(--pi-text-lg);
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin-top: var(--pi-space-4);
  max-width: 680px;
}
.page-hero a { color: rgba(255,255,255,0.6); }
.page-hero a:hover { color: var(--pi-gold); }
@media (max-width: 768px) {
  .page-hero { padding-bottom: var(--pi-space-12); }
}


/* ════════════════════════════════════════════════════════════════════════
 * v2.0.87 — hero banner: keep the photo and the headline together
 *
 * THE BUG
 *   The photo was pinned to the SECTION's left edge (left:0) and capped at
 *   max-width:780px, while the headline sat at the right edge of the centred
 *   1500px content band. Below about 1450px those two happen to meet. Above
 *   it the photo stops growing — it has hit its cap — but the content band
 *   keeps sliding right with the viewport, so a navy gap opens between them
 *   and grows with every extra pixel of screen. On a 2000px display that gap
 *   is roughly 330px, which is what reads as the photo shooting left and the
 *   text shooting right.
 *
 *   The second half of it: the headline was capped at 640px with a type size
 *   reaching 86px. "Long Island's Trusted" does not fit on one line in that
 *   box, so the H1 broke into four lines on exactly the wide screens where
 *   there was most room to spare.
 *
 * THE FIX
 *   Anchor the photo to the CONTENT BAND rather than the viewport, by
 *   starting at the band's left edge (50% minus half the band). Both halves
 *   of the composition now live inside the same centred 1500px box, so they
 *   stay a fixed distance apart at any width and the pair reads as centred.
 *
 *   Then give the headline enough room to set "Long Island's Trusted" on one
 *   line: a wider column and a lower ceiling on the type.
 * ════════════════════════════════════════════════════════════════════════ */
/* ── The two numbers worth tuning ──────────────────────────────────────────
   --pi-hero-photo-w   how wide the attorneys PNG is. Because it is pinned to
                       the bottom edge, width is the ONLY thing that controls
                       its height — bigger here means their heads rise. Raise
                       --pi-hero-min-h alongside it or the top of the image is
                       clipped by the section's overflow.
   --pi-hero-gap       clear space between the photo and the first letter of
                       the headline.
   Change these two and nothing else needs touching.                        */
:root {
  --pi-hero-photo-w: 58%;
  --pi-hero-photo-max: 880px;
  --pi-hero-gap: 72px;
  --pi-hero-min-h: 840px;
}

@media (min-width: 1101px) {
  .pi-hero-banner {
    min-height: var(--pi-hero-min-h);
  }

  .pi-hero-banner__photo {
    left: 50%;
    margin-left: calc( var(--pi-content-max) / -2 );
    width: min(var(--pi-hero-photo-w), var(--pi-hero-photo-max));
    max-width: none;
  }

  /* The headline column starts where the photo ends, plus the gap. Written as
     a calc rather than a fixed max-width so the two stay related: widen the
     photo and the text moves right with it instead of being overlapped. */
  .pi-hero-banner__content {
    max-width: calc( var(--pi-content-max)
                     - min(var(--pi-hero-photo-w), var(--pi-hero-photo-max))
                     - var(--pi-hero-gap) );
    min-width: 560px;
  }

  .pi-hero-banner__inner {
    min-height: calc( var(--pi-hero-min-h)
                      - var(--pi-topbar-height) - var(--pi-nav-height) - var(--pi-notice-height) - 80px );
  }

  .pi-hero-banner__title {
    /* 86px forced a four-line H1; 66 keeps "Long Island's Trusted" on one
       line inside the narrower column the bigger photo leaves behind. */
    font-size: clamp(42px, 4.2vw, 66px);
  }
}

/* Below the point where the band stops growing, the gutter does the centring.
   Without this the photo keeps its -750px offset against a band narrower than
   the viewport and drifts back out to the left. */
@media (min-width: 1101px) and (max-width: 1560px) {
  .pi-hero-banner__photo {
    left: 0;
    margin-left: 0;
  }
}

/* ============================================================
 * v2.0.103 — COMPACT BANNER ON ATTORNEY PROFILES
 * The attorney banner is always plain navy (2.0.101): no photo, no sub
 * copy, just breadcrumb, eyebrow, name and the two CTAs. At the template's
 * full practice-page scale that content floats in a sea of navy — the gap
 * between the header and the breadcrumb alone read as a mistake. Profiles
 * get tighter vertical padding and a smaller (still serif, still big)
 * name. Scoped by body class; every other banner is untouched.
 * ============================================================ */
/* v2.0.105 — tightened further after 2.0.103 still read as too much navy.
   The attorney banner is just a name + two CTAs; use practice-page scale
   and the content floats. !important ends the cascade race for good. */
body.single-pi_attorney .pi-page-banner {
  padding-top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height) + 16px) !important;
  padding-bottom: 24px !important;
}
body.single-pi_attorney .pi-page-banner__breadcrumb { margin-bottom: 10px !important; }
body.single-pi_attorney .pi-page-banner__eyebrow { margin-bottom: 6px !important; }
body.single-pi_attorney .pi-page-banner__title {
  font-size: clamp(30px, 3vw, 44px) !important;
  margin: 0 0 14px !important;
  text-transform: none; /* the attorney post title is editor-entered; CSS won't force caps */
}
body.single-pi_attorney .pi-page-banner__trust { margin-bottom: 14px !important; }
@media (max-width: 768px) {
  body.single-pi_attorney .pi-page-banner {
    padding-top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height) + 12px) !important;
    padding-bottom: 20px !important;
  }
  body.single-pi_attorney .pi-page-banner__title { font-size: clamp(26px, 7vw, 36px) !important; }
}