/* Acqua Fresca /services. Loaded by services.html only. Builds on home-water.css (.hw-*), scoped to .sv-page.
 * Same tokens, Manrope, white and pale blue alternation, pill buttons. Every horizontal inset reads --gutter
 * through .hw-wrap. No motion beyond the home page's own transitions. */
.sv-page { background: #fff; }
.sv-page .sv-hero h1 { max-width: 22ch; font-size: clamp(2rem, 1.1rem + 3vw, 3.1rem); }
.sv-page .sv-hero .hw-hero__lede { max-width: 52ch; }
.sv-page .sv-link, .sv-page .sv-prose a, .sv-page .hw-where__areas a { color: var(--hw-blue); font-weight: 600; text-underline-offset: 3px; }
.sv-page .hw-hero__media { aspect-ratio: 4 / 3; }
.sv-page .hw-hero__media img { object-position: 50% 50%; }
.sv-page .hw-btn--ghost { color: var(--hw-blue); }

/* Services: one grid, equal widths. 1 column, 2 at 640, 3+2 (last row centred) from 1000. */
.sv-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.sv-grid { grid-auto-rows: 1fr; }
.sv-grid .hw-svc__item img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sv-grid .sv-img--water { object-position: 50% 100%; }
.sv-grid .sv-img--filter { object-position: 50% 40%; }
.sv-grid .sv-img--tools { object-position: 50% 62%; }
.sv-grid .hw-svc__item { box-shadow: var(--hw-shadow-sm); }
.sv-grid .hw-svc__item h3 { font-size: 1.25rem; }
.sv-grid .hw-svc__item > div { padding: 1.4rem; }
@media (min-width: 640px) {
  .sv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-grid .hw-svc__item { grid-column: span 2; }
  .sv-grid .hw-svc__item:nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 1000px) {
  .sv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; }
  .sv-grid .hw-svc__item { grid-column: span 2; }
  .sv-grid .hw-svc__item:nth-child(4) { grid-column: 2 / span 2; }
  .sv-grid .hw-svc__item:nth-child(5) { grid-column: 4 / span 2; }
}

/* How it works: copy beside a photo */
.sv-split { display: grid; gap: 2rem; align-items: center; }
.sv-prose { display: grid; gap: 1rem; margin-top: 1.25rem; max-width: 56ch; font-size: 1.0625rem; }
.sv-photo { border-radius: 1.5rem; overflow: hidden; box-shadow: var(--hw-shadow); aspect-ratio: 3 / 2; background: var(--hw-sky); }
.sv-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .sv-split { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

/* Final calls to action */
.hw-main > section.sv-cta { background: var(--hw-navy); color: #dbeaf5; }
.sv-cta .hw-h2 { color: #fff; }
.sv-cta p { margin-top: 1rem; max-width: 52ch; font-size: 1.0625rem; }
.hw-btn--light { background: #fff; color: var(--hw-navy); }
.hw-btn--light:hover { background: var(--hw-sky); }
.hw-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.hw-btn--outline-light:hover { border-color: #fff; }
.sv-cta .hw-btn:focus-visible { outline-color: #fff; }
.hw-main > section.sv-est { background: var(--hw-pale); }
.sv-est .af-quote { margin: 0 auto; max-width: 52rem; }
.sv-est .af-quote__card { border-radius: 1.5rem; border-color: var(--hw-line); box-shadow: var(--hw-shadow); background: #fff; }
.sv-est .af-quote h2 { font-family: var(--hw-font); color: var(--hw-navy); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.sv-est .af-quote input, .sv-est .af-quote select, .sv-est .af-quote textarea { border-radius: 0.75rem; }
.sv-est .af-quote button[type="submit"] { border-radius: 999px; min-height: 3.25rem; }
.sv-page [id] { scroll-margin-top: 7rem; }

/* Phones: keep the first action above the sticky bar at 375x667 */
@media (max-width: 899.98px) {
  .hw-main > section.sv-hero { padding-top: 1.25rem; padding-bottom: 2rem; }
  .sv-hero .hw-hero__grid { gap: 1.5rem; }
  .sv-hero .hw-eyebrow { margin-bottom: 0.4rem; font-size: 0.85rem; }
  .sv-page .sv-hero h1 { font-size: 1.75rem; line-height: 1.12; }
  .sv-hero .hw-hero__lede { margin-top: 0.75rem; font-size: 1rem; line-height: 1.5; }
  .sv-hero .hw-hero__cta { margin-top: 1rem; }
}