/* Latest Figma homepage frame: 1920 × 7357. */
html,
body {
  min-height: 100%;
  background: #fff;
}

.canvas-wrap {
  background: transparent;
}

.figma-page {
  height: 7357px;
  background: transparent;
}

/* The Hero photo must not inherit the 0.8 scale used by the legacy Figma
   canvas. This separate layer renders at 1920px wide while retaining the
   existing scaled Hero height. Overlay artwork and copy stay in the canvas. */
body.route-home #spa-root { position:relative; }
.home-hero-wide {
  position:absolute;
  z-index:0;
  top:77px;
  left:50%;
  width:1920px;
  max-width:100vw;
  height:calc(751px * var(--page-scale));
  overflow:hidden;
  background:url("assets/figma/home-hero-products.webp") center center / cover no-repeat;
  transform:translateX(-50%);
}
.home-hero-wide::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(33,51,69,.88) 0%,
    rgba(33,51,69,.70) 24%,
    rgba(33,51,69,.43) 46%,
    rgba(33,51,69,.13) 68%,
    rgba(33,51,69,0) 100%);
  opacity:1;
  pointer-events:none;
}
body.route-home #spa-root > .canvas-wrap { position:relative; z-index:1; }
#top > img { opacity:0 !important; }
body.route-home .hero-overlay { opacity:0 !important; visibility:hidden !important; }

/* Close the gap below the full-width Hero while keeping the editorial rhythm:
   Mission, Products and News move as one group; Discover stays anchored, so
   the carousel no longer runs directly into the following section. */
.mid-bg,
#applications > *,
#products > *,
#service > * {
  translate: 0 -20px;
}

/* Keep the Hero fixed while moving every later homepage section together. */
#discover > :not(article),
#discover > article > *,
#contact > *,
.figma-page > footer > * {
  translate: 0 100px;
}

/* Copyright is bottom-anchored to the canvas already. Do not apply the extra
   footer translation or its text and top rule are clipped outside the frame. */
.figma-page > footer > .copyright {
  translate: 0 0;
}

/* Divider between the Contact CTA and the angled footer surface. */
.figma-page > footer::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 108px;
  top: 6685px;
  width: 1708px;
  height: 1px;
  background: #aeb6bd;
}

/* The moved background starts before the Hero ends. Crop that leading slice
   at the Hero boundary instead of allowing the grey artwork to cover it. */
.mid-bg {
  clip-path: inset(60px 0 0 0);
}

/* Replace the oversized lower-page grey artwork with a content-sized panel
   behind the Mission paragraph only. */
body.route-home .mid-bg {
  display: none !important;
}

.mission-copy {
  width: 910px !important;
  height: 277px !important;
  padding: 16px 20px !important;
  background: rgba(217,217,217,.5) !important;
}

#applications .more-link {
  top: 1340px !important;
  width: 310px !important;
  height: 39px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #213345 !important;
  line-height: 39px !important;
}

#applications .more-link:hover,
#applications .more-link:focus-visible {
  color: #0075b9 !important;
}

/* Condensed navigation: fixed, full-viewport white surface with the Figma
   desktop content rhythm retained inside the 1920px-wide state. */
:root {
  --page-scale: .8;
  --canvas-width: 1536px;
  --canvas-offset: 0px;
  --nav-normal-height: calc(140px * var(--page-scale));
  --nav-compact-height: 68px;
  --nav-motion: 520ms;
  /* Deliberate ease-in-out: no overshoot, and no front-loaded snap. */
  --nav-ease: cubic-bezier(.4, 0, .2, 1);
}

.site-nav {
  position: fixed;
  z-index: 100;
  top: 0;
  /* The header surface is viewport-wide in both states. This prevents the
     canvas edge from becoming a visible seam below the navigation mid-scroll. */
  left: 0;
  width: 100vw;
  height: var(--nav-normal-height);
  background: #fff;
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(20, 49, 75, 0);
  transform: none;
  will-change: height;
  transition: height var(--nav-motion) var(--nav-ease), background-color var(--nav-motion) ease-out, border-color var(--nav-motion) ease-out, box-shadow var(--nav-motion) ease-out;
}

body.nav-is-condensed .site-nav {
  height: var(--nav-compact-height);
  border-bottom-color: rgba(20, 49, 75, .10);
  box-shadow: 0 5px 16px rgba(20, 49, 75, .06);
  transform: none;
}

.site-nav-inner {
  position: relative;
  left: var(--canvas-offset);
  width: 1920px;
  height: 166px;
  transform: scale(var(--page-scale));
  transform-origin: top left;
  will-change: left, transform;
  transition: left var(--nav-motion) var(--nav-ease), transform var(--nav-motion) var(--nav-ease);
}

body.nav-is-condensed .site-nav-inner {
  left: 0;
  transform: scale(1);
}

.site-logo {
  left: 70px;
  top: 26px;
  width: 355px;
  height: 91px;
  transition: left var(--nav-motion) var(--nav-ease), top var(--nav-motion) var(--nav-ease), width var(--nav-motion) var(--nav-ease), height var(--nav-motion) var(--nav-ease);
}

.site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-nav-links {
  position: absolute;
  inset: 0;
}

.site-nav-links .nav-link {
  top: 64px;
  height: 44px;
  white-space: nowrap;
  transition: left var(--nav-motion) var(--nav-ease), top var(--nav-motion) var(--nav-ease), font-size var(--nav-motion) var(--nav-ease), line-height var(--nav-motion) var(--nav-ease);
}
/* Latest 首页 Frame navigation labels and anchors. */
.site-nav-links .nav-link:nth-child(1) { left: 626px; width: 167px; }
.site-nav-links .nav-link:nth-child(2) { left: 782px; width: 362px; }
.site-nav-links .nav-link:nth-child(3) { left: 1186px; width: 235px; }
.site-nav-links .nav-link:nth-child(4) { left: 1462px; width: 169px; }
.site-nav-links .nav-link:nth-child(5) { left: 1649px; width: 237px; }

/* Figma hover states: a single blue drop panel sits below the header,
   with a small active-item pointer, section title, divider and white sublinks. */
.nav-mega {
  --menu-width: 858px;
  --menu-title-width: 248px;
  position: absolute;
  left: 0;
  top: var(--nav-normal-height);
  z-index: 101;
  width: var(--menu-width);
  min-height: calc(296px * var(--page-scale));
  padding: calc(62px * var(--page-scale)) calc(62px * var(--page-scale)) calc(62px * var(--page-scale)) calc(68px * var(--page-scale));
  display: grid;
  grid-template-columns: minmax(190px, var(--menu-title-width)) 1px minmax(0, 1fr);
  column-gap: calc(45px * var(--page-scale));
  align-items: center;
  color: #fff;
  background: #365faa;
  border-radius: 0 0 calc(20px * var(--page-scale)) calc(20px * var(--page-scale));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-14px * var(--page-scale)));
  transform-origin: top center;
  /* Geometry is set before the panel becomes visible. Only the reveal itself
     animates, so the pointer can never lag behind its active nav item. */
  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(.22,1,.36,1), visibility 0s linear 240ms, top var(--nav-motion) var(--nav-ease), min-height var(--nav-motion) var(--nav-ease), padding var(--nav-motion) var(--nav-ease);
}

.site-nav.nav-menu-open .nav-mega,
.site-nav:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-mega-pointer {
  position: absolute;
  /* The 2px overlap deliberately removes sub-pixel anti-aliasing seams
     between the triangle and the blue rectangle. */
  top: calc(-18px * var(--page-scale));
  left: var(--pointer-center, 50%);
  width: 0;
  height: 0;
  border-left: calc(22px * var(--page-scale)) solid transparent;
  border-right: calc(22px * var(--page-scale)) solid transparent;
  border-bottom: calc(20px * var(--page-scale)) solid #365faa;
  transform: translateX(-50%);
  transition: top var(--nav-motion) var(--nav-ease);
}

.nav-mega-title {
  margin: 0;
  font-size: calc(38px * var(--page-scale));
  line-height: 1.15;
  font-weight: 500;
}

.nav-mega-divider {
  width: 1px;
  min-height: calc(204px * var(--page-scale));
  background: rgba(255,255,255,.76);
}

.nav-mega-links {
  display: grid;
  gap: calc(24px * var(--page-scale));
  align-content: center;
}

.nav-mega-link {
  position: relative;
  color: #fff;
  font-size: calc(36px * var(--page-scale));
  line-height: 1.18;
  font-weight: 400;
  text-decoration: none;
  transition: color 180ms ease-out, transform 180ms ease-out;
}

.nav-mega-link:hover,
.nav-mega-link:focus-visible {
  color: #cbe8ff;
  transform: translateX(calc(8px * var(--page-scale)));
  outline: none;
}

/* Compact layout retains the same nodes, while moving them into the wide
   navigation rhythm shown in the Figma collapsed state. */
body.nav-is-condensed .site-logo {
  left: clamp(82px, 6.5vw, 125px);
  top: 7px;
  width: 200px;
  height: 52px;
}

body.nav-is-condensed .site-nav-links .nav-link {
  top: 20px;
  width: auto;
  height: 29px;
  font-size: 24px;
  line-height: 29px;
}
body.nav-is-condensed .site-nav-links {
  /* The five-link group uses the Hero's horizontal centre (the canvas is
     centred in the viewport) as its anchor in the compact state.  The
     logo's real rendered width is included as a minimum, so longer current
     Figma labels can never slide underneath it on narrower desktops. */
  --compact-nav-left: max(calc(50vw - 400px), calc(clamp(82px, 6.5vw, 125px) + 252px));
}
body.nav-is-condensed .site-nav-links .nav-link:nth-child(1) { left: var(--compact-nav-left); }
body.nav-is-condensed .site-nav-links .nav-link:nth-child(2) { left: calc(var(--compact-nav-left) + 104px); }
body.nav-is-condensed .site-nav-links .nav-link:nth-child(3) { left: calc(var(--compact-nav-left) + 358px); }
body.nav-is-condensed .site-nav-links .nav-link:nth-child(4) { left: calc(var(--compact-nav-left) + 537px); }
body.nav-is-condensed .site-nav-links .nav-link:nth-child(5) { left: calc(var(--compact-nav-left) + 665px); }

/* In compact mode the same menu remains aligned to the active link and is
   scaled down with the sticky header rather than becoming a second design. */
body.nav-is-condensed .nav-mega {
  top: var(--nav-compact-height);
  width: 820px;
  min-height: 220px;
  padding: 40px 48px;
  border-radius: 0 0 16px 16px;
  grid-template-columns: 190px 1px minmax(0, 1fr);
  column-gap: 36px;
}

body.nav-is-condensed .nav-mega-pointer {
  top: -14px;
  left: var(--pointer-center, 36px);
  border-left-width: 18px;
  border-right-width: 18px;
  border-bottom-width: 16px;
}

body.nav-is-condensed .nav-mega-title { font-size: 28px; }
body.nav-is-condensed .nav-mega-divider { min-height: 144px; }
body.nav-is-condensed .nav-mega-links { gap: 16px; }
body.nav-is-condensed .nav-mega-link { font-size: 26px; }

@media (max-width: 800px) {
  .site-nav { height: 72px; left: 0; width: 100vw; transform: none; }
  .site-nav-inner { transform: scale(.5); }
  body.nav-is-condensed .site-nav { height: 72px; }
  body.nav-is-condensed .site-nav-inner { transform: scale(.5); }
  .site-nav-links { display: none; }
}

/* Hero: preserve the Figma overlap at the diagonal transition. */
#top { z-index: 1; }
#top + .image {
  left: -13px !important;
  width: 1933px !important;
  z-index: 2;
  pointer-events: none;
}
.mid-bg { z-index: 0 !important; }

/* Mission uses the compact two-column geometry from the current Frame. */
#applications > .image {
  left: 1154px !important;
  top: 1000px !important;
  width: 543px !important;
  height: 311px !important;
}

#mission-title {
  left: 208px !important;
  top: 975px !important;
}

.mission-copy {
  left: 208px !important;
  top: 1034px !important;
  width: 910px !important;
  height: 277px !important;
}

#applications .more-link {
  left: 204px !important;
  top: 1340px !important;
}

/* Product grid: retain the original source layering, with the latest vertical rhythm. */
#products > :nth-child(6) { left: 111px !important; top: 1901px !important; }
#products > :nth-child(7) { left: 105px !important; top: 1863px !important; }
#products > :nth-child(8) { left: 111px !important; top: 1925px !important; }
#products > :nth-child(9) { left: 647px !important; top: 2069px !important; }
#products > :nth-child(10) { left: 1266px !important; top: 1527px !important; }
#products > :nth-child(11) { left: 1302px !important; top: 1560px !important; }
#products > :nth-child(12) { left: 1302px !important; top: 1701px !important; }
#products > :nth-child(13) { left: 1695px !important; top: 2036px !important; }
#products > :nth-child(14) { left: 1038px !important; top: 2236px !important; }
#products > :nth-child(15) { left: 81px !important; top: 2236px !important; }
#products > :nth-child(16) { left: -37px !important; top: 2201px !important; }
#products > :nth-child(17) { left: 371px !important; top: 2236px !important; }
#products > :nth-child(18) { left: 393px !important; top: 2273px !important; }
#products > :nth-child(19) { left: 393px !important; top: 2359px !important; }
#products > :nth-child(20) { left: 71px !important; top: 2527px !important; }
#products > :nth-child(21) { left: 484px !important; top: 2527px !important; }
#products > :nth-child(22) { left: 522px !important; top: 2544px !important; }
#products > :nth-child(23) { left: 792px !important; top: 2713px !important; }
#products > :nth-child(24) { left: 1267px !important; top: 2527px !important; }
#products > :nth-child(25) { left: 1287px !important; top: 2538px !important; }
#products > :nth-child(26) { left: 1292px !important; top: 2582px !important; }
#products > :nth-child(27) { left: 1292px !important; top: 2606px !important; }
#products > :nth-child(28) { left: 1709px !important; top: 2744px !important; }

/* Figma keeps this CTA in the lower-right corner of the aquaculture tile. */
#products > :nth-child(28).learn { font-size: 24px !important; line-height: 28px !important; }
#products > :nth-child(29) { left: 92px !important; top: 2934px !important; }
#products > :nth-child(30) { left: 1054px !important; top: 2935px !important; }
#products > :nth-child(31) { left: 1620px !important; top: 2934px !important; }
#products > :nth-child(33) { left: 127px !important; top: 3295.5px !important; }
#products > :nth-child(34) { left: 152px !important; top: 3312px !important; }
#products > :nth-child(35) { left: 156px !important; top: 3354px !important; }
#products > :nth-child(36) { left: 156px !important; top: 3374px !important; }
#products > :nth-child(37) { left: 570px !important; top: 3486px !important; }
#products > :nth-child(38) { left: 888px !important; top: 2800px !important; width: 860px !important; height: 777px !important; }
#products > :nth-child(39) { left: 1651px !important; top: 3351px !important; }

/* News cards are four equal editorial modules in the updated design. */
#service > :nth-child(1) { left: 152px !important; top: 3682px !important; }
#service > :nth-child(2) { left: 152px !important; top: 3730px !important; }

/* The lower frame settles onto the latest Figma anchors. */
#discover > :nth-child(1) { left: 152px !important; top: 4670px !important; }
#discover > :nth-child(2) { left: 152px !important; top: 4743px !important; }
#discover > :nth-child(3) { left: 99px !important; top: 4791px !important; width: 560px !important; height: 988px !important; }
#discover > article:nth-of-type(1) > .image { left: 722px !important; top: 4791px !important; }
#discover > article:nth-of-type(1) > .discover-panel { left: 721px !important; top: 5107px !important; }
#discover > article:nth-of-type(1) > .discover-title { left: 739px !important; top: 5123px !important; }
#discover > article:nth-of-type(1) > .discover-copy { left: 739px !important; top: 5167px !important; }
#discover > article:nth-of-type(1) > .discover-more { left: 1109px !important; top: 5232px !important; }
#discover > article:nth-of-type(2) > .image { left: 1330px !important; top: 4791px !important; }
#discover > article:nth-of-type(2) > .discover-panel { left: 1330px !important; top: 5107px !important; }
#discover > article:nth-of-type(2) > .discover-title { left: 1353px !important; top: 5123px !important; }
#discover > article:nth-of-type(2) > .discover-copy { left: 1354px !important; top: 5162px !important; }
#discover > article:nth-of-type(2) > .discover-more { left: 1718px !important; top: 5231px !important; }
#discover > article:nth-of-type(3) > .image { left: 721px !important; top: 5295px !important; }
#discover > article:nth-of-type(3) > .discover-panel { left: 720px !important; top: 5611px !important; }
#discover > article:nth-of-type(3) > .discover-title { left: 752px !important; top: 5637px !important; }
#discover > article:nth-of-type(3) > .discover-copy { left: 752px !important; top: 5681px !important; }
#discover > article:nth-of-type(3) > .discover-more { left: 1109px !important; top: 5733px !important; }
#discover > article:nth-of-type(4) > .image { left: 1331px !important; top: 5295px !important; }
#discover > article:nth-of-type(4) > .discover-panel { left: 1331px !important; top: 5615px !important; }
#discover > article:nth-of-type(4) > .discover-title { left: 1359px !important; top: 5637px !important; }
#discover > article:nth-of-type(4) > .discover-copy { left: 1359px !important; top: 5681px !important; }
#discover > article:nth-of-type(4) > .discover-more { left: 1718px !important; top: 5733px !important; }
#discover > .discover-label-bg { z-index: 7; }
#discover > .discover-label-bg:nth-last-child(4) { left: 1092px !important; top: 5227px !important; }
#discover > .discover-label-bg:nth-last-child(3) { left: 1701px !important; top: 5227px !important; }
#discover > .discover-label-bg:nth-last-child(2) { left: 1092px !important; top: 5729px !important; }
#discover > .discover-label-bg:nth-last-child(1) { left: 1701px !important; top: 5729px !important; }

/* Contact is the compact, right-aligned CTA strip in the current source. */
#contact > :nth-child(1) { left: 271px !important; top: 5910px !important; width: 1414px !important; height: 573px !important; }
#contact > :nth-child(2) { left: 293px !important; top: 5955px !important; width: 820px !important; height: 484px !important; }
#contact > :nth-child(3) { left: 1132px !important; top: 6058px !important; }
#contact > :nth-child(4) { left: 1132px !important; top: 6107px !important; width: 677px !important; height: 139px !important; }
#contact > :nth-child(5) { left: 1132px !important; top: 6218px !important; width: 549px !important; height: 145px !important; }
#contact > :nth-child(6) { left: 1311px !important; top: 6442px !important; width: 228px !important; height: 80px !important; }
.contact-image { left: 0 !important; top: 0 !important; width: 820px !important; height: 484px !important; }

footer > .image:first-child {
  top: 6647px !important;
  height: 712.5px !important;
  background: #f0f0f0 !important;
  clip-path: polygon(0 8%, 100% 20%, 100% 100%, 0 100%);
}
footer > .image:first-child img { display:none !important; }

footer > .footer-heading:nth-of-type(1) { left:102.5px !important; top:6882px !important; font-size:27.5px; line-height:34.375px; }
footer > .footer-heading:nth-of-type(2) { left:473.75px !important; top:6882px !important; width:440px !important; font-size:27.5px; line-height:34.375px; }
footer .footer-link { font-size:20px !important; line-height:31px !important; }
footer .footer-link:nth-of-type(1) { left:102.5px !important; top:6941px !important; }
footer .footer-link:nth-of-type(2) { left:102.5px !important; top:6978px !important; }
footer .footer-link:nth-of-type(3) { left:102.5px !important; top:7015px !important; }
footer .footer-link:nth-of-type(4) { left:102.5px !important; top:7052px !important; }
footer .footer-link:nth-of-type(5) { left:102.5px !important; top:7089px !important; }
footer .footer-link:nth-of-type(6) { left:473.75px !important; top:6978px !important; width:440px !important; }
footer .footer-link:nth-of-type(7) { left:473.75px !important; top:7046px !important; width:440px !important; }
footer > a[aria-label="Back to top"] { left:1380px !important; top:6917px !important; width:425px !important; height:109px !important; }
footer .socials .click { top:7081.5px !important; width:30px !important; height:30px !important; }
footer .socials .click:nth-child(1) { left:1550px !important; }
footer .socials .click:nth-child(2) { left:1606.25px !important; }
footer .socials .click:nth-child(3) { left:1662.5px !important; }
footer .socials .click:nth-child(4) { left:1718.75px !important; }
footer .socials .click:nth-child(5) { left:1775px !important; }
footer .copyright { right:102.5px !important; bottom:42.5px !important; left:102.5px !important; top:auto !important; width:auto !important; height:auto !important; padding-top:21.25px; border-top:1px solid #8d949c; font-size:16.25px; }
footer > .image:last-child { display:none !important; }

/* Match the shared internal-page footer: chevrons are part of the link text,
   rather than a separately positioned Home-only SVG. */
footer .footer-link::before { display: none !important; }

/* Homepage Frame (2:3) — final, direct Figma anchors.  These rules replace
   the interim layout from earlier iterations and keep the original DOM and
   interactions intact. */
#top + .image {
  left: 0 !important;
  width: 1920px !important;
}
.hero-copy-panel,
.hero-accent { display: none !important; }
.figma-page > .learn { display: none !important; }
.mid-bg {
  left: -1px !important;
  top: 917px !important;
  width: 1921px !important;
  height: 2623px !important;
}

#products > :nth-child(1) { left: 644px !important; top: 1409px !important; width: 690px !important; }
#products > :nth-child(2) { left: 285px !important; top: 1539px !important; width: 756px !important; height: 554px !important; }
#products > :nth-child(3),
#products > :nth-child(4),
#products > :nth-child(6) { display: none !important; }
#products > :nth-child(5) { left: 285px !important; top: 1870px !important; width: 704px !important; height: 257px !important; }
#products > :nth-child(7) { left: 319px !important; top: 1887px !important; }
#products > :nth-child(8) { left: 318px !important; top: 1940px !important; }
#products > :nth-child(9) { left: 858px !important; top: 2090px !important; }

/* Systems card beside the air-knives feature. */
#products > :nth-child(10) { left: 1006px !important; top: 1539px !important; width: 716px !important; height: 585px !important; }
#products > :nth-child(11) { left: 1169px !important; top: 1688px !important; }
#products > :nth-child(12) { left: 1169px !important; top: 1761px !important; }
#products > :nth-child(13) { left: 1579px !important; top: 2088px !important; }

/* Energy, aquaculture and wastewater modules use the latest Frame rhythm. */
#products > :nth-child(14) { left: 1038px !important; top: 2236px !important; }
#products > :nth-child(15) { left: 81px !important; top: 2236px !important; }
#products > :nth-child(16) { left: -37px !important; top: 2201px !important; }
#products > :nth-child(17) { left: 371px !important; top: 2236px !important; }
#products > :nth-child(18) { left: 393px !important; top: 2273px !important; }
#products > :nth-child(19) { left: 393px !important; top: 2359px !important; }
#products > :nth-child(20) { left: 71px !important; top: 2527px !important; }
#products > :nth-child(21) { left: 484px !important; top: 2527px !important; }
#products > :nth-child(22) { left: 522px !important; top: 2544px !important; }
#products > :nth-child(23) { left: 792px !important; top: 2713px !important; }
#products > :nth-child(24) { left: 1267px !important; top: 2527px !important; width: 578px !important; height: 253px !important; }
#products > :nth-child(25) { left: 1287px !important; top: 2538px !important; }
#products > :nth-child(26) { display: none !important; }
#products > :nth-child(27) { left: 1292px !important; top: 2606px !important; }
#products > :nth-child(28) { left: 1709px !important; top: 2744px !important; }
#products > :nth-child(29) { left: 283px !important; top: 2907px !important; width: 756px !important; height: 556px !important; }
#products > :nth-child(30) { left: 1090px !important; top: 2909px !important; width: 255px !important; height: 557px !important; }
#products > :nth-child(31) { display: none !important; }
#products > :nth-child(32) { left: 331px !important; top: 2798px !important; width: 1179px !important; height: 586px !important; }
#products > :nth-child(33) { left: 318px !important; top: 3268px !important; width: 578px !important; }
#products > :nth-child(34) { left: 343px !important; top: 3285px !important; }
#products > :nth-child(35) { display: none !important; }
#products > :nth-child(36) { left: 347px !important; top: 3347px !important; }
#products > :nth-child(37) { left: 767px !important; top: 3461px !important; }
#products > :nth-child(38) { left: 1254px !important; top: 2907px !important; width: 625px !important; height: 565px !important; }
#products > :nth-child(39) { left: 1101px !important; top: 3324px !important; }

/* Discover is one feature panel plus three evenly aligned cards in the
   latest composition; the leader content lives in the wide right feature. */
#discover > :nth-child(3) { left: 99px !important; top: 4791px !important; width: 522px !important; height: 526px !important; }
#discover > article:nth-of-type(1) > .image { left: 100px !important; top: 5350px !important; }
#discover > article:nth-of-type(1) > .discover-panel { left: 99px !important; top: 5666px !important; }
#discover > article:nth-of-type(1) > .discover-title { left: 117px !important; top: 5682px !important; }
#discover > article:nth-of-type(1) > .discover-copy { left: 117px !important; top: 5726px !important; }
#discover > article:nth-of-type(1) > .discover-more { left: 487px !important; top: 5791px !important; }
#discover > article:nth-of-type(2) > .image { left: 680px !important; top: 5350px !important; }
#discover > article:nth-of-type(2) > .discover-panel { left: 680px !important; top: 5666px !important; }
#discover > article:nth-of-type(2) > .discover-title { left: 703px !important; top: 5682px !important; }
#discover > article:nth-of-type(2) > .discover-copy { left: 721px !important; top: 5719px !important; }
#discover > article:nth-of-type(2) > .discover-more { left: 1070px !important; top: 5790px !important; }
#discover > article:nth-of-type(3) > .image { left: 1242px !important; top: 5348px !important; }
#discover > article:nth-of-type(3) > .discover-panel { left: 1241px !important; top: 5664px !important; }
#discover > article:nth-of-type(3) > .discover-title { left: 1273px !important; top: 5690px !important; }
#discover > article:nth-of-type(3) > .discover-copy { left: 1273px !important; top: 5734px !important; }
#discover > article:nth-of-type(3) > .discover-more { left: 1633px !important; top: 5791px !important; }
#discover > article:nth-of-type(4) > .image { left: 730px !important; top: 4791px !important; width: 1032px !important; height: 526px !important; }
#discover > article:nth-of-type(4) > .discover-panel { left: 682px !important; top: 4791px !important; width: 336px !important; height: 526px !important; background: linear-gradient(-90deg, transparent 0%, rgba(115,115,115,.5) 100%) !important; }
#discover > article:nth-of-type(4) > .discover-title { left: 729px !important; top: 4838px !important; }
#discover > article:nth-of-type(4) > .discover-copy { left: 729px !important; top: 4982px !important; }
#discover > article:nth-of-type(4) > .discover-more { left: 851px !important; top: 5275px !important; }
#discover > .discover-label-bg { display: none !important; }

#discover > article:nth-of-type(4) > .discover-leader-link {
  left: 682px !important;
  top: 4791px !important;
  width: 1080px !important;
  height: 526px !important;
  z-index: 8;
  background: rgba(0,110,173,0);
  box-shadow: inset 0 0 0 0 rgba(0,110,173,0), 0 0 0 rgba(20,49,75,0);
  cursor: pointer;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}
#discover > article:nth-of-type(4) > .discover-leader-link:hover {
  background: rgba(0,110,173,.12);
  box-shadow: inset 0 0 0 4px #006ead, 0 14px 34px rgba(20,49,75,.18);
}
#discover > article:nth-of-type(4) > .discover-leader-link:focus-visible {
  outline: none;
  background: rgba(0,110,173,.12);
  box-shadow: inset 0 0 0 4px #006ead, 0 14px 34px rgba(20,49,75,.18);
}

/* Exact rules from the current 首页 Frame 2:3 export. */
.hero-learn,
.hero-copy-panel,
.hero-accent { display: none !important; }

.hero-overlay {
  left: 0 !important;
  width: 1920px !important;
  height: 751px !important;
  opacity: 1 !important;
  background: linear-gradient(90deg, rgba(88, 88, 88, .5) 38.94%, rgba(255, 255, 255, 0) 100%);
}
.hero-overlay img,
.mid-bg img { display: none !important; }
.hero-title,
.hero-sub {
  font-family: "Alfa Slab One", serif !important;
  font-weight: 400 !important;
}
.hero-title { line-height: 131px !important; }
.hero-sub { line-height: 44px !important; }
.mid-bg { background: rgba(217, 217, 217, .5) !important; }

#products > :nth-child(9),
#products > :nth-child(28),
#products > :nth-child(37) {
  width: 137px !important;
  height: 30px !important;
  padding: 2px 12px !important;
  background: #006ead !important;
  font-size: 18px !important;
  line-height: 22px !important;
}
#products > :nth-child(9) { left: 845px !important; top: 2088px !important; }

/* Systems is text-only in the Frame, not the inherited black image card. */
#products > :nth-child(10),
#products > :nth-child(13),
#products > :nth-child(15),
#products > :nth-child(16),
#products > :nth-child(17),
#products > :nth-child(20),
#products > :nth-child(21),
#products > :nth-child(23) { display: none !important; }
#products > :nth-child(11),
#products > :nth-child(12),
#products > :nth-child(18),
#products > :nth-child(19),
#products > :nth-child(22) { color: #213345 !important; }
#products > :nth-child(11) { left: 1169px !important; top: 1688px !important; }
#products > :nth-child(12) { left: 1169px !important; top: 1761px !important; }

#products > :nth-child(14) { left: 1006px !important; top: 2206px !important; width: 716px !important; height: 585px !important; }
#products > :nth-child(18) { left: 398px !important; top: 2454px !important; }
#products > :nth-child(19) { left: 398px !important; top: 2537px !important; }
#products > :nth-child(22) { left: 402px !important; top: 2380px !important; }
#products > :nth-child(24) { left: 1144px !important; top: 2561px !important; }
#products > :nth-child(25) { left: 1164px !important; top: 2572px !important; }
#products > :nth-child(27) { left: 1169px !important; top: 2640px !important; }
#products > :nth-child(28) { left: 1579px !important; top: 2775px !important; }
#products > :nth-child(37) { left: 755px !important; top: 3457px !important; }

#contact > :nth-child(2),
.contact-image { border-radius: 53px !important; }

/* Current Frame asset crops and CTA treatment.  Keep the blue CTA as a
   single line of text: the legacy exported arrow glyph is intentionally
   suppressed rather than allowed to wrap below the button. */
#top > img {
  height: 156.11% !important;
  width: 108.48% !important;
  left: -3.98% !important;
  top: -32.79% !important;
}

a.learn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

a.learn > span:not([data-cms-text-wrapper="1"]) { display: none !important; }

/* The narrow middle product is the vertical detail tile from the updated
   Frame, not a second instance of the large product cut-out. */
#products > :nth-child(30) img {
  content: url("assets/figma/water-edge.webp");
  height: 100% !important;
  width: 300.34% !important;
  left: -76.19% !important;
  top: -.05% !important;
}

#products > :nth-child(30).darken::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .16), rgba(236, 236, 236, .18) 90.87%) !important;
}

/* The wide leader portrait is deliberately cropped to leave a readable
   text column at left, matching the Figma composition. */
#discover > article:nth-of-type(4) > .image img {
  height: 110.24% !important;
  width: 84.55% !important;
  left: 17.25% !important;
  top: 0 !important;
  object-fit: fill !important;
}

/* Small, restrained navigation in both header states. */
.site-nav-links .nav-link {
  font-size: 30px;
  line-height: 38px;
  top: 67px;
}

.nav-mega {
  min-height: calc(252px * var(--page-scale));
  padding: calc(48px * var(--page-scale)) calc(48px * var(--page-scale));
  grid-template-columns: minmax(160px, var(--menu-title-width)) 1px minmax(0, 1fr);
  column-gap: calc(34px * var(--page-scale));
}

.nav-mega-title { font-size: calc(32px * var(--page-scale)); }
.nav-mega-divider { min-height: calc(170px * var(--page-scale)); }
.nav-mega-links { gap: calc(18px * var(--page-scale)); }
.nav-mega-link { font-size: calc(30px * var(--page-scale)); }

body.nav-is-condensed .site-nav-links .nav-link {
  top: 22px;
  height: 25px;
  font-size: 20px;
  line-height: 25px;
}

body.nav-is-condensed .site-nav-links .nav-link:nth-child(2) { left: calc(var(--compact-nav-left) + 94px); }
body.nav-is-condensed .site-nav-links .nav-link:nth-child(3) { left: calc(var(--compact-nav-left) + 320px); }
body.nav-is-condensed .site-nav-links .nav-link:nth-child(4) { left: calc(var(--compact-nav-left) + 480px); }
body.nav-is-condensed .site-nav-links .nav-link:nth-child(5) { left: calc(var(--compact-nav-left) + 592px); }

/* News & Events carousel: three cards remain visible while the fourth enters
   from the right. Controls sit outside the clipped track. */
.news-carousel {
  position:absolute;
  z-index:8;
  left:40px;
  top:3786px;
  width:1840px;
  height:884px;
}
.news-carousel__viewport {
  position:absolute;
  left:110px;
  top:0;
  width:1620px;
  height:884px;
  overflow:hidden;
}
.news-carousel__track {
  display:flex;
  width:max-content;
  gap:30px;
  transform:translate3d(0,0,0);
  transition:transform 520ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.news-carousel__card {
  flex:0 0 520px;
  display:flex;
  height:884px;
  flex-direction:column;
  overflow:hidden;
  border-radius:36px;
  color:#213345;
  background:#d9d9d9;
  text-decoration:none;
}
.figma-page #service > .news-carousel .news-carousel__card > img {
  position:static !important;
  inset:auto !important;
  display:block;
  width:100% !important;
  height:628px !important;
  max-width:100% !important;
  object-fit:cover !important;
}
.news-carousel__body {
  display:flex;
  min-height:256px;
  padding:42px 34px 28px;
  flex-direction:column;
  gap:14px;
}
.news-carousel__body strong {
  font-size:25px;
  line-height:31px;
}
.news-carousel__body > span {
  font-size:18px;
  line-height:25px;
}
.news-carousel__card:hover .news-carousel__body strong,
.news-carousel__card:focus-visible .news-carousel__body strong { color:#0075b9; }
.news-carousel__card:focus-visible { outline:4px solid #0075b9; outline-offset:-4px; }
.news-carousel__button {
  position:absolute;
  z-index:3;
  top:382px;
  width:72px;
  height:72px;
  padding:0 0 7px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:#365faa;
  box-shadow:0 10px 24px rgba(26,47,77,.18);
  font:500 54px/1 Inter,Arial,sans-serif;
  cursor:pointer;
  transition:background-color 160ms ease,opacity 160ms ease,transform 160ms ease;
}
.news-carousel__button:hover:not(:disabled),
.news-carousel__button:focus-visible:not(:disabled) { background:#0075b9; transform:scale(1.06); outline:none; }
.news-carousel__button:disabled { opacity:.32; cursor:default; }
.news-carousel__button--prev { left:12px; }
.news-carousel__button--next { right:12px; }

@media (prefers-reduced-motion: reduce) {
  .news-carousel__track { transition-duration:1ms; }
}

body.nav-is-condensed .nav-mega {
  min-height: 190px;
  padding: 32px 38px;
  grid-template-columns: 160px 1px minmax(0, 1fr);
  column-gap: 28px;
}

body.nav-is-condensed .nav-mega-title { font-size: 24px; }
body.nav-is-condensed .nav-mega-divider { min-height: 126px; }
body.nav-is-condensed .nav-mega-links { gap: 13px; }
body.nav-is-condensed .nav-mega-link { font-size: 22px; }

/* Product CTAs use one shared Figma-scale type treatment. */
.aqua-cta-panel {
  background: #003F64 !important;
}

.aqua-cta-panel img {
  opacity: 0 !important;
}

#products > :nth-child(9),
#products > :nth-child(28),
#products > :nth-child(37) {
  width: 137px !important;
  height: 30px !important;
  padding: 2px 12px !important;
  font-size: 18px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
}

#products > a.learn {
  font-size: 18px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
}

/* The Aquaculture CTA is one step smaller than the other product CTAs. */
#products > :nth-child(28).learn {
  font-size: 18px !important;
  line-height: 22px !important;
}

/* Align the three lower Discover cards to one shared text grid. */
#discover > article:nth-of-type(1) > .discover-title { left: 119px !important; top: 5682px !important; }
#discover > article:nth-of-type(1) > .discover-copy { left: 119px !important; top: 5726px !important; }
#discover > article:nth-of-type(2) > .discover-title { left: 700px !important; top: 5682px !important; }
#discover > article:nth-of-type(2) > .discover-copy { left: 700px !important; top: 5726px !important; }
#discover > article:nth-of-type(3) > .discover-title { left: 1261px !important; top: 5682px !important; }
#discover > article:nth-of-type(3) > .discover-copy { left: 1261px !important; top: 5726px !important; }

/* Leader card: let the photo run behind the full gradient so the transition
   is continuous, rather than exposing a hard vertical edge. */
#discover > article:nth-of-type(4) > .image img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  object-fit: cover !important;
  object-position: 53% 30% !important;
}

#discover > article:nth-of-type(4) > .image {
  left: 682px !important;
  width: 1080px !important;
}

#discover > article:nth-of-type(4) > .discover-panel {
  left: 682px !important;
  width: 430px !important;
  background: linear-gradient(90deg, rgba(115, 115, 115, .52) 0%, rgba(115, 115, 115, .30) 48%, rgba(115, 115, 115, 0) 100%) !important;
}

#discover > article:nth-of-type(4) > .discover-more {
  left: 764px !important;
  color: #213345 !important;
}

/* Preserve the title/copy hierarchy without the lower body entering the
   two-line heading's text box. */
#contact > :nth-child(4) {
  width: 500px !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
}

#contact > :nth-child(5) {
  top: 6268px !important;
  width: 500px !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
}

#contact > :nth-child(6) {
  top: 6430px !important;
  height: 48px !important;
  font-size: 24px !important;
  line-height: 28px !important;
}


/* V18: unify the three large home product panels only; preserve the small Learn More CTA color. */
#products > .product-copy-panel,
#products > :nth-child(24),
#products > .aqua-cta-panel {
  background: #003F64 !important;
}

/* AK product image: retain the supplied image's native aspect ratio and show
   the complete frame. The paired image/text bounds are centred on x=960. */
#products > .ak-product-image img {
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
#products > .systems-title,
#products > .systems-copy {
  left: 1133px !important;
}

/* Wastewater uses the same two-column rhythm as the product rows above:
   one large application image on the left and a text-only benefit on the right. */
#products > .wastewater-detail-image,
#products > .wastewater-edge-image,
#products > .wastewater-overlay,
#products > .wastewater-product-image {
  display: none !important;
}
#products > .wastewater-main-image img {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
}
#products > .wastewater-cta-panel {
  left: 283px !important;
  height: 253px !important;
}
#products > .wastewater-cta-title {
  left: 308px !important;
}
#products > .wastewater-cta-copy {
  left: 312px !important;
}
#products > .wastewater-cta-button {
  left: 716px !important;
  top: 3484px !important;
}
#products > .wastewater-mode-title {
  display: block !important;
  left: 1133px !important;
  top: 3040px !important;
  width: 502px !important;
  height: auto !important;
  color: #213345 !important;
  font-size: 40px !important;
  line-height: 1.2 !important;
}
#products > .wastewater-mode-copy {
  display: block !important;
  left: 1133px !important;
  top: 3120px !important;
  width: 502px !important;
  height: auto !important;
  color: #213345 !important;
  font-size: 32px !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
}