/* LawyerUp convert redesign — visual layer only.
   Navy cinematic hero, flag-stripe chrome, denser cards.
   Does not change copy. Loaded after per-page <style> + convert.css. */

:root {
  --cream: #F7F5F0;
  --cream-dark: #ECE8DF;
  --navy: #0A1F75;
  --navy-deep: #061448;
  --navy-soft: #1C3488;
  --navy-ink: #050F3A;
  --red: #B22234;
  --red-dark: #8F1B2A;
  --red-light: #D13547;
  --canyon: #C45A1F;
  --bright-orange: #F39B4A;
  --ink: #0F1419;
  --slate: #4A5260;
  --line: #D8D4CA;
  --white: #FFFFFF;
  --flag: linear-gradient(90deg, #0A1F75 0 33.333%, #F7F5F0 33.333% 66.666%, #B22234 66.666%);
}

/* ── Chrome: navy header, flag rule ── */
html body header.header {
  background: var(--navy);
  border-bottom: 0;
  padding: 14px 0;
  box-shadow: 0 10px 28px -18px rgba(5, 15, 58, 0.55);
}
html body header.header::after {
  content: "";
  display: block;
  height: 4px;
  background: var(--flag);
}
html body .logo { color: var(--white); }
html body .logo-accent { color: var(--bright-orange); }
html body .logo-tag,
html body .logo-disclaimer { color: rgba(247, 245, 240, 0.62); }
html body .header-tagline {
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--bright-orange);
}
html body .header-tagline-icon { color: var(--bright-orange); }
html body .header-tagline-text { color: var(--cream); }
html body .header-tagline-text em { color: var(--bright-orange); }

html body .lu-desktop-nav a,
html body header.header .nav a {
  color: rgba(247, 245, 240, 0.9) !important;
}
html body .lu-desktop-nav a:hover,
html body header.header .nav a:hover {
  color: #fff !important;
}
html body .lu-desktop-nav a.nav-cta,
html body header.header .nav a.nav-cta,
html body .lu-desktop-nav a.nav-cta:hover,
html body header.header .nav a.nav-cta:hover {
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(178, 34, 52, 0.7);
}

html body header.header .nav-toggle {
  background: transparent;
  border-color: rgba(247, 245, 240, 0.28);
}
html body header.header .nav-toggle span { background: #fff; }

html body .top-bar {
  background: var(--navy-ink);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 0;
}
html body .top-bar .phone {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ── Homepage hero: courtroom dusk ── */
html body .hero {
  padding: 56px 0 0;
  overflow: hidden;
}
html body .hero::before {
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 12% 30%, rgba(178, 34, 52, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 60% at 88% 80%, rgba(28, 52, 136, 0.45), transparent 50%),
    linear-gradient(135deg, #0A1F75 0%, #071654 52%, #050F3A 100%);
  z-index: -2;
}
html body .hero::after {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--flag);
  z-index: 2;
}
html body .hero-grid {
  gap: 48px;
  align-items: center;
  padding-bottom: 56px;
}
html body .hero-eyebrow {
  color: var(--bright-orange);
  margin-bottom: 16px;
  letter-spacing: 0.2em;
}
html body .hero-eyebrow-dot { background: var(--bright-orange); box-shadow: 0 0 0 6px rgba(243, 155, 74, 0.18); }
html body .hero h1 {
  color: #fff;
  font-size: clamp(40px, 5.2vw, 68px);
  margin-bottom: 18px;
  text-shadow: 0 10px 40px rgba(5, 15, 58, 0.35);
}
html body .hero h1 em {
  color: var(--bright-orange);
}
html body .hero h1 em::after { display: none; }
html body .hero-tagline {
  color: rgba(247, 245, 240, 0.92);
  border-left-color: var(--bright-orange);
  background: rgba(5, 15, 58, 0.28);
  padding: 10px 14px 10px 16px;
  max-width: 600px;
}
html body .hero-tagline strong { color: #fff; }
html body .hero-lede {
  color: rgba(247, 245, 240, 0.78);
  margin-bottom: 22px;
}
html body .hero-lede strong { color: #fff; }

html body .hero-timeline::before {
  background: linear-gradient(to bottom, var(--bright-orange) 0%, var(--red) 90%);
}
html body .hero-tl-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(247, 245, 240, 0.45);
  color: #fff;
  backdrop-filter: blur(6px);
}
html body .hero-tl-row--final .hero-tl-icon {
  background: var(--red);
  border-color: var(--red);
}
html body .hero-tl-title { color: #fff; }
html body .hero-tl-row--final .hero-tl-title { color: var(--bright-orange); }
html body .hero-tl-body p { color: rgba(247, 245, 240, 0.72); }
html body .hero-tl-body p em { color: var(--bright-orange); }

html body .hero .btn-outline-navy,
html body .hero .btn-outline-navy:visited {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
}
html body .hero .btn-outline-navy:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

html body .hero-chip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}
html body .hero-chip-text strong { color: #fff; }
html body .hero-chip-text span { color: rgba(247, 245, 240, 0.7); }

html body .hero-card {
  border-radius: 16px;
  padding: 40px 28px 28px;
  box-shadow:
    0 40px 80px -24px rgba(5, 15, 58, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
html body .hero-card::before {
  height: 5px;
  background: var(--flag);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
html body .hero-card .flag {
  top: -12px;
  background: var(--red);
  letter-spacing: 0.12em;
}
html body .hero-card input,
html body .hero-card select,
html body .hero-card textarea {
  border-radius: 10px;
  background: var(--cream);
}

/* Mobile: intake first */
@media (max-width: 960px) {
  html body .hero-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
    padding-bottom: 40px;
  }
  html body .hero { padding: 28px 0 0; }
  html body .hero::before {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(178, 34, 52, 0.16), transparent 55%),
      linear-gradient(180deg, #0A1F75 0%, #050F3A 100%);
  }
}

/* ── Density + editorial cards ── */
html body section { padding: 72px 0; }
html body .section-title { letter-spacing: -0.03em; }
html body .section-lede { margin-bottom: 36px; }

html body .trust-bar { padding: 28px 0; }
html body .trust-card .num {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.03em;
}
html body .trust-card .num em { color: var(--bright-orange); }

html body .why-card,
html body .practice-card,
html body .testimonial-card,
html body .tool-card,
html body .faq-item,
html body .office-card {
  border-radius: 12px;
}
html body .why-card { padding: 28px 24px; }
html body .practice-card { min-height: 196px; }
html body .practice-card:hover {
  background: var(--navy);
  border-color: var(--navy);
}
html body .practice-card:hover h3,
html body .practice-card:hover p,
html body .practice-card:hover .arrow { color: #fff; }
html body .practice-card:hover .practice-icon { background: var(--red); }

html body .dual-claim-banner { padding: 72px 0; }
html body .dual-claim-card {
  border-radius: 14px;
  border-top: 0;
  overflow: hidden;
}
html body .dual-claim-card.dual-claim-injury {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  box-shadow: 0 24px 48px -20px rgba(10, 31, 117, 0.55);
}
html body .dual-claim-card.dual-claim-property {
  background: linear-gradient(160deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff;
  box-shadow: 0 24px 48px -20px rgba(178, 34, 52, 0.5);
}
html body .dual-claim-injury .dc-label,
html body .dual-claim-property .dc-label { color: #fff; }
html body .dual-claim-injury .dc-icon,
html body .dual-claim-property .dc-icon {
  background: rgba(255, 255, 255, 0.14);
}
html body .dc-list li {
  color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
html body .dual-claim-injury .dc-list li::before,
html body .dual-claim-property .dc-list li::before { color: var(--bright-orange); }
html body .dc-recovery {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.82);
}
html body .dc-recovery strong { color: #fff; }
html body .dc-plus { color: var(--navy); }

html body .attorney-photo {
  border-radius: 12px;
  box-shadow: 0 36px 70px -24px rgba(10, 31, 117, 0.5);
}
html body .attorney-photo::after { border-radius: 8px; }
html body .office-photo { border-radius: 12px; }
html body .office-photo::before { border-radius: 16px; }

html body .btn-red {
  box-shadow: 0 12px 28px -10px rgba(178, 34, 52, 0.55);
}

/* Inner-page heroes: Brad wash + tighter */
html body .page-hero {
  background:
    radial-gradient(ellipse 60% 80% at 90% 20%, rgba(178, 34, 52, 0.16), transparent 50%),
    linear-gradient(135deg, #0A1F75 0%, #071654 55%, #050F3A 100%);
  padding: 56px 0 48px;
}
html body .page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--flag);
}

html body .lu-intake-section {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-ink) 100%);
}
html body .lu-intake-card { border-radius: 14px; }

html body .final-cta,
html body .cta-band {
  border-top-width: 5px;
}

@media (max-width: 560px) {
  html body section { padding: 52px 0; }
}

/* ── Inner pages: kill leftover cream SaaS ── */
html body .page-hero::before {
  display: none;
  content: none;
}
html body header.header .back-link,
html body .back-link {
  color: rgba(247, 245, 240, 0.9);
}
html body header.header .back-link:hover,
html body .back-link:hover {
  color: #fff;
}
html body section.content,
html body section.calc,
html body section.methodology,
html body section.intro,
html body section.reviews,
html body .faq-section,
html body .creds {
  padding: 72px 0;
}
html body section.cases {
  padding: 56px 0 72px;
}
html body .stat-strip,
html body .stat-band {
  padding: 28px 0;
}
html body .final-cta,
html body .cta-band {
  border-top-width: 5px;
  padding: 72px 0;
}
html body .attorney-card,
html body .calc-form,
html body .calc-result,
html body .case-card,
html body .review-card,
html body .money-card,
html body .creds-card,
html body .compare-table,
html body .answer-first,
html body .pull-quote,
html body .dv-callout {
  border-radius: 12px;
}
html body .attorney-card { padding: 24px; }
html body .calc-form,
html body .calc-result { padding: 28px 24px; }
html body .calc-form { border-top-width: 5px; }