/* ===========================================================
   Mizner shared design system
   Consumed by both /pavers and /pools via <link href="/shared/css/base.css">.
   Brand tokens (colors) are overridden per-site in that site's own style.css,
   which is loaded AFTER this file.
   =========================================================== */

:root {
  /* Brand tokens: default (Pavers). Pools overrides these. */
  --brand: #B1552E;
  --brand-dark: #8A3F20;
  --brand-light: #F2DDC8;
  --accent: #C98A3D;
  --accent-dark: #A46B28;
  --ink: #1D1712;
  --ink-soft: #5B534B;
  --paper: #FFFFFF;
  --paper-alt: #F0EFEB;
  --line: #E4E1DA;
  --white: #FFFFFF;

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.6rem;
  --space-4: 2.4rem;
  --space-5: 4rem;
  --space-6: 6.4rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 8px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 12px 32px rgba(20, 20, 20, 0.12);
  --shadow-lg: 0 24px 60px rgba(20, 20, 20, 0.18);

  --max-width: 1240px;
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 5vw, 5rem); }
h2 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); }
h3 { font-weight: 700; font-size: clamp(1.4rem, 2vw, 1.9rem); }
h4 { font-weight: 700; font-size: 1.15rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
.text-soft { color: var(--ink-soft); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); }
.section { padding: var(--space-6) 0; background: var(--paper); position: relative; }
.section--tight { padding: var(--space-5) 0; }
.section--alt { background: var(--paper-alt); }
.section--dark { background: var(--ink); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--brand { background: var(--brand); color: var(--white); }
.section--brand h2, .section--brand h3 { color: var(--white); }
.section-head { max-width: 680px; margin: 0 auto var(--space-5); text-align: center; display: grid; gap: var(--space-2); justify-items: center; }
.section-head--left { margin: 0 0 var(--space-5); text-align: left; justify-items: start; }
@media (max-width: 640px) {
  .section { padding: var(--space-4) 0; }
  .section--tight { padding: var(--space-3) 0; }
  .section-head, .section-head--left { margin-bottom: var(--space-4); }
}
@media (max-width: 480px) {
  .wrap { padding: 0 var(--space-3); }
}

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--accent-dark); box-shadow: var(--shadow-md); }
.btn-brand { background: var(--brand); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-brand:hover { background: var(--brand-dark); box-shadow: var(--shadow-md); }
.btn-outline { border-color: currentColor; background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline-ink:hover { background: var(--ink); color: var(--white); }
.btn-ghost { background: rgba(255,255,255,0.14); color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.24); }
.btn-block { width: 100%; }
.btn-lg { padding: 1.1em 2.1em; font-size: 1.05rem; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- Header ---------- */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-1); padding-bottom: var(--space-1); gap: var(--space-3); }
.topbar a { display: inline-flex; align-items: center; gap: 0.4em; }
.topbar a:hover { color: var(--white); }
.topbar-links { display: flex; gap: var(--space-4); align-items: center; min-width: 0; }
@media (max-width: 640px) {
  .topbar .badge-license { display: none; }
  .topbar .wrap > a:last-child { display: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  color: var(--ink);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--space-4); }

/* Transparent header overlaying a full-bleed photo hero, until scrolled */
body.has-photo-hero .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(15,12,9,0.6), rgba(15,12,9,0.05));
  border-bottom-color: transparent;
  color: var(--white);
  box-shadow: none;
}
body.has-photo-hero .site-header:not(.is-scrolled) .header-phone .label { color: rgba(255,255,255,0.72); }
body.has-photo-hero .site-header:not(.is-scrolled) .main-nav a.is-active { color: var(--accent); }

/* Full logo lockup (icon + wordmark baked into one image). Two stacked images
   swap opacity: the brand-color version for solid surfaces, the white version
   for a transparent header floating over a photo hero. Each site sets its own
   fixed box size below since the two lockups have different aspect ratios. */
.brand-logo { position: relative; display: inline-block; flex: none; }
.brand-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.brand-logo .logo-light { opacity: 0; }
body.has-photo-hero .site-header:not(.is-scrolled) .brand-logo .logo-dark { opacity: 0; }
body.has-photo-hero .site-header:not(.is-scrolled) .brand-logo .logo-light { opacity: 1; }

html[data-site="pavers"] .site-header .brand-logo { width: 72px; height: 40px; }
html[data-site="pools"] .site-header .brand-logo { width: 61px; height: 40px; }
html[data-site="pavers"] .brand-logo--sm { width: 54px; height: 30px; }
html[data-site="pools"] .brand-logo--sm { width: 46px; height: 30px; }

.main-nav { display: flex; align-items: center; gap: var(--space-4); }
.main-nav ul { display: flex; gap: var(--space-3); font-weight: 600; font-size: 0.95rem; }
.main-nav a { padding: 0.4em 0; position: relative; }
.main-nav a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .2s ease; }
.main-nav a:hover::after, .main-nav a.is-active::after { transform:scaleX(1); }
.main-nav a.is-active { color: var(--brand-dark); }

.header-cta { display: flex; align-items: center; gap: var(--space-2); }
.header-phone { display: none; flex-direction: column; line-height: 1.15; text-align: right; }
.header-phone .label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); transition: color .25s ease; }
.header-phone .num { font-weight: 800; font-family: var(--font-display); font-size: 1.05rem; }
@media (min-width: 960px) { .header-phone { display: flex; } }

.nav-toggle { display: inline-flex; background: none; border: none; padding: 0.4em; color: inherit; }
.nav-toggle svg { width: 26px; height: 26px; }
@media (min-width: 960px) { .nav-toggle { display: none; } }
@media (max-width: 959px) { .main-nav ul, .main-nav .header-phone { display: none; } }
@media (max-width: 620px) { .header-cta .btn-accent { display: none; } }

.mobile-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink); color: var(--white);
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  padding: var(--space-4);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); }
.mobile-drawer-close { background: none; border: none; color: var(--white); }
.mobile-drawer-close svg { width: 28px; height: 28px; }
.mobile-drawer nav ul { display: grid; gap: var(--space-3); font-family: var(--font-display); font-size: 1.6rem; }
.mobile-drawer .btn-row { margin-top: auto; flex-direction: column; align-items: stretch; padding-top: var(--space-4); }

/* Sticky mobile call bar: highest-converting CTA surface on contractor sites */
.mobile-call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
}
.mobile-call-bar a { display:flex; align-items:center; justify-content:center; gap:0.5em; padding: 0.95em 1em; font-weight: 700; color: var(--white); }
.mobile-call-bar a:first-child { background: var(--brand); }
.mobile-call-bar a:last-child { background: var(--accent); }
.mobile-call-bar svg { width: 1.1em; height: 1.1em; }
@media (min-width: 720px) { .mobile-call-bar { display: none; } }
body.has-mobile-bar { padding-bottom: 62px; }
@media (min-width: 720px) { body.has-mobile-bar { padding-bottom: 0; } }

/* ---------- Hero (full-bleed photo, solid overlay) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(94vh, 940px);
  display: flex;
  align-items: flex-end;
  margin-top: calc(-1 * var(--header-h));
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,16,22,0.16) 0%, rgba(8,16,22,0.02) 34%, rgba(8,16,22,0.66) 88%, var(--ink) 100%),
    linear-gradient(100deg, rgba(8,16,22,0.46) 0%, rgba(8,16,22,0.04) 58%);
}
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items: start;
  padding-top: calc(var(--header-h) + var(--space-4));
  padding-bottom: var(--space-6);
  width: 100%;
}
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; padding-top: calc(var(--header-h) + var(--space-4)); } }
.hero-copy { color: var(--white); }
.hero-copy h1 { color: var(--white); text-shadow: 0 3px 22px rgba(0,0,0,0.4); }
.hero-copy .eyebrow { color: var(--accent); text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.hero-copy .eyebrow::before { background: var(--accent); }
.hero-copy .lede { color: rgba(255,255,255,0.92); text-shadow: 0 2px 14px rgba(0,0,0,0.4); }
.hero-copy .badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.hero-badge { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.82rem; font-weight: 700; color: var(--white); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); padding: 0.5em 0.9em; border-radius: 999px; backdrop-filter: blur(6px); }
.hero-badge svg { width: 1.1em; height: 1.1em; color: var(--accent); }
.hero-stats { display: flex; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.2); }
.hero-stats div strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--white); }
.hero-stats div span { font-size: 0.8rem; color: rgba(255,255,255,0.68); }

/* ---------- Wave dividers ---------- */
.wave-divider { display: block; line-height: 0; width: 100%; overflow: hidden; }
.wave-divider svg { display: block; width: 100%; height: clamp(46px, 7vw, 110px); }

/* ---------- Full-bleed solid bands ---------- */
.band--ink { background: var(--ink); color: var(--white); }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4, .band--ink .display { color: var(--white); }
.band--ink .text-soft, .band--ink .lede { color: rgba(255,255,255,0.72); }
.band--ink .eyebrow { color: var(--accent); }
.band--ink .eyebrow::before { background: var(--accent); }
.band--brand { background: var(--brand); color: var(--white); }
.band--brand h1, .band--brand h2, .band--brand h3, .band--brand h4, .band--brand .display { color: var(--white); }
.band--brand .text-soft, .band--brand .lede { color: rgba(255,255,255,0.85); }
.band--brand .eyebrow { color: var(--white); }
.band--brand .eyebrow::before { background: var(--white); }
.band--brand .card, .band--brand .testimonial { background: rgba(255,255,255,0.96); }

/* Cards/testimonials keep their own light-surface text color even inside a dark/brand band */
.band--ink .card, .band--ink .testimonial { background: var(--white); }
.band--ink .card h3, .band--ink .card h4, .band--ink .testimonial h3, .band--ink .testimonial h4,
.band--brand .card h3, .band--brand .card h4, .band--brand .testimonial h3, .band--brand .testimonial h4 { color: var(--ink); }
.band--ink .card .text-soft, .band--ink .testimonial .text-soft, .band--ink .testimonial p,
.band--brand .card .text-soft, .band--brand .testimonial .text-soft, .band--brand .testimonial p { color: var(--ink-soft); }
.band--ink .filter-btn, .band--brand .filter-btn { color: var(--ink); }

/* Quote form card, styled like pooldoc's "get a quote today" panel */
.quote-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  border-top: 6px solid var(--accent);
}
.quote-card h3 { margin-bottom: 0.2em; }
.quote-card .lede { font-size: 0.95rem; margin-bottom: var(--space-3); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 0.4em; margin-bottom: var(--space-2); }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field-check { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85rem; color: var(--ink-soft); }
.field-check input { margin-top: 0.25em; }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5em; }
.chip { border: 1.5px solid var(--line); border-radius: 999px; padding: 0.5em 1em; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: var(--paper); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked), .chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--white); }
.form-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: var(--space-2); }
.form-success, .form-error { display: none; padding: var(--space-3); border-radius: var(--radius-md); font-weight: 600; }
.form-success { background: #E7F5EC; color: #1E6B3A; }
.form-error { background: #FBE7E4; color: #A3341C; }
.form-success.is-visible, .form-error.is-visible { display: block; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Inline field validation (email/phone, see shared/js/lead-form.js) ---------- */
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid {
  border-color: #C0392B;
}
.field input.is-invalid:focus, .field select.is-invalid:focus, .field textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}
.field-error { display: none; font-size: 0.8rem; font-weight: 600; color: #A3341C; }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-bar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.trust-item { display: flex; align-items: center; gap: 0.6em; font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); }
.trust-item svg { width: 1.4em; height: 1.4em; color: var(--brand); flex: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-body { padding: var(--space-3); display: grid; gap: 0.5em; flex: 1; }
.card-media { aspect-ratio: 4/3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-icon { width: 3rem; height: 3rem; border-radius: var(--radius-sm); background: var(--brand-light); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.card-icon svg { width: 1.7rem; height: 1.7rem; }
.card-link { margin-top: auto; font-weight: 700; color: var(--brand-dark); display: inline-flex; align-items: center; gap: 0.4em; }
.card-link svg { width: 1em; height: 1em; transition: transform .15s ease; }
.card:hover .card-link svg { transform: translateX(3px); }

/* ---------- Steps / process ---------- */
.steps { counter-reset: step; }
.step { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: none; }
.step-num { counter-increment: step; font-family: var(--font-display); font-size: 1.6rem; color: var(--brand); width: 2.4em; flex: none; }
.step-num::before { content: counter(step, decimal-leading-zero); }

/* ---------- Testimonials ----------
   .testimonial-author/.testimonial-avatar are also used standalone (e.g. the
   founder quote on the Pavers About page), keep them generic; the live
   Google review cards below use their own review-card-* classes for the
   reviewer header so that usage is never affected by review-card changes. */
.testimonial { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6em; height: 100%; }
.stars { color: #F5A623; letter-spacing: 2px; }
.testimonial p { color: var(--ink-soft); }
.testimonial-author { display: flex; align-items: center; gap: 0.7em; margin-top: 0.3em; }
.testimonial-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex: none; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-author strong { display: block; font-size: 0.92rem; color: var(--ink); }
.testimonial-author span { font-size: 0.78rem; color: var(--ink-soft); }

/* Live Google review cards: reviewer identity up top (avatar, name, star
   rating, relative date), review text clamped to a fixed number of lines so
   one long review can't blow out the whole row's height, with a link to the
   full review on Google (only rendered for reviews long enough to actually
   be truncated). Grid's default align-items:stretch makes every card in a
   row match the tallest one automatically, so short reviews fill out to the
   same card height rather than looking visually uneven. */
.review-card-head { display: flex; align-items: flex-start; gap: 0.7em; }
.review-card-meta { min-width: 0; }
.review-card-name { display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-card-subline { display: flex; align-items: center; gap: 0.4em; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15em; }
.review-card-subline .stars { font-size: 0.8em; letter-spacing: 1px; }
.review-card-text { margin: 0; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.review-card-toggle {
  display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 0.2em;
  color: var(--brand); font-weight: 700; font-size: 0.82rem; text-decoration: none;
}
.review-card-toggle:hover { text-decoration: underline; }

/* ---------- Gallery ---------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 0.6em; margin-bottom: var(--space-4); }
.filter-btn { border: 1.5px solid var(--line); background: var(--white); padding: 0.6em 1.2em; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.filter-btn.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.gallery-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-5) var(--space-3); color: var(--ink-soft); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .tag { position: absolute; left: 0.6em; bottom: 0.6em; background: rgba(0,0,0,0.6); color: var(--white); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 0.35em 0.7em; border-radius: 999px; }
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10,10,10,0.92); display: none; align-items: center; justify-content: center; padding: var(--space-4); }
.lightbox.is-open { display: flex; }
.lightbox-viewport { width: min(1100px, 92vw); height: 86vh; overflow: hidden; position: relative; cursor: grab; touch-action: pan-y; }
.lightbox-viewport:active { cursor: grabbing; }
.lightbox-track { display: flex; width: 300%; height: 100%; transform: translateX(-33.3334%); transition: transform .35s ease; will-change: transform; }
.lightbox-slide { width: 33.3334%; height: 100%; flex: none; display: flex; align-items: center; justify-content: center; }
.lightbox-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); user-select: none; pointer-events: none; -webkit-user-drag: none; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255,255,255,0.12); border: none; color: var(--white); border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.lightbox-close { top: var(--space-3); right: var(--space-3); }
.lightbox-prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 22px; height: 22px; }

/* ---------- Before/After ---------- */
.ba-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/10; user-select: none; }
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider .ba-after { clip-path: inset(0 0 0 50%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: var(--white); cursor: ew-resize; transform: translateX(-2px); }
.ba-handle svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; padding: 11px; box-sizing: border-box; background: var(--white); border-radius: 50%; box-shadow: var(--shadow-sm); color: var(--brand); }
.ba-label { position: absolute; top: 1em; font-size: 0.7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,0.55); color: var(--white); padding: 0.4em 0.8em; border-radius: 999px; }
.ba-label.before { left: 1em; }
.ba-label.after { right: 1em; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; color: var(--white); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cta-band h2 { color: var(--white); }
.cta-band-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, var(--ink), var(--brand-dark)); }
.cta-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--ink) 86%, transparent), color-mix(in srgb, var(--brand-dark) 86%, transparent)); }
.cta-band > div:not(.cta-band-bg), .cta-band > .btn-row { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .cta-band { padding: var(--space-4) var(--space-3); flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-3); }
  .cta-band .btn-row, .cta-band > .btn-row { justify-content: center; flex-direction: column; align-items: stretch; }
  .cta-band .btn-row .btn, .cta-band > .btn-row .btn { width: 100%; }
}

/* ---------- Services tabs (replaces a long stacked scroll of near-identical blocks) ---------- */
.service-tabs { display: flex; flex-wrap: wrap; gap: 0.6em; justify-content: center; }
.service-tabs .filter-btn { background: transparent; border-color: rgba(255,255,255,0.4); color: var(--white); }
.service-tabs .filter-btn.is-active { background: var(--white); color: var(--ink); border-color: var(--white); }
.service-select { display: none; }
@media (max-width: 720px) {
  .service-tabs { display: none; }
  .service-select {
    display: block; width: 100%; margin-top: var(--space-3); padding: 0.95em 1.1em;
    border-radius: var(--radius-md); border: none; font-weight: 700; font-size: 1rem;
    background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm);
  }
}
.service-panel { display: none; }
.service-panel.is-active { display: block; animation: service-fade-in .45s ease; }
@keyframes service-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.service-panel-num {
  font-family: var(--font-display); font-weight: 800; font-size: 4.5rem; line-height: 1;
  color: var(--brand-light); margin-bottom: 0.1em;
}
@media (prefers-reduced-motion: reduce) { .service-panel.is-active { animation: none; } }

/* ---------- Page transition (layered waves sweeping top-to-bottom) ----------
   Three colored wave layers rest at translateY(0) (fully covering the screen)
   by default, so the destination page is hidden until JS explicitly reveals
   it (no flash of unstyled content while the page loads). The sweep itself is
   driven entirely by JS via the Web Animations API (see main.js) rather than
   CSS transitions/class toggling: WAAPI animations always play from their
   explicit start keyframe regardless of the element's current computed
   style, which sidesteps a class of timing bugs some browsers (notably
   Safari) can hit with the "snap instantly, force reflow, release into a
   transition" technique this used to rely on. */
.page-transition {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pt-layer {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%;
  transform: translateY(0%);
  will-change: transform;
}
.pt-layer svg { display: block; width: 100%; height: 100%; }
.page-transition-mark {
  position: relative; height: 70px; z-index: 1;
  opacity: 1; transform: scale(1);
}
html[data-site="pavers"] .page-transition-mark { width: 126px; }
html[data-site="pools"] .page-transition-mark { width: 106px; }
.page-transition-mark img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Page shell / emerging footer ----------
   The footer is pinned to the viewport bottom (z-index below the page); a spacer
   the exact height of the footer sits at the end of .page-shell so the footer only
   becomes visible once the page has scrolled past it. It "emerges" from underneath
   rather than just appearing as the next block in the flow.
   .page-shell sits in a higher stacking context than the footer (so real page
   content always paints over it while scrolling past), but that means its own
   box, including the invisible .footer-spacer at the bottom, would otherwise
   intercept every click meant for the footer beneath it, even with
   pointer-events:none on the spacer alone, the ancestor .page-shell box still
   catches the hit test. Fix: .page-shell itself is taken out of hit-testing
   entirely, and only the actual interactive chrome (topbar/header/drawer/main)
   opts back in. Nothing un-opted-in (the footer-spacer gap) can block clicks
   to whatever is actually underneath it anymore. */
.page-shell { position: relative; z-index: 2; pointer-events: none; }
.page-shell > .topbar, .page-shell > .site-header, .page-shell > .mobile-drawer, .page-shell > main {
  pointer-events: auto;
}
/* The last section on the page gets rounded bottom corners so it visually
   "lifts" off the footer as it emerges underneath while scrolling. */
main > section:last-of-type { border-radius: 0 0 28px 28px; overflow: hidden; }
@media (max-width: 640px) { main > section:last-of-type { border-radius: 0 0 18px 18px; } }
.footer-spacer { display: block; width: 100%; }
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
}
body.has-mobile-bar .mobile-call-bar { transition: transform .25s ease; }
body.has-mobile-bar.footer-visible .mobile-call-bar { transform: translateY(100%); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-dark); color: rgba(255,255,255,0.72); padding: var(--space-6) 0 var(--space-4); }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--space-4); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-size: 0.95rem; margin-bottom: var(--space-2); }
.footer-links li { margin-bottom: 0.6em; }
.footer-brand p { margin-top: var(--space-2); font-size: 0.9rem; max-width: 34ch; }
.footer-contact li { display: flex; gap: 0.6em; margin-bottom: 0.7em; font-size: 0.92rem; }
.footer-contact svg { width: 1.2em; height: 1.2em; flex: none; color: var(--brand); margin-top: 0.15em; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-5); padding-top: var(--space-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: 0.82rem; }
.social-row { display: flex; gap: 0.7em; }
.social-row a { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.social-row svg { width: 1.1rem; height: 1.1rem; }

/* ---------- About hero: image height matches the text column ---------- */
.about-hero .wrap { align-items: stretch; }
.about-hero .about-hero-media { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; min-height: 320px; }
.about-hero .about-hero-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
@media (max-width: 760px) { .about-hero .about-hero-media { min-height: 260px; } }

/* ---------- Site popup (admin-configurable) ---------- */
.site-popup { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: var(--space-3); }
.site-popup.is-open { display: flex; }
.site-popup-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.55); }
.site-popup-card { position: relative; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); max-width: 420px; width: 100%; }
.site-popup-close { position: absolute; top: 0.5em; right: 0.6em; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0.2em; }
.site-popup-card h3 { margin: 0 0.6em 0.4em 0; }
.site-popup-desc { color: var(--ink-soft); margin-bottom: var(--space-3); }
.site-popup-lead-form .field { margin-bottom: var(--space-2); }
.site-popup-success { background: #E7F5EC; color: #1E6B3A; padding: var(--space-2); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; }

/* ---------- Misc ---------- */
.badge-license { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.divider { height: 1px; background: var(--line); margin: var(--space-5) 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 1em; z-index: 999; }
.skip-link:focus { left: 1em; top: 1em; }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: none; width: 100%; aspect-ratio: 16/9; }
.area-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em 1.4em; font-size: 0.92rem; }
@media (max-width: 760px) { .area-list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Coverage map ("Where We Work") ---------- */
.coverage-section .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 900px) { .coverage-section .wrap { grid-template-columns: 1fr; } }
.area-tags { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: var(--space-3); }
.area-tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: var(--paper); border: 1.5px solid var(--line); color: var(--ink-soft);
  font-weight: 600; font-size: 0.86rem; padding: 0.5em 1em; border-radius: 999px;
}
.area-tag svg { width: 1em; height: 1em; color: var(--brand); flex: none; }
.coverage-map { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-3); }
.coverage-map iframe { display: block; width: 100%; aspect-ratio: 4/5; border: 0; border-radius: var(--radius-md); }
@media (max-width: 900px) { .coverage-map iframe { aspect-ratio: 16/10; } }
.area-full { grid-column: 1 / -1; margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.area-full-heading { font-weight: 700; color: var(--ink); margin-bottom: 0.9em; }
.area-full-county { font-weight: 700; margin: 1em 0 0.4em; }
.area-full-county:first-of-type { margin-top: 0; }