:root {
  --brand-primary: #1f4fb2;
  --brand-primary-dark: #183f8f;
  --brand-navy: #0f2748;
  --brand-ink: #1f2a3d;
  --surface-page: #f3f5f9;
  --surface-card: #ffffff;
  --surface-muted: #eef2f7;
  --border-subtle: #d6deea;
}

body {
  color: var(--brand-ink);
  background: var(--surface-page);
}

html,
body {
  overflow-x: hidden;
}

/* Legacy helpers mapped to unified brand colors */
.bg-logo {
  background-color: var(--brand-primary) !important;
}

.text-logo,
.logo-color {
  color: var(--brand-primary) !important;
}

/* Normalize legacy Tailwind blue usage to one palette */
.text-blue-700 {
  color: var(--brand-primary) !important;
}

.text-blue-800 {
  color: var(--brand-primary-dark) !important;
}

.text-blue-300 {
  color: #9ebcff !important;
}

.bg-blue-700 {
  background-color: var(--brand-primary) !important;
}

.hover\:bg-blue-800:hover {
  background-color: var(--brand-primary-dark) !important;
}

.group[open] .group-open\:text-blue-700,
.group-open\:text-blue-700 {
  color: var(--brand-primary) !important;
}

.focus\:ring-blue-300:focus {
  --tw-ring-color: rgba(31, 79, 178, 0.35) !important;
}

/* Strong defaults for primary CTA readability */
.cta-inspection,
#callbackBtn {
  color: #ffffff !important;
  background-color: var(--brand-primary) !important;
}

.cta-inspection:hover,
#callbackBtn:hover {
  background-color: var(--brand-primary-dark) !important;
}

/* Hero helper for consistent image rendering */
.hero-section {
  background-image: url('/assets/homepage-hero.png') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0b1324;
}

/* Subtle page rhythm utility */
.section-muted {
  background-color: var(--surface-muted) !important;
}

.section-soft {
  background-color: #f7f9fc !important;
}

@media (max-width: 640px) {
  /* Keep readable gutters on phones even when section wrappers vary */
  section > .max-w-7xl,
  section > .max-w-6xl,
  section > .max-w-5xl,
  section > .max-w-4xl,
  section > .max-w-3xl,
  section > .max-w-2xl,
  section > .max-w-xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .home-process-section > .max-w-7xl {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  .home-process-card {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .home-built-section > .home-built-inner,
  .home-confidence-section > .max-w-7xl,
  footer .max-w-7xl {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .home-timeline-grid {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .home-timeline-card {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  /* Keep hero sections readable and compact on phones */
  section[style*="/assets/homepage-hero.png"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  section[style*="/assets/homepage-hero.png"] h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }

  /* Floating callback controls can overlap content on smaller screens */
  #callbackBtn {
    bottom: 5.25rem !important;
    right: 0.75rem !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.875rem !important;
    max-width: calc(100vw - 1.5rem);
  }

  #callbackMini {
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    max-width: none !important;
  }

  #callbackBtn,
  #callbackMini {
    display: none !important;
  }

  /* Prevent modal clipping on short viewports */
  #callbackModal > div,
  #quoteModal > div {
    max-height: 88vh;
    overflow-y: auto;
  }
}