/* ============================================
   SWEET JAMES, SHARED COMPONENTS (2026)
   Used by Home, Practice, and Location templates.
   Keeps class names from v1 so markup stays stable.
   Visual layer rebuilt to match sweetjames.com 2026.
   ============================================ */

/* ---------------- LOGO ---------------- */
.sj-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  color: var(--sj-white);
}
.sj-logo__mark {
  flex: 0 0 auto;
  width: 32px;
  height: 28px;
  color: inherit;
}
.sj-logo__name {
  font-family: var(--sj-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.sj-logo__name-light { font-weight: 300; opacity: 0.9; }

/* New: wordmark SVG used in header + footer */
.sj-logo__img {
  height: 36px; width: auto; display: block;
  max-width: 100%;
}
@media (max-width: 720px) { .sj-logo__img { height: 30px; } }

/* Legacy multi-line script logo, collapsed into modern wordmark */
.sj-logo__script {
  font-family: var(--sj-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.sj-logo__rule { display: none; }
.sj-logo__tag {
  display: none;
}

/* ---------------- BUTTONS (pill) ---------------- */
.sj-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  height: var(--sj-cta-h);
  padding: 0 var(--sj-cta-px);
  border-radius: var(--sj-r-full);
  font-family: var(--sj-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-transform: none;
  transition: transform var(--sj-dur) var(--sj-ease),
              background var(--sj-dur) var(--sj-ease),
              color var(--sj-dur) var(--sj-ease),
              box-shadow var(--sj-dur-med) var(--sj-ease);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--sj-shadow-sm);
}
.sj-btn:hover { transform: translateY(-1px); box-shadow: var(--sj-shadow); }
.sj-btn:active { transform: translateY(0); box-shadow: var(--sj-shadow-sm); }

.sj-btn--yellow { background: var(--sj-gold); color: var(--sj-ink); }
.sj-btn--yellow:hover { background: var(--sj-gold-hover); box-shadow: var(--sj-shadow-lg); }

.sj-btn--navy { background: var(--sj-navy); color: var(--sj-white); }
.sj-btn--navy:hover { background: var(--sj-navy-ink); box-shadow: var(--sj-shadow-lg); }

.sj-btn--white-outline {
  background: transparent; color: var(--sj-white);
  border: 1.5px solid rgba(255,255,255,0.4);
  box-shadow: none;
}
.sj-btn--white-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--sj-white);
  box-shadow: none;
}

.sj-btn--navy-outline {
  background: transparent; color: var(--sj-navy);
  border: 1.5px solid var(--sj-line-strong);
  box-shadow: none;
}
.sj-btn--navy-outline:hover {
  background: rgba(10,14,44,.04);
  border-color: var(--sj-navy);
  color: var(--sj-navy);
  box-shadow: none;
}

.sj-btn--white { background: var(--sj-white); color: var(--sj-ink); }
.sj-btn--white:hover { box-shadow: var(--sj-shadow-lg); }

.sj-btn--block { width: 100%; }
.sj-btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.sj-btn--xl { height: 62px; padding: 0 34px; font-size: 16px; }

.sj-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------- TOPBAR (announcement strip) ---------------- */
.sj-topbar {
  background: var(--sj-navy-ink);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  position: relative;
  z-index: 50;
}
.sj-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; gap: 16px;
}
.sj-topbar__left { display: flex; align-items: center; gap: 12px; }
.sj-topbar__left b { color: var(--sj-white); font-weight: 600; }
.sj-topbar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #27D380;
  box-shadow: 0 0 0 0 rgba(39,211,128,.6);
  animation: sj-pulse 2.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes sj-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(39,211,128,.6); }
  50%     { box-shadow: 0 0 0 6px rgba(39,211,128,0); }
}
.sj-topbar__right a {
  color: var(--sj-gold);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------------- HEADER (sticky, blur on scroll) ---------------- */
.sj-header {
  background: var(--sj-navy);
  padding: 16px 0;
  position: sticky; top: 0; z-index: 40;
  transition: background var(--sj-dur-med) var(--sj-ease),
              padding var(--sj-dur) var(--sj-ease),
              box-shadow var(--sj-dur-med) var(--sj-ease);
}
.sj-header.is-scrolled {
  background: rgba(10, 18, 84, 0.92);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  padding: 10px 0;
  box-shadow: 0 1px 20px rgba(0,0,0,0.18);
}
.sj-header__inner {
  display: flex; align-items: center; gap: 24px;
}
.sj-header__nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: 28px; margin-right: auto;
}
.sj-header__nav a {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 14px;
  border-radius: var(--sj-r-full);
  transition: background var(--sj-dur) var(--sj-ease), color var(--sj-dur);
}
.sj-header__nav a:hover {
  background: rgba(255,255,255,.08);
  color: var(--sj-white);
}
.sj-header__cta-group { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Mobile-only assurance line under the Call button (desktop hidden — topbar shows it there) */
.sj-header__assure { display: none; }

.sj-mobile-toggle {
  display: none !important;
}

/* mobile drawer */
.sj-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: var(--sj-navy);
  padding: 24px;
  transform: translateY(-100%);
  transition: transform var(--sj-dur-med) var(--sj-ease);
  display: flex; flex-direction: column; gap: 24px;
  overflow-y: auto;
}
.sj-drawer.is-open { transform: translateY(0); }
.sj-drawer__close {
  align-self: flex-end;
  width: 44px; height: 44px;
  border-radius: var(--sj-r-full);
  background: rgba(255,255,255,0.08);
  color: var(--sj-white);
  display: grid; place-items: center;
}
.sj-drawer__nav { display: grid; gap: 12px; margin-top: 20px; }
.sj-drawer__nav a {
  font-family: var(--sj-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sj-white);
  padding: 8px 0;
}
.sj-drawer__nav a:hover { color: var(--sj-gold); }

/* ---------------- HORIZONTAL CARD CAROUSELS (locations, etc.) ---------------- */
.sj-h-carousel { position: relative; margin-top: 8px; }
.sj-h-carousel__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 16px;
  scrollbar-width: none;
}
.sj-h-carousel__viewport::-webkit-scrollbar { display: none; }
.sj-h-carousel__track {
  display: grid;
  grid-auto-flow: column;
  gap: 14px;
}
.sj-h-carousel__track > * { scroll-snap-align: start; }
.sj-h-carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-top: 14px;
  padding: 0 4px;
}
.sj-h-carousel__dots { display: none; }
.sj-h-carousel__arrows { display: inline-flex; gap: 10px; }
.sj-h-carousel__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sj-white);
  color: var(--sj-navy);
  border: 1px solid var(--sj-line);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--sj-dur), background var(--sj-dur), color var(--sj-dur), box-shadow var(--sj-dur-med);
  box-shadow: 0 2px 8px rgba(10,14,44,.06);
}
.sj-h-carousel__btn:hover:not(:disabled) {
  background: var(--sj-navy); color: var(--sj-white); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10,14,44,.18);
}
.sj-h-carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sj-h-carousel__btn i { font-size: 14px; }
@media (max-width: 720px) {
  .sj-h-carousel__btn { width: 42px; height: 42px; }
}
.sj-checks {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.sj-checks li {
  display: flex; align-items: center; gap: 14px;
  font-size: 16px;
  font-weight: 500;
}
/* Hero context, yellow circle, navy check (per direction) */
.sj-check-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sj-gold); color: var(--sj-navy);
  display: grid; place-items: center;
  flex: 0 0 28px;
}
.sj-check-dot svg,
.sj-check-dot .fa-check,
.sj-check-dot i { color: var(--sj-navy); }
.sj-check-dot svg { width: 14px; height: 14px; }
.sj-check-dot i { font-size: 13px; line-height: 1; }

/* Font Awesome icon sizing inside common contexts */
.practice__icon i { font-size: 26px; line-height: 1; color: var(--sj-navy); }
.why__feature-icon i { font-size: 20px; line-height: 1; color: var(--sj-gold); }
.authority__icon i { font-size: 24px; line-height: 1; color: var(--sj-ink); }

/* Font Awesome inside Sweet James buttons + chrome */
.sj-btn i,
.sj-btn .fa-solid,
.sj-btn .fa-regular,
.sj-btn .fa-brands { font-size: 0.95em; line-height: 1; }
.sj-btn--xl i { font-size: 1em; }
.sj-faq__chev i { font-size: 12px; }
.sj-vid__play-btn i { font-size: 22px; margin-left: 2px; }
.sj-vid__nav button i { font-size: 14px; }
.sj-check-dot svg { width: 14px; height: 14px; }

/* ---------------- FORM CARD ---------------- */
.sj-form-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--sj-r-2xl);
  padding: 32px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sj-bg-white .sj-form-card,
.sj-bg-paper .sj-form-card,
.sj-bg-neutral .sj-form-card,
.sj-bg-cream .sj-form-card {
  background: var(--sj-white);
  border: 1px solid var(--sj-line);
  box-shadow: var(--sj-shadow-lg);
  color: var(--sj-ink);
}
.sj-form-card__title {
  font-family: var(--sj-font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: inherit;
}
.sj-form-card__title b {
  font-weight: 800;
  color: var(--sj-gold);
}
.sj-bg-white .sj-form-card__title b,
.sj-bg-paper .sj-form-card__title b,
.sj-bg-cream .sj-form-card__title b { color: var(--sj-navy); border-bottom: 3px solid var(--sj-gold); padding-bottom: 2px; }
.sj-form-card__sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  margin: 0 0 22px;
}
.sj-bg-white .sj-form-card__sub,
.sj-bg-paper .sj-form-card__sub,
.sj-bg-cream .sj-form-card__sub { color: var(--sj-muted); }

.sj-form {
  display: grid; gap: 12px;
}
.sj-form__row {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.sj-field {
  width: 100%;
  height: var(--sj-input-h);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--sj-r);
  background: var(--sj-white);
  color: var(--sj-ink);
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--sj-dur), box-shadow var(--sj-dur);
  outline: none;
}
.sj-field::placeholder { color: #9CA3AF; }
.sj-field:focus {
  border-color: var(--sj-navy);
  box-shadow: 0 0 0 3px rgba(255,255,0,0.25);
}
.sj-bg-white .sj-field,
.sj-bg-paper .sj-field,
.sj-bg-cream .sj-field,
.sj-bg-neutral .sj-field {
  background: var(--sj-paper);
  border-color: var(--sj-line);
}
select.sj-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' stroke='%230a1254' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.sj-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 11px; line-height: 1.55;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.sj-consent input {
  margin-top: 2px;
  accent-color: var(--sj-gold);
  flex-shrink: 0;
  width: 16px; height: 16px;
  cursor: pointer;
}
.sj-consent a { color: #fff; text-decoration: underline; }
.sj-bg-white .sj-consent,
.sj-bg-paper .sj-consent,
.sj-bg-cream .sj-consent { color: var(--sj-muted); }
.sj-bg-white .sj-consent a,
.sj-bg-paper .sj-consent a,
.sj-bg-cream .sj-consent a { color: var(--sj-navy); }

.sj-form-thanks {
  text-align: center; padding: 14px 0;
}
.sj-form-thanks__icon {
  width: 64px; height: 64px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--sj-gold); color: var(--sj-ink);
  display: grid; place-items: center;
  font-size: 32px; font-weight: 900;
}

/* ---------------- PRESS BAR ---------------- */
.sj-press {
  padding: 10px 0 0;
  text-align: center;
}
.sj-press__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  margin-bottom: 22px;
  text-align: center;
}
.sj-press__logos {
  display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap;
  opacity: 0.95;
}
.sj-press__logos img {
  height: 42px; max-width: 160px; object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity var(--sj-dur);
}
.sj-press__logos img:hover { opacity: 1; }

/* Round 9: press logos relocated into hero left column, single row under the bullets */
.sj-press--inline { text-align: left; margin-top: 24px; padding-top: 0; }
.sj-press--inline .sj-press__label { text-align: left; margin-bottom: 12px; }
.sj-press--inline .sj-press__logos { justify-content: flex-start; flex-wrap: nowrap; gap: 18px; }
.sj-press--inline .sj-press__logos img { height: 22px; max-width: none; }
.sj-press--inline .sj-press__logos img[alt="ABC News"] { height: 30px; }
@media (max-width: 960px) {
  .sj-press--inline .sj-press__logos { flex-wrap: nowrap; gap: 14px; justify-content: space-between; }
  .sj-press--inline .sj-press__logos img { height: 20px; }
  .sj-press--inline .sj-press__logos img[alt="ABC News"] { height: 26px; }
}
@media (max-width: 480px) {
  .sj-press--inline .sj-press__logos { gap: 9px; }
  .sj-press--inline .sj-press__logos img { height: 15px; }
  .sj-press--inline .sj-press__logos img[alt="ABC News"] { height: 20px; }
}

@media (max-width: 720px) {
  .sj-press { padding: 6px 0 0; }
  .sj-press__label { margin-bottom: 14px; }
  .sj-press__logos { gap: 28px 32px; row-gap: 18px; }
  .sj-press__logos img { height: 38px; max-width: 130px; opacity: 0.95; }
}

/* ---------------- SECTIONS / BANDS ---------------- */
.sj-section { padding: var(--sj-s-11) 0; }
.sj-section--white,
.sj-section--neutral {
  background: var(--sj-white);
  color: var(--sj-ink);
}
.sj-section--pad-top-sm { padding-top: var(--sj-s-8); }
.sj-section__head { text-align: center; margin-bottom: var(--sj-s-8); }
.sj-section__head .sj-display { margin-top: 14px; }
.sj-section__head .sj-display .y { color: var(--sj-navy); display: block; }
.sj-bg-navy .sj-section__head .sj-display .y,
.sj-bg-ink  .sj-section__head .sj-display .y { color: var(--sj-gold); }

@media (max-width: 720px) {
  .sj-section__head { margin-bottom: 24px; }
}

/* No more scallop dividers, flat bands */

/* ---------------- TRUST/STATS STRIP ---------------- */
.sj-trust-strip {
  background: #f1f1f1;
  color: var(--sj-ink);
  padding: 56px 0;
}
.sj-trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
  text-align: center;
  justify-items: center;
}
.sj-trust-strip__grid > * { max-width: 240px; }
.sj-trust-strip__num {
  font-family: var(--sj-font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.2vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--sj-navy);
}
.sj-trust-strip__label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 12px;
  color: #6b6b6b;
}
/* Thin gray dividers between stats (desktop 4-col only) */
@media (min-width: 961px) {
  .sj-trust-strip__grid { gap: 0; }
  .sj-trust-strip__grid > * { max-width: none; padding: 4px 36px; }
  .sj-trust-strip__grid > * + * { border-left: 1px solid #d2d2d2; }
}
.sj-trust-strip__src {
  font-size: 12px; color: var(--sj-muted); margin-top: 4px;
}
/* Round 4: halve the gap above the case-win carousel (results heading → cards) */
.results-band .home-section-head { margin-bottom: 28px; }
.results-band-pa .practice-head { margin-bottom: 16px; }
.la-results-band .loc-head { margin-bottom: 16px; }
/* Practice results heading on one line (desktop) */
@media (min-width: 961px) { .results-band-pa #results-title { white-space: nowrap; } }
/* Round 5: breathing room below hero image, before the bullet checklist */
.home-hero__photo, .practice-hero__photo, .loc-hero__photo { margin-bottom: 32px; }
/* Round 5: other-practice / location practice cards are no longer links */
.other-practices .sj-link-card, .la-practice-band .sj-link-card { cursor: default; }
.other-practices .sj-link-card:hover,
.la-practice-band .sj-link-card:hover { border-color: var(--sj-line); box-shadow: none; }
/* Hide the hero "Get Live Help · 24/7" CTA on desktop (per Mr. Creative) */
@media (min-width: 961px) {
  .sj-hide-desktop { display: none !important; }
  /* Sticky hero form: pins until the hero (first section) scrolls past */
  .sj-hero-form-wrap { align-self: stretch; }
  .sj-hero-form-wrap .sj-form-card { position: sticky; top: 96px; }
}

/* ---------------- RESULT CARDS (2026 layout, carousel) ---------------- */
.sj-results-carousel {
  position: relative;
  margin-top: 8px;
  --sj-results-gap: 24px;
  --sj-results-visible: 3;
}
.sj-results-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 24px 0 0;
  scrollbar-width: none;
  width: 100%;
  max-width: 100%;
  scroll-snap-type: x mandatory;
}
.sj-results-carousel__viewport::-webkit-scrollbar { display: none; }
.sj-results {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--sj-results-gap);
  padding: 0;
  margin: 0;
  width: 100%;
}
.sj-results > .sj-result {
  flex: 0 0 calc((100% - (var(--sj-results-visible) - 1) * var(--sj-results-gap)) / var(--sj-results-visible));
  width: calc((100% - (var(--sj-results-visible) - 1) * var(--sj-results-gap)) / var(--sj-results-visible));
  max-width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
}
@media (max-width: 1099px) {
  .sj-results-carousel { --sj-results-visible: 2; --sj-results-gap: 18px; }
}
@media (max-width: 720px) {
  .sj-results-carousel { --sj-results-visible: 1; --sj-results-gap: 14px; }
}

/* Carousel controls */
.sj-results-carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin-top: 20px;
  padding: 0 4px;
}
.sj-results-carousel__dots { display: none; }
.sj-results-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sj-line-strong);
  border: 0; padding: 0;
  cursor: pointer;
  transition: width var(--sj-dur), background var(--sj-dur);
}
.sj-results-carousel__dot[aria-current="true"] {
  background: var(--sj-navy);
  width: 24px;
}
.sj-results-carousel__arrows { display: inline-flex; gap: 12px; align-items: center; }
.sj-results-carousel__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sj-white);
  color: var(--sj-navy);
  border: 1px solid var(--sj-line);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--sj-dur), background var(--sj-dur), color var(--sj-dur), box-shadow var(--sj-dur-med);
  box-shadow: 0 2px 8px rgba(10,14,44,.06);
}
.sj-results-carousel__btn:hover:not(:disabled) {
  background: var(--sj-navy); color: var(--sj-white); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10,14,44,.18);
}
.sj-results-carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sj-results-carousel__btn i { font-size: 14px; }

.sj-result {
  background: var(--sj-white);
  color: var(--sj-ink);
  border-radius: var(--sj-r-xl);
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(10,14,44,.04), 0 8px 24px rgba(10,14,44,.06);
  border: 1px solid var(--sj-line);
  padding: 36px 36px 28px;
  min-height: 380px;
}
/* hover removed — case-win cards are not linked on PPC pages */
.sj-result::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--sj-navy);
  border-radius: var(--sj-r-xl) var(--sj-r-xl) 0 0;
  transition: background var(--sj-dur);
}
.sj-result:hover::before { background: var(--sj-navy); }
.sj-result--featured::before { background: var(--sj-gold); }

.sj-result__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.sj-result__state {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sj-ink);
}
.sj-result__pill {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sj-navy);
  background: rgba(10, 18, 84, 0.08);
  padding: 8px 14px;
  border-radius: 999px;
}
.sj-result__amount {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: clamp(44px, 4.8vw, 68px);
  letter-spacing: -0.04em;
  color: var(--sj-navy);
  line-height: 0.96;
  margin: 8px 0 18px;
  white-space: nowrap;
}
.sj-result__desc {
  font-size: 17px;
  line-height: 1.45;
  color: var(--sj-ink);
  margin: 0 0 24px;
  max-width: 32ch;
}
.sj-result__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sj-navy);
  text-decoration: none;
  margin-top: auto;
}
.sj-result__link::after { content: '\2192'; transition: transform var(--sj-dur); }
.sj-result__link:hover::after { transform: translateX(4px); }
.sj-result__meta {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sj-line);
  font-size: 13px;
  font-style: italic;
  color: var(--sj-muted);
  line-height: 1.5;
}
/* Legacy fields hidden so older markup degrades cleanly */
.sj-result__photo,
.sj-result__top,
.sj-result__big,
.sj-result__bigsub,
.sj-result__rows,
.sj-result__kind,
.sj-result__badge { display: none; }

@media (max-width: 1199px) and (min-width: 961px) {
  .sj-result { padding: 28px 26px 22px; min-height: 360px; }
  .sj-result__amount { font-size: clamp(44px, 5vw, 64px) !important; }
  .sj-result__desc { font-size: 15px; }
}
@media (max-width: 960px) {
  .sj-result { padding: 28px 26px 22px; min-height: 320px; }
}
@media (max-width: 720px) {
  .sj-result { padding: 24px 22px 18px; min-height: 0; }
  .sj-result__amount { font-size: clamp(48px, 14vw, 72px) !important; margin: 6px 0 14px; }
  .sj-result__desc { font-size: 15px; max-width: none; }
  .sj-results-carousel__viewport { padding: 4px 0 14px; }
  .sj-results-carousel__btn { width: 44px; height: 44px; }
}

/* ---------------- VIDEO TESTIMONIAL CARD ---------------- */
.sj-vid {
  max-width: 760px; margin: 0 auto;
  background: var(--sj-white);
  border-radius: var(--sj-r-2xl);
  padding: 26px;
  color: var(--sj-ink);
  box-shadow: var(--sj-shadow);
  border: 1px solid var(--sj-line);
}
.sj-vid__screen {
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--sj-r);
  overflow: hidden;
  background: #000; cursor: pointer;
}
.sj-vid__screen img { width: 100%; height: 100%; object-fit: cover; }
.sj-vid__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.35) 100%);
}
.sj-vid__play-btn {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--sj-ink);
  display: grid; place-items: center;
  box-shadow: var(--sj-shadow-lg);
  transition: transform var(--sj-dur);
  backdrop-filter: blur(8px);
}
.sj-vid__screen:hover .sj-vid__play-btn { transform: scale(1.08); }
.sj-vid__play svg { width: 24px; height: 24px; margin-left: 3px; }
.sj-vid__quote {
  margin: 26px auto 0; text-align: center;
  font-family: var(--sj-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sj-ink); font-size: 22px; line-height: 1.4;
  max-width: 600px;
}
.sj-vid__author {
  text-align: center; margin-top: 16px;
  font-weight: 600; font-size: 14px; color: var(--sj-ink);
}
.sj-vid__authsub {
  text-align: center; font-size: 12px;
  color: var(--sj-muted); margin-top: 2px;
  letter-spacing: 0.06em;
}
/* ---------------- TESTIMONIAL VIDEO NAV (sj-vid) ---------------- */
.sj-vid__nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 20px; }
.sj-vid__nav button {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--sj-line);
  background: var(--sj-white); color: var(--sj-navy);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--sj-dur), color var(--sj-dur), box-shadow var(--sj-dur-med), transform var(--sj-dur);
  box-shadow: 0 2px 8px rgba(10,14,44,.06);
}
.sj-vid__nav button:hover { background: var(--sj-navy); color: var(--sj-white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(10,14,44,.18); }
/* ---------------- STAR ROW ---------------- */
.sj-stars,
.sj-stars-row,
.sj-greview__stars,
.vid__stars { color: #FFFF00 !important; }

.sj-stars-row { text-align: center; margin-top: 28px; font-size: 22px; letter-spacing: 4px; }
.sj-stars-row + .sj-stars-caption {
  text-align: center; font-weight: 600; font-size: 13px;
  margin-top: 8px; color: var(--sj-ink);
}
.sj-bg-navy .sj-stars-row + .sj-stars-caption,
.sj-bg-ink  .sj-stars-row + .sj-stars-caption { color: rgba(255,255,255,0.7); }

/* ---------------- FAQ ---------------- */
/* Keep the 2-col FAQ grid widths fixed when items expand/collapse
   (grid items default to min-width:auto, which lets the track resize to content) */
.faq__grid > * { min-width: 0; }
/* No orphans: avoid a single word alone on the last line (all breakpoints) */
h1, h2, h3, h4, .sj-display { text-wrap: balance; }
p, .accordion-button, .accordion-body, .sj-faq__body, .home-hero__lede { text-wrap: pretty; }
/* Mobile: show the hero form by default, drop the show/hide toggle */
@media (max-width: 960px) {
  .sj-hero-form-wrap.collapse { display: block !important; }
  .sj-hero-reveal { display: none !important; }
}
.sj-faq__list { max-width: 820px; width: 100%; margin: 0 auto; display: grid; gap: 10px; }
.sj-faq__item {
  background: var(--sj-white);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-r-xl);
  overflow: hidden;
  color: var(--sj-ink);
  transition: box-shadow var(--sj-dur-med);
}
.sj-bg-navy .sj-faq__item,
.sj-bg-ink  .sj-faq__item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--sj-white);
}
.sj-faq__item[open] { box-shadow: var(--sj-shadow); }
.sj-faq__item summary {
  list-style: none;
  padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: inherit;
}
.sj-faq__item summary::-webkit-details-marker { display: none; }
.sj-faq__chev {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sj-paper);
  color: var(--sj-ink);
  display: grid; place-items: center;
  transition: transform var(--sj-dur), background var(--sj-dur);
}
.sj-bg-navy .sj-faq__chev,
.sj-bg-ink  .sj-faq__chev {
  background: rgba(255,255,255,0.08);
  color: var(--sj-white);
}
.sj-faq__chev svg { width: 14px; height: 14px; }
.sj-faq__item[open] .sj-faq__chev {
  background: var(--sj-gold);
  color: var(--sj-ink);
  transform: rotate(180deg);
}
.sj-faq__body {
  padding: 0 24px 22px;
  font-size: 15px;
  color: var(--sj-ink-soft);
  line-height: 1.65;
}
.sj-bg-navy .sj-faq__body,
.sj-bg-ink  .sj-faq__body { color: rgba(255,255,255,0.78); }
.sj-faq__body a {
  color: var(--sj-navy);
  text-decoration: underline;
  font-weight: 600;
}
.sj-bg-navy .sj-faq__body a,
.sj-bg-ink  .sj-faq__body a { color: var(--sj-gold); }

/* ---------------- FOOTER ---------------- */
.sj-footer {
  background: #000;
  color: rgba(255,255,255,0.65);
  padding: 72px 0 32px;
  font-size: 14px;
}
.sj-footer__top {
  display: block;
  padding-bottom: 48px;
}
.sj-footer__brand { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.sj-footer__logo img { height: 44px; width: auto; display: block; }
.sj-footer__blurb {
  margin: 0;
  line-height: 1.65;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  max-width: 760px;
}
.sj-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}
.sj-footer__col h4 {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
  font-weight: 700;
}
.sj-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sj-footer__col a {
  color: rgba(255,255,255,0.82);
  transition: color var(--sj-dur);
}
.sj-footer__col a:hover { color: var(--sj-gold); }
.sj-footer__phone {
  color: var(--sj-gold);
  font-weight: 700; font-size: 18px;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
}
.sj-social {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.sj-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  transition: background var(--sj-dur), color var(--sj-dur), transform var(--sj-dur);
}
.sj-social a:hover { background: var(--sj-gold); color: var(--sj-ink); transform: translateY(-2px); }
.sj-social a i { font-size: 14px; }
.sj-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  margin-top: 22px; font-size: 12px;
  color: rgba(255,255,255,0.5);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sj-footer__disclaimer {
  max-width: none; margin: 24px 0 0;
  line-height: 1.7;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}
.sj-footer__bar { display: flex; gap: 20px; flex-wrap: wrap; }
.sj-footer__bar a {
  color: rgba(255,255,255,0.55);
  transition: color var(--sj-dur);
}
.sj-footer__bar a:hover { color: var(--sj-gold); }

@media (max-width: 900px) {
  .sj-footer__top { gap: 40px; padding-bottom: 32px; }
}
@media (max-width: 520px) {
  .sj-footer { padding: 48px 0 28px; }
  .sj-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------- MOBILE STICKY CTA ---------------- */
.sj-mcta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--sj-white);
  border-top: 1px solid var(--sj-line);
  padding: 10px 22px;
  gap: 8px;
  box-shadow: 0 -8px 24px rgba(10,14,44,.06);
}
.sj-mcta .sj-btn { flex: 1; min-width: 0; height: 48px; padding: 0 10px; font-size: 13px; }
.sj-mcta .sj-btn--white-outline {
  color: var(--sj-ink);
  border-color: var(--sj-line-strong);
}

/* ---------------- DISCLAIMER ---------------- */
.sj-disclaimer {
  max-width: 820px; margin: 28px auto 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.65;
  color: var(--sj-muted);
}
.sj-bg-navy .sj-disclaimer,
.sj-bg-ink  .sj-disclaimer { color: rgba(255,255,255,0.5); }

/* ---------------- BREADCRUMBS ---------------- */
.sj-breadcrumbs {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding: 16px 0 8px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.sj-breadcrumbs a { color: rgba(255,255,255,0.6); transition: color var(--sj-dur); }
.sj-breadcrumbs a:hover { color: var(--sj-gold); }
.sj-breadcrumbs .sep { opacity: 0.45; }
.sj-breadcrumbs [aria-current="page"] { color: var(--sj-white); font-weight: 500; }
.sj-bg-white .sj-breadcrumbs,
.sj-bg-paper .sj-breadcrumbs,
.sj-bg-cream .sj-breadcrumbs { color: var(--sj-muted); }
.sj-bg-white .sj-breadcrumbs a,
.sj-bg-paper .sj-breadcrumbs a,
.sj-bg-cream .sj-breadcrumbs a { color: var(--sj-muted); }
.sj-bg-white .sj-breadcrumbs [aria-current="page"],
.sj-bg-paper .sj-breadcrumbs [aria-current="page"],
.sj-bg-cream .sj-breadcrumbs [aria-current="page"] { color: var(--sj-ink); }

/* ---------------- LINK CARDS (topical clusters) ---------------- */
.sj-link-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sj-link-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  background: var(--sj-white);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-r);
  padding: 22px 24px;
  color: var(--sj-ink);
  transition: background var(--sj-dur), border-color var(--sj-dur), transform var(--sj-dur);
}
.sj-link-card:hover {
  border-color: var(--sj-line-strong);
  box-shadow: var(--sj-shadow);
  transform: translateY(-2px);
}
/* On navy/ink backgrounds, flip to translucent surface + white text */
.sj-bg-navy .sj-link-card,
.sj-bg-ink  .sj-link-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--sj-white);
}
.sj-bg-navy .sj-link-card:hover,
.sj-bg-ink  .sj-link-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-2px);
  box-shadow: none;
}
.sj-link-card__title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
}
.sj-link-card__sub {
  font-size: 13px;
  color: var(--sj-muted);
  margin-top: 4px;
}
.sj-bg-navy .sj-link-card__sub,
.sj-bg-ink  .sj-link-card__sub { color: rgba(255,255,255,0.55); }
.sj-link-card__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sj-gold); color: var(--sj-ink);
  display: grid; place-items: center; flex: 0 0 36px;
  font-weight: 700;
}

/* ---------------- CHIPS ---------------- */
.sj-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10,14,44,0.05);
  color: var(--sj-ink);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--sj-r-full);
}
.sj-bg-navy .sj-chip,
.sj-bg-ink  .sj-chip {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 960px) {
  .sj-section { padding: 72px 0; }
  .sj-section--pad-top-sm { padding-top: 48px; }
  .sj-section__head { margin-bottom: 48px; }
  .sj-header__nav { display: none; }
  .sj-mobile-toggle { display: inline-flex; }
  .sj-header__cta-group .sj-btn--white-outline { display: none; }
  /* Consolidated mobile header: Call button stacks over an "Open 24/7 · Hablamos Español" line */
  .sj-header__cta-group { flex-direction: column; align-items: flex-end; gap: 5px; }
  .sj-header__assure {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; line-height: 1; color: rgba(255,255,255,.82);
    white-space: nowrap;
  }
  .sj-header__assure .sj-topbar__dot { width: 7px; height: 7px; }
  .sj-header__open { font-weight: 700; color: #fff; }
  .sj-header__sep { opacity: .4; }

  .sj-press__logos { justify-content: center; gap: 28px; }
  .sj-press__logos img { height: 24px; }

  .sj-results { grid-template-columns: 1fr; }
  .sj-link-grid { grid-template-columns: 1fr; }

  .sj-trust-strip__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .sj-trust-strip { padding: 48px 0; }

  .sj-footer__top { gap: 36px; }

  .sj-mcta.is-visible { display: flex; }
  body.sj-has-mcta { padding-bottom: 80px; }
}
@media (max-width: 520px) {
  .sj-form-card { padding: 22px; }
  .sj-form__row { grid-template-columns: 1fr; }
  .sj-trust-strip__grid { grid-template-columns: 1fr; }
  .sj-btn { min-width: 0; }
  .sj-footer__top { gap: 32px; }
  .sj-topbar__inner span:nth-child(3),
  .sj-topbar__inner span:nth-child(4) { display: none; }
}

/* ============================================
   2026-05 PATCH: BRAND DIRECTION UPDATES
   - Mobile full-width CTAs
   - Mobile centered trust strip
   - Tighter mobile section spacing
   - Italics-off in headlines (color stays)
   ============================================ */

/* ---------------- COME TO YOU BAND (shared) ---------------- */
.come-to-you {
  background: var(--sj-paper);
  padding: 96px 0;
}
.come-to-you__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center;
}
.come-to-you__grid--reverse {
  grid-template-columns: 1.1fr 0.9fr;
}
.come-to-you__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--sj-r-2xl);
  overflow: hidden;
  background: var(--sj-bone);
  box-shadow: var(--sj-shadow-lg);
}
.come-to-you__visual { padding-left: 0 !important; padding-right: 0 !important; }
.come-to-you__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scaleX(-1); }
.come-to-you__chip {
  position: absolute;
  background: var(--sj-white);
  color: var(--sj-ink);
  font-weight: 500;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: var(--sj-shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.come-to-you__chip--top { top: 24px; left: 24px; }
.come-to-you__chip--bottom { bottom: 24px; left: 24px; right: 24px; justify-content: center; }
.come-to-you__list {
  list-style: none; padding: 0; margin: 28px 0 32px;
  display: grid; gap: 16px;
}
.come-to-you__list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 17px;
  color: var(--sj-ink);
  font-weight: 500;
}
.come-to-you__list li::before {
  content: '';
  width: 28px; height: 28px; border-radius: 50%;
  background: #003399; color: #fff;
  flex: 0 0 28px;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
@media (max-width: 960px) {
  .come-to-you { padding: 56px 0; }
  .come-to-you__grid,
  .come-to-you__grid--reverse { grid-template-columns: 1fr; gap: 40px; }
  /* On mobile, always show image first */
  .come-to-you__grid--reverse .come-to-you__visual { order: -1; }
}

/* Remove italics on emphasized words in display headlines.
   The color treatment (gold / navy) stays. */
.sj-display em,
.home-hero__title em,
.why__h2 em,
.final-cta__h2 em,
.loc-hero__title em,
.practice-hero__title em,
.sj-calc__title em {
  font-style: normal;
  /* Keep the same Inter weight as the H1 itself */
  font-weight: inherit;
}

@media (max-width: 720px) {
  /* Center the trust / numbers strip on mobile, single column */
  .sj-trust-strip { padding: 20px 0; }
  .sj-trust-strip__grid { text-align: center; grid-template-columns: 1fr; row-gap: 22px; }

  /* Full-width primary CTAs on mobile inside any sj-btn-row */
  .sj-btn-row { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .sj-btn-row > .sj-btn { width: 100%; min-width: 0; }
  .sj-btn--xl { height: 54px; padding: 0 18px; font-size: 15px; }

  /* Section padding tightened on mobile */
  .sj-section { padding: 22px 0; }

  /* Press strip extra-tight on mobile */
  .sj-press { padding-top: 0!important; padding-bottom: 4px; }
  .sj-press__logos { gap: 22px; }

  /* Standalone CTAs that aren't inside an sj-btn-row should still go full-width on mobile */
  .home-hero a.sj-btn--yellow,
  .come-to-you a.sj-btn,
  .why a.sj-btn,
  .faq__intro a.sj-btn,
  .home-section-head a.sj-btn { width: 100%; }
}

@media (max-width: 520px) {
  /* Even tighter on phones */
  .sj-section { padding: 24px 0; }
}

/* Tighten the big page bands on mobile (templates declare these at 120px 0) */
@media (max-width: 720px) {
  .empathy,
  .practice-band,
  .why,
  .come-to-you,
  .locations,
  .results-band,
  .reviews-band,
  .attorneys,
  .faq-band,
  .final-cta,
  .insurance-play,
  .deadlines-band,
  .how-band,
  .local-context,
  .la-practice-band,
  .map-band,
  .la-results-band,
  .neighborhoods-band,
  .la-reviews-band,
  .greviews-band,
  .la-faq-band { padding: 36px 0 !important; }
  .home-hero,
  .practice-hero,
  .loc-hero { padding: 20px 0 28px !important; }
  /* Per-section heading rows tighter on mobile */
  .home-section-head,
  .practice-head,
  .loc-head { margin-bottom: 22px !important; }
  .home-section-head__sub,
  .practice-head__sub,
  .loc-head__sub { font-size: 16px !important; }
}
@media (max-width: 520px) {
  .empathy,
  .practice-band,
  .why,
  .come-to-you,
  .locations,
  .results-band,
  .reviews-band,
  .attorneys,
  .faq-band,
  .final-cta,
  .insurance-play,
  .deadlines-band,
  .how-band,
  .local-context,
  .la-practice-band,
  .map-band,
  .la-results-band,
  .neighborhoods-band,
  .la-reviews-band,
  .greviews-band,
  .la-faq-band { padding: 32px 0 !important; }
  .home-hero,
  .practice-hero,
  .loc-hero { padding: 16px 0 24px !important; }
}

/* ============================================
   2026-05 PATCH: STICKY LEFT COLUMN (desktop)
   For 2-col rows where left = headline/text/CTA
   and right = list/cards/map, the left col stays
   pinned while user scrolls through the right.
   ============================================ */
@media (min-width: 961px) {
  .faq__grid > div:first-child,
  .insurance-play__grid > div:first-child,
  .deadlines__grid > div:first-child,
  .map-band__grid > div:first-child {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* ============================================
   2026-05 PATCH: ATTORNEYS / TRIAL TEAM
   Shared section — used by home + practice + all
   location templates. Placeholder portraits.
   ============================================ */
.attorneys { background: var(--sj-paper); padding: 96px 0; color: var(--sj-ink); }
.attorneys__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 56px;
}
.attorney {
  background: transparent;
  border: 0; border-radius: 0;
  overflow: visible;
  transition: transform var(--sj-dur);
  box-shadow: none;
  text-align: center;
  padding: 8px 12px;
}
.attorney:hover { transform: translateY(-3px); }
.attorney__photo {
  width: 168px; height: 168px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--sj-paper);
  overflow: hidden;
  border: 4px solid var(--sj-white);
  box-shadow: 0 8px 24px rgba(10,14,44,.10);
}
.attorney__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.attorney__body { padding: 22px 0 0; }
.attorney__name {
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--sj-ink);
}
.attorney__title {
  font-size: 12px;
  color: #003399;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 6px;
}
.attorney__creds {
  list-style: none; padding: 14px 0 0; margin: 14px auto 0;
  display: grid; gap: 6px;
  font-size: 14px;
  color: var(--sj-ink-soft);
  border-top: 1px solid var(--sj-line);
  max-width: 220px;
  text-align: center;
}
.attorney__creds li { display: block; }
.attorney__creds li::before { content: none; }
@media (max-width: 960px) {
  .attorneys__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   2026-06 PATCH: MOBILE HERO ABOVE-THE-FOLD
   Tighten padding, reorder so the primary CTA
   sits above the fold. Hero photo + checks list
   move BELOW the CTA on mobile.
   ============================================ */
@media (max-width: 960px) {
  /* Tighter top padding above H1 on mobile */
  .home-hero,
  .practice-hero,
  .loc-hero {
    padding: 0 0 28px !important;
  }
  /* Hide top announcement bar on mobile */
  .sj-topbar { display: none !important; }
  /* Hide breadcrumbs on mobile */
  .sj-breadcrumbs { display: none !important; }
  /* Hide "Serving X County, CA" hero chip on location pages mobile */
  .loc-hero__chip { display: none !important; }
  /* +50% top padding above $1B+ stat strip on mobile */
  .sj-trust-strip { padding-top: 72px !important; }
  /* Tighten H1 margins on mobile so the headline sits close to the header */
  .practice-hero__title,
  .loc-hero__title {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
  .home-hero__title {
    margin-top: 0!important;
    margin-bottom: 20px;
  }
  /* Bring the eyebrow / first hero element tighter */
  .home-hero .sj-eyebrow,
  .practice-hero .sj-eyebrow,
  .loc-hero .sj-eyebrow {
    margin-bottom: 8px !important;
  }
  /* Results carousel on mobile: horizontal scroll row + arrows BELOW */
  .carousel.sj-results-carousel { padding-bottom: 64px !important; }
  .carousel-inner.sj-results-carousel__viewport {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    gap: 14px !important;
    padding: 12px 0 28px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .carousel-inner.sj-results-carousel__viewport::-webkit-scrollbar { display: none; }
  .carousel.sj-results-carousel .carousel-item {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    scroll-snap-align: start;
    position: relative !important;
  }
  .carousel.sj-results-carousel .carousel-item .row { display: block !important; margin: 0 !important; }
  .carousel.sj-results-carousel .carousel-item .col { padding: 0 !important; max-width: 100% !important; width: 100% !important; }
  /* Arrows positioned below the row */
  .carousel.sj-results-carousel .carousel-control-prev,
  .carousel.sj-results-carousel .carousel-control-next {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
  }
  .carousel.sj-results-carousel .carousel-control-prev {
    left: calc(50% - 56px) !important;
    right: auto !important;
  }
  .carousel.sj-results-carousel .carousel-control-next {
    left: auto !important;
    right: calc(50% - 56px) !important;
  }
  .carousel.sj-results-carousel .carousel-indicators { display: none !important; }
  /* Tighter gap between header/breadcrumbs and the rest of the hero */
  .practice-hero .sj-breadcrumbs,
  .loc-hero .sj-breadcrumbs {
    margin: 0 0 8px !important;
    font-size: 12px !important;
  }
  /* 2px brand border around hero photo on mobile */
  .home-hero__photo,
  .practice-hero__photo,
  .loc-hero__photo {
    border: 2px solid #003399 !important;
    box-sizing: border-box;
  }
  /* H1 in hero — uniform across all templates on mobile */
  .home-hero__title,
  .practice-hero__title,
  .loc-hero__title {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }
  /* Hero copy column dissolves into the grid so the FORM can sit directly under the
     bullets on mobile. New order: eyebrow -> H1 -> 3 bullets -> FORM -> press -> call CTA. */
  .home-hero__grid > div:first-child,
  .practice-hero__grid > div:first-child,
  .loc-hero__grid > div:first-child {
    display: contents;
  }
  .home-hero__grid,
  .practice-hero__grid,
  .loc-hero__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Mobile: Define sj-checks wrapper styles and add orientation arrow */
  .sj-checks_wrapper { position: relative; order: 2; width: 100%; }
  .sj-checks_wrapper .sj-checks_arrow { position: absolute; bottom: -20px; right: 34px; width: 40px; height: auto; }
  /* Mobile: show the hero image, slotted BELOW the form and ABOVE the "As Featured On" strip */
  .home-hero__photo,
  .practice-hero__photo,
  .loc-hero__photo { display: block !important; order: 3; margin: 26px 0 0 !important; }
  .home-hero .sj-checks,
  .practice-hero .sj-checks,
  .loc-hero .sj-checks { margin: 4px 0 0 !important; gap: 6px !important; }
  .home-hero .sj-checks li,
  .practice-hero .sj-checks li,
  .loc-hero .sj-checks li {
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #fff;
    gap: 10px !important;
  }
  /* 30% smaller yellow check circles on mobile (28 → 20) */
  .home-hero .sj-check-dot,
  .practice-hero .sj-check-dot,
  .loc-hero .sj-check-dot {
    width: 20px !important; height: 20px !important; flex: 0 0 20px !important;
  }
  .home-hero .sj-check-dot svg,
  .practice-hero .sj-check-dot svg,
  .loc-hero .sj-check-dot svg { width: 10px !important; height: 10px !important; }
  .home-hero .sj-check-dot i,
  .practice-hero .sj-check-dot i,
  .loc-hero .sj-check-dot i { font-size: 9px !important; }
  /* H1 sits right after the eyebrow; lede follows (same order, DOM sequence preserved); bullets come next (order:2 above) */
  .home-hero__title,
  .practice-hero__title,
  .loc-hero__title { order: 1; }
  .home-hero__lede,
  .practice-hero__lede,
  .loc-hero__lede { order: 1; }
  /* Hide the "We're answering calls right now" pill on mobile (home) */
  .home-hero .home-hero__live { display: none !important; }
  /* Hero image (order 4) sits between the form and the press strip; press + call CTA follow */
  .home-hero .sj-press,
  .practice-hero .sj-press,
  .loc-hero .sj-press { order: 5; margin-top: 28px !important; }
  .home-hero .sj-btn-row,
  .practice-hero .sj-btn-row,
  .loc-hero .sj-btn-row { order: 6; margin-top: 16px !important; }
  /* Tighter type for above-the-fold */
  .home-hero__title,
  .practice-hero__title,
  .loc-hero__title {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }
  /* Mobile dropdown form reveal: form-card hidden until toggled.
     The form-card lives inside .sj-hero-form-wrap.collapse so BS handles it. */
  .sj-hero-form-wrap.collapse:not(.show) { display: none !important; }
  /* Form sits directly under the 3 bullets — strong, high, above-the-fold CTA */
  .sj-hero-form-wrap { order: 4 !important; margin-top: 18px !important; }
  /* Mobile: form fields span the FULL hero width — match the photo + CTA below.
     Drop the inset card frame/padding so inputs are flush to the container edges. */
  .sj-hero-form-wrap .sj-form-card {
    margin-top: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Mobile: hero image fills the entire container (no letterbox bars). The asset is
     16:9 like the container, so cover crops nothing visible. */
  .home-hero__photo img,
  .practice-hero__photo img,
  .loc-hero__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }
  /* The reveal button itself — solid royal blue + white text, large down-chevron */
  .sj-hero-reveal {
    order: 7 !important;
    margin-top: 28px !important;
    width: 100%;
    background: #003399 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 12px;
    padding: 14px 22px !important;
    font-size: 17px !important;
    border-radius: 999px !important;
    min-height: 56px;
    --bs-btn-bg: #003399;
    --bs-btn-border-color: #003399;
    --bs-btn-hover-bg: #001E66;
    --bs-btn-hover-border-color: #001E66;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
  }
  .sj-hero-reveal:hover { background: #001E66 !important; color: #fff !important; }
  /* Chevron rotates when expanded — bigger arrow */
  .sj-hero-reveal[aria-expanded="true"] .sj-hero-reveal__chev { transform: rotate(180deg); }
  .sj-hero-reveal__chev {
    transition: transform .25s ease;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
  }
  /* Kill outer glow on CTA buttons on mobile */
  .btn-warning, .btn-primary, .sj-btn--yellow, .sj-btn--navy {
    box-shadow: none !important;
    filter: none !important;
  }
  .btn-warning:hover, .btn-primary:hover {
    box-shadow: none !important;
  }
  /* Lede paragraph removed on mobile — replaced by the 3 bullets under the headline */
  .practice-hero__lede,
  .loc-hero__lede { display: none !important; }
  /* Hide the duplicative practice eyebrow ("Car Accident Lawyers") on mobile — the H1 already says it */
  .practice-hero .sj-eyebrow { display: none !important; }
  .home-hero__live { margin-bottom: 14px !important; }
}

/* Desktop: hide the mobile reveal button, ensure form always visible */
@media (min-width: 961px) {
  .sj-hero-reveal { display: none !important; }
  .sj-hero-form-wrap.collapse { display: block !important; height: auto !important; }
}

/* ============================================
   2026-05 PATCH: HEADLINE COLOR SYSTEM
   Headlines on light backgrounds:
     - main text: #0a1254 (navy)
     - <em> accent: #003399 (royal blue)
   Skip explicitly-dark sections (hero, reviews,
   final CTA, footer).
   ============================================ */
section:not(.sj-bg-navy):not(.sj-bg-ink):not(.home-hero):not(.practice-hero):not(.loc-hero):not(.reviews-band):not(.la-reviews-band):not(.final-cta):not(.sj-footer) .sj-display {
  color: #0a1254;
}
section:not(.sj-bg-navy):not(.sj-bg-ink):not(.home-hero):not(.practice-hero):not(.loc-hero):not(.reviews-band):not(.la-reviews-band):not(.final-cta):not(.sj-footer) .sj-display em {
  color: #003399;
}