/* ==========================================================================
   BVTC — Brother's Venture Trading Corporation
   Design System  ·  v1.0  ·  Corporate B2B Hygiene Solutions
   --------------------------------------------------------------------------
   1. Tokens          6. Buttons        11. Industries
   2. Reset / Base    7. Navigation     12. Brands
   3. Typography      8. Hero           13. Process / Stats
   4. Layout          9. Trust bar      14. Forms
   5. Motion         10. Cards         15. Footer / Legal / Responsive
   ========================================================================== */

/* 1 ── TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* Brand — navy family, anchored on the BVTC logo navy */
  --navy-900:#070425;
  --navy-800:#0E0949;   /* LOGO NAVY — primary brand colour */
  --navy-700:#141060;
  --navy-600:#1E2A7A;
  --navy-500:#2E56A8;
  --navy-100:#E9F0F9;

  /* Accent — lighter blues. No third hue: the palette is navy and white. */
  --accent-700:#234E9E;  /* accent used as text (AA on white) */
  --accent-500:#3E77C8;  /* focus rings, active graphics */
  --accent-400:#5B93D8;  /* rules, bullets, small graphic accents */
  --accent-200:#B6D2F0;  /* accent on dark surfaces */
  --accent-100:#DCE9F8;
  --accent-050:#EDF3FB;

  /* Neutrals */
  --ink:#111C28;
  --ink-2:#3D4C5C;
  --ink-3:#5C6E80;
  --line:#E2E8F0;
  --line-2:#CFD9E4;
  --paper:#FFFFFF;
  --paper-2:#F7F9FC;
  --paper-3:#EFF3F8;
  --warm:#F6F4F0;

  /* Type */
  --ff-head:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Scale (fluid) */
  --t-display:clamp(2.5rem,1.35rem + 3.6vw,4.25rem);
  --t-h1:clamp(2.1rem,1.35rem + 2.4vw,3.35rem);
  --t-h2:clamp(1.7rem,1.2rem + 1.6vw,2.6rem);
  --t-h3:clamp(1.25rem,1.08rem + .55vw,1.6rem);
  --t-h4:1.0625rem;
  --t-body:1.0125rem;
  --t-sm:.9125rem;
  --t-xs:.8rem;

  /* Space */
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,8vw,8rem);
  --maxw:1240px;
  --maxw-narrow:760px;

  /* Elevation & shape */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(14,9,73,.06), 0 2px 8px rgba(14,9,73,.05);
  --sh-2:0 4px 12px rgba(14,9,73,.07), 0 14px 34px rgba(14,9,73,.08);
  --sh-3:0 10px 24px rgba(14,9,73,.10), 0 28px 60px rgba(14,9,73,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 2 ── RESET / BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:var(--t-body);line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--ff-head);font-weight:800;line-height:1.12;letter-spacing:-.022em;color:var(--navy-800)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:0}

:focus-visible{outline:3px solid var(--accent-500);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy-800);color:#fff;padding:.85rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

::selection{background:var(--navy-800);color:#fff}

/* 3 ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
.display{font-size:var(--t-display);letter-spacing:-.032em;line-height:1.05}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2);letter-spacing:-.026em}
.h3{font-size:var(--t-h3);letter-spacing:-.018em}
.h4{font-size:var(--t-h4);font-weight:750;letter-spacing:-.01em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-head);font-size:.755rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-700);margin:0 0 1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent-400);flex:none}
.eyebrow.on-dark{color:var(--accent-200)}
.eyebrow.on-dark::before{background:var(--accent-200)}

.lede{font-size:clamp(1.06rem,.98rem + .35vw,1.25rem);line-height:1.62;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.sec-head{max-width:720px;margin-bottom:clamp(2.5rem,4vw,3.75rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow::before{display:none}
.sec-head .h2 + p{margin-top:1.15rem}

.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .lede,.on-dark p{color:rgba(255,255,255,.78)}

/* Any heading sitting on a dark surface inherits white */
.hero h1,.hero h2,.hero h3,
.pagehead h1,.pagehead h2,
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4,
.bg-navy-deep h1,.bg-navy-deep h2,.bg-navy-deep h3,.bg-navy-deep h4,
.cta-band h1,.cta-band h2,.cta-band h3,
.infocard h1,.infocard h2,.infocard h3,.infocard h4{color:#fff}
.bg-navy .lede,.bg-navy-deep .lede,.cta-band .lede{color:rgba(255,255,255,.78)}
.bg-navy .disclaimer,.bg-navy-deep .disclaimer{color:rgba(255,255,255,.55)}

/* 4 ── LAYOUT ───────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--maxw-narrow)}
.sec{padding-block:var(--sec-y)}
.sec-tight{padding-block:clamp(3rem,5vw,4.5rem)}
.bg-paper2{background:var(--paper-2)}
.bg-paper3{background:var(--paper-3)}
.bg-warm{background:var(--warm)}
.bg-navy{background:var(--navy-800);color:#fff;position:relative;overflow:hidden}
.bg-navy-deep{background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-700) 62%,var(--navy-600) 100%);color:#fff;position:relative;overflow:hidden}
.grid{display:grid;gap:clamp(1.1rem,2vw,1.75rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.wide-left{grid-template-columns:1.05fr .95fr}
.split.wide-right{grid-template-columns:.95fr 1.05fr}
.stack-sm > * + *{margin-top:.6rem}

/* Decorative grid pattern for navy sections */
.bg-navy-deep::before,.bg-navy::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  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% 90% at 78% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 78% 0%,#000 0%,transparent 72%);
}
.bg-navy-deep > *,.bg-navy > *{position:relative;z-index:1}

/* 5 ── MOTION ───────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.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}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* 6 ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--navy-700);--btn-fg:#fff;--btn-bd:var(--navy-700);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-family:var(--ff-head);font-weight:750;font-size:.9375rem;letter-spacing:-.005em;
  padding:.85rem 1.6rem;border-radius:var(--r-sm);cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-accent{--btn-bg:var(--navy-800);--btn-fg:#fff;--btn-bd:var(--navy-800)}
.btn-accent:hover{--btn-bg:var(--navy-700);--btn-bd:var(--navy-700)}
/* On dark surfaces the primary CTA inverts to white */
.hero .btn-accent,.pagehead .btn-accent,.cta-band .btn-accent,
.bg-navy .btn-accent,.bg-navy-deep .btn-accent,.infocard .btn-accent,.ownbrand .btn-accent{
  --btn-bg:#fff;--btn-fg:var(--navy-800);--btn-bd:#fff}
.hero .btn-accent:hover,.pagehead .btn-accent:hover,.cta-band .btn-accent:hover,
.bg-navy .btn-accent:hover,.bg-navy-deep .btn-accent:hover,.infocard .btn-accent:hover,.ownbrand .btn-accent:hover{
  --btn-bg:var(--navy-100);--btn-bd:var(--navy-100)}
.btn-light{--btn-bg:#fff;--btn-fg:var(--navy-800);--btn-bd:#fff}
.btn-outline{--btn-bg:transparent;--btn-fg:var(--navy-700);--btn-bd:var(--line-2)}
.btn-outline:hover{--btn-bd:var(--navy-700)}
.btn-outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.38)}
.btn-outline-light:hover{--btn-bd:#fff;--btn-bg:rgba(255,255,255,.08)}
.btn-lg{padding:1.02rem 2rem;font-size:1rem}
.btn-sm{padding:.62rem 1.15rem;font-size:.875rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-head);
  font-weight:750;font-size:.9375rem;color:var(--navy-600);
  padding-bottom:2px;border-bottom:2px solid var(--accent-400);
  transition:gap .22s var(--ease),color .22s var(--ease);
}
.link-arrow:hover{gap:.8rem;color:var(--navy-800)}
.link-arrow.on-dark{color:#fff}

/* 7 ── NAVIGATION ───────────────────────────────────────────────────────── */
.topbar{background:var(--navy-900);color:rgba(255,255,255,.72);font-size:var(--t-xs)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px}
.topbar a:hover{color:#fff}
.topbar .tb-items{display:flex;gap:1.5rem;align-items:center}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-200);display:inline-block;margin-right:.5rem}

.nav{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease)}
.nav.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(14,9,73,.07)}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.8rem;flex:none;padding:.35rem 0}
.brand-mark{height:48px;width:auto;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--ff-head);font-size:1.42rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-800)}
.brand-txt em{font-style:normal;font-size:.5875rem;font-weight:650;letter-spacing:.105em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.35rem;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.nav-links a{
  font-family:var(--ff-head);font-weight:650;font-size:.9125rem;color:var(--ink-2);white-space:nowrap;
  padding:.6rem .85rem;border-radius:var(--r-sm);position:relative;transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-links .m-cta{display:none}
.nav-links a:hover{color:var(--navy-700);background:var(--paper-3)}
.nav-links a[aria-current="page"]{color:var(--navy-800);font-weight:800}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;background:var(--accent-400);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:.75rem;flex:none;margin-left:.85rem}
.nav-toggle{display:none;background:none;border:1.5px solid var(--line-2);border-radius:var(--r-sm);width:46px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy-800);position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy-800);transition:transform .25s var(--ease),top .2s var(--ease)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* 8 ── HERO ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--navy-800);color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg svg,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(7,4,37,.95) 0%,rgba(14,9,73,.88) 40%,rgba(20,16,96,.48) 70%,rgba(30,42,122,.20) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(4.25rem,9vw,7.5rem)}
.hero-inner{max-width:730px}
.hero .display{margin-bottom:1.35rem}
.hero .display em{font-style:normal;color:var(--accent-200)}
.hero-sub{font-size:clamp(1.03rem,.96rem + .38vw,1.2rem);line-height:1.62;color:rgba(255,255,255,.8);max-width:620px;margin-bottom:2.15rem}
.hero-since{display:inline-flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:.45rem 1rem .45rem .55rem;font-size:.8125rem;font-weight:650;letter-spacing:.02em;color:rgba(255,255,255,.9);margin-bottom:1.9rem;font-family:var(--ff-head)}
.hero-since b{background:#fff;color:var(--navy-800);border-radius:100px;padding:.15rem .6rem;font-weight:800}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem clamp(1rem,2.5vw,2.25rem);margin-top:3.25rem;padding-top:2.25rem;border-top:1px solid rgba(255,255,255,.16);max-width:660px}
.hero-stats .st b{display:block;white-space:nowrap;font-family:var(--ff-head);font-size:clamp(1.6rem,1.2rem + 1.2vw,2.15rem);font-weight:800;line-height:1;color:#fff;letter-spacing:-.03em}
.hero-stats .st > span{display:block;margin-top:.45rem;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:650;line-height:1.35}
.hero-stats .st b span{display:inline;font-size:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:inherit}

/* Page header (interior pages) */
.pagehead{background:linear-gradient(150deg,var(--navy-900),var(--navy-700) 70%,var(--navy-600));color:#fff;position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(182,210,240,.18),transparent 62%)}
.pagehead .wrap{position:relative;z-index:1;padding-block:clamp(3.25rem,6vw,5.25rem)}
.pagehead .h1{margin-bottom:1.1rem;max-width:20ch}
.pagehead p{max-width:62ch;color:rgba(255,255,255,.78);font-size:clamp(1rem,.95rem + .3vw,1.14rem)}
/* Standing line under the heading of a range BVTC manufactures itself. Wraps
   to stacked lines on a narrow screen rather than pushing the head sideways. */
.pagehead .headstrap{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .85rem;
  margin:-.35rem 0 1.15rem;color:#fff;font-size:clamp(.95rem,.9rem + .25vw,1.08rem);
  letter-spacing:.01em}
.pagehead .headstrap b{font-weight:700}
.pagehead .headstrap span{color:rgba(255,255,255,.4);font-weight:400}
.crumb{display:flex;gap:.5rem;align-items:center;font-size:.8125rem;color:rgba(255,255,255,.6);margin-bottom:1.4rem;font-weight:600}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}

/* 9 ── TRUST BAR ────────────────────────────────────────────────────────── */
.trustbar{border-bottom:1px solid var(--line);background:#fff}
.trustbar .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.tb-item{display:flex;align-items:center;gap:.75rem;padding:1.5rem 1.15rem;border-right:1px solid var(--line)}
.tb-item:first-child{padding-left:0}
.tb-item:last-child{border-right:0;padding-right:0}
.tb-item svg{flex:none;width:26px;height:26px;color:var(--accent-700)}
.tb-item span{font-family:var(--ff-head);font-size:.83rem;font-weight:700;line-height:1.35;color:var(--navy-800);letter-spacing:-.005em}

/* 10 ── CARDS ───────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.card-media img,.card-media svg{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card-media picture{display:block;width:100%;height:100%}
.card-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,4,37,.42),rgba(7,4,37,0) 55%)}
.card:hover .card-media img,.card:hover .card-media svg{transform:scale(1.05)}
.card-num{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--ff-head);font-size:.75rem;font-weight:800;letter-spacing:.12em;
  background:rgba(7,4,37,.78);color:#fff;padding:.32rem .6rem;border-radius:var(--r-sm);backdrop-filter:blur(6px)}
.card-body{padding:1.6rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.card-body .h3{margin-bottom:.65rem}
.card-body p{color:var(--ink-2);font-size:var(--t-sm)}
.card-list{margin:1.05rem 0 1.4rem;display:flex;flex-wrap:wrap;gap:.4rem}
.card-list li{font-size:.78rem;font-weight:650;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);
  padding:.28rem .6rem;border-radius:100px;font-family:var(--ff-head)}
.card-body .link-arrow{margin-top:auto;align-self:flex-start}

/* Feature (why us) blocks */
.feat{padding:1.9rem 1.75rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);position:relative;overflow:hidden}
.feat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-400);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.feat:hover::after{transform:scaleY(1)}
.feat .ico{width:46px;height:46px;border-radius:var(--r-sm);background:var(--navy-100);color:var(--navy-700);
  display:grid;place-items:center;margin-bottom:1.15rem}
.feat .ico svg{width:24px;height:24px}
.feat .h4{margin-bottom:.5rem}
.feat p{font-size:var(--t-sm);color:var(--ink-2)}
.feat.on-navy{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13)}
.feat.on-navy .ico{background:rgba(255,255,255,.12);color:var(--accent-200)}
.feat.on-navy .h4{color:#fff}
.feat.on-navy p{color:rgba(255,255,255,.72)}
.feat.on-navy:hover{background:rgba(255,255,255,.07)}

/* Image plate (placeholder illustration frame) */
.plate{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--navy-800);box-shadow:var(--sh-2)}
.plate svg,.plate img{width:100%;height:auto;display:block}
.plate img,.plate picture{width:100%;height:auto;display:block}
.plate picture img{border-radius:inherit}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(14,9,73,.09);
  background:linear-gradient(to top,rgba(7,4,37,.2),rgba(7,4,37,0) 38%)}
.plate-badge{position:absolute;right:-14px;bottom:-14px;z-index:4;background:#fff;color:var(--navy-800);
  border-radius:var(--r-md);padding:1.15rem 1.4rem;box-shadow:var(--sh-2);max-width:230px}
.plate-badge b{display:block;font-family:var(--ff-head);font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.plate-badge span{display:block;font-size:.78rem;font-weight:700;line-height:1.3;margin-top:.35rem}

/* checklist */
.checks{display:grid;gap:.85rem}
.checks li{display:flex;gap:.85rem;align-items:flex-start;font-size:var(--t-sm);line-height:1.55}
.checks svg{flex:none;width:21px;height:21px;margin-top:2px;color:var(--accent-700)}
.checks.on-dark svg{color:var(--accent-200)}
.checks.on-dark li{color:rgba(255,255,255,.84)}

/* 11 ── INDUSTRIES ──────────────────────────────────────────────────────── */
.ind{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.6rem 1.4rem 1.5rem;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.ind .ico{display:block;width:40px;height:40px;color:var(--navy-600);margin-bottom:1.1rem;transition:color .3s var(--ease),transform .3s var(--ease)}
.ind .ico svg{width:100%;height:100%}
.ind h3{font-size:1.0125rem;font-weight:750;margin-bottom:.4rem;letter-spacing:-.012em;transition:color .3s var(--ease)}
.ind p{font-size:.855rem;line-height:1.5;color:var(--ink-3);margin:0;transition:color .3s var(--ease)}
.ind .go{margin-top:1.05rem;display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:750;font-family:var(--ff-head);
  color:var(--accent-700);opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ind:hover{transform:translateY(-4px);background:var(--navy-800);border-color:var(--navy-800);box-shadow:var(--sh-3)}
.ind:hover h3{color:#fff}
.ind:hover p{color:rgba(255,255,255,.7)}
.ind:hover .ico{color:var(--accent-200);transform:translateY(-2px)}
.ind:hover .go{opacity:1;transform:none;color:var(--accent-200)}
.ind:focus-visible{transform:translateY(-4px)}

/* 12 ── BRANDS ──────────────────────────────────────────────────────────── */
/* Third-party marks sit in a fixed-HEIGHT box with no width constraint, so
   each logo renders at its own aspect ratio. object-fit:contain makes
   distortion impossible whatever file is supplied. */
/* The box is definite in BOTH axes and the image fills it with
   object-fit:contain. That preserves the logo's own proportions whatever file
   is supplied — including SVGs that carry only a viewBox and no intrinsic
   width/height, which would otherwise collapse to zero width. */
.brand-logo{display:flex;align-items:center;justify-content:center;width:100%}
.brand-logo img{width:100%;height:100%;object-fit:contain;object-position:center}
.brand-logo-md{height:58px;max-width:264px}
.brand-logo-lg{height:74px;max-width:300px}

/* Reserved slot shown until the official asset is supplied. Occupies exactly
   the same space, so dropping the real logo in shifts nothing. */
.brand-logo.is-slot{flex-direction:column;gap:.35rem;border:1.5px dashed var(--line-2);
  border-radius:var(--r-sm);background:var(--paper-2);padding:.7rem 1.6rem;width:auto;
  min-width:min(272px,100%)}
.brand-logo.is-slot .slot-name{font-family:var(--ff-head);font-weight:800;font-size:.9375rem;
  letter-spacing:-.015em;color:var(--navy-800);line-height:1.15;text-align:center}
.brand-logo.is-slot .slot-note{font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

/* Homepage logo wall — two marks, equal weight, no decorative card around them */
.logo-wall{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;
  gap:clamp(2rem,6vw,5rem);max-width:920px;margin:0 auto;
  padding:clamp(2.25rem,5vw,3.5rem) clamp(1rem,4vw,3rem);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.logo-wall .rule{width:1px;height:76px;background:var(--line);justify-self:center}
.logo-wall .brand-cell{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.logo-wall .brand-cell > p{font-size:.855rem;color:var(--ink-3);margin:0;max-width:34ch;line-height:1.5}
.logo-wall .brand-cell .pill{align-self:center}
@media (max-width:720px){
  .logo-wall{grid-template-columns:1fr;gap:2rem;padding-inline:clamp(1rem,5vw,2rem)}
  .logo-wall .rule{width:100%;height:1px}
}

/* Brands page — logo above the heading, no box around the mark */
.brand-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem;margin-bottom:1.4rem}
.brand-head .brand-logo{justify-content:flex-start;width:auto;max-width:300px}
.brand-head .brand-logo.is-slot{align-items:center}

.pill{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-head);font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-700);background:var(--accent-050);border:1px solid var(--accent-100);padding:.32rem .68rem;border-radius:100px;align-self:flex-start}
.pill svg{width:14px;height:14px;flex:none}

.brand-corp{margin:0;font-size:.8125rem;color:var(--ink-3);font-weight:600;letter-spacing:.01em}

.brand-solutions{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0}
.brand-solutions a{font-family:var(--ff-head);font-size:.8125rem;font-weight:700;
  padding:.42rem .85rem;border:1.5px solid var(--line);border-radius:100px;color:var(--ink-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.brand-solutions a:hover{border-color:var(--navy-700);color:var(--navy-800);background:var(--paper-2)}

/* Client logo grid */
.logogrid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);background:#fff;border-radius:var(--r-md);overflow:hidden}
.logogrid .lg{display:grid;place-items:center;padding:clamp(1.4rem,3vw,2.15rem) 1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:112px}
.logogrid .lg svg{max-height:34px;width:auto;max-width:100%;filter:grayscale(1);opacity:.62;transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}
.logogrid .lg:hover svg{filter:grayscale(0);opacity:1;transform:scale(1.04)}
.disclaimer{font-size:.78rem;color:var(--ink-3);margin-top:1.35rem;line-height:1.55}

/* 13 ── PROCESS / STATS ─────────────────────────────────────────────────── */
.process{--pgap:clamp(1rem,2vw,1.75rem);--pline:rgba(255,255,255,.22);
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--pgap)}
.step{position:relative}
.step::before{content:"";position:absolute;top:26px;left:54px;height:2px;z-index:0;
  width:calc(100% - 54px + var(--pgap));background:var(--pline)}
.step:last-child::before{display:none}
.step:nth-child(2)::before,.step:nth-child(3)::before{background:var(--accent-200);opacity:.6}
.step .dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2;
  background:var(--navy-800);border:2px solid rgba(182,210,240,.5);color:var(--accent-200);
  font-family:var(--ff-head);font-weight:800;font-size:.9375rem;letter-spacing:-.01em;margin-bottom:1.35rem;transition:all .3s var(--ease)}
.step:hover .dot{background:#fff;color:var(--navy-800);border-color:#fff;transform:scale(1.06)}
.step h3{font-size:1.05rem;color:#fff;margin-bottom:.5rem;font-weight:750}
.step p{font-size:.865rem;color:rgba(255,255,255,.68);line-height:1.55;margin:0}

.process.light{--pline:var(--line-2)}
.process.light .dot{background:#fff;border-color:var(--line-2);color:var(--navy-700);box-shadow:var(--sh-1)}
.process.light .step:hover .dot{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.process.light .step h3{color:var(--navy-800)}
.process.light .step p{color:var(--ink-2)}

.statrow{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}
.statrow .stat{background:#fff;padding:clamp(1.5rem,3vw,2.15rem)}
.statrow .stat b{display:block;font-family:var(--ff-head);font-size:clamp(1.85rem,1.3rem + 1.6vw,2.6rem);font-weight:800;
  color:var(--navy-700);line-height:1;letter-spacing:-.035em}
.statrow .stat > span{display:block;margin-top:.6rem;font-size:.83rem;color:var(--ink-3);font-weight:600;line-height:1.4}
.statrow .stat b span{display:inline;font:inherit;color:inherit;margin:0}

/* 14 ── FORMS ───────────────────────────────────────────────────────────── */
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.opt{display:flex;gap:.65rem;align-items:center;font-size:.9rem;font-weight:600;cursor:pointer;
  padding:.78rem .95rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-2);transition:border-color .2s var(--ease),background .2s var(--ease)}
.opt:hover{border-color:var(--line-2);background:#fff}
/* Specificity has to beat `.field input`, which sizes text inputs to 100%. */
.field .opt input,.opt input{width:18px;height:18px;flex:none;margin:0;padding:0;border:0;
  background:none;box-shadow:none;border-radius:3px;accent-color:var(--navy-700)}
.opt span{min-width:0;line-height:1.35}
.opt:has(input:checked){border-color:var(--navy-700);background:var(--accent-050)}
.opt:has(input:focus-visible){outline:3px solid var(--accent-500);outline-offset:2px}
@media (max-width:560px){.optgrid{grid-template-columns:1fr}}

.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.75rem,3.5vw,2.75rem);box-shadow:var(--sh-2)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.15rem}
.field{display:flex;flex-direction:column;gap:.42rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--ff-head);font-size:.815rem;font-weight:750;color:var(--navy-800);letter-spacing:.005em}
.field label .req{color:var(--accent-700)}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:.78rem .9rem;font-size:.9375rem;color:var(--ink);transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#788897}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(30,84,144,.12)}
.field .hint{font-size:.755rem;color:var(--ink-3)}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6E80' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.field-err{display:none;font-size:.79rem;font-weight:600;line-height:1.45;color:#A3232B}
.field.has-err .field-err,fieldset.has-err .field-err{display:block;margin-top:.1rem}
.field.has-err input,.field.has-err select,.field.has-err textarea{
  border-color:#C0323B;background:#FEF6F6;box-shadow:0 0 0 3px rgba(192,50,59,.1)}
.field.has-err label{color:#8E1F27}

.spinner{display:inline-block;width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[aria-busy="true"]{opacity:.75;cursor:progress}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

.formstatus.is-error{background:#FEF6F6;border-color:#EBC3C6;color:#8E1F27}
.formstatus.is-error a{color:#8E1F27;text-decoration:underline}
/* Action still needed by the visitor — not an error, not a confirmation. */
.formstatus.is-warn{background:#FFF9EC;border-color:#EBD6A4;color:#6B4E0C}
.formstatus.is-warn a{color:#6B4E0C;text-decoration:underline}

.form-done{text-align:center;padding:clamp(1.5rem,4vw,2.75rem) 0}
.form-done:focus{outline:none}
.form-done-mark{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1.4rem;
  border-radius:50%;background:var(--accent-050);color:var(--navy-700);
  box-shadow:0 0 0 8px rgba(35,78,158,.07)}
.form-done-mark svg{width:30px;height:30px}
.form-done .h3{margin-bottom:.75rem}
.form-done p{color:var(--ink-2);font-size:.9375rem;max-width:46ch;margin-inline:auto}
.form-done .btn-row{justify-content:center}

/* Honeypot — off-screen for bots, invisible and unfocusable for people */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none}

.form-note{font-size:.79rem;color:var(--ink-3);line-height:1.55;margin-top:1.15rem}
.formstatus{margin-top:1.1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);background:var(--accent-050);border:1px solid var(--accent-100);
  color:var(--navy-800);font-size:.865rem;font-weight:600;display:none}
.formstatus.show{display:block}

.mapframe{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:var(--paper-3);aspect-ratio:16/10}
.mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:grayscale(.35) contrast(1.02)}

.infocard{background:var(--navy-800);color:#fff;border-radius:var(--r-lg);padding:clamp(1.75rem,3.5vw,2.5rem);position:relative;overflow:hidden}
.infocard .row{display:flex;gap:1rem;padding-block:1.15rem;border-bottom:1px solid rgba(255,255,255,.12)}
.infocard .row:last-of-type{border-bottom:0}
.infocard .row svg{flex:none;width:20px;height:20px;color:var(--accent-200);margin-top:3px}
.infocard .row b{display:block;font-family:var(--ff-head);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.3rem;font-weight:750}
.infocard .row p{margin:0;font-size:.9125rem;color:rgba(255,255,255,.9);line-height:1.55}
.infocard .row a:hover{color:var(--accent-200)}

/* 15 ── FOOTER / LEGAL / RESPONSIVE ─────────────────────────────────────── */
.cta-band{background:linear-gradient(120deg,var(--navy-900),var(--navy-700) 65%,var(--navy-600));color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;left:-10%;bottom:-85%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(182,210,240,.16),transparent 62%)}
.cta-band .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:center;padding-block:clamp(3.25rem,6vw,4.75rem)}

.footer{background:var(--navy-900);color:rgba(255,255,255,.66);font-size:var(--t-sm)}
.footer a{transition:color .2s var(--ease)}
.footer a:hover{color:var(--accent-200)}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.75rem,3vw,3rem);padding-block:clamp(3rem,5vw,4.25rem)}
.f-brand .brand{margin-bottom:1.35rem}
.f-brand .brand-mark{height:52px}
.f-brand .brand-txt b{color:#fff}
.f-brand .brand-txt em{color:rgba(255,255,255,.55)}
.f-brand p{font-size:.9rem;line-height:1.6;max-width:34ch;color:rgba(255,255,255,.6)}
.f-brand .tagline{color:#fff;font-family:var(--ff-head);font-weight:700;font-size:.95rem;margin-bottom:.55rem}
.f-col h4{font-family:var(--ff-head);font-size:.745rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:1.15rem}
.f-col li{margin-bottom:.6rem;font-size:.875rem}
.f-mid{border-top:1px solid rgba(255,255,255,.1);padding-block:1.75rem;display:grid;grid-template-columns:repeat(3,auto);gap:1.25rem 2.5rem;justify-content:start}
.f-mid .fm{display:flex;gap:.7rem;align-items:flex-start;font-size:.855rem;max-width:34ch}
.f-mid svg{flex:none;width:17px;height:17px;color:var(--accent-200);margin-top:3px}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;font-size:.79rem}
.f-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;align-items:center}
.f-legal span{opacity:.3}

/* Legal document layout */
.legal-layout{display:grid;grid-template-columns:262px 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* Grid items default to min-width:auto, so the wide policy table was forcing
   the whole column — and the sidebar with it — past the viewport on phones.
   Letting them shrink keeps the table scrolling inside its own box. */
.legal-layout > *{min-width:0}
.legal-nav{position:sticky;top:104px;border-left:2px solid var(--line);padding-left:1.15rem}
.legal-nav h4{font-family:var(--ff-head);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.legal-nav a{display:block;font-size:.8625rem;color:var(--ink-2);padding:.36rem 0;line-height:1.4;transition:color .2s var(--ease),padding .2s var(--ease)}
.legal-nav a:hover,.legal-nav a.active{color:var(--navy-700);font-weight:700;padding-left:.35rem}
.legal-doc{max-width:70ch;font-size:.975rem;line-height:1.78;color:var(--ink-2)}
.legal-doc h2{font-size:1.28rem;margin:2.75rem 0 .9rem;letter-spacing:-.015em;scroll-margin-top:110px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:1.02rem;margin:1.6rem 0 .55rem}
.legal-doc ul{list-style:none;margin:.85rem 0 1.15rem;padding:0}
.legal-doc ul li{position:relative;padding-left:1.35rem;margin-bottom:.5rem}
.legal-doc ul li::before{content:"";position:absolute;left:.15rem;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--accent-400)}
.legal-meta{display:flex;flex-wrap:wrap;gap:.6rem 2rem;padding:1.1rem 1.35rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:2.5rem;font-size:.83rem}
.legal-meta b{font-family:var(--ff-head);color:var(--navy-800);display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}
.legal-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.legal-tabs a{font-family:var(--ff-head);font-size:.845rem;font-weight:700;padding:.55rem 1rem;border-radius:100px;border:1.5px solid var(--line);color:var(--ink-2);transition:all .2s var(--ease)}
.legal-tabs a:hover{border-color:var(--line-2);background:var(--paper-2)}
.legal-tabs a.active{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
/* Legal tables (e.g. the lawful-basis matrix) — scroll inside their own box
   rather than pushing the page sideways on a phone. */
.legal-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.35rem 0 1.6rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.legal-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.865rem}
.legal-table th,.legal-table td{padding:.7rem .85rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.5}
.legal-table thead th{background:var(--paper-2);font-family:var(--ff-head);font-weight:800;
  font-size:.755rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy-800);
  border-bottom:1.5px solid var(--line-2);position:sticky;top:0}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table td{color:var(--ink-2)}

/* The side nav now carries 60+ links — give it its own scroll area. */
.legal-nav div{max-height:calc(100vh - 220px);overflow-y:auto;padding-right:.5rem}
.legal-nav a.nav-doc{font-weight:800;color:var(--navy-800);margin-top:1.1rem;
  padding-top:.5rem;border-top:1px solid var(--line);font-size:.8125rem}
.legal-nav a.nav-doc:first-child{margin-top:0;border-top:0;padding-top:0}
.legal-nav a:not(.nav-doc){padding-left:.75rem;font-size:.8rem;color:var(--ink-3)}
.legal-nav a:not(.nav-doc):hover,.legal-nav a:not(.nav-doc).active{color:var(--navy-700)}

.placeholder-note{background:var(--accent-050);border:1px solid var(--accent-100);border-left:3px solid var(--navy-600);
  border-radius:var(--r-sm);padding:.9rem 1.1rem;font-size:.83rem;color:var(--ink-2);line-height:1.55;margin:1.5rem 0}
.placeholder-note b{color:var(--navy-800)}

/* Detail rows (solutions page) */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(3rem,5vw,4.5rem);border-bottom:1px solid var(--line)}
.detail:last-child{border-bottom:0}
.detail .idx{font-family:var(--ff-head);font-size:.78rem;font-weight:800;letter-spacing:.16em;color:var(--accent-700);margin-bottom:.9rem;display:block}
.detail ul.spec{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1rem;margin:1.5rem 0 1.9rem}
.detail ul.spec li{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem;color:var(--ink-2)}
.detail ul.spec li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--accent-400);margin-top:.55em}
@media (min-width:861px){.detail:nth-child(even) .detail-media{order:-1}}

/* Responsive */
@media (max-width:1080px){
  .trustbar .wrap{grid-template-columns:repeat(3,1fr)}
  .tb-item{padding:1.15rem;border-bottom:1px solid var(--line)}
  .tb-item:nth-child(3n){border-right:0}
  .tb-item:nth-child(n+4){border-bottom:0}
  .tb-item:first-child,.tb-item:last-child{padding-inline:1.15rem}
  .tb-item:nth-child(3n+1){padding-left:0}
  .logogrid{grid-template-columns:repeat(3,1fr)}
  .f-top{grid-template-columns:1fr 1fr}
  .legal-layout{grid-template-columns:1fr}
  .legal-nav{position:static;border-left:0;border-top:2px solid var(--line);padding-left:0;padding-top:1.25rem}
  .legal-nav div{display:flex;flex-wrap:wrap;gap:.35rem .95rem;max-height:none;overflow:visible}
  .legal-nav div a{min-width:0}
  .legal-nav a:not(.nav-doc){padding-left:0}
}
@media (max-width:980px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .step::before{display:none}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .cta-band .wrap{grid-template-columns:1fr;gap:1.75rem}
}
/* Between the mobile breakpoint and ~1100px the full desktop nav ran wider
   than the viewport (logo + 6 links + CTA). Tighten spacing and drop the long
   company name from the lockup so it fits without switching to the hamburger
   earlier than necessary. */
@media (max-width:1100px){
  .brand-txt em{display:none}
  .brand-txt b{font-size:1.3rem}
  .brand{gap:.6rem}
  .brand-mark{height:44px}
  .nav .wrap{gap:.75rem}
  .nav-links{gap:.1rem}
  .nav-links a{padding:.6rem .5rem;font-size:.875rem}
  .nav-cta{margin-left:.4rem}
  .nav-cta .btn{padding:.78rem 1.05rem;font-size:.875rem}
}

@media (max-width:900px){
  .nav-links{
    position:fixed;inset:0 0 auto;top:var(--nav-h,78px);flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-2);padding:.75rem var(--gutter) 1.25rem;
    max-height:calc(100dvh - var(--nav-h,78px));overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:all .25s var(--ease)}
  .nav-links.open{transform:none;opacity:1;visibility:visible}
  .nav-links a{display:block;padding:.9rem .25rem;border-bottom:1px solid var(--line);font-size:1rem;border-radius:0}
  .nav-links a:hover{background:transparent}
  .nav-links a[aria-current="page"]::after{left:.25rem;right:auto;width:16px;bottom:.55rem}
  .nav-links .m-cta{display:block;margin-top:1rem;border-bottom:0}
  .nav-links .m-cta .btn{width:100%}
  .nav-toggle{display:flex}
  .nav-cta .btn{display:none}
  .nav-cta{margin-left:auto}
}
@media (max-width:860px){
  .g-3{grid-template-columns:repeat(2,1fr)}
  .split,.split.wide-left,.split.wide-right,.detail{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .hero-inner{max-width:none}
  .plate-badge{right:1rem;bottom:1rem}
}
@media (max-width:760px){
  .topbar .wrap > p{display:none}
  .topbar .wrap{justify-content:center}
  .topbar .tb-items{gap:1.25rem;font-size:.775rem}
  :root{--t-display:clamp(2.15rem,1.35rem + 3.6vw,4.25rem)}
  .hero-since{font-size:.75rem;padding:.4rem .85rem .4rem .45rem}
}
@media (max-width:520px){
  .brand-mark{height:42px}
  .brand-txt b{font-size:1.24rem}
  .brand-txt em{font-size:.5rem;letter-spacing:.08em}
}
@media (max-width:640px){
  .trustbar .wrap{grid-template-columns:1fr 1fr}
  .tb-item{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem .9rem!important}
  .tb-item:nth-child(2n){border-right:0}
  .tb-item:nth-child(n+5){border-bottom:0}
  .logogrid{grid-template-columns:repeat(2,1fr)}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr;gap:2.25rem}
  .f-mid{grid-template-columns:1fr}
  .detail ul.spec{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
  .btn-row .btn{width:100%}
  .plate-badge{position:static;max-width:none;border-radius:0;box-shadow:none;display:flex;align-items:baseline;gap:.75rem}
  .plate-badge b{font-size:1.4rem}
  .f-bot{flex-direction:column;align-items:flex-start}
}

/* Print */
@media print{
  .nav,.topbar,.cta-band,.footer,.nav-toggle{display:none}
  body{font-size:11pt}
  .sec{padding-block:1.5rem}
}


/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT CATALOGUE
   Built from the existing tokens only — same navy, same type scale, same
   button set. Nothing here introduces a new colour or a new font.
   ══════════════════════════════════════════════════════════════════════════ */

/* Shared small pieces the catalogue needs */
.btn-ghost{background:transparent;color:var(--navy-800);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--accent-050);border-color:var(--accent-400)}

/* Breadcrumb on a light surface — the dark one is .crumb, already defined */
.crumb-light{color:var(--ink-3)}
.crumb-light a{color:var(--accent-700)}
.crumb-light a:hover{color:var(--navy-800)}
.crumb-light span[aria-hidden]{opacity:.45}
.crumb-light [aria-current]{color:var(--ink)}
.crumb{flex-wrap:wrap}

.ticks{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.6rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2)}
.ticks svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--accent-500)}

.notebar{display:flex;gap:1rem;align-items:flex-start;background:var(--accent-050);
  border:1px solid var(--accent-100);border-radius:var(--r-md);padding:1.15rem 1.35rem}
.notebar svg{width:22px;height:22px;color:var(--accent-700);flex:none}
.notebar p{margin:0;font-size:var(--t-sm);color:var(--ink-2)}

/* ── Products landing: the four ranges ─────────────────────────────────── */
.brandgrid{display:grid;gap:1.25rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.brandcard{display:flex;flex-direction:column;gap:1rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:1.6rem 1.5rem;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.brandcard.is-live{border-color:var(--accent-200);box-shadow:0 1px 0 var(--accent-100)}
.brandcard.is-live:hover{transform:translateY(-3px);border-color:var(--accent-400);
  box-shadow:0 12px 30px rgba(14,9,73,.10)}
.brandcard.is-soon{background:var(--paper-2);border-style:dashed}
.brandcard-top h3{margin:.3rem 0 .55rem}
.brandcard-top p{margin:0;font-size:var(--t-sm);color:var(--ink-2)}
.brandcard-cats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.brandcard-cats a{display:inline-block;font-family:var(--ff-head);font-size:.75rem;
  font-weight:700;padding:.3rem .62rem;border-radius:100px;background:var(--accent-050);
  color:var(--accent-700);text-decoration:none;border:1px solid var(--accent-100)}
.brandcard-cats a:hover{background:var(--accent-100);color:var(--navy-800)}
.brandcard-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
  justify-content:space-between;padding-top:.4rem}

/* ── Filter bar ────────────────────────────────────────────────────────── */
.pbar{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line);
  padding-block:.85rem}
.pbar-row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.psearch{position:relative;flex:1 1 260px;min-width:0}
.psearch input{width:100%;padding:.72rem 2.4rem .72rem 2.6rem;font:inherit;
  font-size:var(--t-sm);color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:100px}
.psearch input:focus{outline:none;border-color:var(--accent-500);background:#fff;
  box-shadow:0 0 0 3px rgba(62,119,200,.18)}
.psearch-ic{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.psearch-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:50%;background:var(--line);
  color:var(--ink-2);font-size:1.1rem;line-height:1;cursor:pointer}
.psearch-clear:hover{background:var(--line-2)}
.pfam select{padding:.72rem 2rem .72rem .95rem;font:inherit;font-size:var(--t-sm);
  color:var(--ink);background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:100px;max-width:100%}
.pfam select:focus{outline:none;border-color:var(--accent-500);
  box-shadow:0 0 0 3px rgba(62,119,200,.18)}
.pbar-toggle{display:none}
.pchips{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
.fchip{font-family:var(--ff-head);font-size:.795rem;font-weight:700;cursor:pointer;
  padding:.42rem .85rem;border-radius:100px;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink-2);transition:background .16s,color .16s,border-color .16s}
.fchip span{opacity:.55;margin-left:.3rem;font-weight:600}
.fchip:hover{border-color:var(--accent-400);color:var(--navy-800)}
.fchip.is-on{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.fchip.is-on span{opacity:.7}
.pcount{margin:.7rem 0 0;font-size:var(--t-xs);color:var(--ink-3);min-height:1.1em}

/* ── Product grid ──────────────────────────────────────────────────────── */
.pcat{margin-bottom:3.25rem;scroll-margin-top:150px}
.pcat[hidden]{display:none}
.pcat-head{margin-bottom:1.35rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.pcat-head h2{margin:0 0 .35rem}
.pcat-head p{margin:0;font-size:var(--t-sm);color:var(--ink-3);max-width:70ch}
.pgrid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.pcard{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.pcard:hover{transform:translateY(-3px);border-color:var(--accent-400);
  box-shadow:0 12px 28px rgba(14,9,73,.10)}
.pcard[hidden]{display:none}
.pcard-media{display:block;background:#fff;border-bottom:1px solid var(--line)}
.pcard-media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.pcard-body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.05rem 1.15rem;flex:1}
.pcard-fam{margin:0;font-family:var(--ff-head);font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent-700)}
.pcard-name{margin:0;font-size:.985rem;line-height:1.35;font-weight:700}
.pcard-name a{color:var(--navy-800);text-decoration:none}
.pcard-name a:hover{color:var(--accent-700);text-decoration:underline}
.pcard-code{margin:0;font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.02em}
.pcard-code b{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:0}
.pcard-desc{margin:.15rem 0 0;font-size:.83rem;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-spec{margin:0;font-size:var(--t-xs);color:var(--ink-3)}
.pcard-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto;padding-top:.85rem}
.pcard-actions .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.pempty{text-align:center;padding:3rem 1rem;color:var(--ink-3);font-size:var(--t-sm)}

/* ── Recommendation band ───────────────────────────────────────────────── */
.reco{display:grid;gap:1.25rem;align-items:center;background:var(--warm);
  border:1px solid var(--line);border-radius:var(--r-md);padding:1.75rem;
  grid-template-columns:auto 1fr auto}
.reco-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--paper);border:1px solid var(--accent-100)}
.reco-ic svg{width:24px;height:24px;color:var(--accent-700)}
.reco-txt h2{margin:0 0 .35rem}
.reco-txt p{margin:0;font-size:var(--t-sm);color:var(--ink-2);max-width:60ch}
.reco-cta{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}

/* ── Product detail ────────────────────────────────────────────────────── */
.pdet-top{background:var(--paper-2);border-bottom:1px solid var(--line);
  padding-block:clamp(1.5rem,3vw,2.25rem) clamp(2rem,4vw,3rem)}
.pdet-hero{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start;
  grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.pdet-shot{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.25rem}
.pdet-shot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.pdet-intro h1{margin:.35rem 0 .5rem;font-size:clamp(1.6rem,1.1rem + 1.5vw,2.35rem)}
.pdet-code{margin:0 0 1rem;font-size:var(--t-sm);color:var(--ink-3)}
.pdet-code b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05em;
  color:var(--ink);background:var(--accent-050);padding:.14rem .5rem;border-radius:5px;
  border:1px solid var(--accent-100)}
.pdet-ctx{margin:1rem 0 0;padding:.85rem 1.05rem;background:var(--accent-050);
  border-left:3px solid var(--accent-400);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-sm);color:var(--ink-2)}
.pdet-intro .btn-row{margin-top:1.6rem}
.pdet-price{margin:1rem 0 0;font-size:var(--t-xs);color:var(--ink-3)}
.pdet-grid{display:grid;gap:clamp(1.5rem,4vw,2.75rem);
  grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.pdet-sec{margin-bottom:2rem}
.pdet-sec h2{margin:0 0 .3rem}
.pdet-note{margin:.9rem 0 0;font-size:var(--t-xs);color:var(--ink-3);line-height:1.55}
.specbox,.quotebox{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.35rem 1.4rem;margin-bottom:1.1rem}
.quotebox{background:var(--navy-800);color:rgba(255,255,255,.86);border-color:var(--navy-800)}
.quotebox h2{color:#fff;margin:0 0 .5rem}
.quotebox p{margin:0 0 1.1rem;font-size:var(--t-sm)}
.spectable{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin-top:.85rem}
.spectable th,.spectable td{text-align:left;padding:.58rem .1rem;
  border-bottom:1px solid var(--line);vertical-align:top}
.spectable th{font-weight:600;color:var(--ink-3);width:44%;white-space:nowrap}
.spectable td{color:var(--ink)}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
.compat{margin-top:1rem}
.compat h3{margin:0 0 .6rem}
.compat-list{display:flex;flex-wrap:wrap;gap:.5rem}
.compat-list a,.compat-list span{display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--t-xs);padding:.42rem .75rem;border-radius:100px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);
  text-decoration:none}
.compat-list a:hover{border-color:var(--accent-400);background:var(--accent-050);
  color:var(--navy-800)}
.compat-list b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}

/* Directions and handling warnings — chemistry products only */
.steps{margin:.9rem 0 0;padding-left:1.3rem;display:grid;gap:.65rem}
.steps li{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;padding-left:.2rem}
.cautionbox{display:flex;gap:1rem;align-items:flex-start;background:#FFF9EC;
  border:1px solid #EBD6A4;border-left:3px solid #D9A520;border-radius:var(--r-sm);
  padding:1.1rem 1.3rem}
.cautionbox svg{width:22px;height:22px;color:#8A6A12;flex:none;margin-top:.15rem}
.cautionbox h2{margin:0 0 .4rem;color:#6B4E0C}
.cautionbox ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.cautionbox li{font-size:var(--t-sm);color:#6B4E0C;line-height:1.55}

@media (max-width:980px){
  .pdet-grid{grid-template-columns:1fr}
  .pdet-hero{grid-template-columns:1fr}
  .pdet-shot{max-width:420px}
  .reco{grid-template-columns:auto 1fr}
  .reco-cta{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:720px){
  .pbar-toggle{display:inline-flex;justify-content:center}
  /* Search on its own row, then the family select and the category toggle
     share the next one — deterministic instead of relying on wrap. */
  .pbar-row{display:grid;grid-template-columns:1fr auto;gap:.55rem}
  .psearch{grid-column:1/-1}
  .pfam,.pfam select{min-width:0;width:100%}
  .pchips{display:none}
  .pchips.is-open{display:flex}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.8rem}
  .pcard-body{padding:.8rem .85rem 1rem}
  .pcard-desc{-webkit-line-clamp:2;font-size:.8rem}
  .pcard-actions{flex-direction:column;gap:.4rem}
  .pcard-actions .btn{width:100%}
  .reco{grid-template-columns:1fr;padding:1.4rem}
  .spectable th{width:50%;white-space:normal}
}

/* ── Reserved product photograph ─────────────────────────────────────────────
   Shown until the manufacturer's official product photograph is supplied.
   Occupies exactly the same square the real picture will, so dropping the
   files in shifts nothing on the page. Nothing is substituted in the meantime:
   no stock photograph, no generated image, no picture of a different machine.
   Mirrors .brand-logo.is-slot, which does the same job for brand marks. */
.pshot-slot{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.45rem;aspect-ratio:1/1;width:100%;
  background:var(--paper-2);border:1.5px dashed var(--line-2);
  border-radius:var(--r-sm);padding:1rem;text-align:center}
.pshot-slot-name{font-family:var(--ff-head);font-weight:800;font-size:.875rem;
  letter-spacing:-.015em;color:var(--navy-800);line-height:1.2}
.pshot-slot-note{font-size:.625rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.pcard-media .pshot-slot{border:0;border-radius:0;background:var(--paper-2)}
.pdet-shot .pshot-slot{border:0;border-radius:0}
.pdet-shot .pshot-slot .pshot-slot-name{font-size:1.0625rem}

/* Named manufacturer technologies, listed only where the source names them */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0}
.chips li{font-family:var(--ff-head);font-weight:700;font-size:.78125rem;
  letter-spacing:.01em;color:var(--navy-800);background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;padding:.3rem .72rem}

/* Manufacturer article numbers, as published */
.artlist{list-style:none;margin:.85rem 0 0;display:grid;gap:.3rem}
.artlist li{font-size:.8125rem;line-height:1.45;color:var(--ink-2);
  font-variant-numeric:tabular-nums;padding-left:.9rem;position:relative}
.artlist li::before{content:"";position:absolute;left:0;top:.55em;width:4px;
  height:4px;border-radius:50%;background:var(--line-2)}

/* A range card's button carries the range name, and some names are long
   ("Ask us about Personalized Table Napkins"). With six ranges the grid column
   is narrower than that button's single line, so let it wrap rather than push
   the page sideways. */
.brandcard-foot .btn{white-space:normal;text-align:center;max-width:100%}

/* Machine specifications are published as multi-variant strings — a single
   cell can read "43: 1290 m/h | 50: 1500 m/h". Let long values break inside
   the cell, and let the box scroll as a last resort, so a specification can
   never widen the page. */
.spectable{table-layout:fixed;width:100%}
/* The original spec labels were short ("Ply", "Pack"). Machine datasheets use
   long ones ("Machine weight ready for use (including water)"), so the label
   column has to wrap — left on nowrap it printed straight over its own value. */
.spectable th{white-space:normal;width:46%}
.spectable th,.spectable td{overflow-wrap:anywhere;word-break:normal;
  vertical-align:top}
.specbox{overflow-x:auto}

/* Compact caution used inside the specifications panel */
.cautionbox-sm{margin:0 0 .9rem;padding:.7rem .8rem;gap:.6rem;font-size:.8125rem}
.cautionbox-sm p{margin:0;line-height:1.5}

/* Manufacturer model / accessory tables, printed as the datasheet prints them */
.tablewrap{overflow-x:auto;margin-top:.9rem}
.codetable{width:100%;border-collapse:collapse;font-size:.8125rem}
.codetable th{text-align:left;font-family:var(--ff-head);font-weight:700;
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:.45rem .6rem .45rem 0;border-bottom:1px solid var(--line-2)}
.codetable td{padding:.5rem .6rem .5rem 0;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.45}
.codetable td:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;
  padding-right:0}
.codetable tr:last-child td{border-bottom:0}
.codetable .muted{color:var(--ink-3);font-style:italic;white-space:normal}

/* The datasheet's own write-up */
.explain{margin-top:.9rem;display:grid;gap:1.05rem}
.explain h3{margin:0 0 .3rem}
.explain p{margin:0;line-height:1.6}

/* ── Manufactured range: the blocks a distributed range does not need ────── */
.whygrid{display:grid;gap:1.1rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.whycard{background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.4rem}
.whycard-ic{width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:#fff;
  border:1px solid var(--line);color:var(--navy-700);margin-bottom:.85rem}
.whycard h3{margin:0 0 .45rem}
.whycard p{margin:0;font-size:.875rem;line-height:1.6;color:var(--ink-2)}

.stepgrid{list-style:none;counter-reset:none;margin:2rem 0 0;padding:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.stepcard{display:flex;gap:.85rem;align-items:flex-start;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.2rem}
.stepcard-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--navy-900);color:#fff;font-family:var(--ff-head);
  font-weight:800;font-size:.8125rem;display:flex;align-items:center;
  justify-content:center}
.stepcard h3{margin:0 0 .35rem}
.stepcard p{margin:0;font-size:.8375rem;line-height:1.55;color:var(--ink-2)}

.ordergrid{display:grid;gap:1.1rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ordercard{background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.5rem}
.ordercard h3{margin:0 0 1rem}
.ordercard dl{margin:0;display:grid;gap:.75rem}
.ordercard dt{font-family:var(--ff-head);font-weight:700;font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ordercard dd{margin:.2rem 0 0;font-size:.875rem;line-height:1.55;
  color:var(--ink)}
.ordercard dd ul{margin:0;padding-left:1.1rem}
.ordercard dd li{margin:.15rem 0}

.applist{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:.45rem}
.applist li{font-family:var(--ff-head);font-weight:700;font-size:.8125rem;
  color:var(--navy-800);background:var(--paper-2);border:1px solid var(--line);
  border-radius:100px;padding:.38rem .85rem}

/* ── Product configurator ────────────────────────────────────────────────── */
.cfg{margin-top:1.6rem}
.cfg-group{margin-bottom:1.1rem}
.cfg-label{font-family:var(--ff-head);font-weight:700;font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 .45rem}
.cfg-opts{display:flex;flex-wrap:wrap;gap:.4rem}
.cfg-opt{font-family:var(--ff-head);font-weight:700;font-size:.8125rem;
  color:var(--navy-800);background:#fff;border:1.5px solid var(--line-2);
  border-radius:100px;padding:.45rem .95rem;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.cfg-opt:hover:not(:disabled){border-color:var(--navy-700)}
.cfg-opt.is-on{background:var(--navy-900);border-color:var(--navy-900);
  color:#fff}
.cfg-opt:disabled,.cfg-opt.is-off{opacity:.38;cursor:not-allowed;
  text-decoration:line-through;background:var(--paper-2)}
.cfg-opt:focus-visible{outline:2px solid var(--navy-700);outline-offset:2px}

.cfg-out{margin-top:1.35rem;padding:1rem 1.1rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-md)}
.cfg-pack{display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
.cfg-pack span{display:block;font-family:var(--ff-head);font-weight:700;
  font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.cfg-pack b{display:block;margin-top:.2rem;font-family:var(--ff-head);
  font-weight:800;font-size:1.0625rem;color:var(--navy-900);
  font-variant-numeric:tabular-nums}
.cfg-sku{margin:.85rem 0 0;font-size:.8125rem;color:var(--ink-2);
  padding-top:.7rem;border-top:1px solid var(--line)}
.cfg-sku b{font-variant-numeric:tabular-nums;color:var(--navy-900)}
.cfg-sku .muted{color:var(--ink-3);font-style:italic}

/* Until the script runs there is nothing to interact with, so the controls
   stay hidden and the page relies on the full configuration table below. */
.cfg .cfg-group,.cfg .cfg-out{display:none}
.cfg.is-live .cfg-group{display:block}
.cfg.is-live .cfg-out{display:block}
.cfgtable td:last-child{white-space:normal}
.cfg-shotnote{margin:0 0 .8rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--line);font-size:.78125rem;line-height:1.5;
  color:var(--ink-3);font-style:italic}

/* ══ BRAND ARCHITECTURE ═════════════════════════════════════════════════════
   The Brands page separates brands BVTC distributes from the one range it
   manufactures. Three pieces do that work: a rule that introduces each group,
   a grid of the customer-facing brands carried under a partner, and a
   differentiated treatment for BVTC's own line. */

/* Group heading — the divider between "distributed" and "our own". */
.sectionrule{border-top:2px solid var(--navy-800);padding-top:1.4rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);max-width:74ch}
.sectionrule .h2{margin-top:.5rem;font-size:clamp(1.5rem,1.2rem + .9vw,2.05rem)}
.sectionrule .lede{margin-top:.75rem}

/* The brands carried under a partner. auto-fit keeps the row full at every
   width without a breakpoint per column count. */
.subbrand-wrap{margin:clamp(2.5rem,5vw,3.75rem) 0 clamp(3.5rem,7vw,5.5rem)}
.subbrand-wrap .eyebrow{margin-bottom:1.25rem}
.subbrand-grid{display:grid;gap:clamp(.9rem,2vw,1.35rem);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.subbrand{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.25rem,2.5vw,1.6rem);transition:border-color .18s,box-shadow .18s}
.subbrand:hover{border-color:var(--accent-200);box-shadow:var(--sh-2)}

/* Logo box. Identical height whether an official asset is present or the name
   is set in type, so the row never goes ragged and no mark is ever stretched. */
/* A fixed band, so every card's heading starts on the same line whatever
   shape the mark inside is. --lh is set per logo by build/brands.py to even
   out the optical weight of square marks against long wordmarks; width stays
   auto, so the aspect ratio is the file's own and cannot be squashed. */
.subbrand-logo{height:50px;display:flex;align-items:center;margin-bottom:1rem}
.subbrand-logo img{height:var(--lh,44px);width:auto;max-width:190px;
  max-height:100%;object-fit:contain;object-position:left center}
.subbrand-name{font-family:var(--ff-head);font-size:1.02rem;font-weight:800;
  letter-spacing:-.01em;color:var(--navy-900);margin:0}
.subbrand-name sup{font-size:.55em;font-weight:700;top:-.6em}
/* When no official logo has been supplied the heading carries the brand name
   on its own, set at logo scale. It occupies the same 44px band a logo would,
   so a row mixing the two treatments still lines up. */
.subbrand-name.is-word{height:50px;display:flex;align-items:center;
  margin-bottom:1rem;font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);
  letter-spacing:-.025em;color:var(--navy-800);line-height:1}
.subbrand-name.is-word sup{font-size:.42em;font-weight:700;
  align-self:flex-start;margin:.25em 0 0 .1em}
.subbrand-desc{font-size:.72rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-700);margin:.3rem 0 .7rem}
.subbrand-blurb{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0}
.subbrand-fams-l{font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:1rem 0 .3rem}
.subbrand-fams{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.35rem}
.subbrand-fams li{font-size:.75rem;font-weight:600;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--line);
  padding:.2rem .55rem;border-radius:100px}
/* Pushed to the bottom so every card's link sits on the same line. */
.subbrand-cta{margin-top:auto;padding-top:1.1rem;font-family:var(--ff-head);
  font-size:.875rem;font-weight:800;color:var(--accent-700);
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.subbrand-cta:hover{color:var(--accent-800);text-decoration:underline}
.subbrand-cta svg{width:16px;height:16px;transition:transform .18s}
.subbrand-cta:hover svg{transform:translateX(3px)}

/* BVTC's own range. Navy ground and a distinct pill, so a reader can see at a
   glance that this card is a different kind of thing from the ones above. */
.ownbrand{background:var(--navy-900);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.75rem,4vw,3.25rem);overflow:hidden}
.ownbrand .h2,.ownbrand .brand-corp{color:#fff}
.ownbrand .lede,.ownbrand .checks span{color:rgba(255,255,255,.82)}
.ownbrand .checks svg{color:var(--accent-300)}
.ownbrand .brand-logo img{filter:brightness(0) invert(1)}
.pill-own{color:var(--accent-200);background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22)}
.ownbrand .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
.ownbrand .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}

@media (max-width:860px){
  .ownbrand{padding:clamp(1.5rem,5vw,2rem)}
}

/* ══ CONCENTRATE CHEMISTRY ══════════════════════════════════════════════════
   Dosing, contact time and handling for the Diversey Professional range.
   These are working instructions, so they are set to be read at a glance on a
   phone held in one hand — not squeezed into the specification table. */

/* Dosing written into the directions: the ratio first, then the sentence it
   came from, verbatim. */
.doselist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.doselist li{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;
  align-items:baseline;padding:.85rem 1rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.dose-ratio{font-family:var(--ff-head);font-weight:800;color:var(--navy-900);
  font-size:.975rem;white-space:nowrap}
.dose-stmt{color:var(--ink-2);font-size:.9rem;line-height:1.55}
@media (max-width:560px){
  .doselist li{grid-template-columns:1fr}
  .dose-ratio{white-space:normal}
}

/* Dosing the sheet prints as a table. */
.dosetable{width:100%;border-collapse:collapse;font-size:.9375rem}
.dosetable th,.dosetable td{padding:.6rem .8rem;text-align:left;
  border-bottom:1px solid var(--line)}
.dosetable thead th{font-family:var(--ff-head);font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid var(--navy-800)}
.dosetable tbody th{font-weight:600;color:var(--ink-1)}
.dosetable td{font-family:var(--ff-head);font-weight:700;color:var(--navy-900)}

/* Contact time — the one number a cleaner must not misread. */
.ctimebox{display:flex;gap:1rem;align-items:flex-start;
  padding:1.1rem 1.25rem;border-radius:var(--r-md);
  background:var(--accent-050);border:1px solid var(--accent-100)}
.ctimebox svg{width:26px;height:26px;flex:none;color:var(--accent-700);
  margin-top:.15rem}
.ctime-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-700);margin:0}
.ctime-val{font-family:var(--ff-head);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  font-weight:800;color:var(--navy-900);margin:.15rem 0 0;line-height:1.1}
.ctime-ctx{font-size:.875rem;color:var(--ink-2);margin:.4rem 0 0;line-height:1.55}

/* A photograph whose source document qualifies it says so, under the image. */
.shot-note{margin:.7rem 0 0;font-size:.78rem;line-height:1.5;color:var(--ink-3);
  max-width:42ch}