/* Inner pages and catalogue */
.pagehero { margin-top: 14px; border-radius: 20px; background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; padding: clamp(32px, 6vw, 72px) clamp(24px, 6vw, 72px); position: relative; overflow: hidden; }
.pagehero::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6%; background: var(--accent); transform: skewX(-14deg) translateX(40%); }
.pagehero h1 { font-size: clamp(1.8rem, 4.6vw, 3.4rem); margin-top: 10px; }
.pagehero p { margin: 14px 0 0; max-width: 60ch; opacity: .9; }
.pagehero .eyebrow { color: #fff; opacity: .85; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.prose { max-width: 760px; display: grid; gap: 16px; color: var(--muted); font-size: 16px; }
.prose p { margin: 0; }
.prose h2 { color: var(--ink); font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-top: 14px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.lcard { border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 10px; text-decoration: none; background: var(--card); min-width: 0; transition: transform .2s, box-shadow .2s; align-content: start; }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lcard h3 { font-size: 15px; }
.lcard p { margin: 0; color: var(--muted); font-size: 14px; }
.lcard .more { font: 600 12px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }

.cathead { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cchip { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font: 600 12px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; background: var(--card); }
.cchip:hover { background: var(--alt); }
.cchip[aria-current="page"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.tools { display: grid; grid-template-columns: minmax(0, 1fr) 190px 190px; gap: 12px; margin: 28px 0 8px; }
.tools input, .tools select { width: 100%; font: 500 15px/1 var(--f-body); color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.tools input:focus, .tools select:focus { border-color: var(--brand-2); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 25%, transparent); }
.count { color: var(--muted); font-size: 14px; margin: 10px 0 20px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.pcard { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; min-width: 0; }
.pcard .ph { border-radius: 0; aspect-ratio: 1 / 1; }
.pcard .sample { position: absolute; top: 12px; left: 12px; background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 10px; font: 600 10px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; }
.pbody { padding: 16px 18px 18px; display: grid; gap: 4px; flex: 1; align-content: start; }
.pbody .code { font: 600 11px/1 var(--f-head); letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }
.pbody h3 { font-size: 15px; margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.pbody .meta { color: var(--muted); font-size: 13.5px; }
.pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pbtns .btn { padding: 11px 8px; font-size: 11px; letter-spacing: .06em; }
.empty { border: 1.5px dashed var(--line); border-radius: 16px; padding: 40px 20px; text-align: center; color: var(--muted); display: grid; gap: 14px; justify-items: center; }
.loadmore { display: flex; justify-content: center; margin-top: 30px; }

.modal { position: fixed; inset: 0; z-index: 100; background: rgba(8, 14, 24, .6); display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.sheet { background: var(--card); color: var(--ink); border-radius: 20px; width: min(760px, 100%); max-height: calc(100% - 16px); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); box-shadow: var(--shadow); position: relative; }
.sheet .ph { border-radius: 0; height: 100%; min-height: 260px; }
.sheet .info { padding: 28px 26px; display: grid; gap: 10px; align-content: start; }
.sheet h2 { font-size: 1.3rem; text-transform: none; letter-spacing: 0; }
.spec { margin: 6px 0 0; display: grid; border-top: 1px solid var(--line); }
.spec div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; font-weight: 600; text-align: right; }
.xbtn { position: absolute; right: 12px; top: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); font-size: 20px; cursor: pointer; box-shadow: var(--shadow); }

.brandhero { display: grid; gap: 16px; justify-items: start; }
.notice { border-left: 4px solid var(--accent); background: var(--alt); padding: 14px 18px; border-radius: 0 10px 10px 0; color: var(--muted); font-size: 14px; }

@media (max-width: 960px) { .two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .tools { grid-template-columns: minmax(0, 1fr); }
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet .ph { min-height: 200px; height: 200px; }
}

/* ---- live-site additions ---- */
.pcard > a.imgl { display: block; position: relative; text-decoration: none; }
.pcard img.pimg, .tile img.pimg { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--alt); }
.tile img.pimg { border-radius: 16px; transition: transform .25s; }
.tile:hover img.pimg { transform: translateY(-4px); }
.pbody h3 a { text-decoration: none; }
.pbody h3 a:hover { color: var(--accent); }
.slide.hasimg { background-size: cover; background-position: center; }
.slide.hasimg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,16,32,.78) 0%, rgba(8,16,32,.45) 55%, rgba(8,16,32,.1) 100%); z-index: 1; }
.slide.hasimg::after, .slide.hasimg .ghostword { display: none; }
.filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) minmax(0, 1fr); gap: 12px; margin: 26px 0 8px; }
.filters input, .filters select { width: 100%; font: 500 14px/1 var(--f-body); color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 12px; }
.filters input:focus, .filters select:focus { border-color: var(--brand-2); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 25%, transparent); }
@media (max-width: 1000px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filters input { grid-column: 1 / -1; } }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: start; margin-top: 28px; }
.pdp .gal { display: grid; gap: 12px; }
.pdp .gal .main { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; background: var(--alt); }
.pdp .gal .ph { aspect-ratio: 1 / 1; border-radius: 18px; }
.pdp .thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp .thumbs button { width: 72px; height: 72px; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--alt); cursor: pointer; }
.pdp .thumbs button[aria-current="true"] { border-color: var(--accent); }
.pdp .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp h1 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); text-transform: none; letter-spacing: 0; margin-top: 8px; }
.pdp .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pdp .chips a, .pdp .chips span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; text-decoration: none; background: var(--alt); }
.pdp .desc { color: var(--muted); margin: 16px 0; white-space: pre-line; }
.pdp .spec { margin-top: 12px; }
.enqbox { margin-top: 28px; }
.enqbox .form { gap: 12px; }
.enqbox .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .enqbox .row2 { grid-template-columns: 1fr; } }
.form .ok { background: color-mix(in srgb, #16a34a 12%, var(--card)); border: 1px solid #16a34a; border-radius: 12px; padding: 16px; color: var(--ink); display: grid; gap: 10px; }
.form .errmsg { color: #dc2626; font-size: 14px; margin: 0; min-height: 1em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.testi blockquote { margin: 0; background: var(--alt); border: 1px solid var(--line); border-radius: 16px; padding: 22px; color: var(--muted); }
.testi cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: var(--ink); }
.nav .has-sub { position: relative; display: inline-flex; }
.nav .sub { position: absolute; left: 0; top: 100%; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: none; z-index: 70; }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: grid; }
.nav .sub a { display: block; }
.pimgwrap { position: relative; }
.loading { padding: 60px 0; text-align: center; color: var(--muted); }
.richpage { max-width: 780px; margin-inline: auto; }
.richpage img.feat { width: 100%; border-radius: 16px; margin-bottom: 20px; }
@media (max-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
.slide h2.h1 { font-size: clamp(2rem, 5.2vw, 4.2rem); }
.top { grid-template-columns: minmax(0, 1fr); }
.top > * { min-width: 0; }
.gbar .tabs { min-width: 0; flex: 1; }
/* header: never let the logo and menu overlap */
.head { gap: 12px; }
.brand { flex: none; }
.actions { flex: none; }
.nav { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 0; }
.nav a { padding: 12px 10px; white-space: nowrap; }
@media (max-width: 1320px) { .actions .btn.accent { padding-inline: 14px; font-size: 11.5px; } .nav a { padding-inline: 8px; font-size: 12px; letter-spacing: .05em; } }
@media (max-width: 1120px) { .actions .btn.accent { display: none; } }
.slide.pure::before, .slide.pure::after { display: none; }
.slide.pure .fill { position: absolute; inset: 0; z-index: 2; }

.gbar .tabs{flex:0 1 auto}
.moreWrap{flex:none}
.moreMenu{position:fixed;z-index:90;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:grid}
.moreMenu[hidden]{display:none}
.moreMenu a{padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.moreMenu a:hover{background:var(--alt)}
/* shop ribbon: tabs share the width equally, More sits at the far right */
.gbar .tabs{flex:1 1 0;min-width:0}
.gbar .tabs .tab{flex:1 0 auto;text-align:center}
.gbar .moreWrap{margin-left:auto}
.gbar .moreWrap .tab{padding-inline:28px;border-left:1px solid var(--line)}

/* ---- header redesign ---- */
.head{padding:10px 12px 10px 16px;border-radius:18px;border:1px solid var(--line);box-shadow:0 6px 24px rgba(15,30,60,.08)}
.nav{gap:2px}
.nav>a,.nav .has-sub>a{position:relative;border-radius:10px;padding:12px 14px;font-weight:700;letter-spacing:.09em;color:var(--ink)}
.nav a:hover{background:transparent;color:var(--accent)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{background:transparent!important;color:var(--accent)}
.actions{gap:12px}
.ct{position:relative}
.ctBtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent);transition:transform .15s}
.ctBtn:hover{transform:translateY(-1px) scale(1.04)}
.ctMenu{position:absolute;right:0;top:calc(100% + 14px);width:min(290px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px;z-index:80;display:grid;gap:6px}
.ctMenu[hidden]{display:none}
.ctT{font:800 11px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.ctA{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.ctA:hover{background:var(--alt)}
.ctA b{display:block;font:700 15px/1.2 var(--f-head)}.ctA small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.ctI{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;flex:none}
.ctA.call .ctI{background:var(--brand)}.ctA.wa .ctI{background:#25D366}

/* ---- header v3: navy bar, true-centred menu ---- */
.head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 16px 12px 20px;border-radius:20px;border:0;
  background:linear-gradient(115deg,#0B1D3F 0%,#14305E 55%,#1F4A91 100%);box-shadow:0 14px 34px rgba(11,29,63,.28);position:relative}
.head::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);opacity:.9}
.head .brand{justify-self:start;color:#fff}
.head .brand b{color:#fff}
.head .brand small{color:rgba(255,255,255,.65)}
.head .brand .mark{background:#fff;color:var(--brand);width:44px;height:44px;border-radius:12px;font-size:22px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.head .nav{justify-self:center;flex:none;justify-content:center;gap:6px}
.head .nav>a,.head .nav .has-sub>a{color:rgba(255,255,255,.88);padding:12px 18px;font-size:13px;letter-spacing:.12em}
.head .nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.head .nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.14)!important}
.head .nav a::after{left:18px;right:18px;bottom:7px;background:var(--accent)}
.head .actions{justify-self:end}
.head .actions .btn.brand{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:none}
.head .actions .btn.brand:hover{background:rgba(255,255,255,.22)}
.head .ctBtn{box-shadow:0 0 0 4px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.3)}
@media (max-width:1080px){.head .nav>a{padding:12px 11px;letter-spacing:.07em}}
@media (max-width:960px){.head{grid-template-columns:1fr auto}.head .nav{display:none}}

/* header v4: menu options share the middle space in equal-width cells */
.head{grid-template-columns:auto minmax(0,1fr) auto;gap:20px}
.head .nav{justify-self:stretch;display:flex;width:100%;gap:0;margin:0 8px}
.head .nav>a,.head .nav>.has-sub{flex:1 1 0;min-width:0}
.head .nav>.has-sub{display:flex}.head .nav>.has-sub>a{flex:1}
.head .nav>a,.head .nav .has-sub>a{text-align:center;padding:14px 8px;border-radius:0}
.head .nav>a+a,.head .nav>.has-sub+a,.head .nav>a+.has-sub{border-left:1px solid rgba(255,255,255,.14)}
.head .nav a::after{left:25%;right:25%;bottom:8px}
@media (max-width:960px){.head{grid-template-columns:1fr auto}}

/* homepage: centred category tiles, brand card images, about background */
.tiles.tiles-c{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.tiles.tiles-c .tile{width:min(100%,210px);flex:0 1 210px}
.bcard.hasbg{background-size:cover;background-position:center;color:#fff;border:0;isolation:isolate}
.bcard.hasbg::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,16,32,.74),rgba(8,16,32,.34));z-index:-1}
.bcard.hasbg p,.bcard.hasbg .bdet{color:#fff}
.bcard .blogo{max-height:56px;max-width:160px;object-fit:contain;border-radius:8px}
.bcard .btag{font:700 13px/1.3 var(--f-head);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.bcard .bdet{max-width:52ch;font-size:14.5px;opacity:.92}.bcard .bdet p{margin:0 0 8px}
.bcard.t .bdet{color:var(--muted)}
section.abg{position:relative;background-size:cover;background-position:center;border-radius:20px;color:#fff;isolation:isolate;padding:48px 28px!important;overflow:hidden}
section.abg::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,16,32,.78),rgba(8,16,32,.5));z-index:-1}
section.abg h1,section.abg h2,section.abg h3,section.abg p,section.abg .prose,section.abg .eyebrow{color:#fff}
section.abg .lcard{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
section.abg .lcard p,section.abg .lcard h3,section.abg .lcard .more{color:#fff}

/* ---- mobile & tablet header ---- */
.burger,.mnav{display:none}
@media (max-width:960px){
  .head{grid-template-columns:minmax(0,1fr) auto!important;gap:10px;padding:10px 12px}
  .head .nav{display:none!important}
  .head .actions{gap:10px}
  .head .actions .co{display:none}
  .burger{display:grid;place-content:center;gap:5px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);cursor:pointer}
  .burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mnav:not([hidden]){display:grid;grid-column:1/-1;gap:2px;padding:8px 0 6px;border-top:1px solid rgba(255,255,255,.18);margin-top:4px;max-height:70vh;overflow:auto}
  .mnav a{display:block;color:#fff;text-decoration:none;font:700 14px/1.2 var(--f-head);letter-spacing:.1em;text-transform:uppercase;padding:15px 12px;border-radius:10px}
  .mnav a:hover,.mnav a:active{background:rgba(255,255,255,.12)}
  .mnav a[aria-current="page"]{background:rgba(255,255,255,.14)!important}
  .mnav .has-sub,.mnav .sub{display:contents}
  .mnav .mh{font:800 11px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:16px 12px 6px}
  .head .brand b{font-size:15px}
}
@media (max-width:480px){
  .head .brand small{display:none}
  .head .brand .mark{width:40px;height:40px}
  .head .brand b{font-size:14px;letter-spacing:.02em}
  .ctMenu{right:-58px}
  .announce .in{flex-direction:column;align-items:flex-start;gap:2px}
}
@media (max-width:600px){
  .slider{height:clamp(470px,128vw,560px)}
  .slide{padding-bottom:72px;align-items:center}
  .slide .cta .btn{padding-inline:16px}
  .gbar .tabs .tab{padding:14px 12px 11px;font-size:12px;letter-spacing:.08em}
  .gbar .moreWrap .tab{padding-inline:14px}
  .gbar .tabs .tab{flex:0 0 auto}
}
@media (max-width:420px){.head .brand b{font-size:12.5px;letter-spacing:.01em}.head .brand{gap:9px}.head .actions{gap:8px}.ctBtn,.burger{width:42px;height:42px}}

/* HD photo zoom (product page) */
.pdp .zoomer { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 18px; }
.pdp .zoomer .zhint { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 99px; pointer-events: none; }
.zoomv { position: fixed; inset: 0; z-index: 1000; background: rgba(10,12,18,.94); display: flex; align-items: center; justify-content: center; }
.zoomv .zs { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom pan-x pan-y; }
.zoomv img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.zoomv img.big { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
.zoomv button { position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.zoomv .zx { top: 14px; right: 14px; }
.zoomv .zp { left: 12px; top: 50%; transform: translateY(-50%); }
.zoomv .zn { right: 12px; top: 50%; transform: translateY(-50%); }
.zoomv .zc { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: .8; }

/* footer brand: bold and eye-catching */
.foot .fb{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.foot .fb .mark{width:58px;height:58px;border-radius:16px;font-size:30px;background:var(--accent);box-shadow:0 8px 22px rgba(224,58,30,.45)}
.foot .fname{display:grid;gap:6px}
.foot .fname b{font:900 clamp(1.5rem,3.2vw,2.15rem)/1 var(--f-head);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(95deg,#fff 30%,#FFB4A3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.foot .fname small{font:700 11px/1 var(--f-head);letter-spacing:.34em;color:var(--accent);filter:brightness(1.25)}
@media (max-width:480px){.foot .fname b{font-size:1.5rem}.foot .fb .mark{width:50px;height:50px;font-size:26px}}

/* footer brand: smaller */
.foot .fb .mark{width:44px;height:44px;font-size:22px;border-radius:12px}
.foot .fname b{font-size:clamp(1.05rem,1.8vw,1.3rem);letter-spacing:.04em;white-space:nowrap}
.foot .fname small{font-size:10px}
@media (max-width:480px){.foot .fname b{font-size:1.05rem}.foot .fb .mark{width:40px;height:40px;font-size:20px}}

.menu a.stafflogin{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;font-weight:700;color:var(--brand)}

/* brand wordmarks (logo lettering) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1.wm,h3.wm{margin:0;line-height:0}
h1.wm img{height:clamp(64px,11vw,120px);width:auto;max-width:100%;display:block}
h3.wm img{height:clamp(70px,9vw,104px);width:auto;max-width:100%;display:block}
.bcard.b-supremlite{background:linear-gradient(135deg,#16398A 0%,#0F2A68 100%);color:#fff;border:0}
.bcard.b-ston{background:linear-gradient(135deg,#1b1514 0%,#2a0c0a 55%,#7a1a12 130%);color:#fff;border:0}
.bcard.b-supremlite p,.bcard.b-ston p,.bcard.b-supremlite .bdet,.bcard.b-ston .bdet{color:#fff;opacity:.9}
.bcard.hasbg.b-supremlite,.bcard.hasbg.b-ston{background-size:cover;background-position:center}
.pagehero.ph-supremlite{background:linear-gradient(120deg,#16398A 0%,#0F2A68 100%)}
.pagehero.ph-ston{background:linear-gradient(120deg,#1b1514 0%,#2a0c0a 60%,#8a1c13 140%)}
/* header: brand names highlighted */
.head .brand small{color:#FF4B2B;font-weight:800;font-size:11.5px;letter-spacing:.2em;text-shadow:0 0 12px rgba(255,75,43,.35)}

/* sizes & MRP */
.sztab{margin-top:18px}.sztab h3{font-size:15px;margin:0 0 10px}.sztab h3 small{font-weight:600;color:var(--accent);margin-left:8px;font-size:12px}
.szrow{display:flex;flex-wrap:wrap;gap:8px}.szrow div{border:1px solid var(--line);border-radius:12px;padding:8px 14px;text-align:center;min-width:72px;background:var(--card)}
.szrow b{display:block;font:800 15px/1.2 var(--f-head)}.szrow span{display:block;color:var(--muted);font-size:13px;margin-top:2px}