/* ==========================================================================
   Array Medical — design system
   Display : Bricolage Grotesque   Body : IBM Plex Sans   Data : IBM Plex Mono
   Ground  : cool offwhite #F1F4F6   Brand : #094D7B
   ========================================================================== */

:root{
  /* brand */
  --navy:        #094D7B;
  --navy-800:    #073C61;
  --navy-900:    #052B45;
  --navy-400:    #3E82B4;
  --navy-200:    #A9C6DC;

  /* ground + surfaces */
  --paper:       #F1F4F6;
  --paper-2:     #E7ECF0;
  --surface:     #FFFFFF;

  /* lines */
  --line:        #DCE4EA;
  --line-2:      #C6D5DF;
  --line-dark:   rgba(255,255,255,.14);

  /* ink */
  --text:        #16303F;
  --muted:       #5C7180;
  --muted-dark:  #A9C0D2;

  /* accent — reserved for interactive + live states only */
  --cyan:        #0FB2C4;
  --cyan-dim:    #0A8C9A;
  --wa:          #25D366;

  /* type */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* metrics */
  --shell: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --r-lg: 8px;
  --r-md: 6px;
  --r-sm: 3px;
  --nav-h: 84px;

  --shadow-s: 0 1px 2px rgba(9,77,123,.05), 0 4px 14px rgba(9,77,123,.05);
  --shadow-m: 0 2px 6px rgba(9,77,123,.06), 0 16px 40px rgba(9,77,123,.10);
  --shadow-l: 0 30px 70px rgba(5,43,69,.16);

  --ease: cubic-bezier(.22,.68,.32,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
::selection{background:var(--navy);color:#fff}

/* ---------- type ---------- */
.h1,h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.55rem,6vw,4.9rem);
  line-height:.98;
  letter-spacing:-.032em;
  font-variation-settings:"wdth" 94,"opsz" 72;
  color:var(--navy);
  text-wrap:balance;
}
.h2,h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.95rem,3.5vw,2.95rem);
  line-height:1.06;
  letter-spacing:-.026em;
  font-variation-settings:"wdth" 96,"opsz" 40;
  color:var(--navy);
  text-wrap:balance;
}
/* all-caps heading — needs positive tracking and a smaller size to sit right,
   since the display face is set with negative tracking by default */
.h2--caps{
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
}
.h3,h3{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.18rem,1.6vw,1.4rem);
  line-height:1.22;
  letter-spacing:-.018em;
  color:var(--navy);
}
.h4{
  font-family:var(--display);font-weight:600;font-size:1.02rem;
  line-height:1.3;letter-spacing:-.012em;color:var(--navy);
}

/* the sub-heading voice — also Bricolage, set light */
.sub{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.06rem,1.55vw,1.32rem);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--muted);
  max-width:62ch;
  text-wrap:pretty;
}
.sub--light{color:var(--navy-200)}

.eyebrow{
  font-family:var(--mono);font-weight:500;font-size:.7rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--navy-400);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan);flex:none}
.eyebrow--light{color:var(--navy-200)}
.eyebrow--plain::before{display:none}
/* a manufacturer's mark standing in for its name inside an eyebrow —
   single colour, sized to sit on the cap-height of the label beside it */
.brandmark{height:14px;width:auto;flex:none}

p{text-wrap:pretty}
.lead{font-size:1.06rem;color:var(--muted);max-width:64ch}
.body-muted{color:var(--muted)}
strong{font-weight:600;color:var(--navy)}
.mono{font-family:var(--mono)}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,8vw,116px)}
.section--tight{padding-block:clamp(48px,5.5vw,76px)}
.section--navy{background:var(--navy);color:#fff}
.section--navy .h2,.section--navy h2,.section--navy .h3,.section--navy h3,.section--navy .h4{color:#fff}
.section--band{background:var(--paper-2)}
.section--white{background:var(--surface)}

.sechead{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(34px,4vw,54px)}
.sechead--split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sechead__text{display:flex;flex-direction:column;gap:14px;max-width:60ch}

.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
/* Four principal cards. Two-up rather than four-up, because each card carries
   the company name and its logo side by side — four narrow columns would force
   the mark onto its own line in every card. */
.grid--principals{grid-template-columns:repeat(2,1fr)}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-md);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-family:var(--body);font-weight:600;font-size:.9rem;letter-spacing:-.005em;
  transition:transform .25s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .25s;
  white-space:nowrap;cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(9,77,123,.22)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;flex:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bd:var(--navy);box-shadow:0 8px 20px rgba(9,77,123,.10)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:#fff}
.btn--light:hover{box-shadow:0 10px 26px rgba(0,0,0,.24)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.32)}
.btn--outline-light:hover{--btn-bd:#fff;background:rgba(255,255,255,.08);box-shadow:none}
.btn--wa{--btn-bg:var(--wa);--btn-fg:#07321A;--btn-bd:var(--wa)}
.btn--sm{padding:9px 15px;font-size:.82rem}
.btn--block{width:100%}

/* text link with a moving rule */
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.76rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);
}
.tlink span{position:relative;padding-bottom:3px}
.tlink span::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--line-2);transform-origin:left;transition:transform .35s var(--ease),background .2s;
}
.tlink:hover span::after{background:var(--cyan);transform:scaleX(1.06)}
.tlink svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.tlink--light{color:#fff}
.tlink--light span::after{background:rgba(255,255,255,.34)}

/* focus — visible everywhere */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px;
}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:8px;z-index:9999;
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r-sm);
  font-size:.85rem;font-weight:600;
}
.skip:focus{left:16px}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
/* Shown only when scripting is available — otherwise the loader would have
   nothing to dismiss it and would sit permanently over the page. */
.preloader{display:none}
[data-js] .preloader{
  position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:grid;place-items:center;
  transition:opacity .55s ease,visibility .55s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.pl{display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px}
.pl__logo{width:min(330px,68vw);opacity:0;animation:plIn .8s var(--ease) .1s forwards}
.pl__gauge{
  width:min(330px,68vw);display:flex;flex-direction:column;gap:9px;
  opacity:0;animation:plIn .6s var(--ease) .45s forwards;
}
.pl__ticks{display:flex;justify-content:space-between}
.pl__ticks i{width:1px;height:5px;background:var(--line-2)}
.pl__ticks i:first-child,.pl__ticks i:last-child{height:9px;background:var(--navy-400)}
.pl__track{height:2px;background:var(--line);overflow:hidden}
.pl__track span{display:block;height:100%;width:0;background:var(--navy);animation:plFill 1.2s var(--ease) .5s forwards}
.pl__note{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
@keyframes plIn{to{opacity:1}}
@keyframes plFill{0%{width:0}55%{width:62%}100%{width:100%}}
body.is-loading{overflow:hidden}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:400;
  background:rgba(241,244,246,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s,background .3s;
}
.nav.is-stuck{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(9,77,123,.07);background:rgba(241,244,246,.94)}
.nav__wrap{
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);
  height:var(--nav-h);display:flex;align-items:center;gap:28px;
  transition:height .3s var(--ease);
}
.nav.is-stuck .nav__wrap{height:70px}
.nav__brand{flex:none;display:block}
.nav__brand img{width:190px;transition:width .3s var(--ease)}
.nav.is-stuck .nav__brand img{width:166px}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__link{
  position:relative;padding:9px 13px;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:500;color:var(--text);transition:color .2s;
}
.nav__link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1.5px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav__link:hover{color:var(--navy)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--navy);font-weight:600}
.nav__link.is-active::after{transform:scaleX(1);background:var(--navy)}

/* ---------- Products menu, split by manufacturer ---------- */
.nav__has-menu{position:relative;display:flex;align-items:center}
.nav__link--menu{display:inline-flex;align-items:center;gap:6px}
.nav__caret{width:10px;height:7px;flex:none;transition:transform .28s var(--ease);opacity:.7}
.nav__has-menu:hover .nav__caret,
.nav__has-menu:focus-within .nav__caret{transform:rotate(180deg);opacity:1}

.brandmenu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:310px;padding:8px;z-index:340;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);box-shadow:var(--shadow-m);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.brandmenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav__has-menu:hover .brandmenu,
.nav__has-menu:focus-within .brandmenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.brandmenu__item{
  display:flex;flex-direction:column;gap:6px;
  padding:11px 12px;border-radius:var(--r-sm);
  transition:background .2s;
}
.brandmenu__item:hover{background:var(--paper)}
.brandmenu__item+.brandmenu__item{border-top:1px solid var(--line)}
/* The item is a column flex box, so a default-stretched image would be pulled
   to the full menu width and the mark would distort. Sit it at the start and
   let the height alone decide the width. */
.brandmenu__logo{height:19px;width:auto;align-self:flex-start;object-fit:contain}
.brandmenu__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--muted);
}
.brandmenu__meta b{color:var(--navy);font-weight:600}
.brandmenu__all{
  display:block;margin-top:4px;padding:10px 12px;
  border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);transition:color .2s;
}
.brandmenu__all:hover{color:var(--cyan-dim)}

.nav__actions{display:flex;align-items:center;gap:14px;flex:none}
.nav__tel{
  font-family:var(--mono);font-size:.76rem;color:var(--muted);
  display:flex;align-items:center;gap:7px;transition:color .2s;
}
.nav__tel:hover{color:var(--navy)}
.nav__tel svg{width:14px;height:14px;opacity:.7}

/* ---------- navigation search ----------
   The bar has room for a real field only at the widest layout, so the field
   shows from 1240px and collapses to a magnifier below that, opening as a
   floating bar above its own results. Phones drop it entirely: the drawer
   carries a full-width field, and the bar there is already tight.
   ---------------------------------------------------------------------- */
.navsearch{position:relative;flex:none;display:flex;align-items:center}

.navsearch__field{
  display:flex;align-items:center;gap:8px;
  width:170px;height:38px;padding:0 13px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  transition:width .28s var(--ease),border-color .2s,box-shadow .2s;
}
/* the row has about 60px to spare once the number steps aside, so the
   focused field grows by 30 and no further */
.navsearch__field:focus-within{
  border-color:var(--cyan);box-shadow:0 0 0 3px rgba(15,178,196,.13);width:200px;
}
.navsearch__icon{width:15px;height:15px;flex:none;color:var(--muted);
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.navsearch__field:focus-within .navsearch__icon{color:var(--cyan-dim)}
.navsearch__input{
  width:100%;min-width:0;border:0;background:none;outline:none;padding:0;
  font-family:var(--body);font-size:.85rem;color:var(--text);
}
.navsearch__input::placeholder{color:var(--muted)}
.navsearch__input::-webkit-search-cancel-button,
.navsearch__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

/* the magnifier that replaces the field on narrower screens */
.navsearch__btn{
  display:none;width:40px;height:40px;border-radius:999px;
  align-items:center;justify-content:center;color:var(--text);
  transition:background .2s,color .2s;
}
.navsearch__btn:hover{background:var(--paper);color:var(--navy)}
.navsearch__btn svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round}
.navsearch.is-open .navsearch__btn{background:var(--paper);color:var(--navy)}

/* ---------- results ---------- */
.navsearch__panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:420;
  width:min(430px,calc(100vw - 2 * var(--gut)));
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);box-shadow:var(--shadow-m);
  padding:4px;max-height:min(430px,70vh);overflow-y:auto;overscroll-behavior:contain;
}
.navsearch__list{margin:0;padding:0;list-style:none}
.navsearch__opt{display:block;border-radius:var(--r-sm)}
.navsearch__opt > a{
  display:flex;align-items:center;gap:12px;padding:8px 10px;
  border-radius:var(--r-sm);color:inherit;
}
.navsearch__opt.is-active > a{background:var(--paper)}
.navsearch__shot{
  width:42px;height:42px;flex:none;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.navsearch__text{min-width:0}
.navsearch__name{
  display:block;font-size:.88rem;line-height:1.3;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.navsearch__opt.is-active .navsearch__name{color:var(--navy)}
.navsearch__name mark{background:none;color:var(--cyan-dim);font-weight:600}
.navsearch__meta{
  display:block;margin-top:2px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.navsearch__note{padding:10px 11px;font-size:.8rem;color:var(--muted);line-height:1.5}
.navsearch__all{
  display:block;margin:4px 2px 2px;padding:9px 10px;border-radius:var(--r-sm);
  border-top:1px solid var(--line);font-size:.8rem;color:var(--cyan-dim);
  font-weight:500;text-align:center;
}
.navsearch__all:hover,.navsearch__all:focus-visible{background:var(--paper)}

/* ---------- drawer field ----------
   It sits outside .drawer__links, whose 1.7rem display type would otherwise
   claim the result links; the drawer's own column gap spaces it.
   ---------------------------------------------------------------------- */
.drawer__search{
  position:relative;display:flex;align-items:center;gap:9px;
  margin:0;padding:0 14px;height:46px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
}
.drawer__search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(15,178,196,.13)}
.drawer__search .navsearch__panel{left:0;right:0;width:auto}

/* The bar cannot carry both the field and the telephone number: the links
   alone want 499px. On the widest layout the field takes the space and the
   number steps back to the drawer and the footer, where it already appears. */
@media (min-width:1240px){
  .nav__tel{display:none}
}
/* below the widest layout the field becomes a magnifier, and opening it drops
   the field in above its own results rather than squeezing the bar */
@media (max-width:1239px){
  .navsearch__field{
    display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:421;
    width:min(360px,calc(100vw - 2 * var(--gut)));height:42px;box-shadow:var(--shadow-m);
  }
  .navsearch.is-open .navsearch__field,
  .navsearch.is-open .navsearch__field:focus-within{
    display:flex;width:min(360px,calc(100vw - 2 * var(--gut)));
  }
  .navsearch__btn{display:flex}
  .navsearch.is-open .navsearch__panel{top:calc(100% + 62px)}
}
/* phones: the bar is already tight, so the drawer carries the field instead */
@media (max-width:560px){
  .navsearch{display:none}
}

.nav__toggle{
  display:none;width:44px;height:44px;margin-right:-8px;
  align-items:center;justify-content:center;border-radius:var(--r-sm);
}
.nav__toggle i{display:block;width:20px;height:1.6px;background:var(--navy);position:relative;transition:background .2s}
.nav__toggle i::before,.nav__toggle i::after{
  content:"";position:absolute;left:0;width:20px;height:1.6px;background:var(--navy);
  transition:transform .32s var(--ease),top .2s;
}
.nav__toggle i::before{top:-6px}
.nav__toggle i::after{top:6px}
body.menu-open .nav__toggle i{background:transparent}
body.menu-open .nav__toggle i::before{top:0;transform:rotate(45deg)}
body.menu-open .nav__toggle i::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:390;background:var(--navy);
  padding:calc(var(--nav-h) + 26px) var(--gut) 34px;
  display:flex;flex-direction:column;gap:30px;
  transform:translateX(100%);visibility:hidden;
  transition:transform .45s var(--ease),visibility .45s;
  overflow-y:auto;
}
body.menu-open .drawer{transform:translateX(0);visibility:visible}
.drawer__links{display:flex;flex-direction:column}
.drawer__links a{
  font-family:var(--display);font-weight:600;font-size:1.7rem;letter-spacing:-.02em;
  color:#fff;padding:14px 0;border-bottom:1px solid var(--line-dark);
  display:flex;align-items:baseline;gap:14px;
}
.drawer__links a em{
  font-family:var(--mono);font-style:normal;font-size:.6rem;
  letter-spacing:.16em;color:var(--navy-200);
}
.drawer__links a.is-active{color:var(--cyan)}

/* Products opens in place rather than navigating away */
.drawer__group{border-bottom:1px solid var(--line-dark)}
.drawer__toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--display);font-weight:600;font-size:1.7rem;letter-spacing:-.02em;
  color:#fff;padding:14px 0;text-align:left;
}
.drawer__toggle svg{width:15px;height:10px;flex:none;opacity:.7;transition:transform .3s var(--ease)}
.drawer__toggle[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}
.drawer__sub{display:flex;flex-direction:column;padding:2px 0 14px 14px}
.drawer__sub[hidden]{display:none}
.drawer__sub a{
  font-family:var(--body);font-weight:500;font-size:1rem;letter-spacing:0;
  color:var(--navy-200);padding:11px 0;border-bottom:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.drawer__sub a:hover{color:#fff}
.drawer__sub a em{
  font-family:var(--mono);font-style:normal;font-size:.68rem;color:var(--navy-400);
}
.drawer__sub a:last-child{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
}
.drawer__foot{display:flex;flex-direction:column;gap:14px;margin-top:auto}
.drawer__foot .meta{font-family:var(--mono);font-size:.74rem;color:var(--navy-200);line-height:1.9}
.drawer__foot .meta a:hover{color:#fff}

/* ==========================================================================
   HERO + PAGE HEADS
   ========================================================================== */
.hero{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding-block:clamp(60px,8vw,116px) clamp(66px,7.5vw,100px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(115% 90% at 20% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(115% 90% at 20% 0%,#000 20%,transparent 78%);
}
/* No brand watermark on the home hero — the equipment photograph occupies
   that corner and the two would fight each other. Interior pages keep it. */
.hero__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(26px,3.6vw,56px);align-items:center;
}
.hero__copy{display:flex;flex-direction:column;gap:24px}
.hero__copy .h1{color:#fff;max-width:14ch}
.hero__copy .sub{max-width:48ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero__aside{position:relative}

/* ---------- hero slideshow ----------
   Transparent PNGs, one at a time, over the navy. The stage has a fixed 4:3
   shape so nothing below it moves as the pictures change.

   The pictures arrive on canvases with very different transparent margins --
   one instrument fills 44% of its canvas width, another 97% -- so each is sized
   by its visible content, not its canvas. Per picture, measured from its
   pixels: --ca is the content's aspect ratio, --fx the share of the canvas
   width the content takes, --dx/--dy the shift that centres the content and
   stands it on the common floor. The content box is fitted to the stage with
   container units, then the canvas is scaled up around it.
   ------------------------------------------------------------------------- */
.heroshow{position:relative}
.heroshow__stage{
  position:relative;aspect-ratio:4/3;container-type:size;
  overflow-x:clip;           /* transparent canvas edges may not widen the page */
}
.heroshow__stage::before{    /* soft pool of light so each instrument is grounded */
  content:"";position:absolute;left:12%;right:12%;bottom:0;height:14%;
  background:radial-gradient(ellipse at 50% 50%,rgba(140,200,235,.22),rgba(140,200,235,0) 70%);
  border-radius:50%;pointer-events:none;
}
.heroshow__slide{
  position:absolute;inset:0 0 5% 0;margin:0;
  pointer-events:none;       /* a canvas edge below the floor must not swallow clicks on the controls */
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;transform:scale(.965) translateY(10px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease),visibility 0s linear .9s;
}
.heroshow__slide.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .9s var(--ease),transform 1.1s var(--ease),visibility 0s;
}
.heroshow__slide img{
  display:block;flex:none;height:auto;
  /* fit the content inside 92% of the width and 86% of the height, then
     scale the whole canvas so the content comes out at that size */
  width:calc(min(92cqw, 86cqh * var(--ca, 1)) / var(--fx, 1));
  transform:translate(var(--dx, 0%), var(--dy, 0%));
  filter:drop-shadow(0 22px 34px rgba(2,20,34,.5));
}
@supports not (container-type:size){
  .heroshow__slide img{width:auto;max-width:100%;max-height:100%;transform:none}
}

.heroshow__controls{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;
}
.heroshow__toggle{
  width:30px;height:30px;flex:none;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.28);
  transition:color .2s,border-color .2s,background .2s;
}
.heroshow__toggle:hover,.heroshow__toggle:focus-visible{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.heroshow__icon{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}
.heroshow__icon--play{fill:currentColor;stroke-linejoin:round}
.heroshow__icon--play,.heroshow.is-paused .heroshow__icon--pause{display:none}
.heroshow.is-paused .heroshow__icon--play{display:block}
.heroshow__dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.heroshow__dot{
  width:7px;height:7px;padding:0;border-radius:999px;
  background:rgba(255,255,255,.3);transition:width .35s var(--ease),background .25s;
}
.heroshow__dot:hover{background:rgba(255,255,255,.6)}
.heroshow__dot[aria-current="true"]{width:22px;background:var(--cyan)}
/* the dots are small to look at; give a finger a proper target */
.heroshow__dot{position:relative}
.heroshow__dot::after{content:"";position:absolute;inset:-9px -3px}

/* reduced motion: no drift or scale; the global rule already makes the swap instant */
@media (prefers-reduced-motion:reduce){
  .heroshow__slide{transform:none}
}
/* On desktop the range reclaims the container gutter so it reads at full size
   rather than sitting politely inside the text column's grid. */
@media (min-width:1100px){
  .hero__aside{margin-right:calc(var(--gut) * -1)}
}

.hero__copy>*,.hero__aside{opacity:0;transform:translateY(22px);animation:heroUp .85s var(--ease) forwards}
.hero__copy>*:nth-child(1){animation-delay:.06s}
.hero__copy>*:nth-child(2){animation-delay:.16s}
.hero__copy>*:nth-child(3){animation-delay:.26s}
.hero__copy>*:nth-child(4){animation-delay:.36s}
.hero__aside{animation-delay:.3s}
@keyframes heroUp{to{opacity:1;transform:none}}

.pagehead{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding-block:clamp(48px,6vw,82px) clamp(48px,5.5vw,76px);
}
.pagehead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 12% 0%,#000 15%,transparent 76%);
  mask-image:radial-gradient(120% 100% at 12% 0%,#000 15%,transparent 76%);
}
.pagehead::after{
  content:"";position:absolute;right:-90px;bottom:-160px;width:440px;height:440px;
  background:url("../assets/logo-mark-white.svg") no-repeat center/contain;
  opacity:.05;pointer-events:none;
}
.pagehead__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,60px);align-items:end;
}
.pagehead .h1{color:#fff;font-size:clamp(2.3rem,4.8vw,3.85rem)}
.pagehead__copy{display:flex;flex-direction:column;gap:18px}
.crumb{
  font-family:var(--mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-200);display:flex;gap:9px;align-items:center;
}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}

/* a manufacturer's mark sitting above the page heading.
   align-self stops the flex column stretching it to full width. */
.pagehead__mark{height:26px;width:auto;align-self:flex-start;margin-bottom:-2px}
.pagehead__mark[hidden]{display:none}

/* The range photograph floats straight on the navy, exactly like the hero —
   no frame, no panel. It needs a cut-out PNG to read correctly. */
/* One box whatever the manufacturer. The range photographs arrive in
   different proportions, so without a fixed box each brand would give the
   head a different height and the shots would sit at different sizes. */
.pagehead__shot{margin:0;position:relative;aspect-ratio:3/2}
.pagehead__shot[hidden]{display:none}
.pagehead__shot::before{        /* the same soft pool of light as the hero */
  content:"";position:absolute;left:7%;right:7%;bottom:1%;height:15%;
  background:radial-gradient(ellipse at 50% 50%,rgba(140,200,235,.20),rgba(140,200,235,0) 70%);
  border-radius:50%;pointer-events:none;
}
.pagehead__shot img{
  position:relative;width:100%;height:100%;display:block;
  object-fit:contain;object-position:center bottom;   /* all stand on one floor */
  filter:drop-shadow(0 24px 40px rgba(2,20,34,.5));
}

/* ==========================================================================
   SPEC STRIP — the monographs the equipment answers to
   ========================================================================== */
.specstrip{background:var(--navy-900);color:#fff;border-top:1px solid rgba(255,255,255,.07)}
.specstrip__grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);
}
.specstrip__cell{
  padding:20px 22px 20px 0;display:flex;flex-direction:column;gap:4px;
  position:relative;
}
.specstrip__cell+.specstrip__cell{padding-left:22px;border-left:1px solid rgba(255,255,255,.1)}
.specstrip__cell b{
  font-family:var(--mono);font-size:.82rem;font-weight:600;color:#fff;letter-spacing:.01em;
}
.specstrip__cell span{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy-200);
}
.specstrip__cell b::before{
  content:"";display:block;width:18px;height:2px;background:var(--cyan);margin-bottom:9px;
}

/* ==========================================================================
   PLATE — the signature device (an instrument data plate)
   ========================================================================== */
.plate{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.plate::before,.plate::after{
  content:"";position:absolute;top:11px;width:4px;height:4px;border-radius:50%;
  background:var(--line-2);
}
.plate::before{left:11px}
.plate::after{right:11px}
.plate--hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--navy-200)}

.plate__head{padding:26px 24px 18px;display:flex;flex-direction:column;gap:9px}
.plate__tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy-400);
}
.plate__title{
  font-family:var(--display);font-weight:600;font-size:1.1rem;line-height:1.25;
  letter-spacing:-.015em;color:var(--navy);
}
.plate__title a{transition:color .2s}
.plate__title a:hover{color:var(--cyan-dim)}
.plate__desc{font-size:.9rem;color:var(--muted);line-height:1.6}

.plate__rows{margin:0;padding:0 24px;border-top:1px solid var(--line)}
/* a card that ends on its rows has no foot to sit on, so it needs the
   breathing room the foot's padding used to give it */
.plate__rows:last-child{padding-bottom:18px}
.plate__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px dashed var(--line);
  font-family:var(--mono);font-size:.735rem;
}
.plate__row:last-child{border-bottom:0}
/* The label held its full width at any size, so a long one such as
   "NUMBER OF DISSOLUTION VESSEL POSITIONS" pushed the value off a narrow
   card. It may shrink now; on a wide card there is room and it never does. */
.plate__row dt{
  color:var(--muted);letter-spacing:.09em;text-transform:uppercase;font-size:.63rem;
  flex:0 1 auto;min-width:0;overflow-wrap:anywhere;
}
/* Specification values arrive as published, and a few are a single unbroken
   run ("1~400,450,500,550,600,635"). Let the value wrap, and break it when it
   has no space to wrap at, so a card can never push the page sideways. */
.plate__row dd{
  margin:0;color:var(--navy);font-weight:500;text-align:right;
  min-width:0;overflow-wrap:anywhere;
}

.plate__foot{
  margin-top:auto;padding:14px 24px 18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

/* plate on navy */
.plate--dark{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.plate--dark::before,.plate--dark::after{background:rgba(255,255,255,.28)}
.plate--dark .plate__title{color:#fff}
.plate--dark .plate__tag{color:var(--navy-200)}
.plate--dark .plate__desc{color:var(--navy-200)}
.plate--dark .plate__rows{border-color:rgba(255,255,255,.14)}
.plate--dark .plate__row{border-bottom-color:rgba(255,255,255,.12)}
.plate--dark .plate__row dt{color:var(--navy-200)}
.plate--dark .plate__row dd{color:#fff}
.plate--dark .plate__foot{border-color:rgba(255,255,255,.14)}

/* hero aside plate */

/* ==========================================================================
   DISTRIBUTORSHIP PANEL — the three marks in their own colours
   ========================================================================== */
.distrib{padding:26px 28px 28px}
.distrib__label{margin-bottom:20px}
.distrib__row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);                 /* gap shows as a hairline */
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.distrib__cell{
  background:var(--surface);display:grid;place-items:center;
  padding:26px 22px;min-height:98px;
}
.distrib__cell img{
  height:30px;width:auto;max-width:100%;object-fit:contain;
}

/* ==========================================================================
   CAPABILITY CARDS
   ========================================================================== */
.cap{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.cap:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--navy-200)}
.cap__icon{
  width:42px;height:42px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);
  color:var(--navy);
}
.cap__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.cap p{font-size:.925rem;color:var(--muted);line-height:1.65}
.cap--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.cap--dark:hover{border-color:rgba(255,255,255,.3);box-shadow:none;background:rgba(255,255,255,.08)}
.cap--dark .cap__icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.cap--dark p{color:var(--navy-200)}

/* ==========================================================================
   PRINCIPAL PANELS
   ========================================================================== */
.principal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:30px 28px;display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.principal:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--navy-200)}
.principal::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:var(--navy);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.principal:hover::after{transform:scaleY(1)}
.principal__name{
  font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-.022em;color:var(--navy);
}
.principal__origin{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-400);
}
.principal p{font-size:.925rem;color:var(--muted)}
/* Company name on the left, the manufacturer's own mark on the right.
   All three principal logos are dark by default, so the copies in /assets are
   recoloured to white for these navy cards. */
.principal__id{
  display:flex;align-items:center;flex-wrap:wrap;
  column-gap:14px;row-gap:10px;
}
.principal__logo{
  height:22px;width:auto;flex:none;opacity:.92;
  /* margin rather than space-between, so the mark stays right-aligned even on
     a narrow card where it has wrapped onto its own line */
  margin-left:auto;
}
.principal__list{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.chip{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;
  padding:5px 9px;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line);color:var(--muted);
}

/* ==========================================================================
   PROCESS — a real sequence, so it is numbered
   ========================================================================== */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  counter-increment:step;
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:26px 0;border-top:1px solid var(--line);align-items:start;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__no{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;color:var(--navy-400);
  padding-top:4px;
}
.step__no::before{content:"0" counter(step)}
.step__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(12px,3vw,40px);align-items:start}
.step__body p{font-size:.94rem;color:var(--muted)}
.section--navy .step{border-color:rgba(255,255,255,.13)}
.section--navy .step:last-child{border-bottom-color:rgba(255,255,255,.13)}
.section--navy .step__no{color:var(--navy-200)}
.section--navy .step__body p{color:var(--navy-200)}

/* ==========================================================================
   STAT ROW
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.stat{background:var(--surface);padding:26px 24px;display:flex;flex-direction:column;gap:6px}
.stat b{
  font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3vw,2.4rem);
  letter-spacing:-.03em;color:var(--navy);line-height:1;
  font-variant-numeric:tabular-nums;   /* digits keep their column while counting */
}
.stat span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{position:relative;background:var(--navy-900);color:#fff;overflow:hidden}
.cta::after{
  content:"";position:absolute;left:-100px;top:-120px;width:420px;height:420px;
  background:url("../assets/logo-mark-white.svg") no-repeat center/contain;
  opacity:.04;pointer-events:none;
}
.cta__wrap{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,60px);flex-wrap:wrap;padding-block:clamp(48px,6vw,78px);
}
.cta__copy{display:flex;flex-direction:column;gap:14px;flex:1 1 440px;max-width:58ch}
.cta .h2{color:#fff}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--navy-900);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);padding-block:clamp(48px,6vw,72px);
}
.footer__brand{display:flex;flex-direction:column;gap:18px}
.footer__brand img{width:210px}
.footer__brand p{font-size:.9rem;color:var(--navy-200);max-width:34ch}
.footer__col h4{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy-200);margin-bottom:16px;font-weight:500;
}
.footer__col ul{display:flex;flex-direction:column;gap:10px}
.footer__col a,.footer__col li{font-size:.9rem;color:#E8F0F6}
.footer__col a{transition:color .2s;display:inline-flex;align-items:baseline;gap:8px}
.footer__col a:hover{color:var(--cyan)}
.footer__addr{font-style:normal;font-size:.9rem;color:#E8F0F6;line-height:1.75}
.footer__addr a:hover{color:var(--cyan)}
.footer__addr .lbl{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-200);display:block;margin-bottom:3px;
}
.footer__addr>div+div{margin-top:14px}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.1);padding-block:20px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--navy-200);
}
.footer__bar a:hover{color:#fff}
/* the designer credit sits quieter than the notices either side of it */
.footer__credit{opacity:.72;transition:opacity .25s}
.footer__credit:hover{opacity:1}
.footer__credit a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.28)}
.footer__credit a:hover{text-decoration-color:currentColor}

/* ==========================================================================
   FLOATING WHATSAPP
   ========================================================================== */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:380;
  display:flex;align-items:center;gap:0;
  height:56px;padding:0;border-radius:999px;background:var(--wa);
  box-shadow:0 8px 26px rgba(37,211,102,.42),0 2px 6px rgba(0,0,0,.14);
  transition:transform .3s var(--ease),box-shadow .3s,gap .35s var(--ease),padding .35s var(--ease);
  overflow:hidden;
}
.wa__icon{width:56px;height:56px;display:grid;place-items:center;flex:none}
.wa__icon svg{width:28px;height:28px;fill:#fff}
.wa__label{
  max-width:0;opacity:0;white-space:nowrap;color:#fff;font-weight:600;font-size:.88rem;
  transition:max-width .38s var(--ease),opacity .28s,padding .38s var(--ease);
  padding-right:0;
}
.wa:hover,.wa:focus-visible{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,211,102,.5)}
.wa:hover .wa__label,.wa:focus-visible .wa__label{max-width:190px;opacity:1;padding-right:22px}
.wa__ping{
  position:absolute;inset:0;border-radius:999px;border:2px solid var(--wa);
  animation:waPing 2.6s ease-out infinite;pointer-events:none;
}
@keyframes waPing{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.32);opacity:0}
  100%{transform:scale(1.32);opacity:0}
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* Scoped to [data-js] so a blocked or failed script leaves the content
   visible rather than stranded at opacity 0. */
[data-js] [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-js] [data-reveal].is-in{opacity:1;transform:none}

/* ==========================================================================
   FORMS
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.field label .req{color:var(--cyan)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);font-size:.94rem;color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(9,77,123,.1);
}
.field input::placeholder,.field textarea::placeholder{color:#9BAEBB}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C7180' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px}
/* ---------- instrument type-ahead ---------- */
.sugg{position:relative}
.sugg__list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  margin:0;padding:4px;list-style:none;
  max-height:266px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-md);box-shadow:var(--shadow-m);
}
.sugg__opt{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;
}
.sugg__opt.is-active{background:var(--paper)}
.sugg__opt.is-active .sugg__name{color:var(--navy)}
.sugg__name{font-size:.9rem;color:var(--text);line-height:1.35}
.sugg__name mark{background:none;color:var(--cyan-dim);font-weight:600}
.sugg__opt.is-active .sugg__name mark{color:var(--cyan-dim)}
.sugg__brand{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;flex:none;
}
.sugg__note{
  padding:10px 11px;font-size:.8rem;color:var(--muted);line-height:1.5;
}

.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.formgrid .span2{grid-column:1/-1}
.formnote{font-size:.8rem;color:var(--muted)}
.formmsg{
  display:none;gap:10px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--r-sm);
  background:#E9F7F8;border:1px solid #B8E5E9;color:#0A5C64;font-size:.87rem;
}
.formmsg.is-on{display:flex}
.formmsg svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:currentColor;fill:none;stroke-width:2}

/* ==========================================================================
   QUOTE MODAL
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;
  padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__veil{position:absolute;inset:0;background:rgba(5,43,69,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal__card{
  position:relative;width:min(660px,100%);max-height:88vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-l);
  transform:translateY(18px) scale(.985);transition:transform .35s var(--ease);
}
.modal.is-open .modal__card{transform:none}
.modal__head{
  padding:26px 28px 20px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
}
.modal__head .sub{font-size:.95rem}
.modal__close{
  width:36px;height:36px;flex:none;border-radius:var(--r-sm);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);transition:.2s;
}
.modal__close:hover{background:var(--paper);color:var(--navy);border-color:var(--line-2)}
.modal__close svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.modal__body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:18px}
.modal__actions{display:flex;gap:12px;flex-wrap:wrap}
body.modal-open{overflow:hidden}

/* ==========================================================================
   PRODUCTS — filters + catalogue
   ========================================================================== */
.filters{
  position:sticky;top:70px;z-index:120;
  background:rgba(241,244,246,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding-block:16px;
  transition:top .3s var(--ease);
}
.filters__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filters__row+.filters__row{margin-top:12px}
.filters__label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);flex:none;width:72px;
}
.fchips{display:flex;gap:7px;flex-wrap:wrap}
.fchip{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--muted);transition:.2s;
}
.fchip:hover{border-color:var(--navy-400);color:var(--navy)}
.fchip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.fsearch{position:relative;margin-left:auto;min-width:230px;flex:1;max-width:320px}
.fsearch input{
  width:100%;padding:9px 14px 9px 36px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);font-size:.86rem;transition:border-color .2s,box-shadow .2s;
}
.fsearch input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(9,77,123,.1)}
.fsearch svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none;
}
.fcount{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.05em}

.catalogue{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.catalogue .plate{animation:cardIn .45s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.plate.is-hidden{display:none}
.empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--muted);
}
.empty p{margin-top:8px;font-size:.92rem}

.brandbadge{
  display:inline-flex;align-items:center;flex:none;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-sm);border:1px solid var(--line);
  color:var(--navy);background:var(--paper);
}
/* the manufacturer's own mark, in its own colours — the chip stays light so
   the brand colours read correctly */
.brandbadge img{height:13px;width:auto;display:block}

/* ==========================================================================
   PRODUCT DETAIL — gallery, buying panel, specification table
   ========================================================================== */
.product{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start;
}

/* gallery: a rail of thumbnails beside the main shot */
.gallery{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start}
.gallery__rail{display:flex;flex-direction:column;gap:10px}
.gallery__thumb{
  padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);cursor:pointer;line-height:0;
  transition:border-color .22s,box-shadow .22s,transform .22s var(--ease);
}
.gallery__thumb img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.gallery__thumb:hover{border-color:var(--navy-200);transform:translateY(-2px)}
.gallery__thumb.is-on{border-color:var(--navy);box-shadow:0 0 0 2px rgba(9,77,123,.16)}
.gallery__stage{
  margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
}
.gallery__stage img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block}

/* hover to zoom — the stage crops, and the script moves the shot's origin
   under the pointer so the magnified part is whatever is being looked at */
@media (hover:hover) and (pointer:fine){
  .gallery__stage{cursor:zoom-in}
  .gallery__stage img{transition:transform .32s var(--ease);will-change:transform}
  .gallery__stage.is-zoomed img{transform:scale(var(--zoom,2.4));transition-duration:.2s}
}
@media (prefers-reduced-motion:reduce){
  .gallery__stage img{transition:none}
}

/* buying panel */
.product__info{display:flex;flex-direction:column;gap:16px}
.product__blurb{font-size:.96rem;color:var(--muted);line-height:1.65}

.specs{margin:6px 0 0;border-top:1px solid var(--line)}
.specs__row{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.78rem;align-items:baseline;
}
.specs__row dt{
  color:var(--muted);letter-spacing:.09em;text-transform:uppercase;font-size:.63rem;
}
.specs__row dd{margin:0;color:var(--navy);font-weight:500;line-height:1.6}
.specs__row--wide dd{word-break:break-word}

/* quantity + actions */
.buybar{
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  margin-top:8px;padding-top:20px;border-top:1px solid var(--line);
}
.qty{display:flex;flex-direction:column;gap:7px;flex:none}
.qty__label{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.qty__control{
  display:flex;align-items:stretch;border:1px solid var(--line-2);
  border-radius:var(--r-sm);overflow:hidden;background:var(--surface);
}
.qty__step{
  width:38px;display:grid;place-items:center;font-size:1.05rem;line-height:1;
  color:var(--navy);background:var(--paper);transition:background .2s;
}
.qty__step:hover{background:var(--paper-2)}
.qty__input{
  width:62px;text-align:center;border:0;border-inline:1px solid var(--line-2);
  padding:11px 4px;font-family:var(--mono);font-size:.9rem;background:var(--surface);
  -moz-appearance:textfield;appearance:textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty__input:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(9,77,123,.12)}
.buybar__actions{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 260px}

/* the inquiry list carried into the quote form */
.inqlist{
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);padding:14px 16px;
}
.inqlist__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.inqlist ul{display:flex;flex-direction:column;gap:6px}
.inqlist li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:.86rem;color:var(--text);
  padding:6px 0;border-bottom:1px dashed var(--line);
}
.inqlist li:last-child{border-bottom:0}
.inqlist li b{font-family:var(--mono);font-size:.74rem;color:var(--navy);font-weight:500;flex:none}
.inqlist__drop{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);flex:none;transition:color .2s;
}
.inqlist__drop:hover{color:#B3261E}

/* count badge on the quote buttons */
.inqbadge{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  margin-left:2px;border-radius:999px;background:var(--cyan);color:#06333a;
  font-family:var(--mono);font-size:.66rem;font-weight:600;line-height:1;
}

/* specification table */
.tablewrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);-webkit-overflow-scrolling:touch;
}
.spectable{border-collapse:collapse;width:100%;min-width:820px;font-size:.83rem}
.spectable th,.spectable td{
  padding:11px 14px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
}
.spectable th:last-child,.spectable td:last-child{border-right:0}
.spectable tbody tr:last-child th,.spectable tbody tr:last-child td{border-bottom:0}
.spectable thead th{
  background:var(--navy);color:#fff;font-family:var(--mono);font-weight:500;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  border-right-color:rgba(255,255,255,.16);border-bottom:0;
  position:sticky;top:0;
}
.spectable tbody th{
  font-family:var(--body);font-weight:600;color:var(--navy);
  background:var(--paper);white-space:nowrap;
}
.spectable tbody td{font-family:var(--mono);font-size:.78rem;color:var(--text)}
/* fewer columns need far less room, and their row labels run longer */
.spectable--narrow{min-width:520px}
.spectable--narrow tbody th{white-space:normal;min-width:210px}
/* a band that splits one table into labelled sections */
.spectable tbody .spectable__group th{
  background:var(--paper-2);color:var(--navy);
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:normal;
}
.spectable tbody tr:hover td{background:#F7FAFB}

/* ==========================================================================
   SERVICES + ABOUT + CAREERS bits
   ========================================================================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.split--top{align-items:start}
.prose{display:flex;flex-direction:column;gap:16px}
.prose p{color:var(--muted)}

.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--muted)}
.ticks svg{width:16px;height:16px;flex:none;margin-top:5px;stroke:var(--cyan);fill:none;stroke-width:2.2}
.ticks--light li{color:var(--navy-200)}

.svc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--navy-200)}
.svc__no{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;color:var(--navy-400);
}
.svc p{font-size:.92rem;color:var(--muted)}
.svc__meta{
  margin-top:8px;padding-top:12px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:.68rem;color:var(--muted);
  display:flex;justify-content:space-between;gap:10px;
}
.svc__meta b{color:var(--navy);font-weight:500}

.role{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.role[open]{border-color:var(--navy-200);box-shadow:var(--shadow-s)}
.role+.role{margin-top:12px}
.role summary{
  list-style:none;cursor:pointer;padding:22px 24px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
}
.role summary::-webkit-details-marker{display:none}
.role__title{display:flex;flex-direction:column;gap:7px}
.role__meta{display:flex;gap:8px;flex-wrap:wrap}
.role__open{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--navy);flex:none;transition:.3s var(--ease);
}
.role__open svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.role[open] .role__open{transform:rotate(45deg);background:var(--navy);border-color:var(--navy);color:#fff}
.role__body{padding:0 24px 26px;border-top:1px solid var(--line);padding-top:22px;margin-top:0}
.role__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.role__cols h4{margin-bottom:12px}
.role__body .btn{margin-top:22px}

.map{
  width:100%;height:380px;border:1px solid var(--line);border-radius:var(--r-md);
  filter:grayscale(1) contrast(.95);transition:filter .5s;background:var(--paper-2);
}
.map:hover{filter:grayscale(0) contrast(1)}

.contactgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,4vw,56px);align-items:start}

.hours{display:flex;flex-direction:column}
.hours li{
  display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px dashed var(--line);font-family:var(--mono);font-size:.75rem;
}
.hours li:last-child{border-bottom:0}
.hours li span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-size:.66rem}
.hours li span:last-child{color:var(--navy);font-weight:500}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .catalogue{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .specstrip__grid{grid-template-columns:repeat(3,1fr)}
  .specstrip__cell:nth-child(3n+1){padding-left:0;border-left:0}
  .specstrip__cell:nth-child(n+4){border-top:1px solid rgba(255,255,255,.1)}
}
/* The links alone want 499px, and with the logo, the search and the quote
   button the row only balances at the full 1240px layout — it overflowed
   between 980px and 1100px even before the search arrived. So the drawer
   takes over below 1240, where the magnifier and the number both fit beside
   the burger; the number steps out again on the narrowest of those. */
@media (max-width:1239px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__actions{margin-left:auto}
}
@media (max-width:1100px){
  .nav__tel{display:none}
}
@media (max-width:980px){
  .hero__grid,.pagehead__grid,.split,.contactgrid,.product{grid-template-columns:1fr}
  .hero__copy .h1{max-width:none}
  /* the equipment photo stacks under the copy and stays visible on phones */
  .hero__aside{max-width:620px;width:100%;margin-inline:auto}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  /* four marks will not fit across a tablet — go two by two */
  .distrib__row{grid-template-columns:repeat(2,1fr)}
  .distrib__cell{padding:24px 18px}
  .distrib__cell img{height:27px}
  .step__body{grid-template-columns:1fr;gap:8px}
  .footer__top{grid-template-columns:repeat(2,1fr)}
  .filters{position:static}
}
@media (max-width:720px){
  :root{--nav-h:70px}
  .grid--2,.grid--3,.grid--4,.grid--principals,.catalogue{grid-template-columns:1fr}
  .specstrip__grid{grid-template-columns:repeat(2,1fr)}
  .specstrip__cell:nth-child(3n+1){padding-left:22px;border-left:1px solid rgba(255,255,255,.1)}
  .specstrip__cell:nth-child(2n+1){padding-left:0;border-left:0}
  .specstrip__cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .formgrid,.role__cols{grid-template-columns:1fr}
  .principal__logo{height:19px}
  /* three across would squeeze each mark to about 14px tall — stack instead */
  .distrib{padding:22px 20px 24px}
  .distrib__row{grid-template-columns:1fr}
  .distrib__cell{padding:22px 18px;min-height:0}
  .distrib__cell img{height:28px}
  .stats{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .nav__brand img{width:158px}
  .nav.is-stuck .nav__brand img{width:150px}
  .step{grid-template-columns:1fr;gap:10px}
  .cta__wrap{flex-direction:column;align-items:flex-start}
  .fsearch{margin-left:0;max-width:none}
  .filters__label{width:auto}
  /* main shot on top, thumbnails scroll underneath it */
  .gallery{grid-template-columns:1fr;gap:12px}
  .gallery__rail{
    order:2;flex-direction:row;overflow-x:auto;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .gallery__thumb{flex:0 0 74px}
  .gallery__stage{order:1}
  .buybar{gap:14px}
  .buybar__actions{flex:1 1 100%}
  .buybar__actions .btn{flex:1 1 auto;justify-content:center}
  .specs__row{grid-template-columns:1fr;gap:3px}
  .wa{right:16px;bottom:16px}
  .map{height:300px}
}
/* The bar's 28px gaps were sized for desktop: on a phone the logo, the quote
   button and the burger together ran past the viewport. Tighten the gaps and
   the button before the row is forced to overflow. */
@media (max-width:560px){
  .nav__wrap{gap:12px}
  .nav__actions{gap:10px}
  .nav__actions .btn{padding:11px 14px;font-size:.82rem}
}
@media (max-width:400px){
  .nav__brand img{width:132px}
  .nav.is-stuck .nav__brand img{width:126px}
}
/* 320px hardware still exists; the row fits there rather than scrolling */
@media (max-width:360px){
  .nav__wrap{gap:8px}
  .nav__brand img,.nav.is-stuck .nav__brand img{width:116px}
  .nav__actions .btn{padding:10px 11px;font-size:.76rem}
}

@media (max-width:420px){
  .btn{padding:12px 18px;font-size:.86rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-js] [data-reveal]{opacity:1;transform:none}
  .hero__copy>*,.hero__aside{opacity:1;transform:none}
  .wa__ping{display:none}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .nav,.drawer,.wa,.preloader,.modal,.filters,.cta{display:none !important}
  body{background:#fff}
  .hero,.pagehead,.footer,.section--navy{background:#fff !important;color:#000 !important}
  .hero .h1,.pagehead .h1{color:#000 !important}
}