/* ==========================================================================
   Clearwater · Offerings page
   Window hero -> one deep "choosing the right treatment" band with facts ->
   an aqua-wash explorer: side tabs list the nine offerings (the overview),
   each panel is a full offering at its fixed anchor id. Built from theme
   tokens; page classes use .off-
   ========================================================================== */

/* Deep band ---------------------------------------------------------------- */
.off-deep__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.off-deep__text > * + * { margin-top: 1.25rem; }
.off-deep__text .section-head__title { max-width: 16ch; }
.off-deep__lede { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--on-deep-muted); }
.off-deep__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.off-deep .link-arrow { color: var(--mint); }
@media (max-width: 899.98px) {
  .off-deep__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Explorer ----------------------------------------------------------------- */
.off-explore__bubbles { --bubbles-size: clamp(8rem, 5rem + 6vw, 12rem); bottom: clamp(4rem, 8vw, 8rem); left: max(1rem, calc((100% - var(--container-wide)) / 2 + 4rem)); }
@media (max-width: 999.98px) {
  .off-explore__bubbles { --bubbles-size: 5rem; bottom: auto; left: auto; top: 1.25rem; right: 1rem; }
}
.off-explore .section-head { position: relative; z-index: 1; }

.off-tab { display: inline-flex; align-items: center; gap: .7rem; }
.off-tab .icon { width: 1.25rem; height: 1.25rem; color: var(--primary); transition: color var(--dur-2) ease; }
.off-tab[aria-selected="true"] .icon { color: #fff; }
@media (min-width: 1000px) {
  .off-tabs .tabs__list { z-index: 2; }
  .off-tab { display: flex; }
}

.off-panels { min-width: 0; container-type: inline-size; }
.off-panel { display: grid; gap: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); min-width: 0; }
html:not(.js) .off-panel + .off-panel { padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line-strong); }

.off-panel__head { display: flex; align-items: center; gap: 1.25rem; scroll-margin-top: calc(var(--header-offset) + 1.5rem); }
.off-panel__count { color: var(--primary-ink); font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-sm); }
.off-panel__title { margin-top: .2rem; font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); font-weight: 800; line-height: var(--lh-heading); letter-spacing: var(--track-h); }
.off-panel__sub { display: block; margin-top: .35rem; color: var(--muted); font-size: .5em; font-weight: 600; letter-spacing: var(--track-sm); line-height: 1.3; }

.off-h3 { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.off-h4 { font-size: var(--fs-h4); margin-bottom: 1rem; }
.off-count { margin-left: .35rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.off-measure { max-width: 46rem; }
.off-panel .prose .lead { color: var(--ink-2); }

.off-frame { width: 100%; max-width: 26rem; justify-self: end; }
.off-panel .split--text-wide .off-frame { justify-self: start; }

.off-sub { display: grid; gap: 1.75rem; }
.off-sub > .off-h3 { margin-bottom: 0; }

/* Domestic: photo + callout, technology groups in a glass grid */
.off-choose { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--grid-gap); align-items: center; }
.off-choose__photo { max-width: none; justify-self: stretch; }
.off-groups .glass-grid__title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.off-groups .list-dots { font-size: var(--fs-sm); line-height: 1.5; }

/* Glass sheet for long schedules */
.off-sheet { gap: 1.25rem; }
.off-sheet > .off-h3,
.off-sheet > .off-h4 { margin-bottom: 0; }
.off-cols { display: block; columns: 3 11rem; column-gap: 2rem; }
.off-cols > li { break-inside: avoid; margin-bottom: .8rem; }

/* RO components (a sequence) */
.off-steps .step__title { font-size: 1.0625rem; min-height: 3rem; }
.off-steps .step__text { font-size: var(--fs-sm); }

/* In-offering jump links */
.off-jump a.tag { text-decoration: none; transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.off-jump a.tag:hover { background: #fff; color: var(--primary-ink); }

.off-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.off-facts .fact__value { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); }

/* Wastewater technologies */
.off-tech .spec__row { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); padding-block: .9rem; }
.off-tech dt { color: var(--primary-ink); letter-spacing: .02em; }
.off-tech dd { color: var(--ink); }
.off-benefits .card { gap: 1rem; }
.off-benefits .card__title { font-size: var(--fs-h4); }
.off-benefits .list-check { gap: .6rem; font-size: var(--fs-sm); }
.off-benefits__photo { min-height: 14rem; }
.off-benefits__photo > img { position: absolute; inset: 0; }

/* Chemicals */
.off-tags { gap: .6rem; }

/* Auditing */
.off-audit { align-items: start; }
.off-audit__call { margin-top: 1.5rem; }

/* Analysis */
.off-analysis__intro > * + * { margin-top: 1.25rem; }
.off-analysis__intro .off-h3 { margin-bottom: 0; }
.off-analysis__note { color: var(--muted); font-size: var(--fs-sm); }

/* Pools: a photo window with a card overlapping it */
.off-pool { display: grid; grid-template-columns: minmax(0, 1fr); }
.off-pool__photo { aspect-ratio: 21 / 9; }
.off-pool__card { width: min(100% - 2rem, 36rem); margin: -5rem 0 0 auto; margin-right: 1rem; z-index: 3; gap: 1.25rem; box-shadow: var(--shadow-lg); }
.off-pool__card .lead { font-size: var(--fs-lead); color: var(--ink); line-height: 1.5; }

/* Chlorination */
.off-when > .off-h4 { max-width: 44rem; }
.off-note { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

/* Next offering */
.off-next { display: flex; justify-content: flex-end; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }

/* Panel width drives the inner layout (the side list takes a column from 1000px) */
@container (max-width: 760px) {
  .off-panel .split,
  .off-panel .split--media-wide,
  .off-panel .split--text-wide,
  .off-choose { grid-template-columns: minmax(0, 1fr); }
  .off-panel .split--reverse > :first-child { order: 0; }
  .off-frame,
  .off-panel .split--text-wide .off-frame { justify-self: start; }
  .off-panel .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .off-panel .grid--2,
  .off-panel .grid--3,
  .off-facts,
  .off-groups { grid-template-columns: minmax(0, 1fr); }
  .off-panel__head { align-items: flex-start; }
  .off-panel__head .icon-chip { --chip: 3rem; border-radius: 16px; }
  .off-panel__head .icon-chip .icon { width: 1.5rem; height: 1.5rem; }
  .off-pool__photo { aspect-ratio: 4 / 3; }
  .off-pool__card { width: auto; margin: -3rem .75rem 0; }
  .off-next { justify-content: flex-start; }
}

/* FLUUX commercial filters (a product range with its own page) ----------- */
.off-products__grid { align-items: center; }
.off-products__media { position: relative; }
.off-products__media .bubbles { --bubbles-size: clamp(6rem, 4rem + 5vw, 9rem); top: -1.5rem; right: -1rem; }
.off-products__stand {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--wash), var(--bg-tint);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.off-products__stand img { width: min(100%, 23rem); height: auto; filter: drop-shadow(0 16px 18px rgba(6, 50, 74, .18)); }
.off-products__text > * + * { margin-top: 1.25rem; }
.off-products__text .lead { color: var(--ink-2); }
.off-products__muted { color: var(--muted); }
.off-products .btn-row { margin-top: 2rem; }

@media (max-width: 999.98px) {
  .off-tabs .tabs__list { margin-bottom: 2.5rem; }
}
@media (max-width: 639.98px) {
  .off-deep__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .off-deep__facts .fact { padding: 1.1rem; }
  .off-deep__facts .fact__value { font-size: 2.4rem; }
}