/* ==========================================================================
   site.css — styles for the PUBLIC website only (not the business tools).
   ========================================================================== */

body.site { background: var(--color-surface); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border-light);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  color: var(--color-navy);
  text-decoration: none;
  margin-right: auto;
}
.site-header__nav { display: flex; gap: var(--space-4); }
.site-header__nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] { color: var(--color-brand-dark); }

/* Menu button: phones only */
.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}
.site-header__bars,
.site-header__bars::before,
.site-header__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-navy);
  border-radius: 2px;
}
.site-header__bars { position: relative; }
.site-header__bars::before,
.site-header__bars::after { content: ""; position: absolute; left: 0; }
.site-header__bars::before { top: -6px; }
.site-header__bars::after { top: 6px; }

@media (max-width: 760px) {
  .site-header__inner { gap: var(--space-2); }
  .site-header__toggle { display: block; }
  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: var(--shadow);
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__nav a { padding: var(--space-3) 0; font-size: var(--text-base); border-bottom: 1px solid var(--color-border-light); }
  .site-header__nav a:last-child { border-bottom: 0; }
}
@media (max-width: 420px) {
  .site-header__brand span { font-size: var(--text-sm); }
  .site-header__brand img { width: 30px; height: 30px; }
  .site-header__phone { display: none; }
}

/* Hero */
.hero {
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-8) 0;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 3.25rem); max-width: 16ch; }
.hero p { color: #cbd5e1; font-size: var(--text-lg); max-width: 55ch; }
.hero .eyebrow { color: var(--color-brand); }
.hero .btn--ghost { background: transparent; color: #fff; border-color: #475569; }
.hero .btn--ghost:hover { background: var(--color-navy-2); }
.hero--page { padding: var(--space-7) 0; }
.hero--page h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); max-width: 22ch; }

/* Sections */
.section { padding: var(--space-8) 0; }
.section--alt { background: var(--color-surface-alt); }
.section__head { max-width: 60ch; margin-bottom: var(--space-6); }
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand-dark);
  margin-bottom: var(--space-2);
}
@media (max-width: 640px) {
  .section { padding: var(--space-7) 0; }
  .hero { padding: var(--space-7) 0; }
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-top: 4px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.service-card__icon { font-size: 2rem; margin-bottom: var(--space-2); }
.service-card ul { margin: 0 0 var(--space-4); padding-left: 1.2rem; color: var(--color-muted); }
.service-card p { color: var(--color-muted); }
.service-card__link { margin-top: auto; font-weight: 700; text-decoration: none; }
.service-card__link:hover { text-decoration: underline; }

/* Numbered steps ("How it works") */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-weight: 800;
}
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.steps p { color: var(--color-muted); margin: 0; }

/* Check-mark list */
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.check-list li { position: relative; padding-left: 1.9rem; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: 800;
}

/* Two columns that stack on phones */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

/* FAQ */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.faq summary { font-weight: 700; cursor: pointer; color: var(--color-navy); }
.faq details p { margin: var(--space-2) 0 0; color: var(--color-muted); }

/* Call-to-action band */
.cta-band {
  background: var(--color-brand);
  color: #fff;
  padding: var(--space-7) 0;
}
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cta-band h2 { color: #fff; margin: 0; }
.cta-band p { margin: var(--space-1) 0 0; color: #e0f7ff; }
.cta-band .btn { background: var(--color-navy); }
.cta-band .btn:hover { background: var(--color-navy-2); }

/* Contact page */
.contact-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.contact-card h2 { font-size: var(--text-xl); }
.contact-card .btn-row { margin-bottom: var(--space-4); }
.quote-form .btn { margin-top: var(--space-4); }
.form-hint { font-size: var(--text-xs); color: var(--color-muted); }
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
}
.form-status--ok { background: var(--color-success-bg); color: var(--color-success); }
.form-status--error { background: var(--color-danger-bg); color: var(--color-danger); }
/* Spam trap: hidden from people, visible to bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.site-footer {
  background: var(--color-navy);
  color: #e2e8f0;
  padding: var(--space-6) 0 var(--space-4);
}
.site-footer a { color: #e2e8f0; }
.site-footer .muted { color: #94a3b8; }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
}
.site-footer__links { display: flex; flex-direction: column; gap: var(--space-1); }
.site-footer__legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-navy-2);
}