/*
 * Kedia Water House — elevated visual and interaction layer
 * Loaded after style.css so the existing catalogue and content system remain intact.
 */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --surface: #f7fafc;
  --sticky-top: 78px;
}

html.elevated {
  scroll-padding-top: calc(var(--sticky-top) + var(--rail-h, 0px) + 18px);
}

body {
  background: var(--surface);
}

/* A quieter, more architectural shell */
.site-head {
  border-bottom-color: rgba(255, 255, 255, .08);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-head.scrolled {
  background: transparent;
  box-shadow: none;
}

.site-head .wrap {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 42%, rgba(55, 195, 232, .05)),
    #08213d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-head.scrolled .wrap {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .018) 42%, rgba(55, 195, 232, .04)),
    #061a32;
}

.brand {
  gap: 13px;
  letter-spacing: -.018em;
}

.brand .mark {
  overflow: hidden;
  border-color: rgba(83, 210, 238, .65);
  background: #071c34;
  box-shadow:
    0 9px 24px rgba(0, 0, 0, .25),
    0 0 0 3px rgba(57, 196, 232, .07);
}

.brand .mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand small {
  color: #83b8cf;
}

.site-head .scroll-progress {
  height: 2px;
  background: linear-gradient(90deg, var(--aqua), #8ae4f6);
}

.btn {
  transition:
    transform .24s var(--ease-out),
    box-shadow .24s ease,
    background-color .24s ease,
    border-color .24s ease,
    color .24s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(.985);
}

.btn-copper {
  box-shadow: 0 9px 22px rgba(55, 195, 232, .17);
}

/* Page-specific photographic identities */
.product-hub-page {
  --page-hero-image: image-set(
    url("../assets/real-warehouse-pipe-stock.avif") type("image/avif"),
    url("../assets/real-warehouse-pipe-stock.jpg") type("image/jpeg")
  );
  --page-hero-position: center 57%;
}

.category-pumping {
  --page-hero-image: url("../assets/hero-pump.webp");
  --page-hero-position: center 52%;
}

.category-pipes {
  --page-hero-image: image-set(
    url("../assets/real-warehouse-pipe-stock.avif") type("image/avif"),
    url("../assets/real-warehouse-pipe-stock.jpg") type("image/jpeg")
  );
  --page-hero-position: center 55%;
}

.category-water-treatment {
  --page-hero-image: url("../assets/gen-filtration.webp");
  --page-hero-position: center 52%;
}

.category-infrastructure {
  --page-hero-image: image-set(
    url("../assets/real-inbound-pipe-shipment.avif") type("image/avif"),
    url("../assets/real-inbound-pipe-shipment.jpg") type("image/jpeg")
  );
  --page-hero-position: center 47%;
}

.category-solar {
  --page-hero-image: url("../assets/gen-solar.webp");
  --page-hero-position: center 56%;
}

.about-page {
  --page-hero-image: image-set(
    url("../assets/real-warehouse-inventory.avif") type("image/avif"),
    url("../assets/real-warehouse-inventory.jpg") type("image/jpeg")
  );
  --page-hero-position: center 46%;
}

.gallery-page {
  --page-hero-image: image-set(
    url("../assets/real-pipe-loading.avif") type("image/avif"),
    url("../assets/real-pipe-loading.jpg") type("image/jpeg")
  );
  --page-hero-position: center 50%;
}

.contact-page {
  --page-hero-image: image-set(
    url("../assets/real-pipe-delivery.avif") type("image/avif"),
    url("../assets/real-pipe-delivery.jpg") type("image/jpeg")
  );
  --page-hero-position: center 50%;
}

.page-hero.image-hero {
  isolation: isolate;
  min-height: min(690px, 84svh);
  background-color: var(--deep);
  background-image:
    linear-gradient(90deg, rgba(2, 13, 27, .96) 0%, rgba(3, 17, 34, .9) 36%, rgba(3, 18, 36, .58) 64%, rgba(3, 17, 34, .25) 100%),
    linear-gradient(0deg, rgba(3, 15, 30, .72), transparent 56%),
    var(--page-hero-image);
  background-position: center, center, var(--page-hero-position, center);
  background-size: cover;
  background-repeat: no-repeat;
}

.page-hero.image-hero::before {
  width: 46%;
  height: 100%;
  right: 0;
  top: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background:
    repeating-linear-gradient(118deg, transparent 0 44px, rgba(132, 222, 242, .08) 45px 46px, transparent 47px 76px);
  opacity: .5;
  filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
  animation: none !important;
}

.page-hero.image-hero::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .54;
  -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .25));
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .25));
}

.page-hero.image-hero .page-hero-copy {
  max-width: 800px;
}

.page-hero.image-hero h1 {
  max-width: 800px;
  text-wrap: balance;
  text-shadow: 0 14px 38px rgba(0, 0, 0, .25);
}

.page-hero.image-hero p {
  color: #d2e1ed;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

.page-hero .hero-proof {
  border-color: rgba(255, 255, 255, .18);
}

/* Give the content pages their own visual cadence */
.psec,
.range-sec,
.p-lines,
.cat-cross,
.gallery-page .g-wrap {
  position: relative;
}

.psec {
  background: #fff;
}

.range-sec,
.p-lines {
  background:
    linear-gradient(rgba(12, 53, 92, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 53, 92, .035) 1px, transparent 1px),
    var(--surface);
  background-size: 64px 64px;
}

.psec-head {
  max-width: 740px;
}

.psec-head h2 {
  text-wrap: balance;
}

.cat-card {
  border-radius: 18px;
}

.range-item,
.cross-card {
  border-radius: 10px;
  box-shadow: none;
}

.range-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(6, 23, 46, .08);
}

/* Project-intent finder */
.finder-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin: 0 0 22px;
  padding: 20px;
  border: 1px solid #d7e4ed;
  border-left: 3px solid var(--aqua);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 30px rgba(6, 23, 46, .06);
}

.finder-label {
  display: block;
  margin-bottom: 10px;
  color: var(--deep);
  font: 700 .72rem/1 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.finder-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.finder-intent,
.finder-share,
.p-share {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: 700 .76rem/1 var(--display);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s var(--ease-out);
}

.finder-intent {
  padding: 10px 14px;
}

.finder-intent:hover,
.finder-intent[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}

.finder-share {
  min-width: 146px;
  padding: 11px 15px;
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}

.finder-share:hover {
  background: var(--navy);
  border-color: var(--navy);
  transform: translateY(-1px);
}

.range-search input {
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(6, 23, 46, .045);
}

/* Long-category orientation */
.line-rail {
  top: var(--sticky-top);
  z-index: 85;
  overflow: hidden;
  background: #06172e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: top .28s var(--ease-soft);
}

html.header-hidden .line-rail {
  top: 0;
}

.line-rail::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: calc(var(--rail-progress, 0) * 100%);
  height: 2px;
  background: var(--accent, var(--aqua));
  pointer-events: none;
}

.line-rail a {
  border-radius: 8px;
}

.line-rail a.on {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent, var(--aqua)) 28%, transparent);
}

.p-line {
  border: 1px solid rgba(16, 55, 91, .08);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(6, 23, 46, .065);
}

.p-line-media img {
  transition: transform .65s var(--ease-out);
}

.p-line:hover .p-line-media img {
  transform: scale(1.025);
}

.p-line-body {
  position: relative;
}

.p-line-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 86px;
  background: var(--accent, var(--aqua));
}

.p-share {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 46px;
  padding: 11px 15px;
}

.p-share:hover {
  border-color: var(--blue);
  background: var(--foam);
  color: var(--deep);
}

.boq-add {
  border-radius: 10px;
}

/* Motion that remains readable even if a visitor scrolls quickly */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .46s ease,
    transform .56s var(--ease-out);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

.mobile-actions {
  background: #071a31;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .28s var(--ease-out), opacity .22s ease;
}

.boq-bar {
  background: #06172e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.product-filter-shell .wrap {
  background: #08213d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-bg .bg img {
  will-change: auto;
}

.mobile-actions.is-hidden {
  transform: translateY(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
}

.kwh-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 250;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 17px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(4, 18, 36, .97);
  box-shadow: 0 18px 42px rgba(3, 14, 28, .28);
  color: #fff;
  font: 700 .78rem/1.35 var(--display);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .28s var(--ease-out);
}

.kwh-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* CTA and footer: strong closure without another glass panel */
.cta-final {
  background:
    linear-gradient(115deg, rgba(55, 195, 232, .1), transparent 48%),
    var(--deep);
}

.site-foot {
  --foot-copy: #a8bed1;
  --foot-muted: #6f8ba4;
  padding: clamp(68px, 7vw, 96px) 0 26px;
  border-top: 1px solid rgba(121, 221, 242, .13);
  background:
    radial-gradient(760px 380px at 90% 0%, rgba(36, 149, 196, .12), transparent 68%),
    linear-gradient(145deg, #041428 0%, #031225 58%, #061a31 100%);
}

.site-foot::before {
  width: 520px;
  right: -235px;
  top: -345px;
  border-color: rgba(55, 195, 232, .12);
  box-shadow:
    0 0 0 74px rgba(55, 195, 232, .022),
    0 0 0 148px rgba(55, 195, 232, .014);
}

.site-foot::after {
  opacity: .2;
  background-size: 64px 64px;
}

.site-foot .wrap {
  width: min(1240px, calc(100% - 48px));
}

.site-foot .foot-top {
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
  gap: clamp(36px, 6vw, 84px);
  margin-bottom: 38px;
}

.site-foot .foot-eyebrow {
  color: #68d8ef;
  font-size: .64rem;
}

.site-foot .foot-top h2 {
  max-width: 660px;
  margin-top: 16px;
  font-size: clamp(2.65rem, 4.5vw, 4.4rem);
  letter-spacing: -.055em;
}

.site-foot .foot-actions {
  justify-content: flex-end;
  gap: 10px;
}

.site-foot .foot-action {
  min-width: 148px;
  min-height: 52px;
  padding: 13px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.site-foot .foot-action strong {
  font-size: .8rem;
}

.site-foot .foot-action.foot-wa {
  border-color: rgba(77, 220, 134, .38);
  background: rgba(37, 211, 102, .1);
}

.site-foot .foot-cols {
  display: grid;
  grid-template-columns:
    minmax(320px, 1.55fr)
    minmax(180px, .78fr)
    minmax(130px, .55fr)
    minmax(220px, 1fr);
  gap: 0;
  border-block: 1px solid rgba(255, 255, 255, .1);
  background: rgba(1, 12, 27, .16);
}

.site-foot .foot-cols > * {
  min-width: 0;
  padding: 34px clamp(22px, 2.5vw, 36px);
}

.site-foot .foot-cols > :first-child {
  padding-left: 0;
}

.site-foot .foot-cols > :last-child {
  padding-right: 0;
}

.site-foot .foot-cols > * + * {
  border-left: 1px solid rgba(255, 255, 255, .075);
}

.site-foot .foot-cols h5 {
  margin-bottom: 18px;
  color: #edf5fb;
  font-size: .63rem;
  letter-spacing: .17em;
}

.site-foot .foot-brand {
  grid-column: auto;
  align-items: flex-start;
  gap: 20px;
  border: 0;
}

.site-foot .foot-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid rgba(83, 210, 238, .42);
  border-radius: 18px;
  background: #071c34;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .24),
    0 0 0 4px rgba(55, 195, 232, .07);
}

.site-foot .foot-brand h5 {
  margin-bottom: 10px;
  color: #fff;
  font-size: .68rem;
}

.site-foot .foot-brand-copy p {
  max-width: 355px;
  color: var(--foot-copy);
  font-size: .9rem;
  line-height: 1.65;
}

.site-foot .foot-brand address {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .075);
  color: var(--foot-muted);
  font-size: .8rem;
  line-height: 1.65;
}

.site-foot .foot-cols a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 34px;
  padding: 5px 0;
  color: var(--foot-copy);
  font-size: .84rem;
  line-height: 1.35;
}

.site-foot .foot-cols a::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 1px;
  background: var(--aqua);
  transition: width .22s var(--ease-out);
}

.site-foot .foot-cols a:hover {
  color: #fff;
  transform: none;
}

.site-foot .foot-cols a:hover::before {
  width: 12px;
}

.site-foot .foot-contact a:first-of-type {
  color: #fff;
  font-weight: 700;
}

.site-foot .foot-contact a[href^="mailto"] {
  overflow-wrap: anywhere;
}

.site-foot .foot-base {
  align-items: center;
  padding: 22px 2px 0;
  color: #6f8ba4;
  font-size: .7rem;
}

.site-foot .foot-signature {
  color: #8da9bf;
}

@media (max-width: 1080px) {
  .site-foot .foot-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-foot .foot-brand {
    grid-column: 1 / -1;
    padding-inline: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
  }

  .site-foot .foot-cols > :nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .site-foot {
    padding-top: 64px;
  }

  .site-foot .wrap {
    width: calc(100% - 36px);
  }

  .site-foot .foot-top {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 32px;
  }

  .site-foot .foot-top h2 {
    max-width: 520px;
    font-size: clamp(2.45rem, 11vw, 3.5rem);
  }

  .site-foot .foot-actions {
    justify-content: flex-start;
  }

  .site-foot .foot-cols {
    grid-template-columns: 1fr 1fr;
  }

  .site-foot .foot-brand,
  .site-foot .foot-contact {
    grid-column: 1 / -1;
  }

  .site-foot .foot-cols > * {
    padding: 26px 18px;
  }

  .site-foot .foot-cols > :nth-child(2) {
    padding-left: 0;
  }

  .site-foot .foot-cols > :nth-child(3) {
    padding-right: 0;
  }

  .site-foot .foot-contact {
    padding-inline: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .075);
  }
}

@media (max-width: 520px) {
  .site-foot .foot-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .site-foot .foot-action {
    min-width: 0;
    width: 100%;
    padding-inline: 12px;
  }

  .site-foot .foot-cols {
    grid-template-columns: 1fr 1fr;
  }

  .site-foot .foot-brand {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
  }

  .site-foot .foot-brand img {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .site-foot .foot-brand-copy p {
    font-size: .84rem;
  }

  .site-foot .foot-cols a {
    min-height: 40px;
    font-size: .8rem;
  }

  .site-foot .foot-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (min-width: 960px) {
  .p-line {
    border-radius: 16px;
  }

  .p-line:nth-child(odd) {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }

  .p-line:nth-child(even) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  }

  .p-actions .btn,
  .p-actions .p-sheet {
    flex: 0 1 auto;
  }
}

@media (max-width: 959px) {
  :root {
    --sticky-top: 72px;
  }

  .page-hero.image-hero {
    min-height: 600px;
    background-image:
      linear-gradient(180deg, rgba(2, 13, 27, .74) 0%, rgba(3, 17, 34, .78) 45%, rgba(3, 17, 34, .98) 100%),
      var(--page-hero-image);
    background-position: center, var(--page-hero-position, center);
  }

  .page-hero.image-hero::before {
    width: 70%;
    opacity: .32;
  }
}

@media (max-width: 620px) {
  :root {
    --sticky-top: 66px;
  }

  html.elevated {
    scroll-padding-top: calc(var(--sticky-top) + var(--rail-h, 0px) + 10px);
  }

  .page-hero.image-hero {
    min-height: 540px;
    padding-top: 108px;
    background-position: center, var(--page-hero-position, center);
  }

  .page-hero.image-hero::before {
    width: 100%;
    height: 58%;
    top: auto;
    bottom: 0;
    opacity: .24;
  }

  .page-hero.image-hero::after {
    background-size: 54px 54px;
    opacity: .36;
  }

  .page-hero.image-hero .page-hero-grid {
    width: calc(100% - 36px);
  }

  .page-hero.image-hero h1 {
    font-size: clamp(2.6rem, 12vw, 3.25rem);
  }

  .finder-panel {
    /* minmax(0,1fr) + min-width:0 so the nowrap intent strip below can
       actually scroll instead of blowing the grid track past the viewport
       (a grid item defaults to min-width:auto). */
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 16px;
  }

  .finder-panel > * {
    min-width: 0;
  }

  .finder-intents {
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .finder-intents::-webkit-scrollbar {
    display: none;
  }

  .finder-intent {
    flex: 0 0 auto;
  }

  .finder-share {
    width: 100%;
  }

  .line-rail-scroll {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .line-rail a {
    min-height: 42px;
    padding: 10px 13px;
  }

  .p-line-body::before {
    height: 62px;
  }

  .p-share {
    flex: 1 1 100%;
  }

  .kwh-toast {
    bottom: 84px;
  }
}

@media (hover: none) {
  .finder-intent:hover,
  .finder-share:hover,
  .p-share:hover,
  .range-item:hover {
    transform: none;
  }
}

/* Homepage brand flow: a lightweight, linkable capability ticker.
 *
 * Redesigned Aug 2026. The previous version drew a hard 1px divider on every
 * item plus a repeating vertical grid overlay, which read as a spreadsheet row.
 * Each capability is now a self-contained chip floating on a soft gradient
 * band, so the eye follows the motion rather than the rules between cells.
 *
 * The visible pause/play control was removed at the client's request. Motion
 * still stops on hover and on keyboard focus, and prefers-reduced-motion turns
 * the marquee into a plain horizontally scrollable list.
 */
@keyframes brand-flow-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes brand-flow-sheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.brand-flow {
  position: relative;
  z-index: 4;
  overflow: hidden;
  border-block: 1px solid rgba(125, 202, 226, .14);
  background:
    radial-gradient(760px 120px at 12% 50%, rgba(55, 195, 232, .10), transparent 70%),
    radial-gradient(620px 120px at 88% 50%, rgba(27, 95, 168, .16), transparent 72%),
    linear-gradient(180deg, #061a31 0%, #041426 55%, #061a31 100%);
  color: #fff;
}

/* a single hairline of light along the top edge, instead of a grid of rules */
.brand-flow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(125, 202, 226, .5) 22%, rgba(125, 202, 226, .5) 78%, transparent);
}

.brand-flow-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(196px, 250px) minmax(0, 1fr);
  align-items: center;
  min-height: 92px;
  padding: 0;
}

/* ---------- intro ---------- */
.brand-flow-intro {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 26px 0 0;
  border: 0;
  background: none;
  transition: color .25s ease;
}

/* soft feather into the track rather than a hard border */
.brand-flow-intro::after {
  content: "";
  position: absolute;
  right: 0;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(125, 202, 226, .34) 22%, rgba(125, 202, 226, .34) 78%, transparent);
}

.brand-flow-intro small {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #7fd9ef;
  font: 700 .64rem/1 var(--display);
  letter-spacing: .19em;
  text-transform: uppercase;
}

.brand-flow-intro small::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua), rgba(55, 195, 232, 0));
}

.brand-flow-intro strong {
  margin-top: 9px;
  overflow: hidden;
  color: #f4f9fc;
  font: 700 .86rem/1.15 var(--display);
  letter-spacing: -.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-flow-intro:hover strong {
  color: var(--aqua);
}

/* ---------- moving track ---------- */
.brand-flow-window {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  contain: layout paint;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 58px, #000 calc(100% - 58px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 58px, #000 calc(100% - 58px), transparent);
}

.brand-flow-track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: brand-flow-scroll 52s linear infinite;
  will-change: transform;
}

.brand-flow-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}

/* ---------- the chip ---------- */
.brand-flow-item {
  position: relative;
  isolation: isolate;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 58%),
    rgba(8, 30, 54, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: #b9cbdc;
  overflow: hidden;
  transition:
    transform .28s var(--ease-out),
    border-color .28s ease,
    box-shadow .28s ease,
    color .28s ease;
}

/* a slow highlight that sweeps the chip on hover */
.brand-flow-item::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 34%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
}

.brand-flow-item i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow:
    0 0 0 4px rgba(55, 195, 232, .12),
    0 0 12px rgba(55, 195, 232, .55);
  transition: box-shadow .28s ease, transform .28s ease;
}

.brand-flow-item strong {
  font: 650 .84rem/1 var(--display);
  letter-spacing: .028em;
  white-space: nowrap;
}

.brand-flow-item:hover,
.brand-flow-item:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(55, 195, 232, .55);
  box-shadow:
    0 10px 26px rgba(3, 17, 36, .5),
    0 0 0 1px rgba(55, 195, 232, .22),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  color: #fff;
}

.brand-flow-item:hover i,
.brand-flow-item:focus-visible i {
  transform: scale(1.15);
  box-shadow:
    0 0 0 5px rgba(55, 195, 232, .18),
    0 0 16px rgba(55, 195, 232, .8);
}

.brand-flow-item:hover::after,
.brand-flow-item:focus-visible::after {
  opacity: 1;
  animation: brand-flow-sheen .9s var(--ease-out);
}

/* motion stops while a visitor is reading or tabbing through */
.brand-flow-window:hover .brand-flow-track,
.brand-flow-window:focus-within .brand-flow-track {
  animation-play-state: paused;
}

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  /* No width override here: the shell also carries .wrap, whose width supplies
     the page gutter at narrow widths. Forcing width:100% used to cancel that,
     leaving the intro label flush against the viewport edge while every other
     section stayed inset. */
  .brand-flow-shell {
    grid-template-columns: 138px minmax(0, 1fr);
    min-height: 82px;
  }

  .brand-flow-intro {
    padding-right: 16px;
  }

  /* .48rem rendered at 7.7px, the smallest text on the site. .58rem is the
     largest size that still keeps the label on one line at 320px. */
  .brand-flow-intro small {
    gap: 6px;
    font-size: .58rem;
    letter-spacing: .14em;
  }

  .brand-flow-intro small::before {
    width: 12px;
  }

  .brand-flow-intro strong {
    margin-top: 6px;
    font-size: .72rem;
    line-height: 1.18;
    white-space: normal;
  }

  .brand-flow-window {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  }

  .brand-flow-group {
    gap: 8px;
    padding-right: 8px;
  }

  .brand-flow-item {
    gap: 9px;
    padding: 9px 15px;
  }

  .brand-flow-item strong {
    font-size: .75rem;
  }

  .brand-flow-item i {
    width: 6px;
    height: 6px;
  }
}

/* ============================================================
   HOMEPAGE CATEGORY CARDS  (.path-*)
   Replaces the tabbed "product pathways" navigator: a headline
   and one card per catalogue category. No JavaScript, no tab
   state, and it degrades to a single readable column on phones
   instead of a horizontal tab strip.
   Card anatomy: outlined icon, title, one-line description,
   arrow affordance, and a cut-out product image bleeding off
   the right edge.
   ============================================================ */
/* ---------- surface ----------
   This sat on near-white and read as a gap between the dark capability band
   above it and the foam Why-Kedia block below, so the cards had no surface to
   sit on. The rings are the brand's own figure: the logo is a house over water
   waves, and water_rings() in generate_catalogue.py draws exactly this set in
   the PDF. The four radii below are that function's 1 / 1.55 / 2.1 / 2.7
   progression, normalised so the outermost ring is the box radius — a ripple,
   not a generic set of circles.

   Anchored off the top-right corner: that is the empty half of the header, so
   the rings fill dead space rather than sitting behind copy. The mask fades
   them out well before they reach the cards, which stay white and separated. */
.path-sec {
  position: relative;
  overflow: hidden;
  padding: 104px 0 108px;
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(55, 195, 232, .10), transparent 62%),
    linear-gradient(180deg, #fdfeff 0%, #ecf3f9 100%);
}

.path-sec::before {
  content: "";
  position: absolute;
  top: -560px;
  right: -450px;
  width: 1400px;
  height: 1400px;
  pointer-events: none;
  /* one gradient per ring so each can carry its own weight — the ripple reads
     as travelling outward rather than as four identical hoops */
  background:
    radial-gradient(circle at 50% 50%, transparent 0 257.8px, rgba(55, 195, 232, .30) 257.8px 259.3px, transparent 259.3px),
    radial-gradient(circle at 50% 50%, transparent 0 400.4px, rgba(55, 195, 232, .24) 400.4px 401.9px, transparent 401.9px),
    radial-gradient(circle at 50% 50%, transparent 0 542.9px, rgba(55, 195, 232, .18) 542.9px 544.4px, transparent 544.4px),
    radial-gradient(circle at 50% 50%, transparent 0 698.5px, rgba(55, 195, 232, .13) 698.5px 700px, transparent 700px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, rgba(0, 0, 0, .55) 62%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 30%, rgba(0, 0, 0, .55) 62%, transparent 100%);
}

/* content above the decoration */
.path-sec > .wrap {
  position: relative;
  z-index: 1;
}

.path-head {
  max-width: 760px;
  margin-bottom: 46px;
}

.path-head h2 {
  color: var(--deep);
  text-wrap: balance;
}

.path-head h2 em {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}

.path-rule {
  width: 74px;
  height: 4px;
  margin-top: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--aqua), var(--blue));
}

.path-head p {
  max-width: 620px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ---------- grid ---------- */
/* Five categories divide awkwardly into equal columns, so the row is split
   3 + 2 on a six-track grid: three cards, then two wider ones. No orphan. */
.path-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.path-card { grid-column: span 2; }
.path-card:nth-child(4),
.path-card:nth-child(5) { grid-column: span 3; }

/* ---------- card ---------- */
.path-card {
  --accent: var(--blue);
  --media-w: 118px;
  position: relative;
  isolation: isolate;
  min-height: 268px;
  /* A real two-column grid rather than absolute positioning: the copy column
     and the product column cannot occupy the same space, so text can never
     run under the image no matter how long the description wraps. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--media-w);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 16px;
  padding: 26px 26px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(6, 23, 46, .03);
  transition:
    transform .34s var(--ease-out),
    border-color .34s ease,
    box-shadow .34s ease;
}

.path-icon   { grid-area: 1 / 1; }
.path-card h3{ grid-area: 2 / 1; }
.path-card p { grid-area: 3 / 1; }
.path-count  { grid-area: 4 / 1; }
.path-go     { grid-area: 5 / 1; align-self: end; }

/* the two wider cards can carry a larger product */
.path-card:nth-child(4),
.path-card:nth-child(5) { --media-w: 168px; }

/* a wash of the category accent that appears on hover */
.path-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%);
  transition: opacity .34s ease;
}

.path-card:hover,
.path-card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 22px 46px rgba(6, 23, 46, .12);
}

.path-card:hover::before,
.path-card:focus-visible::before {
  opacity: 1;
}

/* ---------- icon ---------- */
.path-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1.5px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--accent);
  transition: background-color .34s ease, transform .34s var(--ease-out);
}

.path-card:hover .path-icon {
  transform: scale(1.06);
  background: color-mix(in srgb, var(--accent) 15%, #fff);
}

.path-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- copy ---------- */
.path-card h3 {
  margin-top: 20px;
  color: var(--deep);
  font-size: 1.16rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.path-card p {
  margin-top: 11px;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}

.path-count {
  margin-top: 14px;
  color: var(--accent);
  font: 700 .68rem/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- arrow ---------- */
.path-go {
  width: 42px;
  height: 42px;
  margin-top: auto;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--deep);
  transition:
    background-color .3s ease,
    border-color .3s ease,
    color .3s ease,
    transform .3s var(--ease-out);
}

.path-go svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-card:hover .path-go,
.path-card:focus-visible .path-go {
  transform: translateX(3px);
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* ---------- product cut-out ---------- */
.path-media {
  grid-area: 1 / 2 / -1 / 3;
  position: relative;
  z-index: -1;
  align-self: end;
  justify-self: end;
  /* overflow past the card padding so the product still bleeds off the edge,
     without stealing any width from the copy column */
  width: calc(100% + 34px);
  margin: 0 -34px -32px 0;
  pointer-events: none;
  transition: transform .45s var(--ease-out);
}

.path-media img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(6, 23, 46, .13));
}

.path-card:hover .path-media {
  transform: scale(1.05) translateY(-3px);
}

/* ---------- footer link ---------- */
.path-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 40px;
}

.path-foot .path-note {
  color: var(--muted);
  font-size: .93rem;
}

.path-foot .path-note b {
  color: var(--deep);
  font-family: var(--display);
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  /* two per row: six tracks, three each */
  .path-card,
  .path-card:nth-child(4),
  .path-card:nth-child(5) { grid-column: span 3; }
  .path-card { min-height: 250px; }
  .path-card,
  .path-card:nth-child(4),
  .path-card:nth-child(5) { --media-w: 150px; }
}

@media (max-width: 720px) {
  .path-sec { padding: 74px 0 78px; }

  /* The desktop ring set is sized for a 1440px stage; at phone width all but a
     sliver of the outermost ring falls outside the viewport and the motif is
     lost. Halved and pulled back in so the ripple still reads above the cards. */
  .path-sec::before {
    width: 720px;
    height: 720px;
    top: -300px;
    right: -250px;
    background:
      radial-gradient(circle at 50% 50%, transparent 0 131.5px, rgba(55, 195, 232, .30) 131.5px 133.3px, transparent 133.3px),
      radial-gradient(circle at 50% 50%, transparent 0 204.8px, rgba(55, 195, 232, .24) 204.8px 206.6px, transparent 206.6px),
      radial-gradient(circle at 50% 50%, transparent 0 278.2px, rgba(55, 195, 232, .18) 278.2px 280px, transparent 280px),
      radial-gradient(circle at 50% 50%, transparent 0 358.2px, rgba(55, 195, 232, .13) 358.2px 360px, transparent 360px);
  }

  .path-head { margin-bottom: 30px; }
  .path-grid { grid-template-columns: 1fr; gap: 14px; }
  .path-card,
  .path-card:nth-child(4),
  .path-card:nth-child(5) { grid-column: auto; }

  /* one wide card per row: copy left, cut-out right, like the reference */
  .path-card {
    --media-w: 108px;
    min-height: 0;
    column-gap: 14px;
    padding: 20px;
    border-radius: 17px;
  }

  .path-card:nth-child(4),
  .path-card:nth-child(5) { --media-w: 108px; }

  .path-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .path-icon svg { width: 21px; height: 21px; }

  .path-card h3 {
    margin-top: 14px;
    font-size: 1.06rem;
  }

  .path-card p {
    margin-top: 8px;
    font-size: .84rem;
  }

  .path-count { margin-top: 10px; }

  .path-go {
    width: 40px;
    height: 40px;
    margin-top: 16px;
  }

  .path-media {
    align-self: center;
    width: calc(100% + 18px);
    margin: 0 -18px 0 0;
  }

  .path-card:hover .path-media { transform: none; }

  .path-foot { margin-top: 26px; }
}

@media (max-width: 380px) {
  .path-card { --media-w: 88px; column-gap: 11px; }
}

@media (hover: none) {
  .path-card:hover { transform: none; }
  .path-card:hover .path-media { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.elevated {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .page-hero.image-hero::before,
  .page-hero.image-hero::after,
  .mobile-actions,
  .kwh-toast,
  .brand-flow-track,
  .brand-flow-item,
  .brand-flow-item::after,
  .path-card,
  .path-card::before,
  .path-icon,
  .path-go,
  .path-media {
    animation: none !important;
    transition: none !important;
  }

  .brand-flow-window {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .brand-flow-window::-webkit-scrollbar {
    display: none;
  }

  .brand-flow-track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .brand-flow-group[aria-hidden="true"] {
    display: none;
  }
}

/* Categories whose photography cannot be cleanly cut out render as a rounded
   thumbnail rather than a floating product, so the card still reads as
   designed instead of showing a ragged silhouette. */
.path-media.is-framed {
  width: 100%;
  margin: 0 0 2px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(6, 23, 46, .16);
}

.path-media.is-framed img {
  aspect-ratio: 1;
  object-fit: cover;
  filter: none;
}

@media (max-width: 720px) {
  .path-media.is-framed {
    align-self: center;
    width: 100%;
    margin: 0;
  }
}

/* ============================================================
   NAV — Products mega menu
   Two levels: a category rail on the left, that category's
   product lines on the right. Cascading flyouts were the
   alternative, but they make the pointer travel diagonally
   across one submenu to reach the next; swapping a single panel
   keeps every target on a straight path.
   The desktop nav is hidden below 861px, so this only has to
   work above that — the drawer handles the rest.
   ============================================================ */
.nav-item.has-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-caret {
  display: inline-grid;
  place-items: center;
  /* 24px is the WCAG 2.5.8 minimum target size; this was 22px */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: currentColor;
  cursor: pointer;
  opacity: .72;
  transition: opacity .2s ease, transform .25s var(--ease-out);
}

.nav-caret svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}

.nav-item.has-menu:hover .nav-caret,
.nav-caret:focus-visible { opacity: 1; }
.nav-item.has-menu:hover .nav-caret,
.nav-caret[aria-expanded="true"] { transform: rotate(180deg); }

/* ---------- panel shell ---------- */
.nav-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 14px);
  left: 50%;
  width: 638px;
  max-width: calc(100vw - 40px);
  padding: 10px;
  border: 1px solid rgba(125, 202, 226, .18);
  border-radius: 18px;
  background: linear-gradient(168deg, #0b2544, #071a31 62%);
  box-shadow: 0 30px 70px rgba(2, 12, 26, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s var(--ease-out);
}

.nav-menu[hidden] { display: block; }

/* hover bridge across the gap between the bar and the panel */
.nav-item.has-menu::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
}

.nav-item.has-menu:hover .nav-menu,
.nav-item.has-menu:focus-within .nav-menu,
.nav-menu.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Escape must win over :hover, or the pointer immediately re-opens it */
.nav-item.has-menu.is-dismissed .nav-menu {
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
}

/* ---------- split layout ---------- */
.nav-mega {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 10px;
}

.nav-cats {
  display: grid;
  align-content: start;
  gap: 1px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, .09);
}

.nav-cat,
.nav-menu-all {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: #c7d9e8;
  transition: background-color .18s ease, color .18s ease;
}

.nav-menu-all {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px 9px 0 0;
  color: #fff;
}

.nav-cat { grid-template-columns: 7px minmax(0, 1fr) auto auto; }

.nav-cat i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, var(--aqua));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, var(--aqua)) 70%, transparent);
}

.nav-cat b, .nav-menu-all b {
  font: 600 .845rem/1.25 var(--body);
  letter-spacing: -.005em;
}
.nav-menu-all b { font-weight: 700; }

/* the count, with no "LINES" label shouting next to it */
.nav-cat em, .nav-menu-all em {
  min-width: 21px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: #8fadc6;
  font: 700 .68rem/1.35 var(--display);
  font-style: normal;
  text-align: center;
}

.nav-cat-go {
  display: grid; place-items: center; width: 14px;
  opacity: 0; transform: translateX(-3px);
  transition: opacity .18s ease, transform .18s ease;
}
.nav-cat-go svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.nav-cat:hover, .nav-cat:focus-visible,
.nav-cat.is-active,
.nav-menu-all:hover, .nav-menu-all:focus-visible {
  background: rgba(55, 195, 232, .13);
  color: #fff;
}
.nav-cat.is-active em, .nav-cat:hover em { background: rgba(55, 195, 232, .2); color: #fff; }
.nav-cat.is-active .nav-cat-go, .nav-cat:hover .nav-cat-go { opacity: 1; transform: none; }

/* ---------- right side: the product lines ---------- */
.nav-lines { position: relative; min-width: 0; }

.nav-lines-panel { display: none; padding: 4px 4px 4px 2px; }
.nav-mega[data-active="pumping"]        .nav-lines-panel[data-lines="pumping"],
.nav-mega[data-active="pipes"]          .nav-lines-panel[data-lines="pipes"],
.nav-mega[data-active="water-treatment"] .nav-lines-panel[data-lines="water-treatment"],
.nav-mega[data-active="infrastructure"] .nav-lines-panel[data-lines="infrastructure"],
.nav-mega[data-active="solar"]          .nav-lines-panel[data-lines="solar"] {
  display: block;
  animation: nav-lines-in .22s var(--ease-out);
}

@keyframes nav-lines-in {
  from { opacity: 0; transform: translateX(5px); }
  to   { opacity: 1; transform: none; }
}

.nav-lines-panel small {
  display: block;
  margin: 4px 0 9px 8px;
  color: #6f90ac;
  font: 700 .61rem/1 var(--display);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.nav-lines-grid { display: grid; gap: 1px; }
.nav-lines-panel.is-wide .nav-lines-grid { grid-template-columns: 1fr 1fr; column-gap: 6px; }

.nav-lines-grid a {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  color: #b6cade;
  font: 500 .81rem/1.3 var(--body);
  transition: background-color .16s ease, color .16s ease;
}
.nav-lines-grid a:hover, .nav-lines-grid a:focus-visible {
  background: rgba(255, 255, 255, .07); color: #fff;
}

.nav-lines-all {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 9px 0 2px 9px;
  color: var(--aqua);
  font: 700 .76rem/1 var(--display);
}
.nav-lines-all span { transition: transform .2s ease; }
.nav-lines-all:hover span { transform: translateX(3px); }

/* ---------- drawer: one collapsible per category ---------- */
.drawer-sub {
  display: grid;
  gap: 2px;
  margin: 2px 0 12px;
  padding-left: 13px;
  border-left: 2px solid rgba(125, 202, 226, .26);
}

.drawer-cat-row { display: flex; align-items: center; gap: 6px; }

.drawer-cat-row > a {
  display: flex !important;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-height: 46px;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #b7cadb !important;
}

.drawer-cat-row > a i {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent, var(--aqua));
}
.drawer-cat-row > a:hover { color: #fff !important; }

.drawer-cat-toggle {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: 0 0 auto;
  padding: 0; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; background: rgba(255, 255, 255, .04);
  color: #9db6cd; cursor: pointer;
  transition: transform .25s var(--ease-out), color .2s ease, background-color .2s ease;
}
.drawer-cat-toggle svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.drawer-cat-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
  background: rgba(55, 195, 232, .14);
  color: #fff;
}

.drawer-lines {
  display: grid;
  gap: 1px;
  margin: 1px 0 7px 18px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.drawer-lines[hidden] { display: none; }

.drawer-lines a {
  display: flex !important;
  align-items: center;
  min-height: 44px;
  color: #93aec6 !important;
  font-size: .93rem !important;
  font-weight: 400 !important;
}
.drawer-lines a:hover { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-caret, .nav-cat, .nav-cat-go,
  .drawer-cat-toggle, .nav-lines-all span { transition: none !important; }
  .nav-mega .nav-lines-panel { animation: none !important; }
}

/* The header capsule sets overflow:hidden, which clips the Products mega
   menu. Its background is already clipped by its own border-radius, so
   visible overflow costs nothing and lets the panel out of the bar.
   (Do not touch .site-head .wrap::before — that is the highlight line.) */
.site-head .wrap {
  overflow: visible;
}

/* The drawer's quote button sat at 40px — under the 44px touch minimum,
   and it is the drawer's primary call to action. */
.drawer-quote {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* The drawer centres its contents and never scrolled. That was fine with five
   links; with the category lines expanded the content is taller than the
   viewport, and centring pushed the first items to a negative offset where
   they could not be reached at all. Anchor to the top and let it scroll. */
.drawer {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Monospace, used sparingly.
   Reference codes and counts only — the things a tender reader
   scans and cross-checks. Prose spec values stay in the sans;
   a sentence like "Manufactured using high-quality electrical
   components" reads badly in mono. Figures elsewhere get
   tabular numerals so columns line up without changing face.
   ============================================================ */
.p-ref,
.range-ref,
.nav-cat em,
.nav-menu-all em,
.path-count,
.cat-count{
  font-family:var(--mono);
  font-feature-settings:'tnum' 1,'zero' 1;
}
.spec-dl dd,
.hero-stats b,
.p-var-toggle .num,
.range-count b{
  font-feature-settings:'tnum' 1;
}

/* ============================================================
   NUMERALS
   Figures are set in IBM Plex Mono so specifications read as
   measured data rather than marketing copy — the thing a tender
   buyer scans for. Words around them stay in the sans, so a
   value like "0.5 HP to 500 HP" keeps its units readable.
   Mono digits are wider and sit slightly larger on the body, so
   the size and tracking are pulled back to match the sans.
   ============================================================ */
.fig{
  font-family:var(--mono);
  font-size:.94em;
  letter-spacing:-.012em;
  font-feature-settings:'tnum' 1,'zero' 1;
}

/* standalone display figures — the hero stat rail, card counts,
   the big catalogue total */
.hero-stats b,
.home-range-total strong,
.capacity-number,
.bigyear,
.why-card-mark,
.range-count b,
.p-var-toggle .cnt .num{
  font-family:var(--mono);
  font-feature-settings:'tnum' 1,'zero' 1;
  letter-spacing:-.045em;
}

/* the "+" and "k" suffixes read better in the sans beside them */
.hero-stats b em{
  font-family:var(--display);
  letter-spacing:0;
}

/* ============================================================
   HERO STAT RAIL — liquid glass
   Consolidates nine scattered rules into one treatment. The
   panel is built from four stacked layers so it reads as glass
   rather than a flat translucent box:
     1. backdrop blur + saturation      — what shows through
     2. a diagonal sheen                — the surface itself
     3. a soft specular pool, top-left  — where light gathers
     4. a hairline along the top edge   — the lit rim
   Everything is white. Hierarchy between the figure and its
   label comes from size, weight and opacity instead of hue, so
   the rail stays monochrome without going flat.
   ============================================================ */
.hero-stats{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.05) 34%,
      rgba(255,255,255,.02) 62%,
      rgba(255,255,255,.08) 100%),
    rgba(9,28,52,.42);
  box-shadow:
    0 26px 64px rgba(2,12,26,.34),
    0 2px 10px rgba(2,12,26,.20),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
}

/* the lit rim along the top edge */
.hero-stats::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 12% auto;
  height:1px;
  background:linear-gradient(90deg,
    transparent,rgba(255,255,255,.72) 42%,rgba(255,255,255,.72) 58%,transparent);
}

/* the specular pool — where light collects on the surface */
.hero-stats::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-40% 40% 30% -12%;
  pointer-events:none;
  background:radial-gradient(60% 70% at 30% 30%,rgba(255,255,255,.16),transparent 72%);
  filter:blur(6px);
}

/* dividers fade out at both ends, the way an edge in glass would */
.hero-stats>div{
  position:relative;
  border-left:0;
}
.hero-stats>div+div::before{
  content:"";
  position:absolute;
  left:0;
  top:14%;
  bottom:14%;
  width:1px;
  background:linear-gradient(180deg,
    transparent,rgba(255,255,255,.26) 26%,rgba(255,255,255,.26) 74%,transparent);
}

/* ---------- one colour: white ---------- */
.hero-stats b{
  color:#fff;
  text-shadow:0 1px 14px rgba(4,18,34,.30);
}
.hero-stats b em{
  color:#fff;               /* the + and k were aqua */
  opacity:.82;
  font-style:normal;
}
.hero-stats>div>span{
  color:rgba(255,255,255,.66);   /* still white, softened for hierarchy */
}

/* ---------- narrow screens: keep the glass, go 2 x 2 ---------- */
@media (max-width:860px){
  .hero-stats{
    grid-template-columns:1fr 1fr;
    margin-top:26px;
    padding:6px 4px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    background:
      linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 60%,rgba(255,255,255,.07)),
      rgba(9,28,52,.40);
    box-shadow:
      0 18px 44px rgba(2,12,26,.30),
      inset 0 1px 0 rgba(255,255,255,.26);
    backdrop-filter:blur(26px) saturate(175%);
    -webkit-backdrop-filter:blur(26px) saturate(175%);
  }
  .hero-stats>div{padding:13px 14px;border-top:0}
  /* vertical rule between the columns, horizontal between the rows */
  .hero-stats>div+div::before{display:none}
  .hero-stats>div:nth-child(even)::after{
    content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
  }
  .hero-stats>div:nth-child(n+3)::before{
    content:"";position:absolute;left:8%;right:8%;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
    display:block;
  }
}

@media (max-width:420px){
  .hero-stats{padding:4px 2px;border-radius:16px}
  .hero-stats>div{padding:11px 10px}
}

/* Safari and Firefox without backdrop-filter get a solid fallback rather
   than a washed-out panel over the photograph. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-stats{background:linear-gradient(135deg,rgba(14,38,66,.94),rgba(7,24,45,.94))}
}

/* The fixed contact dock overlays the foot of the hero, hiding 43-77px of the
   stat rail on every phone size. Reserve its height (plus the safe area) so
   the last row of figures clears it. */
@media (max-width:860px){
  .hero-bg .wrap{
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
  }
}

/* Short viewports (iPhone SE and similar): the hero's full vertical rhythm
   does not fit above the fold, so tighten it rather than let the stat rail
   sit permanently under the contact dock. */
@media (max-width:860px) and (max-height:760px){
  .hero-bg .wrap{padding-top:104px}
  .hero-bg h1{margin-top:16px}
  .hero-bg p.lead{margin:14px 0 20px}
  .hero-stats{margin-top:16px}
  .hero-stats>div{padding:9px 12px}
  .hero-actions{margin-bottom:2px}
}

/* ============================================================
   Accent text on light surfaces
   The five category colours were picked for dark cards. On the
   white hub and homepage cards they land between 1.82:1 and
   2.99:1 as text — all five fail AA. Text and icons on light
   now use the darkened --accent-ink of the same hue; the bright
   value stays for dots, borders and glows, which are decorative
   or only need 3:1 as UI components.
   ============================================================ */
.cat-go{color:var(--accent-ink,var(--blue))}
.path-count{color:var(--accent-ink,var(--blue))}
.path-icon{color:var(--accent-ink,var(--blue))}
.path-card:hover .path-go,
.path-card:focus-visible .path-go{
  border-color:var(--accent-ink,var(--blue));
  background:var(--accent-ink,var(--blue));
}

/* Footer column labels were <h5>, which jumped the heading outline from h2
   straight to h5 on all ten pages. They are labels, not document structure. */
.foot-h{
  margin:0 0 14px;
  color:#fff;
  font:700 .74rem/1.2 var(--display);
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* ============================================================
   Contrast corrections found in the visual audit.
   All four are text on a solid background, so these are real
   failures rather than the gradient false-positives.
   ============================================================ */

/* 1. White text sitting on a bright accent chip — 1.82-2.99:1. The same
      accent with dark text reads 5.99-9.84:1, so only the ink changes.
      Covers the category letter in the range index, the variant-count
      badge, and the cross-link chips. */
.range-group h3 span,
.p-var-toggle .cnt .num,
.cross-card > span{color:var(--deep)}

/* 2. The product eyebrow ("01 · Pumping") used the bright accent on the
      white product page — 2.07:1. Use the darkened ink of the same hue. */
.p-eyebrow{color:var(--accent-ink,var(--blue))}

/* 3. Small labels were #8397aa on white — 3.01:1 at 10px. */
.spec-dl dt,
.p-meta h3{color:#61778d}

/* 4. The eyebrow on inner page heroes fell back to --blue on --deep
      (2.78:1) because .page-hero was missing from the on-dark list. */
.page-hero .lbl{color:var(--aqua)}

/* ============================================================
   BRAND LOGO — show the official badge complete
   The logo already carries its own blue disc and wordmark, so the
   old rounded-square frame, aqua border and object-fit:cover were
   cropping it and fighting its shape. Container styling is removed
   and the artwork is contained, never cropped, at a size where the
   wordmark still reads.
   ============================================================ */
.brand .mark{
  width:56px;height:56px;
  border:0;border-radius:0;overflow:visible;
  background:none;box-shadow:none;
}
.brand .mark img{
  width:100%;height:100%;
  object-fit:contain;          /* never crop the badge */
  border-radius:50%;           /* match the artwork's own disc */
}

.site-foot .foot-brand img{
  width:112px;height:112px;
  object-fit:contain;
  border:0;border-radius:50%;
  background:none;box-shadow:none;
}

@media (max-width:860px){
  .brand .mark{width:50px;height:50px}
  .site-foot .foot-brand img{width:96px;height:96px}
}
@media (max-width:420px){
  .brand .mark{width:46px;height:46px}
}

/* ============================================================
   PHONE-FIRST PASS
   Most visitors use this site on a handset. Keep the existing
   visual system; clear the contact dock, keep the header, and
   make the primary controls easy to hit with a thumb.
   ============================================================ */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
a,button,.chip,.burger,.var-nav button,.drawer-cat-toggle,.boq-add,.p-sheet{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(55,195,232,.22);
}

@media (max-width:860px){
  .site-head{
    top:max(8px, env(safe-area-inset-top, 0px));
  }
  .site-head.hide{transform:none}
  html.header-hidden .line-rail{
    top:var(--sticky-top);
  }
  .drawer{
    padding:calc(92px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .drawer.open .drawer-quote,
  .drawer.open .d-contact{
    opacity:1;
    transform:none;
  }
}

@media (max-width:620px){
  :root{
    --dock-h:calc(76px + env(safe-area-inset-bottom, 0px));
    --sticky-top:calc(66px + env(safe-area-inset-top, 0px));
  }
  body{padding-bottom:var(--dock-h)}
  body.boq-open{padding-bottom:calc(var(--dock-h) + 8px)}

  .mobile-actions{
    margin:0 8px max(8px, env(safe-area-inset-bottom, 0px));
    padding:9px 12px;
  }
  .mobile-actions.is-hidden{
    transform:none;
    opacity:1;
    pointer-events:auto;
  }

  /* Hero: sit the copy in the middle of the phone — not against the
     header, not against the Call bar — with even air above and below. */
  .hero-bg{
    min-height:100svh;
    box-sizing:border-box;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    padding-top:calc(72px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(var(--dock-h) + 16px);
  }
  .hero-bg .wrap{
    min-width:0;
    min-height:0;
    width:100%;
    max-width:none;
    align-self:stretch;
    padding:8px 22px 12px;
    justify-content:flex-start;
  }
  .hero-bg .wrap>div{max-width:100%;min-width:0}
  .hero-bg .veil{
    background:
      linear-gradient(180deg,rgba(3,15,29,.5) 0%,rgba(3,15,29,.74) 32%,rgba(3,15,29,.9) 62%,rgba(3,15,29,.97) 100%),
      linear-gradient(90deg,rgba(3,15,29,.26),transparent 78%);
  }
  .hero-bg h1{
    margin-top:18px;
    max-width:100%;
    font-size:clamp(2.35rem,9.8vw,2.95rem);
    line-height:1.08;
    text-wrap:balance;
  }
  .hero-bg h1 .accent{display:block;margin-top:.06em}
  .hero-bg p.lead{
    max-width:100%;
    margin:18px 0 26px;
    font-size:.92rem;
    line-height:1.62;
    overflow-wrap:break-word;
  }
  .hero-bg .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .hero-bg .hero-actions .btn{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:12px 10px;
    font-size:.78rem;
    justify-content:center;
  }
  .hero-bg .hero-actions .btn-line-w{
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    padding-inline:10px;
  }
  .hero-bg .hero-actions .btn-line-w svg{display:none}
  .hero-stats{
    margin-top:26px;
  }
  .hero-stats>div>span{
    font-size:.62rem;
    letter-spacing:.08em;
    min-height:2.4em;
  }

  .page-hero.image-hero{
    padding-bottom:calc(36px + var(--dock-h) * .15);
  }

  .p-lines{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
  .cta-final,.site-foot{padding-bottom:28px}

  .kwh-toast{bottom:calc(var(--dock-h) + 12px)}

  .brand{min-width:0}
  .brand>span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .brand-flow-item{
    min-height:44px;
    padding-inline:14px;
  }

  .line-rail a{min-height:44px;padding:11px 14px}

  .foot-cols a{min-height:44px}

  /* Pump / valve families: arrows in the flow so they never sit on the photos. */
  .p-var-shell .var-nav{
    display:flex;
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    justify-content:flex-end;
    gap:8px;
    margin:2px 0 12px;
  }
  .p-var-shell .var-nav button{
    width:44px;
    height:44px;
  }
  .p-var-list.showcase li{flex-basis:min(78vw, 280px)}
  .p-tagline .fig{white-space:nowrap;letter-spacing:-.03em}

  .field,textarea.field{font-size:16px}
  .c-right{padding-bottom:calc(32px + var(--dock-h))}
  .c-right .btn{margin-bottom:10px}
}

@media (max-width:620px) and (max-height:740px){
  .hero-bg h1{
    margin-top:12px;
    font-size:clamp(2.15rem, 10.4vw, 2.75rem);
    line-height:1.05;
  }
  .hero-bg p.lead{margin:12px 0 16px;font-size:.84rem;line-height:1.5}
  .hero-stats{margin-top:14px}
  .hero-stats b{font-size:1.18rem}
  .hero-stats>div{padding:9px 8px}
}

@media (max-width:380px){
  .hero-bg .lbl{max-width:100%;white-space:normal;line-height:1.35}
  .hero-bg h1{font-size:clamp(2.05rem, 11.2vw, 2.45rem)}
  .hero-bg .hero-actions .btn{
    min-height:44px;
    padding:10px 8px;
    font-size:.7rem;
    white-space:nowrap;
  }
  .mobile-actions a{font-size:.78rem}
}

@media (max-width:380px) and (max-height:600px){
  .hero-bg .wrap{padding-top:calc(88px + env(safe-area-inset-top, 0px))}
  .hero-bg h1{margin-top:8px;font-size:clamp(1.9rem, 10.6vw, 2.25rem)}
  .hero-bg p.lead{margin:8px 0 12px;font-size:.78rem;line-height:1.45}
  .hero-stats{margin-top:8px}
  .hero-stats b{font-size:1.05rem}
  .hero-stats>div{padding:6px 5px}
  .hero-stats>div>span{font-size:.55rem;min-height:2.2em}
}