/* ==========================================================================
   Nootz Security Services — design system
   "Signal" : ink black + signal yellow, viewfinder brackets, hard edges.
   ========================================================================== */

/* ── Fonts (self-hosted, no external requests) ─────────────────────────── */
@font-face{font-family:Archivo;src:url(../fonts/archivo-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Anton;src:url(../fonts/anton-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root{
  --ink:#0B0B0D;
  --ink-2:#15161A;
  --ink-3:#1E2026;
  --line:#2A2D35;
  --paper:#F7F7F5;
  --paper-2:#EDEDE9;
  --white:#fff;
  --signal:#FFCD18;
  --signal-dk:#E0B000;
  --signal-soft:rgba(255,205,24,.14);
  --text:#16171B;
  --muted:#5C6068;
  --muted-dk:#9AA0AB;
  --ok:#1FA971;
  --err:#D8483B;
  --display:Archivo,'Helvetica Neue',Arial,sans-serif;
  --headline:Anton,'Archivo Narrow',Archivo,'Arial Narrow',Arial,sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --wrap:1200px;
  --r:4px;
  --shadow:0 1px 2px rgba(11,11,13,.06),0 12px 32px -12px rgba(11,11,13,.18);
  --shadow-lg:0 2px 4px rgba(11,11,13,.06),0 28px 60px -20px rgba(11,11,13,.30);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::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(--text);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
/* Inline icons carry no intrinsic size — give them one, then override per use. */
svg{display:block;width:20px;height:20px;flex:none}
picture{display:contents}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--paper-2);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
::selection{background:var(--signal);color:var(--ink)}

/* ── Type ──────────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;line-height:1.06;
  letter-spacing:-.022em;margin:0 0 .55em;color:var(--ink);text-wrap:balance}
h1,h2{font-family:var(--headline);font-weight:400;text-transform:uppercase;
  line-height:.96;letter-spacing:.004em}
h1{font-size:clamp(2.7rem,6.6vw,5.1rem)}
h2{font-size:clamp(2.05rem,4.3vw,3.4rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;letter-spacing:-.014em}
h4{font-size:1.06rem;font-weight:700;letter-spacing:-.006em}
h5{font-size:.95rem;font-weight:700}
p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:650;color:var(--ink)}
.lede{font-size:clamp(1.06rem,1.6vw,1.24rem);color:var(--muted);line-height:1.6;max-width:64ch}

.eyebrow{font-family:var(--display);font-size:.735rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.6rem;margin:0 0 1.05rem}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--signal);flex:none}
.on-dark .eyebrow,.dark .eyebrow{color:var(--signal)}

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{position:relative}
.sec{padding-block:clamp(3.6rem,7vw,6.4rem)}
.sec-sm{padding-block:clamp(2.6rem,4.5vw,4rem)}
.dark{background:var(--ink);color:#D9DCE2}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5{color:#fff}
.dark .lede{color:#A8AEBA}
.dark a{color:#fff}
.ink2{background:var(--ink-2)}
.paper2{background:var(--paper-2)}
.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.9rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4.2rem);align-items:center}
.split.rev>*:first-child{order:2}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-inline:auto}
.narrow{max-width:820px;margin-inline:auto}

/* ── Viewfinder bracket motif ──────────────────────────────────────────── */
.bracket{position:relative}
.bracket::before,.bracket::after{content:"";position:absolute;width:22px;height:22px;
  border:3px solid var(--signal);pointer-events:none;z-index:2}
.bracket::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bracket::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{--bg:var(--signal);--fg:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;padding:.94rem 1.6rem;background:var(--bg);color:var(--fg);font-family:var(--display);
  font-weight:700;font-size:.9rem;letter-spacing:.055em;text-transform:uppercase;text-decoration:none;
  border:2px solid var(--bg);border-radius:var(--r);cursor:pointer;transition:.18s ease;
  line-height:1;white-space:nowrap}
.btn:hover{--bg:var(--signal-dk);transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(224,176,0,.75)}
.btn:active{transform:translateY(0)}
.btn-dark{--bg:var(--ink);--fg:#fff}
.btn-dark:hover{--bg:var(--ink-3);box-shadow:0 10px 24px -12px rgba(11,11,13,.6)}
.btn-ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{--bg:var(--ink);--fg:#fff;box-shadow:none}
.dark .btn-ghost,.hero .btn-ghost,.banner .btn-ghost,.callbar .btn-ghost{--fg:#fff;border-color:rgba(255,255,255,.55)}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.banner .btn-ghost:hover,.callbar .btn-ghost:hover{--bg:#fff;--fg:var(--ink);border-color:#fff}
.btn-sm{padding:.66rem 1.05rem;font-size:.78rem}
.btn-lg{padding:1.12rem 2rem;font-size:.98rem}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.center .btn-row{justify-content:center}

/* ── Header ────────────────────────────────────────────────────────────── */
.topbar{background:var(--ink-2);color:#A8AEBA;font-size:.8rem;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:40px;flex-wrap:wrap}
.topbar a{color:#D9DCE2;text-decoration:none}
.topbar a:hover{color:var(--signal)}
.topbar-l,.topbar-r{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.topbar b{color:var(--signal);font-weight:600}

.site-head{position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.head-in{display:flex;align-items:center;gap:1.4rem;min-height:74px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;padding:.4rem 0}
.brand img{height:38px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav>li{list-style:none;position:relative}
.nav{padding:0;margin-block:0;margin-left:auto}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:.34rem;padding:.72rem .78rem;
  background:none;border:0;color:#E3E6EC;font-family:var(--display);font-weight:600;font-size:.845rem;
  letter-spacing:.035em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:var(--r);
  white-space:nowrap}
/* Between the mobile breakpoint and a roomy desktop the seven top-level items
   need to fit on one line without wrapping — tighten the rhythm, not the words. */
@media (max-width:1180px){
  .nav>li>a,.nav>li>button{padding:.72rem .52rem;font-size:.8rem;letter-spacing:.02em}
  .nav>li.active>a::after{left:.52rem;right:.52rem}
}
/* Narrow laptops: navigation matters more than the header button, and every
   page carries the same call to action in the hero, so drop the button first. */
@media (max-width:1100px) and (min-width:961px){
  .head-cta .btn{display:none}
}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.open>button{color:var(--signal);background:rgba(255,255,255,.05)}
.nav>li.active>a{color:var(--signal)}
.nav>li.active>a::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.32rem;height:2px;background:var(--signal)}
.caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:.2s}
.nav>li.open .caret{transform:rotate(-135deg) translate(-3px,-3px)}
.submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:302px;background:#fff;
  border:1px solid var(--paper-2);border-top:3px solid var(--signal);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:.5rem;margin:0;list-style:none;display:none;z-index:70}
.nav>li.open .submenu{display:block}
.submenu a{display:block;padding:.58rem .72rem;font-size:.9rem;color:var(--text);
  text-decoration:none;border-radius:3px;line-height:1.35}
.submenu a:hover{background:var(--signal-soft);color:var(--ink)}
/* ── Shop mega menu ────────────────────────────────────────────────────
   The catalogue is 20,000 lines across 83 distributor categories. A single
   column dropdown cannot carry that, so the shop gets a full-width panel
   grouped the way a shopper thinks, in the same ink/signal palette. */
/* The panel hangs off the Shop item rather than the page edge. With the item
   mid-nav, a panel pinned to the left gutter can only be reached by dragging
   the pointer across four other menus, every one of which takes over. Aligned
   to the item's right edge it fits at every width and the journey into it is
   straight down. */
.nav>li.has-mega{position:relative}

/* The panel itself sits under the header and carries its own dimmer as a
   pseudo-element, so the page behind recedes without any extra markup. */
.mega{--rail-w:270px;--pane-w:300px;
  position:absolute;top:100%;left:auto;right:0;width:max-content;display:none;z-index:70}
.nav>li.open .mega{display:block}
/* pointer-events:none matters: the dimmer covers the header too, and without
   it the nav link that opened the menu is no longer hoverable or clickable. */
.mega::before{content:"";position:fixed;inset:0;background:rgba(9,11,14,.55);
  z-index:-1;pointer-events:none}

/* The open menu is one panel: a rail, one pane beside it, and a strip across
   the foot of both, all aligned to the page's own left gutter. The columns are
   sized from variables so the foot strip can be exactly as wide as the two of
   them and never stretch across the page. */
.mega-panel{margin:0}
.mega-cols{position:relative;display:flex;align-items:flex-start}

/* Column one — the departments. */
.mega-rail{flex:none;width:var(--rail-w);background:#fff;border-top:3px solid var(--signal);
  box-shadow:var(--shadow-lg);max-height:min(72vh,620px);overflow-y:auto;padding:.4rem 0}
.mega-rail ul{list-style:none;margin:0;padding:0}
.mdept{display:flex;align-items:center;gap:.6rem;width:100%;padding:.58rem 1rem;
  background:none;border:0;text-align:left;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:.875rem;font-weight:500;color:var(--text);line-height:1.3}
.mdept svg{width:17px;height:17px;flex:none;color:var(--muted)}
.mdept span{flex:1}
.mchev{flex:none;width:7px;height:7px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
.mdept:hover,.mdept:focus-visible,.mdept.on{background:var(--signal);color:var(--ink);outline:0}
.mdept:hover svg,.mdept.on svg{color:var(--ink)}
.mdept:hover .mchev,.mdept.on .mchev{border-color:var(--ink)}
.mdept-gap{border-top:1px solid var(--paper-2);margin-top:.4rem;padding-top:.4rem}
.mdept-go{font-weight:700}

/* Column two — one department at a time. */
.mega-pane{flex:none;width:var(--pane-w);background:#fff;border-top:3px solid var(--signal);
  box-shadow:var(--shadow-lg);max-height:min(72vh,620px);overflow-y:auto;padding:0 0 .5rem}
.mega-pane[hidden]{display:none}
.mpane-head{display:flex;align-items:baseline;gap:.7rem;padding:.85rem 1rem .6rem;
  border-bottom:1px solid var(--paper-2);position:sticky;top:0;background:#fff;z-index:1}
.mpane-head b{flex:1;font-size:.875rem;line-height:1.3}
.mpane-head a{flex:none;font-size:.78rem;font-weight:700;color:var(--signal-dk);
  text-decoration:none;white-space:nowrap}
.mpane-head a:hover{text-decoration:underline}
.mback{display:none}
.mega-pane ul{list-style:none;margin:0;padding:.3rem 0}
.mega-pane a{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.46rem 1rem;font-size:.86rem;color:var(--text);text-decoration:none;line-height:1.35}
.mega-pane li a:hover{background:var(--paper-2);color:var(--signal-dk)}
.mega-pane a span{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}

/* The one thing worth saying in a shop menu. */
.mega-foot{width:calc(var(--rail-w) + var(--pane-w));margin:0;padding:.7rem 1rem;
  border-top:1px solid rgba(255,255,255,.12);background:var(--ink);color:#A8AEBA;
  font-size:.82rem;line-height:1.5;box-shadow:var(--shadow-lg)}
.mega-foot b{color:var(--signal)}

.head-cta{display:flex;align-items:center;gap:.6rem;flex:none;margin-left:.5rem}
.cart-pill{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.62rem .85rem;
  border:1px solid var(--line);border-radius:var(--r);color:#E3E6EC;text-decoration:none;font-size:.82rem;
  font-family:var(--display);font-weight:600;letter-spacing:.04em}
.cart-pill:hover{border-color:var(--signal);color:var(--signal)}
.cart-count{background:var(--signal);color:var(--ink);border-radius:99px;min-width:19px;height:19px;
  display:inline-grid;place-items:center;font-size:.7rem;font-weight:800;padding:0 5px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.6rem;cursor:pointer}
.burger span{width:24px;height:2px;background:#fff;transition:.22s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.68}
.hero{display:flex;align-items:flex-end;min-height:clamp(520px,78vh,780px)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(11,11,13,.70) 0%,rgba(11,11,13,.28) 30%,rgba(11,11,13,.92) 100%),
  linear-gradient(96deg,rgba(11,11,13,.84) 0%,rgba(11,11,13,.40) 60%,rgba(11,11,13,.14) 100%)}
.hero-in{padding-block:clamp(3.4rem,8vw,6.4rem);max-width:880px;width:100%}
.hero h1{color:#fff}
.hero h1 em,.banner h1 em,.statement em{font-style:normal;color:var(--signal)}
.hero .lede{color:#B9BFC9;margin-bottom:2rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.7rem}
.chip{display:inline-flex;align-items:center;gap:.42rem;padding:.4rem .78rem;border:1px solid rgba(255,255,255,.18);
  border-radius:99px;font-size:.78rem;font-weight:500;color:#D9DCE2;background:rgba(255,255,255,.04)}
.chip svg{width:13px;height:13px;color:var(--signal);flex:none}
.hero-stats{display:flex;gap:clamp(1.4rem,4vw,3.2rem);margin-top:2.6rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.13);flex-wrap:wrap}
.hero-stats div{min-width:96px}
.hero-stats b{display:block;font-family:var(--headline);font-size:clamp(1.6rem,3vw,2.15rem);
  font-weight:400;color:var(--signal);line-height:1;letter-spacing:.01em}
.hero-stats span{font-size:.8rem;color:#9AA0AB;letter-spacing:.02em}

/* ── Page banner (interior pages) ──────────────────────────────────────── */
.banner{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end}
.banner-bg{position:absolute;inset:0;z-index:-2}
.banner-bg img{width:100%;height:100%;object-fit:cover;opacity:.66}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(11,11,13,.72) 0%,rgba(11,11,13,.34) 34%,rgba(11,11,13,.90) 100%),
  linear-gradient(96deg,rgba(11,11,13,.86) 0%,rgba(11,11,13,.42) 62%,rgba(11,11,13,.18) 100%)}
.banner-in{padding-block:clamp(3.2rem,7vw,5.4rem);max-width:900px;width:100%}
.banner-big{min-height:clamp(440px,64vh,660px)}
.banner-big .banner-in{padding-block:clamp(3.6rem,8vw,6rem);max-width:940px}
.banner-big h1{font-size:clamp(2.9rem,7vw,5.4rem)}
.banner h1{color:#fff;font-size:clamp(2.3rem,5vw,4rem)}
.banner .lede{color:#C6CBD4;margin-bottom:0;max-width:60ch}
.banner .btn-row{margin-top:1.9rem}
/* A hero band with no photo still needs presence. */
.banner:not(:has(.banner-bg))::after{background:
  radial-gradient(120% 140% at 12% 0%,rgba(255,205,24,.10),transparent 58%)}

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumbs{font-size:.78rem;color:#8D939E;margin-bottom:1.15rem;letter-spacing:.02em}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.42rem;padding:0;margin:0}
.crumbs a{color:#B9BFC9;text-decoration:none}
.crumbs a:hover{color:var(--signal)}
.crumbs li+li::before{content:"/";margin-right:.42rem;color:#4A4F59}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);padding:1.65rem;
  position:relative;transition:.22s ease;height:100%;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#DCDCD6}
.card h3{margin-bottom:.55rem}
.card p{color:var(--muted);font-size:.955rem;margin-bottom:1rem}
.card .more{margin-top:auto;font-family:var(--display);font-weight:700;font-size:.795rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem}
.card .more::after{content:"→";transition:.2s}
.cart-pill svg{width:17px;height:17px}
.card:hover .more::after{transform:translateX(4px)}
.card .more:hover{color:var(--signal-dk)}
.dark .card{background:var(--ink-2);border-color:var(--line)}
.dark .card:hover{border-color:#3A3E48}
.dark .card p{color:#9AA0AB}
.dark .card .more{color:var(--signal)}

.card-svc{padding-top:1.9rem}
.card-svc::before{content:"";position:absolute;top:0;left:0;width:52px;height:3px;background:var(--signal)}
.ico{width:44px;height:44px;display:grid;place-items:center;background:var(--signal-soft);
  border-radius:var(--r);margin-bottom:1.05rem;color:var(--ink)}
.ico svg{width:23px;height:23px}
.dark .ico{background:rgba(255,205,24,.16);color:var(--signal)}

.card-img{padding:0;overflow:hidden}
.card-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:.4s ease}
.card-img:hover img{transform:scale(1.045)}
.card-img .card-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}

/* ── Feature list ──────────────────────────────────────────────────────── */
.ticks{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.72rem}
.ticks li{position:relative;padding-left:1.85rem;font-size:.985rem;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.44rem;width:16px;height:9px;
  border-left:2.5px solid var(--signal-dk);border-bottom:2.5px solid var(--signal-dk);
  transform:rotate(-45deg)}
.dark .ticks li::before{border-color:var(--signal)}
.ticks.two{grid-template-columns:1fr 1fr;gap:.72rem 1.6rem}
.ticks li b{display:block;font-weight:650;color:var(--ink)}
.dark .ticks li b{color:#fff}

/* ── Numbered process ──────────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:1.2rem}
.step{counter-increment:s;position:relative;padding:1.5rem 1.5rem 1.5rem 4.6rem;background:#fff;
  border:1px solid var(--paper-2);border-radius:var(--r)}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;left:1.5rem;top:1.35rem;
  font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--signal-dk);line-height:1}
.step h3{font-size:1.06rem;margin-bottom:.35rem}
.step p{color:var(--muted);font-size:.94rem;margin:0}
.dark .step{background:var(--ink-2);border-color:var(--line)}
.dark .step::before{color:var(--signal)}

/* ── Stats band ────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stats div{background:var(--ink);padding:1.9rem 1.2rem;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.5rem);
  font-weight:800;color:var(--signal);line-height:1;margin-bottom:.35rem}
.stats span{font-size:.83rem;color:#9AA0AB}

/* ── Testimonials ──────────────────────────────────────────────────────── */
.quote{background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);padding:1.75rem;
  display:flex;flex-direction:column;height:100%}
.quote .stars{color:var(--signal-dk);letter-spacing:.14em;font-size:.92rem;margin-bottom:.85rem}
.quote blockquote{margin:0 0 1.15rem;font-size:.98rem;line-height:1.62;color:var(--text)}
.quote cite{margin-top:auto;font-style:normal;font-size:.86rem;color:var(--muted);
  border-top:1px solid var(--paper-2);padding-top:.9rem;display:block}
.quote cite b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:.94rem;letter-spacing:-.005em}
.dark .quote{background:var(--ink-2);border-color:var(--line)}
.dark .quote blockquote{color:#D9DCE2}
.dark .quote cite{color:#8D939E;border-top-color:var(--line)}
.dark .quote .stars{color:var(--signal)}

/* ── Brand logo strip ──────────────────────────────────────────────────── */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.6rem,4vw,3.4rem)}
.logos img{height:34px;width:auto;opacity:.62;filter:grayscale(1);transition:.25s}
.logos a:hover img{opacity:1;filter:none}
.dark .logos img{filter:grayscale(1) brightness(2.4);opacity:.55}
.dark .logos a:hover img{filter:none;opacity:1}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--paper-2)}
.faq details{border-bottom:1px solid var(--paper-2)}
.faq summary{list-style:none;cursor:pointer;padding:1.22rem 2.6rem 1.22rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.03rem;color:var(--ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.52rem;width:12px;height:12px;
  border-right:2.5px solid var(--signal-dk);border-bottom:2.5px solid var(--signal-dk);
  transform:rotate(45deg);transition:.25s}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.72rem}
.faq summary:hover{color:var(--signal-dk)}
.faq .a{padding:0 2.6rem 1.4rem 0;color:var(--muted);font-size:.985rem}
.faq .a p:last-child{margin-bottom:0}
.dark .faq,.dark .faq details{border-color:var(--line)}
.dark .faq summary{color:#fff}
.dark .faq .a{color:#9AA0AB}

/* ── Prose block (long-form page copy) ─────────────────────────────────── */
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:1.9rem}
.prose>*:first-child{margin-top:0}
.prose ul{padding-left:1.15rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);
  text-decoration-thickness:2px;text-underline-offset:3px;font-weight:500}
.prose a:hover{background:var(--signal-soft)}
.dark .prose a{color:#fff;text-decoration-color:var(--signal)}

/* ── Callout ───────────────────────────────────────────────────────────── */
.callout{background:var(--signal-soft);border-left:4px solid var(--signal);padding:1.35rem 1.5rem;
  border-radius:0 var(--r) var(--r) 0;margin:1.9rem 0}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-card{background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.3rem);box-shadow:var(--shadow)}
.dark .form-card{background:var(--ink-2);border-color:var(--line);box-shadow:none}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.815rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;font-family:var(--display);margin-bottom:.42rem;color:var(--ink)}
.dark .field label{color:#C9CED7}
.field .req{color:var(--err)}
.field input,.field select,.field textarea{width:100%;padding:.82rem .95rem;background:#fff;
  border:1.5px solid #D6D6D0;border-radius:var(--r);font-size:.96rem;transition:.16s;font-family:var(--body)}
.dark .field input,.dark .field select,.dark .field textarea{background:var(--ink-3);
  border-color:var(--line);color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--signal);
  box-shadow:0 0 0 3px var(--signal-soft)}
.field textarea{min-height:118px;resize:vertical}
.field small{display:block;margin-top:.32rem;font-size:.78rem;color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.05rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.78rem;color:var(--muted);margin-top:.9rem;line-height:1.5}
.dark .form-note{color:#8D939E}
.form-note a{color:inherit}
.alert{padding:.95rem 1.15rem;border-radius:var(--r);margin-bottom:1.15rem;font-size:.92rem;
  border-left:4px solid}
.alert-ok{background:rgba(31,169,113,.1);border-color:var(--ok);color:#0E6B45}
.alert-err{background:rgba(216,72,59,.09);border-color:var(--err);color:#9B2B20}
.dark .alert-ok{color:#7BE0B4}
.dark .alert-err{color:#F09A90}

/* ── Contact strip / CTA ───────────────────────────────────────────────── */
.cta-band{background:var(--signal);color:var(--ink)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.8rem;
  flex-wrap:wrap;padding-block:clamp(2.2rem,4vw,3rem)}
.cta-band h2{margin:0;font-size:clamp(1.5rem,2.8vw,2.15rem);max-width:22ch}
.cta-band p{margin:.5rem 0 0;color:#4A3E00;font-weight:500;max-width:52ch}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-foot{background:var(--ink);color:#9AA0AB;font-size:.905rem}
.foot-map iframe{width:100%;height:290px;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.85)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.4rem;
  padding-block:clamp(2.6rem,5vw,3.8rem)}
.foot-top h3{color:#fff;font-size:.815rem;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:1.05rem;font-family:var(--display)}
.foot-top ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.foot-top a{color:#9AA0AB;text-decoration:none}
.foot-top a:hover{color:var(--signal)}
.foot-brand img{height:40px;width:auto;max-width:100%;object-fit:contain;margin-bottom:1.15rem}
.foot-brand p{font-size:.905rem;line-height:1.6;max-width:34ch}
.nap{display:grid;gap:.6rem;margin-top:1.2rem;font-size:.9rem}
.nap a{display:flex;align-items:center;gap:.55rem}
.nap svg{width:17px;height:17px;color:var(--signal)}
.nap a{color:#fff;text-decoration:none;font-weight:500}
.nap a:hover{color:var(--signal)}
.socials{display:flex;gap:.6rem;margin-top:1.4rem}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--r);color:#C9CED7;transition:.2s}
.socials a:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.socials svg{width:17px;height:17px}
.foot-bot{border-top:1px solid var(--line);padding-block:1.4rem;display:flex;
  justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.83rem;color:#6E747E}
.foot-bot a{color:#9AA0AB;text-decoration:none}
.foot-bot a:hover{color:var(--signal)}
.foot-bot ul{display:flex;gap:1.2rem;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.areas-line{font-size:.82rem;color:#6E747E;line-height:1.7;padding-block:1.3rem;
  border-top:1px solid var(--line)}
.areas-line a{color:#8D939E;text-decoration:none}
.areas-line a:hover{color:var(--signal)}

/* ── Sticky mobile call bar ────────────────────────────────────────────── */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);
  border-top:1px solid var(--line);padding:.55rem .7rem;gap:.55rem}
.callbar .btn{flex:1;padding:.85rem .6rem;font-size:.8rem}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.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}
.tag{display:inline-block;padding:.28rem .6rem;background:var(--signal-soft);color:#7A5F00;
  border-radius:3px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--display)}
.dark .tag{background:rgba(255,205,24,.16);color:var(--signal)}
.tag-green{background:rgba(31,169,113,.13);color:#0E6B45}
.tag-red{background:rgba(216,72,59,.12);color:#9B2B20}

/* ==========================================================================
   SHOP
   ========================================================================== */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:2.4rem;align-items:start}
.shop-side{position:sticky;top:96px}
.shop-side h3{font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:.7rem;border-bottom:2px solid var(--ink);margin-bottom:.9rem}
.shop-side ul{list-style:none;padding:0;margin:0 0 1.9rem;display:grid;gap:.15rem}
.shop-side a{display:flex;justify-content:space-between;gap:.6rem;padding:.46rem .6rem;
  font-size:.9rem;color:var(--muted);text-decoration:none;border-radius:3px}
.shop-side a:hover{background:var(--paper-2);color:var(--ink)}
.shop-side a.on{background:var(--ink);color:#fff;font-weight:600}
.shop-side a span{font-size:.78rem;opacity:.7}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.3rem}
.prod{background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.22s;position:relative}
.prod:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#DCDCD6}
.prod-img{aspect-ratio:4/3;background:var(--paper-2);display:grid;place-items:center;overflow:hidden;padding:1rem}
.prod-img img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.prod-body{padding:1.05rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.prod-brand{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  font-family:var(--display);font-weight:700}
.prod h3{font-size:.955rem;font-weight:600;line-height:1.38;margin:0;font-family:var(--body);
  letter-spacing:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod h3 a{text-decoration:none}
.prod h3 a:hover{color:var(--signal-dk)}
.prod-sku{font-size:.75rem;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prod-price{margin-top:auto;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.prod-price b{font-family:var(--display);font-size:1.28rem;font-weight:800;color:var(--ink);line-height:1}
.prod-price s{font-size:.85rem;color:var(--muted)}
.prod-price em{font-style:normal;font-size:.72rem;color:var(--muted)}
.stock{font-size:.76rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem}
.stock::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--ok)}
.stock.out{color:var(--muted)}
.stock.out::before{background:#B9BFC9}
.prod .btn{margin-top:.35rem}

.prod-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.prod-hero{background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);padding:2.4rem;
  display:grid;place-items:center;min-height:340px}
.prod-hero img{max-height:400px;width:auto;object-fit:contain}
.price-box{background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);padding:1.5rem;margin-block:1.5rem}
.price-lg{font-family:var(--display);font-size:2.3rem;font-weight:800;line-height:1;color:var(--ink)}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid #D6D6D0;border-radius:var(--r);
  overflow:hidden;width:fit-content}
.qty button{width:40px;height:44px;background:var(--paper-2);border:0;cursor:pointer;font-size:1.1rem;
  font-weight:700;line-height:1}
.qty button:hover{background:var(--signal)}
.qty input{width:56px;height:44px;border:0;text-align:center;font-weight:600;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.spec-table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:1rem}
.spec-table th,.spec-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--paper-2);vertical-align:top}
.spec-table th{width:34%;font-weight:600;color:var(--muted);font-size:.85rem}

.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-family:var(--display);font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:0 .9rem .8rem;border-bottom:2px solid var(--ink)}
.cart-table td{padding:1.05rem .9rem;border-bottom:1px solid var(--paper-2);vertical-align:middle}
.cart-table td:first-child,.cart-table th:first-child{padding-left:0}
.cart-table td:last-child,.cart-table th:last-child{padding-right:0;text-align:right}
.cart-thumb{width:66px;height:66px;background:var(--paper-2);border-radius:3px;padding:.4rem;
  display:grid;place-items:center;flex:none}
.cart-thumb img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.cart-line{display:flex;gap:.95rem;align-items:center}
.link-remove{background:none;border:0;color:var(--err);font-size:.8rem;cursor:pointer;
  text-decoration:underline;padding:0}
.totals{background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);padding:1.6rem;
  position:sticky;top:96px}
.totals dl{display:grid;grid-template-columns:1fr auto;gap:.7rem 1rem;margin:0 0 1.15rem}
.totals dt{color:var(--muted);font-size:.93rem}
.totals dd{margin:0;text-align:right;font-weight:600}
.totals .tot{border-top:2px solid var(--ink);padding-top:.95rem;margin-top:.25rem}
.totals .tot dt,.totals .tot dd{font-family:var(--display);font-size:1.16rem;font-weight:800;color:var(--ink)}
.pay-opts{display:grid;gap:.75rem;margin-block:1.15rem}
.pay-opt{display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem;border:1.5px solid #D6D6D0;
  border-radius:var(--r);cursor:pointer;background:#fff;transition:.16s}
.pay-opt:hover{border-color:var(--muted)}
.pay-opt input{margin-top:.28rem;accent-color:var(--signal-dk);width:17px;height:17px;flex:none}
.pay-opt.on{border-color:var(--signal);background:var(--signal-soft)}
.pay-opt b{display:block;font-family:var(--display);font-size:.96rem}
.pay-opt span{font-size:.85rem;color:var(--muted)}
.steps-bar{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}
.steps-bar div{flex:1;min-width:120px;padding:.75rem .9rem;background:#fff;border:1px solid var(--paper-2);
  border-radius:var(--r);font-size:.83rem;font-family:var(--display);font-weight:600;color:var(--muted)}
.steps-bar div.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.empty{text-align:center;padding:4rem 1rem;background:#fff;border:1px dashed #D6D6D0;border-radius:var(--r)}

.pager{display:flex;gap:.4rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.pager a,.pager span{padding:.6rem .95rem;border:1px solid var(--paper-2);border-radius:var(--r);
  text-decoration:none;font-size:.9rem;font-weight:600;background:#fff}
.pager a:hover{border-color:var(--ink)}
.pager .on{background:var(--ink);color:#fff;border-color:var(--ink)}
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.6rem;padding-bottom:1.1rem;border-bottom:1px solid var(--paper-2)}
.shop-bar form{display:flex;gap:.5rem;flex-wrap:wrap}
.shop-bar select,.shop-bar input{padding:.55rem .8rem;border:1.5px solid #D6D6D0;border-radius:var(--r);font-size:.88rem}
.shop-count{font-size:.88rem;color:var(--muted)}

/* ── Bleed band: text column + photograph running to the viewport edge ──
   The signature rhythm of the site. Alternating left/right down a page
   gives long pages momentum without a single extra kilobyte of imagery. */
.bleed{position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.6rem);min-height:clamp(400px,52vw,620px)}
.bleed-txt{max-width:590px;padding-block:clamp(3rem,6vw,5.2rem)}
.bleed-txt .lede{max-width:52ch}
.bleed-img{position:relative;align-self:stretch;min-height:300px}
.bleed-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Push the image past the wrapper to the true edge of the screen.
   --gutter is the distance from the wrapper's content box to the viewport
   edge: half the leftover width, plus the wrapper's own 20px padding. */
.bleed{--gutter:calc((100vw - min(100vw,var(--wrap))) / 2 + 20px)}
.bleed-img{margin-right:calc(-1 * var(--gutter))}
.bleed.rev .bleed-txt{order:2;justify-self:end}
.bleed.rev .bleed-img{order:1;margin-right:0;margin-left:calc(-1 * var(--gutter))}
.bleed .btn-row{margin-top:1.9rem}
.bleed-tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--signal);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.62rem 1.1rem}
.bleed.rev .bleed-tag{left:auto;right:0}

/* ── Capability list: a handful of lines, set large, nothing else ─────── */
.caplist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.caplist li{border-bottom:1px solid var(--line)}
.caplist a,.caplist>li>span{display:flex;align-items:baseline;gap:clamp(.9rem,2.4vw,2rem);
  padding:clamp(1.05rem,2.2vw,1.55rem) 0;text-decoration:none;color:inherit;transition:.18s ease}
.caplist a:hover{padding-left:.7rem;color:var(--signal)}
.caplist .num{font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.14em;
  color:var(--signal);flex:none;width:2.1rem}
.caplist .cap{font-family:var(--headline);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.32rem,2.9vw,2.05rem);line-height:1.02;letter-spacing:.006em;flex:1 1 auto}
.caplist .say{flex:0 1 42%;color:var(--muted-dk);font-size:.94rem;line-height:1.5}
.caplist a::after{content:"";width:11px;height:11px;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);flex:none;opacity:.55;align-self:center}
.paper .caplist,.caplist.light{border-color:var(--paper-2)}
.paper .caplist li,.caplist.light li{border-color:var(--paper-2)}
.caplist.light .say{color:var(--muted)}

/* ── Statement band: one very large line of type, nothing competing ───── */
.statement{font-family:var(--headline);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.75rem,4.2vw,3.15rem);line-height:1.02;letter-spacing:.006em;
  max-width:20ch;margin:0}
.statement em{font-style:normal;color:var(--signal)}

/* ── Delivery estimator (cart + checkout) ─────────────────────────────── */
.ship-picker{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 1rem;font-size:.88rem}
.ship-picker select{flex:1;min-width:0}
.ship-opts{display:grid;gap:.55rem;margin-bottom:1rem}
.ship-opt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.7rem .85rem;
  border:2px solid var(--paper-2);border-radius:var(--r);text-decoration:none;color:inherit;
  cursor:pointer;transition:.15s ease;background:#fff}
.ship-opt:hover{border-color:var(--ink-3)}
.ship-opt.on{border-color:var(--signal);background:var(--signal-soft)}
.ship-opt b{font-family:var(--display);font-size:.98rem}
.ship-opt span{font-size:.82rem;color:var(--muted);flex:1 1 100%}
.ship-opt input{margin:0 .1rem 0 0}
.ship-note{font-size:.84rem;color:var(--muted);line-height:1.5;margin:.2rem 0 1rem;
  padding-left:.7rem;border-left:3px solid var(--signal)}
.tot small{font-family:var(--body);font-size:.72rem;font-weight:400;color:var(--muted)}

/* ── Shop merchandising ───────────────────────────────────────────────── */
.promise-band{background:var(--ink);color:#D9DCE2}
.promises{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem 2rem;
  grid-template-columns:repeat(4,1fr)}
.promises li{font-size:.86rem;line-height:1.5;color:#A8AEBA;padding-left:.85rem;
  border-left:3px solid var(--signal)}
.promises b{display:block;font-family:var(--display);font-weight:700;font-size:.9rem;
  color:#fff;letter-spacing:-.01em;margin-bottom:.15rem}
/* Ten departments holding between two and twenty-one categories each. In a
   grid the tall one sets the row height and its neighbours sit half empty, so
   these flow down columns instead and each card is only as tall as it needs. */
.dept-cols{column-count:3;column-gap:clamp(1.1rem,2.2vw,1.9rem)}
.dept-cols .group-card{-webkit-column-break-inside:avoid;break-inside:avoid;
  margin:0 0 clamp(1.1rem,2.2vw,1.9rem)}
.group-card{align-self:start;height:auto;scroll-margin-top:110px}
.group-card h3{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.group-card h3 span{font-size:.78rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:none;font-family:var(--body)}
.group-card ul{list-style:none;margin:.2rem 0 0;padding:0}
.group-card li+li{border-top:1px solid var(--paper-2)}
.group-card a{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.5rem 0;text-decoration:none;font-size:.92rem;transition:.15s ease}
.group-card a:hover{color:var(--signal-dk);padding-left:.3rem}
.group-card a span{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}

/* Home page shop promo */
.shop-promo{background:var(--ink-2);color:#D9DCE2;overflow:hidden}
.shop-promo .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center;padding-block:clamp(2.6rem,5vw,4rem)}
.shop-promo h2{color:#fff;margin-bottom:.5rem}
.shop-promo .lede{color:#A8AEBA}
.promo-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.promo-tile{background:var(--ink);border:1px solid var(--line);padding:1rem;text-align:center}
.promo-tile b{display:block;font-family:var(--headline);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--signal);line-height:1}
.promo-tile span{display:block;font-size:.78rem;color:#9AA0AB;margin-top:.3rem}

/* ── Delivery promise emphasis ────────────────────────────────────────── */
.promises li.promise-lead{border-left-color:var(--signal);border-left-width:4px}
.promises li.promise-lead b{color:var(--signal);font-size:.98rem}
.promo-tile.hot{border-color:var(--signal)}
.deliver-box{border:1px solid var(--paper-2);border-left:4px solid var(--signal);
  background:var(--paper);padding:.9rem 1rem;margin:1.1rem 0 0;border-radius:var(--r)}
.deliver-box p{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted)}
.deliver-box p+p{margin-top:.4rem}
.deliver-box b{color:var(--ink)}

/* ── Trustindex review widget ─────────────────────────────────────────── */
/* The widget injects its own markup and styles asynchronously. The min-height
   reserves space so the page does not jump when it lands, and the max-width
   stops a wide review wall fighting the rest of the grid. */
.trustindex-band{position:relative}
.trustindex-embed{min-height:220px}
.trustindex-embed .ti-widget{margin:0!important}
.trustindex-band .eyebrow{margin-bottom:.8rem}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem}
  .g4{grid-template-columns:repeat(2,1fr)}
  .shop-layout{grid-template-columns:210px 1fr;gap:1.6rem}
}
@media (max-width:960px){
  .nav,.head-cta .btn{display:none}
  .burger{display:flex}
  .head-in{min-height:64px}
  .nav.open{display:flex;position:fixed;inset:64px 0 0;background:var(--ink);flex-direction:column;
    align-items:stretch;gap:0;padding:1rem 20px 6rem;overflow-y:auto;z-index:65;margin:0}
  .nav.open>li{border-bottom:1px solid var(--line)}
  .nav.open>li>a,.nav.open>li>button{width:100%;justify-content:space-between;padding:1rem .2rem;font-size:1rem}
  .nav.open>li.active>a::after{display:none}
  .submenu{position:static;display:none;box-shadow:none;border:0;border-top:0;background:transparent;
    min-width:0;padding:0 0 .8rem}
  .nav.open>li.open .submenu{display:block}
  .nav>li.has-mega{position:relative}
  /* Mobile: the same two panes, but the second one slides over the first and
     comes back with a labelled return row, the way a phone menu should. */
  .mega{position:static;width:auto;display:none;z-index:auto}
  .mega::before{display:none}
  .nav.open>li.open .mega{display:block}
  .mega-panel{margin:0}
  .mega-cols{display:block;padding:0;position:relative}
  .mega-rail{width:auto;background:transparent;border-top:0;box-shadow:none;
    max-height:none;overflow:visible;padding:0 0 .6rem}
  .mdept{padding:.85rem .2rem;font-size:.95rem;color:#C7CCD4;border-bottom:1px solid var(--line)}
  .mdept svg{color:var(--signal)}
  .mdept:hover,.mdept.on{background:transparent;color:var(--signal)}
  .mdept:hover svg,.mdept.on svg{color:var(--signal)}
  .mdept:hover .mchev,.mdept.on .mchev{border-color:var(--signal)}
  .mdept-gap{border-top-color:var(--line)}
  .mega.pane-open .mega-rail{display:none}
  .mega-pane{width:auto;background:transparent;border-top:0;box-shadow:none;
    max-height:none;overflow:visible}
  .mpane-head{background:var(--ink);border-bottom-color:var(--line);
    flex-wrap:wrap;padding:0 0 .6rem;position:static}
  .mpane-head b{order:2;flex:1;color:#fff;font-size:1rem;padding-top:.7rem}
  .mpane-head a{order:3;padding-top:.7rem;color:var(--signal)}
  .mback{order:1;display:flex;align-items:center;gap:.5rem;width:100%;
    background:none;border:0;border-bottom:1px solid var(--line);padding:.85rem .2rem;
    font-family:inherit;font-size:.86rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--signal);cursor:pointer}
  .mback::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg)}
  .mega-pane a{padding:.7rem .2rem;color:#9AA0AB;border-bottom:1px solid var(--line)}
  .mega-pane li a:hover{background:transparent;color:var(--signal)}
  .mega-foot{width:auto;background:transparent;color:#8A909B;padding:.9rem .2rem;box-shadow:none}
  .submenu a{color:#9AA0AB;padding:.62rem .2rem .62rem 1rem;border-left:2px solid var(--line)}
  .submenu a:hover{background:transparent;color:var(--signal);border-left-color:var(--signal)}
  .split,.prod-detail{grid-template-columns:1fr;gap:2rem}
  .bleed{grid-template-columns:1fr;gap:0;min-height:0}
  .bleed-txt{max-width:none;padding-block:clamp(2.4rem,7vw,3.4rem);order:2}
  .bleed-img,.bleed.rev .bleed-img{order:1;margin:0 -20px;min-height:0;aspect-ratio:16/10}
  .bleed-img img{position:static;height:100%}
  .bleed.rev .bleed-txt{order:2;justify-self:stretch}
  .caplist .say{display:none}
  .split.rev>*:first-child{order:0}
  .g3{grid-template-columns:repeat(2,1fr)}
  .dept-cols{column-count:2}
  .promises{grid-template-columns:repeat(2,1fr)}
  .shop-promo .wrap{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .shop-layout{grid-template-columns:1fr}
  .shop-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
  .totals{position:static}
  .callbar{display:flex}
  body{padding-bottom:66px}
  html{scroll-padding-top:76px}
}
@media (max-width:680px){
  .dept-cols{column-count:1}
  body{font-size:16px}
  /* Long CTA labels must wrap rather than push past the gutter. */
  .btn{white-space:normal;text-align:center;padding-inline:1.1rem}
  .btn-lg{font-size:.9rem;padding:1rem 1.1rem}
  .banner .btn-row,.hero .btn-row{display:grid;gap:.7rem}
  .g2,.g3,.g4,.ticks.two,.field-row{grid-template-columns:1fr}
  .promises{grid-template-columns:1fr;gap:.9rem}
  .foot-top{grid-template-columns:1fr;gap:1.9rem}
  .topbar-l span:not(.keep){display:none}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .cart-table thead{display:none}
  .cart-table tr{display:grid;grid-template-columns:1fr auto;gap:.4rem;padding:1rem 0;
    border-bottom:1px solid var(--paper-2)}
  .cart-table td{border:0;padding:.15rem 0}
  .cart-table td:first-child{grid-column:1/-1}
  .shop-side{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}
  .prod-hero{padding:1.2rem;min-height:240px}
  .hero-stats{gap:1.4rem 2rem}
  .caplist a{gap:.75rem}
  .caplist .num{width:1.6rem;font-size:.68rem}
}
@media print{
  .site-head,.site-foot,.callbar,.cta-band,.topbar{display:none}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════════════
   October 2026 update — shop-first homepage, USPs, storefront redesign
   ══════════════════════════════════════════════════════════════════════ */

/* ── Text on dark surfaces ─────────────────────────────────────────────
   strong{} is ink by default, which turned bold copy black on every dark
   band that did not carry the .dark class (the shop promo was the worst of
   it). Every dark surface now lifts bold text and ghost buttons to white. */
:is(.dark,.ink2,.shop-promo,.promise-band,.shop-hero,.usp-strip,.hero,.banner,.site-head,.site-foot,.callbar,.topbar) strong{color:#fff}
:is(.ink2,.shop-promo,.promise-band,.shop-hero,.usp-strip,.site-head) .btn-ghost{--fg:#fff;border-color:rgba(255,255,255,.55)}
:is(.ink2,.shop-promo,.promise-band,.shop-hero,.usp-strip,.site-head) .btn-ghost:hover{--bg:#fff;--fg:var(--ink);border-color:#fff}
.shop-promo .lede a,.shop-promo .link-arrow{color:#fff}

/* Buttons with icons, and the white "shop" button used on dark heroes */
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-shop,.btn-light{--bg:#fff;--fg:var(--ink);border-color:#fff}
.btn-shop:hover,.btn-light:hover{--bg:var(--signal);--fg:var(--ink);border-color:var(--signal);
  box-shadow:0 10px 24px -10px rgba(224,176,0,.75)}
.cta-band .btn-light{--bg:#fff;border-color:#fff}
.btn-row-center{justify-content:center}
.link-arrow{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:.45rem;
  border-bottom:2px solid var(--signal);padding-bottom:.2rem}
.link-arrow::after{content:"→"}
.link-arrow:hover{color:var(--signal-dk)}
.dark .link-arrow:hover,.shop-promo .link-arrow:hover{color:var(--signal)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.2rem;flex-wrap:wrap;
  margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.sec-head h2{margin-bottom:0}

/* ── Header: shop button + compact phone ─────────────────────────────── */
.topbar svg{width:13px;height:13px;vertical-align:-2px;color:var(--signal)}
.head-cta{display:flex;align-items:center;gap:.6rem}
.btn-phone{gap:.45rem}
.btn-phone svg{width:15px;height:15px}
@media (max-width:1440px){ .btn-phone span{display:none} .btn-phone{padding-inline:.7rem} }
@media (max-width:1400px){ .topbar .hide-md{display:none} }
.topbar a,.topbar span{white-space:nowrap}
.topbar-r a{display:inline-flex;align-items:center;gap:.3rem}
/* The phone number is always in the top bar, so it is the first thing to go
   when the header gets tight; the shop button goes next, and the Shop nav
   item carries the yellow instead. */
@media (max-width:1300px){ .head-cta .btn-phone{display:none} }
@media (max-width:1140px){ .head-cta .btn-shop-head{display:none} .nav>li.has-mega>a{color:var(--signal)} }

/* ── USP band (home, straight under the hero) ────────────────────────── */
.usp-band{background:var(--signal);color:var(--ink)}
.usp-grid{list-style:none;margin:0;padding:clamp(1.6rem,3vw,2.3rem) 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1.2rem clamp(1rem,2.4vw,2rem)}
.usp-grid li{display:flex;gap:.9rem;align-items:flex-start}
.usp-grid .usp-ico{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--signal);
  display:grid;place-items:center;margin:0}
.usp-ico svg{width:22px;height:22px}
.usp-grid b{display:block;font-family:var(--headline);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.02;letter-spacing:.01em;color:var(--ink);margin-bottom:.3rem}
.usp-grid span{display:block;font-size:.86rem;line-height:1.45;color:#2B2C30}

/* ── USP strip (shop pages) ─────────────────────────────────────────── */
.usp-strip{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:3px solid var(--signal)}
.usp-strip ul{list-style:none;margin:0;padding:1rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.6rem}
.usp-strip li{display:flex;gap:.7rem;align-items:flex-start;color:#A8AEBA;font-size:.8rem;line-height:1.4}
.usp-strip svg{width:22px;height:22px;flex:none;color:var(--signal);margin-top:.1rem}
.usp-strip b{display:block;color:#fff;font-family:var(--display);font-size:.88rem;font-weight:700;letter-spacing:-.005em}

/* ── Card variants ───────────────────────────────────────────────────── */
.card-hot{background:var(--ink);border-color:var(--ink);color:#C9CED7}
.card-hot h3,.card-hot h3 a{color:#fff}
.card-hot p{color:#A8AEBA}
.card-hot .more{color:var(--signal)}
.card-hot .ico{background:var(--signal);color:var(--ink)}
.g4 .card-svc{padding:1.5rem 1.35rem}
.g4 .card-svc p{font-size:.92rem}

/* ── Home shop promo ─────────────────────────────────────────────────── */
.shop-promo .wrap{display:block;padding-block:clamp(2.8rem,5.5vw,4.6rem)}
.shop-promo-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.shop-promo .lede{color:#B4BAC5}
.shop-promo .btn-row{margin-top:1.6rem}
.promo-best{margin-top:clamp(2.2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line)}
.promo-best-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem}
.promo-best-head .eyebrow{margin:0}
.prod-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.shop-promo .prod{border-color:transparent}

/* ── Brand wordmark (no logo file yet) ───────────────────────────────── */
.logo-word{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  height:60px;min-width:150px;line-height:1;color:var(--ink)}
.logo-word b{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;color:inherit}
.logo-word em{font-style:normal;font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;margin-top:.3rem;opacity:.7}
.dark .logo-word{color:#C9CED7;opacity:.75}
.dark .logos a:hover .logo-word{color:#fff;opacity:1}

/* ── Social feed ─────────────────────────────────────────────────────── */
.trustindex-feed{min-height:260px}

/* ── Shop hero ───────────────────────────────────────────────────────── */
.shop-hero{background:var(--ink);color:#D9DCE2;position:relative;overflow:hidden;isolation:isolate}
.shop-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(60% 90% at 88% 10%,rgba(255,205,24,.20),transparent 60%),
             repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px)}
.shop-hero .wrap{padding-block:clamp(1.6rem,3.6vw,2.8rem) clamp(2.2rem,4.6vw,3.4rem)}
.shop-hero .crumbs{margin-bottom:1.2rem}
.shop-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:1.3rem;max-width:880px}
.shop-hero h1{color:#fff;font-size:clamp(2.3rem,5.4vw,4.1rem);margin-bottom:.4rem}
.shop-hero h1 em{font-style:normal;color:var(--signal)}
.shop-hero .lede{color:#B4BAC5;margin:0}
.shop-hero-sm h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.hero-search{display:flex;align-items:center;background:#fff;border-radius:var(--r);
  padding:.35rem .35rem .35rem 1rem;gap:.6rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);max-width:760px}
.hero-search>svg{width:20px;height:20px;color:var(--muted);flex:none}
.hero-search input{flex:1;min-width:0;border:0;outline:0;font-size:1.02rem;padding:.75rem 0;background:transparent;color:var(--text)}
.hero-search .btn{padding:.9rem 1.5rem}
.hero-search:focus-within{box-shadow:0 0 0 3px var(--signal),0 18px 40px -18px rgba(0,0,0,.6)}
.hero-pop{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.82rem}
.hero-pop span{color:#8D939E;margin-right:.2rem}
.hero-pop a{color:#E3E6EC;text-decoration:none;padding:.32rem .7rem;border:1px solid var(--line);
  border-radius:99px;background:rgba(255,255,255,.03);transition:.15s ease}
.hero-pop a:hover{border-color:var(--signal);color:var(--signal)}

/* ── Department tiles ────────────────────────────────────────────────── */
.dept-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem}
.dept-tile{display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.1rem 1.05rem;background:#fff;
  border:1px solid var(--paper-2);border-radius:var(--r);text-decoration:none;color:var(--ink);
  transition:.18s ease;scroll-margin-top:110px;position:relative}
.dept-tile:hover{border-color:var(--signal);transform:translateY(-3px);box-shadow:var(--shadow)}
.dept-ico{width:44px;height:44px;border-radius:var(--r);background:var(--signal-soft);color:#7A5F00;
  display:grid;place-items:center;margin-bottom:.35rem;transition:.18s ease}
.dept-ico svg{width:22px;height:22px}
.dept-tile:hover .dept-ico{background:var(--signal);color:var(--ink)}
.dept-tile b{font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.25}
.dept-tile em{font-style:normal;font-size:.78rem;color:var(--muted)}

/* ── Product rail (best sellers) ─────────────────────────────────────── */
.rail-nav{display:flex;gap:.45rem}
.rail-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink);transition:.15s ease}
.rail-btn:hover{background:var(--ink);color:#fff}
.prod-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,calc((100% - 4 * 1.25rem) / 5));
  gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:thin}
.prod-rail .prod{scroll-snap-align:start}

/* ── Brand tiles ─────────────────────────────────────────────────────── */
.brand-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.brand-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  min-height:86px;padding:.9rem;border:1px solid var(--paper-2);border-radius:var(--r);background:#fff;
  text-decoration:none;color:var(--ink);text-align:center;transition:.15s ease}
.brand-tile:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.brand-tile b{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.brand-tile em{font-style:normal;font-size:.74rem;color:var(--muted)}

/* ── Listing toolbar ─────────────────────────────────────────────────── */
.shop-listing{scroll-margin-top:80px}
.list-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--paper-2)}
.list-title{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.15rem}
.list-head .shop-count{margin:0}
.list-tools{display:flex;gap:.6rem;align-items:center}
.sort-by{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.sort-by select{padding:.6rem 2rem .6rem .8rem;border:1.5px solid #D6D6D0;border-radius:var(--r);
  font:inherit;font-size:.88rem;color:var(--text);background:#fff}
.filter-toggle{display:none}
.chips-on{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:1.3rem}
.chip-on{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .5rem .38rem .75rem;
  background:var(--ink);color:#fff;border-radius:99px;font-size:.8rem;text-decoration:none;font-weight:600}
.chip-on span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.16);font-size:.9rem;line-height:1}
.chip-on:hover span{background:var(--signal);color:var(--ink)}
.chip-clear{font-size:.8rem;font-weight:600;color:var(--muted);margin-left:.3rem}

/* ── Filter sidebar ──────────────────────────────────────────────────── */
.shop-listing .shop-layout{grid-template-columns:260px minmax(0,1fr)}
.filters{position:sticky;top:96px;max-height:calc(100vh - 110px);overflow-y:auto;
  padding-right:.4rem;scrollbar-width:thin}
.filters-head,.filters-apply{display:none}
.fgroup{padding:0 0 1.2rem;margin:0 0 1.2rem;border-bottom:1px solid var(--paper-2)}
.fgroup-h{display:block;font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .7rem}
.fsearch{display:flex;border:1.5px solid #D6D6D0;border-radius:var(--r);background:#fff;overflow:hidden}
.fsearch:focus-within{border-color:var(--ink)}
.fsearch input{flex:1;min-width:0;border:0;outline:0;padding:.62rem .75rem;font-size:.88rem;background:transparent}
.fsearch button{border:0;background:var(--signal);width:42px;display:grid;place-items:center;cursor:pointer}
.fsearch svg{width:17px;height:17px}
.flinks{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.flinks a{display:flex;justify-content:space-between;gap:.6rem;padding:.42rem .55rem;border-radius:3px;
  text-decoration:none;font-size:.88rem;color:var(--text);line-height:1.3}
.flinks a:hover{background:var(--paper-2)}
.flinks a.on{background:var(--ink);color:#fff;font-weight:600}
.flinks a span{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.flinks a.on span{color:#C9CED7}
.flinks a.back{color:var(--muted);font-size:.82rem;font-weight:600}
.flinks ul{list-style:none;margin:.2rem 0 .4rem .7rem;padding:0 0 0 .55rem;border-left:2px solid var(--paper-2);display:grid;gap:.05rem}
.flinks ul a{font-size:.84rem}
.fbands{grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.7rem}
.fbands a{justify-content:center;border:1px solid var(--paper-2);font-size:.8rem;padding:.45rem .3rem;text-align:center}
.fchecks{display:grid;gap:.15rem}
.fcheck{display:flex;align-items:center;gap:.55rem;padding:.32rem .2rem;font-size:.88rem;cursor:pointer;border-radius:3px}
.fcheck:hover{background:var(--paper-2)}
.fcheck input{width:17px;height:17px;accent-color:var(--ink);flex:none;margin:0}
.fcheck span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcheck em{font-style:normal;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fmore summary{cursor:pointer;font-size:.82rem;font-weight:600;padding:.45rem .2rem;color:var(--ink);
  list-style:none;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}
.fmore summary::-webkit-details-marker{display:none}
.fmore[open] summary{display:none}
.frange{display:flex;align-items:center;gap:.4rem}
.frange input{width:100%;min-width:0;padding:.55rem .6rem;border:1.5px solid #D6D6D0;border-radius:var(--r);font-size:.86rem}
.frange span{font-size:.78rem;color:var(--muted)}
.frange .btn{padding:.6rem .8rem}
.fpromo{background:var(--ink);color:#A8AEBA;padding:1rem;border-radius:var(--r);border-left:4px solid var(--signal);font-size:.8rem;line-height:1.45}
.fpromo b{display:block;color:var(--signal);font-family:var(--display);font-size:.92rem;margin-bottom:.2rem}

/* ── Product card ────────────────────────────────────────────────────── */
.prod-img{position:relative;background:#fff;border-bottom:1px solid var(--paper-2)}
.prod-img img{mix-blend-mode:normal}
.prod-flags{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.flag{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .5rem;border-radius:3px;line-height:1}
.flag-rank{background:var(--ink);color:var(--signal)}
.flag-save{background:var(--signal);color:var(--ink)}
.prod-meta{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center}
.ship-tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;color:#1B7A52}
.ship-tag svg{width:14px;height:14px}

/* ── Callbar: three actions ──────────────────────────────────────────── */
.callbar .btn{gap:.4rem;padding-inline:.4rem}

/* ── Responsive for the additions ────────────────────────────────────── */
@media (max-width:1180px){
  .prod-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .usp-grid,.usp-strip ul{grid-template-columns:repeat(2,1fr)}
  .shop-listing .shop-layout{grid-template-columns:230px minmax(0,1fr)}
}
@media (max-width:960px){
  .shop-promo-top{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex}
  .shop-listing .shop-layout{grid-template-columns:1fr}
  .filters{position:fixed;top:0;bottom:0;left:0;z-index:120;width:min(360px,88vw);max-height:none;
    background:#fff;padding:0 1.1rem 1.2rem;transform:translateX(-105%);transition:transform .25s ease;
    box-shadow:var(--shadow-lg)}
  body.filters-open .filters{transform:none}
  body.filters-open::after{content:"";position:fixed;inset:0;background:rgba(11,11,13,.55);z-index:110}
  body.filters-open{overflow:hidden}
  .filters-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;
    background:#fff;padding:1rem 0;margin-bottom:.6rem;border-bottom:1px solid var(--paper-2);z-index:2}
  .filters-head b{font-family:var(--display);font-size:1.05rem}
  .filters-close{border:0;background:var(--paper-2);width:36px;height:36px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1}
  .filters-apply{display:flex;position:sticky;bottom:0;margin-top:1rem}
  .prod-rail{grid-auto-columns:minmax(220px,42%)}
}
@media (max-width:680px){
  .usp-grid{grid-template-columns:1fr;gap:1rem}
  .usp-strip ul{grid-template-columns:1fr 1fr;gap:.8rem}
  .usp-strip li span{display:none}
  .prod-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .prod-rail{grid-auto-columns:minmax(200px,72%)}
  .hero-search{padding-left:.8rem}
  .hero-search .btn{padding:.85rem 1rem}
  .hero-search input{font-size:.95rem}
  .dept-tiles{grid-template-columns:repeat(2,1fr)}
  .brand-tiles{grid-template-columns:repeat(2,1fr)}
  .list-tools{width:100%}
  .list-tools .filter-toggle{flex:1}
  .sort-by{flex:1}
  .sort-by select{width:100%}
  .callbar .btn{font-size:.74rem}
  .callbar .btn svg{display:none}
  .callbar .btn:first-child svg{display:inline}
  .prod .btn svg{display:none}
}

/* Headings keep their look whatever level the H2 budget demotes them to. */
.prod .prod-name{font-size:.955rem;font-weight:600;line-height:1.38;margin:0;font-family:var(--body);
  text-transform:none;letter-spacing:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.prod .prod-name a{text-decoration:none;color:inherit}
.prod .prod-name a:hover{color:var(--signal-dk)}
.sec-head :is(h2,h3,h4),.list-head .list-title{font-family:var(--headline);font-weight:400;text-transform:uppercase;
  line-height:.96;letter-spacing:.004em;font-size:clamp(2.05rem,4.3vw,3.4rem);margin-bottom:0}
.list-head .list-title{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:.25rem}
.shop-promo .sec-head :is(h2,h3,h4),.shop-promo h3,.shop-promo h4{color:#fff}
.empty :is(h3,h4){margin-bottom:.4rem}
@media (max-width:680px){ .topbar-r a[href$="contact-us"]{display:none} .rail-nav{display:none} }
.prod{color:var(--text)}

/* USP headings: one line each */
.usp-grid{grid-template-columns:repeat(4,auto);justify-content:space-between}
.usp-grid li>div{min-width:0}
.usp-grid b{white-space:nowrap;font-size:clamp(1.05rem,1.45vw,1.3rem)}
.usp-grid span{max-width:30ch}
.usp-strip b{white-space:nowrap}
@media (max-width:1080px){ .usp-grid{grid-template-columns:repeat(2,auto)} }
@media (max-width:680px){ .usp-grid{grid-template-columns:1fr} }

/* ── Announcement bar (Oct 2026 redesign) ───────────────────────────── */
.topbar{background:var(--ink-2);border-bottom:1px solid var(--line);font-size:.8rem;color:#A8AEBA}
.topbar .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:38px;flex-wrap:nowrap}
.topbar-usps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0;min-width:0}
.topbar-usps li{display:flex;align-items:center;gap:.45rem;white-space:nowrap;padding:0 1.15rem;
  border-left:1px solid var(--line)}
.topbar-usps li:first-child{padding-left:0;border-left:0}
.topbar-usps svg{width:14px;height:14px;flex:none;color:var(--signal);vertical-align:0}
.topbar-usps b{color:#fff;font-weight:600}
.topbar-reviews{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  color:#D9DCE2;text-decoration:none;font-weight:600}
.topbar-reviews:hover{color:var(--signal)}
.topbar-reviews .stars{display:inline-flex;gap:1px}
.topbar-reviews .stars svg{width:12px;height:12px;color:var(--signal)}
@media (max-width:1180px) and (min-width:861px){ .topbar-usps li:nth-child(3){display:none} }
@media (min-width:861px){ .topbar-usps{overflow:hidden} }
@media (max-width:860px){
  .topbar .topbar-in{justify-content:center}
  .topbar-reviews{display:none}
  .topbar-usps{position:relative;height:38px;width:100%;justify-content:center}
  .topbar-usps li,.topbar-usps li:nth-child(3){display:flex;position:absolute;inset:0;justify-content:center;
    padding:0;border:0;opacity:0;animation:tb-rotate 12s infinite}
  .topbar-usps li:nth-child(2){animation-delay:4s}
  .topbar-usps li:nth-child(3){animation-delay:8s}
  .topbar-usps li span{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:480px){ .topbar-usps li span{font-size:.76rem} }
@keyframes tb-rotate{0%{opacity:0;transform:translateY(6px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  .topbar-usps li{animation:none!important}
  .topbar-usps li:first-child{opacity:1}
}
/* Phone stays in the header as an icon button rather than disappearing. */
@media (max-width:1300px){ .head-cta .btn-phone{display:inline-flex} }
@media (max-width:1260px) and (min-width:961px){
  .nav>li>a,.nav>li>button{padding:.72rem .5rem;font-size:.8rem;letter-spacing:.02em}
  .head-in{gap:1rem}
}
@media (max-width:1060px) and (min-width:961px){ .head-cta .btn-phone{display:none} }

/* ── Brand strip: one-colour logos in equal cells ────────────────────── */
.logo-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin-top:1.6rem;
  border-top:1px solid var(--paper-2);border-bottom:1px solid var(--paper-2)}
.dark .logo-row{border-color:var(--line)}
.logo-row a{display:flex;align-items:center;justify-content:center;height:96px;padding:0 1.1rem;
  text-decoration:none;border-left:1px solid var(--paper-2);transition:background .2s}
.dark .logo-row a{border-color:var(--line)}
.logo-row a:first-child{border-left:0}
.logo-row img,.dark .logo-row img{height:auto;width:auto;max-height:34px;max-width:100%;
  filter:none;opacity:.6;transition:opacity .2s}
.logo-row a:hover img,.dark .logo-row a:hover img{opacity:1;filter:none}
.logo-row a:hover{background:rgba(255,205,24,.06)}
.logo-row .logo-word,.dark .logo-row .logo-word{height:auto;min-width:0;opacity:.6;color:var(--ink)}
.dark .logo-row .logo-word{color:#fff}
.logo-row .logo-word b{font-size:1.12rem;white-space:nowrap}
.logo-row .logo-word em{font-size:.62rem;margin-top:.25rem}
.logo-row a:hover .logo-word{opacity:1}
@media (max-width:960px){ .logo-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .logo-row a:nth-child(4n+1){border-left:0} .logo-row a:nth-child(n+5){border-top:1px solid var(--paper-2)}
  .dark .logo-row a:nth-child(n+5){border-top-color:var(--line)} }
@media (max-width:560px){ .logo-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-row a{height:80px;border-left:1px solid var(--paper-2)} .logo-row a:nth-child(odd){border-left:0}
  .logo-row a:nth-child(n+3){border-top:1px solid var(--paper-2)} .dark .logo-row a{border-color:var(--line)} }

/* ══════════════════════════════════════════════════════════════════════
   Service calls (Oct 2026) — fault tiles and brands we service
   ══════════════════════════════════════════════════════════════════════ */
.fault-sec .sec-head{align-items:flex-end}
.fault-sec .sec-head .lede{max-width:56ch;margin-bottom:0}
.fault-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.fault{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.25rem 1.2rem 1.3rem;
  background:#fff;border:1px solid var(--paper-2);border-radius:var(--r);text-decoration:none;color:var(--ink);
  transition:.18s ease;min-height:100%}
.fault::after{content:"→";position:absolute;right:1.1rem;top:1.15rem;font-weight:700;color:var(--muted);transition:.18s}
.fault:hover{border-color:var(--signal);box-shadow:var(--shadow);transform:translateY(-3px)}
.fault:hover::after{color:var(--ink);transform:translateX(3px)}
.fault-ico{width:42px;height:42px;border-radius:var(--r);background:var(--ink);color:var(--signal);
  display:grid;place-items:center;margin-bottom:.45rem}
.fault-ico svg{width:21px;height:21px}
.fault b{font-family:var(--display);font-weight:800;font-size:1.04rem;letter-spacing:-.01em;line-height:1.2}
.fault span:last-child{font-size:.86rem;line-height:1.45;color:var(--muted)}
.dark .fault{background:var(--ink-2);border-color:var(--line);color:#fff}
.dark .fault span:last-child{color:#9AA0AB}
.dark .fault-ico{background:var(--signal);color:var(--ink)}

.brand-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem}

.brand-svc a{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:1rem 1.1rem;background:#fff;
  border:1px solid var(--paper-2);border-left:3px solid var(--signal);border-radius:var(--r);
  text-decoration:none;color:var(--ink);transition:.15s ease}
.brand-svc a:hover{border-color:var(--ink);border-left-color:var(--signal);box-shadow:var(--shadow)}
.brand-svc b{font-family:var(--display);font-weight:800;font-size:1rem}
.brand-svc span{font-size:.86rem;color:var(--muted);line-height:1.45}

@media (max-width:1080px){ .fault-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ══════════════════════════════════════════════════════════════════════
   Mobile optimisation pass (Oct 2026)
   - 16px form fields so iOS Safari never zooms the page on focus
   - 44px minimum touch targets on menus, crumbs, footer and card links
   - nothing smaller than 12px
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:960px){
  .burger{width:44px;height:44px}
  input,select,textarea,.hero-search input,.fsearch input,.frange input,.sort-by select,
  .shop-bar select,.shop-bar input,.field input,.field select,.field textarea{font-size:16px}
}
@media (max-width:680px){
  .eyebrow{font-size:.75rem;letter-spacing:.16em}
  .flag{font-size:.75rem}
  .prod-brand,.ship-tag,.dept-tile em,.brand-tile em,.fcheck em,.flinks a span{font-size:.75rem}
  .logo-row .logo-word em{font-size:.75rem}
  .crumbs a{display:inline-block;padding:.65rem 0}
  .card h3 a,.card .more,.related a,.site-foot ul a{display:inline-block;padding-block:.6rem}
  .card .more{min-height:44px;display:inline-flex;align-items:center}
  .site-foot ul{gap:0}
  .nap a{min-height:44px;display:flex;align-items:center}
  .hero-pop a{padding:.6rem .85rem}
  .link-arrow{padding-block:.6rem}
  .fault-grid{grid-template-columns:1fr;gap:.6rem}
  .fault{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;padding:1rem 2.6rem 1rem 1rem}
  .fault-ico{margin:0;width:38px;height:38px}
  .fault b{flex:1}
  .fault span:last-child{flex-basis:100%;padding-left:calc(38px + .8rem)}
  .fault::after{top:50%;transform:translateY(-50%)}
  .fault-sec .sec-head .btn{width:100%}
  .usp-strip b{white-space:normal}
  .brand-svc{grid-template-columns:1fr}
}
/* Header with the Service calls item: keep everything on one line 961–1440px */
@media (max-width:1440px) and (min-width:961px){
  .nav>li>a,.nav>li>button{padding:.72rem .52rem;font-size:.8rem;letter-spacing:.02em}
  .head-in{gap:1rem}
}
@media (max-width:1300px) and (min-width:961px){
  .nav>li>a,.nav>li>button{padding:.7rem .42rem;font-size:.77rem;letter-spacing:.01em}
  .caret{width:7px;height:7px}
}
@media (max-width:1060px) and (min-width:961px){
  .nav>li>a,.nav>li>button{padding:.7rem .32rem;font-size:.74rem;letter-spacing:0}
  .brand img{height:30px}
  .head-in{gap:.6rem}
}
.nav>li:first-child>a{color:var(--signal)}
@media (max-width:680px){
  .card :is(h3,h4,h5) a{display:inline-block;padding-block:.6rem}
  .bleed-tag{font-size:.75rem}
  .card-svc :is(h3,h4) {margin-bottom:.2rem}
}
@media (max-width:680px){ .prod-price em{font-size:.75rem} }
@media (max-width:960px){ .nav.open{bottom:0;left:0;right:0} }