/* =============================================================================
   Homepage sections
   ========================================================================== */

/* Hero */
.hero { position: relative; background: var(--grad-hero); color: #fff; padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; opacity: 0.32; object-fit: cover; width: 100%; height: 100%; z-index: 0; }
/* legibility scrim so headline + subtext always pop over any hero photo */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,28,56,0.38) 0%, rgba(18,28,56,0.12) 45%, rgba(18,28,56,0.48) 100%); }
.hero__inner { position: relative; z-index: 2; max-width: 720px; }
.hero h1 { color: #fff; text-shadow: 0 3px 18px rgba(20,30,50,0.25); }
.hero__sub { color: rgba(255,255,255,0.95); font-size: clamp(1.05rem, 2.2vw, 1.3rem); margin: 1.1rem 0 1.8rem; max-width: 560px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__trust { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-weight: 700; font-size: 0.95rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
/* floating decorative blobs */
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.85; z-index: 1; }
.blob--sun { width: 120px; height: 120px; background: var(--color-sunshine); top: 12%; right: 8%; }
.blob--coral { width: 80px; height: 80px; background: var(--color-coral); bottom: 18%; right: 22%; }
.blob--lime { width: 64px; height: 64px; background: var(--color-lime); top: 30%; right: 38%; }
@media (max-width: 820px) { .blob { display: none; } }

/* Wave divider */
.wave { display: block; width: 100%; height: auto; margin-bottom: -6px; }

/* Trust strip */
.trust-strip { background: #fff; }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; text-align: center; }
.trust-strip__item .emoji { font-size: 2rem; }
.trust-strip__item b { display: block; font-family: var(--font-heading); margin-top: 0.35rem; }
.trust-strip__item small { color: var(--color-ink-soft); }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
.step { background: #fff; border-radius: var(--radius-lg); padding: 1.75rem 1.4rem; box-shadow: var(--shadow-card); text-align: center; position: relative; }
.step__num {
  width: 48px; height: 48px; margin: 0 auto 0.9rem; border-radius: 50%;
  background: var(--grad-sun); color: var(--color-ink); display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; box-shadow: var(--shadow-sun);
}
.step h3 { margin-bottom: 0.4rem; }
.step p { font-size: 0.96rem; }

/* Inventory */
.units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.unit__body { padding: 1.4rem 1.5rem 1.6rem; }
.unit__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.8rem; }
.unit__name { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.unit__price { font-family: var(--font-heading); font-weight: 700; color: var(--color-sky-deep); font-size: 1.3rem; white-space: nowrap; }
.unit__price small { display: block; font-size: 0.62rem; color: var(--color-ink-soft); font-weight: 600; text-align: left; }
.unit__pricewrap { display: flex; flex-direction: column; gap: 0.15rem; }
.unit__blurb { font-size: 0.97rem; margin-bottom: 1.1rem; }
.unit__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.unit__deposit { font-size: 0.82rem; color: var(--color-ink-soft); font-weight: 700; }
.ribbon {
  position: absolute; top: 14px; left: -2px; background: var(--color-coral); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; padding: 0.3rem 0.85rem 0.3rem 0.7rem;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0; box-shadow: var(--shadow-cta); z-index: 3;
}

/* Service area */
.area { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
.area__map {
  background: var(--grad-pool); border-radius: var(--radius-lg); min-height: 280px; position: relative;
  display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-card); overflow: hidden; text-align: center;
}
.area__pin { font-size: 3rem; }
.area__list { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.area__zipcheck { margin-top: 1.5rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.area__zipcheck input { flex: 1; min-width: 160px; padding: 0.8rem 1rem; border-radius: var(--radius-pill); border: 2px solid #d7e6f2; font: inherit; }
.area__result { margin-top: 0.8rem; font-weight: 700; min-height: 1.4em; }
.area__result.ok { color: #1a8a4e; }
.area__result.no { color: var(--color-coral-deep); }

/* Safety */
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.safety-card { background: #fff; border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-card); }
.safety-card .emoji { font-size: 2rem; }
.safety-card h3 { margin: 0.5rem 0 0.4rem; }
.safety-card p { font-size: 0.95rem; }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.quote { background: #fff; border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-card); }
.quote__stars { color: var(--color-sunshine); font-size: 1.1rem; letter-spacing: 2px; }
.quote p { color: var(--color-ink); font-size: 1rem; margin: 0.6rem 0 1rem; }
.quote__who { font-family: var(--font-heading); font-weight: 700; }
.quote__who small { display: block; color: var(--color-ink-soft); font-weight: 600; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); margin-bottom: 0.85rem; overflow: hidden; }
.faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; color: var(--color-ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq__q .icon { transition: transform 0.3s var(--bounce); color: var(--color-sky-deep); font-size: 1.4rem; line-height: 1; }
.faq__item.open .faq__q .icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__a p { padding: 0 1.3rem 1.2rem; font-size: 0.98rem; }

/* CTA band */
.cta-band { background: var(--grad-sun); text-align: center; border-radius: var(--radius-xl); padding: clamp(2.5rem, 6vw, 4rem); box-shadow: var(--shadow-pop); }
.cta-band h2 { color: var(--color-ink); }
.cta-band p { color: #6a4f12; font-weight: 700; margin: 0.6rem 0 1.5rem; font-size: 1.1rem; }

@media (max-width: 900px) {
  .steps, .units, .safety-grid, .testimonials, .trust-strip__grid { grid-template-columns: 1fr 1fr; }
  .area { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps, .units, .safety-grid, .testimonials, .trust-strip__grid { grid-template-columns: 1fr; }
}