/* ==========================================================================
   Premier Pool Care — shared stylesheet
   Design tokens sourced from Claude Design handoff (design_handoff_premier_pool_care)
   ========================================================================== */

:root {
  /* Colors */
  --ink: #0e2a36;
  --footer-dark: #071e29;
  --teal: #0e7490;
  --teal-hover: #155e75;
  --cyan: #06b6d4;
  --cyan-hover: #22d3ee;
  --on-cyan: #062a33;
  --eyebrow-cyan: #7dd3e8;
  --light-cyan-a: #a5e8f1;
  --light-cyan-b: #67e8f9;
  --body-muted: #5b7c8a;
  --body-dark: #35586a;
  --on-dark-body: #b9dde7;
  --on-dark-body-2: #d6ecf2;
  --on-dark-body-3: #cfe9f0;
  --page-bg: #f7fafb;
  --card-bg: #ffffff;
  --tint-bg-start: #e8f5f8;
  --tint-bg-end: #f2fafb;
  --border: #e2edf1;
  --input-border: #d5e6ec;
  --star: #f59e0b;
  --quote-text: #23414f;

  /* Type */
  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing / radii */
  --section-pad-y: 96px;
  --section-pad-x: 48px;
  --content-max: 1240px;
  --content-max-narrow: 1100px;
  --radius-card: 14px;
  --radius-btn: 8px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card-hover: 0 12px 32px rgba(14, 116, 144, 0.14);
  --shadow-testimonial: 0 4px 20px rgba(14, 116, 144, 0.07);
  --shadow-form: 0 24px 64px rgba(0, 0, 0, 0.35);
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-hover); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; margin: 0; }
p { margin: 0; }
button { font-family: var(--font-body); cursor: pointer; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; background: var(--teal); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-btn); z-index: 1000; transition: top .15s;
  font-weight: 700; font-size: 14px;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; border-radius: var(--radius-btn); font-weight: 800; font-size: 16px;
  border: none; text-align: center; line-height: 1.2;
}
.btn-cyan { background: var(--cyan); color: var(--on-cyan); }
.btn-cyan:hover { background: var(--cyan-hover); color: var(--on-cyan); }
.btn-outline {
  color: #fff; border: 1.5px solid rgba(255,255,255,0.45); background: transparent; padding: 14.5px 24px;
}
.btn-outline:hover { border-color: #fff; color: #fff; }
.btn-outline-teal { color: var(--teal); border: 1.5px solid var(--input-border); background: transparent; padding: 14.5px 24px; }
.btn-outline-teal:hover { border-color: var(--teal); color: var(--teal-hover); }
.btn-teal { background: var(--teal); color: #fff; padding: 12px 24px; font-size: 15px; }
.btn-teal:hover { background: var(--teal-hover); color: #fff; }
.btn-block { width: 100%; padding: 15px; font-size: 16px; }

/* ---- Top bar ---- */
.topbar {
  background: var(--ink); color: var(--light-cyan-a); font-size: 13px;
  padding: 8px var(--section-pad-x); display: flex; justify-content: space-between; align-items: center;
}
.topbar .topbar-right { display: flex; gap: 24px; }
.topbar a { color: #fff; font-weight: 700; }
.topbar a:hover { color: var(--light-cyan-a); }

/* ---- Header / nav ---- */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--section-pad-x); background: #fff; border-bottom: 1px solid var(--border);
  position: relative; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #0891b2, var(--teal));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 18px; flex-shrink: 0;
}
.brand-name { display: block; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand-sub { display: block; font-size: 11px; color: var(--body-muted); letter-spacing: 0.08em; text-transform: uppercase; }

.main-nav { display: flex; gap: 32px; font-weight: 600; font-size: 15px; }
.main-nav a { color: var(--ink); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--teal); }

.nav-toggle {
  display: none; background: none; border: none; padding: 8px; margin: -8px;
  color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; display: block; }

/* ---- Hero (image + overlay pattern) ---- */
.hero {
  position: relative; display: flex; align-items: center; overflow: hidden;
  background-color: var(--ink);
}
.hero-home { min-height: 620px; }
.hero-sub { min-height: 380px; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; }
.hero-overlay-home {
  background-image: linear-gradient(100deg, rgba(8,35,48,0.82) 0%, rgba(8,45,60,0.55) 45%, rgba(8,45,60,0.15) 75%);
}
.hero-overlay-sub {
  background-image: linear-gradient(100deg, rgba(8,35,48,0.85) 0%, rgba(8,45,60,0.6) 55%, rgba(8,45,60,0.25) 85%);
}
.hero-content { position: relative; z-index: 2; padding: 80px var(--section-pad-x); max-width: 680px; }
.hero-sub .hero-content { padding: 64px var(--section-pad-x); max-width: 720px; }
.eyebrow {
  color: var(--eyebrow-cyan); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 13px; margin-bottom: 16px;
}
.eyebrow-teal { color: var(--teal); margin-bottom: 12px; }
.hero-content h1 {
  font-size: 56px; line-height: 1.1; color: #fff; margin: 0 0 20px; text-wrap: pretty;
}
.hero-sub .hero-content h1 { font-size: 46px; line-height: 1.12; margin-bottom: 16px; }
.hero-content .lede { color: var(--on-dark-body-2); font-size: 19px; line-height: 1.6; margin: 0 0 32px; max-width: 520px; }
.hero-sub .hero-content .lede { font-size: 18px; margin-bottom: 0; max-width: none; }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.trust-row {
  display: flex; gap: 32px; margin-top: 48px; color: var(--on-dark-body-3); font-size: 14px; font-weight: 600; flex-wrap: wrap;
}

/* ---- Sections / layout ---- */
.section { padding: var(--section-pad-y) var(--section-pad-x); }
.container { max-width: var(--content-max); margin: 0 auto; }
.container-narrow { max-width: var(--content-max-narrow); margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { font-size: 40px; margin: 0 0 12px; letter-spacing: -0.01em; }
.section-head p { color: var(--body-muted); font-size: 17px; max-width: 560px; margin: 0 auto; }
.section-tint { background: linear-gradient(180deg, var(--tint-bg-start) 0%, var(--tint-bg-end) 100%); }

/* ---- Card grid (services) ---- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s;
}
.svc-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.svc-card-img-wrap { height: 160px; position: relative; background: #cbe7ee; }
.svc-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.svc-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc-card-body h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; font-family: var(--font-body); }
.svc-card-body p { color: var(--body-muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.svc-card-body .link-arrow { color: var(--teal); font-weight: 700; font-size: 14px; }
.svc-card-body .link-arrow:hover { color: var(--teal-hover); }

/* ---- Testimonials ---- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  background: #fff; border-radius: var(--radius-card); padding: 32px; box-shadow: var(--shadow-testimonial);
  display: flex; flex-direction: column; gap: 16px;
}
.stars { color: var(--star); font-size: 16px; letter-spacing: 3px; }
.testimonial-card blockquote, .quote-block {
  margin: 0; font-family: var(--font-heading); font-style: italic; font-size: 16.5px; line-height: 1.65;
  color: var(--quote-text); flex: 1;
}
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--light-cyan-b), var(--teal));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px;
  flex-shrink: 0;
}
.person-name { font-weight: 700; font-size: 15px; }
.person-loc { color: var(--body-muted); font-size: 13px; }

/* ---- Quote CTA ---- */
.quote-section { position: relative; overflow: hidden; background-color: var(--ink); }
.quote-section .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-section .quote-overlay { position: absolute; inset: 0; background: rgba(6,32,44,0.88); z-index: 1; }
.quote-grid {
  position: relative; z-index: 2; max-width: var(--content-max-narrow); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center;
}
.quote-grid h2 { font-size: 42px; color: #fff; margin: 0 0 16px; text-wrap: pretty; }
.quote-grid > div:first-child > p { color: var(--on-dark-body); font-size: 17px; line-height: 1.65; margin: 0 0 32px; }
.contact-list { display: flex; flex-direction: column; gap: 14px; color: var(--on-dark-body-2); font-size: 16px; font-weight: 600; }
.contact-list div { display: flex; align-items: center; gap: 12px; }
.contact-list .icon { color: var(--light-cyan-b); }
.contact-list a { color: var(--on-dark-body-2); }
.contact-list a:hover { color: #fff; }

.quote-form-card { background: #fff; border-radius: 16px; padding: 36px; box-shadow: var(--shadow-form); }
.quote-form-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 6px; font-family: var(--font-body); }
.quote-form-card .form-sub { margin: 0 0 22px; color: var(--body-muted); font-size: 14px; }
.quote-form { display: flex; flex-direction: column; gap: 14px; }
.quote-form input, .quote-form select {
  padding: 13px 16px; border: 1.5px solid var(--input-border); border-radius: var(--radius-btn);
  font-size: 15px; font-family: var(--font-body); outline: none; color: var(--ink); background: #fff; width: 100%;
}
.quote-form input:focus, .quote-form select:focus { border-color: var(--teal); }
.quote-form button[type="submit"] {
  background: var(--teal); color: #fff; border: none; border-radius: var(--radius-btn);
  font-weight: 800; font-size: 16px; padding: 15px;
}
.quote-form button[type="submit"]:hover { background: var(--teal-hover); }
.quote-form button[type="submit"].is-sent { background: #15803d; }
.form-note { font-size: 12.5px; color: var(--body-muted); margin-top: 4px; }

/* ---- Areas we serve chips ---- */
.areas-section { background: var(--footer-dark); padding: 40px var(--section-pad-x) 8px; text-align: center; }
.areas-section .eyebrow { margin-bottom: 16px; font-size: 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  background: rgba(125,211,232,0.12); color: var(--light-cyan-a); padding: 8px 16px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 600;
}
.chip:hover { background: rgba(125,211,232,0.24); color: #fff; }
.chip-light { background: var(--tint-bg-start); color: var(--ink); }
.chip-light:hover { background: var(--tint-bg-end); }

/* ---- Footer ---- */
.site-footer {
  background: var(--footer-dark); color: #7ba4b3; padding: 32px var(--section-pad-x);
  display: flex; justify-content: space-between; align-items: center; font-size: 14px; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand-mark {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #0891b2, var(--teal));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px;
}
.footer-brand-name { color: #cfe4ea; font-weight: 700; }
.footer-meta { text-align: right; }
.footer-meta a { color: #7ba4b3; }
.footer-meta a:hover { color: #cfe4ea; }

/* ---- City / service two-column body ---- */
.split-body {
  max-width: var(--content-max-narrow); margin: 0 auto; padding: 72px var(--section-pad-x);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start;
}
.split-main h2 { font-size: 32px; margin: 0 0 18px; }
.split-main p { color: var(--body-dark); font-size: 16.5px; line-height: 1.7; margin: 0 0 16px; }
.split-main h3 { font-family: var(--font-body); font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.checklist { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex; gap: 12px; align-items: baseline; color: var(--body-dark); font-size: 15.5px; line-height: 1.55;
}
.checklist .check { color: var(--teal); font-weight: 800; flex-shrink: 0; }

.sidebar { display: flex; flex-direction: column; gap: 20px; }
.side-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px; }
.side-card h3 { font-family: var(--font-body); font-size: 17px; font-weight: 800; margin: 0 0 16px; }
.side-links { display: flex; flex-direction: column; gap: 12px; font-size: 15px; font-weight: 600; }
.side-review { background: linear-gradient(180deg, var(--tint-bg-start), var(--tint-bg-end)); border-radius: var(--radius-card); padding: 28px; }
.side-review .stars { font-size: 15px; margin-bottom: 12px; }
.side-review blockquote { margin: 0 0 16px; font-size: 15.5px; }
.side-review .person-name { font-size: 14.5px; }
.pill-links { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 600; }

/* ---- Dark CTA band (city pages / subpages) ---- */
.cta-band { background: var(--footer-dark); padding: 72px var(--section-pad-x); text-align: center; }
.cta-band h2 { font-size: 36px; color: #fff; margin: 0 0 14px; }
.cta-band p { color: var(--on-dark-body); font-size: 16.5px; margin: 0 0 28px; }
.cta-band .hero-actions { justify-content: center; }

/* ---- Generic content page (About) ---- */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { color: var(--body-dark); font-size: 16.5px; line-height: 1.75; margin: 0 0 20px; }
.prose h2 { font-size: 32px; margin: 48px 0 18px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0; text-align: center; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 16px; }
.stat-num { font-family: var(--font-heading); font-size: 36px; font-weight: 600; color: var(--teal); }
.stat-label { font-size: 14px; color: var(--body-muted); font-weight: 600; margin-top: 6px; }

/* ---- 404 ---- */
.notfound { text-align: center; padding: 140px var(--section-pad-x); }
.notfound .eyebrow { justify-content: center; display: flex; }
.notfound h1 { font-size: 48px; margin: 0 0 16px; }
.notfound p { color: var(--body-muted); font-size: 17px; margin: 0 0 32px; }
.notfound .hero-actions { justify-content: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  :root { --section-pad-x: 24px; }
  .card-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; gap: 40px; }
  .quote-form-card { max-width: 420px; }
  .split-body { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .hero-content h1 { font-size: 44px; }
}

@media (max-width: 640px) {
  .topbar { flex-direction: column; gap: 4px; padding: 8px 16px; text-align: center; }
  .topbar .topbar-right { gap: 16px; }

  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-header { flex-wrap: wrap; padding: 14px 16px; }
  .site-header.nav-open .main-nav {
    display: flex; flex-direction: column; gap: 0; width: 100%; order: 3;
    margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px;
  }
  .site-header.nav-open .main-nav a { padding: 10px 0; }
  .header-cta { display: none; }
  .site-header.nav-open .header-cta { display: inline-flex; order: 4; margin-top: 10px; }

  .hero-home { min-height: 520px; }
  .hero-sub { min-height: 320px; }
  .hero-content { padding: 48px 20px; max-width: 100%; }
  .hero-sub .hero-content { padding: 40px 20px; }
  .hero-content h1 { font-size: 34px; }
  .hero-sub .hero-content h1 { font-size: 30px; }
  .hero-content .lede { font-size: 16.5px; }
  .hero-sub .hero-content .lede { font-size: 15.5px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .trust-row { flex-direction: column; gap: 10px; margin-top: 28px; }

  .section { padding: 56px 20px; }
  .section-head h2 { font-size: 28px; }
  .quote-grid h2 { font-size: 28px; }
  .cta-band h2 { font-size: 26px; }
  .cta-band .hero-actions { flex-direction: column; }

  .card-grid, .testimonial-grid, .stat-row { grid-template-columns: 1fr; }
  .quote-form-card { padding: 24px; max-width: 100%; }

  .site-footer { flex-direction: column; text-align: center; }
  .footer-meta { text-align: center; }

  .split-body { padding: 40px 20px; }
  .split-main h2 { font-size: 26px; }
}