/* ==========================================================================
   NETWORK ENGINEERING — design system
   Industrial instrumentation distributor, Lebanon (Endress+Hauser, AUMA).
   Light, precise, technical. Mobile-first: every rule below is written for
   the narrow case and widened at min-width breakpoints.
   ========================================================================== */

:root{
  /* ink + surfaces */
  --ink:#13294D;            /* headings, primary text */
  --ink-2:#465468;          /* body copy */
  --ink-3:#6b7a86;          /* meta, captions */
  --bg:#ffffff;
  --bg-2:#f6f8fa;           /* section bands */
  --bg-3:#eef2f5;           /* chips, wells */
  --line:#dfe6ec;
  --line-2:#c9d4dd;

  /* brand: instrumentation blue with a signal-cyan accent */
  --brand:#13294D;
  --brand-2:#1A5FBF;
  --accent:#1A7FE8;
  --accent-soft:#e8f1fd;
  --warn:#e08b1e;

  --grad:linear-gradient(135deg,#13294D 0%,#1A5FBF 58%,#1A7FE8 100%);

  --radius:14px;
  --radius-s:9px;
  --shadow-s:0 1px 2px rgba(12,28,39,.06),0 2px 8px rgba(12,28,39,.05);
  --shadow-m:0 8px 30px rgba(12,28,39,.10);
  --shadow-l:0 20px 60px rgba(12,28,39,.14);
  --ease:cubic-bezier(.22,.61,.36,1);

  --maxw:1200px;
  --gutter:20px;
  --header-h:68px;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Space Grotesk","Inter",var(--font);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink-2);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* belt: nothing should overflow, but never scroll sideways */
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(48px,8vw,96px)}
.section--tint{background:var(--bg-2);border-block:1px solid var(--line)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.15;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2rem,6.2vw,3.5rem)}
h2{font-size:clamp(1.55rem,4.4vw,2.4rem)}
h3{font-size:clamp(1.1rem,2.6vw,1.35rem)}
p{max-width:68ch}
.lead{font-size:clamp(1rem,2.4vw,1.15rem);color:var(--ink-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-2);font-weight:500;margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.section-head{max-width:60ch;margin-bottom:clamp(28px,4vw,44px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.5rem;border-radius:100px;border:1px solid transparent;
  font-weight:600;font-size:.94rem;cursor:pointer;transition:.25s var(--ease);white-space:nowrap;
}
.btn--primary{
  background-image:var(--grad);
  /* The 1px transparent border keeps size parity with .btn--ghost. By default the
     gradient is sized to the PADDING box and then tiled across the border box, so
     that ring shows the gradient wrapping — its light end butted against its dark
     end — as visible seams down the left and right edges. Painting a single copy
     from the border box removes them. */
  background-origin:border-box;background-clip:border-box;background-repeat:no-repeat;
  color:#fff;box-shadow:0 6px 18px rgba(26,127,232,.28)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(26,127,232,.36)}
.btn--ghost{border-color:var(--line-2);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--brand-2);color:var(--brand-2)}
.btn--light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.btn--light:hover{background:#fff;color:var(--brand)}
.btn--sm{min-height:40px;padding:.5rem 1rem;font-size:.86rem}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease);
}
.header::before{content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.header.is-stuck{box-shadow:var(--shadow-s)}
.header__inner{
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  min-height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand svg,.brand img{height:36px;width:auto;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:-.01em}
.brand__sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

.nav{display:none}
.nav a{
  position:relative;padding:.45rem 0;font-size:.93rem;font-weight:500;color:var(--ink);
  transition:color .2s;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);transition:right .3s var(--ease)}
.nav a:hover{color:var(--brand-2)}
.nav a:hover::after,.nav a[aria-current=page]::after{right:0}
.nav a[aria-current=page]{color:var(--brand-2)}

.header__actions{display:flex;align-items:center;gap:.6rem}
.header__cta{display:none}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:11px;background:none;border:1px solid var(--line);
  border-radius:var(--radius-s);cursor:pointer;flex:none;
}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer — anchored top and scrollable, so a long menu is always reachable */
.drawer{
  position:fixed;inset:var(--header-h) 0 0 auto;width:min(88vw,360px);
  background:#fff;border-left:1px solid var(--line);box-shadow:var(--shadow-l);
  transform:translateX(100%);transition:transform .32s var(--ease);
  z-index:99;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;padding:1.25rem var(--gutter) 2rem;
}
.drawer.is-open{transform:translateX(0)}
.drawer a{
  display:block;padding:.9rem 0;border-bottom:1px solid var(--line);
  font-size:1.02rem;font-weight:500;color:var(--ink);
}
.drawer a[aria-current=page]{color:var(--brand-2)}
.drawer .btn{margin-top:1.4rem;width:100%}
.drawer__meta{margin-top:auto;padding-top:1.6rem;font-size:.85rem;color:var(--ink-3)}
.drawer__meta a{border:0;padding:.25rem 0;font-size:.85rem;color:var(--ink-3)}
.scrim{
  position:fixed;inset:0;background:rgba(12,28,39,.4);opacity:0;visibility:hidden;
  transition:.3s var(--ease);z-index:98;
}
.scrim.is-open{opacity:1;visibility:visible}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--grad);
  padding-block:clamp(56px,11vw,110px);
}
/* faint engineering grid + glow, purely decorative */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 90% at 70% 10%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 25%,transparent 75%);
}
.hero::after{
  content:"";position:absolute;width:60vw;height:60vw;max-width:640px;max-height:640px;
  right:-14vw;top:-22vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(26,127,232,.55),transparent 62%);
}
.hero__inner{position:relative;z-index:2}
.hero .eyebrow{color:#9ec9f7}
.hero .eyebrow::before{background:var(--accent)}
.hero h1{color:#fff;max-width:16ch}
.hero p{color:rgba(255,255,255,.88);margin-top:1.1rem;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:clamp(36px,6vw,60px);background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);overflow:hidden;
}
.hero__stat{background:rgba(19,41,77,.55);padding:1.1rem 1rem}
.hero__stat b{display:block;font-family:var(--font-display);font-size:clamp(1.4rem,4.5vw,1.9rem);color:#fff}
.hero__stat span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.cat{
  display:flex;flex-direction:column;gap:.35rem;padding:1.1rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);transition:.25s var(--ease);
  min-height:112px;
}
.cat:hover{border-color:var(--brand-2);transform:translateY(-3px);box-shadow:var(--shadow-m)}
.cat__ico{width:30px;height:30px;color:var(--brand-2);margin-bottom:.3rem}
.cat__name{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.25}
.cat__n{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.06em}

.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:.25s var(--ease);height:100%;
}
.card:hover{border-color:var(--brand-2);transform:translateY(-3px);box-shadow:var(--shadow-m)}
.card__media{
  aspect-ratio:4/3;background:var(--bg-3);display:grid;place-items:center;padding:14px;
  border-bottom:1px solid var(--line);
}
.card__media img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.card__body{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card__tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card__title{font-family:var(--font-display);font-size:.98rem;font-weight:600;color:var(--ink);line-height:1.3}
.card__desc{font-size:.86rem;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.card__more{margin-top:auto;padding-top:.6rem;font-size:.82rem;font-weight:600;color:var(--brand-2)}

/* ---------- catalogue toolbar ---------- */
.toolbar{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.search{position:relative}
.search input{
  width:100%;min-height:52px;padding:.85rem 1rem .85rem 3rem;background:#fff;
  border:1px solid var(--line-2);border-radius:100px;font-size:1rem;transition:.2s;
}
.search input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 4px var(--accent-soft)}
.search svg{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--ink-3);pointer-events:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.chip{
  flex:none;padding:.5rem .95rem;border-radius:100px;border:1px solid var(--line-2);
  background:#fff;font-size:.85rem;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:.2s;white-space:nowrap;min-height:40px;
}
.chip:hover{border-color:var(--brand-2);color:var(--brand-2)}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.result-count{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);letter-spacing:.04em}
.empty{padding:3rem 1rem;text-align:center;color:var(--ink-3)}

/* ---------- product detail ---------- */
.crumbs{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);letter-spacing:.05em;
  margin-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a:hover{color:var(--brand-2)}
.pd{display:grid;gap:24px}
.pd__media{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:grid;place-items:center;min-height:260px}
.pd__media img{max-height:340px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.pd__body h1{margin-bottom:.6rem}
.pd__text{margin-top:1.2rem;white-space:pre-line;color:var(--ink-2)}
.pd__text p{margin-bottom:.9rem}
.pd__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:100px;
  background:var(--accent-soft);color:var(--brand);font-size:.78rem;font-weight:600}
.dl{display:flex;flex-direction:column;gap:8px;margin-top:1.6rem}
.dl a{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius-s);background:#fff;font-size:.9rem;font-weight:500;color:var(--ink);
  transition:.2s;min-height:52px}
.dl a:hover{border-color:var(--brand-2);color:var(--brand-2);background:var(--bg-2)}
.dl svg{width:19px;height:19px;color:var(--warn);flex:none}

/* ---------- misc blocks ---------- */
.supplier{display:flex;flex-direction:column;gap:.8rem;padding:1.5rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius)}
.supplier__logo{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--brand)}
.feature{display:flex;gap:1rem;align-items:flex-start}
.feature__ico{width:42px;height:42px;flex:none;border-radius:11px;background:var(--accent-soft);
  color:var(--brand-2);display:grid;place-items:center}
.feature__ico svg{width:21px;height:21px}
.feature h3{margin-bottom:.3rem}

.cta-band{background:var(--grad);color:#fff;border-radius:var(--radius);padding:clamp(28px,5vw,48px);
  position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88);margin-top:.6rem}
.cta-band .btn{margin-top:1.4rem}

/* ---------- contact ---------- */
.form{display:grid;gap:14px}
.field label{display:block;font-size:.84rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--radius-s);font-size:1rem;transition:.2s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-2);box-shadow:0 0 0 4px var(--accent-soft)}
.contact-card{display:flex;gap:.9rem;padding:1.15rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff}
.contact-card svg{width:21px;height:21px;color:var(--brand-2);flex:none;margin-top:3px}
.contact-card b{display:block;color:var(--ink);font-size:.9rem}
.contact-card span,.contact-card a{font-size:.9rem;color:var(--ink-2);word-break:break-word}

/* ---------- footer ---------- */
.footer{background:#0e1f3d;color:rgba(255,255,255,.72);padding-block:48px 28px;margin-top:0}
.footer h4{color:#fff;font-size:.82rem;font-family:var(--font-mono);letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:1rem;font-weight:500}
.footer a{color:rgba(255,255,255,.72);font-size:.9rem;display:block;padding:.3rem 0;transition:.2s}
.footer a:hover{color:#fff}
.footer__grid{display:grid;gap:32px;grid-template-columns:1fr}
.footer__brand p{font-size:.9rem;margin-top:.9rem;max-width:34ch}
.footer__bottom{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:.5rem;font-size:.82rem}

/* ==========================================================================
   BREAKPOINTS — mobile-first, so these only add
   ========================================================================== */
@media (min-width:600px){
  :root{--gutter:28px}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__stats{grid-template-columns:repeat(4,1fr)}
  .toolbar{flex-direction:row;align-items:center;justify-content:space-between}
  .toolbar .search{flex:1;max-width:420px}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:900px){
  :root{--header-h:76px;--gutter:32px}
  .nav{display:flex;gap:1.9rem;align-items:center}
  .header__cta{display:inline-flex}
  .burger{display:none}
  .drawer,.scrim{display:none}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .brand svg,.brand img{height:44px}
  .pd{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
  .footer__grid{grid-template-columns:2fr 1fr 1fr 1.2fr}
  .hero h1{max-width:14ch}
}
@media (min-width:1140px){
  .grid--cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}

/* motion opt-out */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* reveal-on-scroll, safe by default: visible unless JS opts in */
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

@media print{.header,.drawer,.scrim,.footer{display:none}}

/* ==========================================================================
   MOBILE LEGIBILITY
   Micro-labels sized for desktop fall to ~10px on a phone, which is below a
   comfortable reading floor. Lift them and guarantee 44px touch targets.
   ========================================================================== */
@media (max-width:899px){
  .card__tag{font-size:.72rem}
  .cat__n{font-size:.74rem}
  .brand__sub{font-size:.66rem}
  .eyebrow{font-size:.75rem}
  .result-count{font-size:.84rem}
  .crumbs{font-size:.8rem}
  .footer__bottom{font-size:.86rem}
  .hero__stat span{font-size:.7rem}
  /* every interactive element gets a full touch target */
  .card,.cat,.chip,.btn,.dl a,.drawer a,.nav a,
  .footer a,.contact-card a,.supplier a{min-height:44px}
  .footer a{display:flex;align-items:center}
  .field input,.field select,.field textarea{min-height:52px;font-size:16px}
}
/* iOS zooms the page when a focused input is under 16px — pin it everywhere */
.field input,.field select,.field textarea,.search input{font-size:16px}

/* ==========================================================================
   1 · TRANSPARENT HEADER OVER THE HERO  (home page only)
   The nav floats on the artwork and turns solid white once scrolled, so the
   banner reads as one image instead of a white bar stacked on a picture.
   ========================================================================== */
.home .header{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent}
.home .header::before{opacity:0;transition:opacity .35s var(--ease)}
.home .header .brand__name{color:#fff}
.home .header .brand__sub{color:rgba(255,255,255,.72)}
.home .header .nav a{color:rgba(255,255,255,.92)}
.home .header .nav a:hover,.home .header .nav a[aria-current=page]{color:#fff}
.home .header .burger{border-color:rgba(255,255,255,.45)}
.home .header .burger span{background:#fff}
.home .header .brand img{content:url('../assets/logo-mark-light.svg')}
.home .hero{margin-top:calc(-1 * var(--header-h));padding-top:calc(var(--header-h) + clamp(56px,11vw,110px))}
/* scrolled: solid white, dark type, navy mark */
.home .header.is-stuck{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
.home .header.is-stuck::before{opacity:1}
.home .header.is-stuck .brand__name{color:var(--ink)}
.home .header.is-stuck .brand__sub{color:var(--ink-3)}
.home .header.is-stuck .nav a{color:var(--ink)}
.home .header.is-stuck .nav a:hover,.home .header.is-stuck .nav a[aria-current=page]{color:var(--brand-2)}
.home .header.is-stuck .burger{border-color:var(--line)}
.home .header.is-stuck .burger span{background:var(--ink)}
.home .header.is-stuck .brand img{content:url('../assets/logo-mark.svg')}
/* the drawer is a white panel, so its contents always use dark type */
.drawer a,.drawer .drawer__meta a{color:var(--ink)}

/* ==========================================================================
   2 · LARGER, CLEARER MARK
   ========================================================================== */
.brand svg,.brand img{height:46px}
.brand__name{font-size:1.02rem;letter-spacing:.01em}
.brand__sub{font-size:.62rem;letter-spacing:.16em}
@media (min-width:900px){
  .brand svg,.brand img{height:54px}
  .brand__name{font-size:1.12rem}
}

/* ==========================================================================
   4 · A HERO WITH MOVEMENT
   Two slow-drifting colour fields plus a sweeping sheen over the grid. All
   compositor-only (transform/opacity), and switched off for reduced motion.
   ========================================================================== */
.hero{background:#0d1f3d}
.hero__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero__bg::before,.hero__bg::after{content:"";position:absolute;border-radius:50%;filter:blur(60px)}
.hero__bg::before{
  width:70vw;height:70vw;max-width:760px;max-height:760px;top:-24%;right:-16%;
  background:radial-gradient(circle,rgba(26,127,232,.75),transparent 66%);
  animation:drift1 22s var(--ease) infinite alternate;
}
.hero__bg::after{
  width:58vw;height:58vw;max-width:620px;max-height:620px;bottom:-26%;left:-14%;
  background:radial-gradient(circle,rgba(77,163,255,.5),transparent 68%);
  animation:drift2 27s var(--ease) infinite alternate;
}
.hero__sheen{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.10) 50%,transparent 66%);
  background-size:280% 100%;animation:sweep 9s linear infinite;
}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-9%,7%,0) scale(1.14)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(11%,-8%,0) scale(1.1)}}
@keyframes sweep{from{background-position:180% 0}to{background-position:-80% 0}}
.hero::before{opacity:.75;animation:gridpan 34s linear infinite}
@keyframes gridpan{from{background-position:0 0}to{background-position:56px 56px}}
.hero__inner{z-index:3}
@media (prefers-reduced-motion:reduce){
  .hero__bg::before,.hero__bg::after,.hero__sheen,.hero::before{animation:none}
}

/* ==========================================================================
   6 · FOOTER MARK
   The navy mark disappeared on the dark footer; use the light variant.
   ========================================================================== */
.footer .brand img{content:url('../assets/logo-mark-light.svg');height:48px}
.footer .brand__sub{color:rgba(255,255,255,.6)}
.footer__credit{margin-top:.6rem;font-size:.84rem;color:rgba(255,255,255,.6)}
.footer__credit a{display:inline;color:#7fc0ff;font-size:.84rem;padding:0}
.footer__credit a:hover{color:#fff;text-decoration:underline}

/* 5 · the taller mark must not crowd a 320px header */
@media (max-width:420px){
  .brand svg,.brand img{height:40px}
  .brand__name{font-size:.92rem}
  .brand__sub{font-size:.56rem}
}

/* ==========================================================================
   UNIFORM PRODUCT IMAGERY
   Source images range from 48px to 1115px wide (median 150), so `width:auto`
   drew each at its own scale — tiny sensors floated in the tile while large
   flowmeters filled it. Every image now fills an identical box and is scaled
   to fit, so the grid reads as one set regardless of the original file.
   ========================================================================== */
.card__media{aspect-ratio:4/3;overflow:hidden;padding:16px}
.card__media img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  max-height:none;                     /* the old cap stopped small files scaling up */
}
.card__media svg{width:46px;height:46px}        /* placeholder matches the others */

.pd__media{aspect-ratio:4/3;overflow:hidden;padding:28px}
.pd__media img{width:100%;height:100%;object-fit:contain;object-position:center;max-height:none}

@media (max-width:599px){
  .card__media{padding:12px}
}

/* ==========================================================================
   PRODUCT IMAGES MUST FIT INSIDE THE TILE
   Forcing width/height to 100% made large photos scale up and clip against the
   edges. Constraining by max-* instead means the image is only ever scaled DOWN
   to fit, never cropped — the whole product is always visible inside the square.
   ========================================================================== */
.card__media{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;padding:18px}
.card__media img{
  width:auto;height:auto;
  max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
}
.pd__media{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;padding:30px}
.pd__media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* ==========================================================================
   FULL-SCREEN LANDING
   The banner now owns the whole first screen, so no white band shows beneath it.
   ========================================================================== */
.home .hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--header-h) + clamp(28px,6vh,64px));
  padding-bottom:clamp(32px,7vh,72px);
}
.home .hero__inner{width:100%}
/* short laptop screens: let it breathe rather than overflow */
@media (max-height:720px) and (min-width:900px){
  .home .hero{min-height:100vh}
  .home .hero h1{font-size:clamp(1.9rem,4.4vw,3rem)}
  .home .hero__stats{margin-top:clamp(20px,3vh,34px)}
}

/* ==========================================================================
   FINAL: images sized by the BOX, not by percentages
   max-height:100% is ignored when the parent's height is indefinite — which it
   is for a grid item under aspect-ratio — so portrait files (e.g. 346x386 in a
   366x275 tile) escaped the cap. Giving the img the box's own dimensions and
   letting object-fit:contain letterbox inside it cannot overflow.
   ========================================================================== */
.card__media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;padding:18px}
.card__media img{
  display:block;width:100%;height:100%;
  max-width:none;max-height:none;
  object-fit:contain;object-position:center;
}
.card__media svg{position:absolute;inset:0;margin:auto;width:46px;height:46px}

.pd__media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;padding:30px}
.pd__media img{display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center}

/* ==========================================================================
   RESPONSIVE REPAIR
   1 · Centred flex content overflows in BOTH directions when it is taller than
       the container, so on a short window the hero slid up under the fixed
       header. Anchor to the start and centre with auto margins instead: the
       padding is then always respected and content can only ever grow downward.
   2 · The nav was crammed between 900px and 1200px; move the burger threshold up.
   ========================================================================== */
.home .hero{
  justify-content:flex-start;                 /* never centre-overflow upward */
  padding-top:calc(var(--header-h) + clamp(20px,4vh,56px));
  padding-bottom:clamp(28px,5vh,64px);
}
.home .hero__inner{margin-block:auto}         /* safe centring */

/* the header must never sit on top of the copy */
.home .hero .eyebrow{margin-top:0}

/* short windows: shrink the block so it fits instead of colliding */
@media (max-height:820px){
  .home .hero h1{font-size:clamp(1.75rem,4.2vw,2.7rem)}
  .home .hero .lead{font-size:.98rem}
  .home .hero__cta{margin-top:1.4rem}
  .home .hero__stats{margin-top:clamp(18px,3vh,30px)}
  .home .hero__stat{padding:.8rem .9rem}
  .home .hero__stat b{font-size:clamp(1.2rem,3.6vw,1.6rem)}
}
@media (max-height:640px){
  .home .hero h1{font-size:clamp(1.55rem,3.6vw,2.2rem)}
  .home .hero .lead{display:none}             /* keep headline + CTA legible */
  .home .hero__stats{display:none}
}

/* ---- header: give the nav room, switch to the drawer sooner ---- */
@media (max-width:1120px){
  .nav{display:none}
  .header__cta{display:none}
  .burger{display:inline-flex}
  .drawer,.scrim{display:flex}
  .scrim{display:block}
}
@media (min-width:1121px){
  .nav{display:flex;gap:1.5rem}
  .header__cta{display:inline-flex}
  .burger{display:none}
}
@media (min-width:900px) and (max-width:1120px){
  .brand svg,.brand img{height:46px}
}
/* stop the wordmark from squeezing the nav on mid widths */
@media (max-width:520px){
  .brand__text{display:none}                  /* mark alone below 520px */
  .brand svg,.brand img{height:42px}
}

/* Phones: auto margins could still pull the block up under the fixed header when
   the copy is short. Anchor it below the header and let it grow downward. */
@media (max-width:899px){
  .home .hero{padding-top:calc(var(--header-h) + 42px);justify-content:flex-start}
  .home .hero__inner{margin-block:0 auto}
}

/* The hero is pulled up by margin-top:-var(--header-h) so the artwork runs behind
   the fixed header. Content therefore starts at (padding-top - header-h) from the
   top of the viewport — so the padding must clear the header TWICE, plus a gap. */
@media (max-width:899px){
  .home .hero{padding-top:calc(var(--header-h) * 2 + 28px)}
}

/* ==========================================================================
   FULL-BLEED LANDING — remove the negative pull
   The header is position:fixed, so <main> already begins at y=0 and the hero
   needs no negative margin to sit under it. That margin dragged the hero
   --header-h above the viewport, so a 100vh block finished --header-h short of
   the bottom and left a white strip. Zero it, and the padding only has to clear
   the header once.
   ========================================================================== */
.home .hero{
  margin-top:0;
  min-height:100vh;min-height:100svh;
  padding-top:calc(var(--header-h) + clamp(24px,5vh,60px));
}
@media (max-width:899px){
  .home .hero{padding-top:calc(var(--header-h) + 34px)}
}