<!-- ============================================
     PROJECT: Arnett Valves
     SECTION: Six 16:9 stages (line + five series)
     VERSION: C7.1
     CHANGES (2026-09-30, C7.1 round):
       1. The form takes the page's type and palette. Cognito ships Arial and
          Open Sans Condensed with #333 field text; the page runs Outfit with
          pure black, a hairline rule colour and a teal keyboard focus ring.
       2. The postal address is gone, and so are the styles that existed only
          to hold it.
       3. The hand-built form's leftover stylesheet is gone: .form-grid, .field,
          .field-wide, .field label, .field input, .field textarea, their focus
          rules and the mobile overrides. Nothing used them any more.
       4. The submit button is centred. Cognito puts it in a flex row aligned
          to the start; centring the row puts the button on the form's own
          vertical axis, where the centred footer text already sat.
       5. The Cognito badge stays. Their own support page says branding comes
          off by upgrading the organisation to Pro, Team or Enterprise, so a
          stylesheet is the wrong lever for it.
     CHANGES (2026-09-30, C7.0 round):
       1. The contact form sends. The hand-built RFQ form had no action and no
          handler, so it could not deliver anything. It is replaced by the
          Cognito Forms embed (key tNCHyn7-dUO9MKnc_5WbZg, form 1).
       2. The compensating styles that arrived with the embed are kept, and the
          two rules that came unscoped (.el-input__inner, .el-textarea__inner)
          are scoped to the card. Same look inside the card, and the Element UI
          class names cannot leak into the rest of the CMS.
       3. The postal address lived only in the old form footer. It was moved
          over at the time and removed again in C7.1, at Wojtek's request.
       4. Verified against a local server: the embed injects 4 fields (Full
          Name, Phone, Email, Message), a Send request button, 44 cog nodes.
          Applied: inputs radius 10px padding 13px 15px, submit radius 30px
          padding 14px 26px, fields 16px apart. No rule leaks outside the card.
     CHANGES (2026-09-30, C6.2 round - mobile):
       1. On the phone the filter bar sits directly above the series list, so
          the criteria and the matching series read as one unit. It is a
          sibling of the hero in the markup, so a small script moves the node
          at the phone breakpoint and puts it back on any other width.
          Measured order at 390px: title, graphic, stat cards, filter bar,
          series list, choose by duty.
       2. The landing point after a pick follows the bar. On the phone the bar
          is the target (the mobile nav is not sticky, nothing overlaps it),
          on desktop the top of the section stays the target. The choice asks
          the DOM, not the viewport width, so the two cannot drift apart.
       3. Measured after a pick at 390px: bar at the top of the viewport, the
          series list 268px below it, head reading "Matching series" with
          three matches.
     CHANGES (2026-09-30, C6.1 round - mobile):
       1. The video band carries a second cut for the phone (Vimeo 1231562892,
          source 900x496) beside the desktop one (1226975754, source 8448x2640
          which is 3.2:1). One iframe, the source picked at load from a
          data-src-mobile attribute, swapped again if the screen crosses the
          breakpoint. The band takes 900/496 below 768px.
       2. Measured: desktop 1413x442 at ratio 3.200, tablet 813x457 at 16:9,
          phone 350x193 at ratio 1.815 with the mobile id. The player reports
          the phone cut as 640x352 (1.8182), a 0.2% difference from the source
          box, which is under a pixel at phone width.
     CHANGES (2026-09-30, C6.0 round - mobile):
       1. The header section keeps its graphic on mobile. A desktop rule
          (display: none on .left, three classes) outranked the mobile override
          (one class), so the block sat at zero height.
       2. Reading order in every section: title card, product graphic, data
          cards, then the two action cards side by side. The series sections
          had the graphic first.
       3. The floating series dock is hidden on mobile.
       4. The stacked layout uses the dedicated square art in images/mobile/:
          the header, six series frames and the seven applications slides.
     CHANGES (2026-09-22, C5.3 round):
       1. The data cards of the six series sections arrive in a soft sequence:
          title first, the four stat cards behind it, the rest of the row
          together. 420ms per card, 55ms apart, and the stagger is capped at
          220ms so a nine-card section lands in about 640ms.
       2. Measured on the live page: cards start at 147 / 198 / 247 / 298 /
          365ms and the sequence settles at 764ms including the scroll.
          2. Layout shift entries: zero.
       3. Four guards: the hidden state sits behind a `js-reveal` class armed
          before the first paint (no script, no cards hidden), only opacity and
          transform animate, one reveal per section, and reduced-motion
          preferences skip the whole thing. Panel one stays out of it.
     CHANGES (2026-09-22, C5.2 round):
       1. The "I need a knife gate valve for" filter joins the sticky bar once
          the main panel scrolls out of view, sitting between the logo and the
          unit toggle. Picking any option re-runs the filter and lands at the
          very top of the page, where the full filter panel and the results
          are both clear in view. (First cut stopped at panel-one, which left
          the filter panel behind the sticky bar and hid the compact copy too,
          so the visitor saw no filter at all.)
       2. Both copies of the sentence stay in step: a change in either one
          updates the other, the reset button clears both, and the unit toggle
          relabels both through a data-role hook.
       3. The compact bar is an in-flow child between the logo and the buttons,
          so it uses the whole middle gap and shrinks instead of pushing them.
          It runs clean from 1360px up and steps aside below that, leaving the
          job to the main panel at the top of the page.
     CHANGES (2026-09-22, C5.1 round):
       1. Series background sliders pause 4 s between frames (was 3 s). The
          Applications slideshow keeps its own 3 s cadence; the two constants
          carry separate names (SLIDE_MS / AUTO_MS) so neither can be changed
          by accident.
     CHANGES (2026-09-22, C5.0 round):
       1. Background slider in every series section: two frames, soft 3 s
          cross-fade (flux/halo/apex/core/omni/fx_series_01-02.jpg).
       2. Jump links repaired: section ids follow the new series names
          (flux, halo, apex, core, omni), every row, dock and menu link
          updated, SERIES data carries an explicit anchor field, and a click
          handler performs the scroll so a host CMS router cannot swallow it.
       3. The dropdown menu still showed the retired codes (SA, XA, XR, SR,
          SU) - now FLUX, HALO, APEX, CORE, OMNI.
       4. Filter panel "I need a knife gate valve for..." scaled +30%
          (tablet step keeps its own size and wraps instead of overflowing).
       5. Floating dock scaled +20%.
       6. Helper scripts moved to scripts/, the root holds production files.
     CHANGES (2026-09-15, QC round):
       1. Unit toggle now covers EVERYTHING: ALL SERIES ranges, model rows
          (SAS 150 psi -> 10 bar etc.), stat notes, filter selects,
          paint() rebuilt with guards (old paint crashed on missing ids).
       2. Sizes metric: two-line "from DN50 / to DN1200" (from/to at 0.75em).
       3. Hero: c-duty and c-platform swapped.
       4. Choose by duty text +25%.
       5. Choose by duty series names styled like ALL SERIES, no teal bg.
       6. Choose by duty rows are links to #flux..#omni.
       7. Floating dock centered at bottom.
     ============================================ -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
/* ================================================
   DESIGN TOKENS
   ================================================ */
#arnett-valves {
  --white: #FFFFFF;
  --black: #000000;
  --teal: #00F5D3;
  --moon: #F0F7F6;

  --card: rgba(255, 255, 255, 0.88);
  --track: rgba(0, 0, 0, 0.08);
  --rule: rgba(0, 0, 0, 0.10);

  --font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-stage: 22px;
  --r-card: 16px;
  --r-pill: 100px;

  --gap: 14px;
  --stage-pad: 28px;
  --max: 1500px;
}


/* Accessibility & Guidelines */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  #arnett-valves *, #arnett-valves *::before, #arnett-valves *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
#arnett-valves .stage {
  scroll-margin-top: 96px;
}
@media (max-width: 1023px) {
  #arnett-valves .stage {
    scroll-margin-top: 76px;
  }
}
#arnett-valves button:focus-visible,
#arnett-valves a:focus-visible,
#arnett-valves select:focus-visible,
#arnett-valves input:focus-visible,
#arnett-valves textarea:focus-visible {
  outline: 2px solid var(--teal) !important;
  outline-offset: 3px !important;
}
#arnett-valves a.cta:hover,
#arnett-valves .btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
#arnett-valves a.cta,
#arnett-valves .btn {
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

/* ================================================
   NAMESPACE RESET
   ================================================ */
#arnett-valves {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--black);
  background: var(--white);
  padding: 0 0 56px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#arnett-valves *, #arnett-valves *::before, #arnett-valves *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#arnett-valves h1, #arnett-valves h2, #arnett-valves h3 {
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.1;
  color: var(--black);
}
#arnett-valves p, #arnett-valves dl, #arnett-valves dt, #arnett-valves dd { margin: 0; }
#arnett-valves a { color: inherit; text-decoration: none; }
#arnett-valves button { font-family: inherit; }
#arnett-valves img { display: block; }

/* ================================================
   SHARED COMPONENTS
   ================================================ */
#arnett-valves .container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}
#arnett-valves .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
#arnett-valves .label {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.01em;
}
#arnett-valves .code-tag {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--teal);
  color: var(--black);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ================================================
   SECTION: NAV
   Dependencies: tokens, container
   ================================================ */
#arnett-valves .nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 18px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--white);
}
#arnett-valves .brand { display: inline-flex; align-items: center; }
#arnett-valves .brand img { height: 34px; width: auto; }

/* C5.2: compact filter in the sticky bar. Absolute, so it takes no layout
   space and cannot squeeze the logo or the buttons; it appears only once the
   main filter panel has scrolled away. */
#arnett-valves .nav-filter {
  /* C5.2c: an in-flow child between the logo and the buttons, so it uses the
     whole middle gap. It shrinks instead of pushing them around. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  transform: translateY(-4px);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 3px 3px 11px;
  border-radius: var(--r-pill);
  background: var(--moon);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
#arnett-valves .nav-filter.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#arnett-valves .nav-filter .nf-lead { font-weight: 500; }
#arnett-valves .nav-filter .nf-word { font-weight: 400; }
#arnett-valves .pick-compact {
  font-size: 0.75rem;
  padding: 4px 21px 4px 9px;
  background-position: right 8px center;
  background-size: 9px;
}

/* The compact bar needs about 690px of clear middle space. Measured: it runs
   clean from 1360px up and starts clipping below that, so it steps aside and
   leaves the job to the main panel, which sits at the top of the page. */
@media (max-width: 1359px) {
  #arnett-valves .nav-filter { display: none; }
}

#arnett-valves .tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--moon);
}
#arnett-valves .tab {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--black);
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
#arnett-valves .tab:hover { background: var(--white); }
#arnett-valves .tab.is-active { background: var(--teal); font-weight: 500; }
#arnett-valves .nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
#arnett-valves .icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--moon);
  border: 0;
  display: grid;
  place-items: center;
  color: var(--black);
  cursor: pointer;
}
#arnett-valves .icon-btn svg { width: 16px; height: 16px; }
#arnett-valves .cta {
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--black);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
}

/* ================================================
   SECTION: STAGE (16:9 render with card blocks)
   Three layouts: cards both sides, cards right, cards left.
   Dependencies: tokens, container
   ================================================ */
#arnett-valves .stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-stage);
  overflow: hidden;
  background: var(--moon) center / cover no-repeat;
  display: flex;
  gap: 30px;
  padding: var(--stage-pad);
  /* C4.13: bottom margin retired; bands separate with a uniform 28px top gap. */
  margin-bottom: 0;
}
/* C4.13: every series stage separates from whatever sits above it with the
   same 28px rhythm as the video and Applications bands. */
#arnett-valves .stage:not(.hero) {
  margin-top: 28px;
}
/* C4.14: the series chapter opens wider - 2x the section rhythm. */
#arnett-valves .series-head {
  margin-top: 56px;
}
#arnett-valves .stage-spacer { flex: 1; min-width: 0; }

/* C5.0: series background slider - two stacked layers, soft 3 s cross-fade.
   The content of the stage is lifted above the image layers. */
#arnett-valves .stage-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#arnett-valves .bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--bg-pos, center);
  opacity: 0;
  transition: opacity 1.1s ease;
}
#arnett-valves .bg-slide.is-active { opacity: 1; }
#arnett-valves .stage > .stage-bg ~ * { position: relative; z-index: 1; }

/* C5.3: soft sequential entrance for the cards of each series section. The
   hidden state lives behind `.js-reveal`, so the page is fully visible when
   that class is absent. Only opacity and transform animate. */
#arnett-valves.js-reveal .stage:not(.hero) .side > .card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
/* The stagger is capped at 220ms: from the fifth card on they travel together,
   so a nine-card section still lands in well under a second. */
#arnett-valves .stage:not(.hero) .side > .card:nth-child(2) { --reveal-delay: 55ms; }
#arnett-valves .stage:not(.hero) .side > .card:nth-child(3) { --reveal-delay: 110ms; }
#arnett-valves .stage:not(.hero) .side > .card:nth-child(4) { --reveal-delay: 165ms; }
#arnett-valves .stage:not(.hero) .side > .card:nth-child(n+5) { --reveal-delay: 220ms; }
/* `transform: none` rather than translateY(0): the landed card keeps no
   transform, so it never becomes a containing block by accident. */
#arnett-valves.js-reveal .stage:not(.hero).is-revealed .side > .card {
  opacity: 1;
  transform: none;
}

/* Card block: two units wide, four tall, so every unit is square */
#arnett-valves .side {
  aspect-ratio: 1 / 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  flex-shrink: 0;
}
/* Series stages: one block, four units wide and four tall */
#arnett-valves .side-wide {
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#arnett-valves .card {
  background: var(--card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: var(--r-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--black);
}

/* Black title unit */
#arnett-valves .c-title {
  background: var(--black);
  color: var(--white);
  justify-content: center;
  padding: 14px 18px;
}
#arnett-valves .c-title h2 {
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
#arnett-valves .c-title .title-meta {
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--white);
  display: flex;
  gap: 8px;
  align-items: center;
}
#arnett-valves .c-title .title-meta .sep { width: 1px; height: 10px; background: var(--white); opacity: 0.45; }
#arnett-valves .c-title .eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

/* Section bar */
#arnett-valves .bar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin-bottom: 12px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--moon);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  padding: 0 10px;
  white-space: nowrap;
}

/* Stat unit */
#arnett-valves .stat { text-align: center; padding: 14px 12px; }
#arnett-valves .stat .bar-head { font-size: 0.75rem; height: 30px; margin-bottom: 0; letter-spacing: 0.05em; }
#arnett-valves .stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#arnett-valves .stat-value {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
#arnett-valves .stat-value small { font-size: 0.55em; font-weight: 400; margin-left: 4px; }
#arnett-valves .stat-value em { font-style: normal; font-weight: 300; margin: 0 2px; }
#arnett-valves .stat-metric { font-size: 0.75rem; font-weight: 400; margin-top: 6px; white-space: nowrap; }
#arnett-valves .stat-note { font-size: 0.625rem; font-weight: 400; margin-top: 8px; line-height: 1.35; }

/* Row list, used for models and series */
#arnett-valves .rows {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
  min-height: 0;
}
#arnett-valves .row {
  display: grid;
  /* C4.20: the code column grows with the longer series names (FLUX/HALO/
     APEX/CORE/OMNI). minmax keeps the desc and range columns intact. */
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto;
  align-items: center;
  /* C4.21: +10px between the model name and the description. */
  gap: 12px 22px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
/* Two rows: code and rating on one line, text across the full width */
#arnett-valves .rows.is-two .row {
  padding: 20px 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "code range" "desc desc";
  align-items: baseline;
  gap: 10px 20px;
}
#arnett-valves .rows.is-two .code { grid-area: code; font-size: 2.125rem; line-height: 1; }
/* C4.20: long model names must not wrap mid-token. */
#arnett-valves .row .code, #arnett-valves .rows.is-two .code { white-space: nowrap; }
#arnett-valves .rows.is-two .range { grid-area: range; font-size: 1.25rem; }
#arnett-valves .rows.is-two .desc { grid-area: desc; font-size: 0.9375rem; }
#arnett-valves .rows.is-two .desc strong { font-size: 1.125rem; margin-bottom: 3px; }

/* One row: a single statement, centred in the card */
#arnett-valves .rows.is-one { justify-content: center; }
#arnett-valves .rows.is-one .row {
  grid-template-columns: 1fr;
  gap: 6px;
  text-align: center;
  padding: 0;
}
#arnett-valves .rows.is-one .code { font-size: 3.5rem; line-height: 1; letter-spacing: -0.03em; }
#arnett-valves .rows.is-one .desc strong { font-size: 1.25rem; }
#arnett-valves .rows.is-one .desc { font-size: 1rem; }
#arnett-valves .rows.is-one .range { text-align: center; font-size: 1.375rem; margin-top: 4px; }
#arnett-valves .row:first-child { border-top: 0; padding-top: 0; }
#arnett-valves .row:last-child { padding-bottom: 0; }
#arnett-valves .row .code { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
#arnett-valves .row .desc {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  min-width: 0;
}
#arnett-valves .row .desc strong { font-weight: 500; display: block; font-size: 0.9375rem; margin-bottom: 1px; }
#arnett-valves .row .range { font-size: 0.9375rem; font-weight: 500; white-space: nowrap; text-align: right; }
#arnett-valves .row .range small { display: block; font-size: 0.75rem; font-weight: 400; }

/* Key-value list */
#arnett-valves .kv {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  gap: 2px;
  min-height: 0;
}
#arnett-valves .kv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
}
#arnett-valves .kv-row .k { font-weight: 300; }
#arnett-valves .kv-row .v { font-weight: 500; text-align: right; white-space: nowrap; }

/* Feature list */
#arnett-valves .feats {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  min-height: 0;
}
#arnett-valves .feat { padding: 7px 0; border-top: 1px solid var(--rule); }
#arnett-valves .feat:first-child { border-top: 0; padding-top: 0; }
#arnett-valves .feat strong { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 2px; }
#arnett-valves .feat span { font-size: 0.875rem; font-weight: 300; line-height: 1.4; }

/* Ask block inside a stage */
#arnett-valves .c-ask {
  background: var(--black);
  color: var(--white);
  justify-content: center;
}
#arnett-valves .c-ask strong { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
#arnett-valves .c-ask .ask-line { font-size: 0.75rem; font-weight: 300; margin-top: 5px; }
#arnett-valves .c-ask .ask-tel {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: var(--black);
  font-size: 0.8125rem;
  font-weight: 600;
  align-self: flex-start;
}

/* Grid placement, cards-both-sides stage (line overview) */
#arnett-valves .g-title { grid-column: 1 / 3; grid-row: 1; }
#arnett-valves .g-press { grid-column: 1; grid-row: 2; }
#arnett-valves .g-f2f   { grid-column: 2; grid-row: 2; }
#arnett-valves .g-duty  { grid-column: 1 / 3; grid-row: 3 / 5; }
#arnett-valves .g-temp  { grid-column: 1; grid-row: 1; }
#arnett-valves .g-size  { grid-column: 2; grid-row: 1; }
#arnett-valves .g-series{ grid-column: 1 / 3; grid-row: 2 / 4; }
#arnett-valves .g-shared{ grid-column: 1 / 3; grid-row: 4; }

/* Grid placement, series stage (4x4) */
#arnett-valves .s-title  { grid-column: 1 / 3; grid-row: 1; }
#arnett-valves .s-press  { grid-column: 3; grid-row: 1; }
#arnett-valves .s-f2f    { grid-column: 4; grid-row: 1; }
#arnett-valves .s-temp   { grid-column: 1; grid-row: 2; }
#arnett-valves .s-size   { grid-column: 2; grid-row: 2; }
#arnett-valves .s-models { grid-column: 3 / 5; grid-row: 2 / 4; }
#arnett-valves .s-feats  { grid-column: 1 / 3; grid-row: 3 / 5; }
#arnett-valves .s-ask    { grid-column: 4; grid-row: 4; }

/* ================================================
   SECTION: PANEL ONE (ported 1:1 from index.html 13.0)
   Filter bar above the stage. Line stage: the render breathes on the left,
   a 5x4 square-unit data grid sits on the right. Below the stage:
   result count, CTA and trust bar. Scoped to .stage.hero so the five
   series stages keep the B layout. Including index.html's JS.
   ================================================ */
#arnett-valves .filterbar { padding: 0 0 21px; text-align: center; }
#arnett-valves .filterbar .sentence { max-width: 100%; }
#arnett-valves .sentence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 21px;
  border-radius: var(--r-pill);
  background: var(--moon);
  /* C5.0: the whole sentence panel scaled +30%. */
  font-size: 1.05rem;
  font-weight: 400;
  white-space: nowrap;
}
#arnett-valves .sentence-lead { font-weight: 500; }
#arnett-valves .pick {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--black);
  background: var(--teal);
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 39px 10px 18px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
#arnett-valves .pick:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
#arnett-valves .result-reset {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  cursor: pointer;
}
#arnett-valves .result-reset:hover { background: var(--black); color: var(--white); }

/* Line stage: grid instead of the B flex stage */
#arnett-valves .stage.hero {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-stage);
  overflow: hidden;
  background: var(--moon) url('images/general_series.jpg') center center / cover no-repeat;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: var(--stage-pad);
  margin-bottom: var(--gap);
}
#arnett-valves .left { min-width: 0; }
/* C4.3 desktop: the render is the stage background, so the spacer collapses. */
#arnett-valves .stage.hero .left { display: none; }
#arnett-valves .grid {
  display: grid;
  /* C4.3: left card zone 1-2, empty centre for the valve 3, right card zone 4 */
  grid-template-columns: 1fr 1fr 3.43fr 2fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  min-height: 0;
}
#arnett-valves .stage.hero .card {
  background: var(--card);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: var(--r-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--black);
}
#arnett-valves .stage.hero .card .label { margin-bottom: 12px; }

/* Grid placement, 5x4 */
#arnett-valves .stage.hero .c-title    { grid-column: 1 / 3; grid-row: 1; }
#arnett-valves .stage.hero .c-pressure { grid-column: 1; grid-row: 2; }
#arnett-valves .stage.hero .c-size     { grid-column: 2; grid-row: 2; }
#arnett-valves .stage.hero .c-f2f      { grid-column: 1; grid-row: 3; }
#arnett-valves .stage.hero .c-temp     { grid-column: 2; grid-row: 3; }
#arnett-valves .stage.hero .c-series   { grid-column: 4; grid-row: 1 / 3; }
/* C4.3: shared card keeps the single-row form from the reference. */
#arnett-valves .stage.hero .c-platform { grid-column: 1 / 3; grid-row: 4; }
#arnett-valves .stage.hero .c-duty     { grid-column: 4; grid-row: 3 / 5; }

/* Black title unit, index.html sizes */
#arnett-valves .stage.hero .c-title {
  background: var(--black);
  color: var(--white);
  justify-content: center;
  padding: 14px 16px;
}
/* C4.5: no size override here. The panel-one title inherits the series
   title rule so every title card on the page reads the same. */
#arnett-valves .stage.hero .c-title .title-meta {
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--white);
  display: flex;
  gap: 8px;
  align-items: center;
}
#arnett-valves .stage.hero .c-title .title-meta .sep { width: 1px; height: 10px; background: var(--white); opacity: 0.45; }

/* Section bar, index.html sizes */
#arnett-valves .stage.hero .bar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin-bottom: 12px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--moon);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  padding: 0 10px;
  white-space: nowrap;
}

/* Stat boxes, index.html sizes */
#arnett-valves .stage.hero .stat { text-align: center; padding: 14px 12px; }
#arnett-valves .stage.hero .stat .bar-head { font-size: 0.6875rem; height: 30px; margin-bottom: 0; }
#arnett-valves .stage.hero .stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#arnett-valves .stage.hero .stat-value {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
#arnett-valves .stage.hero .stat-value em { font-style: normal; font-weight: 300; margin: 0 2px; }
#arnett-valves .stage.hero .stat-value small { font-size: 0.55em; font-weight: 400; margin-left: 4px; letter-spacing: 0; }
#arnett-valves .stage.hero .stat-metric { font-size: 0.75rem; font-weight: 400; margin-top: 6px; white-space: nowrap; }
#arnett-valves .stage.hero .stat-note { font-size: 0.625rem; font-weight: 400; margin-top: 8px; line-height: 1.35; }

/* Series list and key-value list, index.html sizes */
#arnett-valves .stage.hero .series {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* C4.7: the same centring rhythm the Choose by duty card uses, so the gap
     under the header pill matches the gap at the bottom of the card. */
  justify-content: center;
  gap: 2px;
}
#arnett-valves .stage.hero .series-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
#arnett-valves .stage.hero .series-row:first-child { border-top: 0; padding-top: 0; }
#arnett-valves .stage.hero .series-row:last-child { padding-bottom: 0; }
#arnett-valves .stage.hero .series-row .code { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; }
#arnett-valves .stage.hero .series-row .desc {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#arnett-valves .stage.hero .series-row .desc strong { font-weight: 500; display: block; font-size: 0.8125rem; }
#arnett-valves .stage.hero .series-row .range { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; text-align: right; }
#arnett-valves .stage.hero .series-row .range small { display: block; font-size: 0.6875rem; font-weight: 400; }
#arnett-valves .stage.hero .kv {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  gap: 2px;
}
#arnett-valves .stage.hero .kv-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
}
#arnett-valves .stage.hero .kv-row .k { font-weight: 300; }
#arnett-valves .stage.hero .kv-row .v { font-weight: 500; text-align: right; }
#arnett-valves .stage.hero .series.is-sparse,
#arnett-valves .stage.hero .kv.is-sparse { justify-content: flex-start; gap: 4px; }

/* Below the stage: result count, CTA, trust bar */
#arnett-valves .selector { padding: 28px 0 0; }
#arnett-valves .result-count { font-size: 1.0625rem; font-weight: 500; }
#arnett-valves .res-cta {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
#arnett-valves .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  background: var(--black);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
}
#arnett-valves .btn svg { width: 15px; height: 15px; }
#arnett-valves .btn-or { font-size: 0.9375rem; font-weight: 400; }
#arnett-valves .btn-tel { font-size: 1.0625rem; font-weight: 500; border-bottom: 1px solid var(--black); }
#arnett-valves .trust {
  margin-top: 52px;
  padding: 26px 30px;
  border-radius: var(--r-card);
  background: var(--moon);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#arnett-valves .trust-item strong { display: block; font-size: 0.9375rem; font-weight: 500; margin-bottom: 3px; }
#arnett-valves .trust-item span { font-size: 0.8125rem; font-weight: 300; }

/* Responsive, panel one only */
@media (max-width: 1280px) {
  #arnett-valves .stage.hero { aspect-ratio: auto; }
  #arnett-valves .grid { aspect-ratio: 16 / 9; align-self: start; }
}
@media (max-width: 1023px) {
  #arnett-valves .stage.hero {
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
    gap: 14px;
    background: var(--white);
    display: flex;
    flex-direction: column;
  }
  #arnett-valves .left {
    min-height: 480px;
    border-radius: var(--r-card);
    overflow: hidden;
    display: block;
    background: var(--moon) url('images/general_series.jpg') center center / cover no-repeat;
  }
  #arnett-valves .grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; aspect-ratio: auto; }
  #arnett-valves .stage.hero .card { background: var(--moon); }
  #arnett-valves .stage.hero .c-title    { grid-column: 1 / 3; grid-row: auto; background: var(--black); padding: 22px 24px; align-items: flex-start; }
  #arnett-valves .stage.hero .c-pressure { grid-column: 1; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .stage.hero .c-f2f      { grid-column: 2; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .stage.hero .c-temp     { grid-column: 1; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .stage.hero .c-size     { grid-column: 2; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .stage.hero .c-series   { grid-column: 1 / 3; grid-row: auto; }
  #arnett-valves .stage.hero .c-duty     { grid-column: 1 / 3; grid-row: auto; }
  #arnett-valves .stage.hero .c-platform { grid-column: 1 / 3; grid-row: auto; }
  #arnett-valves .stage.hero .c-title h2 { font-size: 2rem; }
  #arnett-valves .stage.hero .c-title h2 br { display: none; }
  #arnett-valves .stage.hero .bar-head { background: var(--white); }
  #arnett-valves .stage.hero .stat .bar-head { font-size: 0.75rem; height: 34px; }
  #arnett-valves .stage.hero .stat { padding: 22px 14px; }
  #arnett-valves .stage.hero .stat-value { font-size: 1.75rem; }
  #arnett-valves .stage.hero .series { gap: 0; justify-content: center; }
  #arnett-valves .stage.hero .series-row { padding: 12px 0; }
  #arnett-valves .stage.hero .kv { gap: 8px; }
  #arnett-valves .selector { padding: 28px 0 0; }
  /* C5.0c: the tablet step keeps its size, and the sentence wraps there
   instead of spilling out of the panel. */
  #arnett-valves .sentence { font-size: 1.5rem; line-height: 2; flex-wrap: wrap; white-space: normal; justify-content: center; }
  #arnett-valves .trust { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 767px) {
  #arnett-valves .left { min-height: 420px; background-position: center; }
  #arnett-valves .stage.hero .c-title h2 { font-size: 1.6rem; }
  #arnett-valves .label { font-size: 1rem; }
  #arnett-valves .stage.hero .bar-head { height: 32px; font-size: 0.75rem; }
  #arnett-valves .stage.hero .stat .bar-head { font-size: 0.625rem; height: 28px; letter-spacing: 0.05em; }
  #arnett-valves .grid { gap: 10px; }
  #arnett-valves .stage.hero .card { padding: 16px; }
  #arnett-valves .stage.hero .stat { padding: 18px 10px; }
  #arnett-valves .stage.hero .stat-value { font-size: 1.5rem; }
  #arnett-valves .stage.hero .stat-metric { font-size: 0.75rem; }
  #arnett-valves .stage.hero .series-row { grid-template-columns: 40px 1fr auto; gap: 10px; }
  #arnett-valves .stage.hero .series-row .desc { font-size: 0.6875rem; }
  #arnett-valves .sentence {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 16px 18px;
    border-radius: var(--r-card);
    white-space: normal;
  }
  #arnett-valves .sentence-lead { width: 100%; text-align: center; margin-bottom: 2px; }
  #arnett-valves .pick { padding: 9px 34px 9px 16px; background-position: right 12px center; }
  #arnett-valves .result-reset { padding: 9px 16px; }
  #arnett-valves .selector { padding: 28px 0 0; }
  #arnett-valves .sentence { font-size: 1.6rem; line-height: 2.1; }
  #arnett-valves .pick { padding: 4px 44px 6px 20px; background-position: right 17px center; background-size: 17px; }
  #arnett-valves .res-cta { margin-top: 22px; gap: 12px; }
  #arnett-valves .trust { grid-template-columns: 1fr; gap: 14px; padding: 22px 24px; margin-top: 36px; }
}


/* C4.2 mobile reading order: title, then product image, then the data cards.
   Default order is 0, so every item needs an explicit value or the cards
   with order 0 would still render ahead of the title. */
@media (max-width: 1023px) {
  #arnett-valves .stage.hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }
  #arnett-valves .stage.hero .grid { display: contents; }
  #arnett-valves .stage.hero .card { order: 3; }
  #arnett-valves .stage.hero .c-title { order: 1; grid-column: 1 / 3; grid-row: auto; }
  #arnett-valves .stage.hero .left {
    order: 2;
    grid-column: 1 / 3;
    grid-row: auto;
    min-height: 420px;
  }
}


/* C4.2 PDF brochure action card, 1:1 beside Specify */
#arnett-valves .side-wide .s-brochure {
  grid-column: 3;
  grid-row: 4;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* C4.5: no surface override. The card keeps the same background as every
     other card on the page. */
  align-items: center;
  /* C4.5: same distribution as the Specify card, so the two cards share one
     internal rhythm and their buttons land on the same line. */
  justify-content: space-between;
  text-align: center;
  padding: 16px;
}
/* C4.5: the brochure card mirrors the Specify card child for child. The line
   of copy and the trailing phone text are present but hidden, so the layout
   maths is identical at any card size. */
#arnett-valves .side-wide .s-brochure .ask-line,
#arnett-valves .side-wide .s-brochure .ask-call {
  visibility: hidden;
}
#arnett-valves .side-wide .s-brochure .ask-line {
  margin-top: 5px;
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--black);
}
/* C4.4: identical type to the "Specify the ..." heading. */
#arnett-valves .side-wide .s-brochure strong,
#arnett-valves .c-ask strong {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* C4.3: the download button is the same component as the contact pill. */
#arnett-valves .brochure-download,
#arnett-valves .c-ask .ask-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 130px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: var(--black);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
#arnett-valves .brochure-download:hover,
#arnett-valves .c-ask .ask-mail:hover {
  background: #26ffe2;
  transform: translateY(-1px);
}
#arnett-valves .ask-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
/* C4.3: the number is plain text with no link, the pill carries the email. */
#arnett-valves .ask-call {
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  #arnett-valves .side-wide .s-brochure {
    grid-column: 1 / 3;
    grid-row: auto;
    aspect-ratio: auto;
    min-height: 150px;
    justify-content: center;
    gap: 12px;
  }
  #arnett-valves .ask-actions {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
  /* Touch targets: keep every action at or above 44px on a phone. */
  #arnett-valves .c-ask .ask-actions .ask-mail { min-height: 44px; padding: 10px 18px; }
  #arnett-valves .ask-call { padding: 12px 6px; font-size: 0.85rem; }
  #arnett-valves .brochure-download { min-height: 44px; padding: 10px 18px; }
  #arnett-valves .s-ask { min-height: 150px; }
}

/* All series interactive rows */
#arnett-valves .series-row-link {
  display: grid;
  /* C4.20: code column grows for the longer series names. */
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  /* C4.7: six series rows must clear the card the way six duty rows do, so
     the row padding is trimmed and the freed space feeds the centring. */
  padding: 4px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--black);
  position: relative;
  transition: background 0.18s ease, transform 0.18s ease;
}
#arnett-valves .series-row-link:first-child { border-top: 0; }
#arnett-valves .series-row-link::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 3px;
  background: var(--teal);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#arnett-valves .series-row-link:hover {
  background: rgba(0, 245, 211, 0.08);
  transform: translateX(3px);
}
#arnett-valves .series-row-link:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
#arnett-valves .series-row-link .code { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--black); white-space: nowrap; }
#arnett-valves .series-row-link .desc {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#arnett-valves .series-row-link .desc strong { font-weight: 600; display: block; font-size: 0.85rem; color: var(--black); }
#arnett-valves .series-row-link .range { font-size: 0.82rem; font-weight: 600; white-space: nowrap; text-align: right; }
#arnett-valves .series-row-link .range small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--black); }

/* Key 4 stat numbers sizing: slightly larger & bold */
#arnett-valves .stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
#arnett-valves .stage.hero .stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Unit Toggle: US / METRIC */
#arnett-valves .unit-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--moon);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
#arnett-valves .unit-btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 500;
  border: 0;
  border-radius: var(--r-pill);
  padding: 5px 10px;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#arnett-valves .unit-btn.is-active {
  background: var(--black);
  color: var(--white);
}

/* Unit-switch display logic */
#arnett-valves[data-units="us"] .stat-val-metric { display: none !important; }
#arnett-valves[data-units="metric"] .stat-val-us { display: none !important; }

/* Center contact info below stage & symmetrical trust section */
#arnett-valves .selector {
  padding: 28px 0 0;
}
#arnett-valves .res-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}
#arnett-valves .trust-wrap {
  margin: 28px 0 0;
}
#arnett-valves .trust {
  padding: 28px 32px;
  border-radius: var(--r-card);
  background: var(--moon);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}


/* QC 2026-09-15: Choose by duty rows = links styled like ALL SERIES */
#arnett-valves .duty-row-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--black);
  position: relative;
  transition: background 0.18s ease, transform 0.18s ease;
  font-size: 0.875rem;
  line-height: 1.4;
}
#arnett-valves .duty-row-link:first-child { border-top: 0; }
#arnett-valves .duty-row-link::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background: var(--teal);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#arnett-valves .duty-row-link:hover {
  background: rgba(0, 245, 211, 0.08);
  transform: translateX(3px);
}
#arnett-valves .duty-row-link:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
#arnett-valves .duty-row-link .k { font-weight: 300; }
#arnett-valves .duty-row-link .code {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
  min-width: 44px;
  text-align: right;
}
/* QC: sizes card metric two-line DN display */
#arnett-valves .stat-value .dn-line { display: block; }
#arnett-valves .stat-value .dn-word { font-size: 0.6em; font-weight: 400; opacity: 0.75; }
#arnett-valves .stat-val-metric.dn-two-line { white-space: normal; line-height: 1.15; }
#arnett-valves .stat-val-us.dn-two-line { display: none !important; }

/* QC: dual-unit helper visibility (notes, model rows, series ranges) */
#arnett-valves[data-units="us"] .u-metric { display: none !important; }
#arnett-valves[data-units="metric"] .u-us { display: none !important; }

/* Specify Ask Box: Exact 1x1 square placed in Col 3, Row 4 */
#arnett-valves .s-ask {
  /* C4.4: swapped with the brochure card. */
  grid-column: 4;
  grid-row: 4;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 16px;
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}
#arnett-valves .c-ask strong {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
#arnett-valves .c-ask .ask-line {
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.75);
}
#arnett-valves .c-ask .ask-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--teal);
  color: var(--black);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  margin: 0 auto;
  transition: transform 0.15s ease, background 0.15s ease;
}
#arnett-valves .c-ask .ask-tel:hover {
  background: #26ffe2;
  transform: translateY(-1px);
}

/* Floating Dock: Human-problem series navigation */
#arnett-valves .floating-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: var(--r-pill);
  /* C4.7: milky white frosted glass with black text. */
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
#arnett-valves .dock-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  /* C5.0: dock scaled +20%. */
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
/* C4.7: hover highlights teal. */
#arnett-valves .dock-item:hover {
  color: var(--black);
  background: var(--teal);
}
#arnett-valves .dock-item.is-active {
  color: var(--black);
  background: var(--teal);
  font-weight: 600;
}
#arnett-valves .dock-item .dock-code {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.75;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  #arnett-valves .s-ask {
    grid-column: 1 / 3;
    grid-row: auto;
    aspect-ratio: auto;
    min-height: 140px;
  }
  /* C6.0: the dock is hidden on mobile, so its old layout rules are gone. */
}
@media (max-width: 767px) {
  #arnett-valves .s-ask {
    grid-column: 1 / 3;
    grid-row: auto;
    aspect-ratio: auto;
    padding: 20px;
  }
  #arnett-valves .dock-item {
    padding: 6px 10px;
    font-size: 0.84rem;
  }
}


/* ================================================
   SECTION: VIDEO BAND (C4.9)
   Autoplay loop, 1920 x 600, frosted progress bar.
   ================================================ */
#arnett-valves .video-band {
  /* C4.13: the section rhythm is uniform - every band separates from the
     previous one with the same 28px gap the user approved. */
  margin-top: 28px;
  margin-bottom: 0;
}
#arnett-valves .video-frame {
  position: relative;
  width: 100%;
  /* The desktop cut is 8448x2640, so the band matches its 3.2:1 shape. */
  aspect-ratio: 1920 / 600;
  border-radius: var(--r-stage);
  overflow: hidden;
  background: var(--black);
}
#arnett-valves .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 1023px) {
  #arnett-valves .video-frame { aspect-ratio: 16 / 9; }
}

/* ================================================
   SECTION: APPLICATIONS (C4.11)
   Slideshow cycling application images; the top bar
   jumps the slider to the chosen application.
   ================================================ */
#arnett-valves .app-band {
  /* C4.13: same 28px rhythm as the video band. */
  margin-top: 28px;
  margin-bottom: 0;
}
#arnett-valves .app-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
#arnett-valves .app-nav-item {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--black);
  background: var(--moon);
  border: 0;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
#arnett-valves .app-nav-item:hover { background: #E1E9E8; transform: translateY(-1px); }
#arnett-valves .app-nav-item.is-active {
  background: var(--black);
  color: var(--white);
}
#arnett-valves .app-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 550;
  border-radius: var(--r-stage);
  overflow: hidden;
  background: var(--black);
}
#arnett-valves .app-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1), transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}
#arnett-valves .app-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
#arnett-valves .app-caption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
#arnett-valves .app-caption strong { font-size: 1.05rem; font-weight: 600; color: var(--black); }
#arnett-valves .app-caption span { font-size: 0.78rem; font-weight: 400; color: var(--black); }
@media (max-width: 1023px) {
  #arnett-valves .app-stage { aspect-ratio: 16 / 9; }
  #arnett-valves .app-caption { left: 12px; bottom: 12px; right: 12px; }
  #arnett-valves .app-nav { gap: 6px; }
  #arnett-valves .app-nav-item { padding: 8px 12px; font-size: 0.75rem; }
}

/* C4.13: shared section heading for the Applications band and the series. */
#arnett-valves .band-head {
  max-width: 720px;
  /* C4.13b: top padding so the title never sits flush under the sticky nav. */
  padding-top: 16px;
  margin-bottom: 20px;
}
#arnett-valves .band-head h2 {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
#arnett-valves .band-head p {
  /* C4.14: descriptions read in the same colour as their titles. */
  font-size: 1rem;
  font-weight: 300;
  color: var(--black);
}
@media (max-width: 767px) {
  #arnett-valves .band-head h2 { font-size: 1.75rem; }
}

/* C4.14: full-page dropdown menu from the hamburger. */
#arnett-valves .site-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 26px 30px;
  min-width: 560px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}
#arnett-valves .site-menu[hidden] { display: none; }
#arnett-valves .menu-col { display: flex; flex-direction: column; gap: 9px; }
#arnett-valves .menu-head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 4px;
}
#arnett-valves .menu-col a {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* C4.15: hover is a colour change alone. */
#arnett-valves .menu-col a:hover {
  color: #008d75;
}
@media (max-width: 1023px) {
  #arnett-valves .site-menu {
    left: 0;
    right: 0;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* ================================================
   SECTION: CONTACT
   Dependencies: tokens, container
   ================================================ */
#arnett-valves .contact { padding: 64px 0 20px; }
#arnett-valves .contact-head { max-width: 640px; margin-bottom: 30px; }
#arnett-valves .contact-head h2 {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
#arnett-valves .contact-head p { font-size: 1rem; font-weight: 300; color: var(--black); }
#arnett-valves .contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--gap);
  align-items: stretch;
}
#arnett-valves .routes { display: flex; flex-direction: column; gap: var(--gap); }
#arnett-valves .route {
  flex: 1;
  border-radius: var(--r-card);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}
#arnett-valves .route-call { background: var(--black); color: var(--white); }
#arnett-valves .route-mail { background: var(--moon); color: var(--black); }
#arnett-valves .route small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
#arnett-valves .route strong { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
#arnett-valves .route span { font-size: 0.8125rem; font-weight: 300; margin-top: 6px; }
#arnett-valves .route-call span { opacity: 0.7; }
#arnett-valves .form-card { background: var(--moon); border-radius: var(--r-card); padding: 28px 30px 30px; }
#arnett-valves .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  background: var(--black);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
}
#arnett-valves .btn svg { width: 15px; height: 15px; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1280px) {
  #arnett-valves .stage { aspect-ratio: auto; }
  #arnett-valves .side { aspect-ratio: 1 / 2; }
  #arnett-valves .side-wide { aspect-ratio: 1 / 1; }
}

/* Tablet and below: the render becomes its own block,
   the cards sit underneath on moon gray. */
@media (max-width: 1023px) {
  #arnett-valves .nav { position: static; padding: 18px 0 14px; }
  #arnett-valves .nav-filter { display: none; }
  #arnett-valves .tabs { display: none; }
  #arnett-valves .icon-btn { background: var(--moon); }

  #arnett-valves .stage {
    aspect-ratio: auto;
    background-image: none !important;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--gap);
    margin-bottom: 0;
  }
  #arnett-valves .stage-bg { display: none; }
  #arnett-valves .stage-spacer {
    /* C6.0: the reading order moved to the C6.0 block at the end of the sheet,
       where the title card comes first and the graphic second. */
    min-height: 420px;
    border-radius: var(--r-card);
    background-image: var(--img);
    background-position: var(--pos, center);
    background-size: cover;
    background-repeat: no-repeat;
  }
  #arnett-valves .side, #arnett-valves .side-wide {
    aspect-ratio: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  #arnett-valves .card { background: var(--moon); }
  #arnett-valves .c-title, #arnett-valves .c-ask { background: var(--black); }
  #arnett-valves .g-title, #arnett-valves .s-title { grid-column: 1 / 3; grid-row: auto; padding: 22px 24px; }
  #arnett-valves .g-press, #arnett-valves .s-press { grid-column: 1; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .g-f2f,   #arnett-valves .s-f2f   { grid-column: 2; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .g-temp,  #arnett-valves .s-temp  { grid-column: 1; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .g-size,  #arnett-valves .s-size  { grid-column: 2; grid-row: auto; aspect-ratio: 1; }
  #arnett-valves .g-duty,  #arnett-valves .s-models,
  #arnett-valves .g-series,#arnett-valves .s-feats,
  #arnett-valves .g-shared,#arnett-valves .s-ask { grid-column: 1 / 3; grid-row: auto; }
  #arnett-valves .c-title h2 { font-size: 2rem; }
  #arnett-valves .bar-head { background: var(--white); }
  #arnett-valves .stat-value { font-size: 1.75rem; }
  #arnett-valves .rows, #arnett-valves .kv, #arnett-valves .feats { gap: 6px; }
  #arnett-valves .row { padding: 12px 0; }

  #arnett-valves .contact-grid { grid-template-columns: 1fr; }
  #arnett-valves .routes { flex-direction: row; }
}

@media (max-width: 767px) {
  #arnett-valves { padding-bottom: 16px; }
  #arnett-valves .container { padding: 0 12px; }
  #arnett-valves .brand img { height: 28px; }
  #arnett-valves .cta { display: none; }
  #arnett-valves .stage { gap: 10px; margin-bottom: 0; }
  #arnett-valves .stage:not(.hero) { margin-top: 22px; }
  #arnett-valves .stage-spacer { min-height: 330px; }
  #arnett-valves .side, #arnett-valves .side-wide { gap: 10px; }
  #arnett-valves .card { padding: 14px 16px; }
  #arnett-valves .c-title h2 { font-size: 1.6rem; }
  #arnett-valves .stat { padding: 16px 10px; }
  #arnett-valves .stat-value { font-size: 1.4rem; }
  #arnett-valves .stat-metric { font-size: 0.6875rem; }
  #arnett-valves .stat .bar-head { font-size: 0.6875rem; height: 28px; letter-spacing: 0.04em; }
  #arnett-valves .row { grid-template-columns: minmax(56px, auto) minmax(0, 1fr) auto; gap: 10px 16px; }
  #arnett-valves .row .desc { font-size: 0.6875rem; }
  #arnett-valves .contact { padding: 44px 0 16px; }
  #arnett-valves .contact-head h2 { font-size: 1.75rem; }
  #arnett-valves .routes { flex-direction: column; }
  #arnett-valves .route strong { font-size: 1.25rem; }
  #arnett-valves .form-card { padding: 22px 20px 24px; }
}

/* ================================================
   C6.0: MOBILE VERSION
   Applies at tablet and below, where every section stacks into one column.
   Order inside a section: title card, product graphic, data cards, the two
   action cards. Dependencies: tokens, responsive.
   ================================================ */
@media (max-width: 1023px) {

  /* 1. The header keeps its graphic. This selector matches the desktop
        display:none rule class for class, so it wins on source order. */
  #arnett-valves .stage.hero .left {
    display: block;
    order: 2;
    grid-column: 1 / 3;
    grid-row: auto;
    min-height: 420px;
    background-image: url('images/general_series.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* 2. A series section becomes one grid, so the graphic can sit BETWEEN the
        title card and the data cards. The card wrapper dissolves into that
        grid with display: contents. */
  #arnett-valves .stage:not(.hero) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--gap);
    padding: 0;
    aspect-ratio: auto;
    background: var(--white);
    background-image: none;
  }
  #arnett-valves .stage:not(.hero) > .side { display: contents; }
  #arnett-valves .stage:not(.hero) > .stage-spacer {
    order: 2;
    grid-column: 1 / 3;
    grid-row: auto;
    min-height: 420px;
  }
  /* The data group takes order 3. The two lines below it are exceptions at the
     SAME specificity, so source order decides and they win. Raising their
     specificity instead would work too, and would be easier to get wrong. */
  #arnett-valves .stage:not(.hero) .side > .card { order: 3; }
  #arnett-valves .stage:not(.hero) .side > .s-title { order: 1; grid-column: 1 / 3; grid-row: auto; }
  #arnett-valves .stage:not(.hero) .side > .s-ask { order: 4; grid-column: 1 / 2; grid-row: auto; }
  #arnett-valves .stage:not(.hero) .side > .s-brochure { order: 4; grid-column: 2 / 3; grid-row: auto; }

  /* 3. The series dock is a desktop shortcut. On the phone the sections carry
        their own navigation and the dock only covers content. */
  #arnett-valves .floating-dock { display: none; }
}

@media (max-width: 767px) {

  /* 4. Dedicated square graphics for the stacked layout. */
  #arnett-valves .stage.hero .left {
    min-height: 0;
    aspect-ratio: 1 / 1;
    background-image: url('images/mobile/general_series.jpg');
  }
  #arnett-valves .stage:not(.hero) > .stage-spacer {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  #arnett-valves #flux > .stage-spacer { background-image: url('images/mobile/flux_series_01.jpg'); }
  #arnett-valves #halo > .stage-spacer { background-image: url('images/mobile/halo_series_01.jpg'); }
  #arnett-valves #apex > .stage-spacer { background-image: url('images/mobile/apex_series_01.jpg'); }
  #arnett-valves #core > .stage-spacer { background-image: url('images/mobile/core_series_01.jpg'); }
  #arnett-valves #omni > .stage-spacer { background-image: url('images/mobile/omni_series_01.jpg'); }
  #arnett-valves #fx > .stage-spacer { background-image: url('images/mobile/fx_series_01.jpg'); }

  /* 5c. The filter bar rides inside the hero grid, directly above the series
        list, so the criteria and the matching series read as one unit. The
        script moves the node; this gives it the full grid width and the same
        order as the data cards, which puts it after the stat cards and right
        before the series card in the DOM order it now has. */
  #arnett-valves .stage.hero .filterbar {
    grid-column: 1 / 3;
    order: 3;
    padding: 0;
    margin: 0;
    text-align: left;
  }
  #arnett-valves .stage.hero .filterbar .sentence { justify-content: flex-start; }

  /* 5b. The video band takes the mobile cut, uploaded at 900x496. */
  #arnett-valves .video-frame { aspect-ratio: 900 / 496; }

  /* 5. The applications band takes the same square art. The inline style on
        each slide carries the desktop file, hence the !important. */
  #arnett-valves .app-stage { aspect-ratio: 1 / 1; }
  #arnett-valves .app-slide[data-slide="0"] { background-image: url('images/mobile/Arnett-Valves-Website-applications-mining-and-mineral-processing.jpg') !important; }
  #arnett-valves .app-slide[data-slide="1"] { background-image: url('images/mobile/Arnett-Valves-Website-applications-pulp-and-paper.jpg') !important; }
  #arnett-valves .app-slide[data-slide="2"] { background-image: url('images/mobile/Arnett-Valves-Website-applications-power-generation.jpg') !important; }
  #arnett-valves .app-slide[data-slide="3"] { background-image: url('images/mobile/Arnett-Valves-Website-applications-water-treatmen.jpg') !important; }
  #arnett-valves .app-slide[data-slide="4"] { background-image: url('images/mobile/Arnett-Valves-Website-applications-chemical-processing.jpg') !important; }
  #arnett-valves .app-slide[data-slide="5"] { background-image: url('images/mobile/Arnett-Valves-Website-applications-food-processing.jpg') !important; }
  #arnett-valves .app-slide[data-slide="6"] { background-image: url('images/mobile/Arnett-Valves-Website-applications-sand-and-gravel.jpg') !important; }
}

</style>

<div id="arnett-valves" data-units="us">
<script>
/* C5.3: arms the card entrance before the first paint, so no card flashes
   in and out. Without this script, without IntersectionObserver, or with a
   reduced-motion preference, every card simply stays visible. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  if (!('IntersectionObserver' in window)) return;
  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  root.classList.add('js-reveal');
})();
</script>
  <div class="container">

    <!-- ==================== SECTION: NAV ==================== -->
    <header class="nav" id="nav">
      <a class="brand" href="#panel-one" aria-label="Arnett Valves">
        <img src="images/arnett-valves-by-paravalves.png" alt="Arnett Valves, powered by Paravalves">
      </a>

      <!-- C5.2: compact copy of the filter sentence. It joins the sticky bar
           once the main panel scrolls out of view. -->
      <div class="nav-filter" id="nav-filter">
        <span class="nf-lead">I need a knife gate valve for</span>
        <select class="pick pick-compact" id="n-media" data-role="media" aria-label="Media">
          <option value="any">any media</option>
          <option value="slurry">abrasive slurry</option>
          <option value="clean">clean water</option>
          <option value="acidic">acidic media</option>
          <option value="dry">dry bulk</option>
          <option value="food">food or chemical</option>
        </select>
        <span class="nf-word">at</span>
        <select class="pick pick-compact" id="n-press" data-role="press" aria-label="Working pressure">
          <option value="any">any pressure</option>
          <option value="145">to 145 psi</option>
          <option value="363">145 to 363 psi</option>
          <option value="725">363 to 725 psi</option>
          <option value="1450">above 725 psi</option>
        </select>
        <span class="nf-word">in</span>
        <select class="pick pick-compact" id="n-size" data-role="size" aria-label="Size">
          <option value="any">any size</option>
          <option value="12">2 to 12 inch</option>
          <option value="24">14 to 24 inch</option>
          <option value="48">26 to 48 inch</option>
        </select>
      </div>

      <div class="nav-right">
        <div class="unit-toggle" role="group" aria-label="Unit system">
          <button class="unit-btn is-active" id="unit-us" type="button">US</button>
          <button class="unit-btn" id="unit-metric" type="button">METRIC</button>
        </div>

        <button class="icon-btn" type="button" id="menu-btn" aria-label="Menu" aria-expanded="false" aria-controls="site-menu">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
        <nav class="site-menu" id="site-menu" aria-label="Page sections" hidden>
          <div class="menu-col">
            <div class="menu-head">The line</div>
            <a href="#panel-one">Knife gate valves</a>
            <a href="#video-band">Video</a>
            <a href="#applications">Applications</a>
          </div>
          <div class="menu-col">
            <div class="menu-head">The series</div>
            <a href="#flux">FLUX &middot; Push-through</a>
            <a href="#halo">HALO &middot; Fully lined</a>
            <a href="#apex">APEX &middot; Guided shear</a>
            <a href="#core">CORE &middot; Replaceable seat</a>
            <a href="#omni">OMNI &middot; Bidirectional</a>
            <a href="#fx">FX &middot; Water penstocks</a>
          </div>
          <div class="menu-col">
            <div class="menu-head">Contact</div>
            <a href="#find">Talk to an engineer</a>
            <a href="#contact">Request a quote</a>
          </div>
        </nav>
        <a class="cta" href="#contact">Request a quote</a>
      </div>
    </header>

    <!-- ======================== SECTION: FILTER BAR ======================== -->
    <div class="filterbar">
      <p class="sentence">
        <span class="sentence-lead">I need a knife gate valve for</span>
        <select class="pick" id="f-media" aria-label="Media">
          <option value="any">any media</option>
          <option value="slurry">abrasive slurry</option>
          <option value="clean">clean water</option>
          <option value="acidic">acidic media</option>
          <option value="dry">dry bulk</option>
          <option value="food">food or chemical</option>
        </select>
        <span>at</span>
        <select class="pick" id="f-press" data-role="press" aria-label="Working pressure">
          <option value="any">any pressure</option>
          <option value="145">to 145 psi</option>
          <option value="363">145 to 363 psi</option>
          <option value="725">363 to 725 psi</option>
          <option value="1450">above 725 psi</option>
        </select>
        <span>in</span>
        <select class="pick" id="f-size" data-role="size" aria-label="Size">
          <option value="any">any size</option>
          <option value="12">2 to 12 inch</option>
          <option value="24">14 to 24 inch</option>
          <option value="48">26 to 48 inch</option>
        </select>
        <button class="result-reset" type="button" id="res-reset">Reset</button>
      </p>
    </div>

    <!-- ======================== SECTION: PANEL ONE (line stage) ======================== -->
    <section class="stage hero" id="panel-one">

      <!-- Left: the render breathes here, nothing on top of the valve -->
      <div class="left" aria-hidden="true"></div>

      <!-- Right: 5x4 data grid -->
      <div class="grid">

        <div class="card c-title">
          <h2>Knife Gate Valves</h2>
          <div class="title-meta num" id="s-meta">
            <span>6 series</span>
            <span class="sep"></span>
            <span>13 models</span>
          </div>
        </div>

        <div class="card stat c-pressure">
          <div class="bar-head">Max pressure</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">1450<small>PSI</small></div>
            <div class="stat-value num stat-val-metric">100 bar</div>
          </div>
        </div>

        <div class="card stat c-f2f">
          <div class="bar-head">Face-to-face</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">1.7"<em>&ndash;</em>21.1"</div>
            <div class="stat-value num stat-val-metric">43 to 537 mm</div>
          </div>
        </div>

        <div class="card stat c-temp">
          <div class="bar-head">Max temperature</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">435<small>&deg;F</small></div>
            <div class="stat-value num stat-val-metric">224&deg;C</div>
          </div>
        </div>

        <div class="card stat c-size">
          <div class="bar-head">Sizes</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2"<em>&ndash;</em>48"</div>
            <div class="stat-value num stat-val-metric dn-two-line"><span class="dn-line"><span class="dn-word">from</span> DN50</span><span class="dn-line"><span class="dn-word">to</span> DN1200</span></div>
          </div>
        </div>

        <div class="card c-series">
          <div class="bar-head"><span id="s-series-head">All series</span></div>
          <div class="series" id="s-series">
            <a class="series-row-link" href="#flux">
              <span class="code">FLUX</span>
              <span class="desc"><strong>Purging push-through</strong>Flow stays off the body</span>
              <span class="range num"><span class="u-us">2"&ndash;48"<small>4 models</small></span><span class="u-metric">DN50&ndash;DN1200<small>4 models</small></span></span>
            </a>
            <a class="series-row-link" href="#halo">
              <span class="code">HALO</span>
              <span class="desc"><strong>Fully lined</strong>One-piece liner, 70&#37; solids</span>
              <span class="range num"><span class="u-us">2"&ndash;24"<small>2 models</small></span><span class="u-metric">DN50&ndash;DN600<small>2 models</small></span></span>
            </a>
            <a class="series-row-link" href="#apex">
              <span class="code">APEX</span>
              <span class="desc"><strong>Guided shear</strong>One lay length, three ratings</span>
              <span class="range num"><span class="u-us">2"&ndash;24"<small>3 models</small></span><span class="u-metric">DN50&ndash;DN600<small>3 models</small></span></span>
            </a>
            <a class="series-row-link" href="#core">
              <span class="code">CORE</span>
              <span class="desc"><strong>Replaceable seat</strong>Seat changed in the line</span>
              <span class="range num"><span class="u-us">2"&ndash;24"<small>2 models</small></span><span class="u-metric">DN50&ndash;DN600<small>2 models</small></span></span>
            </a>
            <a class="series-row-link" href="#omni">
              <span class="code">OMNI</span>
              <span class="desc"><strong>Bidirectional</strong>Seals from either face</span>
              <span class="range num"><span class="u-us">2"&ndash;24"<small>1 model</small></span><span class="u-metric">DN50&ndash;DN600<small>1 model</small></span></span>
            </a>
            <a class="series-row-link" href="#fx">
              <span class="code">FX</span>
              <span class="desc"><strong>Water penstocks</strong>Channels and wall openings</span>
              <span class="range num"><span class="u-us">to 118.1"<small>1 model</small></span><span class="u-metric">to 3000 mm<small>1 model</small></span></span>
            </a>
          </div>
        </div>

        <div class="card c-duty">
          <div class="bar-head"><span>Choose by duty</span></div>
          <div class="kv" id="s-duty">
            <a class="duty-row-link" href="#flux"><span class="k">Media that packs and settles</span><span class="v"><span class="code">FLUX</span></span></a>
            <a class="duty-row-link" href="#halo"><span class="k">Abrasion and chemistry together</span><span class="v"><span class="code">HALO</span></span></a>
            <a class="duty-row-link" href="#apex"><span class="k">Large solids that jam a conventional gate</span><span class="v"><span class="code">APEX</span></span></a>
            <a class="duty-row-link" href="#core"><span class="k">A seat the crew can change on site</span><span class="v"><span class="code">CORE</span></span></a>
            <a class="duty-row-link" href="#omni"><span class="k">Pressure arriving from either direction</span><span class="v"><span class="code">OMNI</span></span></a>
            <a class="duty-row-link" href="#fx"><span class="k">Open channels and wall openings in water</span><span class="v"><span class="code">FX</span></span></a>
          </div>
        </div>

        <div class="card c-platform">
          <div class="bar-head"><span>Shared across the line</span></div>
          <div class="kv">
            <div class="kv-row"><span class="k">Actuation</span><span class="v">ISO 5210 pad, interchangeable in line</span></div>
            <div class="kv-row"><span class="k">Flanges</span><span class="v">Custom drilling to any requirement</span></div>
            <div class="kv-row"><span class="k">Quality</span><span class="v">ISO 9001:2015</span></div>
          </div>
        </div>

      </div>
    </section>

    <!-- ======================== SECTION: VIDEO BAND ======================== -->
    <section class="video-band" id="video-band" aria-label="Arnett Valves video">
      <div class="video-frame">
        <iframe
          id="main-video"
          src="https://player.vimeo.com/video/1226975754?loop=1&muted=1&controls=0&dnt=1&add-player-info=0"
          data-src-mobile="https://player.vimeo.com/video/1231562892?loop=1&muted=1&controls=0&dnt=1&add-player-info=0"
          width="1920" height="600" frameborder="0"
          allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
          referrerpolicy="strict-origin-when-cross-origin"
          title="Arnett Valves"></iframe>
      </div>
    </section>

    <!-- ======================== SECTION: BELOW THE STAGE ======================== -->
    <section class="selector" id="find">
      <div class="res-cta">
        <a class="btn" href="#contact">
          Talk to an Arnett engineer
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
        <span class="btn-or">or call</span>
        <a class="btn-tel" href="tel:8447857585">844-785-7585</a>
      </div>

      <div class="trust-wrap">
        <div class="trust">
          <div class="trust-item"><strong>Bamberg, South Carolina</strong><span>Engineered and supported in the US</span></div>
          <div class="trust-item"><strong>Stock on the shelf</strong><span>Common sizes ready to ship</span></div>
          <div class="trust-item"><strong>Engineered to order</strong><span>Beyond the standard patterns</span></div>
          <div class="trust-item"><strong>ISO 9001:2015</strong><span>PED, Machinery and ATEX directives</span></div>
        </div>
      </div>
    </section>

    <!-- ======================== SECTION: APPLICATIONS ======================== -->
    <section class="app-band" id="applications" aria-label="Applications">
      <div class="band-head">
        <h2>Applications</h2>
        <p>Where Arnett valves and penstocks work, from mining and minerals
        through to water treatment and power generation.</p>
      </div>
      <nav class="app-nav" aria-label="Application selector">
      <button class="app-nav-item is-active" type="button" data-slide="0">Mining & minerals</button>
      <button class="app-nav-item" type="button" data-slide="1">Pulp & paper</button>
      <button class="app-nav-item" type="button" data-slide="2">Power generation</button>
      <button class="app-nav-item" type="button" data-slide="3">Water treatment</button>
      <button class="app-nav-item" type="button" data-slide="4">Chemical processing</button>
      <button class="app-nav-item" type="button" data-slide="5">Food processing</button>
      <button class="app-nav-item" type="button" data-slide="6">Sand &amp; gravel</button>
      </nav>
      <div class="app-stage">
      <div class="app-slide is-active" data-slide="0" style="background-image: url('images/Arnett_Valves_application_mining.jpg')"></div>
      <div class="app-slide" data-slide="1" style="background-image: url('images/Arnett_Valves_application_mining_pulp_and_paper.jpg')"></div>
      <div class="app-slide" data-slide="2" style="background-image: url('images/Arnett_Valves_application_power_generation.jpg')"></div>
      <div class="app-slide" data-slide="3" style="background-image: url('images/Arnett_Valves_application_water_treatment.jpg')"></div>
      <div class="app-slide" data-slide="4" style="background-image: url('images/Arnett-Valves-Website-applications-CHEMICAL-PROCESSING.jpg')"></div>
      <div class="app-slide" data-slide="5" style="background-image: url('images/Arnett-Valves-Website-applications-FOOD-PROCESSING.jpg')"></div>
      <div class="app-slide" data-slide="6" style="background-image: url('images/Arnett-Valves-Website-applications-SAND-AND-GRAVEL.jpg')"></div>
        <div class="app-caption">
          <strong id="app-caption-title">Mining &amp; minerals</strong>
          <span id="app-caption-sub">Knife gate valves and penstocks in mining and minerals processing</span>
        </div>
      </div>
    </section>
    <!-- ==================== SECTION: SERIES ==================== -->
    <section class="series-head" aria-label="The Arnett valve series">
      <div class="band-head">
        <h2>The series</h2>
        <p>Six series cover the full range. Choose by the media you handle,
        the pressure you run, or the problem you are solving.</p>
      </div>
    </section>

    <!-- ==================== SECTION: SA SERIES ==================== -->
    <section class="stage" id="flux" style="--bg-pos: 22% center">
      <div class="stage-bg" aria-hidden="true">
        <div class="bg-slide is-active" style="background-image: url('images/flux_series_01.jpg')"></div>
        <div class="bg-slide" style="background-image: url('images/flux_series_02.jpg')"></div>
      </div>
      <div class="stage-spacer" style="--img: url('images/flux_series_01.jpg'); --pos: 22% center"></div>
      <div class="side side-wide">

        <div class="card c-title s-title">
          <div class="eyebrow">Knife gate valves</div>
          <h2>Purging push-through</h2>
          <div class="title-meta num">
            <span>FLUX series</span>
            <span class="sep"></span>
            <span>4 models</span>
          </div>
        </div>

        <div class="card stat s-press">
          <div class="bar-head">Max pressure</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">725<small>PSI</small></div>
            <div class="stat-value num stat-val-metric">50 bar</div>
          </div>
        </div>
        <div class="card stat s-f2f">
          <div class="bar-head">Face-to-face</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2.1"<em>&ndash;</em>21.1"</div>
            <div class="stat-value num stat-val-metric">54 to 537 mm</div>
          </div>
        </div>
        <div class="card stat s-temp">
          <div class="bar-head">Max temperature</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">435<small>&deg;F</small></div>
            <div class="stat-value num stat-val-metric">224&deg;C</div>
          </div>
        </div>
        <div class="card stat s-size">
          <div class="bar-head">Sizes</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2"<em>&ndash;</em>48"</div>
            <div class="stat-value num stat-val-metric dn-two-line"><span class="dn-line"><span class="dn-word">from</span> DN50</span><span class="dn-line"><span class="dn-word">to</span> DN1200</span></div>
          </div>
        </div>

        <div class="card s-models">
          <div class="bar-head"><span>Models</span></div>
          <div class="rows">
            <div class="row"><span class="code">FLUX S</span><span class="desc"><strong>Standard pattern</strong>Short face-to-face</span><span class="range num"><span class="u-us">150 psi</span><span class="u-metric">10 bar</span></span></div>
            <div class="row"><span class="code">FLUX L</span><span class="desc"><strong>Long pattern</strong>Long-pattern spools</span><span class="range num"><span class="u-us">150 psi</span><span class="u-metric">10 bar</span></span></div>
            <div class="row"><span class="code">FLUX H</span><span class="desc"><strong>High pressure</strong>Full size range</span><span class="range num"><span class="u-us">435 psi</span><span class="u-metric">30 bar</span></span></div>
            <div class="row"><span class="code">FLUX X</span><span class="desc"><strong>Extreme pressure</strong>To 24 inch</span><span class="range num"><span class="u-us">725 psi</span><span class="u-metric">50 bar</span></span></div>
          </div>
        </div>

        <div class="card s-feats">
          <div class="bar-head"><span>Key features</span></div>
          <div class="feats">
            <div class="feat"><strong>Purging push-through</strong><span>Two sleeves meet in the bore, flow never reaches the body</span></div>
            <div class="feat"><strong>Replaceable wetted set</strong><span>The whole wetted path is a service item</span></div>
            <div class="feat"><strong>Moulded wiping seal</strong><span>Clears the gate on every cycle</span></div>
            <div class="feat"><strong>Bidirectional drop-tight</strong><span>Seals with pressure on either face</span></div>
          </div>
        </div>

        <div class="card c-ask s-ask">
          <strong>Specify the FLUX</strong>
          <span class="ask-line">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="ask-mail" href="/cdn-cgi/l/email-protection#9ceffdf0f9efdcfdeef2f9e8e8b2fff3f1"><span class="__cf_email__" data-cfemail="4132202d24320120332f2435356f222e2c">[email&#160;protected]</span></a>
            <span class="ask-call">Call 844-785-7585</span>
          </div>
        </div>


        <div class="card c-brochure s-brochure">
          <strong>FLUX Series Brochure</strong>
          <span class="ask-line" aria-hidden="true">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="brochure-download" target="_blank" rel="noopener noreferrer" href="documents/ARNETT_Valves_FLUX_SERIES_technical_EN.pdf" download>DOWNLOAD</a>
            <span class="ask-call" aria-hidden="true">Call 844-785-7585</span>
          </div>
        </div>
      </div>
    </section>

    <!-- ==================== SECTION: XA SERIES ==================== -->
    <section class="stage" id="halo" style="--bg-pos: 78% center">
      <div class="stage-bg" aria-hidden="true">
        <div class="bg-slide is-active" style="background-image: url('images/halo_series_01.jpg')"></div>
        <div class="bg-slide" style="background-image: url('images/halo_series_02.jpg')"></div>
      </div>
      <div class="side side-wide">

        <div class="card c-title s-title">
          <div class="eyebrow">Knife gate valves</div>
          <h2>Fully lined</h2>
          <div class="title-meta num">
            <span>HALO series</span>
            <span class="sep"></span>
            <span>2 models</span>
          </div>
        </div>

        <div class="card stat s-press">
          <div class="bar-head">Max pressure</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">290<small>PSI</small></div>
            <div class="stat-value num stat-val-metric">20 bar</div>
          </div>
        </div>
        <div class="card stat s-f2f">
          <div class="bar-head">Face-to-face</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">1.9"<em>&ndash;</em>5.5"</div>
            <div class="stat-value num stat-val-metric">48 to 140 mm</div>
          </div>
        </div>
        <div class="card stat s-temp">
          <div class="bar-head">Max temperature</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">435<small>&deg;F</small></div>
            <div class="stat-value num stat-val-metric">224&deg;C</div>
          </div>
        </div>
        <div class="card stat s-size">
          <div class="bar-head">Sizes</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2"<em>&ndash;</em>24"</div>
            <div class="stat-value num stat-val-metric dn-two-line"><span class="dn-line"><span class="dn-word">from</span> DN50</span><span class="dn-line"><span class="dn-word">to</span> DN600</span></div>
          </div>
        </div>

        <div class="card s-models">
          <div class="bar-head"><span>Models</span></div>
          <div class="rows is-two">
            <div class="row"><span class="code">HALO S</span><span class="desc"><strong>Lined knife gate</strong>The standard lined valve, 2" to 24"</span><span class="range num"><span class="u-us">145 psi</span><span class="u-metric">10 bar</span></span></div>
            <div class="row"><span class="code">HALO L</span><span class="desc"><strong>High pressure lined</strong>Twice the pressure, 2" to 16"</span><span class="range num"><span class="u-us">290 psi</span><span class="u-metric">20 bar</span></span></div>
          </div>
        </div>

        <div class="card s-feats">
          <div class="bar-head"><span>Key features</span></div>
          <div class="feats">
            <div class="feat"><strong>One-piece polyurethane liner</strong><span>Covers the full wetted path</span></div>
            <div class="feat"><strong>Self-gasketing flange seal</strong><span>The liner doubles as the gasket</span></div>
            <div class="feat"><strong>Self-flushing full port</strong><span>The sleeve groove clears itself</span></div>
            <div class="feat"><strong>Zero-leak shut-off</strong><span>Bidirectional, leakage class VI</span></div>
          </div>
        </div>

        <div class="card c-ask s-ask">
          <strong>Specify the HALO</strong>
          <span class="ask-line">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="ask-mail" href="/cdn-cgi/l/email-protection#2556444940566544574b4051510b464a48"><span class="__cf_email__" data-cfemail="6310020f06102302110d0617174d000c0e">[email&#160;protected]</span></a>
            <span class="ask-call">Call 844-785-7585</span>
          </div>
        </div>


        <div class="card c-brochure s-brochure">
          <strong>HALO Series Brochure</strong>
          <span class="ask-line" aria-hidden="true">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="brochure-download" target="_blank" rel="noopener noreferrer" href="documents/ARNETT_Valves_HALO_SERIES_technical_EN.pdf" download>DOWNLOAD</a>
            <span class="ask-call" aria-hidden="true">Call 844-785-7585</span>
          </div>
        </div>
      </div>
      <div class="stage-spacer" style="--img: url('images/halo_series_01.jpg'); --pos: 78% center"></div>
    </section>

    <!-- ==================== SECTION: XR SERIES ==================== -->
    <section class="stage" id="apex" style="--bg-pos: 18% center">
      <div class="stage-bg" aria-hidden="true">
        <div class="bg-slide is-active" style="background-image: url('images/apex_series_01.jpg')"></div>
        <div class="bg-slide" style="background-image: url('images/apex_series_02.jpg')"></div>
      </div>
      <div class="stage-spacer" style="--img: url('images/apex_series_01.jpg'); --pos: 18% center"></div>
      <div class="side side-wide">

        <div class="card c-title s-title">
          <div class="eyebrow">Knife gate valves</div>
          <h2>Guided shear</h2>
          <div class="title-meta num">
            <span>APEX series</span>
            <span class="sep"></span>
            <span>3 models</span>
          </div>
        </div>

        <div class="card stat s-press">
          <div class="bar-head">Max pressure</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">725<small>PSI</small></div>
            <div class="stat-value num stat-val-metric">50 bar</div>
          </div>
        </div>
        <div class="card stat s-f2f">
          <div class="bar-head">Face-to-face</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2.0"<em>&ndash;</em>4.5"</div>
            <div class="stat-value num stat-val-metric">51 to 114 mm</div>
          </div>
        </div>
        <div class="card stat s-temp">
          <div class="bar-head">Max temperature</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">400<small>&deg;F</small></div>
            <div class="stat-value num stat-val-metric">204&deg;C</div>
          </div>
        </div>
        <div class="card stat s-size">
          <div class="bar-head">Sizes</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2"<em>&ndash;</em>24"</div>
            <div class="stat-value num stat-val-metric dn-two-line"><span class="dn-line"><span class="dn-word">from</span> DN50</span><span class="dn-line"><span class="dn-word">to</span> DN600</span></div>
          </div>
        </div>

        <div class="card s-models">
          <div class="bar-head"><span>Models</span></div>
          <div class="rows">
            <div class="row"><span class="code">APEX S</span><span class="desc"><strong>Guided shear</strong>General guided shear duty</span><span class="range num"><span class="u-us">145 psi</span><span class="u-metric">10 bar</span></span></div>
            <div class="row"><span class="code">APEX H</span><span class="desc"><strong>High pressure</strong>Same lay length</span><span class="range num"><span class="u-us">363 psi</span><span class="u-metric">25 bar</span></span></div>
            <div class="row"><span class="code">APEX X</span><span class="desc"><strong>Extreme pressure</strong>ANSI Class 300 and above</span><span class="range num"><span class="u-us">725 psi</span><span class="u-metric">50 bar</span></span></div>
          </div>
        </div>

        <div class="card s-feats">
          <div class="bar-head"><span>Key features</span></div>
          <div class="feats">
            <div class="feat"><strong>Guided shear gate</strong><span>A machined tip cuts solids on the way closed</span></div>
            <div class="feat"><strong>One lay length</strong><span>Identical face-to-face across three classes</span></div>
            <div class="feat"><strong>PTFE scraper</strong><span>Keeps the sealing faces clean every cycle</span></div>
            <div class="feat"><strong>No derating</strong><span>Each model holds its rating to 24 inch</span></div>
          </div>
        </div>

        <div class="card c-ask s-ask">
          <strong>Specify the APEX</strong>
          <span class="ask-line">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="ask-mail" href="/cdn-cgi/l/email-protection#1467757871675475667a7160603a777b79"><span class="__cf_email__" data-cfemail="6b180a070e182b0a19050e1f1f45080406">[email&#160;protected]</span></a>
            <span class="ask-call">Call 844-785-7585</span>
          </div>
        </div>


        <div class="card c-brochure s-brochure">
          <strong>APEX Series Brochure</strong>
          <span class="ask-line" aria-hidden="true">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="brochure-download" target="_blank" rel="noopener noreferrer" href="documents/ARNETT_Valves_APEX_SERIES_technical_EN.pdf" download>DOWNLOAD</a>
            <span class="ask-call" aria-hidden="true">Call 844-785-7585</span>
          </div>
        </div>
      </div>
    </section>

    <!-- ==================== SECTION: SR SERIES ==================== -->
    <section class="stage" id="core" style="--bg-pos: 76% center">
      <div class="stage-bg" aria-hidden="true">
        <div class="bg-slide is-active" style="background-image: url('images/core_series_01.jpg')"></div>
        <div class="bg-slide" style="background-image: url('images/core_series_02.jpg')"></div>
      </div>
      <div class="side side-wide">

        <div class="card c-title s-title">
          <div class="eyebrow">Knife gate valves</div>
          <h2>Replaceable seat</h2>
          <div class="title-meta num">
            <span>CORE series</span>
            <span class="sep"></span>
            <span>2 models</span>
          </div>
        </div>

        <div class="card stat s-press">
          <div class="bar-head">Max pressure</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">1450<small>PSI</small></div>
            <div class="stat-value num stat-val-metric">100 bar</div>
          </div>
        </div>
        <div class="card stat s-f2f">
          <div class="bar-head">Face-to-face</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">1.7"<em>&ndash;</em>6.1"</div>
            <div class="stat-value num stat-val-metric">43 to 154 mm</div>
          </div>
        </div>
        <div class="card stat s-temp">
          <div class="bar-head">Max temperature</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">392<small>&deg;F</small></div>
            <div class="stat-value num stat-val-metric">200&deg;C</div>
          </div>
        </div>
        <div class="card stat s-size">
          <div class="bar-head">Sizes</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2"<em>&ndash;</em>24"</div>
            <div class="stat-value num stat-val-metric dn-two-line"><span class="dn-line"><span class="dn-word">from</span> DN50</span><span class="dn-line"><span class="dn-word">to</span> DN600</span></div>
          </div>
        </div>

        <div class="card s-models">
          <div class="bar-head"><span>Models</span></div>
          <div class="rows is-two">
            <div class="row"><span class="code">CORE S</span><span class="desc"><strong>Unidirectional</strong><span class="u-us">The published range, 2" to 24"</span><span class="u-metric">The published range, DN50 to DN600</span></span><span class="range num"><span class="u-us">232 psi</span><span class="u-metric">16 bar</span></span></div>
            <div class="row"><span class="code">CORE W</span><span class="desc"><strong>Extreme pressure</strong>Engineered to order</span><span class="range num"><span class="u-us">1450 psi</span><span class="u-metric">100 bar</span></span></div>
          </div>
        </div>

        <div class="card s-feats">
          <div class="bar-head"><span>Key features</span></div>
          <div class="feats">
            <div class="feat"><strong>Field-replaceable seat</strong><span>The site crew changes it with the valve in the line</span></div>
            <div class="feat"><strong>Metal seat plus soft seat</strong><span>Metal holds geometry, sleeve holds the seal</span></div>
            <div class="feat"><strong>Maintenance-free top seal</strong><span>One moulded seal replaces the packing gland</span></div>
            <div class="feat"><strong>Thickest knife on the market</strong><span>Built for repeated heavy cycling</span></div>
          </div>
        </div>

        <div class="card c-ask s-ask">
          <strong>Specify the CORE</strong>
          <span class="ask-line">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="ask-mail" href="/cdn-cgi/l/email-protection#6310020f06102302110d0617174d000c0e"><span class="__cf_email__" data-cfemail="d4a7b5b8b1a794b5a6bab1a0a0fab7bbb9">[email&#160;protected]</span></a>
            <span class="ask-call">Call 844-785-7585</span>
          </div>
        </div>


        <div class="card c-brochure s-brochure">
          <strong>CORE Series Brochure</strong>
          <span class="ask-line" aria-hidden="true">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="brochure-download" target="_blank" rel="noopener noreferrer" href="documents/ARNETT_Valves_CORE_SERIES_technical_EN.pdf" download>DOWNLOAD</a>
            <span class="ask-call" aria-hidden="true">Call 844-785-7585</span>
          </div>
        </div>
      </div>
      <div class="stage-spacer" style="--img: url('images/core_series_01.jpg'); --pos: 76% center"></div>
    </section>

    <!-- ==================== SECTION: SU SERIES ==================== -->
    <section class="stage" id="omni" style="--bg-pos: 26% center">
      <div class="stage-bg" aria-hidden="true">
        <div class="bg-slide is-active" style="background-image: url('images/omni_series_01.jpg')"></div>
        <div class="bg-slide" style="background-image: url('images/omni_series_02.jpg')"></div>
      </div>
      <div class="stage-spacer" style="--img: url('images/omni_series_01.jpg'); --pos: 26% center"></div>
      <div class="side side-wide">

        <div class="card c-title s-title">
          <div class="eyebrow">Knife gate valves</div>
          <h2>Bidirectional full bore</h2>
          <div class="title-meta num">
            <span>OMNI series</span>
            <span class="sep"></span>
            <span>1 model</span>
          </div>
        </div>

        <div class="card stat s-press">
          <div class="bar-head">Max pressure</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">145<small>PSI</small></div>
            <div class="stat-value num stat-val-metric">10 bar</div>
          </div>
        </div>
        <div class="card stat s-f2f">
          <div class="bar-head">Face-to-face</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">1.7"<em>&ndash;</em>6.1"</div>
            <div class="stat-value num stat-val-metric">43 to 154 mm</div>
          </div>
        </div>
        <div class="card stat s-temp">
          <div class="bar-head">Max temperature</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">392<small>&deg;F</small></div>
            <div class="stat-value num stat-val-metric">200&deg;C</div>
          </div>
        </div>
        <div class="card stat s-size">
          <div class="bar-head">Sizes</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">2"<em>&ndash;</em>24"</div>
            <div class="stat-value num stat-val-metric dn-two-line"><span class="dn-line"><span class="dn-word">from</span> DN50</span><span class="dn-line"><span class="dn-word">to</span> DN600</span></div>
          </div>
        </div>

        <div class="card s-models">
          <div class="bar-head"><span>Models</span></div>
          <div class="rows is-one">
            <div class="row"><span class="code">OMNI S</span><span class="desc"><strong>Bidirectional</strong>One model covers the series</span><span class="range num"><span class="u-us">145 psi</span><span class="u-metric">10 bar</span></span></div>
          </div>
        </div>

        <div class="card s-feats">
          <div class="bar-head"><span>Key features</span></div>
          <div class="feats">
            <div class="feat"><strong>Zero-pocket cavity</strong><span>Nothing settles below the gate</span></div>
            <div class="feat"><strong>O-ring profile side seal</strong><span>Seals with pressure on either face</span></div>
            <div class="feat"><strong>Maintenance-free top seal</strong><span>The packing line drops off the routine</span></div>
            <div class="feat"><strong>One valve, many types</strong><span>Replaces six or seven conventional types</span></div>
          </div>
        </div>

        <div class="card c-ask s-ask">
          <strong>Specify the OMNI</strong>
          <span class="ask-line">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="ask-mail" href="/cdn-cgi/l/email-protection#3043515c55437051425e5544441e535f5d"><span class="__cf_email__" data-cfemail="e89b89848d9ba8899a868d9c9cc68b8785">[email&#160;protected]</span></a>
            <span class="ask-call">Call 844-785-7585</span>
          </div>
        </div>


        <div class="card c-brochure s-brochure">
          <strong>OMNI Series Brochure</strong>
          <span class="ask-line" aria-hidden="true">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="brochure-download" target="_blank" rel="noopener noreferrer" href="documents/ARNETT_Valves_OMNI_SERIES_technical_EN.pdf" download>DOWNLOAD</a>
            <span class="ask-call" aria-hidden="true">Call 844-785-7585</span>
          </div>
        </div>
      </div>
    </section>


    <!-- ==================== SECTION: FX SERIES ==================== -->
    <section class="stage" id="fx" style="--bg-pos: 20% center">
      <div class="stage-bg" aria-hidden="true">
        <div class="bg-slide is-active" style="background-image: url('images/fx_series_01.jpg')"></div>
        <div class="bg-slide" style="background-image: url('images/fx_series_02.jpg')"></div>
      </div>
      <div class="stage-spacer" style="--img: url('images/fx_series_01.jpg'); --pos: 20% center"></div>
      <div class="side side-wide">

        <div class="card c-title s-title">
          <div class="eyebrow">Penstocks</div>
          <h2>Water penstocks</h2>
          <div class="title-meta num">
            <span>FX series</span>
            <span class="sep"></span>
            <span>1 model</span>
          </div>
        </div>

        <div class="card stat s-press">
          <div class="bar-head">Working head</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">32.8<small>ft</small></div>
            <div class="stat-value num stat-val-metric">10 m</div>
          </div>
        </div>
        <div class="card stat s-f2f">
          <div class="bar-head">Installation</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">3 types</div>
            <div class="stat-value num stat-val-metric">3 types</div>
            <div class="stat-note num">Channel, wall or embedded</div>
          </div>
        </div>
        <div class="card stat s-temp">
          <div class="bar-head">Max temperature</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">176<small>&deg;F</small></div>
            <div class="stat-value num stat-val-metric">80&deg;C</div>
          </div>
        </div>
        <div class="card stat s-size">
          <div class="bar-head">Sizes</div>
          <div class="stat-body">
            <div class="stat-value num stat-val-us">118.1"</div>
            <div class="stat-value num stat-val-metric">3000<small>mm</small></div>
            <div class="stat-note num"><span class="u-us">Up to 118.1" x 118.1"</span><span class="u-metric">Up to 3000 x 3000 mm</span></div>
          </div>
        </div>

        <div class="card s-models">
          <div class="bar-head"><span>Models</span></div>
          <div class="rows is-one">
            <div class="row"><span class="code">FX</span><span class="desc"><strong>Wall mounted penstock</strong>Welded assembly, built to the opening</span><span class="range num"><span class="u-us">32.8 ft head</span><span class="u-metric">10 m head</span></span></div>
          </div>
        </div>

        <div class="card s-feats">
          <div class="bar-head"><span>Key features</span></div>
          <div class="feats">
            <div class="feat"><strong>One-piece seal profile</strong><span>Curves through the upper corners, so no joint sits in the sealing path</span></div>
            <div class="feat"><strong>Bidirectional as standard</strong><span>Seals with the head arriving on either face</span></div>
            <div class="feat"><strong>Three installation types</strong><span>Channel anchored, cast into the concrete, or bolted to the wall</span></div>
            <div class="feat"><strong>Rising or non-rising spindle</strong><span>Spindle extensions for remote operation, floor stands to the works</span></div>
          </div>
        </div>

        <div class="card c-ask s-ask">
          <strong>Specify the FX</strong>
          <span class="ask-line">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="ask-mail" href="/cdn-cgi/l/email-protection#5c2f3d30392f1c3d2e32392828723f3331"><span class="__cf_email__" data-cfemail="3e4d5f525b4d7e5f4c505b4a4a105d5153">[email&#160;protected]</span></a>
            <span class="ask-call">Call 844-785-7585</span>
          </div>
        </div>

        <div class="card c-brochure s-brochure">
          <strong>FX Series Brochure</strong>
          <span class="ask-line" aria-hidden="true">An Arnett engineer sizes it and quotes it.</span>
          <div class="ask-actions">
            <a class="brochure-download" target="_blank" rel="noopener noreferrer" href="documents/ARNETT_Valves_FX_SERIES_technical_EN.pdf" download>DOWNLOAD</a>
            <span class="ask-call" aria-hidden="true">Call 844-785-7585</span>
          </div>
        </div>

      </div>
    </section>

    <!-- Floating Dock: Problem-oriented series navigation -->
    <nav class="floating-dock" aria-label="Series quick navigation">
      <a class="dock-item" href="#flux"><span class="dock-code">FLUX</span> Push-through</a>
      <a class="dock-item" href="#halo"><span class="dock-code">HALO</span> Lined</a>
      <a class="dock-item" href="#apex"><span class="dock-code">APEX</span> Shear</a>
      <a class="dock-item" href="#core"><span class="dock-code">CORE</span> Replaceable</a>
      <a class="dock-item" href="#omni"><span class="dock-code">OMNI</span> Bidirectional</a>
      <a class="dock-item" href="#fx"><span class="dock-code">FX</span> Penstock</a>
    </nav>


    <!-- ==================== SECTION: CONTACT ==================== -->
    <section class="contact" id="contact">
      <div class="contact-head">
        <h2>Contact Arnett</h2>
        <p>Call, send an email or fill in the form. An Arnett engineer replies with a quote and a recommended model.</p>
      </div>

      <div class="contact-grid">
        <div class="routes">
          <a class="route route-call" href="tel:8447857585">
            <small>Call</small>
            <strong>844-785-7585</strong>
            <span>Monday to Friday, business hours ET</span>
          </a>
          <a class="route route-mail" href="/cdn-cgi/l/email-protection#6013010c05132001120e0514144e030f0d">
            <small>Email</small>
            <strong><span class="__cf_email__" data-cfemail="ddaebcb1b8ae9dbcafb3b8a9a9f3beb2b0">[email&#160;protected]</span></strong>
            <span>Drawings and specs welcome</span>
          </a>
        </div>

        <!-- C7.0: Cognito Forms embed. The compensating styles travel with the
             form because the page stylesheet reaches into the injected markup.
             Every rule is scoped to the card so none of it leaks into the rest
             of the CMS. -->
        <div class="form-card">
          <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://www.cognitoforms.com/f/seamless.js" data-key="tNCHyn7-dUO9MKnc_5WbZg" data-form="1"></script>
          <style>
            /* Spacing, as supplied with the embed. */
            #arnett-valves .form-card .cog-field { margin-bottom: 16px; }
            #arnett-valves .form-card .cog-label { display: block; margin-bottom: 6px; }
            #arnett-valves .form-card .cog-row { margin-left: -8px; margin-right: -8px; }
            #arnett-valves .form-card .cog-col { padding-left: 8px; padding-right: 8px; }
            #arnett-valves .form-card .cog-error-message { padding: 8px 12px; margin-top: 6px; }

            /* Type: the page runs Outfit, Cognito ships Arial and Open Sans
               Condensed. This is the mismatch a visitor notices first. */
            #arnett-valves .form-card input,
            #arnett-valves .form-card textarea,
            #arnett-valves .form-card select,
            #arnett-valves .form-card button,
            #arnett-valves .form-card label {
              font-family: var(--font);
            }

            /* Fields: the page's black text and its hairline rule colour, on
               the white field surface the site already uses. */
            #arnett-valves .form-card .el-input__inner,
            #arnett-valves .form-card .el-textarea__inner {
              border-radius: 10px;
              padding: 13px 15px;
              color: var(--black);
              border-color: var(--rule);
            }
            /* The message field's height and resize behaviour come from an
               inline style Cognito puts on the element, so a rule here would
               lose silently. They belong to the form builder, not the page. */
            #arnett-valves .form-card .el-textarea__inner {
              line-height: 1.45;
            }
            #arnett-valves .form-card .el-input__inner:focus-visible,
            #arnett-valves .form-card .el-textarea__inner:focus-visible {
              outline: 2px solid var(--teal);
              outline-offset: 1px;
            }
            #arnett-valves .form-card .cog-label {
              font-size: 0.8125rem;
              font-weight: 500;
              color: var(--black);
            }
            #arnett-valves .form-card .cog-button--submit {
              border-radius: 30px;
              padding: 14px 26px;
              margin-bottom: 10px;
              font-size: 0.9375rem;
              font-weight: 500;
            }
            /* The submit row is a flex container aligned to the start, so the
               button sits left. Centring the row centres the button. */
            #arnett-valves .form-card .cog-page__navigation {
              justify-content: center;
            }
          </style>
        </div>
      </div>
    </section>

  </div>
</div>

<script>
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;

  /* Unit Toggle Logic */
  var btnUs = document.getElementById('unit-us');
  var btnMetric = document.getElementById('unit-metric');
  var SELECT_LABELS = {
    press: {
      us: ['any pressure', 'to 145 psi', '145 to 363 psi', '363 to 725 psi', 'above 725 psi'],
      metric: ['any pressure', 'to 10 bar', '10 to 25 bar', '25 to 50 bar', 'above 50 bar']
    },
    size: {
      us: ['any size', '2 to 12 inch', '14 to 24 inch', '26 to 48 inch'],
      metric: ['any size', 'DN50 to DN300', 'DN350 to DN600', 'DN650 to DN1200']
    }
  };

  function relabelSelects(unit) {
    /* C5.2: every copy of the sentence carries a data-role, so one pass keeps
       the main panel and the sticky-bar copy in the same unit. */
    Array.prototype.forEach.call(root.querySelectorAll('select[data-role="press"]'), function (sel) {
      Array.from(sel.options).forEach(function (o, i) { o.textContent = SELECT_LABELS.press[unit][i]; });
    });
    Array.prototype.forEach.call(root.querySelectorAll('select[data-role="size"]'), function (sel) {
      Array.from(sel.options).forEach(function (o, i) { o.textContent = SELECT_LABELS.size[unit][i]; });
    });
  }

  function setUnits(unit) {
    root.setAttribute('data-units', unit);
    if (btnUs) btnUs.classList.toggle('is-active', unit === 'us');
    if (btnMetric) btnMetric.classList.toggle('is-active', unit === 'metric');
    relabelSelects(unit);
    render();
  }
  if (btnUs) btnUs.addEventListener('click', function () { setUnits('us'); });
  if (btnMetric) btnMetric.addEventListener('click', function () { setUnits('metric'); });

  /* Series data from the Arnett Valves specification set */
  var SERIES = [
    { code:'FLUX', anchor:'flux', name:'Purging push-through', duty:'Media that packs and settles',
      line:'Flow stays off the body', media:['slurry','dry'],
      pmax:725, pbar:50, smax:48, dnmax:1200, f2f:[2.1,21.1], mm:[54,537],
      tempF:435, tempC:224, models:4, size:'2"&ndash;48"', metricSize:'DN50&ndash;DN1200' },
    { code:'HALO', anchor:'halo', name:'Fully lined', duty:'Abrasion and chemistry together',
      line:'One-piece liner, 70% solids', media:['slurry','acidic','food','dry'],
      pmax:290, pbar:20, smax:24, dnmax:600, f2f:[1.9,5.5], mm:[48,140],
      tempF:435, tempC:224, models:2, size:'2"&ndash;24"', metricSize:'DN50&ndash;DN600' },
    { code:'APEX', anchor:'apex', name:'Guided shear', duty:'Large solids that jam a conventional gate',
      line:'One lay length, three ratings', media:['slurry','clean','acidic','dry'],
      pmax:725, pbar:50, smax:24, dnmax:600, f2f:[2.0,4.5], mm:[51,114],
      tempF:400, tempC:204, models:3, size:'2"&ndash;24"', metricSize:'DN50&ndash;DN600' },
    { code:'CORE', anchor:'core', name:'Replaceable seat', duty:'A seat the crew can change on site',
      line:'Seat changed in the line', media:['slurry','clean'],
      pmax:1450, pbar:100, smax:24, dnmax:600, f2f:[1.7,6.1], mm:[43,154],
      tempF:392, tempC:200, models:2, size:'2"&ndash;24"', metricSize:'DN50&ndash;DN600' },
    { code:'OMNI', anchor:'omni', name:'Bidirectional', duty:'Pressure arriving from either direction',
      line:'Seals from either face', media:['slurry','clean'],
      pmax:145, pbar:10, smax:24, dnmax:600, f2f:[1.7,6.1], mm:[43,154],
      tempF:392, tempC:200, models:1, size:'2"&ndash;24"', metricSize:'DN50&ndash;DN600' },
    { code:'FX', anchor:'fx', name:'Water penstocks', duty:'Open channels and wall openings in water',
      line:'Channels and wall openings', media:['clean'],
      pmax:null, pbar:null, headFt:32.8, headM:10, smax:118, dnmax:3000, f2f:[null,null], mm:[null,null],
      tempF:176, tempC:80, models:1, size:'to 118.1"', metricSize:'to 3000 mm' }
  ];

  var q = function (id) { return root.querySelector('#' + id); };
  var elMedia = q('f-media'), elPress = q('f-press'), elSize = q('f-size');
  /* C7.0: #rfq-msg left with the hand-built form. The guards below keep this
     inert, and the read comes back to life if a field with that id returns. */
  var elReset = q('res-reset'), elMsg = q('rfq-msg');
  if (!elMedia) return;

  var WORDS = { any:'', '145':'to 145 psi', '363':'145 to 363 psi', '725':'363 to 725 psi', '1450':'above 725 psi' };
  var WORDS_M = { any:'', '145':'to 10 bar', '363':'10 to 25 bar', '725':'25 to 50 bar', '1450':'above 50 bar' };
  var SIZEW = { any:'', '12':'2 to 12 inch', '24':'14 to 24 inch', '48':'26 to 48 inch' };
  var SIZEW_M = { any:'', '12':'DN50 to DN300', '24':'DN350 to DN600', '48':'DN650 to DN1200' };
  var MEDW  = { any:'', slurry:'abrasive slurry', clean:'clean water', acidic:'acidic media', dry:'dry bulk', food:'food or chemical media' };

  function matches(s, media, press, size) {
    if (media !== 'any' && s.media.indexOf(media) === -1) return false;
    if (press !== 'any' && (s.pmax === null || s.pmax < parseInt(press, 10))) return false;
    if (size !== 'any' && s.smax < parseInt(size, 10)) return false;
    return true;
  }

  function fmt(n) { return (n % 1 === 0) ? n.toFixed(0) : n.toFixed(1); }

  function paint(hits, filtered) {
    var isMetric = root.getAttribute('data-units') === 'metric';
    var models = hits.reduce(function (a, s) { return a + s.models; }, 0);
    q('s-meta').innerHTML = '<span>' + hits.length + ' series</span>' +
      '<span class="sep"></span><span>' + models + (models === 1 ? ' model' : ' models') + '</span>';

    /* The penstock series carries working head, not a pressure rating, so the
       pressure card aggregates over the series that are actually rated. */
    var rated = hits.filter(function (s) { return typeof s.pmax === 'number'; });
    var pmax = rated.length ? Math.max.apply(null, rated.map(function (s) { return s.pmax; })) : 0;
    var pbar = rated.length ? Math.max.apply(null, rated.map(function (s) { return s.pbar; })) : 0;
    var std = rated.filter(function (s) { return s.pmax <= 725; });
    var stdMax = std.length ? Math.max.apply(null, std.map(function (s) { return s.pmax; })) : 0;
    var headFt = hits.filter(function (s) { return typeof s.headFt === 'number'; });
    var headMaxFt = headFt.length ? Math.max.apply(null, headFt.map(function (s) { return s.headFt; })) : 0;
    var headMaxM = headFt.length ? Math.max.apply(null, headFt.map(function (s) { return s.headM; })) : 0;

    var elPressCard = root.querySelector('.c-pressure');
    var elPressLabel = elPressCard ? elPressCard.querySelector('.bar-head') : null;
    var elPressUs = elPressCard ? elPressCard.querySelector('.stat-val-us') : null;
    var elPressMetric = elPressCard ? elPressCard.querySelector('.stat-val-metric') : null;
    if (elPressLabel) elPressLabel.textContent = rated.length ? 'Max pressure' : 'Working head';
    if (elPressUs) elPressUs.innerHTML = rated.length
      ? pmax + '<small>PSI</small>'
      : headMaxFt + '<small>ft</small>';
    if (elPressMetric) elPressMetric.innerHTML = rated.length ? pbar + ' bar' : headMaxM + ' m';


    var geo = hits.filter(function (s) { return s.f2f && typeof s.f2f[0] === 'number'; });
    var f2fLo = geo.length ? Math.min.apply(null, geo.map(function (s) { return s.f2f[0]; })) : 0;
    var f2fHi = geo.length ? Math.max.apply(null, geo.map(function (s) { return s.f2f[1]; })) : 0;
    var mmLo = geo.length ? Math.min.apply(null, geo.map(function (s) { return s.mm[0]; })) : 0;
    var mmHi = geo.length ? Math.max.apply(null, geo.map(function (s) { return s.mm[1]; })) : 0;

    var elF2fCard = root.querySelector('.c-f2f');
    var elF2fUs = elF2fCard ? elF2fCard.querySelector('.stat-val-us') : null;
    var elF2fMetric = elF2fCard ? elF2fCard.querySelector('.stat-val-metric') : null;
    if (elF2fUs) elF2fUs.innerHTML = geo.length ? fmt(f2fLo) + '"<em>&ndash;</em>' + fmt(f2fHi) + '"' : 'Per project';
    if (elF2fMetric) elF2fMetric.innerHTML = geo.length ? mmLo + ' to ' + mmHi + ' mm' : 'Per project';

    var tF = Math.max.apply(null, hits.map(function (s) { return s.tempF; }));
    var tC = Math.max.apply(null, hits.map(function (s) { return s.tempC; }));

    var elTempCard = root.querySelector('.c-temp');
    var elTempUs = elTempCard ? elTempCard.querySelector('.stat-val-us') : null;
    var elTempMetric = elTempCard ? elTempCard.querySelector('.stat-val-metric') : null;
    if (elTempUs) elTempUs.innerHTML = tF + '<small>&deg;F</small>';
    if (elTempMetric) elTempMetric.innerHTML = tC + '&deg;C';

    var sMax = Math.max.apply(null, hits.map(function (s) { return s.smax; }));
    var dnMax = Math.max.apply(null, hits.map(function (s) { return s.dnmax; }));

    var elSizeCard = root.querySelector('.c-size');
    var elSizeUs = elSizeCard ? elSizeCard.querySelector('.stat-val-us') : null;
    var elSizeMetric = elSizeCard ? elSizeCard.querySelector('.stat-val-metric') : null;
    if (elSizeUs) elSizeUs.innerHTML = '2"<em>&ndash;</em>' + sMax + '"';
    if (elSizeMetric) elSizeMetric.innerHTML = '<span class="dn-line"><span class="dn-word">from</span> DN50</span>' +
      '<span class="dn-line"><span class="dn-word">to</span> DN' + dnMax + '</span>';
    if (elSizeMetric) elSizeMetric.classList.add('dn-two-line');

    /* Linked Series rows with subtle teal hover */
    q('s-series-head').textContent = filtered ? 'Matching series' : 'All series';
    q('s-series').innerHTML = hits.map(function (s) {
      var modelsTxt = s.models + (s.models === 1 ? ' model' : ' models');
      return '<a class="series-row-link" href="#' + s.anchor + '">' +
        '<span class="code">' + s.code + '</span>' +
        '<span class="desc"><strong>' + s.name + '</strong>' + s.line + '</span>' +
        '<span class="range num">' +
        '<span class="u-us">' + s.size + '<small>' + modelsTxt + '</small></span>' +
        '<span class="u-metric">' + s.metricSize + '<small>' + modelsTxt + '</small></span>' +
        '</span></a>';
    }).join('');

    q('s-duty').innerHTML = hits.map(function (s) {
      return '<a class="duty-row-link" href="#' + s.anchor + '"><span class="k">' + s.duty +
        '</span><span class="v"><span class="code">' + s.code + '</span></span></a>';
    }).join('');
  }

  function paintEmpty() {
    q('s-meta').innerHTML = '<span>Engineered</span><span class="sep"></span><span>to order</span>';
    ['.c-pressure','.c-f2f','.c-temp','.c-size'].forEach(function (sel) {
      var card = root.querySelector(sel);
      if (!card) return;
      var elUs = card.querySelector('.stat-val-us');
      var elMetric = card.querySelector('.stat-val-metric');
      if (elUs) elUs.innerHTML = 'To the duty';
      if (elMetric) elMetric.innerHTML = 'To the duty';
    });

    q('s-series-head').textContent = 'Engineered to order';
    q('s-series').innerHTML = '<div class="series-row-link"><span class="code">AV</span>' +
      '<span class="desc"><strong>Built to the duty</strong>Arnett engineers valves to order</span>' +
      '<span class="range num">Custom<small>on request</small></span></div>';
    q('s-duty').innerHTML = '<div class="kv-row" style="font-size: 0.875rem; line-height: 1.4;"><span class="k">This combination sits outside the standard range. ' +
      'An Arnett engineer will size it.</span></div>';
  }

  function sentence(media, press, size) {
    var isMetric = root.getAttribute('data-units') === 'metric';
    var W = isMetric ? WORDS_M : WORDS;
    var S = isMetric ? SIZEW_M : SIZEW;
    var parts = [];
    if (MEDW[media]) parts.push('for ' + MEDW[media]);
    if (W[press]) parts.push(W[press]);
    if (S[size]) parts.push('in ' + S[size]);
    if (!parts.length) return '';
    return 'Looking for a knife gate valve ' + parts.join(', ') + '.';
  }

  function render() {
    var media = elMedia.value, press = elPress.value, size = elSize.value;
    var filtered = (media !== 'any' || press !== 'any' || size !== 'any');
    var hits = SERIES.filter(function (s) { return matches(s, media, press, size); });

    if (hits.length) {
      paint(hits, filtered);
    } else {
      paintEmpty();
    }

    if (elMsg && !elMsg.dataset.touched) elMsg.value = sentence(media, press, size);
  }

  [elMedia, elPress, elSize].forEach(function (el) { el.addEventListener('change', render); });

  /* C5.2: the compact copy in the sticky bar. */
  var navFilter = q('nav-filter');
  var nMedia = q('n-media'), nPress = q('n-press'), nSize = q('n-size');
  /* Named here, so the reset handler below can call it no matter in which
     order the listeners were registered. */
  var syncNav = function () {};

  if (navFilter && nMedia && nPress && nSize) {
    syncNav = function () {
      nMedia.value = elMedia.value;
      nPress.value = elPress.value;
      nSize.value = elSize.value;
    };

    function jumpToResults() {
      /* C5.2e: on desktop land at the very top. Stopping at panel-one left the
         filter panel tucked behind the sticky bar, so neither copy was usable.
         C6.2: on the phone the bar now sits directly above the series list, so
         the bar itself is the landing point. Asking the DOM rather than the
         width keeps the two in step by construction. */
      var bar = root.querySelector('.filterbar');
      var inHero = bar && bar.parentNode && bar.parentNode.classList
        && bar.parentNode.classList.contains('grid');
      var target = inHero ? bar : root;
      if (target && target.scrollIntoView) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }

    [nMedia, nPress, nSize].forEach(function (sel) {
      sel.addEventListener('change', function () {
        elMedia.value = nMedia.value;
        elPress.value = nPress.value;
        elSize.value = nSize.value;
        render();
        jumpToResults();
      });
    });

    /* The main panel keeps the compact copy in step. The reset button calls
       syncNav itself (see its handler) because it sets values silently. */
    [elMedia, elPress, elSize].forEach(function (el) { el.addEventListener('change', syncNav); });
    syncNav();

    /* Reveal it once the main filter panel has scrolled above the viewport. */
    var filterBar = root.querySelector('.filterbar');
    if (filterBar && 'IntersectionObserver' in window) {
      new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          var gone = !entry.isIntersecting && entry.boundingClientRect.top < 0;
          navFilter.classList.toggle('is-visible', gone);
        });
      }, { threshold: 0 }).observe(filterBar);
    }
  }
  if (elMsg) elMsg.addEventListener('input', function () { elMsg.dataset.touched = '1'; });
  if (elReset) elReset.addEventListener('click', function () {
    elMedia.value = 'any'; elPress.value = 'any'; elSize.value = 'any';
    if (elMsg) delete elMsg.dataset.touched;
    render();
    syncNav();
  });

  /* Floating Dock active spy on scroll */
  var dockItems = root.querySelectorAll('.dock-item');
  var stages = root.querySelectorAll('.stage');
  if (dockItems.length && stages.length && 'IntersectionObserver' in window) {
    var dockMap = {};
    dockItems.forEach(function (item) {
      var href = item.getAttribute('href');
      if (href && href.startsWith('#')) dockMap[href.slice(1)] = item;
    });
    var dockObs = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          var id = entry.target.id;
          dockItems.forEach(function (d) { d.classList.remove('is-active'); });
          if (dockMap[id]) dockMap[id].classList.add('is-active');
        }
      });
    }, { rootMargin: '-40% 0px -40% 0px' });
    stages.forEach(function (s) { dockObs.observe(s); });
  }

  render();
})();
</script>
    <script src="https://player.vimeo.com/api/player.js"></script>
<script>
/* C6.2: on the phone the filter bar belongs directly above the series list.
   It is a sibling of the hero in the markup, so the move is done here. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  var bar = root.querySelector('.filterbar');
  var grid = root.querySelector('.stage.hero .grid');
  var seriesCard = root.querySelector('.stage.hero .c-series');
  if (!bar || !grid || !seriesCard) return;
  var mq = window.matchMedia ? window.matchMedia('(max-width: 767px)') : null;
  if (!mq) return;

  /* Remember the desktop home before anything moves. */
  var home = bar.parentNode;
  var next = bar.nextSibling;

  function place() {
    if (mq.matches) {
      if (bar.parentNode !== grid) grid.insertBefore(bar, seriesCard);
    } else if (bar.parentNode !== home) {
      home.insertBefore(bar, next);
    }
  }
  place();
  if (mq.addEventListener) mq.addEventListener('change', place);
})();
</script>
<script>
/* C4.10: the video starts when it scrolls into view, not on page load.
   C6.1: the phone gets its own cut of the same film. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  var frame = root.querySelector('.video-band iframe');
  if (!frame) return;

  /* C6.1: choose the cut before anything else touches the frame, so the player
     is built on the right source. */
  var mq = window.matchMedia ? window.matchMedia('(max-width: 767px)') : null;
  var desktopSrc = frame.getAttribute('src');
  var mobileSrc = frame.getAttribute('data-src-mobile');

  function pickSource() {
    if (!mq || !mobileSrc) return;
    var want = mq.matches ? mobileSrc : desktopSrc;
    if (frame.getAttribute('src') !== want) frame.setAttribute('src', want);
  }
  pickSource();

  if (typeof Vimeo === 'undefined' || !Vimeo.Player) return;
  if (!('IntersectionObserver' in window)) return;

  var player = null;
  var started = false;

  function startPlayer() {
    if (started) return;
    started = true;
    try {
      player = new Vimeo.Player(frame);
      player.ready().then(function () { return player.play(); }).catch(function () {});
    } catch (e) { /* the poster stays until the user reaches the band */ }
  }

  var band = root.querySelector('.video-band');
  /* A sliver of the band peeking above the fold is not enough. Playback
     starts only when 60% of the band is on screen, so scrolling down to it
     is a deliberate act. */
  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        startPlayer();
        observer.disconnect();
      }
    });
  }, { threshold: 0.6 });
  observer.observe(band);

  /* C6.1: crossing the breakpoint swaps the cut. Rotation and a resized
     window both land here. The old player is torn down first. */
  if (mq && mq.addEventListener) {
    mq.addEventListener('change', function () {
      pickSource();
      if (player) { try { player.destroy(); } catch (e) {} player = null; }
      started = false;
      startPlayer();
    });
  }
})();
</script>
<script>
/* C4.11: Applications slideshow. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  var band = root.querySelector('.app-band');
  if (!band) return;

  var slides = Array.prototype.slice.call(band.querySelectorAll('.app-slide'));
  var buttons = Array.prototype.slice.call(band.querySelectorAll('.app-nav-item'));
  var title = band.querySelector('#app-caption-title');
  var sub = band.querySelector('#app-caption-sub');
  if (!slides.length || !buttons.length) return;

  /* Captions per slide; keep them next to the slide data so adding an image
     later means one list entry plus one markup line. */
  var captions = [
    ['Mining &amp; minerals', 'Knife gate valves and penstocks in mining and minerals processing'],
    ['Pulp &amp; paper', 'Pulp, paper and board mills in continuous operation'],
    ['Power generation', 'From conventional plants to hydro and alternative energy'],
    ['Water treatment', 'From wastewater plants through to hydroelectric stations'],
    ['Chemical processing', 'Valves for chemical, petrochemical and process industries'],
    ['Food processing', 'Hygienic flow control for food and beverage lines'],
    ['Sand &amp; gravel', 'Aggregates, sand and gravel handling in heavy duty service']
  ];

  var current = 0;
  var autoTimer = null;
  var AUTO_MS = 3000;

  function show(index) {
    if (index === current) return;
    slides[current].classList.remove('is-active');
    buttons[current].classList.remove('is-active');
    current = (index + slides.length) % slides.length;
    slides[current].classList.add('is-active');
    buttons[current].classList.add('is-active');
    if (title && sub && captions[current]) {
      title.innerHTML = captions[current][0];
      sub.innerHTML = captions[current][1];
    }
  }

  buttons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      stopAuto();
      show(parseInt(btn.getAttribute('data-slide'), 10));
    });
  });

  /* Gentle auto-advance, paused while the user interacts. */
  function startAuto() {
    if (autoTimer) return;
    autoTimer = window.setInterval(function () { show(current + 1); }, AUTO_MS);
  }
  function stopAuto() {
    if (autoTimer) { window.clearInterval(autoTimer); autoTimer = null; }
  }
  startAuto();
  band.addEventListener('mouseenter', stopAuto);
  band.addEventListener('mouseleave', startAuto);
})();
</script>
<script>
/* C5.3: one reveal per series section, then the section is left alone. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  if (!root.classList.contains('js-reveal')) return;
  var stages = root.querySelectorAll('.stage:not(.hero)');
  if (!stages.length) return;

  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      entry.target.classList.add('is-revealed');
      observer.unobserve(entry.target);
    });
  }, { threshold: 0.2, rootMargin: '0px 0px -10% 0px' });

  Array.prototype.forEach.call(stages, function (stage) { observer.observe(stage); });
})();
</script>
<script>
/* C5.0: series background sliders - soft cross-fade every 3 s, idle off-screen. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  var bands = root.querySelectorAll('.stage-bg');
  if (!bands.length) return;
  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  /* C5.1: 4 s between frames, at the user's request. */
  var SLIDE_MS = 4000;

  Array.prototype.forEach.call(bands, function (band) {
    var slides = band.querySelectorAll('.bg-slide');
    if (slides.length < 2) return;
    var i = 0, timer = null;

    function advance() {
      slides[i].classList.remove('is-active');
      i = (i + 1) % slides.length;
      slides[i].classList.add('is-active');
    }
    function start() { if (!timer) timer = window.setInterval(advance, SLIDE_MS); }
    function stop() { if (timer) { window.clearInterval(timer); timer = null; } }

    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) start(); else stop();
        });
      }, { threshold: 0.15 }).observe(band.parentNode || band);
    } else {
      start();
    }
  });
})();
</script>
<script>
/* C5.0: in-page jumps handled here, so a host CMS router cannot swallow them. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  root.addEventListener('click', function (e) {
    var a = e.target && e.target.closest ? e.target.closest('a[href^="#"]') : null;
    if (!a || !root.contains(a)) return;
    var id = a.getAttribute('href').slice(1);
    if (!id) return;
    var target = document.getElementById(id);
    if (!target) return;
    e.preventDefault();
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    if (window.history && history.replaceState) history.replaceState(null, '', '#' + id);
  });
})();
</script>
<script>
/* C4.14: dropdown menu toggle. */
(function () {
  'use strict';
  var root = document.getElementById('arnett-valves');
  if (!root) return;
  var btn = root.querySelector('#menu-btn');
  var menu = root.querySelector('#site-menu');
  if (!btn || !menu) return;

  function close() {
    menu.hidden = true;
    btn.setAttribute('aria-expanded', 'false');
  }
  btn.addEventListener('click', function (e) {
    e.stopPropagation();
    var open = menu.hidden;
    menu.hidden = !open;
    btn.setAttribute('aria-expanded', String(open));
  });
  document.addEventListener('click', function (e) {
    if (!menu.hidden && !menu.contains(e.target) && e.target !== btn) close();
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !menu.hidden) close();
  });
  menu.addEventListener('click', function (e) {
    if (e.target.closest('a')) close();
  });
})();
</script>