/* Zack's Pool Service — public site styles. Mobile-first, pool-blue theme. */
:root {
  --deep: #075985;
  --ocean: #0369a1;
  --sky: #0ea5e9;
  --splash: #38bdf8;
  --foam: #e0f2fe;
  --mist: #f0f9ff;
  --ink: #10344a;
  --slate: #557082;
  --sun: #fbbf24;
  --white: #ffffff;
  /* Accent reds pulled from the logo artwork, so the site and logo match. */
  --logo-red: #e02726;
  --logo-red-dark: #b0161a;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(7, 89, 133, 0.12);
}

/* Slim contact bar above the header — puts the phone number one tap away
   on mobile, which is how most pool-service customers make first contact. */
.topbar {
  background: var(--deep);
  color: #d8effd;
  font-size: 0.9rem;
}
.topbar .container {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 22px; flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px;
  text-align: center;
}
.topbar a { color: #ffffff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.topbar a:hover { text-decoration: underline; }
.topbar .licensed {
  background: var(--logo-red); color: #fff; font-weight: 800;
  border-radius: 999px; padding: 2px 12px; font-size: 0.78rem;
  letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap;
}

/* Logo artwork in the header and hero. The header uses the character on its
   own (the full logo's wordmark is unreadable at this size) next to the
   business name as text. */
.brand-mark { height: 48px; width: auto; display: block; flex-shrink: 0; }
.hero-logo {
  max-width: 420px; width: 78%; height: auto; margin: 0 auto 22px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
}
@media (max-width: 720px) {
  .brand-mark { height: 40px; }
  .brand { font-size: 1.05rem; gap: 8px; }
  .hero-logo { width: 88%; margin-bottom: 18px; }
  .topbar { font-size: 0.9rem; }
  /* Email lives in the footer too, so drop it here to keep the bar compact
     and give the phone number room to be a comfortable tap target. */
  .topbar-email { display: none; }
  /* Phone is the primary way customers make first contact from a phone —
     give it a finger-friendly hit area rather than a thin line of text. */
  .topbar .container { padding-top: 2px; padding-bottom: 2px; }
  .topbar-item a { display: inline-block; padding: 11px 6px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--ocean); }
.container { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--foam);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; flex-wrap: wrap; }
.brand {
  font-weight: 800; font-size: 1.25rem; color: var(--deep); text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--deep); cursor: pointer; }
.site-nav { display: flex; gap: 6px; align-items: center; }
.site-nav a { text-decoration: none; color: var(--ink); font-weight: 600; padding: 8px 14px; border-radius: 999px; }
.site-nav a:hover { background: var(--mist); }
.site-nav a.active { background: var(--foam); color: var(--deep); }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700; cursor: pointer;
  border: none; border-radius: 999px; padding: 12px 24px; font-size: 1rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-cta { background: linear-gradient(135deg, var(--ocean), var(--sky)); color: var(--white) !important; }
.btn-ghost { background: var(--white); color: var(--deep); border: 2px solid var(--foam); }
.btn-sun { background: var(--sun); color: #4a3403 !important; }

/* Hero */
.hero {
  background: linear-gradient(160deg, var(--deep) 0%, var(--ocean) 45%, var(--sky) 100%);
  color: var(--white);
  padding: 64px 0 0;
  position: relative;
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; text-align: center; padding-bottom: 90px; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.15; margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: #bae6fd; }
.hero p.lead { font-size: 1.15rem; color: #d8effd; max-width: 560px; margin: 0 auto 28px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .bubbles span {
  position: absolute; bottom: -20px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
  animation: rise 14s infinite ease-in;
}
@keyframes rise { to { transform: translateY(-120vh); opacity: 0; } }
.wave-divider { display: block; width: 100%; margin-bottom: -1px; }

/* Sections */
.section { padding: 56px 0; }
.section.tint { background: var(--mist); }
.section h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--deep); text-align: center; margin-bottom: 8px; }
.section .sub { text-align: center; color: var(--slate); max-width: 620px; margin: 0 auto 36px; }

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--white); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow); border: 1px solid var(--foam);
  transition: transform 0.15s ease;
}
.card:hover { transform: translateY(-4px); }
.card .icon { font-size: 2.2rem; margin-bottom: 10px; }
.card h3 { color: var(--deep); margin-bottom: 8px; font-size: 1.15rem; }
.card p { color: var(--slate); font-size: 0.95rem; }
.card .detail { margin-top: 10px; font-size: 0.85rem; color: var(--ocean); font-weight: 600; }

/* Steps */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { text-align: center; padding: 18px; }
.step .num {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--ocean), var(--sky)); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;
}
.step h3 { color: var(--deep); font-size: 1.05rem; margin-bottom: 6px; }
.step p { color: var(--slate); font-size: 0.92rem; }

/* Gallery */
.gallery-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery-item { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--white); }
.gallery-item img { width: 100%; height: 220px; object-fit: cover; }
.gallery-item .cap { padding: 12px 16px; font-size: 0.9rem; color: var(--slate); }
.gallery-item .cap strong { color: var(--deep); display: block; }

/* Forms */
.form-card {
  max-width: 640px; margin: 0 auto; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--foam);
  padding: 30px;
}
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
label { font-weight: 700; color: var(--deep); font-size: 0.9rem; display: block; margin-bottom: 6px; }
label .opt { font-weight: 400; color: var(--slate); }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--foam); border-radius: 10px;
  font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--white);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--splash); }
textarea { resize: vertical; min-height: 90px; }
.errors { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; }

/* Trust band */
.trust { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; text-align: center; }
.trust div { min-width: 140px; }
.trust .big { font-size: 1.6rem; font-weight: 800; color: var(--deep); }
.trust .small { color: var(--slate); font-size: 0.9rem; }

/* CTA banner */
.cta-banner {
  background: linear-gradient(135deg, var(--deep), var(--sky));
  border-radius: var(--radius); color: var(--white); text-align: center;
  padding: 44px 24px; margin: 0 20px;
}
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: #d8effd; margin: 8px 0 20px; }

/* Footer */
.site-footer { background: var(--deep); color: #cfe8f7; margin-top: 56px; padding: 44px 0 20px; }
.site-footer .brand { color: var(--white); }
.site-footer a { color: #a5dcf9; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-bottom: 24px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 16px; font-size: 0.85rem; color: #9ccbe4; }

.thanks-card { text-align: center; max-width: 520px; margin: 60px auto; padding: 40px 30px; }
.thanks-card .splash { font-size: 3.4rem; }

/* Mobile */
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    padding: 10px 0; gap: 4px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { text-align: center; }
  .form-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 44px; }
}