/* ==========================================================================
   G-Lender website — shared stylesheet (Industrial Strength)
   File .......... assets/style.css
   Version ....... v1.9 (2026-08-23) — mobile touch pass appended at the end
                   of this file: 16px form fields so iOS stops zooming in on
                   focus, and 44-46px tap targets for the menu button, filter
                   chips, pack-size buttons and CTAs. Append-only, all inside
                   media queries — no existing rule was modified and desktop
                   rendering is unchanged. See the block at the end of the file.
   v1.8a ......... (2026-08-13) gallery grid-blowout fix (.pd-in>div min-width:0)
   Updated ....... 2026-08-10 (+ xp-* components; gallery now swipe/scroll carousel .gscroll)
   Summary ....... Design system + all page components for the multi-page site
                   (home, products, product detail, contact). Blue #133C8E +
                   amber #F7A81B, Oswald/Inter.
   Not changed ... Colour tokens kept identical to earlier Industrial Strength
                   mockups. No brand kit used (client brand).
   Risk .......... Product names/specs are placeholders; Google Fonts need net.
   Deployment .... Part of site v1.5 — not yet uploaded to Cloudflare Pages.
   v1.5 change ... Appended xp-* component block at end of file for
                   expertise.html (methodology cards, rating bars, standards
                   grid, warning box, CTA row). No existing rules modified.
   ========================================================================== */
:root{
  --blue:#133C8E;--blue-deep:#0B2559;--blue-bright:#1B4CA8;--blue-800:#0E2E6E;
  --amber:#F7A81B;--amber-deep:#E8940A;--amber-soft:#FFF4DE;
  --graphite:#1C2230;--steel:#4A5162;--slate:#6B7280;
  --mist:#DFE3EC;--line:#E7EBF2;--fog:#F4F6FA;--white:#fff;
  --maxw:1200px;--radius:12px;--sh-sm:0 2px 10px rgba(16,26,54,.06);--sh-md:0 14px 40px rgba(16,26,54,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--graphite);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.05;margin:0}
p{margin:0}a{color:inherit;text-decoration:none}img,svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
section{scroll-margin-top:104px}
.hide{display:none!important}

/* eyebrow + heads */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:Inter,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--amber-deep);margin:0 0 14px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--amber);border-radius:2px}
.eyebrow.light{color:var(--amber)}
.sec-head{max-width:720px;margin:0 0 40px}
.sec-head h2{font-size:34px;color:var(--blue-deep)}
.sec-head.light h2{color:#fff}
.sec-head p{margin-top:14px;color:var(--steel);font-size:16px}
.sec-head.light p{color:#C7D2EA}
.pad{padding:76px 0}
.note{font-size:12px;color:var(--slate);font-style:italic;margin-top:8px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14px;padding:13px 22px;border-radius:10px;cursor:pointer;border:0;transition:.16s;font-family:Inter,sans-serif}
.btn .ic{width:18px;height:18px}
.btn-amber{background:var(--amber);color:var(--blue-deep)}.btn-amber:hover{background:var(--amber-deep);transform:translateY(-1px)}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-800);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.55)}.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-outline{background:#fff;color:var(--blue);border:1.6px solid var(--mist)}.btn-outline:hover{border-color:var(--blue);transform:translateY(-1px)}
.link-more{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--blue)}
.link-more .ic{width:17px;height:17px;transition:.16s}.link-more:hover .ic{transform:translateX(3px)}

/* util bar + header */
.util{background:var(--blue-deep);color:#B8C4E0;font-size:12.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.util a,.util span{display:inline-flex;align-items:center;gap:6px}.util .ic{width:14px;height:14px;color:var(--amber)}
.util-l{display:flex;gap:22px}.util-r{display:flex;gap:22px}.util a:hover{color:#fff}
@media(max-width:720px){.util-l span:nth-child(2){display:none}.util-r a:nth-child(3){display:none}}
header.nav{position:sticky;top:0;z-index:60;background:var(--blue);color:#fff;transition:box-shadow .2s}
header.nav.scrolled{box-shadow:0 6px 24px rgba(11,37,89,.28)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:Archivo,sans-serif;font-weight:900;font-size:24px;letter-spacing:.5px;display:inline-flex;align-items:flex-start;color:#fff}
.brand sup{font-size:10px;font-weight:700;color:var(--amber);margin-top:5px}
.menu{display:flex;align-items:center;gap:26px}
.menu a{font-size:14.5px;font-weight:600;color:#E4EAF7;position:relative;padding:6px 0}
.menu a.active,.menu a:hover{color:#fff}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2.5px;background:var(--amber);transition:right .2s}
.menu a.active::after,.menu a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:14px}
.hamb{display:none;background:transparent;border:0;color:#fff;cursor:pointer;padding:6px}.hamb .ic{width:28px;height:28px}
@media(max-width:980px){.menu,.nav-cta .btn{display:none}.hamb{display:inline-flex}}
.mmenu{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--blue-deep);z-index:120;transform:translateX(100%);transition:transform .25s;padding:24px;display:flex;flex-direction:column;gap:6px}
.mmenu.open{transform:none}
.mmenu a{color:#E4EAF7;font-weight:600;font-size:17px;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.mmenu .btn{margin-top:16px}
.mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mm-top button{background:transparent;border:0;color:#fff;cursor:pointer}
.scrim{position:fixed;inset:0;background:rgba(6,16,38,.5);z-index:110;opacity:0;visibility:hidden;transition:.25s}.scrim.open{opacity:1;visibility:visible}
/* products dropdown (mega-menu) */
.has-drop{position:relative}
.has-drop .drop-t{display:inline-flex;align-items:center;gap:5px}
.has-drop::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:14px}
.dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-md);padding:10px;min-width:360px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s;z-index:70}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;pointer-events:auto}
.dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--steel)}
.dropdown a .ic{width:18px;height:18px;color:var(--amber-deep)}
.dropdown a:hover{background:var(--fog);color:var(--blue-deep)}
.dropdown a::after{display:none}
.dropdown .drop-all{grid-column:1/-1;justify-content:center;color:var(--blue);border-top:1px solid var(--line);margin-top:4px;border-radius:0}
.mm-sec{color:#8FA0C8;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:16px 8px 4px}
.mmenu .mm-fam{color:#C7D2EA;font-weight:500;font-size:15px;padding:11px 8px 11px 16px}
.catgroup{scroll-margin-top:150px}

/* breadcrumb */
.bcrumb{background:var(--fog);border-bottom:1px solid var(--line);font-size:13px;color:var(--slate)}
.bcrumb .wrap{padding:12px 24px}.bcrumb a:hover{color:var(--blue)}.bcrumb span{margin:0 7px;color:#B4BCCC}

/* hero (home) */
.hero{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:0;right:0;width:46%;height:100%;background:linear-gradient(135deg,transparent 42%,rgba(247,168,27,.14) 42%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:60px 0 66px}
.hero h1{font-size:50px;margin:0 0 20px}.hero h1 b{color:var(--amber);font-weight:700}
.hero .lead{font-size:18px;color:#CFD8EC;max-width:46ch;margin:0 0 30px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-mini{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;font-weight:700;letter-spacing:1px;color:#AEBCDD;text-transform:uppercase}
.hero-mini span{display:inline-flex;align-items:center;gap:8px}.hero-mini .ic{width:16px;height:16px;color:var(--amber)}
.hero-vis{position:relative;display:flex;align-items:center;justify-content:center;min-height:330px}
.hero-vis .rings{position:absolute;width:330px;height:330px;border-radius:50%;border:2px dashed rgba(255,255,255,.16)}
.hero-vis .rings.two{width:250px;height:250px;border-style:solid;border-color:rgba(247,168,27,.25)}
.hero-vis .pimg{position:relative;width:300px;height:300px;filter:drop-shadow(0 24px 34px rgba(0,0,0,.35))}
@media(max-width:860px){.hero-in{grid-template-columns:1fr;padding:44px 0 50px}.hero h1{font-size:36px}.hero::before{width:100%;height:38%;top:auto;bottom:0}.hero-vis{min-height:260px;order:-1}}

/* page hero (inner) */
.phero{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:0;right:0;width:40%;height:100%;background:linear-gradient(135deg,transparent 45%,rgba(247,168,27,.14) 45%)}
.phero-in{position:relative;padding:40px 0 46px}
.phero h1{font-size:42px;margin:0 0 14px}
.phero p{color:#CFD8EC;max-width:60ch;font-size:16px}
.phero-tools{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
@media(max-width:640px){.phero h1{font-size:30px}}

/* trust bar */
.trust{background:var(--blue-deep);color:#fff}
.trust-in{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap;padding:18px 0}
.trust-in .lbl{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#93A2C8}
.tbadge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#DCE4F5}
.tbadge .ic{width:18px;height:18px;color:var(--amber);stroke-width:2.4}

/* generic grids/cards */
.grid{display:grid;gap:18px}
.g-cat{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.18s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.card:hover{border-color:#CBD5EA;box-shadow:var(--sh-md);transform:translateY(-3px)}.card:hover::before{transform:scaleX(1)}
.cat-ic{width:52px;height:52px;border-radius:12px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;color:var(--amber-deep);margin-bottom:16px}
.cat-ic .ic{width:26px;height:26px;stroke-width:1.9}
.card h3{font-size:19px;color:var(--blue-deep);margin-bottom:8px}.card .desc{font-size:14px;color:var(--steel);margin-bottom:16px}

/* product image with graceful placeholder */
.pimg{position:relative;display:flex;align-items:center;justify-content:center}
.pimg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pimg .ph{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--blue-bright)}
.pimg.noimg img{display:none}
.pimg.noimg .ph{display:flex}
.ph .phlabel{font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--slate);text-transform:uppercase}

/* product cards */
.g-prod{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:.18s;position:relative;overflow:hidden;display:flex;flex-direction:column}
.prod::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .2s;z-index:2}
.prod:hover{border-color:#CBD5EA;box-shadow:var(--sh-md);transform:translateY(-3px)}.prod:hover::before{transform:scaleX(1)}
.prod-top{background:linear-gradient(180deg,#fff,var(--fog));height:180px;position:relative;padding:14px}
.prod-top .pimg{width:100%;height:100%}
.prod-top .pimg img{max-height:152px}
.prod-cat{position:absolute;top:11px;left:11px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:5px 9px;border-radius:6px;z-index:2}
.prod-body{padding:18px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:17px;color:var(--blue-deep);margin-bottom:3px}
.prod .sub{font-size:12.5px;color:var(--amber-deep);font-weight:700;letter-spacing:.3px;margin-bottom:11px}
.spec-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.spec-badges span{background:var(--amber-soft);color:#7A5206;font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px}
.packs{font-size:12px;color:var(--slate);margin-bottom:15px;line-height:1.5}.packs b{color:var(--steel)}
.prod-btns{display:flex;gap:8px;margin-top:auto}
.prod-btns .btn{padding:9px 12px;font-size:12.5px;flex:1}

/* home featured 2-col with big image */
.g-feat{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* product finder */
.finder{background:var(--fog);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.finder-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);padding:24px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12.5px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.6px}
.field select,.field input,.field textarea{border:1.5px solid var(--mist);border-radius:10px;padding:0 14px;height:48px;font-size:14.5px;font-family:Inter,sans-serif;color:var(--graphite);background:#fff;transition:.15s;width:100%}
.field textarea{height:auto;min-height:90px;padding:12px 14px;resize:vertical}
.field select:focus,.field input:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(19,60,142,.12)}
.finder .btn{height:48px}
.finder-result{margin-top:20px;background:var(--blue);color:#fff;border-radius:14px;padding:22px 24px;display:none;grid-template-columns:1fr auto;gap:20px;align-items:center;box-shadow:var(--sh-md)}
.finder-result.show{display:grid}
.fr-tag{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.fr-name{font-size:22px;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.4px}
.fr-meta{color:#CFD8EC;font-size:14px;margin-top:5px}
@media(max-width:820px){.finder-card{grid-template-columns:1fr 1fr}.finder-card .btn{grid-column:1/-1}.finder-result{grid-template-columns:1fr}}

/* catalogue controls */
.controls{position:sticky;top:66px;z-index:40;background:#fff;border-bottom:1px solid var(--line);padding:14px 0}
.controls-in{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--fog);border:1.5px solid var(--mist);border-radius:10px;padding:0 14px;height:46px}
.search input{border:0;background:transparent;outline:0;width:100%;font-size:14.5px;font-family:Inter,sans-serif;color:var(--graphite)}
.search .ic{width:19px;height:19px;color:var(--slate)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--mist);background:#fff;color:var(--steel);font-weight:600;font-size:13.5px;padding:10px 15px;border-radius:9px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:#B9C1D4}.chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.chip .ic{width:16px;height:16px}.chip .ct{font-size:11px;opacity:.7}
.catwrap{padding:44px 0 20px}
.cat-title{display:flex;align-items:center;gap:14px;margin:34px 0 18px}.cat-title:first-child{margin-top:0}
.cat-title h2{font-size:23px;color:var(--blue-deep)}
.cat-title .bar{height:3px;flex:1;background:linear-gradient(90deg,var(--amber),transparent);border-radius:2px}
.cat-title .ct{font-size:12.5px;color:var(--slate);font-weight:700}
.noresult{display:none;text-align:center;padding:50px 0;color:var(--slate)}.noresult.show{display:block}

/* stats band */
.stats{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 60%,rgba(247,168,27,.12) 60%)}
.stats-in{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:50px 0;text-align:center}
.stat .num{font-family:Oswald,sans-serif;font-weight:700;font-size:44px;color:var(--amber);line-height:1}
.stat .cap{font-size:13px;color:#C7D2EA;margin-top:8px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
@media(max-width:640px){.stats-in{grid-template-columns:1fr 1fr;gap:28px 20px}.stat .num{font-size:36px}}

/* why grid */
.g-why{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.why{padding:24px;border:1px solid var(--line);border-radius:12px;background:#fff}
.why .ic-wrap{width:48px;height:48px;border-radius:12px;background:var(--blue);color:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.why .ic-wrap .ic{width:25px;height:25px;stroke-width:2}
.why h3{font-size:17px;color:var(--blue-deep);margin-bottom:8px}.why p{font-size:13.5px;color:var(--steel)}

/* distributor CTA */
.distrib{background:var(--blue-deep);color:#fff;position:relative;overflow:hidden}
.distrib::before{content:"";position:absolute;top:-40%;right:-6%;width:420px;height:420px;border-radius:50%;border:2px dashed rgba(255,255,255,.1)}
.distrib-in{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;padding:56px 0}
.distrib h2{font-size:32px;color:#fff}.distrib p{color:#C7D2EA;font-size:16px;margin-top:14px;max-width:52ch}
.distrib-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:820px){.distrib-in{grid-template-columns:1fr}.distrib-btns{justify-content:flex-start}}

/* product detail */
.pd-hero{padding:40px 0 50px}
.pd-in{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.pd-in>div{min-width:0}  /* v1.8a: stop multi-slide gallery blowing out the grid column */
.gallery{background:var(--blue);border-radius:16px;padding:30px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:420px}
.gallery::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 45%,rgba(247,168,27,.16) 45%)}
.gallery .rings{position:absolute;width:330px;height:330px;border-radius:50%;border:2px dashed rgba(255,255,255,.16)}
.gallery .pimg{position:relative;width:320px;height:360px}
.gallery .pimg img{max-height:360px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))}
.gallery .pimg .ph{color:#fff}
.pcat{display:inline-flex;align-items:center;gap:8px;background:var(--amber-soft);color:#7A5206;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:6px 12px;border-radius:20px;margin-bottom:14px}
.ptitle{font-size:38px;color:var(--blue-deep);margin-bottom:6px}
.pgrade{font-size:15px;color:var(--amber-deep);font-weight:700;letter-spacing:.4px;margin-bottom:16px}
.pdesc{font-size:15.5px;color:var(--steel);margin-bottom:20px;max-width:52ch}
.kbadges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.kbadges span{background:#fff;border:1.5px solid var(--mist);color:var(--blue-deep);font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:8px;display:inline-flex;align-items:center;gap:7px}
.kbadges .ic{width:15px;height:15px;color:var(--amber-deep);stroke-width:2.4}
.buybox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--sh-sm)}
.bb-label{font-size:12px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.packsel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.psize{border:1.5px solid var(--mist);background:#fff;color:var(--steel);font-weight:700;font-size:13px;padding:9px 14px;border-radius:9px;cursor:pointer;transition:.15s}
.psize:hover{border-color:#B9C1D4}.psize.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pricerow{display:flex;align-items:center;gap:10px;background:var(--fog);border:1px dashed var(--mist);border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:13.5px;color:var(--steel)}
.pricerow .ic{width:20px;height:20px;color:var(--amber-deep)}
.bb-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bb-btns .btn{padding:12px 14px;font-size:13.5px}.bb-btns .full{grid-column:1/-1}
@media(max-width:900px){.pd-in{grid-template-columns:1fr}.gallery{min-height:320px}.ptitle{font-size:30px}}
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.tab{background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:12px 18px;font-family:Inter,sans-serif;font-weight:700;font-size:14.5px;color:var(--slate);cursor:pointer}
.tab.active{color:var(--blue-deep);border-color:var(--amber)}
.tpane{display:none}.tpane.active{display:block}
.lead-copy{font-size:16px;color:var(--steel);max-width:76ch;margin-bottom:18px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px}
.feat{background:var(--fog);border:1px solid var(--line);border-radius:12px;padding:18px}
.feat .ic-wrap{width:40px;height:40px;border-radius:10px;background:var(--blue);color:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.feat .ic-wrap .ic{width:21px;height:21px;stroke-width:2}
.feat h4{font-size:15px;color:var(--blue-deep);margin-bottom:6px}.feat p{font-size:13.5px;color:var(--steel)}
table.spec,table.packtable{width:100%;border-collapse:collapse;font-size:14px}
table.spec caption{text-align:left;font-size:12.5px;color:var(--slate);font-style:italic;margin-bottom:10px}
table.spec th,table.spec td,.packtable th,.packtable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
table.spec th,.packtable th{background:var(--fog);color:var(--blue-deep);font-family:Inter,sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px}
table.spec td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.approw{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.approw span{background:var(--amber-soft);color:#7A5206;font-weight:700;font-size:13px;padding:8px 14px;border-radius:8px}
.applist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:6px}
.appitem{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.appitem .ic{width:22px;height:22px;color:var(--blue);flex:none}.appitem b{color:var(--blue-deep);font-size:14px}.appitem p{font-size:13px;color:var(--steel)}

/* related */
.related{background:var(--fog);border-top:1px solid var(--line)}
.rel-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}.rel-head h2{font-size:24px;color:var(--blue-deep)}.rel-head .bar{height:3px;flex:1;background:linear-gradient(90deg,var(--amber),transparent);border-radius:2px}

/* forms / contact */
.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);padding:26px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .full{grid-column:1/-1}
.form-card h3{font-size:22px;color:var(--blue-deep);margin-bottom:4px}
.form-card .sub{color:var(--steel);font-size:14px;margin-bottom:18px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}
.cinfo{display:flex;flex-direction:column;gap:16px}
.crow{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.crow .ic-wrap{width:44px;height:44px;border-radius:10px;background:var(--amber-soft);color:var(--amber-deep);display:flex;align-items:center;justify-content:center;flex:none}
.crow b{color:var(--blue-deep);font-size:15px;display:block;margin-bottom:2px}.crow p,.crow a{color:var(--steel);font-size:13.5px}.crow a:hover{color:var(--blue)}
.done-inline{display:none;background:var(--amber-soft);border:1px solid #F3D89A;border-radius:12px;padding:16px;color:#7A5206;font-size:14px;font-weight:600;margin-top:14px}
.done-inline.show{display:block}

/* footer */
footer{background:var(--graphite);color:#AEB4C4;font-size:14px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:52px 0 36px}
.foot .brand{color:#fff;margin-bottom:14px}
.foot-about{font-size:13.5px;color:#8E94A6;max-width:34ch;margin-bottom:16px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#C7CCD8;transition:.15s}
.foot-social a:hover{background:var(--amber);color:var(--blue-deep)}
.foot-col h4{font-family:Inter,sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#fff;margin-bottom:15px}
.foot-col a{display:block;color:#9AA1B2;padding:6px 0;font-size:13.5px}.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#7C8296}
.foot-bottom .disc{color:#6A7085;font-style:italic}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}@media(max-width:520px){.foot-top{grid-template-columns:1fr}}

/* modal */
.modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(6,16,38,.62)}
.modal-card{position:relative;background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.modal-head{background:var(--blue);color:#fff;padding:22px 24px;position:relative}
.modal-head .eyebrow{color:var(--amber);margin-bottom:8px}.modal-head h3{font-size:22px}.modal-head p{color:#CFD8EC;font-size:13.5px;margin-top:6px}
.modal-x{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.12);border:0;color:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-body{padding:22px 24px 26px}
.modal .field{margin-bottom:14px}
.modal .btn{width:100%;margin-top:4px}
.modal-note{font-size:11.5px;color:var(--slate);margin-top:12px;text-align:center}
.done{display:none;text-align:center;padding:30px 10px}.done.show{display:block}
.done .tick{width:60px;height:60px;border-radius:50%;background:var(--amber-soft);color:var(--amber-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.done h3{font-size:20px;color:var(--blue-deep);margin-bottom:8px}.done p{color:var(--steel);font-size:14px}.mform.hide{display:none}

/* whatsapp + back to top */
.wa{position:fixed;right:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#053b1e;font-weight:700;font-size:14px;padding:12px 18px;border-radius:30px;box-shadow:var(--sh-md);transition:.16s}
.wa:hover{transform:translateY(-2px)}.wa .ic{width:22px;height:22px;stroke:#053b1e}
@media(max-width:520px){.wa span{display:none}.wa{padding:14px;border-radius:50%}}
.totop{position:fixed;right:22px;bottom:82px;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-md);opacity:0;visibility:hidden;transition:.2s;z-index:89}
.totop.show{opacity:1;visibility:visible}.totop:hover{background:var(--amber);color:var(--blue-deep)}

/* reveal */
.no-js .reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* =====================================================================
   PREMIUM OVERHAUL — v1.1 (2026-07-22)
   Adds depth, motion, realistic renders, and new sections. Layered on
   top of the base system above; later rules intentionally override.
   ===================================================================== */

/* motion primitives */
.js .reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal[data-d]{transition-delay:calc(var(--d,0)*90ms)}
.js .reveal.up{transform:translateY(26px)}
.js .reveal.scale{transform:scale(.94)}
.js .reveal.left{transform:translateX(-26px)}
.js .reveal.in{transform:none!important}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none}}

/* refined buttons */
.btn{border-radius:11px;letter-spacing:.2px;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s}
.btn-amber{background:linear-gradient(180deg,#FBB733,#F7A81B);box-shadow:0 8px 20px rgba(247,168,27,.32),inset 0 1px 0 rgba(255,255,255,.4);color:#3A2600}
.btn-amber:hover{background:linear-gradient(180deg,#FFC24D,#F09C0C);transform:translateY(-2px);box-shadow:0 12px 26px rgba(247,168,27,.42)}
.btn-blue{background:linear-gradient(180deg,#1B4CA8,#123C8E);box-shadow:0 8px 20px rgba(11,37,89,.3)}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,37,89,.4)}
.btn-lg{padding:16px 30px;font-size:15.5px}

/* premium hero */
.hero{background:#0B2559;isolation:isolate}
.hero::before{display:none}
.hero .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
   radial-gradient(1100px 520px at 78% -8%, rgba(247,168,27,.20), transparent 60%),
   radial-gradient(760px 520px at 8% 108%, rgba(46,91,192,.55), transparent 60%),
   linear-gradient(135deg,#0B2559 0%,#123C8E 52%,#0B2559 100%)}
.hero .hero-bg::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(680px 480px at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(680px 480px at 70% 30%,#000,transparent 75%)}
.hero .hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:#fff;clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.hero-in{position:relative;z-index:2;padding:78px 0 92px}
.hero h1{font-family:Archivo,sans-serif;font-weight:900;text-transform:none;letter-spacing:-1.5px;font-size:58px;line-height:1.02;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 b{color:transparent;background:linear-gradient(180deg,#FFCF7A,#F7A81B);-webkit-background-clip:text;background-clip:text;font-weight:900}
.hero .lead{font-size:19px;color:#CFDAF2}
.js .hero-copy>*{opacity:0;animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero-copy>*:nth-child(1){animation-delay:.05s}
.js .hero-copy>*:nth-child(2){animation-delay:.16s}
.js .hero-copy>*:nth-child(3){animation-delay:.27s}
.js .hero-copy>*:nth-child(4){animation-delay:.38s}
.js .hero-copy>*:nth-child(5){animation-delay:.49s}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;font-size:12px;color:#FFD98A;margin:0 0 18px;padding:7px 14px;border:1px solid rgba(247,168,27,.35);border-radius:30px;background:rgba(247,168,27,.08)}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#F7A81B;box-shadow:0 0 0 4px rgba(247,168,27,.25);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(247,168,27,.25)}50%{box-shadow:0 0 0 8px rgba(247,168,27,0)}}
.hero-vis{min-height:400px}
.hero-vis .ring{position:absolute;border-radius:50%}
.hero-vis .ring.r1{width:360px;height:360px;border:1.5px dashed rgba(255,255,255,.18);animation:spin 44s linear infinite}
.hero-vis .ring.r2{width:270px;height:270px;border:2px solid rgba(247,168,27,.3);animation:spin 30s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-drum{position:relative;z-index:2;max-width:300px;width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-chip{position:absolute;z-index:3;background:rgba(255,255,255,.96);color:#0B2559;border-radius:12px;padding:11px 15px;box-shadow:0 16px 40px rgba(0,0,0,.28);font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:10px;backdrop-filter:blur(4px)}
.hero-chip small{display:block;font-weight:500;color:var(--slate);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.hero-chip .ic{width:22px;height:22px;color:var(--amber-deep)}
.hero-chip.c1{top:26px;left:-6%;animation:float 6.5s ease-in-out infinite}
.hero-chip.c2{bottom:44px;right:-4%;animation:float 5.5s ease-in-out .8s infinite}
@media(max-width:860px){.hero h1{font-size:38px}.hero-chip.c1{left:2%}.hero-chip.c2{right:2%}}

/* section rhythm + eyebrow */
.pad{padding:88px 0}
.sec-head h2{font-size:38px;letter-spacing:-.6px}
.eyebrow{font-size:12.5px}
.dark-sec{background:#0B2559;color:#fff;position:relative}
.dark-sec .sec-head h2{color:#fff}.dark-sec .sec-head p{color:#C7D2EA}

/* premium cards + image treatment */
.card,.prod,.why,.app,.res{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.prod{border-radius:16px}
.prod:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(16,26,54,.16)}
.prod-top{overflow:hidden}
.prod-top .pimg,.prod-top img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.prod:hover .prod-top img,.prod:hover .prod-top .render{transform:scale(1.06)}
.card:hover{transform:translateY(-6px)}
.why:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(16,26,54,.12);border-color:#CBD5EA}
.why .ic-wrap{background:linear-gradient(150deg,#1B4CA8,#0B2559);box-shadow:0 10px 22px rgba(11,37,89,.28)}

/* realistic render (SVG bottle/drum placeholder) */
.render{filter:drop-shadow(0 18px 22px rgba(11,37,89,.28))}
.prod-top{background:radial-gradient(120% 90% at 50% 8%,#fff, #EAF0FA 96%)}
.pimg .ph{gap:4px}
.pimg .phtag{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#9AA6BE}

/* angled divider utility */
.slant{position:relative}
.slant::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;background:inherit;clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}

/* stat counters */
.stats{background:linear-gradient(135deg,#0B2559,#123C8E)}
.stat .num{font-size:52px;background:linear-gradient(180deg,#FFCF7A,#F7A81B);-webkit-background-clip:text;background-clip:text;color:transparent}

/* industries marquee */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 22px;white-space:nowrap;font-weight:700;color:var(--blue-deep);font-size:15px}
.mq-item .ic{width:24px;height:24px;color:var(--amber-deep)}
.dark-sec .mq-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.dark-sec .mq-item .ic{color:var(--amber)}

/* testimonials */
.trow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.trow{grid-template-columns:1fr}}
.tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 10px 30px rgba(16,26,54,.06);position:relative}
.tcard .stars{color:#F7A81B;font-size:15px;letter-spacing:2px;margin-bottom:12px}
.tcard p{font-size:15px;color:var(--steel);line-height:1.65}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.tcard .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,#1B4CA8,#0B2559);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:Archivo,sans-serif}
.tcard .who b{color:var(--blue-deep);font-size:14.5px;display:block}
.tcard .who span{color:var(--slate);font-size:12.5px}
.rating-badge{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 22px;box-shadow:var(--sh-sm)}
.rating-badge .big{font-family:Archivo,sans-serif;font-weight:900;font-size:34px;color:var(--blue-deep);line-height:1}
.rating-badge .stars{color:#F7A81B;letter-spacing:2px}

/* process / quality steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;position:relative;transition:.22s}
.step:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(16,26,54,.12)}
.step .n{font-family:Archivo,sans-serif;font-weight:900;font-size:44px;line-height:1;color:transparent;background:linear-gradient(180deg,#DfE7F5,#B9C7E6);-webkit-background-clip:text;background-clip:text;margin-bottom:10px}
.step h3{font-size:17px;color:var(--blue-deep);margin-bottom:7px}.step p{font-size:13.5px;color:var(--steel)}
.step .ic{width:26px;height:26px;color:var(--amber-deep);position:absolute;top:26px;right:22px}

/* FAQ accordion */
.faq{max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item.open{border-color:#CBD5EA;box-shadow:0 14px 34px rgba(16,26,54,.08)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 22px;font-family:Inter,sans-serif;font-weight:700;font-size:16px;color:var(--blue-deep);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-q .ic{width:22px;height:22px;color:var(--amber-deep);flex:none;transition:transform .25s}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 22px 20px;color:var(--steel);font-size:14.5px;line-height:1.7}

/* CTA glow band */
.distrib{background:linear-gradient(135deg,#0B2559,#123C8E)}
.distrib::after{content:"";position:absolute;right:-6%;top:-40%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(247,168,27,.22),transparent 62%)}

/* premium tweaks (v1.1) */
.pimg .render{height:158px;width:auto;max-width:92%}
.prod-top .pimg .render{height:150px}
.gallery .pimg .render{height:300px}
.hero .hero-bg::after{background:#F4F6FA}
.faq-item.open .faq-q .ic{transform:rotate(90deg)}

/* "more grades in this range" chips (v1.1) */
.range{margin:14px 0 6px;padding:18px 20px;background:var(--fog);border:1px dashed var(--mist);border-radius:14px}
.range-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--slate);margin-bottom:12px}
.range-list{display:flex;flex-wrap:wrap;gap:8px}
.range-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:8px 14px;font-family:Inter,sans-serif;font-weight:600;font-size:13px;color:var(--blue-deep);cursor:pointer;transition:.15s}
.range-chip:hover{border-color:var(--amber);color:var(--amber-deep);transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,26,54,.08)}
.range-chip .ic{width:14px;height:14px;color:var(--amber-deep);opacity:.7}

/* ===== app-like mobile experience (v1.2) — active on phones only ===== */
.appnav{display:none}
@media (max-width:768px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .util{display:none}
  .appnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,26,54,.1);padding:7px 4px calc(7px + env(safe-area-inset-bottom));justify-content:space-around}
  .appnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;color:var(--slate);font-size:10px;font-weight:700}
  .appnav a .ic{width:22px;height:22px}
  .appnav a.on{color:var(--blue)}
  .appnav a:active{transform:scale(.92)}
  .wa{display:none!important}
  .totop{right:16px;bottom:calc(78px + env(safe-area-inset-bottom));width:44px;height:44px}
  .modal{align-items:flex-end}
  .modal-card{width:100%;max-width:100%;max-height:90vh;border-radius:20px 20px 0 0}
  .modal.open .modal-card{animation:gl-sheet .3s cubic-bezier(.2,.7,.2,1)}
  @keyframes gl-sheet{from{transform:translateY(100%)}to{transform:none}}
  #featured-grid{display:flex!important;grid-template-columns:none;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 0 12px;scrollbar-width:none}
  #featured-grid::-webkit-scrollbar{display:none}
  #featured-grid>.prod{flex:0 0 82%;scroll-snap-align:start}
  .hero h1{font-size:34px}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{width:100%}
  .btn-lg{padding:15px 22px}
  .g-cat{grid-template-columns:1fr 1fr}
  .pad{padding:56px 0}
}

/* ===== mobile overflow + fit fixes (v1.2) ===== */
html{overflow-x:clip}
body{overflow-x:clip}
@media (max-width:768px){
  /* remove oversized decorative circles/glows that pushed the layout wide */
  .distrib::before,.distrib::after,.stats::after,.ctaband::before,.hero-vis .ring{display:none}
  /* keep big headings inside the screen */
  .sec-head h2{font-size:27px}
  .distrib h2{font-size:26px}
  .phero h1{font-size:27px}
  .hero h1{font-size:32px;letter-spacing:-1px}
  .rating-badge .big{font-size:30px}
  /* full-width, guaranteed-fit CTAs */
  .distrib-btns{flex-direction:column;align-items:stretch}
  .distrib-btns .btn{width:100%}
  .phero-tools{flex-direction:column;align-items:stretch}
  .phero-tools .btn{width:100%}
  .ctaband-btns{flex-direction:column;align-items:stretch}
  .ctaband-btns .btn{width:100%}
}

/* mobile hero tags + FAB tidy (v1.2) */
@media (max-width:768px){
  .hero-mini{flex-direction:column;align-items:flex-start;gap:12px;margin-top:4px}
  .totop{display:none}
}

/* mobile menu scroll fix (v1.2) */
.mmenu{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:36px}
.mmenu .mm-top{position:sticky;top:0;z-index:1;background:var(--blue-deep);padding-bottom:12px}

/* ===== PWA: app-style cross-page transitions + install chip (v1.3) ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:gl-vt-out .22s ease both}
::view-transition-new(root){animation:gl-vt-in .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes gl-vt-out{to{opacity:0;transform:translateX(-2%)}}
@keyframes gl-vt-in{from{opacity:0;transform:translateX(4%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.gl-install{position:fixed;left:22px;bottom:22px;z-index:96;display:none;align-items:center;gap:8px;background:linear-gradient(180deg,#1B4CA8,#0B2559);color:#fff;border:0;border-radius:30px;padding:12px 18px;font-family:Inter,sans-serif;font-weight:700;font-size:14px;box-shadow:0 12px 30px rgba(11,37,89,.4);cursor:pointer}
.gl-install.show{display:inline-flex}
.gl-install .ic{width:18px;height:18px}
@media (max-width:768px){.gl-install{left:12px;right:auto;bottom:calc(80px + env(safe-area-inset-bottom));font-size:13px;padding:10px 15px}}

/* ===== mobile grid collapse — stop 2-col overflow (v1.3) ===== */
@media (max-width:768px){
  /* stack these fully so nothing is cut off */
  .steps,.feat-grid,.applist,.g-why,.trow{grid-template-columns:1fr}
  /* keep 2-up but allow columns to shrink below content (minmax 0) */
  .g-cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* let any grid item shrink */
  .step,.card,.prod,.why,.tcard,.feat,.appitem{min-width:0}
  .hero-eyebrow{white-space:normal}
}
@media (max-width:520px){
  .fgrid{grid-template-columns:1fr}
}

/* mobile hardening — keep renders & rings inside the viewport (v1.3) */
@media (max-width:768px){
  .hero-vis .rings,.gallery .rings{display:none}
  .hero-vis .pimg{max-width:78%;height:auto}
  .gallery .pimg{max-width:86%;height:auto}
  .render{max-width:100%}
  table.spec{width:100%;table-layout:fixed}
  table.spec td:last-child{white-space:normal}
}

/* footer HQ address (v1.3) */
.foot-addr{display:flex;gap:9px;align-items:flex-start;margin:14px 0 2px;color:#AEB6C6;font-size:13.5px;line-height:1.55;max-width:340px}
.foot-addr .ic{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:var(--amber)}

/* ===== contact: Find-us location band (v1.3) ===== */
.locate-sec{background:var(--fog)}
.locate{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--sh-md);background:#fff}
.locate-map{position:relative;min-height:280px;background:radial-gradient(circle at 32% 42%,rgba(19,60,142,.12),transparent 58%),linear-gradient(#eef2f8,#e4eaf3)}
.locate-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(19,60,142,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(19,60,142,.09) 1px,transparent 1px);background-size:32px 32px}
.locate-map::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 44%,rgba(247,168,27,.20) 44% 46%,transparent 46%),linear-gradient(28deg,transparent 62%,rgba(19,60,142,.10) 62% 63%,transparent 63%)}
.locate-pin{position:absolute;top:48%;left:50%;transform:translate(-50%,-100%) rotate(-45deg);z-index:2;width:50px;height:50px;border-radius:50% 50% 50% 0;background:var(--amber);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(11,37,89,.30)}
.locate-pin .ic{width:24px;height:24px;color:var(--blue-deep);transform:rotate(45deg)}
.locate-body{padding:38px 38px 32px;align-self:center}
.locate-eyebrow{display:inline-block;font-family:Archivo,sans-serif;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px;color:var(--amber-deep);margin-bottom:6px}
.locate-body h2{font-family:Archivo,sans-serif;font-size:27px;line-height:1.15;color:var(--blue-deep);margin:0 0 12px}
.locate-addr{color:var(--slate);font-size:15.5px;line-height:1.7;margin:0 0 22px}
.locate-btns{display:flex;gap:12px;flex-wrap:wrap}
.locate-note{margin:16px 0 0;font-size:12.5px;color:var(--steel)}
.foot-addr{text-decoration:none;transition:color .15s}
.foot-addr:hover{color:#fff}
@media(max-width:768px){.locate{grid-template-columns:1fr}.locate-map{min-height:170px}.locate-body{padding:26px 22px}.locate-btns{flex-direction:column;align-items:stretch}.locate-btns .btn{width:100%;justify-content:center}}

/* product photo cutouts — 3D floating shadow (v1.3) */
.prod-top .pimg img{filter:drop-shadow(0 16px 20px rgba(11,37,89,.26))}

/* ===== Guided Lubricant Finder (v1.4) ===== */
.lubefinder{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-md);padding:30px;max-width:900px;margin:0 auto;min-height:300px}
.lf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;min-height:24px}
.lf-step{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:11px;color:var(--amber-deep)}
.lf-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--slate);font-weight:700;font-size:13px;cursor:pointer;font-family:Inter,sans-serif;padding:4px 6px;border-radius:8px}
.lf-back:hover{color:var(--blue-deep);background:var(--fog)}
.lf-back .ic{width:14px;height:14px}
.lf-back[data-back] .ic{transform:rotate(180deg)}
.lf-q{font-family:Archivo,sans-serif;font-size:24px;line-height:1.15;color:var(--blue-deep);margin:0 0 4px}
.lf-hint{color:var(--slate);font-size:14px;margin:0 0 18px}
.lf-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.lf-opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--fog);border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;font-weight:600;color:var(--blue-deep);transition:.15s}
.lf-opt:hover{border-color:var(--amber);background:#fff;transform:translateY(-2px);box-shadow:var(--sh-sm)}
.lf-opt .lf-ic{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:var(--blue);display:flex;align-items:center;justify-content:center}
.lf-opt .lf-ic .ic{width:21px;height:21px;color:#fff}
.lf-opt .lf-lbl{flex:1;line-height:1.3}
.lf-opt>.ic{width:16px;height:16px;color:var(--amber-deep);flex:0 0 16px}
.lf-r-tag{display:inline-flex;align-items:center;gap:7px;font-family:Archivo,sans-serif;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:11px;color:#1a8a4a}
.lf-r-tag .ic{width:15px;height:15px}
.lf-r-type{font-family:Archivo,sans-serif;font-size:30px;line-height:1.12;color:var(--blue-deep);margin:2px 0 16px}
.lf-r-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.lf-spec{background:var(--fog);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lf-spec span{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
.lf-spec b{color:var(--blue-deep);font-size:14px;font-weight:700;line-height:1.35}
.lf-r-why{color:var(--steel);font-size:15px;line-height:1.6;margin:0 0 16px}
.lf-r-ex{margin-bottom:16px}
.lf-r-ex>span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--slate);margin-bottom:9px}
.lf-chips{display:flex;flex-wrap:wrap;gap:8px}
.lf-chip{background:var(--amber-soft);color:var(--amber-deep);border:1px solid #F3D9A6;border-radius:20px;padding:6px 13px;font-size:13px;font-weight:700}
.lf-note{display:flex;gap:11px;align-items:flex-start;background:#EAF0FA;border:1px solid #D6E2F5;border-radius:12px;padding:14px 16px;color:var(--blue);font-size:13.5px;line-height:1.55;margin-bottom:18px}
.lf-note .ic{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:var(--blue)}
.lf-r-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:768px){
  .lubefinder{padding:22px 18px;border-radius:16px}
  .lf-opts{grid-template-columns:1fr}
  .lf-r-specs{grid-template-columns:1fr}
  .lf-q{font-size:20px}
  .lf-r-type{font-size:24px}
  .lf-r-btns{flex-direction:column;align-items:stretch}
  .lf-r-btns .btn{width:100%;justify-content:center}
}

/* ===== cookie consent bar (v1.4) ===== */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--blue-deep);color:#fff;box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.cookiebar-in{max-width:1100px;margin:0 auto;padding:15px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cookiebar p{margin:0;font-size:13.5px;color:#D7DEEC;line-height:1.5;flex:1;min-width:230px}
.cookiebar a{color:var(--amber);text-decoration:underline}
.cookiebar-btns{display:flex;gap:10px;flex:0 0 auto}
.cookiebar .btn{padding:10px 20px}
.cookiebar .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}  /* v2.0a: Decline text was white-on-white */
@media(max-width:768px){.cookiebar-in{padding:14px 16px}.cookiebar-btns{width:100%}.cookiebar-btns .btn{flex:1;justify-content:center}}

/* ===== Industries grid (v1.4) ===== */
.indgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ind{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-decoration:none;transition:.16s}
.ind:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--sh-md)}
.ind-ic{width:42px;height:42px;border-radius:11px;background:linear-gradient(160deg,var(--blue-bright),var(--blue-deep));display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.ind-ic .ic{width:21px;height:21px;color:#fff}
.ind b{font-family:Archivo,sans-serif;font-size:15px;color:var(--blue-deep);line-height:1.2}
.ind span:last-child{font-size:12.5px;color:var(--slate);line-height:1.4}
.ind-foot{text-align:center;margin-top:24px;color:var(--slate);font-size:14px}
.ind-foot a{color:var(--blue);font-weight:700;text-decoration:underline}
@media(max-width:980px){.indgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){.indgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.ind{padding:15px 13px}.ind b{font-size:14px}}

/* ===== Home distributor block (v1.4) ===== */
.distrib-in2{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;position:relative;z-index:2}
.dben{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:15px}
.dben li{display:flex;gap:12px;align-items:flex-start}
.dben .ic{width:19px;height:19px;flex:0 0 19px;margin-top:3px;color:var(--amber)}
.dben b{display:block;font-family:Archivo,sans-serif;font-size:15.5px;color:#fff;margin-bottom:2px}
.dben div{color:#C3CCDD;font-size:14px;line-height:1.55}
.dcard{background:#fff;border-radius:18px;padding:28px 26px;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.dcard h3{font-family:Archivo,sans-serif;font-size:23px;color:var(--blue-deep);margin:2px 0 8px;line-height:1.15}
.dcard-sub{color:var(--slate);font-size:14px;line-height:1.6;margin:0 0 18px}
.dtick{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.dtick li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--steel);font-weight:600;line-height:1.45}
.dtick .ic{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:#1a8a4a}
@media(max-width:900px){.distrib-in2{grid-template-columns:1fr;gap:30px}.dcard{padding:24px 20px}}

/* ===== raised centre WhatsApp button in app bar (v1.4) ===== */
.appnav .wa-fab{position:relative;justify-content:flex-end}
.appnav .wa-fab .wa-fab-c{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:linear-gradient(160deg,#2ee06d,#1EBE57);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(30,190,87,.42),0 0 0 5px #fff}
.appnav .wa-fab .wa-fab-c .ic{width:27px;height:27px;color:#fff}
.appnav .wa-fab span:last-child{color:#1EBE57;font-weight:700}
.appnav .wa-fab:active .wa-fab-c{transform:translateX(-50%) scale(.93)}
@media(max-width:768px){.appnav{overflow:visible}}
.appnav a.wa-fab:active{transform:none}
.appnav .wa-fab{padding-top:5px}

/* ===== form done-panel: email fallback (v1.4) ===== */
.done-alt{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;align-items:center}
.done-or{margin:0 0 4px;font-size:13.5px;color:var(--slate)}
.done-alt .btn{width:100%;max-width:290px;justify-content:center}
.btn-ghost2{background:#fff;border:1.5px solid var(--line);color:var(--blue-deep);font-weight:700}
.btn-ghost2:hover{border-color:var(--amber)}
/* official WhatsApp glyph is a filled mark, not a stroked outline */
.ic use[href="#i-wa"],svg.ic>use[href="#i-wa"]{fill:currentColor;stroke:none}

/* ===== modal usability fixes (v1.4) ===== */
/* keep the close button visible while the form scrolls */
.modal-head{position:sticky;top:0;z-index:3}
.modal-x{z-index:4;background:rgba(255,255,255,.2)}
.modal-x:hover,.modal-x:active{background:rgba(255,255,255,.34)}
@media(max-width:768px){
  .modal{padding:0}
  /* dvh accounts for the phone browser's address bar */
  .modal-card{max-height:88dvh;max-height:88vh}
  /* grab handle so the sheet reads as dismissible */
  .modal-card::before{content:"";position:sticky;top:0;display:block;height:0;z-index:5}
  .modal-head{padding:18px 20px 16px}
  .modal-head::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.4)}
  .modal-x{top:12px;right:12px;width:38px;height:38px}
  .modal-body{padding-bottom:26px}
}

/* ===== legal pages (v1.4) ===== */
.legal{max-width:820px}
.legal h1{font-size:34px;color:var(--blue-deep);margin-bottom:8px;line-height:1.12}
.legal-date{color:var(--slate);font-size:13px;margin-bottom:20px}
.legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.legal-nav a{padding:9px 16px;border-radius:24px;border:1.5px solid var(--line);color:var(--steel);font-size:14px;font-weight:700;text-decoration:none;transition:.15s}
.legal-nav a:hover{border-color:var(--amber);color:var(--blue-deep)}
.legal-nav a.on{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.legal-body{color:var(--steel);font-size:15.5px;line-height:1.75}
.legal-body h2{text-transform:none;font-size:19px;color:var(--blue-deep);margin:30px 0 8px;font-family:Archivo,sans-serif}
.legal-body p{margin:0 0 12px}
.legal-body a{color:var(--blue);font-weight:600}
.legal-body strong{color:var(--graphite)}
.legal-addr{margin-top:16px;padding:14px 16px;background:var(--fog);border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.6}
.legal-foot{margin-top:34px}
/* footer legal + studio credit */
.foot-legal{display:flex;gap:16px;flex-wrap:wrap}
.foot-legal a{color:#9AA1B2;text-decoration:none;font-size:13px}
.foot-legal a:hover{color:var(--amber)}
.foot-credit{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:#8A93A6;font-size:12.5px}
.foot-credit strong{color:#C3CCDD;font-weight:700}
@media(max-width:768px){.legal h1{font-size:27px}.legal-nav a{padding:8px 13px;font-size:13px}}
/* WhatsApp mark is a filled logo — override the global stroke-icon defaults */
.wa .ic,.appnav .wa-fab .ic,.foot-social .ic,.done-alt .ic{}
svg.ic use{}
.ic-wa,.wa svg.ic,.appnav .wa-fab svg.ic{fill:currentColor!important;stroke:none!important}
/* WhatsApp is a filled brand mark — never stroke it */
.ic-wa{fill:currentColor!important;stroke:none!important;stroke-width:0!important}
.ic-wa *{fill:currentColor!important;stroke:none!important}

/* ===== Technical Expertise page (expertise.html) — v1.5 · 2026-08-10 =====
   New xp-* components: methodology duo, profile cards with 1–5 rating bars,
   compatibility warning, standards grid, CTA row. Nothing above modified. */
.xp-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.xp-meth{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--sh-sm)}
.xp-meth-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.xp-meth-head h3{font-size:20px;color:var(--blue-deep)}
.xp-meth-head span{font-size:12.5px;color:var(--slate);font-weight:500}
.xp-meth-head .ic-wrap{flex:none}
.xp-step{display:flex;gap:14px;margin-top:16px}
.xp-step .n{flex:none;width:30px;height:30px;border-radius:9px;background:var(--amber-soft);color:var(--amber-deep);font-family:Oswald,sans-serif;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.xp-step b{display:block;color:var(--blue-deep);font-size:14.5px;margin-bottom:3px}
.xp-step p{font-size:13.5px;color:var(--steel)}
.xp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.xp-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:.18s}
.xp-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.xp-code{align-self:flex-start;background:var(--blue);color:#fff;font-family:Oswald,sans-serif;font-weight:600;font-size:12px;letter-spacing:1px;padding:4px 10px;border-radius:7px;margin-bottom:10px}
.xp-card h3{font-size:18px;color:var(--blue-deep)}
.xp-tag{display:inline-block;font-size:11.5px;font-weight:600;color:var(--amber-deep);text-transform:uppercase;letter-spacing:.6px;margin:5px 0 12px}
.xp-temp{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.xp-temp span{background:var(--fog);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--steel)}
.xp-temp b{color:var(--blue-deep);font-weight:700}
.xp-attrs{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.xp-attr{display:flex;align-items:center;justify-content:space-between;gap:12px}
.xp-attr>span{font-size:12.5px;color:var(--steel);font-weight:500}
.xp-bar{display:flex;gap:3px}
.xp-bar i{width:16px;height:6px;border-radius:3px;background:var(--mist)}
.xp-bar[data-v="1"] i:nth-child(-n+1),.xp-bar[data-v="2"] i:nth-child(-n+2),.xp-bar[data-v="3"] i:nth-child(-n+3),.xp-bar[data-v="4"] i:nth-child(-n+4),.xp-bar[data-v="5"] i:nth-child(-n+5){background:var(--amber)}
.xp-uses{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.xp-uses span{background:var(--amber-soft);color:#7A5206;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:14px}
.xp-warn{display:flex;gap:14px;align-items:flex-start;background:var(--amber-soft);border:1px solid #F3D9A6;border-radius:14px;padding:18px 20px;margin-top:22px}
.xp-warn .ic{color:var(--amber-deep);flex:none;margin-top:2px}
.xp-warn b{color:var(--blue-deep)}
.xp-warn div{font-size:14px;color:var(--steel)}
.xp-std{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.xp-std-i{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.xp-std-i b{display:block;font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.5px;color:var(--blue-deep);font-size:15px}
.xp-std-i span{font-size:12.5px;color:var(--slate)}
.xp-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media(max-width:860px){
  .xp-duo{grid-template-columns:1fr}
  .xp-grid{grid-template-columns:1fr}
  .xp-cta{flex-direction:column;align-items:stretch}
  .xp-cta .btn{width:100%;justify-content:center}
}

/* ===== Product detail: swipeable image carousel + thumbnails (v1.5.2 · 2026-08-10) =====
   Used when a product has imgs[] extra views (e.g. Hydraulic AW 68 drums).
   .gscroll = scroll-snap track (swipe on touch, scroll/drag/arrows on desktop). */
.gallery.has-scroll{overflow:hidden;width:100%;max-width:100%}
.gscroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;z-index:2;height:100%;width:100%;max-width:100%}
.gscroll::-webkit-scrollbar{display:none}
.gslide{flex:0 0 100%;width:100%;min-width:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.gslide img{max-width:78%;max-height:82%;object-fit:contain}
.garrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(16,26,54,.14);transition:.15s}
.garrow .ic{width:20px;height:20px}
.garrow.prev{left:12px}.garrow.prev .ic{transform:rotate(180deg)}
.garrow.next{right:12px}
.garrow:hover{background:#fff;border-color:var(--amber)}
.garrow.off{opacity:.35;pointer-events:none}
.gdots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center;z-index:3}
.gdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(11,37,89,.25);transition:.15s}
.gdot.on{background:var(--amber);border-color:var(--amber-deep);transform:scale(1.15)}
@media(max-width:860px){.garrow{display:none}}  /* touch: swipe + dots are enough */
.gthumbs{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.gthumb{width:64px;height:64px;border-radius:12px;border:1.5px solid var(--line);background:#fff;padding:7px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.gthumb img{max-width:100%;max-height:100%;object-fit:contain}
.gthumb:hover{border-color:#B9C1D4;transform:translateY(-1px)}
.gthumb.active{border-color:var(--amber);box-shadow:0 4px 12px rgba(16,26,54,.10)}

/* ===== Related products: side-scroll strip (v1.5.2 · 2026-08-10) ===== */
.relscroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 4px 18px}
.relscroll::-webkit-scrollbar{display:none}
.relscroll .prod{flex:0 0 250px;scroll-snap-align:start}
.rel-head{position:relative}
.relnav{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:8px}
.garrow.rel{position:static;transform:none;width:36px;height:36px}
.garrow.rel#relprev .ic{transform:rotate(180deg)}
@media(max-width:860px){.relscroll .prod{flex-basis:210px}.relnav{display:none}}

/* ===== Product cards: series line + auto-cycling mini image scroller (v1.6e · 2026-08-10) ===== */
.pseries{display:flex;gap:8px;align-items:flex-start;background:var(--fog);border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:11px;font-size:12px;color:var(--steel);line-height:1.5}
.pseries .ic{width:14px;height:14px;color:var(--amber-deep);flex:none;margin-top:2px}
.pseries b{color:var(--blue-deep)}
.pmini{position:relative;width:100%;height:100%}
.pmini .pmini-s{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.pmini .pmini-s.on{opacity:1}
.pmini-dots{position:absolute;left:0;right:0;bottom:4px;display:flex;gap:5px;justify-content:center;z-index:2}
.pmini-dots span{width:6px;height:6px;border-radius:50%;background:var(--mist);transition:.2s}
.pmini-dots span.on{background:var(--amber)}


/* ===== Expertise hero visual (v1.8d · 2026-08-13) — fills the empty right half ===== */
.xph-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
.xph-vis{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.xph-vis img{max-height:300px;width:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.35));position:relative;z-index:2}
.xph-vis .ring{position:absolute;width:300px;height:300px;border-radius:50%;border:2px dashed rgba(255,255,255,.18)}
.xph-vis .hero-chip{z-index:3}
.xph-vis .c1{top:8%;left:4%}
.xph-vis .c2{bottom:10%;right:0}
@media(max-width:900px){.xph-grid{grid-template-columns:1fr}.xph-vis{display:none}}


/* ===== Image copy deterrent (v1.8g · 2026-08-13) — right-click/drag/long-press save
   blocked on images only; text remains fully selectable for customers. ===== */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}


/* ===== Search catch-net: "we can supply it" panel (v1.8k · 2026-08-13) ===== */
.commonhits{max-width:var(--maxw);margin:0 auto;padding:0 24px 30px}
.ch-head{display:flex;gap:12px;align-items:flex-start;background:#EDF7EF;border:1px solid #BFE3C6;border-radius:14px;padding:16px 18px;margin-bottom:14px;color:var(--steel);font-size:14.5px}
.ch-head .ic{color:#1E7B34;flex:none;margin-top:2px}
.ch-head b{color:var(--blue-deep)}

/* ==========================================================================
   v1.9 MOBILE TOUCH PASS — 2026-08-23 18:30 IST
   APPEND ONLY. Not one rule above this line was changed, and every rule below
   sits inside a media query, so desktop rendering is exactly what it was in
   v1.8. To roll back, delete this block.

   Fixes found by auditing every public page at 360 px and 390 px:
   1. Form fields were 14.5px. iOS Safari zooms the whole page in whenever a
      field under 16px is focused, and the visitor has to pinch back out —
      it hit every enquiry modal, the distributor form and the product search.
   2. The mobile menu button was a 28px tap target and the pack-size and
      filter buttons were 35-38px, all under the 44px comfortable minimum.
   Horizontal overflow was already clean on every page — nothing to fix there.
   ========================================================================== */

/* 1. Stop iOS zooming in on focus */
@media(max-width:820px){
  .field select,.field input,.field textarea,.search input{font-size:16px}
}
@media(pointer:coarse){
  .field select,.field input,.field textarea,.search input{font-size:16px}
}

/* 2. Comfortable tap targets on touch devices of any width */
@media(pointer:coarse){
  .hamb{padding:8px;min-width:46px;min-height:46px;align-items:center;justify-content:center}
  .mm-top button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .range-chip{min-height:44px;display:inline-flex;align-items:center}
  .psize{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:46px}
  /* padding, not min-height, so the wordmark's ® does not shift position */
  .brand{padding:3px 0}
}