/* Home page styles — extracted verbatim from home.html inline <style> */
    /* ───────── HOME-SPECIFIC ───────── */

    /* HERO */
    .home-hero {
      background: var(--sj-navy);
      color: #fff;
      padding: 0 0 72px;
      position: relative;
    }
    @media (max-width: 960px) {
      .home-hero { overflow: hidden; }
    }
    .home-hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(closest-side at 78% 28%, rgba(255,255,0,.10), transparent 65%),
                  radial-gradient(closest-side at -10% 110%, rgba(60,90,220,.18), transparent 70%);
    }
    .home-hero__grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 64px; align-items: start;
    }
    /* Desktop: sticky form */
    @media (min-width: 961px) {
      .home-hero .sj-form-card {
        position: sticky;
        top: 96px;
        align-self: start;
      }
    }
    .home-hero__live {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: -0.005em;
      color: rgba(255,255,255,0.9);
    }
    .home-hero__title {
      font-family: var(--sj-font-display);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.98;
      font-size: clamp(40px, 5.4vw, 76px);
      margin: 20px 0 22px;
      color: #fff;
    }
    .home-hero__title em {
      color: var(--sj-gold);
      font-weight: 800;
    }
    .home-hero__lede {
      font-size: 20px;
      line-height: 1.55;
      max-width: 560px;
      color: rgba(255,255,255,0.78);
      margin: 0 0 28px;
    }
    @media (max-width: 960px) {
      .home-hero__lede {
        font-size: 16px;
      }
    }
    .home-hero__lede b { color: #fff; font-weight: 800; }

    .home-hero__photo {
      margin-top: 28px;
      aspect-ratio: 16/9;
      border-radius: var(--sj-r-xl);
      overflow: hidden;
      background: #16235e; /* matches the photo's navy backdrop */
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: var(--sj-shadow-lg);
      position: relative;
    }
    .home-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
    .home-hero__photo-tag {
      position: absolute; bottom: 16px; left: 16px;
      background: rgba(10,14,44,0.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 500;
      color: #fff;
      display: inline-flex; align-items: center; gap: 8px;
    }

    /* Press strip inside hero */
    .home-hero__press {
      margin-top: 14px;
      padding-top: 8px;
          }

    /* SECTION HEAD VARIANT, left-aligned for editorial feel */
    .home-section-head {
      max-width: 760px;
      margin-bottom: 56px;
    }
    .home-section-head--center {
      max-width: 720px; margin-left: auto; margin-right: auto; text-align: center;
    }
    .home-section-head .sj-display { margin-top: 14px; color: #003399; }
    .home-section-head .sj-display em {
      font-weight: 800;
      color: #003399;
    }
    .home-section-head__sub {
      margin-top: 16px;
      font-size: 19px;
      color: var(--sj-ink-soft);
      line-height: 1.6;
      max-width: 640px;
    }

    /* EMPATHY (white band, two-col) */
    .empathy {
      background: var(--sj-white);
      color: var(--sj-ink);
      padding: 96px 0;
    }
    .empathy__grid {
      display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center;
    }
    .empathy__quote {
      background: var(--sj-paper);
      border-radius: var(--sj-r-2xl);
      padding: 36px 36px 32px;
      border: 1px solid var(--sj-line);
      position: relative;
    }
    .empathy__quote::before {
      content: '"';
      position: absolute; top: 12px; left: 24px;
      font-family: var(--sj-font-display);
      font-size: 92px; font-weight: 800;
      color: var(--sj-navy);
      line-height: 1;
      opacity: 1;
    }
    .empathy__quote-text {
      position: relative;
      font-family: var(--sj-font-display);
      font-size: 22px;
      font-weight: 800;
      line-height: 1.45;
      letter-spacing: -0.02em;
      color: var(--sj-ink);
      padding-top: 18px;
    }
    .empathy__quote-attr {
      margin-top: 22px;
      font-weight: 800;
      font-size: 14px;
      color: var(--sj-ink);
    }
    .empathy__quote-sub { font-weight: 400; font-size: 12px; color: var(--sj-muted); margin-top: 2px; letter-spacing: 0.04em; }

    /* PRACTICE AREAS, 4-col card grid (white band) */
    .practice-band { background: var(--sj-paper); padding: 96px 0; color: var(--sj-ink); }
    .practice {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .practice__card {
      background: var(--sj-white);
      border: 1px solid var(--sj-line);
      border-radius: var(--sj-r-xl);
      padding: 28px 24px;
      color: var(--sj-ink);
      transition: box-shadow var(--sj-dur-med) var(--sj-ease), transform var(--sj-dur) var(--sj-ease), border-color var(--sj-dur);
      display: flex; flex-direction: column;
      min-height: 220px;
      gap: 16px;
      box-shadow: var(--sj-shadow-sm);
    }
    .practice__card:hover {
      box-shadow: var(--sj-shadow-lg);
      transform: translateY(-3px);
    }
    .practice__icon {
      width: 56px; height: 56px;
      border-radius: var(--sj-r);
      background: var(--sj-paper);
      border: 1px solid var(--sj-line);
      display: grid; place-items: center;
      color: var(--sj-navy);
      transition: background var(--sj-dur), transform var(--sj-dur);
    }
    .practice__card:hover .practice__icon {
      background: var(--sj-gold);
      transform: scale(1.06) rotate(-3deg);
    }
    .practice__icon svg { width: 28px; height: 28px; }
    .practice__title {
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    .practice__sub { font-size: 14px; color: var(--sj-ink-soft); line-height: 1.55; }
    .practice__cta {
      margin-top: auto;
      display: inline-flex; align-items: center; gap: 6px;
      font-weight: 800;
      font-size: 14px;
      color: var(--sj-navy);
    }
    .practice__cta svg { width: 16px; height: 16px; transition: transform var(--sj-dur); }
    .practice__card:hover .practice__cta svg { transform: translateX(4px); }

    /* WHY SWEET JAMES, navy band with founder feature */
    .why {
      background: var(--sj-navy);
      color: #fff;
      padding: 96px 0;
    }
    .why__grid {
      display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center;
    }
    .why__photo {
      position: relative;
      aspect-ratio: 4/5;
      border-radius: var(--sj-r-xl);
      overflow: hidden;
      background: #16235e;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: var(--sj-shadow-lg);
    }
    .why__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 25% center; }
    .why__photo-tag {
      position: absolute; bottom: 24px; left: 24px; right: 24px;
      background: rgba(10, 14, 44, 0.72);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: var(--sj-r-lg);
      padding: 16px 20px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .why__photo-tag-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sj-gold); }
    .why__photo-tag-name { font-size: 19px; font-weight: 800; margin-top: 4px; color: #fff; }
    .why__photo-tag-sub { font-size: 13px; opacity: 0.72; margin-top: 2px; }

    .why__h2 {
      font-family: var(--sj-font-display);
      font-weight: 800;
      letter-spacing: -0.035em;
      font-size: clamp(30px, 3.6vw, 48px);
      line-height: 1.02;
      margin: 14px 0 22px;
      color: #fff;
    }
    .why__h2 em { color: var(--sj-gold); font-weight: 800; }
    .why__lede {
      font-size: 19px;
      color: rgba(255,255,255,0.78);
      line-height: 1.65;
      max-width: 540px;
      margin: 0 0 36px;
    }
    .why__features {
      display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px;
    }
    .why__feature {
      display: flex; gap: 14px; align-items: flex-start;
    }
    .why__feature-icon {
      flex: 0 0 44px; height: 44px;
      border-radius: var(--sj-r-sm);
      background: rgba(255,255,255,0.06);
      display: grid; place-items: center;
      color: var(--sj-gold);
    }
    .why__feature-icon svg { width: 22px; height: 22px; }
    .why__feature-title { font-size: 15px; font-weight: 800; text-transform: uppercase; }
    .why__feature-sub { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; margin-top: 4px; }

    /* COME TO YOU, paper band, image-left */
    .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 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;
    }

    /* LOCATIONS, white band, 5-col grid */
    .locations { background: var(--sj-white); padding: 96px 0; }
    .locations__grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
      margin-top: 56px;
    }
    .locations__card {
      background: var(--sj-paper);
      border: 1px solid var(--sj-line);
      color: var(--sj-ink);
      border-radius: var(--sj-r-xl);
      padding: 28px 24px;
      transition: transform var(--sj-dur), box-shadow var(--sj-dur-med), border-color var(--sj-dur);
      display: flex; flex-direction: column; gap: 8px;
      min-height: 180px;
    }
    .locations__card:hover {
      transform: translateY(-3px);
      box-shadow: var(--sj-shadow);
      border-color: var(--sj-line-strong);
    }
    .locations__state {
      font-family: var(--sj-font-display);
      font-weight: 800;
      letter-spacing: -0.03em;
      font-size: 28px;
      line-height: 1;
      color: var(--sj-ink);
    }
    .locations__cities {
      font-size: 13px;
      color: var(--sj-muted);
      line-height: 1.55;
    }
    .locations__cta {
      margin-top: auto;
      font-size: 13px;
      font-weight: 800;
      color: var(--sj-navy);
      display: inline-flex; align-items: center; gap: 6px;
      padding-top: 12px;
    }
    .locations__cta svg { width: 14px; height: 14px; transition: transform var(--sj-dur); }
    .locations__card:hover .locations__cta svg { transform: translateX(4px); }

    /* RESULTS, paper band */
    .results-band {
      background: var(--sj-paper);
      padding: 96px 0;
      color: var(--sj-ink);
    }

    /* TESTIMONIALS, navy band */
    .reviews-band { background: var(--sj-navy); padding: 96px 0; color: var(--sj-white); }
    .reviews-band .sj-eyebrow.sj-eyebrow--dark { color: var(--sj-gold); }
    .reviews-band .sj-display { color: var(--sj-white); }
    .reviews-band .sj-display em { color: var(--sj-gold); }
    .reviews-band .sj-stars-caption { color: rgba(255,255,255,0.7); }

    /* ATTORNEYS, paper band */
    .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 { box-shadow: none; 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);
      aspect-ratio: auto;
    }
    .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: var(--sj-navy);
      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; }

    .authority {
      background: var(--sj-white);
      border: 1px solid var(--sj-line);
      border-radius: var(--sj-r-2xl);
      padding: 32px 36px;
      margin: 56px auto 0;
      max-width: 980px;
      display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
      box-shadow: var(--sj-shadow-sm);
    }
    .authority__icon {
      width: 56px; height: 56px; border-radius: var(--sj-r);
      background: var(--sj-gold); color: var(--sj-ink);
      display: grid; place-items: center;
    }
    .authority p { margin: 0; font-size: 15px; color: var(--sj-ink-soft); line-height: 1.65; }
    .authority p b { color: var(--sj-ink); font-weight: 800; }

    /* FAQ */
    .faq-band { background: var(--sj-white); padding: 96px 0; color: var(--sj-ink); }
    .faq__grid {
      display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px;
    }
    .faq__intro .sj-display { color: var(--sj-ink); }

    /* FINAL CTA */
    .final-cta { background: #0a1254;
      color: #fff;
      padding: 96px 0;
      position: relative;
      overflow: hidden;
    }
    .final-cta::before {
      content: ''; position: absolute; pointer-events: none;
      bottom: -180px; left: -160px; width: 480px; height: 480px;
      background: radial-gradient(closest-side, rgba(255,255,0,0.10), transparent 70%);
    }
    .final-cta__grid {
      position: relative;
      display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
    }
    .final-cta__h2 {
      font-family: var(--sj-font-display);
      font-weight: 800;
      letter-spacing: -0.04em;
      font-size: clamp(34px, 4.6vw, 60px);
      line-height: 1;
      margin: 14px 0 18px;
    }
    .final-cta__h2 em { color: var(--sj-gold); font-weight: 800; }
    .final-cta__sub {
      font-size: 19px;
      line-height: 1.55;
      color: rgba(255,255,255,0.72);
      max-width: 480px;
      margin: 0 0 32px;
    }

    @media (max-width: 1024px) {
      .practice { grid-template-columns: repeat(3, 1fr); }
      .locations__grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 960px) {
      .home-hero { padding: 48px 0 64px; }
      .home-hero__grid,
      .empathy__grid,
      .why__grid,
      .come-to-you__grid,
      .final-cta__grid { grid-template-columns: 1fr; gap: 48px; }
      .faq__grid { grid-template-columns: 1fr; gap: 40px; }
      .practice { grid-template-columns: repeat(2, 1fr); }
      .locations__grid { grid-template-columns: repeat(2, 1fr); }
      .attorneys__grid { grid-template-columns: 1fr; }
      .authority { grid-template-columns: 1fr; padding: 24px; text-align: center; }
      .authority__icon { margin: 0 auto; }
      .why__features { grid-template-columns: 1fr; gap: 18px; }
      /* Mobile hero photo, keep entire group visible */
      .home-hero__photo { aspect-ratio: 16/9; }
      .home-hero__photo img { object-fit: contain; object-position: center bottom; }
    }
    /* 2-col intermediate (audit fix: practice + locations grid was jumping 3 → 1) */
    @media (max-width: 720px) and (min-width: 421px) {
      .practice { grid-template-columns: 1fr; gap: 10px; }
      .locations__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .practice__card { min-height: 180px; padding: 22px 20px; gap: 12px; }
      .practice__icon { width: 44px; height: 44px; }
      .practice__icon svg { width: 22px; height: 22px; }
      .practice__title { font-size: 16px; }
      .practice__sub { font-size: 13px; }
    }
    @media (max-width: 420px) {
      .practice { grid-template-columns: 1fr; gap: 10px; }
      .locations__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .home-section-head { margin-bottom: 22px; }
    }
  
    /* locations-carousel-override */
    .locations__grid.sj-h-carousel__track {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: none !important;
      grid-auto-columns: calc((100% - 28px) / 3);
      gap: 14px;
    }
    @media (max-width: 960px) {
      .locations__grid.sj-h-carousel__track { grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; }
    }
    @media (max-width: 720px) {
      .locations__grid.sj-h-carousel__track { grid-auto-columns: 80%; gap: 12px; }
    }