/* ==========================================================================
   Clearwater: Services & Solutions
   Window hero (hands under water) -> one glass sheet of the five service
   areas over an aqua wash -> turnkey phases as glass cards in a wash pool ->
   O&M glass check rows (tint) -> retrofit as the page's one deep section with
   wave edges -> annual contract + benefits (wash) -> R&D accordion (tint).
   Built only from theme.css tokens; page classes are prefixed .svc-
   ========================================================================== */

.svc-muted { color: var(--muted); }
.svc-sub {
  margin-bottom: 1.1rem;
  color: var(--ink);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: var(--track-sm);
}
.svc-frame > img { position: absolute; inset: 0; }
p.step__title { font-weight: 700; }

/* Hero ------------------------------------------------------------------- */
.svc-hero .page-hero__window > img { object-position: 60% 45%; }
.svc-hero .page-hero__title { max-width: 14ch; }

/* The five service areas: glass sheet, first cell is the intro ----------- */
.svc-areas { padding-top: clamp(2rem, 1rem + 3vw, 4rem); }
.svc-areas__bubbles { --bubbles-size: clamp(8rem, 5rem + 9vw, 15rem); top: -1rem; left: max(.5rem, calc((100% - var(--container)) / 2 - 7rem)); }
.svc-areas__grid { z-index: 1; }
.svc-areas__intro {
  justify-content: space-between;
  gap: 1.5rem;
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(34, 195, 214, .22), transparent 70%),
    rgba(255, 255, 255, .5);
}
.svc-areas__count {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
}
.svc-areas__intro .glass-grid__title { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); line-height: 1.2; letter-spacing: var(--track-h); max-width: 16ch; }
.svc-areas .glass-grid__cell .link-arrow__icon .icon { transition: transform var(--dur-2) var(--ease-out); }
@media (max-width: 999.98px) {
  .svc-areas__grid > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 639.98px) {
  .svc-areas__intro { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
  .svc-areas__count { font-size: 3.5rem; }
  .svc-areas__intro .glass-grid__title { grid-column: auto; font-size: 1.15rem; }
}

/* 01 Turnkey ------------------------------------------------------------- */
.svc-turnkey__intro { align-items: center; }
.svc-turnkey__media { position: relative; padding: 2rem 2rem 0 0; }
.svc-turnkey__media .bubbles { --bubbles-size: clamp(6rem, 4rem + 5vw, 9rem); top: -1rem; right: -1rem; z-index: 3; }
.svc-turnkey__media .svc-frame { aspect-ratio: 3 / 2; }
.svc-turnkey__text > * + * { margin-top: 1.25rem; }
.svc-turnkey__text .lead { color: var(--ink); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }

/* The phases sit in a rounded aqua "pool" so the glass cards have water behind them */
.svc-pool {
  position: relative;
  isolation: isolate;
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding: clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--wash), var(--bg-tint);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
  overflow: hidden;
}
.svc-pool::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -30%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 195, 214, .28), transparent 65%);
}
.svc-pool__head { display: grid; gap: 1.25rem; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.svc-pool__title { max-width: 26ch; font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; letter-spacing: var(--track-h); }
@media (min-width: 1000px) {
  .svc-pool__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.svc-phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.svc-phase { gap: 0; }
.svc-phase .eyebrow { margin-bottom: .5rem; }
.svc-phase__title { margin-bottom: 1.5rem; font-size: var(--fs-h3); font-weight: 800; letter-spacing: var(--track-h); }
.svc-phase__steps .step { padding-bottom: 1rem; }
.svc-phase__steps .step:last-child { padding-bottom: 0; }
.svc-phase__steps .step::before { width: 2.5rem; height: 2.5rem; font-size: .8125rem; }
.svc-phase__steps .step:not(:last-child)::after { left: calc(1.25rem - 1px); top: 2.9rem; bottom: .15rem; }
.svc-phase__steps .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
.svc-phase__steps .step__title { min-height: 2.5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
@media (max-width: 759.98px) {
  .svc-phases { grid-template-columns: minmax(0, 1fr); }
}

/* 02 O&M ----------------------------------------------------------------- */
.svc-om__left > * + * { margin-top: 1.25rem; }
.svc-om__left .lead { color: var(--ink); font-weight: 700; }
.svc-om__frame { aspect-ratio: 5 / 4; margin-top: 2rem !important; }
.svc-om__list { gap: .6rem; }
.svc-om__callout { margin-top: 1.5rem; }

/* 03 Retrofit (deep) ----------------------------------------------------- */
.svc-retrofit { padding-block: calc(var(--section-y) + 1.5rem); }
.svc-retrofit__bubbles { --bubbles-size: clamp(5.5rem, 3rem + 5vw, 9rem); z-index: 2; top: clamp(-4.5rem, -3rem - 1vw, -3rem); right: max(1rem, calc((100% - var(--container)) / 2 + 2rem)); }
.svc-retrofit .container { position: relative; z-index: 1; }
.svc-retrofit__life { max-width: 40ch; color: var(--on-deep-muted); font-size: var(--fs-lead); line-height: 1.55; }
.svc-retrofit__statement { margin-top: 1.5rem; max-width: 30ch; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem); }
.svc-review .step__title { color: #fff; }
.svc-review .steps { margin-top: .5rem; }
.svc-outcomes { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.svc-outcomes__title { margin-bottom: 1.5rem; font-size: var(--fs-h3); }
.svc-outcomes__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.svc-outcomes__grid > li { gap: 1.5rem; padding: 1.5rem; color: #fff; font-weight: 700; line-height: 1.4; }
.svc-outcomes__grid .icon-chip { margin-bottom: 0; }
@media (max-width: 1099.98px) {
  .svc-outcomes__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-outcomes__grid > li { grid-column: span 2; }
  .svc-outcomes__grid > li:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 639.98px) {
  .svc-outcomes__grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .svc-outcomes__grid > li,
  .svc-outcomes__grid > li:nth-child(n + 4) { grid-column: auto; flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.15rem; }
}

/* 04 Annual -------------------------------------------------------------- */
.svc-annual__value > * + * { margin-top: 1.5rem; }
.svc-annual__value .statement { max-width: 20ch; }
.svc-annual__contract { overflow: visible; }
.svc-annual__contract .card__title { margin-bottom: .5rem; }
.svc-annual__bubbles { --bubbles-size: 6.5rem; top: -2.5rem; right: -1.5rem; z-index: -1; }
.svc-benefits {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.svc-benefits__title { max-width: 24ch; font-size: var(--fs-h3); font-weight: 800; line-height: 1.25; letter-spacing: var(--track-h); }
.svc-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.svc-benefits__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .svc-benefits { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
@media (max-width: 639.98px) {
  .svc-benefits__list { grid-template-columns: minmax(0, 1fr); }
}

/* 05 R&D ----------------------------------------------------------------- */
.svc-rd__bubbles { --bubbles-size: clamp(6rem, 3.5rem + 6vw, 10rem); top: 1.5rem; right: max(1rem, calc((100% - var(--container)) / 2 - 3rem)); }
.svc-rd .container { position: relative; z-index: 1; }
.svc-purposes .card { gap: 1.25rem; }
.svc-purpose { color: var(--ink); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.svc-rd__split { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.svc-rd__leadin { margin-bottom: 1.25rem; }
.svc-rd__frame { position: sticky; top: calc(var(--header-offset) + 1.5rem); }
@media (max-width: 899.98px) {
  .svc-rd__frame { position: relative; top: auto; aspect-ratio: 16 / 10; }
}

/* Small screens: the phase cards already name the phases, so the joined tags hide */
@media (max-width: 639.98px) {
  .svc-pool__flow { display: none; }
}
.svc-review .step__text { margin-top: -.25rem; }