/* TLC build 2026-07-04b */
/* ============================================================
   TLC Pharmaceutical Standards — Design System
   Evolved brand · static · 2026
   Palette: TLC blue #004aa4 + molecule green #29963a
   Type: Merriweather Sans (headings + body) · Source Code Pro (products, codes, ISO, data)
   ============================================================ */

:root{--hdr-max:1600px;--hdr-pad:clamp(20px,2.5vw,48px);
  /* ---- brand color ---- */
  --blue:#004aa4;
  --blue-600:#0356bd;
  --blue-700:#003d88;
  --blue-deep:#012a5e;
  --ink:#071a33;          /* near-black navy for text */
  --ink-soft:#2b3f5c;
  --mut:#5a6c84;          /* muted body */
  --green:#29963a;
  --green-deep:#1f7a2e;
  --green-soft:#e7f4e9;

  /* ---- surfaces ---- */
  --white:#ffffff;
  --paper:#f4f7fb;        /* cool light */
  --paper-2:#eef3f9;
  --tint:#eaf1fa;         /* blue tint */
  --line:#cdd9e8;          /* card / divider outline — clearer */
  --line-2:#b6c7dd;
  --navy-grad-a:#04244e;
  --navy-grad-b:#012347;

  /* ---- type ---- */
  --display:"Merriweather Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --body:"Merriweather Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"Source Code Pro",ui-monospace,SFMono-Regular,monospace;

  /* ---- scale (fluid) ---- */
  --fs-h1:clamp(2.6rem,1.6rem + 4.2vw,5rem);
  --fs-h2:clamp(1.9rem,1.3rem + 2.4vw,3.05rem);
  --fs-h3:clamp(1.18rem,1.05rem + .5vw,1.45rem);
  --fs-lede:clamp(1.06rem,.98rem + .45vw,1.32rem);

  /* ---- spacing / shape ---- */
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --r-xl:30px;
  --shadow-sm:0 1px 2px rgba(7,26,51,.05),0 2px 6px rgba(7,26,51,.04);
  --shadow:0 4px 14px rgba(7,26,51,.07),0 16px 40px -16px rgba(7,26,51,.14);
  --shadow-lg:0 8px 24px rgba(7,26,51,.09),0 40px 80px -28px rgba(4,40,80,.32);
  --shadow-blue:0 12px 32px -10px rgba(0,74,164,.45);

  /* ---- motion ---- */
  --e-out:cubic-bezier(.16,.84,.34,1);
  --e-soft:cubic-bezier(.32,.72,0,1);
  --t:.45s var(--e-out);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--blue);color:#fff}

/* skip link (a11y) */
.skip-link{position:fixed;left:14px;top:-80px;z-index:200;background:var(--blue);color:#fff;
  padding:11px 18px;border-radius:10px;font-weight:600;font-size:.92rem;box-shadow:var(--shadow);
  transition:top .25s var(--e-out)}
.skip-link:focus{top:14px}
#main{scroll-margin-top:120px}
#main:focus{outline:none}

/* focus visibility (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(0,74,164,.5);outline-offset:2px;border-radius:4px;
}

/* ---------- layout helpers ---------- */
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);font-weight:500;margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,var(--green),var(--blue))}
.accent{color:var(--blue);font-style:italic}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.06;color:var(--ink)}
h1,h2{font-weight:300} /* big display headlines run light; h3/h4 stay regular so small titles don't wash out */
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);line-height:1.08}
h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.01em}
p{color:var(--mut)}
.lede{font-size:var(--fs-lede);color:var(--ink-soft);line-height:1.5;max-width:42ch}

/* ===========================================================
   TOP CONTACT BAR
   =========================================================== */
.topbar{background:var(--blue-deep);color:rgba(255,255,255,.9);font-size:.82rem;position:relative;z-index:60}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:42px;gap:18px}
.tb-contacts{display:flex;align-items:center;gap:28px}
.topbar a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);transition:color .2s;white-space:nowrap}
.topbar a:hover{color:#9fe6ac}
.topbar svg{width:14px;height:14px;stroke:#7fd692;fill:none;stroke-width:1.8;flex:0 0 auto}
.tb-iso{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.14em;color:#b8f0c2;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.tb-iso .dot{width:6px;height:6px;border-radius:50%;background:#3ad457;box-shadow:0 0 0 0 rgba(58,212,87,.6);animation:pulse 2.6s var(--e-soft) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,212,87,.55)}70%{box-shadow:0 0 0 7px rgba(58,212,87,0)}100%{box-shadow:0 0 0 0 rgba(58,212,87,0)}}

/* ===========================================================
   HEADER
   =========================================================== */
/* blur lives on ::before so the header element itself does NOT create a
   containing block — otherwise the position:fixed mobile menu gets trapped */
header.site{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s}
header.site::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);transition:background .3s}
header.site.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(7,26,51,.5)}
header.site.scrolled::before{background:rgba(255,255,255,.92)}
.bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:76px;gap:22px;transition:height .3s var(--e-out)}
/* header + top bar use a wider container than page content (.wrap = 1220px) so the search box has room.
   Same idea as V1, whose header ran full-width with 48px side gutters. */
.topbar-inner,.bar{max-width:var(--hdr-max);padding-left:var(--hdr-pad);padding-right:var(--hdr-pad)}
header.site.scrolled .bar{height:64px}
.logo-img{height:38px;width:auto;transition:height .3s var(--e-out)}
header.site.scrolled .logo-img{height:33px}
.brand-link{display:flex;align-items:flex-start;flex:0 0 auto}
.brand-tm{font-size:.6rem;font-weight:600;color:var(--mut);line-height:1;margin-left:2px;margin-top:1px}

.searchbar{position:relative;flex:1;min-width:0;display:flex;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding-left:12px;transition:border-color .2s,box-shadow .2s,background .2s}
.searchbar:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,74,164,.1);background:#fff}
.searchbar svg{width:17px;height:17px;stroke:var(--mut);fill:none;stroke-width:2;flex:0 0 auto}
.searchbar input{flex:1;border:0;background:transparent;font-family:var(--body);font-size:.92rem;padding:11px 8px;color:var(--ink);min-width:0}
.searchbar input:focus{outline:none}
.searchbar button{border:0;background:var(--blue);color:#fff;font-weight:600;font-size:.82rem;
  padding:11px 17px;border-radius:0 9px 9px 0;cursor:pointer;transition:background .2s}
.searchbar button:hover{background:var(--blue-700)}

.links{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.links a{position:relative;font-weight:600;font-size:.94rem;color:var(--ink-soft);padding:9px 13px;border-radius:8px;transition:color .2s,background .2s}
.links a:not(.quote-btn)::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;
  background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e-out)}
.links a:not(.quote-btn):hover{color:var(--blue)}
.links a:not(.quote-btn):hover::after,.links a.active:not(.quote-btn)::after{transform:scaleX(1)}
.links a.active:not(.quote-btn){color:var(--blue)}
.links .quote-btn{background:var(--blue);color:#fff;margin-left:8px;white-space:nowrap;box-shadow:var(--shadow-blue);transition:transform .25s var(--e-out),box-shadow .25s}
.links .quote-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(0,74,164,.55)}
/* products dropdown */
.nav-dd{position:relative}
.nav-dd > a{display:inline-flex;align-items:center;gap:5px}
.dd-caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto;transition:transform .25s var(--e-out)}
.nav-dd:hover .dd-caret,.nav-dd:focus-within .dd-caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:236px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:7px;
  display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.nav-dd-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd-menu a{padding:9px 14px;font-size:.9rem;font-weight:500;color:var(--ink-soft);border-radius:6px;white-space:nowrap}
.nav-dd-menu a::after{display:none!important}
.nav-dd-menu a:hover{background:var(--tint);color:var(--blue)}
.menu-toggle{display:none;border:1px solid var(--line-2);background:#fff;color:var(--ink);
  font-weight:600;font-size:.86rem;padding:9px 14px;border-radius:9px;cursor:pointer;align-items:center;gap:8px}
.menu-toggle .mi{width:16px;height:12px;position:relative}
.menu-toggle .mi span{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--e-out)}
.menu-toggle .mi span:nth-child(1){top:0}
.menu-toggle .mi span:nth-child(2){top:5px}
.menu-toggle .mi span:nth-child(3){top:10px}
.nav.open ~ .menu-toggle .mi span,.menu-toggle.on .mi span:nth-child(1){top:5px;transform:rotate(45deg)}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.98rem;
  border-radius:11px;cursor:pointer;transition:transform .25s var(--e-out),box-shadow .25s,background .25s,color .25s;border:1px solid transparent}
.btn-primary{background:var(--blue);color:#fff;padding:15px 26px;box-shadow:var(--shadow-blue)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(0,74,164,.6);background:var(--blue-600)}
.btn-primary .ar{transition:transform .3s var(--e-out)}
.btn-primary:hover .ar{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);padding:15px 22px;border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-green{background:var(--green-deep);box-shadow:0 12px 30px -10px rgba(41,150,58,.5)}
.btn-green:hover{background:#153f19;box-shadow:0 18px 38px -12px rgba(41,150,58,.6)}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -10%,rgba(41,150,58,.10),transparent 55%),
    radial-gradient(110% 120% at 0% 0%,rgba(0,74,164,.10),transparent 50%),
    linear-gradient(180deg,#fbfdff,#f1f6fc)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 80%);
  mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 80%);opacity:.5}
.hero-mol{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  padding:clamp(54px,8vw,104px) 0 clamp(60px,8vw,96px)}
.hero h1{margin:6px 0 22px;max-width:15ch}
.hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;align-items:center}
.hero-badges .hb{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;color:var(--ink-soft);font-weight:600}
.hero-badges .hb svg{width:18px;height:18px;stroke:var(--green-deep);fill:none;stroke-width:2}

/* hero quote card (glass) */
.hero-card{position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-lg)}
.hero-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(0,74,164,.4),rgba(41,150,58,.3),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hc-top .t{font-family:var(--display);font-size:1.15rem;font-weight:500;color:var(--ink)}
.hc-badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;background:var(--green-soft);
  color:var(--green-deep);padding:5px 10px;border-radius:20px;font-weight:500}
.hc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.hc-row .k{font-size:.82rem;color:var(--mut);font-weight:500}
.hc-row .v{font-family:var(--mono);font-size:.78rem;color:var(--ink);text-align:right;font-weight:500}
.hc-row .v.ok{color:var(--green-deep)}
.hc-cta{width:100%;justify-content:center;margin-top:20px}

/* ===========================================================
   TRUST STATS
   =========================================================== */
.trust{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.trust::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 120% at 12% 0%,rgba(0,74,164,.5),transparent 60%),
  radial-gradient(50% 120% at 92% 100%,rgba(41,150,58,.32),transparent 60%)}
.trust-inner{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:46px;padding-bottom:46px}
.ts{position:relative;padding-left:22px}
.ts::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(var(--green),transparent)}
.ts .n{font-family:var(--display);font-size:clamp(2.1rem,1.4rem + 2vw,3.1rem);font-weight:400;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.ts .n .g{color:#56d36e}
.ts .l{margin-top:10px;font-size:.86rem;color:rgba(255,255,255,.66);max-width:20ch}

/* ===========================================================
   SECTION SHELL
   =========================================================== */
/* vertical-only longhands: the shorthand would zero out .wrap's side gutter on `class="block wrap"` */
.block{padding-top:clamp(64px,9vw,118px);padding-bottom:clamp(64px,9vw,118px)}
.band{background:var(--paper)}
.sec-head{max-width:62ch;margin-bottom:46px}
.idx{display:block;color:var(--blue);font-weight:500;margin-bottom:16px}
.sec-head h2{margin-bottom:16px}
.sec-head .sub{font-size:1.08rem;color:var(--mut);max-width:54ch}

/* ===========================================================
   CATEGORY CARDS
   =========================================================== */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:34px;
  min-height:160px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .4s var(--e-out),box-shadow .4s,border-color .3s}
.cat::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--green));transition:transform .4s var(--e-out)}
.cat:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.cat:hover::before{transform:scaleX(1)}
.cat .cn{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--blue);background:var(--tint);
  align-self:flex-start;padding:5px 9px;border-radius:6px;font-weight:500}
.cat h4{font-size:1.12rem}
.cat .arrow{position:absolute;right:20px;bottom:20px;color:var(--blue);font-size:1.1rem;
  transition:transform .35s var(--e-out),opacity .3s;opacity:.4}
.cat:hover .arrow{transform:translate(4px,-4px);opacity:1}
.cat.dark{background:linear-gradient(150deg,var(--blue-deep),var(--ink));border-color:transparent;color:#fff}
.cat.dark h4{color:#fff}
.cat.dark .cn{background:rgba(255,255,255,.12);color:#9fe6ac}
.cat.dark .arrow{color:#9fe6ac;opacity:.8}

/* ===========================================================
   QUALITY / CERTS
   =========================================================== */
.quality{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;
  background:linear-gradient(160deg,var(--navy-grad-a),var(--navy-grad-b));color:#fff;
  border-radius:var(--r-xl);padding:clamp(34px,5vw,64px);position:relative;overflow:hidden}
.quality::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(41,150,58,.4),transparent 65%);pointer-events:none}
.qx .eyebrow{color:#9fe6ac}
.qx .eyebrow::before{background:#9fe6ac}
.qx h2{color:#fff;margin-bottom:18px}
.qx p{color:rgba(255,255,255,.78);max-width:46ch}
.qx .hi{color:#fff;font-weight:600;border-bottom:2px solid rgba(159,230,172,.6)}
.tech-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.tech-row span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.85);padding:7px 12px;border-radius:20px}
.certs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cert{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:20px;
  transition:transform .35s var(--e-out),background .3s}
.cert:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.cert .c-no{font-family:var(--mono);font-size:1.18rem;font-weight:500;color:#fff;margin-bottom:6px}
.cert .c-d{font-size:.8rem;color:rgba(255,255,255,.62);line-height:1.4}

/* ===========================================================
   CAPABILITY CARDS
   =========================================================== */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cap{padding:32px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .4s var(--e-out),box-shadow .4s,border-color .3s}
.cap:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.cap .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(150deg,var(--tint),#fff);border:1px solid var(--line-2)}
.cap .ic svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cap h3{margin-bottom:11px}
.cap p{font-size:.96rem}

/* ===========================================================
   ADVANTAGES (WHY)
   =========================================================== */
.adv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px}
.ad{display:flex;gap:16px;padding:22px;border-radius:var(--r);transition:background .3s}
.ad:hover{background:var(--paper)}
.ad .dot{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--green-soft)}
.ad .dot svg{width:21px;height:21px;stroke:var(--green-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ad h3{font-size:1.06rem;margin-bottom:5px}
.ad p{font-size:.92rem;line-height:1.5}

/* ===========================================================
   CONTACT + FORM
   =========================================================== */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
.contact-info h2{margin-bottom:16px}
.contact-info > p{max-width:42ch;margin-bottom:26px}
.ci-block{padding:16px 0;border-top:1px solid var(--line)}
.ci-block .ci-l{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.ci-block p,.ci-block a{display:block;font-size:.98rem;color:var(--ink-soft)}
.ci-block a{transition:color .2s}
.ci-block a:hover{color:var(--blue)}

form#quoteForm{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,38px);box-shadow:var(--shadow)}
.form-msg{display:none;background:var(--green-soft);border:1px solid #bfe6c6;color:var(--green-deep);
  border-radius:var(--r);padding:14px 16px;font-size:.9rem;font-weight:600;margin-bottom:20px}
.form-msg.show{display:flex;gap:10px;align-items:flex-start;animation:rise .5s var(--e-out)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field label{font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.field label .req{color:var(--green-deep)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:13px 14px;width:100%;
  transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,74,164,.1);background:#fff}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#d3392f;box-shadow:0 0 0 4px rgba(211,57,47,.1)}
.field .err{font-size:.76rem;color:#c5392f;margin-top:6px;display:none}
.field .err.show{display:block}
.form-note{font-size:.78rem;color:var(--mut);margin-top:14px;text-align:center;line-height:1.5}

/* office cards */
.office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:64px}
.office{padding:30px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .4s var(--e-out),box-shadow .4s,border-color .3s}
.office:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.o-flag{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--blue);background:var(--tint);
  padding:5px 10px;border-radius:6px;font-weight:500;display:inline-block;margin-bottom:16px}
.office{scroll-margin-top:110px} /* footer "Global offices" links land below the sticky header */
.office h3{margin-bottom:10px}
.office > p{font-size:.94rem;margin-bottom:16px}
.office p.o-role{font-weight:600;font-size:.9rem;color:var(--ink);margin:12px 0 0}
.office a{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-soft);padding:7px 0;transition:color .2s}
.office a:hover{color:var(--blue)}
.office a svg{width:17px;height:17px;stroke:var(--green-deep);fill:none;stroke-width:1.8;flex:0 0 auto}

/* ===========================================================
   PRODUCTS (catalog)
   =========================================================== */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.fchip,.nchip{font-family:var(--body);font-weight:600;font-size:.86rem;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line-2);border-radius:30px;padding:9px 17px;cursor:pointer;
  transition:all .25s var(--e-out)}
.fchip:hover,.nchip:hover{border-color:var(--blue);color:var(--blue)}
.fchip.on,.nchip.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}

/* "Filter By" disclosure — toggles the (multi-select) category chip row on
   the search-results page. Collapsed by default; JS/site.js flips
   #filterChips' .collapsed class, server-side FilterExpanded renders it
   already open when a chip is already selected (e.g. after a reload). */
.filter-by-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;
  font-size:.86rem;color:var(--ink-soft);background:#fff;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 16px;cursor:pointer;transition:all .25s var(--e-out)}
.filter-by-btn:hover{border-color:var(--blue);color:var(--blue)}
.filter-by-btn.on{border-color:var(--blue);color:var(--blue)}
.fb-icon{width:16px;height:16px;flex:0 0 auto}
.filterbar.collapsed{display:none}
/* products.aspx's parent-scoped Filter By: button + inline count sit on one
   row while collapsed (the count moves below the chip row once expanded —
   see #filterCountInline/#filterCountBelow in products.aspx and the click
   handler in site.js) */
.filter-by-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.filter-by-row .filter-count{margin:0}

/* parent-drug (API) filter */
.api-filter{display:flex;flex-direction:column;gap:18px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px clamp(16px,3vw,26px);margin-bottom:22px}
.az-index{display:flex;flex-wrap:wrap;gap:6px}
.az{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--ink-soft);background:#fff;
  border:1px solid var(--line-2);border-radius:8px;min-width:34px;height:34px;padding:0 9px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .2s var(--e-out),background .2s,border-color .2s,color .2s}
.az:hover:not(.disabled):not(.on){border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.az.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.az.disabled{opacity:.3;cursor:not-allowed;background:var(--paper-2);color:var(--mut)}

/* product-list pager */
.paging{display:flex;align-items:center;justify-content:center;gap:6px;margin:36px 0 8px;flex-wrap:wrap}
.paging-btn{font-family:var(--mono);font-size:.86rem;font-weight:600;color:var(--ink-soft);background:#fff;
  border:1px solid var(--line-2);border-radius:8px;min-width:36px;height:36px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:transform .2s var(--e-out),background .2s,border-color .2s,color .2s}
.paging-btn:not(.disabled):not(.on):hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.paging-btn.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.paging-btn.disabled{opacity:.3;cursor:not-allowed;background:var(--paper-2);color:var(--mut)}
.paging-ellipsis{color:var(--mut);padding:0 2px}
.api-select{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.api-select label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:500}
.api-select select{flex:1;min-width:240px;max-width:380px;font-family:var(--body);font-size:.96rem;color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:11px 14px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s}
.api-select select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,74,164,.1)}
.filter-count{font-size:.78rem;color:var(--mut);margin:0 0 18px 2px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;transition:transform .4s var(--e-out),box-shadow .4s,border-color .3s}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.p-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.p-cat{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--blue-700);background:var(--tint);padding:5px 11px;border-radius:6px;font-weight:600}
.p-stock{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:5px 11px;border-radius:20px;font-weight:600}
.p-stock.in{background:var(--green-soft);color:var(--green-deep)}
.p-stock.made{background:#fff3e0;color:#a4631a}
.p-stock.back{background:#fff3e0;color:#a4631a}
.p-stock.disc{background:#e5e7eb;color:#4b5563}
.p-struct{position:relative;display:flex;align-items:center;justify-content:center;height:150px;margin:2px 0 16px;padding:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);cursor:zoom-in;
  transition:border-color .25s,box-shadow .25s}
/* UAT 2026-09-29: the box is always laid out (lazy-loaded images inside a
   display:none box would never load); the image fades in once loaded, and a
   missing structure SVG falls back to newproduct.jpg via the img onerror */
.p-struct img{opacity:0;transition:opacity .3s}
.p-struct.loaded img{opacity:1}
/* object-fit:contain in a fixed box = every structure renders at a uniform visual size */
.p-struct img{width:100%;height:100%;object-fit:contain}
.p-struct:hover,.p-struct:focus-visible{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,74,164,.08)}
.p-struct .zoom-ic{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;background:var(--tint);opacity:0;transition:opacity .25s}
.p-struct:hover .zoom-ic,.p-struct:focus-visible .zoom-ic{opacity:1}
.p-struct .zoom-ic svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2}

/* structure lightbox */
.struct-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.struct-modal.open{display:flex}
.struct-modal .sm-scrim{position:absolute;inset:0;background:rgba(7,26,51,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.struct-modal .sm-panel{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:min(680px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;animation:rise .35s var(--e-out)}
.struct-modal .sm-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,44px)}
/* width/height (not max-*) so small intrinsic SVG sizes scale UP to fill the panel */
.struct-modal .sm-img img{width:100%;height:min(52vh,440px);object-fit:contain}
.struct-modal .sm-cap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--line);background:var(--paper)}
.struct-modal .sm-name{font-family:var(--mono);font-size:1.02rem;font-weight:400;color:var(--ink)}
.struct-modal a.sm-name[href]:hover{color:var(--blue);text-decoration:underline}
.struct-modal .sm-meta{font-family:var(--mono);font-size:.72rem;color:var(--mut)}
.struct-modal .sm-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--paper);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,transform .2s}
.struct-modal .sm-close:hover{background:var(--tint);transform:rotate(90deg)}

/* RFQ basket page */
.rfq-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.rfq-row{display:grid;grid-template-columns:1fr auto auto;gap:16px 26px;align-items:center;padding:20px 26px}
.rfq-row + .rfq-row{border-top:1px solid var(--line)}
.rq-info .rq-name{display:block;font-family:var(--mono);font-size:1rem;font-weight:400;color:var(--ink);line-height:1.3}
.rq-info a.rq-name:hover{color:var(--blue);text-decoration:underline}
.rq-info .rq-meta{display:block;font-family:var(--mono);font-size:.68rem;color:var(--mut);margin-top:5px;letter-spacing:.04em}
.rq-qty{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pack-line{display:flex;gap:14px;align-items:flex-end}
.rq-qty .qf{display:flex;flex-direction:column;gap:6px}
.rq-qty label{font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.rq-qty input{width:104px;font-family:var(--mono);font-size:.9rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;transition:border-color .2s,box-shadow .2s,background .2s}
.rq-qty input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,74,164,.1);background:#fff}
.rq-qty input.invalid{border-color:#d3392f;box-shadow:0 0 0 4px rgba(211,57,47,.1)}
.mg-chips.invalid{border-radius:9px;box-shadow:0 0 0 2px rgba(211,57,47,.4)}
.rfq-items-err{color:#c5392f;font-size:.86rem;font-weight:500;margin:16px 0 18px}
.pack-remove{width:30px;height:30px;margin-bottom:5px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--mut);
  font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s,background .2s}
.pack-remove:hover{color:#c5392f;border-color:#eeb4af;background:#fdeceb}
.pack-add{background:none;border:0;color:var(--blue);font-weight:600;font-size:.82rem;cursor:pointer;
  padding:4px 0;display:inline-flex;align-items:center;gap:6px}
.pack-add:hover{text-decoration:underline}
.pack-add svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}

/* product detail page */
.prod h3 a{color:inherit;transition:color .2s}
.prod h3 a:hover{color:var(--blue)}
.pdp-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,60px);align-items:start}
.pdp-media{position:sticky;top:110px}
.pdp-struct{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,4vw,52px);aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
.pdp-struct img{width:100%;height:100%;object-fit:contain}
.pdp-media .cap{display:block;text-align:center;font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;color:var(--ink-soft);margin-top:12px}
.pdp-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pdp h1{font-family:var(--mono);letter-spacing:0;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);line-height:1.18;margin-bottom:20px}
.pdp-rows{margin:0 0 26px}
.pdp-row{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.pdp-row .k{font-size:.9rem;color:var(--mut);flex:0 0 auto}
.pdp-row .v{font-family:var(--mono);font-size:.86rem;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.pdp-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.pdp-ctas .add-lg{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.98rem;color:#fff;
  background:var(--blue);border:1px solid var(--blue);border-radius:11px;padding:15px 24px;cursor:pointer;
  box-shadow:var(--shadow-blue);transition:all .25s var(--e-out)}
.pdp-ctas .add-lg:hover{background:var(--blue-600);transform:translateY(-2px)}
.pdp-ctas .add-lg.added{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 12px 30px -10px rgba(41,150,58,.5)}
.pdp-docs-label{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.pdp-docs{display:flex;gap:12px;flex-wrap:wrap}
.doc-btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:12px 17px;transition:all .25s var(--e-out)}
.doc-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.doc-btn svg{width:18px;height:18px;stroke:var(--green-deep);fill:none;stroke-width:1.9;flex:0 0 auto}
.pdp-note{font-size:.78rem;color:var(--mut);margin-top:14px;max-width:56ch}
.pdp-notfound{text-align:center;padding:clamp(50px,8vw,100px) 24px}
/* controlled / cannabis product card / detail page — only tlc_no, the
   generic "contact sales" placeholder image (controlled2.jpg) and a
   Details/quote link are shown; reuses .prod/.p-top/.p-struct/.p-cta
   and .pdp-grid/.pdp-chips as-is, no extra overrides needed */
@media(max-width:1024px){
  .pdp-grid{grid-template-columns:1fr;gap:26px}
  .pdp-media{position:static;max-width:520px}
}

/* catalog empty state (filters/search with no matches) */
.catalog-empty{text-align:center;padding:clamp(40px,6vw,72px) 24px;background:#fff;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);margin-top:6px}
.catalog-empty h3{font-size:1.35rem;margin-bottom:10px}
.catalog-empty p{max-width:56ch;margin:0 auto 22px;color:var(--mut)}
.catalog-empty .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.catalog-empty .ext{display:block;margin-top:16px;font-size:.84rem;color:var(--mut)}
.catalog-empty .ext a{color:var(--blue);font-weight:600}
.catalog-empty .ext a:hover{text-decoration:underline}

/* "email app didn't open" copy-request fallback inside form success message */
.form-msg.show{flex-wrap:wrap}
.copy-req{flex:1 0 100%;margin-top:12px;padding-top:12px;border-top:1px dashed #bfe6c6}
.copy-req p{font-size:.84rem;color:var(--green-deep);font-weight:500;margin-bottom:10px}
.copy-req .copy-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.86rem;color:var(--green-deep);
  background:#fff;border:1px solid #bfe6c6;border-radius:9px;padding:10px 15px;cursor:pointer;transition:all .2s}
.copy-req .copy-btn:hover{border-color:var(--green-deep)}
.copy-req textarea{display:block;width:100%;min-height:104px;margin-top:10px;font-family:var(--mono);font-size:.72rem;
  line-height:1.5;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical}

/* attachment honesty note */
.dz-note{font-size:.76rem;color:var(--mut);margin-top:8px;line-height:1.5}

/* quote request modal (from RFQ basket) */
.quote-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:18px}
.quote-modal.open{display:flex}
.quote-modal .qm-scrim{position:absolute;inset:0;background:rgba(7,26,51,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.quote-modal .qm-panel{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:min(620px,94vw);max-height:92vh;overflow:auto;padding:clamp(24px,4.5vw,40px);animation:rise .35s var(--e-out)}
.quote-modal h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);margin-bottom:8px;padding-right:40px}
.quote-modal .qm-sub{font-size:.94rem;color:var(--mut);margin-bottom:22px}
.quote-modal .qm-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--paper);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,transform .2s}
.quote-modal .qm-close:hover{background:var(--tint);transform:rotate(90deg)}
.qm-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--ink-soft)}
.qm-file input[type=file]{font-size:.84rem;color:var(--mut);max-width:100%}
.qm-file input[type=file]::file-selector-button{font-family:var(--body);font-weight:600;font-size:.84rem;color:var(--blue);
  background:var(--tint);border:1px solid var(--line-2);border-radius:8px;padding:8px 14px;margin-right:10px;cursor:pointer}
@media(max-width:560px){.quote-modal .qm-panel .frow{grid-template-columns:1fr;gap:0}}
.rq-remove{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--mut);
  font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s,background .2s}
.rq-remove:hover{color:#c5392f;border-color:#eeb4af;background:#fdeceb}
.rfq-empty{text-align:center;padding:clamp(44px,7vw,84px) 24px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.rfq-empty .ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin:0 auto 18px;background:var(--tint)}
.rfq-empty .ic svg{width:27px;height:27px;stroke:var(--blue);fill:none;stroke-width:1.7}
.rfq-empty h2{font-size:1.5rem;margin-bottom:10px}
.rfq-empty p{max-width:44ch;margin:0 auto 24px}
.rfq-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px}
.rfq-basket.bump{animation:bump .45s var(--e-out)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@media(max-width:720px){
  .rfq-row{grid-template-columns:1fr auto}
  .rq-qty{grid-column:1/-1}
  .rq-qty input{width:96px}
  .rfq-actions{flex-direction:column-reverse;align-items:stretch}
  .rfq-actions a{justify-content:center;text-align:center}
}

/* quote page: prefill notice + trust blocks */
.prefill-note{display:flex;align-items:flex-start;gap:10px;background:var(--tint);border:1px solid var(--line-2);
  border-radius:var(--r);padding:12px 14px;font-size:.86rem;color:var(--ink-soft);margin-bottom:18px}
.prefill-note svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:2;flex:0 0 auto;margin-top:1px}
.trust-mini{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px}
.trust-mini span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;border:1px solid var(--line-2);
  color:var(--ink-soft);padding:6px 11px;border-radius:20px;background:#fff}
.steps-mini{list-style:none;margin:20px 0 0;padding:0;counter-reset:step}
.steps-mini li{position:relative;display:flex;gap:13px;padding:9px 0;font-size:.92rem;color:var(--ink-soft);counter-increment:step}
.steps-mini li::before{content:counter(step,decimal-leading-zero);flex:0 0 auto;font-family:var(--mono);font-size:.68rem;
  color:var(--green-deep);background:var(--green-soft);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:500}
.steps-mini li strong{color:var(--ink);font-weight:600}
.prod h3{font-family:var(--mono);font-size:1.05rem;letter-spacing:0;margin-bottom:16px;min-height:2.3em}
.p-rows{margin-bottom:20px}
.p-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.p-row .k{font-size:.82rem;color:var(--mut)}
.p-row .v{font-family:var(--mono);font-size:.78rem;color:var(--ink);text-align:right}
.p-cta{display:flex;gap:10px;margin-top:auto}
.p-cta .add{flex:1;background:#fff;text-align:center;font-weight:600;font-size:.86rem;color:var(--blue);border:1px solid var(--line-2);
  border-radius:9px;padding:11px 14px;cursor:pointer;transition:all .25s var(--e-out)}
.p-cta .add:hover{border-color:var(--blue);background:var(--tint)}
.p-cta .add.added{background:var(--green);border-color:var(--green);color:#fff}
.p-cta .quote{flex:1;text-align:center;font-weight:600;font-size:.86rem;color:#fff;background:var(--blue);
  border-radius:9px;padding:11px 14px;transition:background .25s,transform .25s var(--e-out)}
.p-cta .quote:hover{background:var(--blue-700);transform:translateY(-1px)}
.prod.hide{display:none}

/* ===========================================================
   NEWS
   =========================================================== */
.news-feature{display:grid;grid-template-columns:1.3fr .7fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;margin-bottom:56px;background:#fff}
.nf-body{padding:clamp(28px,4vw,52px)}
.nf-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--green-deep);
  background:var(--green-soft);padding:5px 11px;border-radius:20px;font-weight:500}
.nf-date{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--mut);margin:18px 0 12px}
.nf-body h2{margin-bottom:16px}
.nf-body p{max-width:50ch;margin-bottom:26px}
.nf-art{background:linear-gradient(150deg,var(--blue-deep),var(--ink));display:grid;place-items:center;position:relative;overflow:hidden;min-height:240px}
.nf-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(41,150,58,.35),transparent 60%)}
.nf-art .badge{position:relative;text-align:center;color:#fff;z-index:2}
.nf-art .badge .big{font-family:var(--display);font-size:clamp(3rem,5vw,4.6rem);font-weight:500;line-height:1}
.nf-art .badge .sm{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#9fe6ac;margin-top:8px}
.news-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ni{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;transition:transform .4s var(--e-out),box-shadow .4s,border-color .3s;scroll-margin-top:120px}
.ni:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.ni-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ni-date{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--mut)}
.ni-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--blue-700);background:var(--tint);padding:5px 11px;border-radius:20px;font-weight:600}
.ni h3{font-size:1.1rem;margin-bottom:11px;line-height:1.22}
.ni p{font-size:.92rem;flex:1;margin-bottom:16px}
.ni-link{font-weight:600;font-size:.88rem;color:var(--blue);display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--e-out)}
.ni-link:hover{gap:11px}
.ni.hide{display:none}
.ni-more{margin-top:auto}
.ni-more summary{list-style:none;cursor:pointer;font-weight:600;font-size:.88rem;color:var(--blue);
  display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--e-out)}
.ni-more summary:hover{gap:11px}
.ni-more summary::-webkit-details-marker{display:none}
.ni-more[open] summary{margin-bottom:14px}
.ni-more[open] summary .ar{transform:rotate(90deg)}
.ni-more summary .ar{display:inline-block;transition:transform .25s var(--e-out)}
.ni-full{padding-top:14px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.ni-full p{margin-bottom:12px}
.ni-full p:last-child{margin-bottom:0}
.ni-full ul{margin:0 0 12px 18px}
.ni-full li{margin-bottom:6px}
.ni-full a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
/* news reader — "Read more" opens the full article in an in-page window (UAT 2026-09-29) */
.news-reader{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.news-reader.open{display:flex}
.news-reader .nr-scrim{position:absolute;inset:0;background:rgba(7,26,51,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.news-reader .nr-panel{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:min(820px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;animation:rise .35s var(--e-out)}
.news-reader .nr-head{padding:clamp(22px,3.5vw,32px) 68px 18px clamp(22px,4vw,40px);border-bottom:1px solid var(--line);flex:none}
.news-reader .nr-top{margin-bottom:12px}
.news-reader .nr-title{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.22;margin:0}
.news-reader .nr-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:22px clamp(22px,4vw,40px) clamp(24px,4vw,36px);color:var(--ink-soft);font-size:1rem;line-height:1.7}
.news-reader .nr-body p{margin-bottom:14px}
.news-reader .nr-body p:last-child{margin-bottom:0}
.news-reader .nr-body ul{margin:0 0 14px 20px}
.news-reader .nr-body li{margin-bottom:6px;color:inherit}
.news-reader .nr-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.news-reader .nr-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;z-index:1;
  background:var(--paper);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,transform .2s}
.news-reader .nr-close:hover{background:var(--tint);transform:rotate(90deg)}
@media(max-width:560px){
  .news-reader{padding:0}
  .news-reader .nr-panel{width:100%;height:100%;max-height:100%;border-radius:0}
}

/* ===========================================================
   SUPPORT
   =========================================================== */
.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:72px}
.sup{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;transition:transform .4s var(--e-out),box-shadow .4s,border-color .3s}
.sup:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.sup .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(150deg,var(--tint),#fff);border:1px solid var(--line-2)}
.sup .ic svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sup h3{margin-bottom:10px}
.sup p{font-size:.94rem;flex:1;margin-bottom:16px}
.sup-link{font-weight:600;font-size:.9rem;color:var(--blue);display:inline-flex;gap:6px;transition:gap .25s var(--e-out)}
.sup-link:hover{gap:11px}

/* FAQ */
.faq{max-width:880px;margin-bottom:64px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;
  overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 24px;font-family:var(--display);font-size:1.08rem;font-weight:400;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq .q-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--blue);
  display:grid;place-items:center;font-size:1.1rem;font-weight:600;transition:transform .3s var(--e-out),background .3s}
.faq details[open] .q-ic{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq .ans{padding:0 24px 22px;color:var(--mut);font-size:.98rem;line-height:1.6;max-width:70ch}

/* support cta */
.sup-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:linear-gradient(150deg,var(--navy-grad-a),var(--navy-grad-b));color:#fff;border-radius:var(--r-xl);
  padding:clamp(30px,4vw,48px)}
.sup-cta h3{color:#fff;font-size:1.6rem;margin-bottom:8px}
.sup-cta p{color:rgba(255,255,255,.74);max-width:48ch}
.sc-btn{flex:0 0 auto;background:#fff;color:var(--blue);font-weight:600;padding:15px 26px;border-radius:11px;
  transition:transform .25s var(--e-out),box-shadow .25s}
.sc-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,0,0,.4)}

/* ===========================================================
   INTERIOR PAGE HERO
   =========================================================== */
.page-hero{position:relative;overflow:hidden;padding:clamp(50px,7vw,88px) 0 clamp(36px,5vw,56px);
  background:
    radial-gradient(110% 120% at 100% -20%,rgba(41,150,58,.10),transparent 55%),
    radial-gradient(90% 120% at 0% 0%,rgba(0,74,164,.10),transparent 50%),
    linear-gradient(180deg,#fbfdff,#f1f6fc)}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 90% at 30% 10%,#000,transparent 75%);
  mask-image:radial-gradient(70% 90% at 30% 10%,#000,transparent 75%);opacity:.45}
.page-hero .wrap{position:relative;z-index:2}
.crumbs{font-size:.84rem;color:var(--mut);margin-bottom:22px;font-weight:500}
.crumbs a{color:var(--blue)}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(2.3rem,1.5rem + 3vw,4rem);max-width:18ch;margin-bottom:18px}
.page-hero > .wrap > p{font-size:var(--fs-lede);color:var(--ink-soft);max-width:60ch;line-height:1.5}

/* ===========================================================
   BACK TO TOP — sits just above the footer, every page (2026-08-25
   UAT feedback, item 3). Plain in-flow button, not fixed/floating —
   matches V1's placement.
   =========================================================== */
.back-to-top-wrap{display:flex;justify-content:center;padding:40px 0 34px}
.back-to-top-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;
  font-size:.86rem;color:var(--ink-soft);background:#fff;border:1px solid var(--line-2);border-radius:30px;
  padding:10px 20px;cursor:pointer;transition:all .25s var(--e-out)}
.back-to-top-btn:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.btt-icon{width:16px;height:16px;flex:0 0 auto;transition:transform .25s var(--e-out)}
.back-to-top-btn:hover .btt-icon{transform:translateY(-2px)}

/* ===========================================================
   FOOTER
   =========================================================== */
footer.site{background:var(--ink);color:rgba(255,255,255,.72);position:relative;overflow:hidden}
footer.site::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 85% 0%,rgba(0,74,164,.4),transparent 60%)}
.foot-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding:54px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-cta-text h3{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);margin-bottom:8px}
.foot-cta-text p{color:rgba(255,255,255,.66)}
.foot-cta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-cta-btn{background:#fff;color:var(--blue);font-weight:600;padding:15px 26px;border-radius:11px;
  transition:transform .25s var(--e-out),box-shadow .25s}
.foot-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(0,0,0,.5)}
.foot-cta-link{color:#9fe6ac;font-weight:600;font-size:.95rem}
.foot-cta-link:hover{text-decoration:underline}
.foot-grid{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding:54px 0}
.foot-brand .logo-foot{height:34px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1)}
.foot-brand p{font-size:.92rem;color:rgba(255,255,255,.6);max-width:36ch;line-height:1.6}
.foot-col h5{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#9fe6ac;margin-bottom:16px;font-weight:500}
.foot-col p{font-size:.9rem;color:rgba(255,255,255,.62);margin-bottom:10px;line-height:1.5}
.foot-col a{display:block;font-size:.9rem;color:rgba(255,255,255,.72);padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:24px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:rgba(255,255,255,.5)}
.foot-bottom .mono{color:#9fe6ac}

/* ===========================================================
   FLOATING RFQ BASKET
   =========================================================== */
.rfq-basket{position:fixed;right:22px;bottom:22px;z-index:80;display:inline-flex;align-items:center;gap:10px;
  background:var(--blue);color:#fff;font-weight:600;font-size:.9rem;border:0;border-radius:30px;padding:14px 20px;
  cursor:pointer;box-shadow:var(--shadow-blue);transform:translateY(120px);opacity:0;
  transition:transform .5s var(--e-out),opacity .4s,background .25s}
.rfq-basket.show{transform:translateY(0);opacity:1}
.rfq-basket:hover{background:var(--blue-700)}
.rfq-basket svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8}
.rfq-count{min-width:22px;height:22px;border-radius:11px;background:var(--green);display:grid;place-items:center;
  font-size:.74rem;font-weight:700;padding:0 6px}

/* ===========================================================
   REVEAL ANIMATIONS
   =========================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
/* staggered children */
.stagger > *{opacity:0;transform:translateY(22px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.04s}
.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.22s}
.stagger.in > *:nth-child(5){transition-delay:.28s}
.stagger.in > *:nth-child(6){transition-delay:.34s}
.stagger.in > *:nth-child(7){transition-delay:.40s}
.stagger.in > *:nth-child(8){transition-delay:.46s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* hero molecule float */
.mol-node{transform-box:fill-box;transform-origin:center;animation:float 7s ease-in-out infinite}
.mol-node.n2{animation-duration:9s;animation-delay:-2s}
.mol-node.n3{animation-duration:8s;animation-delay:-4s}
.mol-node.n4{animation-duration:10s;animation-delay:-1s}
.mol-node.n5{animation-duration:11s;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mol-line{stroke-dasharray:6 6;animation:dash 20s linear infinite}
@keyframes dash{to{stroke-dashoffset:-200}}

/* ===========================================================
   PHOTOGRAPHY
   =========================================================== */
/* hero: portrait photo with the quote card overlapping its lower-left */
.hero-media{position:relative;align-self:center}
.hero-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;background:var(--paper-2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--e-out)}
.hero-media:hover .hero-photo img{transform:scale(1.045)}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.hero-media .hero-card{position:absolute;left:-26px;bottom:-26px;width:min(310px,82%);
  background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

/* full-width image band (facility) */
.image-band{position:relative;overflow:hidden;color:#fff;background:var(--ink)}
.image-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(1.07)}
.image-band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(3,22,46,.82),rgba(3,22,46,.44) 55%,rgba(3,22,46,.12))}
.ib-inner{position:relative;z-index:2;padding-top:clamp(64px,10vw,128px);padding-bottom:clamp(64px,10vw,128px)}
.ib-inner .eyebrow{color:#9fe6ac}
.ib-inner .eyebrow::before{background:#9fe6ac}
.ib-inner h2{color:#fff;max-width:20ch;margin-bottom:16px}
.ib-inner p{color:rgba(255,255,255,.82);max-width:50ch;margin-bottom:26px;font-size:1.06rem}
.ib-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:6px}
.ib-stats .s .n{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:#fff}
.ib-stats .s .l{font-size:.8rem;color:rgba(255,255,255,.7)}

/* facility-led hero (building photo) */
.hero-facility{position:relative;overflow:hidden;color:#fff;background:var(--ink);
  min-height:clamp(460px,64vh,660px);display:flex;align-items:center}
/* object-position biased upward so the roofline and signage stay in frame */
.hero-facility .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:0;filter:brightness(1.12)}
.hero-facility::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(3,18,40,.62) 0%,rgba(3,18,40,.36) 42%,rgba(3,18,40,.1) 70%,rgba(3,18,40,0) 100%)}
/* width:100% (not max-width): the hero is a flex container, so this wrap would
   otherwise shrink-wrap and auto-center — text must start at the wrap's left
   grid line, aligned with the Inside-the-lab band below */
.hero-fac-inner{position:relative;z-index:2;width:100%;padding-top:clamp(48px,6.5vw,80px);padding-bottom:clamp(48px,6.5vw,80px);
  /* soft dark halo keeps the light-weight type readable over the brighter photo */
  text-shadow:0 1px 3px rgba(3,18,40,.45),0 2px 22px rgba(3,18,40,.55)}
.hero-facility h1{color:#fff;font-size:clamp(1.9rem,1.35rem + 1.9vw,2.95rem);font-weight:300;margin:6px 0 18px;max-width:18ch}
.hero-facility .accent{color:#86e89b}
.hero-facility .lede{color:rgba(255,255,255,.84);font-size:clamp(1rem,.96rem + .28vw,1.12rem);max-width:50ch}
.hero-facility .hero-cta{margin-top:28px}
.hero-facility .hero-badges{margin-top:24px}
.hero-facility .eyebrow{color:#9fe6ac}
.hero-facility .eyebrow::before{background:#9fe6ac}
.hero-facility .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-facility .btn-ghost{border-color:rgba(255,255,255,.42);color:#fff}
.hero-facility .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.hero-facility .hero-badges{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px}
.hero-facility .hero-badges .hb{color:rgba(255,255,255,.9);font-size:.86rem;font-weight:600;display:inline-flex;align-items:center;gap:9px}
.hero-facility .hero-badges .hb svg{width:18px;height:18px;stroke:#86e89b;fill:none;stroke-width:2}

/* quality COA photo */
.quality{align-items:stretch}
.q-photo{position:relative;min-height:100%}
.q-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.q-tag,.f-tag{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;z-index:2;
  background:rgba(3,22,46,.82);color:#fff;padding:7px 12px;border-radius:20px;backdrop-filter:blur(4px)}
.qx .certs{margin-top:26px}

/* two-column image feature (contact building / support COA) */
.feature{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;margin-bottom:64px}
.feature.rev{grid-template-columns:1.08fr .92fr}
.feature.rev .f-img{order:2}
.f-img{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.feature.wide .f-img{aspect-ratio:4/3}
.f-img.f-full{aspect-ratio:1200/1134} /* matches the source photo — shows the uncropped frame at every width */
.f-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.f-img:hover img{transform:scale(1.04)}
.feature h2{margin-bottom:14px}
.feature > div > p{margin-bottom:18px;max-width:46ch}
.f-list{list-style:none;margin:6px 0 22px;padding:0}
.f-list li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:.98rem;color:var(--ink-soft)}
.f-list svg{width:19px;height:19px;stroke:var(--green-deep);fill:none;stroke-width:2;flex:0 0 auto;margin-top:3px}

/* company introduction (home lead) */
.intro-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,64px);align-items:start}
.intro-grid h2{margin-bottom:0}
.intro-grid .lede{margin-bottom:18px;max-width:none}
.intro-grid p{margin-bottom:16px}
.intro-grid .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* page-hero with media (products) */
.ph-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,56px);align-items:center}
.ph-grid .crumbs{margin-bottom:18px}
.ph-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.ph-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.ph-media:hover img{transform:scale(1.045)}
.ph-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media(max-width:1024px){
  .hero-media .hero-card{position:static;width:auto;left:auto;bottom:auto;margin-top:16px;max-width:460px}
  .hero-photo{aspect-ratio:16/10}
  .intro-grid{grid-template-columns:1fr;gap:18px}
  .ph-grid{grid-template-columns:1fr;gap:26px}
  .ph-media{aspect-ratio:16/10;max-width:560px}
  .q-photo img{aspect-ratio:16/10}
  .feature,.feature.rev{grid-template-columns:1fr;gap:26px}
  .feature.rev .f-img{order:0}
  .f-img,.feature.wide .f-img{aspect-ratio:16/9}
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-card{max-width:460px}
  .quality{grid-template-columns:1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:38px}
  .caps,.cats,.prod-grid,.news-grid,.sup-grid,.office-grid,.adv{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .news-feature{grid-template-columns:1fr}
  .nf-art{min-height:200px;order:-1}
}
@media(max-width:900px){
  /* longhand offsets before the inset shorthand: `inset` needs iOS 14.5+/Chrome 87+,
     and without a position the fixed panel lands somewhere unreachable on older phones */
  .links{position:fixed;top:0;right:0;bottom:0;left:auto;inset:0 0 0 auto;width:min(82vw,340px);
    flex-direction:column;align-items:stretch;
    gap:4px;background:#fff;padding:96px 22px 30px;box-shadow:-20px 0 60px -20px rgba(7,26,51,.4);
    transform:translateX(100%);transition:transform .45s var(--e-soft);z-index:55}
  .links.open{transform:none !important}
  .links a{padding:14px 16px;font-size:1.05rem;border-radius:10px}
  .links a:not(.quote-btn)::after{display:none}
  .nav-dd{display:flex;flex-direction:column;align-items:stretch}
  .nav-dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0 0 4px 10px;min-width:0;gap:0}
  .nav-dd-menu::before{display:none}
  .nav-dd-menu a{font-size:.98rem;padding:11px 14px}
  .dd-caret{display:none}
  .links a:not(.quote-btn):hover{background:var(--paper)}
  .links .quote-btn{margin-left:0;margin-top:8px;text-align:center;justify-content:center;display:flex;padding:15px}
  .menu-toggle{display:inline-flex}
  .nav-scrim{position:fixed;inset:0;background:rgba(7,26,51,.45);opacity:0;pointer-events:none;
    transition:opacity .4s;z-index:54;backdrop-filter:blur(2px)}
  .nav-scrim.show{opacity:1;pointer-events:auto}
}
@media(max-width:720px){
  .trust-inner{grid-template-columns:1fr 1fr;gap:30px 20px}
  .tb-contacts{gap:16px}
  .topbar .tb-hide{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .caps,.cats,.prod-grid,.news-grid,.sup-grid,.office-grid,.adv,.certs{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr;gap:0}
  .foot-grid{grid-template-columns:1fr}
  .foot-cta,.sup-cta{flex-direction:column;align-items:flex-start}
  .prod h3{min-height:auto}
  .hero .hero-cta{flex-direction:column;align-items:stretch}
  .hero .hero-cta a{justify-content:center}
  .hero-facility .hero-cta{flex-direction:column;align-items:stretch}
  .hero-facility .hero-cta a{justify-content:center}
  .hero-facility::after{background:linear-gradient(180deg,rgba(3,18,40,.38),rgba(3,18,40,.68))}
  .topbar .tb-iso{display:none}
}

/* below 1280px the search moves to its own full-width row under the logo/nav (single row would squeeze it under ~420px) */
@media(max-width:1279px){
  .bar{height:auto;min-height:64px;flex-wrap:wrap;padding-top:10px;padding-bottom:12px;row-gap:10px}
  header.site.scrolled .bar{height:auto}
  .searchbar{order:10;flex:1 1 100%;max-width:none}
}
/* the empty off-canvas scrim is a 0-width flex item; on the wrapped desktop row it was pushing the nav off the right edge */
@media(min-width:901px){.nav-scrim{display:none}}

/* top contact bar — progressive compacting */
@media(max-width:980px){ .topbar .tb-label{display:none} }
@media(max-width:820px){ .topbar .tb-iso{display:none} }
@media(max-width:600px){ .topbar a.tb-sales{display:none} } /* needs to outrank `.topbar a{display:inline-flex}` */
@media(max-width:430px){ .topbar a.tb-email{display:none} }

/* ===========================================================
   REDUCED MOTION
   =========================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal,.stagger > *{opacity:1 !important;transform:none !important}
  .rfq-basket{transform:none;opacity:1}
}

/* ===========================================================
   PREMIUM POLISH (2026-07-02c)
   =========================================================== */
/* cross-page fade (progressive enhancement, Chromium) */
@media (prefers-reduced-motion: no-preference){
  @view-transition { navigation: auto; }
}

/* brand signature: faint molecular structure in the footer */
footer.site::after{content:"";position:absolute;right:-50px;bottom:-70px;width:560px;height:560px;z-index:0;
  background:url("../image/footer-motif.svg") no-repeat center/contain;
  filter:invert(1);opacity:.055;pointer-events:none}

/* header search autocomplete */
.search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line-2);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:70;display:none;max-height:340px;overflow:auto}
.search-suggest.open{display:block}
.search-suggest .ss-item{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:10px 12px;border-radius:8px;cursor:pointer;font-family:var(--mono);font-size:.86rem;color:var(--ink)}
.search-suggest .ss-item .ss-meta{font-family:var(--mono);font-size:.66rem;color:var(--mut);white-space:nowrap;flex:0 0 auto}
.search-suggest .ss-item:hover,.search-suggest .ss-item.sel{background:var(--tint);color:var(--blue)}
/* pinned to the bottom of the scrollable panel — with 6-8 suggestions the
   list can exceed max-height and scroll, and this row is the only way to
   search the full keyword rather than just the shown matches, so it stays
   in view instead of scrolling off with the rest of the list. */
.search-suggest .ss-all{border-top:1px solid var(--line);margin-top:4px;font-weight:600;color:var(--blue);font-size:.86rem;
  position:sticky;bottom:0;background:#fff}

/* mg-per-vial preset chips (RFQ basket) */
.mg-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mg-chip{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--ink-soft);background:#fff;
  border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;cursor:pointer;transition:all .2s}
.mg-chip:hover{border-color:var(--blue);color:var(--blue)}
.mg-chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.mg-custom{width:84px;font-family:var(--mono);font-size:.86rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.mg-custom:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,74,164,.1);background:#fff}

/* touch devices: first tap on a dropdown parent opens the menu (.open set by JS) */
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd.open .dd-caret{transform:rotate(180deg)}

/* ===========================================================
   LEGAL PAGES — terms.aspx / privacy.aspx (UAT 2026-09-27)
   Opened from the "Terms and Conditions" / "Privacy" links in the
   footer's bottom row. Two columns: sticky "On this page" list on
   the left (current section highlighted), wording on the right.
   Below 900px the list becomes a collapsible box above the text.
   =========================================================== */
.legal-hero h1{max-width:22ch}
.legal-meta{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:.8rem;color:var(--blue);
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:6px 14px}
.legal{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;
  padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(24px,4vw,48px)}
.legal-toc{position:sticky;top:110px;max-height:calc(100vh - 130px);overflow:auto;padding-right:6px}
.legal-toc summary{list-style:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);font-weight:500;margin-bottom:14px;cursor:default}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.legal-toc li a{display:flex;gap:10px;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;
  font-size:.87rem;line-height:1.35;color:var(--ink-soft);transition:color .2s,border-color .2s}
.legal-toc li a .n{font-family:var(--mono);font-size:.74rem;color:var(--mut);min-width:1.5em;padding-top:1px}
.legal-toc li a:hover{color:var(--blue)}
.legal-toc li a.on{color:var(--blue);border-left-color:var(--blue);font-weight:600}
.legal-toc li a.on .n{color:var(--blue)}
.legal-alt{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.86rem;color:var(--mut)}
.legal-alt a{color:var(--blue);font-weight:600}
.legal-alt a:hover{text-decoration:underline}
.legal-body{max-width:80ch;min-width:0}
.legal-sec{scroll-margin-top:110px;padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.legal-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal-sec h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.2;margin-bottom:18px}
.legal-sec h2 .ls-num{flex:0 0 auto;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--blue);
  background:var(--tint);border-radius:6px;padding:4px 8px;transform:translateY(-3px)}
.legal-sec p{font-size:.98rem;line-height:1.72;color:var(--ink-soft);margin-bottom:14px}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec strong{color:var(--ink);font-weight:700}
.legal-sec a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legal-contact{font-style:normal;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:20px 24px;line-height:1.75;color:var(--ink-soft);margin-top:4px}
@media(max-width:900px){
  .legal{grid-template-columns:1fr;gap:24px}
  .legal-toc{position:static;max-height:none;overflow:visible;padding:14px 18px;background:var(--paper);
    border:1px solid var(--line);border-radius:12px}
  .legal-toc summary{cursor:pointer;margin:0;display:flex;justify-content:space-between;align-items:center}
  .legal-toc summary::after{content:"+";font-size:1.1rem;line-height:1}
  .legal-toc details[open] summary{margin-bottom:12px}
  .legal-toc details[open] summary::after{content:"\2013"}
}

/* footer bottom row: legal links (UAT 2026-09-27) */
/* copyright takes the whole first line; the legal links start the second line on the left,
   ISO stays on the right — keeps the links clear of the floating RFQ button */
.foot-bottom > span:first-child{flex:0 0 100%}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-legal a{color:rgba(255,255,255,.72);transition:color .2s}
.foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}