/* ── Loudoun Home Care — site styles ── */

:root { color-scheme: light; }
body { font-family: 'Nunito Sans', system-ui, sans-serif; }
h1,h2,h3,h4,.font-display { font-family: 'Fraunces', Georgia, serif; }

.brand-card {
  background:
    radial-gradient(circle at top left, rgba(216,31,44,.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(201,162,39,.16), transparent 36%),
    #fff;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ---------- Ambient blobs ---------- */
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-22px) scale(1.06); } }
.blob { animation: drift 16s ease-in-out infinite; }
.blob.b2 { animation-duration: 22s; animation-direction: reverse; }

/* ---------- Live badge pulse ---------- */
@keyframes pulse-ring { 0% { transform: scale(.85); opacity: .7; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
.pulse-dot::before { content:''; position:absolute; inset:0; border-radius:9999px; background:#22C55E; animation: pulse-ring 2.4s cubic-bezier(.4,0,.6,1) infinite; }

/* ---------- Nav underline sweep ---------- */
.navlink { position: relative; }
.navlink::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:#A84B2A; transition: width .3s ease; }
.navlink:hover::after, .navlink:focus-visible::after { width:100%; }

/* ---------- Marquee ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Accordion ---------- */
details[open] .faq-chevron { transform: rotate(180deg); }

/* ---------- Forms ---------- */
.form-input { width: 100%; border:1px solid #E7E1DA; border-radius:1rem; padding:.9rem 1rem; background:#fff; }
.form-input:focus { outline:3px solid rgba(216,31,44,.22); border-color:#D81F2C; }

/* ---------- Focus ring ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #A84B2A; outline-offset: 2px; border-radius: 6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .blob, .marquee-track, .pulse-dot::before { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Mobile ---------- */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 639px) {
  body { padding-bottom: 88px; }
  .mobile-hide-request { display: none !important; }
  .mobile-menu-panel {
    position: fixed; top: 86px; left: 12px; right: 12px; z-index: 60; margin-top: 0 !important;
  }
  .mobile-menu-panel > div { max-height: calc(100vh - 120px); overflow-y: auto; }
}