/* ============================================================================
   SERVICES — plant lifecycle carousel.

   Page-scoped on purpose. The shared assets/content.css served in production is
   older than what vite now emits, so refreshing it to pick up a Services change
   would drop 200-odd unrelated rules onto every page that loads it. This sheet
   is copied to assets/services-lifecycle.css by scripts/build-services-static.mjs
   and linked from the Services page alone.

   Layout follows the Home page's "Integrated Water Solutions" section. Home
   drives its expansion with Framer Motion; this page has no React runtime, so
   the same movement is done with flex-basis transitions toggled by class. The
   easing (cubic-bezier(.16,1,.3,1) over 750ms) is Home's, so the two sections
   feel like the same component.

   Colours come from design-system.css tokens where the token exists. The dark
   card interior does not map onto the token set — it is a photographic surface,
   not a UI surface — so those few values are literal, matching Home.
   ==========================================================================*/

.svc-lifecycle__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-40);
}
.svc-lifecycle__lede { max-width: 60ch; }

/* ---- Stage rail ----------------------------------------------------------*/
/* ---- Stage tabs ----------------------------------------------------------
   These match the Home page's "Integrated Water Solutions" tab row exactly —
   same 28px mono badge, same 13px display label, same 2.5px active underline
   sitting on a shared hairline. Values were read off the rendered Home
   component rather than guessed, so the two sections stay identical: badge
   #e2f0fd on rgba(0,124,195,0.4), label #007cc3 active / #94a3b8 idle,
   56px between tabs at desktop and 13px of padding above the hairline.

   An earlier version boxed each tab in a pill and joined them with connector
   dashes to signal a sequence. It read as a different component from Home's,
   which is the thing this section is supposed to echo, so the sequence is now
   carried by the numbered badges alone. */
.svc-lifecycle__rail-wrap {
  display: flex;
  align-items: flex-end;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: var(--space-32);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  scrollbar-width: none;
}
.svc-lifecycle__rail-wrap::-webkit-scrollbar { display: none; }

.svc-lifecycle__stages {
  display: flex;
  align-items: center;
  min-width: max-content;
  gap: var(--space-32);
  padding-bottom: 13px;
}

.svc-lifecycle__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 4px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.svc-lifecycle__tab:focus-visible {
  outline: 2px solid var(--color-state-focus-ring);
  outline-offset: 4px;
}

.svc-lifecycle__tab-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: var(--color-surface-card);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: #94a3b8;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.svc-lifecycle__tab:hover .svc-lifecycle__tab-badge { border-color: #64748b; color: #334155; }
.svc-lifecycle__tab.is-active .svc-lifecycle__tab-badge {
  background: #e2f0fd;
  border-color: rgba(0, 124, 195, 0.4);
  color: var(--color-brand-primary);
  box-shadow: 0 2px 8px rgba(0, 124, 195, 0.08);
}

/* Uppercased in CSS rather than in the data, so the accessible name stays
   "Install & Commission" instead of being announced as shouted capitals. */
.svc-lifecycle__tab-label {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
  transition: color 0.3s ease;
}
.svc-lifecycle__tab:hover .svc-lifecycle__tab-label { color: #334155; }
.svc-lifecycle__tab.is-active .svc-lifecycle__tab-label { color: var(--color-brand-primary); }

/* Offset is measured from the button's own padding box, so the 13px of row
   padding is the whole distance to the hairline — -14px lands the bar over it
   and covers it, which is what makes the active tab break the line. */
.svc-lifecycle__tab-underline {
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--color-brand-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.svc-lifecycle__tab.is-active .svc-lifecycle__tab-underline { opacity: 1; }

/* Home tightens to 32px below lg and opens to 56px above it. */
@media (min-width: 1024px) {
  .svc-lifecycle__stages { gap: 56px; }
}

/* ---- Panels --------------------------------------------------------------*/
.svc-lifecycle__stage-summary {
  margin: 0 0 var(--space-24);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: var(--measure-reading);
}
/* Showing one stage at a time is a JS affordance, so the rules that do it are
   scoped to html.js — set by the inline script in <head>, before first paint,
   so there is no flash of all five stages. With JS off no rule fires and the
   stages simply stack in document order, all of them readable.

   Deliberately NOT done with the `hidden` attribute: the panels are rendered
   without it and JS adds it as it switches. An SSR-emitted `hidden` survived
   every author rule tried against it and left four stages unreachable without
   JS, which is exactly the content this section exists to show. */
html.js .svc-lifecycle__panel { display: none; }
html.js .svc-lifecycle__panel.is-active { display: block; }

.svc-lc-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* ---- Card ----------------------------------------------------------------*/
.svc-lc-card {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-mega);
  background: #020b14;
  min-height: 420px;
  transition: flex 750ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 750ms cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-lc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-lc-card__summary:hover ~ .svc-lc-card__img { transform: scale(1.05); }
.svc-lc-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.15) 55%, transparent);
  transition: opacity 750ms ease;
}

/* ---- Collapsed face ------------------------------------------------------*/
.svc-lc-card__summary {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.svc-lc-card__summary:focus-visible {
  outline: 2px solid var(--color-brand-glow);
  outline-offset: -4px;
  border-radius: var(--radius-mega);
}

.svc-lc-card__face {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  background: rgba(8, 15, 30, 0.52);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(56, 189, 248, 0.15), 0 -4px 20px rgba(0, 0, 0, 0.3);
  transition: opacity 400ms ease;
}
.svc-lc-card__eyebrow {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #38bdf8;
}
.svc-lc-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-inverse);
  transition: color 0.3s ease;
}
.svc-lc-card__summary:hover .svc-lc-card__title { color: #4cbffd; }
.svc-lc-card__text {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-lc-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  transition: color 0.3s ease;
}
.svc-lc-card__summary:hover .svc-lc-card__more { color: #4cbffd; }
.svc-lc-card__more-arrow { transition: transform 0.3s ease; }
.svc-lc-card__summary:hover .svc-lc-card__more-arrow { transform: translateX(4px); }

/* The vertical spine only appears in the desktop collapsed-while-open state. */
.svc-lc-card__spine { display: none; }

/* ---- Expanded detail -----------------------------------------------------*/
.svc-lc-card__detail {
  display: none;
  position: relative;
  z-index: 2;
  width: 100%;
}
.svc-lc-card.is-open .svc-lc-card__detail { display: block; }
.svc-lc-card.is-open .svc-lc-card__summary { display: none; }

.svc-lc-card__detail-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  height: 100%;
  padding: var(--space-32);
  background: linear-gradient(to bottom, rgba(10, 15, 25, 0.2) 0%, rgba(10, 15, 25, 0.5) 100%),
    rgba(5, 12, 25, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow-y: auto;
}
.svc-lc-card__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.svc-lc-card__sys {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  color: #38bdf8;
}
.svc-lc-card__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.svc-lc-card__close:hover {
  background: var(--color-brand-primary);
  border-color: rgba(255, 255, 255, 0.25);
}
.svc-lc-card__close:focus-visible {
  outline: 2px solid var(--color-brand-glow);
  outline-offset: 2px;
}

.svc-lc-card__detail-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
}
.svc-lc-card__detail-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.svc-lc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-lc-card__tag {
  padding: var(--space-6) var(--space-12);
  border: 1px solid rgba(76, 191, 253, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(0, 124, 195, 0.14);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5dcff;
}

.svc-lc-card__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-lc-card__related li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-16);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-medium);
  background: rgba(255, 255, 255, 0.04);
}
.svc-lc-card__related-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-inverse);
}
.svc-lc-card__related-arrow { color: rgba(255, 255, 255, 0.45); }

/* The shared chrome recolours `#main-content a:not(.btn)` to brand-secondary,
   which painted this button's label blue on a blue fill. That selector scores
   (0,1,1,1) — the `:not(.btn)` argument counts as a class and `a` as an element
   — so an id plus one class does NOT beat it. Two classes under the id does,
   which is the same shape sustainability.css uses for the same clash. Restated
   at winning specificity rather than reaching for !important. */
#main-content .svc-lc-card .svc-lc-card__cta { color: var(--color-text-inverse); }

.svc-lc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: auto;
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.3s ease, transform 0.3s ease;
}
.svc-lc-card__cta:hover {
  background: var(--color-state-hover-primary);
  transform: translateY(-2px);
}
.svc-lc-card__cta-arrow { transition: transform 0.3s ease; }
.svc-lc-card__cta:hover .svc-lc-card__cta-arrow { transform: translateX(4px); }

/* ---- Desktop: the horizontal expanding rail ------------------------------*/
@media (min-width: 1024px) {
  /* Every stage lays out on the widest stage's grid, so a card is the same
     width in all five. Sharing the rail instead (flex: 1 1 0%) sized cards by
     how many the stage happened to have — a card in the two-service Expand
     stage came out twice as wide as the same card in four-service Maintain,
     which read as two different components. Stages with fewer than --lc-cols
     cards use less of the rail and leave the remainder empty on the right —
     left-aligned, not centred, so the first card starts on the same line as
     the heading and the tabs no matter which stage is showing. */
  .svc-lc-rail {
    --lc-cols: 4;
    --lc-gap: var(--space-16);
    --lc-spine-w: 96px;
    --lc-card-w: calc((100% - (var(--lc-cols) - 1) * var(--lc-gap)) / var(--lc-cols));
    --lc-open-w: calc(100% - (var(--lc-cols) - 1) * (var(--lc-spine-w) + var(--lc-gap)));

    flex-direction: row;
    justify-content: flex-start;
    gap: var(--lc-gap);
    height: 600px;
  }
  .svc-lc-card {
    flex: 0 0 var(--lc-card-w);
    min-height: 0;
  }

  /* One card open: it widens to --lc-open-w, the rest collapse to spines. Both
     are fixed widths for the same reason as above — as share ratios the open
     card was 91% of the rail in Expand but 77% in Maintain. */
  .svc-lc-rail.has-open .svc-lc-card { flex: 0 0 var(--lc-spine-w); }
  .svc-lc-rail.has-open .svc-lc-card.is-open {
    flex: 0 0 var(--lc-open-w);
    box-shadow: 0 35px 80px rgba(0, 124, 195, 0.3);
  }

  /* Collapsed-while-open: the face gives way to a rotated spine. */
  .svc-lc-rail.has-open .svc-lc-card:not(.is-open) .svc-lc-card__face { display: none; }
  .svc-lc-rail.has-open .svc-lc-card:not(.is-open) .svc-lc-card__spine {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4cbffd;
    opacity: 0;
    transition: opacity 500ms ease;
  }
  .svc-lc-rail.has-open .svc-lc-card:not(.is-open):hover .svc-lc-card__spine { opacity: 1; }
  .svc-lc-rail.has-open .svc-lc-card:not(.is-open) .svc-lc-card__scrim { opacity: 0.85; }

  /* Open card: photo holds the left, detail panel the right — Home's 55/45. */
  .svc-lc-card.is-open .svc-lc-card__detail {
    margin-left: 55%;
    width: 45%;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  }
  .svc-lc-card.is-open .svc-lc-card__scrim {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent 60%, rgba(0, 0, 0, 0.1));
  }
  .svc-lc-card__detail-inner { padding: var(--space-40); }
}

/* Four cards at ~25% each is the widest a stage gets; below that the collapsed
   face needs the room more than the photo does. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-lc-card__face { padding: var(--space-20); }
  .svc-lc-card__title { font-size: 18px; }
  .svc-lc-card__detail-inner { padding: var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-lc-card,
  .svc-lc-card__img,
  .svc-lc-card__face,
  .svc-lc-card__spine,
  .svc-lc-card__cta,
  .svc-lc-card__more-arrow,
  .svc-lc-card__cta-arrow {
    transition: none;
  }
  .svc-lc-card__summary:hover ~ .svc-lc-card__img { transform: none; }
}

/* ============================================================================
   SERVICES — "Why" section stats band (WhySection.jsx).

   Replaces the old four-item icon/title/text list with a compact two-column
   grid of number+label pairs (client's webpage-suggestion doc, point 1) — no
   supporting sentence per item, so a vertical list left too much empty space
   next to the photo.
   ============================================================================ */
.svc-why__subheading {
  margin: var(--space-8) 0 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-text-primary);
}

.svc-why__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20) var(--space-24);
  margin-bottom: var(--space-32);
}

.svc-why__stat {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.svc-why__stat-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-text-primary);
}

@media (max-width: 640px) {
  .svc-why__stats {
    grid-template-columns: 1fr;
  }
}