/* ════════════════════════════════════════════════════════════════════════
 * PI Base v2.0 — Content
 * Long-form content for page.php, single.php, and CPT singles.
 * ════════════════════════════════════════════════════════════════════════ */

.pi-content {
  padding-top:    var(--pi-space-16);
  padding-bottom: var(--pi-space-20);
}

.pi-content__inner {
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding-left:  var(--pi-content-padding);
  padding-right: var(--pi-content-padding);
}

.pi-content--with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--pi-space-16);
  align-items: start;
}

.pi-content__main {
  font-size: var(--pi-text-base);
  line-height: 1.7;
  color: var(--pi-gray-700);
}

.pi-content__main h1,
.pi-content__main h2,
.pi-content__main h3,
.pi-content__main h4 {
  color: var(--pi-navy);
  margin-top: var(--pi-space-10);
}

.pi-content__main h1:first-child,
.pi-content__main h2:first-child,
.pi-content__main h3:first-child { margin-top: 0; }

.pi-content__main p { margin-bottom: var(--pi-space-5); font-size: var(--pi-text-lg); line-height: 1.7; }

.pi-content__main ul, .pi-content__main ol {
  padding-left: var(--pi-space-6);
  margin-bottom: var(--pi-space-5);
  font-size: var(--pi-text-lg);
  line-height: 1.7;
}

.pi-content__main li { margin-bottom: var(--pi-space-2); }

.pi-content__main a:not([class*="btn"]):not([class*="button"]) {
  color: var(--pi-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--pi-gold);
  text-underline-offset: 3px;
}

.pi-content__main a:not([class*="btn"]):not([class*="button"]):hover { color: var(--pi-navy); }

.pi-content__main blockquote {
  border-left: 4px solid var(--pi-gold);
  padding: var(--pi-space-5) var(--pi-space-8);
  background: var(--pi-gray-50);
  margin: var(--pi-space-8) 0;
  font-style: italic;
  color: var(--pi-navy);
}

.pi-content__main img {
  border-radius: var(--pi-radius-md);
  margin: var(--pi-space-8) 0;
}

/* Sidebar */
.pi-sidebar {
  position: sticky;
  top: calc(var(--pi-topbar-height) + var(--pi-nav-height) + var(--pi-notice-height) + var(--pi-space-6));
}

.pi-sidebar__card {
  background: var(--pi-gray-50);
  border-radius: var(--pi-radius-md);
  padding: var(--pi-space-6);
  margin-bottom: var(--pi-space-6);
}

.pi-sidebar__card--gold {
  background: var(--pi-navy);
  color: var(--pi-white);
  border-top: 4px solid var(--pi-gold);
}

.pi-sidebar__title {
  font-family: var(--pi-font-serif);
  font-size: var(--pi-text-xl);
  margin-bottom: var(--pi-space-4);
  color: var(--pi-navy);
}

.pi-sidebar__card--gold .pi-sidebar__title { color: var(--pi-white); }

@media (max-width: 1024px) {
  .pi-content--with-sidebar { grid-template-columns: 1fr; }
  .pi-sidebar { position: static; }
}

/* Breadcrumbs */
.pi-breadcrumbs {
  font-size: var(--pi-text-sm);
  color: var(--pi-gray-500);
  margin-bottom: var(--pi-space-6);
}

.pi-breadcrumbs a { color: var(--pi-gold-deep); }
.pi-breadcrumbs .sep { margin: 0 var(--pi-space-2); opacity: 0.4; }

/* Pagination */
.pi-pagination {
  display: flex;
  justify-content: center;
  gap: var(--pi-space-2);
  margin-top: var(--pi-space-12);
}

.pi-pagination a,
.pi-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--pi-space-4);
  border-radius: var(--pi-radius-sm);
  font-size: var(--pi-text-sm);
  font-weight: 600;
  color: var(--pi-navy);
  background: var(--pi-gray-50);
  border: 1px solid var(--pi-border);
}

.pi-pagination .current { background: var(--pi-navy); color: var(--pi-white); border-color: var(--pi-navy); }
.pi-pagination a:hover { background: var(--pi-gold); color: var(--pi-navy); border-color: var(--pi-gold); }

/* ═══════════════════════════════════════════════════
 * INSIDE-PAGE LAYOUT — two-column content + sticky sidebar
 * Used by: practice-area, verdicts, attorneys, landing,
 * archives, single-* templates, page.php.
 * (These classes previously had NO styles — pages rendered
 *  full-bleed and stacked like mobile on desktop.)
 * ═══════════════════════════════════════════════════ */
.content-wrap {
  background: var(--pi-white);
  padding: var(--pi-space-20) 0;
}

.content-grid {
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding: 0 var(--pi-content-padding);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--pi-space-16);
  align-items: start;
}

/* Templates that render a single column (no <aside class="sidebar">) */
.content-grid:not(:has(.sidebar)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}

.main-col {
  min-width: 0;
}

.main-col > * + * { margin-top: var(--pi-space-5); }

/* Readable long-form body inside the main column */
.main-col h2 {
  font-family: var(--pi-font-serif);
  font-size: clamp(26px, 2.6vw, 36px);
  color: var(--pi-navy);
  line-height: 1.15;
  margin-top: var(--pi-space-10);
  margin-bottom: var(--pi-space-4);
}
.main-col h3 {
  font-family: var(--pi-font-serif);
  font-size: var(--pi-text-2xl);
  color: var(--pi-navy);
  margin-top: var(--pi-space-8);
  margin-bottom: var(--pi-space-3);
}
.main-col p,
.main-col li {
  font-size: var(--pi-text-base);
  line-height: 1.8;
  color: var(--pi-gray-700);
}
.main-col ul,
.main-col ol { padding-left: 1.4em; }
.main-col li { margin-bottom: var(--pi-space-2); }
.main-col a:not([class*="btn"]):not([class*="button"]) { color: var(--pi-gold-deep); text-decoration: underline; }
.main-col a:not([class*="btn"]):not([class*="button"]):hover { color: var(--pi-navy); }

/* Self-contained section blocks (CTA banner, etc.) dropped into body content
   must keep their own styling instead of inheriting body-column overrides. */
.main-col .cta-banner h2,
.main-col .cta-h2 { color: var(--pi-white); }
.main-col .cta-banner a { text-decoration: none; }

/* Button-style links in body content are never underlined. Covers theme
   buttons (btn-*), Gutenberg core buttons (wp-block-button__link,
   wp-element-button), and the verdict "view all" link. Block-editor button
   classes contain "button" (not "btn"), so they're matched explicitly here. */
.pi-content__main a.wp-block-button__link,
.pi-content__main a.wp-element-button,
.pi-content__main a.verdict-all-link,
.main-col a.wp-block-button__link,
.main-col a.wp-element-button,
.main-col a.verdict-all-link { text-decoration: none; }

.sidebar { min-width: 0; }

/* Stack to single column on tablet/mobile and add mobile gutters */
@media (max-width: 1024px) {
  .content-wrap { padding: var(--pi-space-16) 0; }
  .content-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pi-space-12);
    padding: 0 var(--pi-content-padding-mobile);
  }
  .content-grid:not(:has(.sidebar)) { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════
 * VERDICT FILTER TABS (verdicts archive template)
 * .vf-btn had no styles — rendered as bare buttons that
 * washed out on hover. Pill buttons: navy outline → gold.
 * ═══════════════════════════════════════════════════ */
.verdict-filters {
  justify-content: center;
}
.vf-btn {
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-sm);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pi-navy);
  background: var(--pi-white);
  border: 1.5px solid var(--pi-gray-300);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--pi-trans-base), color var(--pi-trans-base), border-color var(--pi-trans-base);
}
.vf-btn:hover {
  border-color: var(--pi-gold);
  color: var(--pi-navy);
  background: rgba(232,160,32,0.10);
}
.vf-btn.vf-active {
  background: var(--pi-navy);
  border-color: var(--pi-navy);
  color: var(--pi-white);
}
.vf-btn.vf-active:hover {
  background: var(--pi-navy-mid);
  color: var(--pi-white);
}

/* ═══════════════════════════════════════════════════════════════════════
 * GRAVITY FORMS — base styling (contact / free-consultation pages)
 * The raw GF output was unstyled (default inputs, bordered name fieldset).
 * This gives a clean light-background form in the firm's navy/gold system.
 * Covers GF 2.5+ and legacy markup.
 * ═══════════════════════════════════════════════════════════════════════ */
.gform_wrapper {
  max-width: 720px;
  margin: var(--pi-space-8) 0 0;
}
.gform_wrapper form { margin: 0; }

/* Optional GF form title/description */
.gform_wrapper .gform_title {
  font-family: var(--pi-font-serif);
  font-size: clamp(24px, 2.4vw, 34px);
  color: var(--pi-navy);
  margin: 0 0 var(--pi-space-2);
}
.gform_wrapper .gform_description {
  display: block;
  color: var(--pi-gray-700);
  margin-bottom: var(--pi-space-6);
}

/* Field spacing */
.gform_wrapper .gform_fields { display: grid; gap: var(--pi-space-5); }
.gform_wrapper .gfield { margin: 0; }

/* Remove the default name fieldset border/legend look */
.gform_wrapper fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.gform_wrapper legend.gfield_label,
.gform_wrapper .gfield_label {
  display: block;
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--pi-navy);
  margin-bottom: var(--pi-space-2);
  float: none;
  width: auto;
}
.gform_wrapper .gfield_required { color: var(--pi-gold-deep, #b6852b); margin-left: 3px; }

/* Inputs */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  padding: 13px 15px;
  background: var(--pi-white);
  border: 1px solid var(--pi-gray-300, #cbd2d9);
  border-radius: var(--pi-radius-sm, 4px);
  color: var(--pi-text, #1a1917);
  font-family: var(--pi-font-sans);
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--pi-trans-base), box-shadow var(--pi-trans-base);
  -webkit-appearance: none;
  appearance: none;
}
.gform_wrapper textarea { min-height: 140px; resize: vertical; }
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: var(--pi-gray-500, #8a9099); }
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--pi-gold);
  box-shadow: 0 0 0 3px rgba(232,160,32,0.15);
}

/* Multi-input rows (first/last name, etc.) */
.gform_wrapper .ginput_complex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pi-space-4);
}
.gform_wrapper .ginput_complex > span { display: flex; flex-direction: column; }
.gform_wrapper .ginput_complex label {
  order: 2;
  font-size: var(--pi-text-xs);
  color: var(--pi-gray-500);
  margin-top: 4px;
  font-family: var(--pi-font-sans);
  text-transform: none;
  letter-spacing: 0;
}

/* Submit button */
.gform_wrapper .gform_footer { margin-top: var(--pi-space-6); padding: 0; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 40px;
  background: var(--pi-gold-gradient, linear-gradient(135deg, #f5b93a 0%, #e8a020 100%));
  color: var(--pi-navy);
  font-family: var(--pi-font-cond);
  font-size: var(--pi-text-base);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--pi-radius-sm, 4px);
  cursor: pointer;
  box-shadow: var(--pi-shadow-gold, 0 8px 24px rgba(232,160,32,0.3));
  transition: transform var(--pi-trans-base), box-shadow var(--pi-trans-base);
  width: auto;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
  transform: translateY(-2px);
  color: var(--pi-navy);
}

/* Validation messaging */
.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .validation_message {
  color: #b3261e;
  font-size: var(--pi-text-sm);
  margin-top: 4px;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea { border-color: #b3261e; }

@media (max-width: 600px) {
  .gform_wrapper .ginput_complex { grid-template-columns: 1fr; }
}

/* Safeguard: if a GF form sits on the dark hero card, keep it readable */
.hero-form-card .gform_wrapper .gfield_label,
.hero-form-card .gform_wrapper .gform_title { color: var(--pi-white); }
.hero-form-card .gform_wrapper input,
.hero-form-card .gform_wrapper textarea,
.hero-form-card .gform_wrapper select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: var(--pi-white);
}
.hero-form-card .gform_wrapper input::placeholder,
.hero-form-card .gform_wrapper textarea::placeholder { color: rgba(255,255,255,0.45); }

/* ── [pi_town_grid] — Service Areas hub grid ── */
.pi-town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 32px 0;
}
.pi-town-grid__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  border: 1px solid var(--pi-gray-200);
  border-radius: 8px;
  color: var(--pi-navy);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.pi-town-grid__item:hover {
  border-color: var(--pi-gold);
  background: var(--pi-gray-50);
}
.pi-town-grid__item svg {
  width: 16px;
  height: 16px;
  fill: var(--pi-gold);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
 * BLOG SINGLE — two-column (content + sticky sidebar)  [v2.0.25]
 * ════════════════════════════════════════════════════════════════════ */
.blog-single-grid {
  max-width: var(--pi-content-max, 1200px);
  margin: 0 auto;
  padding: 60px var(--pi-content-padding, 24px) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.blog-single-main { min-width: 0; }
.blog-single-feat { margin-bottom: 36px; border-radius: 6px; overflow: hidden; }
.blog-single-nav {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 32px; margin-top: 40px; border-top: 1px solid var(--gray-100, #e9ecf2);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.blog-single-nav a { color: var(--navy, #00114e); max-width: 48%; }
.blog-single-nav a:hover { color: var(--pi-gold, #e8a020); }

.blog-single-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; }
.bs-widget { background: #fff; border: 1px solid var(--gray-100, #e9ecf2); border-radius: 8px; padding: 22px 22px 24px; }
.bs-widget__title {
  font-family: var(--pi-font-cond, sans-serif); font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy, #00114e);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--pi-gold, #e8a020);
}

/* Share */
.bs-share { display: flex; gap: 10px; }
.bs-share__btn {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--navy, #00114e); color: #fff; transition: background .15s, transform .15s;
}
.bs-share__btn:hover { background: var(--pi-gold, #e8a020); color: var(--navy, #00114e); transform: translateY(-2px); }
.bs-share__btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Latest articles */
.bs-latest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bs-latest__item { display: flex; gap: 12px; align-items: flex-start; }
.bs-latest__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; display: block; }
.bs-latest__thumb img { width: 64px; height: 64px; object-fit: cover; display: block; }
.bs-latest__thumb--ph { display: block; width: 64px; height: 64px; background: var(--navy, #00114e); opacity: .12; }
.bs-latest__body { min-width: 0; }
.bs-latest__title { display: block; font-family: var(--pi-font-serif, Georgia, serif); font-size: 14px; line-height: 1.3; color: var(--navy, #00114e); font-weight: 600; }
.bs-latest__title:hover { color: var(--pi-gold, #e8a020); }
.bs-latest__date { display: block; font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 4px; }
.bs-latest__all { display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--navy, #00114e); }
.bs-latest__all:hover { color: var(--pi-gold, #e8a020); }

/* Sidebar CTA card */
.bs-widget--cta { background: var(--navy, #00114e); border-color: var(--navy, #00114e); text-align: center; }
.bs-cta__title { font-family: var(--pi-font-serif, Georgia, serif); color: #fff; font-size: 20px; margin: 0 0 8px; }
.bs-cta__sub { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.bs-cta__btn { width: 100%; justify-content: center; }
.bs-cta__phone { display: block; margin-top: 12px; color: var(--pi-gold, #e8a020); font-weight: 700; font-size: 16px; }

@media (max-width: 980px) {
  .blog-single-grid { grid-template-columns: 1fr; gap: 40px; }
  .blog-single-sidebar { position: static; }
}

/* Attorney profile: photo + bio, collapses on mobile (was an inline grid that overflowed) [v2.0.26] */
.atty-profile-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}
.atty-profile-grid > * { min-width: 0; }              /* prevent long words/images from forcing overflow */
.atty-profile-grid img { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .atty-profile-grid { grid-template-columns: 1fr; gap: 26px; }
  .atty-profile-grid img { max-width: 320px; margin: 0 auto; display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   v2.0.67 — REUSABLE CONTENT CARDS

   Styling for native Gutenberg Group blocks, applied by typing a class
   into the block's "Additional CSS class(es)" field in the sidebar.

   Nothing here is page-specific and nothing needs a custom template.
   Editors keep working in normal blocks; these just give three shapes
   that core cannot produce on its own.

     pi-status   green-flagged status card (for "latest update" notes)
     pi-callout  white card, centred, for a single primary action
     pi-steps    equal-width step boxes from an inner columns block
   ══════════════════════════════════════════════════════════════════ */

/* ── status card ──
   Group block with class pi-status. Inside it:
     paragraph .pi-status__pill   optional status chip, floats top right
     paragraph .pi-status__label  small green label with the dot
     heading h3                   the date, set large in the serif
     anything else                normal body copy
*/
.entry-content .pi-status {
  position: relative;
  background: #fff;
  border: 1px solid var(--pi-gray-100, #eaecf0);
  border-left: 4px solid #2e9e5b;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 17, 46, .07);
  padding: 30px 34px;
  margin: 0 0 30px;
}
.entry-content .pi-status > *:last-child { margin-bottom: 0; }

.entry-content .pi-status__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #2e9e5b;
  margin: 0 0 4px;
}
.entry-content .pi-status__label::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2e9e5b;
  flex: 0 0 auto;
}

.entry-content .pi-status h3 {
  font-family: var(--pi-font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--pi-navy, #00204c);
  margin: 0 0 16px;
  line-height: 1.2;
}

.entry-content .pi-status__pill {
  position: absolute;
  top: 30px;
  right: 34px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pi-gold-deep, #b8860b);
  background: rgba(232, 160, 32, .13);
  border-radius: 20px;
  padding: 7px 16px;
  margin: 0;
  white-space: nowrap;
}

/* ── callout eyebrow ── */
.entry-content .pi-callout__eb {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pi-gold-deep, #b8860b);
  margin: 0 0 10px;
}

/* ── callout card with primary action ── */
.entry-content .pi-callout {
  background: var(--pi-cream, #fafaf7);
  border: 1px solid var(--pi-gray-100, #eaecf0);
  border-radius: 6px;
  padding: 40px 34px;
  margin: 0 0 36px;
  text-align: center;
}
.entry-content .pi-callout > *:last-child { margin-bottom: 0; }
.entry-content .pi-callout h2 { margin-top: 0; }

/* ── buttons: core block, styled to match the site ── */
.entry-content .wp-block-button__link {
  background: var(--pi-gold-gradient, linear-gradient(135deg, #f4d160, #e8a020 50%, #b8860b));
  color: var(--pi-navy-deep, #00112e);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 17px 38px;
  border-radius: 4px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.entry-content .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(184, 134, 11, .32);
  color: var(--pi-navy-deep, #00112e);
}

/* ── step boxes ── */
.entry-content .pi-steps .wp-block-column {
  background: #fff;
  border: 1px solid var(--pi-gray-100, #eaecf0);
  border-radius: 6px;
  padding: 24px 22px;
}
.entry-content .pi-steps .wp-block-column > *:last-child { margin-bottom: 0; }
.entry-content .pi-steps h3 { margin-top: 0; font-size: 19px; }

@media (max-width: 700px) {
  .entry-content .pi-status__pill {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
  }
}
@media (max-width: 640px) {
  .entry-content .pi-status  { padding: 24px 20px; }
  .entry-content .pi-callout { padding: 30px 20px; }
  .entry-content .wp-block-button__link { display: block; font-size: 18px; padding: 15px 20px; }
}

/* ── v2.0.70 — FAQ accordion from the core Details block ──
   Any core/details block given the class pi-faq-item renders as a card
   with a gold plus/minus marker. Core provides the open/close behaviour,
   so there is no JavaScript here and nothing to register. */
.entry-content .pi-faq-item {
  border: 1px solid var(--pi-gray-100, #eaecf0);
  border-radius: 5px;
  background: #fff;
  margin-bottom: 10px;
  padding: 0;
}
.entry-content .pi-faq-item > summary {
  cursor: pointer;
  padding: 17px 48px 17px 20px;
  font-weight: 600;
  font-size: 17px;
  color: var(--pi-navy, #00204c);
  list-style: none;
  position: relative;
}
.entry-content .pi-faq-item > summary::-webkit-details-marker { display: none; }
.entry-content .pi-faq-item > summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--pi-gold-deep, #b8860b);
}
.entry-content .pi-faq-item[open] > summary::after { content: '\2212'; }
.entry-content .pi-faq-item > *:not(summary) {
  padding: 0 20px;
  color: #344054;
}
.entry-content .pi-faq-item > *:last-child { padding-bottom: 18px; margin-bottom: 0; }

/* v2.0.73 — centre buttons inside a callout card. The core Buttons block is
   a flex container, so the card's text-align has no effect on it. */
.entry-content .pi-callout .wp-block-buttons { justify-content: center; }

/* ── v2.0.75 — make inline links look like links ──
   Body links were rendering in the same navy as surrounding text with no
   underline, so there was nothing to indicate they were clickable. Gold plus
   an underline matches the brand and is unambiguous.

   :not() excludes buttons and any block that supplies its own link styling,
   so this only affects links sitting inside running text. */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--pi-gold-deep, #b8860b);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--pi-navy, #00204c);
  text-decoration-thickness: 2px;
}
/* On dark backgrounds gold-on-navy is unreadable — lighten it there. */
.entry-content .has-navy-background-color a:not(.wp-block-button__link),
.entry-content .pi-dark a:not(.wp-block-button__link) {
  color: var(--pi-gold-bright, #f4d160);
}

/* ── v2.0.76 — step card headings use the sans stack ──
   Playfair renders numerals small and unevenly against caps, so "1. Check
   for your Notice" read as a typo rather than a step. Barlow has lining
   figures that sit at cap height, which is what a numbered list needs. */
.entry-content .pi-steps h3 {
  font-family: var(--pi-font-sans, 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* ── v2.0.76 — tighter vertical rhythm on small screens ──
   80px of block padding above and below the content reads as a gap on a
   phone, where the horizontal padding is only 32px. Bring the two closer
   together so the content sits in a consistent frame. */
@media (max-width: 640px) {
  .content-wrap { padding: 40px 0; }
}

/* ══════════════════════════════════════════════════════════════════
   v2.0.77 — CONTENT RHYTHM

   Replaces the sibling-selector approach from 2.0.64 (p + h2, ul + h2 …).
   That whitelist could never be complete: a heading following a details
   block, a group, a columns block or a separator got no top margin, which
   is why "Settlement Administrator" sat flush against the FAQ accordion.

   The direct-child selector is exhaustive instead. Only top-level headings
   in the content flow get the spacing — headings nested inside a card, a
   column or an accordion are untouched, because those set their own.

   Page-level padding comes down at the same time: 80px above and below the
   content read as dead space when sections were only 16px apart. Bringing
   the two closer together is what makes the page feel deliberate.
   ══════════════════════════════════════════════════════════════════ */

.entry-content > h2 { margin-top: 72px; }
.entry-content > h3 { margin-top: 48px; }
.entry-content > h4 { margin-top: 36px; }

.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child { margin-top: 0; }

/* Page top and bottom */
.content-wrap { padding-top: 56px; padding-bottom: 56px; }

@media (max-width: 640px) {
  .entry-content > h2 { margin-top: 48px; }
  .entry-content > h3 { margin-top: 32px; }
  .content-wrap { padding-top: 36px; padding-bottom: 36px; }
}

/* ══════════════════════════════════════════════════════════════════
   v2.0.78 — SECTION RULE ABOVE TOP-LEVEL HEADINGS

   A short gold rule sits above every top-level H2 in page content. It
   marks the start of a section without the document-divider feel of a
   full-width hairline, and it reuses the gold already carrying the
   eyebrows and buttons.

   Because the rule does the separating, the gap above an H2 comes down
   from 72px to 56px — the page gets shorter without reading as cramped.

   Scope notes:
     - direct children only, so headings inside cards, columns and
       accordions are untouched
     - H2 only; H3 subheadings stay plain, otherwise a page with many
       short sections looks striped
     - suppressed on a first heading, where there is no preceding
       section to divide from
   ══════════════════════════════════════════════════════════════════ */

.entry-content > h2 {
  margin-top: 56px;
  padding-top: 22px;
  position: relative;
}
.entry-content > h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--pi-gold, #e8a020);
}

/* No rule on the first heading — nothing above it to divide from. */
.entry-content > h2:first-child {
  margin-top: 0;
  padding-top: 0;
}
.entry-content > h2:first-child::before { content: none; }

/* Centred headings get a centred rule. */
.entry-content > h2.has-text-align-center::before {
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 640px) {
  .entry-content > h2 { margin-top: 40px; padding-top: 18px; }
  .entry-content > h2::before { width: 40px; height: 3px; }
}


/* ==================================================================
   v2.0.81 - LAYOUT CONSISTENCY

   1. CONTENT MEASURE. Four hardcoded widths (760 / 860 / 880 / 900px),
      each centred in the viewport. The page banner uses the full 1500px
      container, so a centred 880px column starts ~300px right of the
      banner headline - the H1 and the first paragraph did not line up.
      Single-column pages now use the SAME container as the banner and
      cap the prose at --pi-prose-max, left-aligned, which is how the
      two-column practice-area template already behaved.

   2. OUTLINE BUTTONS. The theme styles .wp-block-button__link gold but
      never styled core's is-style-outline variant, so an outline button
      in page content fell back to core defaults - a thin stroke in the
      wrong colour at the wrong weight.

   3. .btn-gold was referenced in an SVG sizing rule but never defined,
      so legacy content using it rendered as a plain link.
   ================================================================== */

.pi-measure {
  max-width: var(--pi-content-max);
  margin: 0 auto;
  padding: 0 var(--pi-content-padding);
}
/* v2.0.83 — CENTRED, not left-aligned.
   2.0.81 pinned single-column content to the left of the 1500px container so
   it lined up with the banner headline. On a page with a sidebar that reads
   correctly, because the sidebar fills the other side. On a page without one
   it left roughly 500px of dead space down the right and the page looked
   broken rather than aligned. Centring balances it; the measure is unchanged,
   so line length still reads the same. */
.pi-measure > .entry-content,
.pi-measure > .wp-content-block {
  max-width: var(--pi-prose-max);
  margin-left: auto;
  margin-right: auto;
}

/* ...unless the page opts into a sidebar, in which case the main column goes
   back to the left and the sidebar fills the right. */
.pi-measure--sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--pi-space-16, 4rem);
  align-items: start;
}
.pi-measure--sidebar > .entry-content,
.pi-measure--sidebar > .wp-content-block {
  max-width: none;
  margin-left: 0;
}
@media (max-width: 1024px) {
  .pi-measure--sidebar { grid-template-columns: minmax(0, 1fr); }
  .pi-measure--sidebar > .sidebar { display: none; }
}

.content-grid:not(:has(.sidebar)) { max-width: var(--pi-content-max); }
.content-grid:not(:has(.sidebar)) .main-col { max-width: var(--pi-prose-max); margin: 0 auto; }

.faq-inner,
.cta-inner { max-width: var(--pi-prose-max); }

.content-narrow { max-width: var(--pi-prose-max) !important; }

@media (max-width: 782px) {
  .pi-measure { padding-left: var(--pi-content-padding-mobile); padding-right: var(--pi-content-padding-mobile); }
  .pi-measure > .entry-content,
  .pi-measure > .wp-content-block,
  .content-grid:not(:has(.sidebar)) .main-col { max-width: 100%; }
}

.entry-content .wp-block-button.is-style-outline > .wp-block-button__link,
.entry-content .wp-block-button__link.is-style-outline {
  background: transparent;
  background-image: none;
  border: 1.5px solid var(--pi-navy, #00204c);
  color: var(--pi-navy, #00204c);
  box-shadow: none;
}
.entry-content .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.entry-content .wp-block-button__link.is-style-outline:hover {
  background: var(--pi-navy, #00204c);
  border-color: var(--pi-navy, #00204c);
  color: #fff;
  transform: translateY(-2px);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pi-space-2, .5rem);
  padding: 12px 24px;
  background: var(--pi-gold-gradient, linear-gradient(135deg,#f4d160,#e8a020 50%,#b8860b));
  color: var(--pi-navy, #00204c);
  font-weight: 700;
  font-size: var(--pi-text-sm, 15px);
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: var(--pi-radius-sm, 4px);
  box-shadow: var(--pi-shadow-gold, 0 4px 14px rgba(232,160,32,.35));
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(232,160,32,.5);
  color: var(--pi-navy, #00204c);
}


/* ==================================================================
   v2.0.82 - RESULTS STRIP AMOUNTS

   .pi-results-strip__amount was defined twice - hero.css (Barlow
   Condensed 42px, flex, sup at 22px + 6px top margin) and blocks.css
   (sans, clamp 58-88px, sup at 0.52em, top -0.28em). Both matched, so
   load order decided the winner and the $ and M never sat right.

   content.css loads after both, so this is the single definition that
   wins. The template no longer emits <sup> at all; the reset below is
   only here in case older markup is cached.
   ================================================================== */

.pi-results-strip__amount {
  display: block;
  font-family: var(--pi-font-sans);
  font-size: clamp(42px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--pi-navy, #00204c);
  white-space: nowrap;
}

/* every part on one baseline, one size */
.pi-results-strip__amount sup,
.pi-results-strip__amount .pi-results-strip__num {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
  position: static;
  top: auto;
  margin: 0;
}


/* ==================================================================
   v2.0.83 - BRAND BUTTONS IN PAGE CONTENT

   Buttons pasted in from the old site carry per-block colours baked into
   inline styles, e.g.

     style="background-color:#c9a84c;color:#ffffff"          (a gold that
     style="border-color:#00204c;border-width:2px;..."        is not ours)

   Inline styles beat any stylesheet, so the earlier is-style-outline rule
   never applied - those buttons are not outline-variant, they are default
   buttons with hand-set colours. The only way to bring them into the brand
   without editing every page is to override the specific declarations.

   Primary  = gold gradient, navy text.
   Anything carrying a border colour = navy outline, white fill.
   ================================================================== */

.entry-content .wp-block-button__link.has-background:not(.has-border-color) {
  background-color: transparent !important;
  background-image: var(--pi-gold-gradient, linear-gradient(135deg,#f4d160,#e8a020 50%,#b8860b)) !important;
  color: var(--pi-navy-deep, #00112e) !important;
  border: 0 !important;
}

.entry-content .wp-block-button__link.has-border-color {
  background-color: #fff !important;
  background-image: none !important;
  border: 2px solid var(--pi-navy, #00204c) !important;
  color: var(--pi-navy, #00204c) !important;
}
.entry-content .wp-block-button__link.has-border-color:hover {
  background-color: var(--pi-navy, #00204c) !important;
  color: #fff !important;
}

/* emoji in button labels - the old content has a phone glyph that renders
   in the system emoji font and sits off-baseline next to Barlow Condensed */
.entry-content .wp-block-button__link { font-variant-emoji: text; }


/* ═══════════════════════════════════════════════════════════════════════
   v2.0.84 — the GoHighLevel embed, wherever it renders

   One partial (template-parts/sections/ghl-form.php) now draws the form in
   the homepage hero card, the practice-area sidebar, the Spanish sidebar,
   attorney profiles, standard page sidebars and the settlement news band.
   Each of those wrappers already supplies its own panel, padding and border,
   so the iframe itself must add nothing: no border, no inset, no background
   of its own showing through as a seam at the edges.

   color-scheme is explicit because the embed is a cross-origin document.
   Chrome and Safari will apply the VIEWER's dark-mode preference inside an
   iframe that does not declare one, which turned the form's white fields
   charcoal while the card around them stayed white.
   ═══════════════════════════════════════════════════════════════════════ */
.pi-ghl-form {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  margin: 0;
  background: transparent;
  color-scheme: light;
}

/* The hero card sits on the navy hero image and is the tightest placement on
   the site — its own 32px inset plus the form's internal padding left the
   fields in a narrow channel. The embed brings its own breathing room. */
.hero-form-card .pi-ghl-form { margin-top: var(--pi-space-3); }
@media (min-width: 861px) {
  .hero-form-card { padding: var(--pi-space-6); }
}


/* v2.0.85 — the Suffolk settlement band.

   Written UNSCOPED on purpose. Every other .pi-callout rule above is scoped
   under .entry-content, and front-page.php calls the_content() with no such
   wrapper — the homepage is a bare block passthrough. So a pattern dropped on
   the homepage gets none of those styles and renders as naked markup. This
   band is where Michael asked for it, so it carries its own card rather than
   depending on a wrapper the homepage does not have.

   It is not enough to add .entry-content to front-page.php: that wrapper caps
   prose width, and the homepage's hero and section blocks are full-bleed. */
.pi-callout--settlement {
  background: var(--pi-cream, #fafaf7);
  border: 1px solid var(--pi-gray-100, #eaecf0);
  border-left: 4px solid var(--pi-gold, #c9a84c);
  border-radius: 6px;
  padding: 40px 34px;
  margin: 0 auto 36px;
  max-width: var(--pi-prose-max, 900px);
  text-align: center;
}
.pi-callout--settlement > *:last-child { margin-bottom: 0; }
.pi-callout--settlement h2 { margin-top: 0; }
.pi-callout--settlement .pi-callout__eb {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pi-navy, #00204c);
  margin: 0 0 10px;
}


/*
 * Card deck for the managed pages.
 *
 * THE SELECTOR THAT MATTERS
 *   PI Base is a classic theme with no theme.json, so WordPress renders every
 *   group block with its LEGACY markup and injects an inner wrapper:
 *
 *     <div class="wp-block-group pi-cards">            <- what we author
 *       <div class="wp-block-group__inner-container">  <- injected at render
 *         <div class="wp-block-group pi-card"> x16
 *
 *   Putting display:grid on .pi-cards therefore lays out exactly ONE grid item
 *   (the injected wrapper) and the sixteen cards stack inside it in normal
 *   flow. That is why theme CSS, plugin CSS and inline styles all appeared to
 *   do nothing: every one of them was correct, and every one of them was
 *   applied to the wrong element.
 *
 *   So the deck is the inner container when one exists, and .pi-cards itself
 *   when it does not (block themes, and any future WP that drops the wrapper).
 *   !important is here deliberately: the authored markup carries an inline
 *   display:grid on the OUTER div, and inline beats a stylesheet.
 */

.pi-cards > .wp-block-group__inner-container,
.pi-cards:not(:has(> .wp-block-group__inner-container)) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin: 0 0 40px;
}

.pi-cards .pi-card {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 6px;
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pi-cards .pi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #e8a020;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.pi-cards .pi-card:hover {
  border-color: #e8a020;
  box-shadow: 0 10px 28px rgba(0, 17, 46, .08);
  transform: translateY(-3px);
}

.pi-cards .pi-card:hover::before { transform: scaleX(1); }

.pi-cards .pi-card h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -.01em;
}

.pi-cards .pi-card h3 a { color: #b8860b; text-decoration: none; }
.pi-cards .pi-card h3 a:hover { text-decoration: underline; }
.pi-cards .pi-card h3 a::after { content: ''; position: absolute; inset: 0; }

.pi-cards .pi-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #475467;
}

.pi-cards .pi-card > .wp-block-group__inner-container > *:last-child,
.pi-cards .pi-card > *:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .pi-cards .pi-card { padding: 22px 20px; }
}


/* ══════════════════════════════════════════════════════════════════
   Content-page components for About Us / Retaining the Firm. v2.0.92
   All of these live in ordinary page markup (Site Core page files), on
   the same pi-cards foundation as the practice deck — same hairline
   stroke, same radius, so the pages read as one system.
   ══════════════════════════════════════════════════════════════════ */

/* ── Attorney photo cards: a pi-cards deck whose cards lead with a
      portrait. The photo bleeds to the card edges; text keeps the
      card padding. ─────────────────────────────────────────────── */
.pi-cards .pi-card.pi-card--person { padding: 0; overflow: hidden; }

.pi-cards .pi-card--person img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  object-position: top center;
}

.pi-cards .pi-card--person h3,
.pi-cards .pi-card--person p { padding-left: 24px; padding-right: 24px; }
.pi-cards .pi-card--person h3 { margin-top: 18px; }
.pi-cards .pi-card--person p  { padding-bottom: 22px; }

.pi-cards .pi-card--person .pi-card__role {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pi-gold-deep, #b8860b);
}

/* ── Video callout: navy band with the thumbnail and a gold play
      button. The button carries data-video-id, so main.js's existing
      initVideoModal() opens the same lightbox the homepage uses —
      no new JS. ────────────────────────────────────────────────── */
.pi-video-callout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 40px;
  align-items: center;
  background: var(--pi-navy, #00204c);
  border-radius: 8px;
  padding: 40px 44px;
  margin: 8px 0 40px;
}
.pi-video-callout__kicker {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pi-gold, #e8a020);
}
.pi-video-callout h2,
.pi-video-callout .pi-video-callout__title {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
}
.pi-video-callout p { margin: 0; color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.6; }

.pi-video-callout .video-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.pi-video-callout .video-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .85; }
.pi-video-callout .video-frame .video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--pi-gold-gradient, var(--pi-gold, #e8a020));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .18s ease;
}
.pi-video-callout .video-frame:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.pi-video-callout .video-frame .video-play svg { width: 30px; height: 30px; fill: var(--pi-navy, #00204c); margin-left: 3px; }

/* ── Team band: the group shot on navy (the PNG is transparent and was
      cut for a dark background — on white the edges halo). ───────── */
.pi-team-band {
  background: linear-gradient(180deg, var(--pi-navy, #00204c) 0%, var(--pi-navy-deep, #00112e) 100%);
  border-radius: 8px;
  padding: 44px 44px 8px;
  margin: 8px 0 40px;
  text-align: center;
}
/* v2.0.100 — the kicker selector needed the same weight as the text line:
   .main-col p / .entry-content p (class+element) outranked the bare class,
   so the kicker rendered body-grey on navy — dark on dark. Same specificity
   trap as the card deck; the p is load-bearing. */
.pi-team-band p.pi-team-band__kicker {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pi-gold, #e8a020);
}
.pi-team-band p.pi-team-band__text {
  max-width: 640px;
  margin: 0 auto 6px;
  color: rgba(255,255,255,.85);
  font-size: 16px;
  line-height: 1.6;
}
.pi-team-band img {
  display: block;
  width: min(620px, 90%);
  margin: 0 auto;
  height: auto;
}

@media (max-width: 860px) {
  .pi-video-callout { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .pi-team-band { padding: 32px 20px 4px; }
}

/* ═══════════════════════════════════════════════════
 * v2.0.99 — THE SERVICE-PAGE RAIL
 * The 650px GHL form is out of the sidebar site-wide; the rail is now the
 * compact CTA card (sidebar-cta.php) + related pages. These rules cover
 * what the old sb-* form styling didn't: the CTA body text, the full-width
 * gold button, and the chat line.
 *
 * STICKY MECHANICS: both sidebar grids set align-items:start, which sizes
 * the <aside> to its content — leaving position:sticky nowhere to travel.
 * The aside itself stretches to the full row height so the card inside it
 * can follow the scroll down the length of the article.
 * ═══════════════════════════════════════════════════ */
.content-grid > .sidebar,
.pi-measure--sidebar > .sidebar { align-self: stretch; }

.sb-cta-card .sb-card-body { padding: 20px 22px 16px; }

.sb-cta-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}

.sb-cta-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 15px 18px;
  font-size: 14px;
  text-align: center;
}
.sb-cta-btn:hover { transform: none; filter: brightness(1.05); }

/* The phone link's old rounded-bottom styling assumed it was the card's
   last element; inside the CTA card two small lines follow it. */
.sb-cta-card .sb-phone { border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.14); }

.sb-cta-chat {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 12px 0 0;
}

.sb-cta-card .sb-disclaimer { margin: 10px 0 0; text-align: center; }

.sb-area-link--all {
  font-weight: 700;
  color: var(--pi-gold-deep, #a97b2a);
}

/* v2.0.102 — attorney profile rail: direct-email line under the shared CTA */
.sb-atty-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--pi-gray-700, #4b5563);
  background: var(--pi-white, #fff);
  border: 1px solid #eaecf0;
  border-radius: 6px;
  text-decoration: none;
}
.sb-atty-email svg { width: 16px; height: 16px; fill: currentColor; }
.sb-atty-email:hover { color: var(--pi-navy, #00114e); border-color: var(--pi-gold, #c9943a); }