@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700&display=swap");

:root {
  --navy: #0a2a5c !important;
  --navy-deep: #071e42;
  --navy-mid: #153a7a;
  --blue: #1d4ed8;
  --blue-bright: #2563eb;
  --blue-soft: #3b82f6;
  --sky: #60a5fa;
  --ice: #bfdbfe;
  /* Dark enough for text on light AND usable as solid button fill */
  --gold: #1d4ed8 !important;
  --ink: #142033 !important;
  --paper: #eef3fb !important;
  --muted: #4b5d76 !important;
  --background: #f5f8fd !important;
  --foreground: #142033 !important;
  --border: rgba(10, 42, 92, 0.16);
  --border-strong: rgba(37, 99, 235, 0.4);
  --shadow-soft: 0 10px 30px rgba(10, 42, 92, 0.08);
  --shadow-lift: 0 18px 40px rgba(10, 42, 92, 0.14);
  --shadow-3d:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 12px 28px rgba(10, 42, 92, 0.12),
    0 2px 6px rgba(10, 42, 92, 0.06);
  --gradient-hero: linear-gradient(145deg, #071e42 0%, #0a2a5c 45%, #1d4ed8 100%);
  --gradient-band: linear-gradient(120deg, #0a2a5c 0%, #153a7a 55%, #1d4ed8 100%);
  --gradient-cta: linear-gradient(135deg, #0f3f9a 0%, #1d4ed8 48%, #2563eb 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59, 130, 246, 0.14), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(37, 99, 235, 0.08), transparent 55%),
    linear-gradient(180deg, #f7faff 0%, #eef3fb 100%) !important;
  color: var(--ink) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.font-serif,
h1,
h2,
h3 {
  font-family: "Unbounded", Georgia, serif !important;
  letter-spacing: -0.02em;
  color: inherit;
}

*:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

/* ---------- Header / Footer ---------- */
header.sticky {
  background: linear-gradient(180deg, rgba(7, 30, 66, 0.98), rgba(10, 42, 92, 0.96)) !important;
  border-bottom: 1px solid rgba(191, 219, 254, 0.22) !important;
  box-shadow: 0 8px 24px rgba(7, 30, 66, 0.22);
  color: #fff !important;
}

header.sticky a,
header.sticky button,
header.sticky span {
  color: inherit;
}

header.sticky nav a {
  color: rgba(255, 255, 255, 0.88) !important;
}

header.sticky nav a:hover {
  color: #bfdbfe !important;
}

footer {
  background: linear-gradient(180deg, #0a2a5c, #071e42) !important;
  border-top: 1px solid rgba(191, 219, 254, 0.18) !important;
  color: #fff !important;
}

footer a {
  color: rgba(255, 255, 255, 0.85) !important;
}

footer a:hover {
  color: #fff !important;
}

footer .text-\[var\(--gold\)\],
header .text-\[var\(--gold\)\] {
  color: #bfdbfe !important;
}

/* ---------- Hero: white canvas + contrast blocks ---------- */
main > section:first-of-type,
main > section.hero-light,
section.hero-light {
  position: relative;
  overflow: visible;
  background: #ffffff !important;
  color: #142033 !important;
  border-bottom: 1px solid rgba(10, 42, 92, 0.1);
}

main > section:first-of-type::before,
main > section:first-of-type::after {
  display: none !important;
  content: none !important;
}

main > section:first-of-type > div {
  position: relative;
  z-index: 1;
}

/* Override dark-navy section paint for hero only */
main > section:first-of-type.bg-\[var\(--navy\)\],
main > section:first-of-type.text-white {
  background: #ffffff !important;
  color: #142033 !important;
}

/* Desktop layout: clearer two-column rhythm */
@media (min-width: 1024px) {
  main > section:first-of-type > div {
    align-items: start !important;
    gap: 2.5rem !important;
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  main > section:first-of-type > div > div:last-child {
    position: sticky;
    top: 6rem;
  }
}

/* Default text in hero = dark, high contrast */
main > section:first-of-type,
main > section:first-of-type h1,
main > section:first-of-type h2,
main > section:first-of-type h3,
main > section:first-of-type p,
main > section:first-of-type li,
main > section:first-of-type span,
main > section:first-of-type a {
  color: #142033 !important;
  -webkit-text-fill-color: unset;
}

main > section:first-of-type h1 {
  color: #0a2a5c !important;
  font-weight: 700 !important;
}

/* Badge / accent chip at top */
main > section:first-of-type > div > div:first-child > p:first-child {
  display: inline-flex !important;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.35rem;
  border: 1px solid rgba(37, 99, 235, 0.35) !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1);
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

/* Situations block — ONLY this stays compact */
main > section:first-of-type > div > div:first-child > div.mt-6,
main > section:first-of-type > div > div:first-child > div.mt-7 {
  margin-top: 0.85rem !important;
  padding: 0.65rem 0.8rem 0.75rem !important;
  border: 1px solid rgba(10, 42, 92, 0.14) !important;
  border-radius: 1rem !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 24px rgba(10, 42, 92, 0.08) !important;
}

main > section:first-of-type > div > div:first-child > div.mt-6 > p:first-child,
main > section:first-of-type > div > div:first-child > div.mt-7 > p:first-child {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
  margin-bottom: 0 !important;
}

/* Compact chip row */
main > section:first-of-type > div > div:first-child > div.mt-6 > div,
main > section:first-of-type > div > div:first-child > div.mt-7 > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin-top: 0.5rem !important;
}

/* Situation chips — dense pills only */
main > section:first-of-type a.rounded-xl,
main > section:first-of-type a.rounded-full,
main > section:first-of-type .hero-chip {
  color: #0a2a5c !important;
  background: #f8fbff !important;
  border: 1px solid rgba(10, 42, 92, 0.14) !important;
  box-shadow: 0 3px 8px rgba(10, 42, 92, 0.05) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  min-height: 32px !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 0.55rem !important;
  width: auto !important;
  flex: 0 1 auto;
}

main > section:first-of-type a.rounded-xl:hover,
main > section:first-of-type a.rounded-full:hover,
main > section:first-of-type .hero-chip:hover {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #0a2a5c !important;
}

/* BIG clear headline — instantly readable */
main > section:first-of-type > div > div:first-child > h1 {
  margin-top: 1rem !important;
  padding: 1.35rem 1.35rem 0.35rem !important;
  border: 1px solid rgba(10, 42, 92, 0.12);
  border-bottom: none;
  border-radius: 1.35rem 1.35rem 0 0;
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  box-shadow: 0 14px 34px rgba(10, 42, 92, 0.1);
  font-size: clamp(1.75rem, 4.2vw, 2.75rem) !important;
  line-height: 1.18 !important;
  color: #0a2a5c !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Topics line under H1 */
main > section:first-of-type > div > div:first-child > h1 + p,
main > section:first-of-type .hero-topics {
  margin-top: 0 !important;
  padding: 0.2rem 1.35rem 0.45rem !important;
  border-left: 1px solid rgba(10, 42, 92, 0.12);
  border-right: 1px solid rgba(10, 42, 92, 0.12);
  border-bottom: none;
  border-radius: 0 !important;
  background: #f3f8ff !important;
  box-shadow: none !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem) !important;
  line-height: 1.35 !important;
}

/* Lead under topics */
main > section:first-of-type > div > div:first-child > h1 + p + p {
  margin-top: 0 !important;
  padding: 0.35rem 1.35rem 1.35rem !important;
  border: 1px solid rgba(10, 42, 92, 0.12);
  border-top: none;
  border-radius: 0 0 1.35rem 1.35rem;
  background: linear-gradient(180deg, #f3f8ff, #eef5ff) !important;
  box-shadow: 0 14px 34px rgba(10, 42, 92, 0.1);
  color: #4b5d76 !important;
  font-weight: 500 !important;
  font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
  line-height: 1.55 !important;
}

/* Trust points — readable, not tiny */
main > section:first-of-type ul {
  gap: 0.75rem !important;
  margin-top: 0.35rem;
}

main > section:first-of-type ul li {
  color: #0a2a5c !important;
  background: #ffffff !important;
  border: 1px solid rgba(10, 42, 92, 0.14) !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 24px rgba(10, 42, 92, 0.08) !important;
  font-weight: 700 !important;
  padding: 0.9rem 1rem !important;
  font-size: 0.98rem !important;
}

/* Form cards in hero — white elevated panels */
main > section:first-of-type .rounded-2xl.border,
main > section:first-of-type .rounded-\[24px\],
main > section:first-of-type .rounded-\[28px\] {
  background: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 18px 40px rgba(10, 42, 92, 0.12) !important;
  color: #142033 !important;
}

main > section:first-of-type .rounded-2xl.border p,
main > section:first-of-type .rounded-2xl.border .text-sm,
main > section:first-of-type .rounded-2xl.border .text-xs {
  color: #142033 !important;
}

main > section:first-of-type .rounded-2xl.border .text-xs.font-medium.uppercase,
main > section:first-of-type .text-white\/60,
main > section:first-of-type .text-white\/65,
main > section:first-of-type .text-white\/55 {
  color: #4b5d76 !important;
}

/* Primary CTA inside hero forms keeps white-on-blue */
main > section:first-of-type form button[type="submit"],
main > section:first-of-type button.bg-\[var\(--gold\)\] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Lawyer secondary in hero */
main > section:first-of-type a[href="/lawyer"] > button,
main > section:first-of-type a[href="/lawyer/"] > button,
main > section:first-of-type button.border {
  background: #ffffff !important;
  color: #0a2a5c !important;
  -webkit-text-fill-color: #0a2a5c !important;
  border: 1px dashed rgba(10, 42, 92, 0.35) !important;
}

main > section:first-of-type img {
  border-radius: 1.1rem;
}

/* ---------- Surfaces ---------- */
article.rounded-2xl,
article.rounded-3xl,
.rounded-2xl.border,
.rounded-3xl.border,
.rounded-xl.border,
.rounded-2xl.bg-white,
.rounded-3xl.bg-white,
li.rounded-xl.bg-white,
div.rounded-3xl.border,
div.rounded-2xl.border {
  background: var(--gradient-surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-3d) !important;
  color: var(--ink);
}

.bg-\[var\(--paper\)\] {
  background: linear-gradient(180deg, #eef3fb, #e8f0fc) !important;
}

section.bg-\[var\(--navy)\],
div.rounded-3xl.bg-\[var\(--navy)\] {
  background: var(--gradient-band) !important;
  color: #fff !important;
  border: 1px solid rgba(191, 219, 254, 0.22);
  box-shadow: 0 20px 48px rgba(7, 30, 66, 0.28);
}

section.bg-\[var\(--navy)\] h1,
section.bg-\[var\(--navy)\] h2,
section.bg-\[var\(--navy)\] h3,
section.bg-\[var\(--navy)\] p,
section.bg-\[var\(--navy)\] li,
div.rounded-3xl.bg-\[var\(--navy)\] h2,
div.rounded-3xl.bg-\[var\(--navy)\] p {
  color: #fff !important;
}

section.bg-\[var\(--navy)\] .text-\[var\(--gold\)\],
div.rounded-3xl.bg-\[var\(--navy)\] .text-\[var\(--gold\)\] {
  color: #bfdbfe !important;
}

/* Accent labels on light surfaces — dark blue for contrast */
.text-\[var\(--gold\)\] {
  color: #1d4ed8 !important;
}

.text-\[var\(--navy)\] {
  color: #0a2a5c !important;
}

.text-\[var\(--muted)\] {
  color: #4b5d76 !important;
}

.text-\[var\(--ink)\] {
  color: #142033 !important;
}

/* ---------- BUTTONS: high contrast ---------- */
button,
a[class*="inline-flex"].rounded-md,
a[class*="inline-flex"].rounded-xl {
  -webkit-tap-highlight-color: transparent;
}

/* Primary / gold CTAs — ALWAYS white text on blue */
button.bg-\[var\(--gold\)\],
a.bg-\[var\(--gold\)\],
.bg-\[var\(--gold\)\],
a[href="/#lead-form"] button,
a[href="/#consult"] button,
a[href*="#lead-form"] button,
form button[type="submit"],
#lead-form button[type="submit"],
.fixed.inset-x-0.bottom-0 a.bg-\[var\(--gold\)\] {
  background: var(--gradient-cta) !important;
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 10px 24px rgba(29, 78, 216, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(7, 30, 66, 0.2);
}

button.bg-\[var\(--gold\)\]:hover,
a.bg-\[var\(--gold\)\]:hover,
.bg-\[var\(--gold\)\]:hover,
a[href="/#lead-form"] button:hover,
form button[type="submit"]:hover {
  background: linear-gradient(135deg, #1e40af, #2563eb) !important;
  background-color: #1e40af !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  filter: none;
}

/* Navy primary buttons — white on blue */
button.bg-\[var\(--navy)\],
a.bg-\[var\(--navy)\],
.bg-\[var\(--navy)\].text-white {
  background: var(--gradient-cta) !important;
  background-color: #0a2a5c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 24px rgba(10, 42, 92, 0.28) !important;
}

button.bg-\[var\(--navy)\]:hover {
  background: linear-gradient(135deg, #082249, #1d4ed8) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Outline / secondary — dark text on light */
button.border.border-\[var\(--navy\)\]\/20,
button.border.bg-white,
a button.border.bg-white,
a > button.border {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0a2a5c !important;
  -webkit-text-fill-color: #0a2a5c !important;
  border: 1px solid rgba(10, 42, 92, 0.22) !important;
  box-shadow: 0 6px 16px rgba(10, 42, 92, 0.06) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

button.border.bg-white:hover,
a > button.border:hover {
  border-color: #2563eb !important;
  color: #0a2a5c !important;
  -webkit-text-fill-color: #0a2a5c !important;
  background: #f8fbff !important;
}

/* Ghost */
button.text-\[var\(--navy)\].hover\:bg-\[var\(--navy\)\]\/5,
a button.ghost,
button:not([class*="bg-"]):not([class*="border"]) {
  color: #0a2a5c;
}

/* Lawyer secondary CTAs — muted, but still readable */
a[href="/lawyer"] > button,
a[href="/lawyer/register"] > button,
a[href="/lawyer/"] > button {
  background: #ffffff !important;
  color: #0a2a5c !important;
  -webkit-text-fill-color: #0a2a5c !important;
  border: 1px dashed rgba(10, 42, 92, 0.35) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Mobile sticky bar */
.fixed.inset-x-0.bottom-0 {
  background: rgba(255, 255, 255, 0.97) !important;
  border-top: 1px solid rgba(10, 42, 92, 0.14) !important;
  box-shadow: 0 -10px 30px rgba(10, 42, 92, 0.12);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.fixed.inset-x-0.bottom-0 a {
  min-height: 48px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.fixed.inset-x-0.bottom-0 a.border {
  background: #fff !important;
  color: #0a2a5c !important;
  -webkit-text-fill-color: #0a2a5c !important;
  border: 1px solid rgba(10, 42, 92, 0.2) !important;
}

.fixed.inset-x-0.bottom-0 a.bg-\[var\(--gold\)\] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Inputs */
input,
textarea,
select {
  color: #142033 !important;
  background: #fff !important;
  border: 1px solid rgba(10, 42, 92, 0.18) !important;
  border-radius: 0.75rem !important;
  min-height: 48px;
}

textarea {
  min-height: 7rem;
}

input::placeholder,
textarea::placeholder {
  color: #6b7c94 !important;
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22) !important;
  outline: none;
}

/* Inputs keep dark text everywhere */
main > section:first-of-type input,
main > section:first-of-type textarea {
  color: #142033 !important;
  background: #fff !important;
}

/* Category chips */
a.rounded-xl.border,
a.rounded-full.border {
  color: #0a2a5c !important;
  background: linear-gradient(180deg, #fff, #f3f7fd) !important;
  border-color: rgba(10, 42, 92, 0.16) !important;
  box-shadow: 0 4px 12px rgba(10, 42, 92, 0.05);
}

a.rounded-xl.border:hover,
a.rounded-full.border:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #0a2a5c !important;
}

li.rounded-full.border {
  color: #142033 !important;
  background: linear-gradient(180deg, #fff, #f3f7fd) !important;
  border-color: rgba(10, 42, 92, 0.14) !important;
}

#lead-form,
#consult .rounded-3xl {
  border: 1px solid var(--border-strong) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 50px rgba(10, 42, 92, 0.14) !important;
  background: #fff !important;
  color: var(--ink) !important;
}

#faq .rounded-2xl,
section#faq .rounded-2xl {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-3d) !important;
  overflow: hidden;
  background: #fff !important;
}

/* ---------- Structural layout: aligned grids ---------- */
.section-label,
main > section p.text-sm.font-medium.uppercase {
  color: #1d4ed8 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

main > section {
  padding-top: clamp(2.5rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}

main > section:first-of-type {
  padding-top: clamp(2rem, 3vw, 3.25rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3.25rem) !important;
}

#services .grid,
main section .grid.gap-4,
main section .grid.gap-5 {
  align-items: stretch;
  gap: 0.75rem !important;
}

#services .grid > article,
main section .grid > article {
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  #services .grid.md\:grid-cols-2,
  #services .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

#services article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1rem !important;
  border-radius: 1rem !important;
  background: linear-gradient(180deg, #fff, #f7faff) !important;
  border: 1px solid rgba(10, 42, 92, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 24px rgba(10, 42, 92, 0.08) !important;
}

#services article h3,
#services article .font-serif.text-xl,
#services article .font-serif.text-2xl {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  margin-top: 0.65rem !important;
  color: #0a2a5c !important;
  min-height: 2.5em;
}

#services article > p.text-sm,
#services article > p.mt-3 {
  flex: 1 1 auto !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: #4b5d76 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#services article > div.flex.h-11,
#services article > div:first-child.flex {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 0.65rem !important;
}

/* Services: keep forms visible; hide only old Подробнее /services links */
#services a[href*="/services/"] {
  display: none !important;
}

#services article a.sm\:flex-none:has(button.border),
#services article .mt-5.grid a:has(button.border),
#services article .mt-5.flex a:has(button.border) {
  display: none !important;
}

#services article form,
#services article input,
#services article .lawyer-offer,
#services article a[href="/lawyer"],
#services article a[href="/lawyer/"] {
  display: revert !important;
}

#services article a[href="/lawyer"],
#services article a[href="/lawyer/"] {
  display: block !important;
}

#services article .lawyer-offer {
  display: block !important;
}

#services article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#services article .lead-inline-form,
#services article .trust-mini-form,
#services article > div:last-child {
  margin-top: auto;
}

/* Trust cards equal height + forms */
main section.bg-\[var\(--paper\)\] .grid > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1rem !important;
}

main section.bg-\[var\(--paper\)\] .grid > article form,
main section.bg-\[var\(--paper\)\] .grid > article input,
main section.bg-\[var\(--paper\)\] .grid > article .lawyer-offer {
  display: revert !important;
}

/* ---------- Responsive layout ---------- */

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  h1,
  .font-serif.text-\[1\.7rem\] {
    line-height: 1.25 !important;
  }

  main {
    padding-bottom: 6.5rem !important;
  }

  .mx-auto.max-w-6xl.px-4,
  .mx-auto.max-w-3xl.px-4,
  .mx-auto.max-w-lg {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Full-width action buttons on mobile */
  section a > button,
  section form button,
  article a > button,
  article form button {
    width: 100% !important;
  }

  /* Service / card button stacks */
  article .grid.gap-2,
  article .sm\:flex {
    display: grid !important;
    gap: 0.5rem !important;
  }

  /* Softer 3D on touch — no jump */
  article.rounded-2xl:hover,
  .rounded-2xl.border:hover,
  li.rounded-xl.bg-white:hover {
    transform: none;
  }

  /* Hero chips on mobile — compact ONLY */
  main > section:first-of-type a.rounded-xl,
  main > section:first-of-type a.rounded-full,
  main > section:first-of-type .hero-chip {
    min-height: 30px !important;
    font-size: 11.5px !important;
    padding: 0.25rem 0.55rem !important;
    color: #0a2a5c !important;
    background: #f8fbff !important;
  }

  /* Big headline on mobile too */
  main > section:first-of-type > div > div:first-child > h1 {
    font-size: 1.7rem !important;
    padding: 1.1rem 1.1rem 0.35rem !important;
    line-height: 1.18 !important;
  }

  main > section:first-of-type > div > div:first-child > h1 + p,
  main > section:first-of-type .hero-topics {
    font-size: 1.05rem !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    line-height: 1.35 !important;
  }

  main > section:first-of-type > div > div:first-child > h1 + p + p {
    padding: 0.35rem 1.1rem 1.1rem !important;
    font-size: 1rem !important;
  }

  /* Header brand doesn't collide */
  header .font-serif {
    font-size: 1rem !important;
  }

  header .text-\[10px\],
  header .sm\:text-xs {
    font-size: 10px !important;
    line-height: 1.3 !important;
    max-width: 42vw;
    white-space: normal !important;
  }

  /* CTA band stack */
  div.rounded-3xl.bg-\[var\(--navy)\] .flex,
  div.rounded-3xl .sm\:flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media (min-width: 768px) {
  /* Desktop: keep primary CTAs prominent but not oversized */
  a[href="/#lead-form"] > button,
  form button[type="submit"] {
    min-height: 48px;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }

  article.rounded-2xl:hover,
  .rounded-2xl.border:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* Lead modal */
body.lead-modal-open { overflow: hidden !important; }
#lead-modal-root { display: none; position: fixed; inset: 0; z-index: 200; align-items: flex-end; justify-content: center; padding: 12px; }
#lead-modal-root.is-open { display: flex; }
@media (min-width: 640px) {
  #lead-modal-root.is-open { align-items: center; padding: 24px; }
}
.lead-modal-backdrop { position: absolute; inset: 0; background: rgba(7,30,66,.55); backdrop-filter: blur(2px); }
.lead-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 420px; border-radius: 24px; border: 1px solid rgba(10,42,92,.14); background: #fff; padding: 18px; box-shadow: 0 24px 60px rgba(7,30,66,.35); }
.lead-modal-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lead-modal-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #1d4ed8; }
.lead-modal-title { margin: 4px 0 0; font-family: Unbounded, Georgia, serif; font-size: 1.1rem; color: #0a2a5c; line-height: 1.3; }
.lead-modal-x { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(10,42,92,.14); background: #f8fbff; color: #0a2a5c; font-size: 22px; line-height: 1; cursor: pointer; }
.lead-modal-form { display: grid; gap: 10px; }
.lead-modal-form input { min-height: 44px; border-radius: 12px; border: 1px solid rgba(10,42,92,.18); padding: 0 12px; font-size: 16px; color: #142033; }
.lead-modal-submit { min-height: 48px; border: 0; border-radius: 12px; background: linear-gradient(135deg,#0f3f9a,#1d4ed8,#2563eb); color: #fff !important; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(29,78,216,.35); }
.lead-modal-note { margin: 0; font-size: 11px; color: #4b5d76; line-height: 1.4; }
.lead-modal-msg { margin: 0; font-size: 13px; font-weight: 600; }
.lead-modal-msg.is-ok { color: #15803d; }
.lead-modal-msg.is-error { color: #dc2626; }

/* Trust mini forms */
.lead-inline-form, .trust-mini-form { margin-top: auto; padding-top: 12px; }
.lead-inline-title { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #0a2a5c; }
.lead-inline-form-el { display: grid; gap: 8px; }
.lead-inline-form-el input { min-height: 40px; border-radius: 10px; border: 1px solid rgba(10,42,92,.16); padding: 0 10px; font-size: 15px; background: #fff; color: #142033; }
.lead-inline-form-el button { min-height: 42px; border: 0; border-radius: 10px; background: linear-gradient(135deg,#0f3f9a,#2563eb); color: #fff !important; font-weight: 700; cursor: pointer; }
.lead-inline-note { margin: 0; font-size: 10px; color: #5a6b82; line-height: 1.35; }

/* Trust articles stretch for forms */
section.bg-\[var\(--paper\)\] .grid > article,
main section .grid.lg\:grid-cols-4 > article {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.lead-lawyer-box { margin-top: 10px; padding: 10px; border: 1px dashed rgba(10,42,92,.28); border-radius: 12px; background: rgba(255,255,255,.85); }
.lead-lawyer-label { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5a6b82; }
.lead-lawyer-btn { margin-top: 8px; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 10px; border: 1px solid rgba(10,42,92,.2); background: #fff; color: #0a2a5c !important; font-size: 13px; font-weight: 700; text-decoration: none; }
.lead-inline-msg { margin: 4px 0 0; font-size: 12px; font-weight: 600; }
.lead-inline-msg.is-ok { color: #15803d; }
.lead-inline-msg.is-error { color: #dc2626; }
.card-lead-block { margin-top: auto; padding-top: 12px; }

#services article .card-lead-block,
#services article .lead-inline-form,
#services article form,
#services article input,
#services article .lawyer-offer {
  display: block !important;
}
#services article input { display: block !important; width: 100%; }
#services article .lead-inline-form-el { display: grid !important; gap: 8px !important; }

/* Mobile form + cards adaptation */
@media (max-width: 767px) {
  #services .grid,
  main section.bg-\[var\(--paper\)\] .grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  #services article,
  main section.bg-\[var\(--paper\)\] .grid > article {
    padding: 0.9rem !important;
    min-width: 0;
  }

  #services article h3,
  #services article .font-serif {
    min-height: 0 !important;
    font-size: 1rem !important;
  }

  #services article > p.text-sm,
  #services article > p.mt-3 {
    -webkit-line-clamp: 4;
    font-size: 0.84rem !important;
  }

  .lead-inline-form-el input,
  .lead-modal-form input,
  .card-lead-block input,
  input[name="phone"],
  input[type="tel"] {
    min-height: 44px !important;
    font-size: 16px !important; /* prevent iOS zoom */
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .lead-inline-form-el button,
  .lead-modal-submit,
  .lead-lawyer-btn {
    min-height: 44px !important;
    width: 100% !important;
  }

  .lead-modal-panel {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 14px !important;
    max-height: min(92vh, 720px);
    overflow: auto;
  }

  #lead-modal-root.is-open {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .card-lead-block,
  .lead-inline-form,
  .lawyer-offer,
  .lead-lawyer-box {
    width: 100%;
    min-width: 0;
  }

  .fixed.inset-x-0.bottom-0 {
    z-index: 90;
  }

  #lead-modal-root {
    z-index: 220;
  }

  main {
    padding-bottom: 7rem !important;
  }
}