/* Afloat Pool Co. — brand stylesheet.
   Palette and type are locked in BRAND.md. Aqua base, coral accent, ink text.
   Full-bleed aqua hero, alternating white / mist bands, quote form in its own band near the bottom. */
:root {
  --aqua:#12B5C8; --aqua-deep:#0E96A6; --aqua-mist:#E6F7F9; --coral:#FF6B57; --coral-deep:#E85A47;
  --ink:#14232B; --slate:#4E6169; --line:#D6E4E7; --white:#FFFFFF;
  --display:"Fredoka","Nunito","Helvetica Neue",Arial,sans-serif;
  --body:"Nunito","Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; margin:0; }
.wrap { max-width:1080px; margin:0 auto; padding-inline:20px; }
h1,h2,h3 { font-family:var(--display); font-weight:600; letter-spacing:-.01em; margin:0; text-wrap:balance; }
h1 { font-size:clamp(38px,6vw,64px); line-height:1.02; }
h2 { font-size:clamp(28px,3.6vw,40px); line-height:1.1; }
h3 { font-size:21px; line-height:1.25; }
p { margin:0; }
a { color:inherit; }
.eyebrow { display:inline-block; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--aqua-deep); margin-bottom:12px; }
.eyebrow-light { color:#F1FBFC; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 17px/1 var(--display); padding:16px 26px; border-radius:999px; border:0; cursor:pointer; text-decoration:none; transition:transform .12s ease, background .12s ease; }
.btn:active { transform:scale(.98); }
.btn-block { width:100%; }
.btn-coral { background:var(--coral); color:var(--white); }
.btn-coral:hover { background:var(--coral-deep); }
.btn-white { background:var(--white); color:var(--ink); }
.btn-white:hover { background:var(--aqua-mist); }
.btn-ghost { background:transparent; color:var(--ink); border:2px solid var(--line); }
.btn-ghost:hover { border-color:var(--aqua); }
:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }

/* nav */
.nav { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand svg { width:40px; height:40px; }
.brand .word { font:600 26px/1 var(--display); letter-spacing:-.01em; }
.brand .word small { display:block; font:600 9px/1 var(--body); letter-spacing:.32em; color:var(--aqua-deep); margin-top:3px; }
.nav ul { display:flex; gap:22px; list-style:none; margin:0; padding:0; font-weight:700; font-size:15px; }
.nav ul a { text-decoration:none; color:var(--slate); }
.nav ul a:hover { color:var(--ink); }
.nav .btn { padding:12px 20px; font-size:15px; }
@media (max-width:760px) { .nav ul { display:none; } }

/* hero */
.hero { background:var(--aqua); color:var(--white); position:relative; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding-block:64px 72px; }
.hero h1 { color:var(--white); }
.hero .lede { font-size:20px; margin-top:18px; max-width:52ch; color:#F1FBFC; }
.hero .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero .facts { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; font-weight:700; font-size:15px; color:#F1FBFC; }
.hero .facts span::before { content:"\25CF"; color:var(--coral); margin-right:8px; font-size:11px; vertical-align:2px; }
.ring-stage { display:flex; justify-content:center; align-items:center; min-width:0; }
.ring-stage svg { width:min(100%,380px); height:auto; }
@media (max-width:820px) { .hero .wrap { grid-template-columns:1fr; padding-block:44px 52px; } .ring-stage { order:-1; } .ring-stage svg { width:min(60%,240px); } }
@media (prefers-reduced-motion: no-preference) { .bubble { animation:rise 6s ease-in-out infinite; transform-origin:center; } .bubble.b2 { animation-delay:2s; } @keyframes rise { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } } }

/* bands */
section { padding-block:72px; }
section.mist { background:var(--aqua-mist); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
@media (max-width:820px) { .grid3 { grid-template-columns:1fr; } }
.step { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:26px 24px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.step .num { width:44px; height:44px; border-radius:50%; background:var(--aqua); color:var(--white); font:600 20px/44px var(--display); text-align:center; }
.step p { color:var(--slate); }
.check { list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; }
.check li { padding-left:34px; position:relative; font-weight:600; }
.check li::before { content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%; background:var(--aqua); }
.check li::after { content:""; position:absolute; left:7px; top:8px; width:6px; height:10px; border:solid var(--white); border-width:0 3px 3px 0; transform:rotate(45deg); }
@media (max-width:640px) { .check { grid-template-columns:1fr; } }
.split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
@media (max-width:820px) { .split { grid-template-columns:1fr; } }
.lead { color:var(--slate); font-size:18px; margin-top:14px; max-width:58ch; }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
@media (max-width:900px) { .plans { grid-template-columns:1fr; } }
.plan { background:var(--white); border:2px solid var(--line); border-radius:22px; padding:28px 26px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.plan.featured { border-color:var(--coral); position:relative; }
.plan.featured .tag { position:absolute; top:-14px; left:24px; background:var(--coral); color:var(--white); font:600 12px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; border-radius:999px; }
.plan .price { font:600 44px/1 var(--display); }
.plan .price small { font:700 15px/1 var(--body); color:var(--slate); margin-left:4px; }
.plan ul { margin:0; padding-left:20px; color:var(--slate); display:grid; gap:6px; }
.plan .btn { margin-top:auto; }
.note { font-size:14px; color:var(--slate); margin-top:18px; max-width:70ch; }

/* areas */
.areas { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.areas span { background:var(--white); border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-weight:700; font-size:15px; }

/* faq */
.faqs { margin-top:22px; }
details { border-bottom:1px solid var(--line); }
details summary { cursor:pointer; list-style:none; font:600 19px/1.3 var(--display); padding:18px 36px 18px 0; position:relative; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:"+"; position:absolute; right:4px; top:14px; font:500 26px/1 var(--display); color:var(--coral); }
details[open] summary::after { content:"\2013"; }
details p { color:var(--slate); padding-bottom:18px; max-width:68ch; }

/* quote */
.quote { background:var(--ink); color:var(--white); }
.quote .eyebrow { color:var(--aqua); }
.quote h2 { color:var(--white); }
.quote .lead { color:#C9D6DB; }
form { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
form .full { grid-column:1 / -1; }
label { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:14px; color:#C9D6DB; min-width:0; }
input, select, textarea { font:600 16px/1.3 var(--body); color:var(--ink); background:var(--white); border:2px solid transparent; border-radius:12px; padding:13px 14px; width:100%; min-width:0; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--aqua); }
input.bad { border-color:var(--coral); }
textarea { min-height:96px; resize:vertical; }
.form-error { background:#3a1f1b; border-left:4px solid var(--coral); color:#FFD9D3; padding:12px 16px; border-radius:0 10px 10px 0; margin-top:22px; font-weight:700; }
.alt { margin-top:18px; font-size:15px; color:#C9D6DB; }
.alt b { color:var(--white); font-size:20px; font-family:var(--display); font-weight:600; letter-spacing:.02em; }
.alt a { text-decoration:none; }
.recaptcha-notice { font-size:12px; color:#9FB2BA; margin-top:12px; }
@media (max-width:640px) { form { grid-template-columns:1fr; } }

footer { background:var(--white); border-top:1px solid var(--line); padding-block:36px 44px; color:var(--slate); font-size:14px; }
footer .wrap { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:26px; }
footer h4 { font:600 15px/1 var(--display); color:var(--ink); margin:0 0 10px; }
footer ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
footer a { text-decoration:none; }
footer .brand { margin-bottom:12px; }
footer .legal { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:16px; font-size:13px; }
@media (max-width:760px) { footer .wrap { grid-template-columns:1fr; } }

/* ---- interior pages ---- */
.hero-sm .wrap { padding-block:44px 52px; }
.hero-sm h1 { font-size:clamp(32px,4.6vw,52px); }
.crumbs { font-size:13px; color:#DFF6F8; margin-bottom:14px; }
.crumbs a { color:#F1FBFC; text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.prose h3 { margin-top:22px; }
.prose h3:first-child { margin-top:0; }
.prose p { color:var(--slate); margin-top:6px; }
.plans-2 { grid-template-columns:repeat(2,1fr); max-width:760px; }
@media (max-width:760px) { .plans-2 { grid-template-columns:1fr; } }
.city-services { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.city-services a { font-weight:700; text-decoration:none; color:var(--aqua-deep); }
.city-services a:hover { text-decoration:underline; }
.areas a.chip { text-decoration:none; color:var(--ink); }
.areas a.chip:hover { border-color:var(--aqua); }
.area-cards { margin-top:22px; }
.area-card { text-decoration:none; color:inherit; }
.area-card .more { color:var(--aqua-deep); font-weight:700; margin-top:auto; }
.area-card:hover { border-color:var(--aqua); }
.nav ul a.active { color:var(--ink); }
/* articles */
.article { max-width:70ch; }
.article h2 { font-size:clamp(24px,3vw,32px); margin:40px 0 12px; }
.article h3 { margin:28px 0 8px; }
.article p, .article li { color:var(--ink); margin-bottom:14px; }
.article ul, .article ol { padding-left:22px; margin:0 0 14px; }
.article .meta { color:var(--slate); font-size:14px; margin-bottom:22px; }
.article .callout { background:var(--aqua-mist); border-left:4px solid var(--aqua); padding:14px 18px; border-radius:0 10px 10px 0; margin:22px 0; }
.article .callout a { color:var(--aqua-deep); font-weight:700; }
.post-list { display:grid; gap:18px; margin-top:26px; }
.post-list a { display:block; text-decoration:none; color:inherit; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:22px 24px; }
.post-list a:hover { border-color:var(--aqua); }
.post-list h3 { margin-bottom:6px; }
.post-list p { color:var(--slate); }
.check li.no::before { background:var(--coral); }
.check li.no::after { width:10px; height:2px; border:0; background:var(--white); left:6px; top:13px; transform:none; }


/* ---- interior pages: light hero with a blob image, distinct from the homepage's aqua hero ---- */
.hero-int { background:var(--aqua-mist); color:var(--ink); position:relative; overflow:hidden; }
.hero-int .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding-block:48px 56px; }
.hero-int h1 { font-size:clamp(32px,4.6vw,52px); color:var(--ink); }
.hero-int .lede { font-size:19px; margin-top:16px; max-width:54ch; color:var(--slate); }
.hero-int .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero-int .crumbs { color:var(--slate); }
.hero-int .crumbs a { color:var(--aqua-deep); }
.hero-int .eyebrow { color:var(--aqua-deep); }
@media (max-width:820px) { .hero-int .wrap { grid-template-columns:1fr; padding-block:36px 44px; } .hero-int .blob { max-width:340px; margin:0 auto; } }
.blob { position:relative; margin:0; width:100%; aspect-ratio:6/5; max-width:100%; }
.blob img { width:100%; height:100%; object-fit:cover; display:block; clip-path:url(#blobclip1); }
.blob-2 img { clip-path:url(#blobclip2); }
.blob-3 img { clip-path:url(#blobclip3); }
.blob-dot { position:absolute; width:14%; aspect-ratio:1; border-radius:50%; background:var(--coral); right:2%; top:4%; z-index:1; }
.blob-dot-2 { width:7%; right:-2%; top:-3%; opacity:.8; }
@media (prefers-reduced-motion: no-preference) { .blob-dot { animation:rise 7s ease-in-out infinite; } .blob-dot-2 { animation-delay:1.5s; } }
.band { display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
.band.flip { grid-template-columns:1.1fr .9fr; }
.band.flip .blob { order:2; }
.band .blob { max-width:460px; }
@media (max-width:820px) { .band, .band.flip { grid-template-columns:1fr; } .band.flip .blob { order:0; } .band .blob { max-width:340px; } }
.post-cover { margin:0 0 26px; }
.post-cover .blob { max-width:520px; aspect-ratio:3/2; }


/* ---- wave dividers (static) ---- */
.wave { display:block; width:100%; height:clamp(36px,6vw,80px); background:var(--wave-from); line-height:0; }
.wave svg { display:block; width:100%; height:100%; }
.wave path { fill:var(--wave-to); }
.wave-flip svg { transform:scaleX(-1); }
section + .wave, .wave + section { margin:0; }
section.tight-top { padding-top:24px; }
section.tight-bottom { padding-bottom:36px; }

/* ---- homepage additions ---- */
.who { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }
@media (max-width:900px) { .who { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .who { grid-template-columns:1fr; } }
.who .step h3 { font-size:18px; }
.about-facts { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; }
.about-facts li { padding-left:30px; position:relative; font-weight:600; }
.about-facts li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--coral); }
.about-facts li small { display:block; font-weight:400; color:var(--slate); }
.promise { background:var(--white); border:2px solid var(--line); border-radius:22px; padding:26px 28px; margin-top:30px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px) { .promise { grid-template-columns:1fr; } }
.promise div { display:flex; flex-direction:column; gap:6px; }
.promise strong { font-family:var(--display); font-weight:600; font-size:19px; }
.promise span { color:var(--slate); font-size:15px; }