/* ============================================================
   HexaNex Electronics - main.css
   Theme variant P1 · "Blueprint Lab" (revised)

   Design read (SKILL §0.B):
     B2B component distribution for procurement engineers and buyers, with a
     restrained technical-industrial language: hairline rules instead of card
     boxes, one accent colour, real photography, and motion only where it
     answers a user action.

   Dials:
     DESIGN_VARIANCE 5   asymmetric where it earns its place (split hero, offset
                         media, ruled index), never centred-by-default.
     MOTION_INTENSITY 2  no hover movement, no scroll reveals, no parallax.
                         Every transition here is feedback: focus, press, open.
                         One exception, asked for by name: the catalogue picture
                         scales 1.06 inside a fixed frame on card hover.
     VISUAL_DENSITY 5    spec-driven content, but breathing room around it.

   Rules this file enforces:
     · No box-shadow on content. Elevation is reserved for things that actually
       float above the page: dropdowns, modals, the cookie banner.
     · Nothing moves on hover, apart from that one card picture. Links change
       colour or take an underline; buttons darken. A press is a 1px translate on
       :active, which is feedback, not decoration.
     · One accent (teal). No second brand hue anywhere in the chrome.
     · One corner-radius system: 8px for boxes and controls, 4px for small tags.
     · Controls are at most 8px - no pills, no full-round buttons.
   ============================================================ */
:root{
  --ink:#0c1626;            /* headings, dark bands, footer */
  --ink-2:#1b2740;
  --paper:#f5f7fa;          /* the page */
  --panel:#ffffff;
  --line:#dce4ef;           /* the hairline everything is organised with */
  --line-soft:#eaf0f7;
  --text:#3c4757;
  --muted:#697485;

  --teal:#00a6b4;           /* the one accent */
  --teal-l:#7fe3e9;         /* the accent, lifted to read on a dark ground */
  --teal-ink:#00666f;       /* accent text on a light ground */
  --teal-soft:#e3f3f5;
  --teal-band:#085f68;      /* the closing call-to-action band */

  --radius:8px;
  --radius-sm:4px;
  --maxw:1200px;

  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hx-head-h,112px) + 16px)}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--paper);
  line-height:1.62;-webkit-font-smoothing:antialiased;font-size:1rem}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:650;letter-spacing:-.017em}
h1{font-size:clamp(2.1rem,4vw,3.05rem)}
h2{font-size:clamp(1.55rem,2.6vw,2.15rem)}
h3{font-size:1.06rem;font-weight:650;margin-bottom:.35em}
p{margin:0 0 .95em}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}
::selection{background:var(--teal);color:#fff}

.hx-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hx-muted{color:var(--muted)}
.hx-lede{font-size:1.075rem;color:var(--text);max-width:62ch}

/* The eyebrow. Deliberately rare: at most one per three sections. */
.hx-kicker{font-size:.735rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-ink);font-weight:700;margin:0 0 .7rem}

/* ---------- Buttons ----------
   One shape, one accent. Secondary is an outlined ink button; tertiary is a
   plain underlined text link. */
.hx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border-radius:var(--radius);border:1px solid transparent;font-weight:650;font-size:.94rem;
  padding:.72rem 1.25rem;text-decoration:none;line-height:1.2;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.hx-btn:active{transform:translateY(1px)}
.hx-btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.hx-btn-primary:hover{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.hx-btn-ghost{background:transparent;color:var(--ink);border-color:#b9c4d3}
.hx-btn-ghost:hover{border-color:var(--ink);background:#fff}
.hx-btn-link{background:none;border:none;color:var(--teal-ink);padding:.2rem 0;
  text-decoration:underline;text-underline-offset:3px;font-weight:600}
.hx-btn-sm{padding:.5rem .9rem;font-size:.86rem}
.hx-btn-block{width:100%}
/* Buttons that sit on the dark or teal bands */
.hx-btn-on-dark{background:#fff;color:var(--ink);border-color:#fff}
.hx-btn-on-dark:hover{background:#e7eef5;border-color:#e7eef5}
.hx-btn-on-band{background:transparent;color:#fff;border-color:rgba(255,255,255,.62)}
.hx-btn-on-band:hover{background:rgba(255,255,255,.13);border-color:#fff}

/* Requirement marker on form labels */
.hx-req{color:#c0392b;font-weight:700;margin-left:2px}

/* ============================================================
   Header
   ============================================================ */
.hx-head{position:fixed;top:0;left:0;right:0;z-index:120}

.hx-top{background:var(--ink);color:#c6d2e2;font-size:.845rem}
.hx-top-in{display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:40px;flex-wrap:wrap}
.hx-top-contact{display:flex;align-items:center;gap:18px}
.hx-top-contact a{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.hx-top-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hx-top-contact svg{width:15px;height:15px;fill:none;stroke:var(--teal);stroke-width:1.8}
.hx-top-dot{opacity:.45}
.hx-top-meta{display:flex;align-items:center;gap:20px}
.hx-echo{color:#8fa0b8;font-size:.79rem}

.hx-lang{position:relative}
.hx-lang-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  color:#dbe4f0;padding:.15rem 0;font-size:.845rem}
.hx-lang-btn:hover{color:#fff}
.hx-lang-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.hx-lang-btn .hx-chev{width:12px;height:12px;transition:transform .18s ease}
.hx-lang.open .hx-chev{transform:rotate(180deg)}
.hx-lang-menu{position:absolute;right:0;top:calc(100% + 10px);margin:0;padding:5px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-width:160px;
  z-index:60;display:none;box-shadow:0 12px 28px -16px rgba(12,22,38,.4)}
.hx-lang.open .hx-lang-menu{display:block}
.hx-lang-menu a{display:block;padding:.42rem .65rem;border-radius:var(--radius-sm);
  color:var(--ink);text-decoration:none;font-size:.88rem}
.hx-lang-menu a:hover{background:var(--teal-soft);color:var(--teal-ink)}

/* Language flag. Fail-open: the flag renders straight away and only falls back to
   the globe if the icon is missing or fails to resolve, so nothing depends on JS. */
.hx-lang-flag{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:13px;flex:none;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.16);color:#dfe7f2}
.hx-lang-flag img{display:block;width:100%;height:100%;object-fit:cover}
.hx-lang-flag .hx-globe{display:none;position:absolute;inset:0;margin:auto;width:12px;height:12px;
  fill:none;stroke:currentColor;stroke-width:1.8}
.hx-lang-flag.img-broken img{display:none}
.hx-lang-flag.img-broken .hx-globe{display:block}
.hx-lang-menu .hx-lang-flag{background:rgba(12,22,38,.08);color:var(--ink-2)}
.hx-lang-menu .hx-lang-item{display:flex;align-items:center;gap:9px}
.hx-lang-menu .hx-lang-item.is-active{background:var(--teal-soft);color:var(--teal-ink);
  font-weight:700}

.hx-nav{background:var(--panel);border-bottom:1px solid var(--line);
  transition:background-color .2s ease,border-color .2s ease}
.hx-nav-in{display:flex;align-items:center;gap:24px;min-height:70px}
.hx-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.hx-mark svg{width:50px;height:33px;display:block}
/* The logo is the ligature on its own - no wordmark beside it anywhere, on any page.
   D and G interlock: the D's bowl is painted over the G's ring, so the ring reads as
   passing behind and the two letters make one connected figure. Filled geometry rather
   than outlines, so the weight is identical at 33px and at 200px and nothing depends on
   a font being loaded. D is ink; the G carries the accent, which is what keeps the two
   letters distinguishable where they cross. Draw order in the markup matters: the G is
   first, the D last. */
.hx-mark-base{fill:var(--ink)}
.hx-mark-accent{fill:var(--teal)}

.hx-nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.hx-menu{display:flex;align-items:center;gap:2px;margin:0}
/* Nav items are plain text. The current page takes a rule underneath - never a
   filled block, which reads as a pressed button in a floating bar. */
.hx-m-item{position:relative;display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);
  text-decoration:none;font-weight:600;font-size:.9rem;padding:.55rem .72rem;
  background:none;border:none}
.hx-m-item::after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:.2rem;height:2px;
  background:transparent;transition:background-color .15s ease}
.hx-m-item:hover{color:var(--teal-ink)}
.hx-m-item:hover::after{background:var(--teal-soft)}
.hx-m-item.is-current{color:var(--teal-ink)}
.hx-m-item.is-current::after{background:var(--teal)}
.hx-m-rfq{background:var(--teal);color:#fff;border-radius:var(--radius);margin-left:6px;
  padding:.5rem .95rem}
.hx-m-rfq::after{display:none}
.hx-m-rfq:hover{background:var(--teal-ink);color:#fff}
.hx-m-rfq.is-current{color:#fff;background:var(--teal-ink)}

.hx-drop{position:relative}
.hx-chev{width:13px;height:13px;transition:transform .18s ease;fill:none;stroke:currentColor;
  stroke-width:2;flex:none}
.hx-drop.open .hx-chev,.hx-drop:hover .hx-chev,.hx-drop:focus-within .hx-chev{transform:rotate(180deg)}
.hx-drop-menu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:5px;display:none;z-index:70;
  box-shadow:0 14px 30px -18px rgba(12,22,38,.42)}
/* the gap between button and panel is bridged by the panel's own transparent
   top border, so the pointer never leaves the hover target */
.hx-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.hx-drop:hover .hx-drop-menu,
.hx-drop:focus-within .hx-drop-menu,
.hx-drop.open .hx-drop-menu{display:block}
.hx-drop-menu a{display:block;padding:.5rem .72rem;border-radius:var(--radius-sm);
  color:var(--ink-2);text-decoration:none;font-size:.9rem}
.hx-drop-menu a:hover,.hx-drop-menu a.is-current{background:var(--teal-soft);color:var(--teal-ink)}

/* The header search keeps the original translucent treatment, in both states. */
.hx-nav-search{display:flex;align-items:center;position:relative;margin-left:6px}
.hx-nav-search svg{position:absolute;left:11px;width:15px;height:15px;fill:none;
  stroke:var(--muted);stroke-width:1.8;pointer-events:none}
.hx-nav-search input{border:1px solid var(--line);background:#fbfcfe;border-radius:var(--radius);
  padding:.46rem .8rem .46rem 32px;width:186px;font-size:.88rem;color:var(--ink)}
.hx-nav-search input::placeholder{color:#8d97a6}
.hx-nav-search input:focus{outline:none;border-color:var(--teal);background:#fff}

.hx-burger{display:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.hx-burger span{width:17px;height:2px;background:var(--ink);border-radius:1px;transition:.18s ease}
.hx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Fixed bar: transparent over the page-head band or the homepage banner, solid once
   the page is scrolled. Only the utility strip collapses, so the navigation itself is
   never hidden.
   Because the bar can sit on a photograph, the search field is the one control that is
   always solid white with a leading accent icon: it is the control people look for, and
   a translucent field on a dark image was easy to walk straight past. */
.hx-top{max-height:64px;overflow:visible;transition:max-height .28s ease,opacity .2s ease}
.hx-head.is-scrolled .hx-top{max-height:0;overflow:hidden;opacity:0}
.hx-head.is-scrolled .hx-nav{background:#fff;border-bottom-color:var(--line);
  box-shadow:0 10px 24px -18px rgba(12,22,38,.55)}
.hx-head.is-over:not(.is-scrolled) .hx-nav{background:transparent;border-bottom-color:transparent;
  box-shadow:none}
.hx-head.is-over:not(.is-scrolled) .hx-mark-base{fill:#fff}
.hx-head.is-over:not(.is-scrolled) .hx-mark-accent{fill:var(--teal-l)}
.hx-head.is-over:not(.is-scrolled) .hx-m-item{color:#e6eef7}
.hx-head.is-over:not(.is-scrolled) .hx-m-item:hover{color:#fff}
.hx-head.is-over:not(.is-scrolled) .hx-m-item:hover::after{background:rgba(255,255,255,.4)}
/* The current-page rule stays visible while the bar floats over the banner. It was
   hidden here once, on the theory that there is nothing to point at over a photograph -
   but that made the marker disappear on exactly the pages a visitor arrives on, and a
   column that is lit only after you scroll reads as a bug. The dark ground gets the
   lifted accent so the 2px rule carries at the same weight as it does on white. */
.hx-head.is-over:not(.is-scrolled) .hx-m-item.is-current{color:#fff}
.hx-head.is-over:not(.is-scrolled) .hx-m-item.is-current::after{background:var(--teal-l)}
.hx-head.is-over:not(.is-scrolled) .hx-m-rfq{background:var(--teal);color:#fff}
.hx-head.is-over:not(.is-scrolled) .hx-nav-search input{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.26);color:#fff}
.hx-head.is-over:not(.is-scrolled) .hx-nav-search input::placeholder{color:rgba(255,255,255,.7)}
.hx-head.is-over:not(.is-scrolled) .hx-nav-search svg{stroke:rgba(255,255,255,.8)}
.hx-head.is-over:not(.is-scrolled) .hx-burger{background:transparent;
  border-color:rgba(255,255,255,.4)}
.hx-head.is-over:not(.is-scrolled) .hx-burger span{background:#fff}
@media (max-width:860px){ .hx-top{max-height:150px} }

.hx-main{padding-top:var(--hx-head-h,112px)}
/* pages that open on a dark band draw their own offset inside it */
.hx-main-flush{padding-top:0}
.hx-main-home{padding-top:0}

/* ============================================================
   Homepage banner
   ============================================================ */
.hx-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(86vh,760px);padding-top:var(--hx-head-h,112px);
  padding-bottom:clamp(48px,7vh,84px);background:#0c1626}
.hx-hero-media{position:absolute;inset:0;background:#0c1626}
.hx-hero-media img{width:100%;height:100%;object-fit:cover;object-position:66% 50%}
/* a one-direction scrim: the copy column stays legible, the photograph stays visible */
.hx-hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,15,26,.92) 0%,rgba(9,15,26,.78) 38%,
             rgba(9,15,26,.30) 68%,rgba(9,15,26,.10) 100%)}
/* The banner is a flex row, so this child would shrink to fit its own copy and then be
   centred by the auto margins `.hx-wrap` carries - measured at 1440 the heading sat
   246px to the right of the brand mark, and the banner read as centred-on-the-photo
   while every section below it was flush left. Stretching the wrap to the full row
   width gives the banner the same container as the rest of the page. */
.hx-hero-in{position:relative;z-index:1;display:block;width:100%;
  padding-top:0;padding-bottom:0}
.hx-hero-copy{max-width:660px}
/* Two lines at desktop: the display size is planned around the copy, not the reverse. */
.hx-hero h1{color:#fff;font-size:clamp(1.95rem,3.3vw,2.9rem);margin:10px 0 .55em}
.hx-hero .hx-lede{color:#cfdceb;font-size:1.095rem;max-width:52ch}
.hx-hero .hx-kicker{color:var(--teal-l)}
.hx-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}

/* ============================================================
   Trust strip - one of the two dark bands on a light page
   ============================================================ */
.hx-strip{background:var(--ink);color:#c6d2e2}
.hx-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.hx-strip-item{display:flex;gap:13px;align-items:flex-start;padding:20px 20px 20px 0}
.hx-strip-item + .hx-strip-item{padding-left:20px;border-left:1px solid rgba(255,255,255,.1)}
.hx-strip-item svg{width:19px;height:19px;flex:none;margin-top:3px;fill:none;
  stroke:var(--teal);stroke-width:1.7}
.hx-strip-item b{display:block;color:#fff;font-size:.95rem;font-weight:650}
.hx-strip-item span{font-size:.855rem;color:#93a3ba;line-height:1.5}

/* Track record. It sits inside the same ink block as the row above rather than in a band
   of its own: two dark bands stacked directly under the hero is the alternating
   light/dark rhythm the design rules rule out. Hairline separated, no boxes. */
.hx-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(255,255,255,.1)}
.hx-stat{padding:22px 18px 24px 0}
.hx-stat + .hx-stat{padding-left:18px;border-left:1px solid rgba(255,255,255,.1)}
.hx-stat b{display:block;font-family:var(--font-mono);color:#fff;line-height:1.05;
  font-size:clamp(1.42rem,2.5vw,2rem);font-weight:700;letter-spacing:-.02em}
.hx-stat span{display:block;margin-top:6px;font-size:.815rem;color:#93a3ba;line-height:1.45}

/* ============================================================
   Section primitives
   ============================================================ */
.hx-section{padding:clamp(56px,7.5vw,92px) 0}
.hx-sec-head{max-width:660px;margin-bottom:36px}
.hx-sec-head h2{margin-bottom:.35em}
.hx-sec-head p{margin:0}
.hx-rule{height:1px;background:var(--line);border:0;margin:0}

/* ============================================================
   About - copy beside a photograph, then a ruled list of the four
   things the desk actually does. No cards.
   ============================================================ */
.hx-why{background:var(--paper)}
.hx-why-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4.4vw,64px);align-items:center}
.hx-why-media{position:relative}
.hx-why-media img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:10/7;
  object-fit:cover}
.hx-why-copy h2{margin-top:.15em}
.hx-why-points{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.hx-why-points li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:16px}
.hx-why-points b{color:var(--ink);font-weight:650;font-size:.94rem}
.hx-why-points span{font-size:.92rem;color:var(--muted)}

/* ============================================================
   Product categories - a ruled index, three across
   ============================================================ */
.hx-range{background:var(--panel)}
.hx-range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.hx-range-item{display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--line);
  text-decoration:none;align-items:flex-start}
.hx-range-glyph{flex:none;width:40px;height:40px;border-radius:var(--radius);
  background:var(--teal-soft);display:flex;align-items:center;justify-content:center}
.hx-range-glyph svg{width:21px;height:21px;fill:none;stroke:var(--teal-ink);stroke-width:1.7}
.hx-range-item h3{margin:2px 0 .3em;font-size:1rem}
.hx-range-item p{margin:0;font-size:.9rem;color:var(--muted)}
.hx-range-item:hover h3{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Stock - supplier tabs over a ruled shelf
   ============================================================ */
.hx-stock{background:var(--paper)}
.hx-stock-tabs{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 0 28px;
  border-bottom:1px solid var(--line)}
.hx-chip{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:.6rem .9rem;font-weight:600;font-size:.92rem;margin-bottom:-1px;
  border-radius:0;transition:color .15s ease,border-color .15s ease}
.hx-chip:hover{color:var(--teal-ink)}
.hx-chip.is-active{color:var(--ink);border-bottom-color:var(--teal)}
.hx-parts-grid{display:none}
.hx-parts-grid.is-active{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.hx-part{display:flex;flex-direction:column}
/* A fixed-height plate with the render held inside it, the way the catalogue sites do
   it. The photographs are square white-studio shots: blown up to fill a 33/25 tile and
   cropped they read as a slab of picture, and the packages that run to the edge of the
   frame lost their leads. Contained in a 160px field the package keeps a margin of its
   own. The plate still spans the full tile width, so it stays flush with the text
   underneath - that alignment, not the fill, is what the layout depends on. */
.hx-part-img{display:block;height:186px;padding:13px 24px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hx-part-img img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
/* Catalogue pictures ease forward on hover, inside a frame that does not move. Only the
   image scales, so the card, its type and its neighbours all hold their positions and
   the effect reads as the photograph coming forward rather than as the grid shifting.
   This is the one hover movement in the skin, asked for by name and scoped to the
   product card; every other hover in these sheets is still colour only. */
.hx-part:hover .hx-part-img img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.hx-part-img img{transition:none}}
.hx-part-body{padding:17px 0 8px;display:flex;flex-direction:column;flex:1;gap:5px}
.hx-part-brand{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0}
.hx-part-body h3{font-size:1rem;margin:0;word-break:break-word;
  font-family:var(--font-mono);letter-spacing:-.01em;font-weight:600}
.hx-part-body h3 a{color:var(--ink);text-decoration:none}
.hx-part-body h3 a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.hx-part-desc{font-size:.86rem;color:var(--muted);margin:0;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hx-stock-empty{color:var(--muted);padding:.4rem 0}
.hx-stock-offline{background:var(--teal-soft);border:1px solid #b7dfe3;border-radius:var(--radius);
  padding:22px;color:var(--ink-2)}
/* The way out of the shelf sits at the right-hand end of the row it closes, under the
   last tile, rather than under the first one. */
.hx-stock-more{margin:32px 0 0;text-align:right}

/* ============================================================
   Process - a four-station flow on one rule
   ============================================================ */
.hx-process{background:var(--panel)}
.hx-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  border-top:1px solid var(--line);padding-top:26px}
.hx-step h3{font-size:1rem;margin:0 0 .4em}
.hx-step p{margin:0;font-size:.9rem;color:var(--muted)}
.hx-step-n{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--teal-ink);
  font-weight:700;letter-spacing:.06em;margin-bottom:8px}

/* ============================================================
   Insights
   ============================================================ */
.hx-insights{background:var(--paper)}
.hx-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hx-post{display:flex;flex-direction:column}
.hx-post-img{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:12/7;
  background:#eef3f8}
.hx-post-img img{width:100%;height:100%;object-fit:cover;display:block}
.hx-post-date{font-family:var(--font-mono);font-size:.75rem;color:var(--muted);
  margin:14px 0 0}
.hx-post h3{font-size:1.06rem;line-height:1.35;margin:.45em 0 .4em}
.hx-post h3 a{color:var(--ink);text-decoration:none}
.hx-post h3 a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.hx-post-desc{font-size:.9rem;color:var(--muted);margin:0;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================
   Closing call to action - a teal band, deliberately nothing like
   the ink footer that follows it.
   ============================================================ */
.hx-closing{position:relative;background:var(--teal-band);color:#e6f6f7;overflow:hidden}
.hx-closing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/board.jpg") center/cover no-repeat;opacity:.22;mix-blend-mode:luminosity}
.hx-closing::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,95,104,.94) 0%,rgba(8,95,104,.80) 58%,rgba(8,95,104,.66) 100%)}
.hx-closing>.hx-wrap{position:relative;z-index:1}
.hx-closing-in{display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;padding:clamp(40px,5.5vw,64px) 0}
.hx-closing h2{color:#fff;margin-bottom:.3em}
.hx-closing p{margin:0;color:#bfe2e5;max-width:54ch}
.hx-closing-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ============================================================
   Footer
   ============================================================ */
.hx-foot{background:var(--ink);color:#a9b8cd}
.hx-foot-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.4fr;gap:34px;
  padding-top:56px;padding-bottom:38px}
.hx-foot-brand .hx-brand-foot .hx-mark-base{fill:#fff}
.hx-foot-brand .hx-brand-foot .hx-mark-accent{fill:var(--teal-l)}
.hx-foot-brand p{font-size:.89rem;color:#93a3ba;margin-top:14px;max-width:38ch}
.hx-foot-col h4{color:#fff;font-size:.79rem;text-transform:uppercase;letter-spacing:.13em;
  margin-bottom:14px;font-weight:700}
.hx-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hx-foot-col a{color:#93a3ba;text-decoration:none;font-size:.9rem}
.hx-foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* "Cookie preferences" is the permanent way back into the consent dialog now that the
   banner no longer carries a Manage button - a one-off notice that has already been
   answered would otherwise leave no route to the settings or to withdrawing consent.
   It is a button because it opens a dialog rather than navigating, so the surrounding
   link styling is restated for it. */
.hx-foot-col .hx-foot-linkish{background:none;border:0;padding:0;font:inherit;
  font-size:.9rem;color:#93a3ba;text-align:left;cursor:pointer}
.hx-foot-col .hx-foot-linkish:hover{color:#fff;text-decoration:underline;
  text-underline-offset:3px}
.hx-foot-contact ul li:last-child{font-size:.89rem;color:#93a3ba;line-height:1.6}
.hx-foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);padding:18px 24px 26px;font-size:.81rem;color:#7d8ba1}
.hx-foot-fine{margin:0}

/* ============================================================
   Cookie banner, modals, back to top
   ============================================================ */
.hx-cookie{position:fixed;left:18px;bottom:18px;z-index:190;max-width:420px}
.hx-cookie-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:0 16px 40px -22px rgba(12,22,38,.5)}
.hx-cookie-card p{margin:0 0 14px;font-size:.9rem;color:var(--text)}
/* The policy link in the consent sentence gets the underline as well as the accent
   colour. It was already an anchor, but set in muted small print it read as body text. */
.hx-cookie-card a{color:var(--teal-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
/* Two choices, on the card's centre line. The banner used to carry a third button
   (Manage) and a second row of policy links under the pair; with the policy link in the
   sentence above there is nothing left to hang under them, and two buttons read better
   centred than ragged against the left edge. */
.hx-cookie-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  justify-content:center}

.hx-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px}
.hx-modal[hidden]{display:none}
.hx-modal-backdrop{position:absolute;inset:0;background:rgba(12,22,38,.58)}
.hx-modal-card{position:relative;background:#fff;border-radius:var(--radius);padding:26px;
  width:min(440px,100%);box-shadow:0 24px 60px -30px rgba(0,0,0,.55);max-height:90vh;overflow:auto}
.hx-modal-card h3{margin-top:0}
.hx-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.hx-check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--line-soft);cursor:pointer}
.hx-check input{margin-top:3px;accent-color:var(--teal);width:18px;height:18px}
.hx-check b{display:block;color:var(--ink);font-size:.94rem;font-weight:650}
.hx-check small{color:var(--muted);line-height:1.5}
.hx-modal-x{position:absolute;top:10px;right:12px;border:none;background:transparent;
  font-size:1.5rem;line-height:1;color:var(--muted);padding:.2rem .4rem}
.hx-modal-x:hover{color:var(--ink)}
.hx-rfq-note{font-size:.9rem;color:var(--muted)}
.hx-rfq-note a{color:var(--teal-ink);font-weight:600}

.hx-field{margin-bottom:12px}
.hx-field label,.hx-field>span{display:block;font-size:.84rem;font-weight:650;color:var(--ink);
  margin-bottom:5px}
.hx-field input,.hx-field textarea{width:100%;border:1px solid #c8d3e0;border-radius:var(--radius);
  padding:.66rem .82rem;font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff}
.hx-field input::placeholder,.hx-field textarea::placeholder{color:#8d97a6}
.hx-field input:focus,.hx-field textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft)}
.hx-rfq-success{background:var(--teal-soft);border:1px solid var(--teal);color:var(--teal-ink);
  border-radius:var(--radius);padding:12px;margin:12px 0 0}

.hx-to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:#fff;border:none;display:none;align-items:center;
  justify-content:center;z-index:180}
.hx-to-top.show{display:flex}
.hx-to-top:hover{background:var(--teal-ink)}
.hx-to-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- Page head used by every interior page ---------- */
.hx-crumb{background:var(--ink);color:#c6d2e2;
  padding:calc(var(--hx-head-h,112px) + 34px) 0 30px;
  background-image:linear-gradient(90deg,rgba(12,22,38,.95),rgba(12,22,38,.74)),
    linear-gradient(rgba(224,232,242,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(224,232,242,.10) 1px,transparent 1px);
  background-size:auto,46px 46px,46px 46px}
.hx-crumb h1{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:.25em;
  max-width:24ch}
.hx-crumb-part{font-family:var(--font-mono);font-weight:600;letter-spacing:-.01em}
.hx-crumb-lede{color:#9fb0c6;max-width:64ch;margin:0 0 16px;font-size:1rem}
.hx-crumb-trail{display:flex;align-items:center;gap:10px;font-size:.845rem;color:#7d8ba1;
  flex-wrap:wrap}
.hx-crumb-trail a{color:#c6d2e2;text-decoration:none}
.hx-crumb-trail a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hx-crumb-trail em{font-style:normal;color:#fff;font-weight:600}

/* ============================================================
   Products listing
   ============================================================ */
.hx-cat{padding:clamp(32px,4.5vw,52px) 0 clamp(52px,6.5vw,80px);background:var(--paper)}
.hx-cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.hx-cat-head h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:0}
.hx-cat-count{color:var(--muted);font-size:.88rem;margin:0;font-family:var(--font-mono)}
.hx-cat-count b{color:var(--ink)}
.hx-shelf{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.hx-shelf-chip{border:1px solid var(--line);background:#fff;color:var(--ink-2);
  padding:.36rem .8rem;border-radius:var(--radius-sm);font-size:.84rem;font-weight:600}

.hx-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 22px}
/* Column count follows the item count (CLAUDE.md §2.9). The related strip at the foot of a
   product page is often two cards against a fixed four columns, which left two empty slots
   in the row. Scoped to the wide layout: below 761px this grid is pinned to two columns and
   then one, and an `is-c` selector would otherwise outrank those rules. */
@media (min-width:761px){
  .hx-prod-grid.is-c1{grid-template-columns:(4,1fr)}
  .hx-prod-grid.is-c2{grid-template-columns:repeat(4,1fr)}
  .hx-prod-grid.is-c3{grid-template-columns:repeat(4,1fr)}
  .hx-prod-grid.is-c4{grid-template-columns:repeat(4,1fr)}
}
/* The catalogue record is left-aligned, on the card's own left edge. It was centred for a
   while, to answer the centred picture plate, but the picture plate is not centred either -
   it spans the full tile - so centring the record only broke the line the eye follows down
   the left edge of every card in the grid. */
/* Label and value are one fact, so they sit on one line: "IN STOCK: 737". Stacking them
   spent two lines and 39px per card on a single number, and the label column was the only
   thing that differed between cards. Baseline alignment keeps the small uppercase label
   sitting on the same line as the monospaced value rather than centred against it.
   The row is pulled up towards the description it belongs to: with the body's 5px flex gap
   on top of an 8px margin it sat 13px clear, which read as the start of a new block rather
   than the last line of the same one. */
.hx-part-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:2px 0 0;padding:0;font-size:.78rem}
.hx-part-meta > div{display:flex;align-items:baseline;gap:5px}
.hx-part-meta dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  font-size:.67rem;margin:0;white-space:nowrap}
.hx-part-meta dt::after{content:":"}
.hx-part-meta dd{margin:0;color:var(--ink);font-weight:600;font-family:var(--font-mono)}
.hx-part-meta dd a{color:var(--teal-ink);text-decoration:none;font-weight:600}
.hx-part-meta dd a:hover{text-decoration:underline;text-underline-offset:3px}
.hx-part-actions{display:flex;gap:8px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.hx-part-actions .hx-btn{flex:0 0 auto}

.hx-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 26px;text-align:center;color:var(--muted)}
.hx-empty h3{color:var(--ink)}
.hx-cat-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 26px;text-align:center;color:var(--muted)}
.hx-cat-empty h3{color:var(--ink)}
.hx-cat-empty p{max-width:60ch;margin-left:auto;margin-right:auto}

.hx-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  margin-top:36px}
.hx-pg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 11px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);
  color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.88rem;
  font-family:var(--font-mono)}
.hx-pg:hover{border-color:var(--teal);color:var(--teal-ink)}
.hx-pg.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.hx-pg.is-off{opacity:.4;pointer-events:none}
.hx-pg-dots{color:var(--muted);padding:0 4px}

/* ============================================================
   Loading veil
   Each page is rendered only after the server has finished reading a database on
   another continent, so a navigation can sit blank for several seconds. The one
   state we can honestly paint is on the page being LEFT, so the veil goes up the
   moment the user commits to a navigation and comes down when the next document
   arrives. JS toggles `.is-on`; the `hidden` attribute is deliberately not used,
   because an author `display` rule would out-rank it.
   ============================================================ */
.hx-loading{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(245,247,250,.92);opacity:0;visibility:hidden;
  transition:opacity .16s ease,visibility .16s ease}
.hx-loading.is-on{opacity:1;visibility:visible}
.hx-loading-in{display:grid;justify-items:center;gap:14px}
.hx-loading-mark{width:36px;height:40px;background:var(--teal);
  clip-path:polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
  animation:hx-loading-pulse 1.05s ease-in-out infinite}
.hx-loading-t{font:600 .73rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#5b6b7c}
@keyframes hx-loading-pulse{
  0%,100%{transform:scale(.78);opacity:.42}
  50%{transform:scale(1);opacity:1}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .hx-nav-search input{width:170px}
  .hx-m-item{font-size:.86rem;padding:.5rem .58rem}
}
@media (max-width:1080px){
  .hx-parts-grid.is-active{grid-template-columns:repeat(3,1fr)}
  .hx-range-grid{grid-template-columns:1fr 1fr}
  .hx-blog-grid{grid-template-columns:1fr 1fr}
  .hx-why-in{grid-template-columns:1fr;gap:36px}
  .hx-why-media{max-width:560px}
  .hx-foot-grid{grid-template-columns:1fr 1fr}
  .hx-process-grid{grid-template-columns:1fr 1fr;gap:28px}
  /* Three across: the divider belongs between cells in a row, so the cell that
     starts each row drops both the rule and the padding it was making room for. */
  .hx-stats-grid{grid-template-columns:repeat(3,1fr)}
  .hx-stat:nth-child(3n+1){border-left:none;padding-left:0}
}
@media (max-width:1020px){
  /* The search is a primary control on a distributor site, so on narrow screens it
     drops to its own row under the brand rather than disappearing from the header. */
  .hx-nav-in{flex-wrap:wrap;padding-bottom:12px}
  .hx-brand{order:1}
  .hx-nav-right{order:2}
  .hx-nav-search{order:3;flex:1 1 100%;margin:10px 0 0}
  .hx-nav-search input{width:100%}
  .hx-menu{position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:10px 18px 16px;display:none;z-index:65;
    box-shadow:0 14px 30px -20px rgba(12,22,38,.4)}
  .hx-menu.open{display:flex}
  .hx-m-item{justify-content:space-between;border-bottom:1px solid var(--line-soft);
    padding:.8rem .3rem}
  .hx-m-item::after{display:none}
  .hx-m-rfq{margin:10px 0 0;justify-content:center}
  .hx-drop{display:flex;flex-direction:column}
  .hx-drop-menu{position:static;box-shadow:none;border:none;border-radius:0;padding:0 0 6px 14px;
    display:none;min-width:0}
  .hx-drop-menu::before{display:none}
  .hx-drop .hx-chev{display:none}
  .hx-burger{display:inline-flex}
}
@media (max-width:860px){
  .hx-echo{display:none}
  .hx-strip-grid{grid-template-columns:1fr 1fr}
  .hx-strip-item + .hx-strip-item{padding-left:0;border-left:none}
  .hx-hero-media img{object-position:64% 50%}
  .hx-hero-shade{background:linear-gradient(160deg,rgba(9,15,26,.94) 0%,rgba(9,15,26,.7) 62%,rgba(9,15,26,.4) 100%)}
}
@media (max-width:760px){
  .hx-prod-grid{grid-template-columns:repeat(2,1fr)}
  .hx-why-points li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:620px){
  .hx-wrap{padding:0 18px}
  .hx-parts-grid.is-active,.hx-range-grid,.hx-blog-grid{grid-template-columns:1fr}
  .hx-prod-grid{grid-template-columns:1fr}
  /* One column: the plate runs the full width of the card, so the fixed band would
     leave the render marooned in a long white strip. A taller band and wider side
     padding keep the picture in proportion to the card it sits in. */
  .hx-part-img{height:220px;padding:16px 40px}
  .hx-foot-grid{grid-template-columns:1fr}
  .hx-process-grid{grid-template-columns:1fr}
  .hx-hero-actions .hx-btn{width:100%}
  .hx-closing-actions .hx-btn{width:100%}
  /* Two across. Reset every cell first, then re-apply only to the right column:
     a bare `2n+1` clearing rule would lose to the `3n+1` rule above for cell 4,
     which is a right-hand cell in this layout and needs its divider back. */
  .hx-stats-grid{grid-template-columns:1fr 1fr}
  .hx-stat{border-left:none;padding-left:0}
  .hx-stat:nth-child(2n){border-left:1px solid rgba(255,255,255,.1);padding-left:18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .hx-loading-mark{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}