:root{--navy:#0D1F3D;--navy2:#0A1931;--gold:#E5A910;--grey:#545454;--muted:#667085;--line:#e7e9ed;--soft:#f6f7f9;--white:#fff;--shadow:0 18px 55px rgba(13,31,61,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);background:#fff;font-family:"Canva Sans","Open Sans",Arial,sans-serif;font-size:15.5px;line-height:1.7}a{color:inherit;text-decoration:none}img{max-width:100%}h1,h2,h3,h4{font-family:"Yeseva One",Georgia,serif;font-weight:400;letter-spacing:0;margin:0}button{font:inherit}
header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(13,31,61,.08)}.nav{min-height:82px;width:90%;max-width:1400px;margin:auto;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;min-width:255px}.brand img{width:50px;height:50px;object-fit:contain}.brand-copy strong{display:block;font-family:"Yeseva One",serif;font-size:19px;line-height:1;color:var(--navy)}.brand-copy span{display:block;color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-top:5px}.links{display:flex;align-items:center;justify-content:flex-end;gap:20px;flex:1}.links>a,.drop>button{border:0;background:none;font-size:11px;font-weight:800;letter-spacing:.035em;color:#283548;cursor:pointer;padding:29px 0;position:relative}.links>a::after,.drop>button::after{content:"";position:absolute;left:0;right:100%;bottom:22px;height:2px;background:var(--gold);transition:right .22s ease}.links>a:hover::after,.drop>button:hover::after{right:0}.drop{position:relative}.drop-menu{position:absolute;top:68px;right:-10px;width:285px;padding:10px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 50px rgba(13,31,61,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;border-radius:12px}.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}.drop-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.35;color:#445064}.drop-menu a:hover{background:#f4f6f8;color:var(--navy)}.nav-sep{height:28px;width:1px;background:var(--line)}.quote{background:var(--navy)!important;color:#fff!important;padding:11px 15px!important;border-radius:5px}.quote:hover{background:var(--gold)!important;color:var(--navy)!important}.menu-toggle{display:none;border:0;background:none;font-size:25px;color:var(--navy)}
.hero{position:relative;min-height:470px;height:470px;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}.hero-media,.hero-scrim{position:absolute;inset:0}.hero-media{z-index:0;overflow:hidden}.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;animation:heroZoom 22s ease-in-out infinite alternate}.hero-scrim{z-index:1;background:linear-gradient(90deg,rgba(10,25,49,.96) 0%,rgba(10,25,49,.82) 36%,rgba(10,25,49,.40) 70%,rgba(10,25,49,.08) 100%)}.hero-inner{position:relative;z-index:2;width:90%;max-width:1400px;height:100%;margin:auto;display:flex;align-items:center;padding:48px 0 58px}.hero-copy{max-width:760px}.eyebrow{display:inline-block;color:var(--gold);font-size:12px;line-height:1.3;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}.hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.06;color:#fff;max-width:780px}.hero h1 span{color:var(--gold)}.hero p{max-width:720px;color:rgba(255,255,255,.83);margin:20px 0 26px;font-size:16px;line-height:1.75}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:5px;font-size:12px;font-weight:800;letter-spacing:.03em;border:1px solid transparent}.btn-primary{background:var(--gold);color:var(--navy)}.btn-outline{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}.btn:hover{transform:translateY(-1px)}
.catalog-intro{padding:70px 0 28px;background:#fff}.container{width:90%;max-width:1400px;margin:auto}.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end}.intro-grid h2{font-size:clamp(32px,4vw,48px);line-height:1.12}.intro-grid h2 span{color:var(--gold)}.intro-grid p{color:var(--muted);margin:0;max-width:600px}.catalog-tools{margin-top:36px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.search{flex:1 1 280px;position:relative}.search input{width:100%;height:48px;border:1px solid var(--line);border-radius:8px;padding:0 16px 0 44px;font:inherit;color:var(--navy);outline:none}.search input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(229,169,16,.12)}.search svg{position:absolute;left:15px;top:14px;width:19px;height:19px;stroke:#7c8796;fill:none;stroke-width:2}.category-jump{display:flex;gap:8px;overflow:auto;padding-bottom:4px;scrollbar-width:none}.category-jump::-webkit-scrollbar{display:none}.category-jump a{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:10px 13px;border-radius:999px;font-size:11px;font-weight:800;color:#556070}.category-jump a:hover{border-color:var(--gold);color:var(--navy);background:#fffaf0}
.catalog-section{padding:60px 0 74px;border-top:1px solid #eef0f3;scroll-margin-top:92px}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:28px}.section-heading h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin-top:3px}.section-heading p{margin:0;color:var(--muted);max-width:590px;justify-self:end}.product-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.product-card{min-width:0;background:#fff;border:1px solid #e5e8ed;border-radius:10px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;position:relative}.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d8dce2}.product-media{aspect-ratio:1/0.82;background:linear-gradient(135deg,#f9fafb,#edf0f3);position:relative;overflow:hidden}.product-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease}.product-card:hover .product-media img{transform:scale(1.045)}.media-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.26) 48%,transparent 64%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}.product-card:hover .media-shine{transform:translateX(120%)}.product-card-body{padding:13px 13px 14px;min-height:74px;display:flex;flex-direction:column;justify-content:space-between;gap:7px}.product-card h3{font-family:"Canva Sans","Open Sans",Arial,sans-serif;font-size:13px;line-height:1.35;font-weight:800;color:var(--navy)}.card-enquire{font-size:10px;font-weight:800;color:var(--gold);display:flex;align-items:center;justify-content:space-between}.card-enquire span{transition:transform .2s ease}.card-enquire:hover span{transform:translateX(4px)}
.quote-section{margin-top:0;background:var(--navy);color:#fff;padding:76px 0}.quote-box{display:grid;grid-template-columns:1.4fr .6fr;gap:50px;align-items:center}.quote-box h2{font-size:clamp(34px,4vw,52px);line-height:1.12}.quote-box p{color:rgba(255,255,255,.72);max-width:680px;margin:16px 0 0}.quote-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.quote-actions .btn-primary{background:var(--gold)}footer{background:#08162b;color:#fff;padding:55px 0 22px}.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:40px}.footer-brand img{width:62px;height:62px;object-fit:contain;margin-bottom:12px}.footer-brand h3{font-size:20px}.footer-brand p{color:rgba(255,255,255,.62);font-size:13px;max-width:430px;line-height:1.7}.footer-col h4{font-family:"Canva Sans","Open Sans",Arial,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:800}.footer-col a,.footer-col p{display:block;color:rgba(255,255,255,.67);font-size:12px;margin:7px 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;color:rgba(255,255,255,.45);font-size:11px;display:flex;justify-content:space-between;gap:20px}
@media(max-width:1180px){.links{gap:13px}.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.brand{min-width:220px}}@media(max-width:900px){.nav{width:90%}.links{display:none}.menu-toggle{display:block;margin-left:auto}.brand{min-width:0}.hero{height:455px;min-height:455px}.hero-inner{width:90%;padding:35px 0}.hero h1{font-size:clamp(34px,8vw,52px)}.hero p{font-size:14px;max-width:600px}.intro-grid,.section-heading,.quote-box{grid-template-columns:1fr;gap:18px}.section-heading p{justify-self:start}.quote-actions{justify-content:flex-start}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}@media(max-width:620px){body{font-size:14px}.nav{min-height:70px}.brand img{width:43px;height:43px}.brand-copy strong{font-size:16px}.brand-copy span{font-size:7px}.hero{height:400px;min-height:400px}.hero-media img{object-position:60% center}.hero-scrim{background:linear-gradient(90deg,rgba(10,25,49,.96),rgba(10,25,49,.66) 72%,rgba(10,25,49,.20))}.hero-inner{padding:25px 0}.hero p{margin:15px 0 20px;font-size:13px;line-height:1.6}.catalog-intro{padding:48px 0 18px}.intro-grid h2{font-size:32px}.catalog-tools{margin-top:24px}.category-jump{order:3;width:100%}.catalog-section{padding:45px 0 50px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-card-body{padding:10px;min-height:69px}.product-card h3{font-size:12px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* View All Products catalogue layout */
.catalog-intro{padding:62px 0 28px}
.intro-grid{grid-template-columns:1.05fr .95fr;align-items:end}
.catalog-tools{margin-top:30px;display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:14px;align-items:center}
.category-filters{display:flex;gap:8px;overflow:auto;scrollbar-width:none;padding:2px 0 5px;justify-content:flex-end}
.category-filters::-webkit-scrollbar{display:none}
.filter-pill{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:10px 13px;border-radius:999px;font-size:10px;font-weight:800;color:#556070;cursor:pointer;transition:.2s ease}
.filter-pill:hover,.filter-pill.active{border-color:var(--gold);background:#fffaf0;color:var(--navy)}
.all-products-section{padding:20px 0 82px}
.product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 20px}
.product-card{border-radius:14px;box-shadow:0 1px 0 rgba(13,31,61,.02);cursor:pointer}
.product-media{aspect-ratio:1/0.80}
.product-card-body{padding:14px 16px 16px;min-height:158px}
.card-subcategory{font-family:"Canva Sans","Open Sans",Arial,sans-serif;color:#687386;font-size:9px;line-height:1.3;font-weight:800;letter-spacing:.035em;margin-bottom:5px}.card-category{font-family:"Canva Sans","Open Sans",Arial,sans-serif;color:var(--gold);font-size:10px;line-height:1.35;font-weight:900;letter-spacing:.055em;text-transform:uppercase;margin-bottom:7px}
.product-card h3{font-family:"Yeseva One",Georgia,serif;font-size:16px;line-height:1.28;font-weight:400;color:var(--navy);min-height:41px}
.card-actions{display:grid;grid-template-columns:1fr 1.08fr;gap:7px;border-top:1px solid #edf0f3;margin-top:10px;padding-top:12px}
.card-btn{height:36px;border:0;border-radius:8px;font-size:11px;font-weight:800;cursor:pointer;transition:.2s ease}
.card-view{background:#f0f4f8;color:var(--navy)}
.card-inquiry{background:#00a66f;color:#fff}
.card-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(13,31,61,.10)}
.card-inquiry:hover{background:#008e60}
.product-card[hidden]{display:none}
.product-modal{position:absolute;left:0;right:0;top:0;height:100vh;z-index:2000;display:none;align-items:center;justify-content:center;padding:22px;box-sizing:border-box}
.product-modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,14,29,.72);backdrop-filter:blur(5px)}
.modal-panel{position:relative;z-index:1;width:min(940px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.28);display:grid;grid-template-columns:1.05fr .95fr}
.modal-image-wrap{min-height:430px;background:#f4f6f8;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-image-wrap img{width:100%;height:100%;max-height:520px;object-fit:contain;border-radius:10px}
.modal-content{padding:48px 42px;display:flex;flex-direction:column;justify-content:center}
.modal-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:1px solid #e5e8ed;background:#fff;color:var(--navy);border-radius:50%;font-size:25px;line-height:1;cursor:pointer;z-index:3}
.modal-category{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;margin-bottom:9px}
.modal-content h2{font-size:clamp(30px,4vw,46px);line-height:1.1;color:var(--navy)}
.modal-content p{color:var(--muted);font-size:14px;line-height:1.75;margin:18px 0 25px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:8px;font-size:12px;font-weight:800}
.modal-wa{background:#00a66f;color:#fff}
.modal-rfq{background:var(--navy);color:#fff}
.modal-actions a:hover{transform:translateY(-1px)}
body.modal-open{overflow:hidden}
@media(max-width:1180px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-tools{grid-template-columns:1fr}.category-filters{justify-content:flex-start}}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.modal-panel{grid-template-columns:1fr}.modal-image-wrap{min-height:320px;max-height:48vh}.modal-content{padding:28px}}
@media(max-width:620px){.catalog-intro{padding-top:42px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.product-card-body{padding:12px;min-height:152px}.product-card h3{font-size:14px;min-height:37px}.card-category{font-size:8px}.card-btn{height:34px;font-size:10px}.modal-image-wrap{min-height:250px}.modal-content{padding:24px 20px}.modal-actions{display:grid;grid-template-columns:1fr}.modal-actions a{width:100%}}
@media(max-width:390px){.product-grid{grid-template-columns:1fr}}

/* Responsive catalogue/search/filter fixes */
.catalog-tools{position:relative;z-index:950;background:rgba(255,255,255,.98);}
.category-filters{justify-content:flex-start;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;}
.filter-pill{flex:0 0 auto;}
.subcategory-filters{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:7px 2px 3px;}
.subcategory-filters::-webkit-scrollbar{display:none}
.subcategory-pill{flex:0 0 auto;white-space:nowrap;border:1px solid #e3e8ef;background:#f7f9fb;color:#48566b;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;cursor:pointer}
.subcategory-pill.active,.subcategory-pill:hover{border-color:var(--gold);background:#fff8e7;color:var(--navy)}
.catalog-tools.is-sticky{position:sticky;top:82px;margin-left:0;margin-right:0;padding:10px 0 9px;box-shadow:0 8px 18px rgba(13,31,61,.07);}
.catalog-tools.is-sticky .search{min-width:0}
.no-results{display:none;grid-column:1/-1;padding:32px 18px;text-align:center;border:1px dashed #d8dee8;border-radius:12px;color:#667085;background:#fafbfc}
.no-results.show{display:block}
@media(max-width:900px){.catalog-tools{grid-template-columns:1fr;gap:8px}.category-filters{justify-content:flex-start}.catalog-tools.is-sticky{top:70px;padding:9px 0;background:rgba(255,255,255,.98)}.catalog-tools.is-sticky .search input{height:42px}.catalog-intro{padding-bottom:14px}}
@media(max-width:620px){.catalog-tools{margin-top:18px}.catalog-tools.is-sticky{top:70px;margin-top:0;padding:8px 0 7px}.category-filters{gap:6px}.filter-pill{padding:8px 11px;font-size:10px}.subcategory-filters{padding-top:6px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}.product-card{min-width:0}.product-media{aspect-ratio:1/0.88}.product-card-body{padding:9px!important;min-height:145px!important;gap:6px}.product-card h3{font-size:13px!important;line-height:1.25;min-height:34px!important}.card-subcategory{font-size:8px}.card-category{font-size:8px}.card-actions{gap:5px;margin-top:8px;padding-top:9px}.card-btn{height:33px;font-size:10px}.all-products-section{padding-top:12px}}
@media(max-width:390px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.product-card-body{padding:8px!important}.product-card h3{font-size:12px!important}.card-actions{grid-template-columns:1fr 1fr;gap:4px}.card-btn{font-size:9px}}


   :root{--navy:#0D1F3D;--gold:#E5A910;--grey:#545454;--pale:#f3f7fa;--text:#17243a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font:16px Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}.top{background:var(--navy);color:#fff;padding:8px 5%;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px}header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e0e5eb;box-shadow:0 2px 12px #0d1f3d12}.nav{max-width:1400px;margin:auto;min-height:76px;padding:9px 5%;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-height:58px}.brand img{width:58px;height:58px;object-fit:contain;flex:0 0 58px}.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1}.brand-text b{font:700 24px Georgia,serif;color:var(--navy);letter-spacing:.02em}.brand-text small{font-size:10px;color:var(--gold);letter-spacing:.42em;font-weight:bold;margin-top:6px}.links{display:flex;align-items:center;gap:clamp(10px,1.35vw,20px);font-size:13px;font-weight:700}.links>a,.drop>button{position:relative;border:0;background:none;padding:15px 0;white-space:nowrap;font:inherit;color:var(--navy);cursor:pointer;transition:color .2s}.links>a:after,.drop>button:after{content:"";position:absolute;bottom:5px;left:0;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease-out}.links>a:hover,.links>a.active,.drop>button:hover,.drop.open>button{color:var(--gold)}.links>a:hover:after,.links>a.active:after,.drop:hover>button:after,.drop.open>button:after,.drop:focus-within>button:after{transform:scaleX(1)}.drop{position:relative}.drop-menu{display:none;position:absolute;top:100%;left:-12px;min-width:235px;background:#fff;padding:8px;border-top:3px solid var(--gold);box-shadow:0 12px 24px #0d1f3d25}.drop:hover .drop-menu,.drop:focus-within .drop-menu,.drop.open .drop-menu{display:block}.drop-menu a{display:block;padding:10px 11px;font-size:13px}.drop-menu a:hover{background:#f1f4f7;color:var(--gold)}.quote{background:var(--gold)!important;padding:13px!important;border-radius:3px;color:var(--navy)!important}.quote:after{display:none}.menu{display:none;background:white;border:1px solid #ddd;border-radius:4px;padding:6px 10px;font-size:20px}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:470px;display:flex;align-items:center;color:#fff;background:var(--navy)}.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-media img,.hero-media video{width:100%;height:100%;display:block;object-fit:cover;object-position:center right;transform-origin:center right;animation:none;will-change:transform}.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,31,61,.94) 0%,rgba(13,31,61,.70) 48%,rgba(13,31,61,.22) 100%);pointer-events:none}.hero-inner{position:relative;z-index:2;max-width:1400px;width:100%;margin:auto;padding:48px 5% 62px}.eyebrow{color:var(--gold);font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em}h1,h2{font-family:Georgia,'Times New Roman',serif}h1{font-size:clamp(36px,4.5vw,60px);line-height:1.03;margin:13px 0;max-width:620px}h1 em{font-style:normal;color:var(--gold)}.hero p{max-width:570px;line-height:1.7;font-size:16px;color:#e7edf3}.btn{display:inline-block;padding:13px 18px;margin:8px 8px 0 0;border:1px solid var(--gold);border-radius:3px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:bold;text-transform:uppercase;transition:background .2s,color .2s,transform .2s}.btn:hover,.btn:focus-visible{background:var(--navy);color:white;transform:translateY(-2px)}.btn.outline{background:transparent;border-color:white;color:white}.btn.outline:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.benefits{display:grid;grid-template-columns:repeat(5,1fr);background:#f5f8fa}.benefit{display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 7px;border-right:1px solid #d3dce5;font-size:11px;font-weight:bold;color:var(--navy)}section{scroll-margin-top:85px}.section{padding:54px 5%}.about{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}h2{font-size:clamp(26px,3vw,37px);line-height:1.12;margin:9px 0}.about p,.head p,.tech p{font-size:13px;line-height:1.65;color:#5c6674}.about-art{min-height:270px;display:grid;place-items:center;border-left:12px solid var(--gold);background:linear-gradient(120deg,#dfe4e9,#737e8b)}.about-art svg{width:88%;max-width:560px}
.carousel-section{background:var(--pale)}.head{text-align:center;max-width:850px;margin:0 auto 22px}.head .eyebrow:before,.head .eyebrow:after{content:"";display:inline-block;width:30px;height:2px;background:var(--gold);vertical-align:middle;margin:0 12px}.marquee{overflow:hidden;padding:6px 0 12px}.marquee-track{display:flex;align-items:flex-start;gap:clamp(12px,2.1vw,27px);width:max-content;animation:marquee 48s linear infinite}.marquee:hover .marquee-track{animation-play-state:paused}.orbit-card{flex:0 0 clamp(104px,11vw,136px);width:clamp(104px,11vw,136px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-height:155px;font-size:11px;color:var(--navy)}.orbit-image{width:clamp(84px,9vw,112px);height:clamp(84px,9vw,112px);border:2px solid var(--gold);border-radius:50%;overflow:hidden;background:#fff;display:grid;place-items:center;padding:5px;transition:background .22s,transform .22s,border-color .22s}.orbit-image img{width:100%;height:100%;object-fit:contain;background:#fff}.orbit-card strong{font-size:11px;line-height:1.35;font-weight:700;max-width:130px}.orbit-card small{font-size:10px;color:#657184;font-weight:normal}.material-card .orbit-image{font:700 24px Georgia;color:var(--navy);display:flex!important;align-items:center!important;justify-content:center!important;text-align:center;line-height:1!important;padding:0!important;box-sizing:border-box}.orbit-card:hover .orbit-image,.orbit-card:focus-visible .orbit-image,.material-card:hover .orbit-image{background:#fff;transform:none;border-color:var(--gold)}.orbit-card:hover,.orbit-card:focus,.orbit-card:focus-visible{outline:none;box-shadow:none}.orbit-card .orbit-image{background:#fff}#industries .orbit-image{padding:0}#industries .orbit-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:transparent;border-radius:50%}.material-card:hover .orbit-image,.material-card:focus-visible .orbit-image{background:var(--navy);color:#fff}.material-card:hover strong,.material-card:focus-visible strong,.material-card:hover small,.material-card:focus-visible small{color:#fff}.orbit-card:hover strong,.orbit-card:focus-visible strong{color:var(--gold)}.center{text-align:center;margin-top:9px}.center .btn{background:#fff;color:var(--navy)}.center .btn:hover{background:var(--navy);color:#fff}
.tech{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;background:#f8fafc}.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.tool{background:#fff;border:1px solid #e0e6ed;border-radius:4px;padding:15px 5px;text-align:center;font-size:10px;font-weight:bold;color:var(--navy);transition:background .2s,color .2s}.tool:hover{background:var(--navy);color:#fff}.tech-art{min-height:260px;display:grid;place-items:center;background:linear-gradient(135deg,#d9e0e7,#596575)}.tech-art svg{width:85%;height:auto}
footer{background:var(--navy);color:#fff;padding:34px 5% 15px}.foot-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.15fr;gap:26px}.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}.foot-brand img{width:58px;height:58px;object-fit:contain;flex:0 0 58px}.foot-brand b{font:700 24px Georgia;display:block;line-height:1;color:white}.foot-brand small{display:block;color:var(--gold);letter-spacing:.42em;font-size:10px;margin-top:6px;font-weight:bold}footer p{font-size:13px;line-height:1.7;color:#d3dce8}footer h3{font-size:16px;margin:4px 0 14px;padding-bottom:12px;position:relative}footer h3:after{content:"";position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--gold)}.foot-links{list-style:none;padding:0;margin:0}.foot-links li{margin:7px 0}.foot-links a{font-size:13px;color:#d9e1eb;display:inline-flex;gap:7px;align-items:center;transition:color .2s,transform .25s ease-out}.foot-links a:before{content:"»";color:var(--gold);transition:color .2s}.foot-links a:hover,.foot-links a:focus-visible{color:var(--gold);transform:translateX(6px)}.socials{display:flex;gap:10px;align-items:center}.socials a{width:40px;height:40px;border:1.5px solid #ffffff80;border-radius:4px;display:grid;place-items:center;background:transparent;color:#fff;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;box-shadow:inset 0 0 0 1px #ffffff12}.socials svg{width:20px;height:20px;display:block;fill:currentColor}.socials .instagram svg{fill:none;stroke:currentColor;stroke-width:2}.socials .instagram .dot{fill:currentColor;stroke:none}.socials .linkedin,.socials .instagram,.socials .facebook,.socials .youtube{color:#fff}.socials a:hover,.socials a:focus-visible{background:#fff;border-color:#fff;transform:translateY(-2px);outline:2px solid var(--gold);outline-offset:2px}.socials .linkedin:hover,.socials .linkedin:focus-visible{color:#0A66C2}.socials .instagram:hover,.socials .instagram:focus-visible{color:#E4405F}.socials .facebook:hover,.socials .facebook:focus-visible{color:#1877F2}.socials .youtube:hover,.socials .youtube:focus-visible{color:#FF0000}.bottom{max-width:1400px;margin:22px auto 0;padding-top:14px;border-top:1px solid #ffffff35;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#c9d3df;font-size:12px}
@keyframes marquee{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@media(max-width:1050px){.links{gap:9px;font-size:12px}.brand img{width:52px;height:52px;flex-basis:52px}.brand-text b{font-size:22px}.foot-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:790px){.menu{display:block}.links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:12px 5%;align-items:stretch;flex-direction:column;box-shadow:0 10px 18px #0d1f3d22}.links.open{display:flex}.links>a,.drop>button{text-align:left;width:100%}.drop-menu{position:static;box-shadow:none;border:0;border-left:2px solid var(--gold);margin-left:8px}.about,.tech{grid-template-columns:1fr}.benefits{grid-template-columns:repeat(2,1fr)}.tools{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.top{justify-content:center}.hero{min-height:440px}.hero-inner{padding:42px 6%}.benefit{justify-content:flex-start;padding:12px 8px}.tools{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr;gap:20px 14px}.foot-grid>div:first-child{grid-column:1/-1}.bottom{flex-direction:column}}



/* Corrected image fit: preserve existing circular frames and avoid cropping. */
#industries .orbit-image {
  padding: 4px;
  overflow: hidden;
  background: #fff;
}
#industries .orbit-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
  background: #fff;
  transform: none;
}
#industries .orbit-card:hover .orbit-image img,
#industries .orbit-card:focus-visible .orbit-image img {
  transform: none;
}

/* Keep product photos and their original circular presentation unchanged. */
#products .orbit-card .orbit-image {
  background: #fff !important;
  overflow: hidden;
  border: 2px solid var(--gold);
}
#products .orbit-card .orbit-image img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  transform: none;
}
#products .orbit-card:hover .orbit-image img {
  transform: scale(1.025);
}

/* Keep the supplied About Us photo correctly sized. */
.about-art {
  overflow: hidden;
  min-height: 300px;
  border-left: 12px solid var(--gold);
  background: #e9edf1;
}
.about-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 440px;
  object-fit: cover;
  object-position: center;
}

/* Floating contact icons: original brand colours, clean circular buttons. */
.quick-actions {
  position: fixed;
  left: 18px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-action {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 18px #0d1f3d35;
  transition: transform .2s ease, box-shadow .2s ease;
}
.quick-action svg {
  width: 25px;
  height: 25px;
  display: block;
}
.quick-action.whatsapp svg { fill: #25D366; }
.quick-action.email svg { fill: #EA4335; }
.quick-action.google svg { width: 27px; height: 27px; }
.quick-action:hover,
.quick-action:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #0d1f3d45;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.quick-action::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 10px;
  border-radius: 5px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.quick-action:hover::after,
.quick-action:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Back to top stays gold and remains visible above the footer. */
.back-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 59;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 5px 18px #0d1f3d30;
  font-size: 23px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-top:hover,
.back-top:focus-visible {
  background: var(--navy);
  color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .quick-actions { left: 12px; bottom: 14px; gap: 8px; }.quick-action{width:46px;height:46px}
  .quick-action { width: 44px; height: 44px; }
  .quick-action svg { width: 21px; height: 21px; }
  .back-top { right: 12px; bottom: 14px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-action, .quick-action::after, .back-top { transition: none; }
}


/* Use the user's supplied technical products image in the right-hand panel. */
.tech-art {
  min-height: 260px;
  overflow: hidden;
  display: block;
  background: #e9edf1;
}
.tech-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 440px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 790px) {
  .tech-art img { max-height: 360px; }
}


/* Final industry image fit: preserve existing circles, borders, labels and layout. */
#industries .orbit-image {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
}
#industries .orbit-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  background: transparent;
}


/* Final visual corrections */
h1,h2,h3,h4{color:var(--navy);text-rendering:optimizeLegibility}
p,li{font-size:inherit}
button,a{font-family:inherit}
footer{font-size:14px}
footer h3{color:#fff}
@media(max-width:790px){
  .nav{min-height:68px;padding:8px 5%}
  .brand img{width:50px;height:50px;flex-basis:50px}
  .brand-text b{font-size:21px}
  .brand-text small{font-size:9px}
  .links{font-size:14px}
}
@media(max-width:520px){
  .brand{gap:9px}
  .brand img{width:46px;height:46px;flex-basis:46px}
  .brand-text b{font-size:19px}
  .brand-text small{font-size:8px}
  .top{font-size:11px}
}

/* =============================
   Nemrex Industries — navigation refinement
   Visual-only refinement: existing page content/images preserved.
   ============================= */
:root{
  --navy:#0D1F3D;
  --gold:#E5A910;
  --navy-2:#10284d;
  --border:#e7ebf0;
  --muted:#687386;
}

html{scroll-padding-top:88px}
body{
  font-family:"Segoe UI",Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
}

/* The contact strip above the navigation is intentionally removed. */
.top{display:none!important}

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 18px rgba(13,31,61,.07);
  backdrop-filter:saturate(120%) blur(8px);
}

.nav{
  width:min(1500px,100%);
  min-height:84px;
  margin:0 auto;
  padding:8px 4.2%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
}

.brand{
  min-height:68px;
  gap:12px;
  align-items:center;
}
.brand img{
  width:60px;
  height:60px;
  flex:0 0 60px;
  object-fit:contain;
}
.brand-text{
  justify-content:center;
  line-height:1;
}
.brand-text b{
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1;
  font-weight:700;
  letter-spacing:.035em;
  color:var(--navy);
}
.brand-text small{
  margin-top:7px;
  font-family:"Segoe UI",Inter,Arial,sans-serif;
  font-size:9px;
  line-height:1;
  letter-spacing:.48em;
  color:var(--gold);
  font-weight:700;
}

.links{
  min-width:0;
  justify-content:flex-end;
  align-items:center;
  gap:clamp(12px,1.25vw,22px);
  font-family:"Segoe UI",Inter,Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1;
  font-weight:700;
  letter-spacing:.015em;
}
.links>a,.drop>button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0;
  color:var(--navy);
  font:inherit;
  letter-spacing:inherit;
  border:0;
  background:transparent;
}
.links>a:after,.drop>button:after{
  bottom:3px;
  height:2px;
  border-radius:2px;
}
.links>a:hover,.links>a.active,.drop>button:hover,.drop.open>button{
  color:var(--gold);
}

.nav-chevron{
  width:7px;
  height:7px;
  margin-left:7px;
  margin-top:-3px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.drop.open .nav-chevron{transform:rotate(225deg);margin-top:4px}

.drop-menu{
  top:calc(100% + 1px);
  left:50%;
  transform:translateX(-50%);
  min-width:250px;
  padding:7px;
  border:1px solid var(--border);
  border-top:3px solid var(--gold);
  border-radius:0 0 6px 6px;
  box-shadow:0 16px 34px rgba(13,31,61,.13);
}
.drop-menu a{
  padding:11px 12px;
  border-radius:3px;
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  color:var(--navy);
}
.drop-menu a:hover,.drop-menu a:focus-visible{
  background:#f6f8fa;
  color:var(--gold);
}

.quote{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:164px;
  height:50px;
  padding:0 20px!important;
  border-radius:4px;
  background:var(--gold)!important;
  color:var(--navy)!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.025em;
  box-shadow:0 5px 12px rgba(229,169,16,.14);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.quote:hover{
  background:#efb51d!important;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(229,169,16,.20);
}
.quote:after{display:none!important}

.menu{
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--navy);
  font-size:22px;
  line-height:1;
}
.menu:hover{border-color:var(--gold);color:var(--gold)}

/* Footer social icons: one consistent visual system instead of four unrelated colors. */
.socials{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:10px;
}
.socials a.social-link{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:4px;
  background:rgba(255,255,255,.035);
  color:#fff;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.socials a.social-link svg{
  width:18px;
  height:18px;
  display:block;
}
.socials .instagram svg{fill:none;stroke:currentColor;stroke-width:2}
.socials .instagram .dot{fill:currentColor;stroke:none}
.socials .linkedin,.socials .instagram,.socials .facebook,.socials .youtube{color:#fff}
.socials a.social-link:hover,.socials a.social-link:focus-visible{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
  transform:translateY(-2px);
  outline:none;
}

footer{
  font-family:"Segoe UI",Inter,Arial,Helvetica,sans-serif;
}
footer h3{
  font-size:14px;
  letter-spacing:.02em;
}
footer p,footer li,footer a{line-height:1.7}

@media(max-width:1180px){
  .nav{gap:18px;padding-left:3.2%;padding-right:3.2%}
  .links{gap:11px;font-size:12px}
  .brand img{width:54px;height:54px;flex-basis:54px}
  .brand-text b{font-size:22px}
  .brand-text small{font-size:8px}
  .quote{min-width:145px;padding:0 15px!important}
}

@media(max-width:1100px){
  .nav{
    min-height:74px;
    grid-template-columns:auto 1fr auto;
    padding:7px 5%;
  }
  .brand img{width:52px;height:52px;flex-basis:52px}
  .brand-text b{font-size:21px}
  .menu{display:grid;place-items:center;justify-self:end}
  .links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:10px 5% 14px;
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow:0 14px 25px rgba(13,31,61,.12);
    align-items:stretch;
    flex-direction:column;
    gap:0;
  }
  .links.open{display:flex}
  .links>a,.drop>button{
    width:100%;
    min-height:46px;
    justify-content:flex-start;
    text-align:left;
  }
  .links>a:after,.drop>button:after{bottom:0}
  .drop-menu{
    position:static;
    transform:none;
    min-width:0;
    margin:0 0 5px 8px;
    padding:3px 0 3px 12px;
    border:0;
    border-left:2px solid var(--gold);
    border-radius:0;
    box-shadow:none;
  }
  .drop-menu a{padding:9px 10px}
  .quote{width:100%;margin-top:8px}
}

@media(max-width:520px){
  .nav{padding:7px 4.5%}
  .brand{gap:9px}
  .brand img{width:46px;height:46px;flex-basis:46px}
  .brand-text b{font-size:19px}
  .brand-text small{font-size:7px;letter-spacing:.42em}
  .socials a.social-link{width:37px;height:37px}
}

/* =====================================================
   Corrections: larger readable text, 3 technical tiles,
   footer social icons in original brand colours
   ===================================================== */
body{font-size:16px}
.eyebrow{font-size:14px;letter-spacing:.06em}
.hero p{font-size:18px;max-width:600px}
.btn{font-size:14px;padding:15px 24px}
.benefit{font-size:14px;padding:20px 10px;line-height:1.45}
.about p,.head p,.tech p{font-size:16px;line-height:1.75}.tech .technical-seo-copy{max-width:760px;margin:12px 0 0;color:#5c6674;font-size:16px;line-height:1.8}
.head{max-width:900px}

/* Product / industry / material carousels */
.orbit-card{flex:0 0 clamp(124px,12vw,164px);width:clamp(124px,12vw,164px);min-height:185px;gap:10px;font-size:14px}
.orbit-image{width:clamp(98px,10vw,128px);height:clamp(98px,10vw,128px)}
.orbit-card strong{font-size:14px;line-height:1.35;max-width:160px}
.orbit-card small{font-size:13px}
.material-card .orbit-image{font-size:28px}

/* Technical section: 3 sub pages only */
.tools{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 14px;font-size:15px;line-height:1.4}
.tool-ico{font-size:30px;line-height:1;color:var(--gold)}

/* Navigation */
.links{font-size:15px}
.drop-menu{min-width:290px}
.drop-menu a{font-size:15px;padding:12px 14px}
.quote{font-size:14px!important}
@media(max-width:1359px){.links{font-size:14px}}
@media(max-width:1180px){.links{font-size:13px}}
@media(max-width:1100px){.links{font-size:16px}.drop-menu a{font-size:15px}}

/* Footer */
footer p{font-size:15px}
footer p b{font-size:14px;letter-spacing:.06em}
footer h3{font-size:18px}
.foot-links li{margin:9px 0}
.foot-links a{font-size:15px}
.bottom{font-size:14px}
.quick-action::after{font-size:14px}

/* Footer social icons: white tile + original logo colours (no colour change on hover) */
.socials{gap:12px;margin-top:14px}
.socials a.social-link{width:46px;height:46px;border-radius:8px;border:1px solid #fff;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.socials a.social-link svg{width:26px;height:26px}
.socials a.social-link.linkedin svg{fill:#0A66C2}
.socials a.social-link.facebook svg{fill:#1877F2}
.socials a.social-link.youtube svg{fill:#FF0000}
.socials a.social-link.instagram svg{fill:none;stroke:url(#ig-grad);stroke-width:2}
.socials a.social-link.instagram svg .dot{fill:#D62976;stroke:none}
.socials a.social-link:hover,.socials a.social-link:focus-visible{background:#fff;border-color:#fff;transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.38)}
.socials a.social-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:520px){
  .tools{grid-template-columns:1fr}
  .orbit-card strong{font-size:13.5px}
  .socials a.social-link{width:44px;height:44px}
}

/* =====================================================
   Logo lockup: properly sized emblem, and INDUSTRIES
   spread to exactly the same width as NEMREX
   ===================================================== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lockup{display:inline-flex;flex-direction:column;align-items:stretch;justify-content:center;line-height:1}
.lockup b{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:28px;line-height:1;letter-spacing:.07em;margin-right:-.07em;white-space:nowrap}
.lockup small{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:"Segoe UI",Inter,Arial,sans-serif;font-weight:700;font-size:13px;line-height:1;letter-spacing:0;color:var(--gold)}
header .lockup b{color:var(--navy)}
footer .lockup b{color:#fff}

/* The emblem file is wide (about 3:2). Size it by height so it is no longer shrunk into a square box. */
header .brand{gap:14px}
header .brand img{width:auto;height:70px;max-width:none;flex:0 0 auto;object-fit:contain}
footer .foot-brand{gap:14px}
footer .foot-brand img{width:auto;height:70px;max-width:none;flex:0 0 auto;object-fit:contain}
@media(max-width:1180px){header .brand img{height:64px}header .lockup b{font-size:26px}header .lockup small{font-size:12px}}
@media(max-width:1100px){header .brand img{height:60px}}
@media(max-width:520px){
  header .brand{gap:9px}
  header .brand img{height:50px}
  header .lockup b{font-size:21px}
  header .lockup small{font-size:10px;margin-top:6px}
  footer .foot-brand img{height:60px}
  footer .lockup b{font-size:24px}
}

/* =====================================================
   Floating contact buttons: solid brand-colour buttons,
   clearly visible over any section while scrolling
   ===================================================== */
.quick-actions{left:20px;bottom:24px;gap:14px}
.quick-actions .quick-action{width:54px;height:54px;border:0;box-shadow:0 6px 16px rgba(13,31,61,.32)}
.quick-actions .quick-action svg{width:28px;height:28px}
.quick-actions .quick-action.whatsapp{background:#25D366}
.quick-actions .quick-action.whatsapp svg{fill:#fff}
.quick-actions .quick-action.email{background:#EA4335}
.quick-actions .quick-action.email svg{fill:#fff}
.quick-actions .quick-action.google{background:#fff;border:1px solid #dadce0}
.quick-actions .quick-action.google svg{width:28px;height:28px}
.quick-actions .quick-action:hover,.quick-actions .quick-action:focus-visible{transform:translateY(-3px);box-shadow:0 10px 22px rgba(13,31,61,.42);outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:520px){
  .quick-actions{left:12px;bottom:14px;gap:10px}
  .quick-actions .quick-action{width:46px;height:46px}
  .quick-actions .quick-action svg,.quick-actions .quick-action.google svg{width:24px;height:24px}
}


/* =====================================================
   FINAL CORRECTIONS
   ===================================================== */
/* 1) Hero heading: white + gold so it reads on the dark photo overlay */
.hero h1{color:#fff;text-shadow:0 2px 18px rgba(4,12,28,.45)}
.hero h1 em{color:var(--gold)}
.hero .eyebrow{text-shadow:0 1px 10px rgba(4,12,28,.5)}

/* 2) Buttons */
.btn{display:inline-flex;align-items:center;gap:10px}
.btn .arr{display:inline-block;transition:transform .2s ease}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(4px)}

/* 3) Products dropdown: categories first, "View All Products" last */
.drop-menu a.view-all{
  margin-top:6px;padding:13px 14px;
  border-top:1px solid var(--border);border-radius:0 0 3px 3px;
  background:#fff8e3;color:var(--navy);font-weight:800;
  display:flex;justify-content:space-between;align-items:center;
}
.drop-menu a.view-all:hover,.drop-menu a.view-all:focus-visible{background:var(--navy);color:#fff}

/* 4) Navbar icons: e-catalogue + weight calculator */
.nav-sep{width:1px;height:26px;background:var(--border);flex:0 0 1px}
.links>a.nav-icon{
  position:relative;width:42px;height:42px;padding:0;
  border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.links>a.nav-icon:after{display:none}
.nav-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-icon-label{display:none}
.links>a.nav-icon:hover,.links>a.nav-icon:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--gold);transform:translateY(-2px);outline:none}
.links>a.nav-icon:before{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%);padding:6px 10px;border-radius:5px;
  background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease;z-index:5;
}
.links>a.nav-icon:hover:before,.links>a.nav-icon:focus-visible:before{opacity:1;visibility:visible}

/* 5) Benefits strip */
.benefit svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.benefit span{text-align:left}

/* 6) Mobile / tablet menu */
@media(max-width:1100px){
  .nav-sep{display:none}
  .links>a.nav-icon{width:100%;height:auto;min-height:46px;padding:0;border:0;border-radius:0;background:transparent;justify-content:flex-start;gap:12px}
  .links>a.nav-icon:hover,.links>a.nav-icon:focus-visible{background:transparent;color:var(--gold);transform:none}
  .links>a.nav-icon:before{display:none}
  .nav-icon-label{display:inline}
  .links>a.quote{justify-content:center}
}
@media(max-width:790px){.benefit{justify-content:flex-start}}

/* Keep the logo and the first menu item clearly apart on mid-size desktops */
@media(min-width:1101px) and (max-width:1560px){
  .nav{gap:34px}
  .links{font-size:13.5px;gap:15px}
  .quote{min-width:150px;padding:0 16px!important}
}
@media(min-width:1101px) and (max-width:1250px){
  .links{font-size:12.5px;gap:11px}
  header .brand img{height:58px}
  header .lockup b{font-size:24px}
  header .lockup small{font-size:11px}
}

/* Quote enquiry section */
.quote-section{background:#f5f7fa;padding:76px 6%;}
.quote-layout{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.quote-copy h2{font-family:'Yeseva One',Georgia,serif;color:var(--navy,#0D1F3D);font-size:clamp(30px,3.2vw,46px);line-height:1.2;margin:12px 0 18px;}
.quote-copy p{max-width:520px;color:#545454;line-height:1.8;font-size:16px;}
.quote-note{margin-top:25px;color:#0D1F3D;font-weight:600;}
.quote-note span{color:#E5A910;margin-right:8px;}
.quote-form{background:#fff;padding:30px;border-radius:12px;box-shadow:0 14px 45px #0d1f3d12;display:grid;gap:16px;}
.quote-form label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#0D1F3D;}
.quote-form input,.quote-form textarea{width:100%;border:1px solid #d9dee6;border-radius:6px;padding:13px 14px;font:14px 'Canva Sans',Arial,sans-serif;color:#242a33;background:#fff;}
.quote-form textarea{resize:vertical;min-height:110px;}
.quote-form input:focus,.quote-form textarea:focus{outline:2px solid #E5A91055;border-color:#E5A910;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.quote-form button{justify-self:start;border:0;cursor:pointer;}
.contact-links li span{font-size:13px;color:#d9e1eb;line-height:1.6;}
@media(max-width:760px){.quote-layout{grid-template-columns:1fr;gap:28px}.quote-section{padding:54px 5%}.quote-form{padding:22px}.form-row{grid-template-columns:1fr}}


/* Quote section alignment refinement: balanced equal-height panels */
.quote-section{padding:58px 5%;background:#f5f7fa;}
.quote-layout{max-width:1500px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:stretch;}
.quote-copy,.quote-form{box-sizing:border-box;min-width:0;min-height:470px;height:100%;}
.quote-copy{background:#fff;border-radius:12px;padding:42px 44px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 14px 45px #0d1f3d0d;}
.quote-copy h2{font-size:clamp(30px,2.8vw,42px);line-height:1.22;margin:12px 0 18px;max-width:540px;}
.quote-copy p{max-width:560px;font-size:16px;line-height:1.75;margin:0;}
.quote-note{margin-top:24px;line-height:1.6;}
.quote-form{padding:34px 38px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;gap:14px;}
.quote-form label{gap:6px;}
.quote-form input{height:46px;box-sizing:border-box;}
.quote-form textarea{min-height:118px;height:118px;box-sizing:border-box;resize:vertical;}
.quote-form button{margin-top:2px;}
@media(max-width:900px){.quote-layout{gap:24px}.quote-copy{padding:32px}.quote-form{padding:28px}}
@media(max-width:760px){.quote-section{padding:44px 5%}.quote-layout{grid-template-columns:1fr;gap:20px}.quote-copy,.quote-form{min-height:0;height:auto}.quote-copy{padding:28px 24px}.quote-form{padding:24px}.form-row{grid-template-columns:1fr}.quote-form textarea{height:130px}}

/* Final sizing and footer polish */
.links{font-size:14px;gap:clamp(11px,1.45vw,21px)}
.drop-menu a{font-size:14px}
.quote-section{padding:36px 5%}
.quote-copy,.quote-form{min-height:390px}
.quote-copy{padding:32px 38px}
.quote-form{padding:28px 32px;gap:12px}
.quote-form textarea{min-height:88px;height:88px}
.quote-copy h2{font-size:clamp(28px,2.5vw,38px);margin:9px 0 13px}
.quote-copy p{line-height:1.65}
.quote-note{margin-top:17px}
.foot-grid>div:first-child h3{color:var(--gold)}
.socials a{background:#fff;border-color:#fff;color:#0D1F3D;box-shadow:none}
.socials .linkedin svg{fill:#0A66C2}
.socials .facebook svg{fill:#1877F2}
.socials .youtube svg{fill:#FF0000}
.socials .instagram svg{stroke:#D62976;fill:none}
.socials .instagram .dot{fill:#D62976}
.contact-links a:before{display:none!important;content:none!important}
.contact-links li{margin:12px 0}
.contact-links a{display:flex;align-items:center;gap:12px;color:#d9e1eb;font-size:13px}
.contact-links svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-links .address{display:flex;align-items:flex-start;gap:12px;color:#d9e1eb;font-size:13px;line-height:1.65}
.contact-links .contact-icon{display:inline-flex;flex:0 0 20px;margin-top:2px}
.contact-links .address>span:last-child{display:block;max-width:230px}
@media(max-width:760px){.quote-section{padding:30px 5%}.quote-copy,.quote-form{min-height:0}.quote-copy{padding:26px 24px}.quote-form{padding:24px}.quote-form textarea{height:100px;min-height:100px}.links{font-size:14px}}


/* Final layout refinements: prevent brand/nav overlap on wide screens. */
@media (min-width:1281px){
  .nav{width:min(1700px,100%);grid-template-columns:255px minmax(0,1fr);gap:22px;padding-left:3%;padding-right:3%;}
  .brand{width:255px;min-width:255px;gap:10px;overflow:visible;}
  .brand img{width:58px;height:58px;flex:0 0 58px;}
  .brand .lockup{display:flex;flex-direction:column;min-width:0;white-space:nowrap;}
  .brand .lockup b{font-size:24px;letter-spacing:.025em;}
  .brand .lockup small{letter-spacing:.37em;font-size:9px;}
  .links{justify-content:flex-end;gap:clamp(9px,.85vw,16px);font-size:clamp(12px,.72vw,14px);}
  .links>a,.drop>button{white-space:nowrap;}
}
/* Keep all footer column titles in Nemrex gold. */
footer h3, .foot-grid h3{color:var(--gold)!important;}
/* Pipe dimension/weight chart symbol: clear pipe cross-section with measurement ticks. */
.tool-ico.pipe-dim-icon{display:inline-flex;align-items:center;justify-content:center;}
.tool-ico.pipe-dim-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}


/* Final navbar spacing refinement */
.nav{gap:14px;padding-left:3.2%;padding-right:3.2%}.links{gap:clamp(8px,.85vw,14px);font-size:14px}.links>a,.drop>button{font-size:inherit}.brand{gap:10px}.brand img{width:58px;flex-basis:58px}.brand-text b{font-size:24px}
@media(max-width:1250px){.nav{gap:10px;padding-left:2%;padding-right:2%}.links{gap:8px;font-size:12px}}
@media(max-width:1050px){.nav{flex-wrap:wrap;justify-content:center}.links{flex-wrap:wrap;justify-content:center}}


/* Final navbar/brand refinements */
.nav{max-width:1660px;padding:9px 4%;gap:24px}
.brand{gap:14px;min-height:72px}
.brand img{width:76px;height:76px;flex:0 0 76px}
.brand-text b{font-size:30px;letter-spacing:.035em;line-height:1;color:var(--navy)}
.brand-text small{font-size:12px;letter-spacing:.48em;margin-top:7px;color:var(--gold);font-weight:700}
.links{gap:clamp(11px,1.1vw,21px);font-size:14px}
@media(max-width:1100px){.nav{padding:9px 3%;gap:14px}.brand img{width:64px;height:64px;flex-basis:64px}.brand-text b{font-size:26px}.brand-text small{font-size:10px}.links{gap:11px;font-size:12px}}
@media(max-width:760px){.brand img{width:54px;height:54px;flex-basis:54px}.brand-text b{font-size:23px}.brand-text small{font-size:9px}}

/* Final homepage refinements: consistent Nemrex wordmark and industry gallery */
.brand .lockup,
.foot-brand .lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  line-height: 1;
}
.brand .lockup b,
.foot-brand .lockup b {
  display: block;
  font-family: "Yeseva One", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
  margin: 0;
}
.brand .lockup small,
.foot-brand .lockup small {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
header .brand .lockup b { color: var(--navy); }
header .brand .lockup small { color: var(--gold); }
footer .foot-brand .lockup b { color: #fff; }
footer .foot-brand .lockup small { color: var(--gold); }
footer .foot-brand { align-items: center; }
@media (max-width: 1180px) {
  header .brand .lockup b { font-size: 27px; }
  header .brand .lockup small { font-size: 11px; }
}
@media (max-width: 520px) {
  header .brand .lockup b { font-size: 22px; }
  header .brand .lockup small { font-size: 9px; margin-top: 6px; }
  footer .foot-brand .lockup b { font-size: 23px; }
  footer .foot-brand .lockup small { font-size: 10px; }
}

/* Keep industry photographs legible inside the circular gallery frames. */
#industries .orbit-card {
  flex: 0 0 clamp(142px, 12vw, 170px);
  width: clamp(142px, 12vw, 170px);
  min-height: 195px;
  gap: 11px;
}
#industries .orbit-image {
  width: clamp(104px, 9.5vw, 128px);
  height: clamp(104px, 9.5vw, 128px);
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
#industries .orbit-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
#industries .orbit-card strong {
  max-width: 165px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: var(--navy);
}
@media (max-width: 520px) {
  #industries .orbit-card {
    flex-basis: 132px;
    width: 132px;
    min-height: 175px;
  }
  #industries .orbit-image {
    width: 104px;
    height: 104px;
  }
  #industries .orbit-card strong { font-size: 12px; }
}


/* Final wordmark alignment: keep the INDUSTRIES baseline evenly spaced beneath NEMREX in both header and footer. */
header .brand .lockup,
footer .foot-brand .lockup {
  align-items: stretch;
  flex: 0 0 auto;
}
header .brand .lockup b,
footer .foot-brand .lockup b {
  display: block;
  width: max-content;
  white-space: nowrap;
}
header .brand .lockup small,
footer .foot-brand .lockup small {
  display: flex;
  width: 100%;
  min-width: 100%;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1;
}
header .brand .lockup small span,
footer .foot-brand .lockup small span {
  display: inline-block;
  flex: 0 0 auto;
}
footer .foot-brand { align-items: center; }
@media (max-width: 520px) {
  footer .foot-brand { gap: 10px; }
  footer .foot-brand .lockup b { font-size: 22px; }
  footer .foot-brand .lockup small { font-size: 9px; margin-top: 6px; }
}

/* Footer quick-action spacing fix: keep the floating contact buttons clear of nearby footer text. */
.quick-actions {
  left: 10px;
  gap: 14px;
}
.quick-actions .quick-action {
  width: 48px;
  height: 48px;
}
.quick-actions .quick-action svg,
.quick-actions .quick-action.google svg {
  width: 25px;
  height: 25px;
}
@media (max-width: 520px) {
  .quick-actions {
    left: 8px;
    bottom: 14px;
    gap: 12px;
  }
  .quick-actions .quick-action {
    width: 44px;
    height: 44px;
  }
  .quick-actions .quick-action svg,
  .quick-actions .quick-action.google svg {
    width: 23px;
    height: 23px;
  }
}


/* Final responsive typography: desktop, tablet and mobile */
h1 {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
h2 {
  font-size: clamp(23px, 2.5vw, 32px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.eyebrow {
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.35;
  letter-spacing: .055em;
}
.product-card h3,
.product-item h3,
.product-box h3 {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  h1 {
    font-size: clamp(28px, 6vw, 38px);
    line-height: 1.12;
  }
  h2 {
    font-size: clamp(22px, 4.6vw, 28px);
    line-height: 1.2;
  }
  .eyebrow {
    font-size: 12px;
    letter-spacing: .045em;
  }
  .product-card h3,
  .product-item h3,
  .product-box h3 {
    font-size: 17px;
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: clamp(26px, 7vw, 32px);
  }
  h2 {
    font-size: clamp(21px, 5.4vw, 25px);
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: .035em;
  }
}
  

   #quote{scroll-margin-top:110px}
.quote-status{display:none;margin-top:4px;padding:10px 12px;border-radius:6px;font-size:14px;line-height:1.45}
.quote-status.success{display:block;background:#edf8f0;color:#176b2c;border:1px solid #b9dfc1}
.quote-status.error{display:block;background:#fff2f2;color:#9b2020;border:1px solid #e5b5b5}
.quote-status.sending{display:block;background:#f5f7fa;color:#0D1F3D;border:1px solid #d9dee6}
  

   /* =========================================================
   NEMREX — Mobile footer + interactive hover refinements
   ========================================================= */

/* Footer: keep the four main blocks in one clean row on desktop. */
footer .foot-grid{
  align-items:start;
}

/* Mobile/tablet footer: one section after another:
   Company → Quick Links → Products → Contact Us */
@media (max-width: 760px){
  footer{
    padding:32px 20px 14px;
  }
  footer .foot-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
    width:100%;
  }
  footer .foot-grid > div{
    grid-column:auto !important;
    width:100%;
  }
  footer .foot-brand{
    justify-content:flex-start;
  }
  footer .foot-grid > div:first-child{
    grid-column:auto !important;
  }
  footer .foot-links{
    margin:0;
  }
  footer .foot-links li{
    margin:9px 0;
  }
  footer .foot-links a{
    font-size:14px;
  }
  footer h3{
    font-size:18px;
    margin-bottom:14px;
  }
  footer p{
    font-size:14px;
  }

  /* Copyright should be centered on mobile. */
  footer .bottom{
    width:100%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:8px;
    margin-top:24px;
    padding-top:15px;
  }
  footer .bottom span,
  footer .bottom a{
    text-align:center;
  }
}

/* Extra-small phones */
@media (max-width: 430px){
  footer{
    padding-left:18px;
    padding-right:18px;
  }
  footer .foot-grid{
    gap:25px !important;
  }
}

/* ---------------------------------------------------------
   Make hover/focus feedback clearly visible on desktop.
   This is intentionally subtle and keeps Nemrex branding.
   --------------------------------------------------------- */

/* Marquee itself pauses when the pointer is over it. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{
  animation-play-state:paused;
}

/* Product / material / industry circular cards. */
.marquee .orbit-card{
  border-radius:12px;
  padding:6px 4px 8px;
  transition:
    transform .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

.marquee .orbit-card:hover,
.marquee .orbit-card:focus-visible{
  transform:translateY(-5px);
  background:#ffffff;
  box-shadow:0 8px 22px rgba(13,31,61,.12);
  outline:none;
}

.marquee .orbit-card:hover .orbit-image,
.marquee .orbit-card:focus-visible .orbit-image{
  transform:scale(1.045);
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(229,169,16,.14);
}

.marquee .orbit-card:hover strong,
.marquee .orbit-card:focus-visible strong{
  color:var(--gold) !important;
}

.marquee .orbit-card:hover small,
.marquee .orbit-card:focus-visible small{
  color:var(--navy) !important;
}

/* Material cards that use the same circular component. */
.material-card{
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease;
  border-radius:12px;
}

.material-card:hover,
.material-card:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 8px 22px rgba(13,31,61,.12);
  outline:none;
}

.material-card:hover .orbit-image,
.material-card:focus-visible .orbit-image{
  transform:scale(1.045);
  border-color:var(--gold) !important;
}

/* Normal clickable boxes/tools/buttons should also visibly react. */
.tool,
.btn,
.quote,
.socials a,
.nav-icon{
  transition:
    transform .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.tool:hover,
.tool:focus-visible,
.btn:hover,
.btn:focus-visible,
.quote:hover,
.quote:focus-visible{
  transform:translateY(-2px);
}

.tool:hover,
.tool:focus-visible{
  background:var(--navy);
  color:#fff;
  border-color:var(--gold);
  box-shadow:0 7px 18px rgba(13,31,61,.14);
}

.socials a:hover,
.socials a:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 7px 16px rgba(13,31,61,.18);
}

/* Don't show hover transforms for keyboard focus as an ugly outline. */
.marquee .orbit-card:focus-visible,
.material-card:focus-visible,
.tool:focus-visible,
.btn:focus-visible,
.quote:focus-visible,
.socials a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* On touch devices there is no true mouse hover.
   Keep the layout stable instead of forcing hover effects. */
@media (hover:none){
  .marquee .orbit-card:hover,
  .marquee .orbit-card:focus-visible,
  .material-card:hover,
  .material-card:focus-visible,
  .tool:hover,
  .tool:focus-visible,
  .btn:hover,
  .btn:focus-visible,
  .quote:hover,
  .quote:focus-visible,
  .socials a:hover,
  .socials a:focus-visible{
    transform:none;
  }
}

/* Quote section is not hidden under the sticky header. */
#quote{
  scroll-margin-top:110px;
}
  

   /* =========================================================
   NEMREX — Responsive + Touch Interaction System
   Desktop hover is enhanced only when a real hover device exists.
   Touch devices use .is-touch-active / :active states instead.
   ========================================================= */

/* Prevent browser tap-zoom/layout jumps on controls while preserving normal page zoom. */
a, button, input, textarea, select, [role="button"], .orbit-card, .tool {
  -webkit-tap-highlight-color: transparent;
}
a, button, [role="button"], .orbit-card, .tool {
  touch-action: manipulation;
}
button, a {
  -webkit-user-select: none;
  user-select: none;
}

/* Keyboard accessibility remains available. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.orbit-card:focus-visible,
.tool:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------- DESKTOP / REAL HOVER ---------------- */
@media (hover: hover) and (pointer: fine) {
  .links > a:hover,
  .drop > button:hover {
    color: var(--gold);
  }

  .drop:hover .drop-menu {
    display: block;
  }

  .drop-menu a:hover {
    background: #f1f4f7;
    color: var(--gold);
  }

  .btn:hover,
  .quote:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-2px);
  }

  .btn.outline:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
  }

  .btn:hover .arr {
    transform: translateX(4px);
  }

  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track {
    animation-play-state: paused;
  }

  .marquee .orbit-card:hover,
  .material-card:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 8px 22px rgba(13,31,61,.12);
  }

  .marquee .orbit-card:hover .orbit-image,
  .material-card:hover .orbit-image {
    transform: scale(1.045);
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(229,169,16,.14);
  }

  .marquee .orbit-card:hover strong,
  .material-card:hover strong {
    color: var(--gold) !important;
  }

  .tool:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(13,31,61,.14);
  }

  .socials a:hover,
  .quick-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(13,31,61,.18);
  }

  .hero-arrow:hover {
    background: var(--gold);
    color: var(--navy);
  }

  .links > a.nav-icon:hover {
    background: var(--navy);
    color: var(--gold);
    transform: translateY(-2px);
  }
}

/* ---------------- TOUCH / COARSE POINTER ---------------- */
@media (hover: none), (pointer: coarse) {
  /* Neutralize sticky browser-emulated :hover so it cannot leave a
     desktop hover style stuck after a tap. */
  .links > a:hover,
  .drop > button:hover,
  .drop-menu a:hover,
  .btn:hover,
  .btn.outline:hover,
  .quote:hover,
  .tool:hover,
  .socials a:hover,
  .quick-action:hover,
  .hero-arrow:hover,
  .links > a.nav-icon:hover,
  .marquee .orbit-card:hover,
  .material-card:hover,
  .marquee .orbit-card:hover .orbit-image,
  .material-card:hover .orbit-image,
  .marquee .orbit-card:hover strong,
  .material-card:hover strong {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
    box-shadow: none;
    transform: none;
  }

  .btn:hover .arr {
    transform: none;
  }

  .drop:hover .drop-menu {
    display: none;
  }

  /* JS adds this class for a short, visible tap state. */
  .is-touch-active {
    transform: translateY(-2px) scale(.985) !important;
    transition: transform .12s ease, background-color .12s ease,
                color .12s ease, box-shadow .12s ease !important;
  }

  .is-touch-active.btn,
  .is-touch-active.quote {
    background: var(--navy) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(13,31,61,.16) !important;
  }

  .is-touch-active.btn.outline {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
  }

  .is-touch-active .arr {
    transform: translateX(3px) !important;
  }

  .is-touch-active.orbit-card,
  .is-touch-active.material-card {
    transform: translateY(-4px) !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(13,31,61,.12) !important;
  }

  .is-touch-active.orbit-card .orbit-image,
  .is-touch-active.material-card .orbit-image {
    transform: scale(1.035) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(229,169,16,.12) !important;
  }

  .is-touch-active.orbit-card strong,
  .is-touch-active.material-card strong {
    color: var(--gold) !important;
  }

  .is-touch-active.tool {
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 6px 16px rgba(13,31,61,.14) !important;
  }

  .is-touch-active.social-link,
  .is-touch-active.quick-action {
    transform: translateY(-3px) scale(.98) !important;
    box-shadow: 0 8px 18px rgba(13,31,61,.18) !important;
  }

  /* Touching a marquee temporarily pauses it. */
  .marquee.is-touching .marquee-track {
    animation-play-state: paused !important;
  }
}

/* ---------------- MOBILE / TABLET LAYOUT ---------------- */
@media (max-width: 900px) {
  .section {
    padding-left: 5%;
    padding-right: 5%;
  }

  .about,
  .tech,
  .quote-layout {
    grid-template-columns: 1fr;
  }

  .about-art {
    min-height: 260px;
  }

  .tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quote-copy,
  .quote-form {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 90px;
  }

  body {
    overflow-x: hidden;
  }

  header {
    z-index: 100;
  }

  .nav {
    width: 100%;
    min-height: 66px;
    padding: 8px 4%;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand img,
  header .brand img {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .brand-text,
  .lockup {
    min-width: 0;
  }

  .brand-text b,
  .lockup b {
    font-size: clamp(20px, 6vw, 25px);
  }

  .brand-text small,
  .lockup small {
    font-size: 8px;
  }

  .menu {
    display: block !important;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
  }

  .links {
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 5% 16px;
  }

  .links > a,
  .drop > button {
    min-height: 46px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 4px;
  }

  .drop-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 2px 0 5px 8px;
    border-top: 0;
    border-left: 2px solid var(--gold);
    box-shadow: none;
  }

  .drop-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 11px 12px;
  }

  .hero {
    min-height: 470px;
  }

  .hero-inner {
    width: 100%;
    padding: 48px 6% 62px;
  }

  .hero-controls {
    bottom: 15px;
  }

  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-section {
    padding: 34px 5%;
  }

  .quote-copy,
  .quote-form {
    width: 100%;
    padding: 26px 22px;
  }

  .quote-form input,
  .quote-form textarea,
  .quote-form select {
    font-size: 16px !important; /* prevents iOS/Chrome mobile input zoom */
  }

  /* Footer becomes one vertical section at a time. */
  footer .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  footer .foot-grid > div {
    grid-column: auto !important;
    width: 100%;
  }

  footer .bottom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px;
  }

  footer .bottom > * {
    text-align: center !important;
  }

  .quick-actions {
    left: 12px;
    bottom: 14px;
  }

  .quick-action {
    width: 46px;
    height: 46px;
  }

  /* Don't show desktop tooltip labels on touch screens. */
  .quick-action::after {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .section {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .hero {
    min-height: 455px;
  }

  .hero-inner {
    padding: 42px 6% 62px;
  }

  .hero-inner .btn {
    width: 100%;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .benefits {
    grid-template-columns: 1fr;
  }

  .benefit {
    justify-content: flex-start;
  }

  .tools {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .orbit-card {
    flex-basis: 124px;
    width: 124px;
  }

  .orbit-image {
    width: 96px;
    height: 96px;
  }

  .quote-copy h2 {
    font-size: clamp(27px, 8vw, 34px);
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 380px) {
  .brand img,
  header .brand img {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .brand-text b,
  .lockup b {
    font-size: 20px;
  }

  .brand-text small,
  .lockup small {
    font-size: 7px;
  }

  .tools {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    left: 8px;
  }
}

/* Respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
  

   /* =========================================================
   NEMREX — FINAL MOBILE / TOUCH FIX
   Fixes:
   1. True hover only on mouse/trackpad.
   2. Visible tap feedback on touch devices.
   3. Correct header logo proportions (original logo is 275x185).
   4. Correct .lockup targeting used by the actual HTML.
   5. Stable mobile navigation and dropdown alignment.
   6. Consistent spacing / overflow at small widths.
   ========================================================= */

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav {
  width: 100%;
  max-width: 1660px;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 4%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 72px;
  flex: 0 1 auto;
}

/* IMPORTANT: the supplied logo is 275x185 (wide), so do NOT force it
   into a 76x76 square. Height controls the visual size while width
   stays proportional. */
header .brand img {
  width: auto !important;
  height: 76px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  object-fit: contain;
  display: block;
}

header .brand .lockup {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  line-height: 1;
  white-space: nowrap;
}

header .brand .lockup b {
  font-family: "Yeseva One", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .025em;
  color: var(--navy);
}

header .brand .lockup small {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 7px;
  font-family: "Canva Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold);
}

.menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid #d9dee6;
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.menu::before {
  content: "☰";
  font-size: 25px;
  line-height: 1;
}

/* Base interaction transitions — hover is NOT defined here. */
.btn,
.quote,
.tool,
.socials a,
.quick-action,
.nav-icon,
.orbit-card,
.material-card,
.hero-arrow {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

/* REAL mouse/trackpad hover only. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .quote:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-2px);
  }

  .btn.outline:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
  }

  .tool:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(13,31,61,.14);
  }

  .marquee .orbit-card:hover,
  .material-card:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 8px 22px rgba(13,31,61,.12);
  }

  .marquee .orbit-card:hover .orbit-image,
  .material-card:hover .orbit-image {
    transform: scale(1.045);
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(229,169,16,.14);
  }

  .marquee .orbit-card:hover strong,
  .material-card:hover strong {
    color: var(--gold) !important;
  }

  .socials a:hover,
  .quick-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(13,31,61,.18);
  }

  .hero-arrow:hover {
    background: var(--gold);
    color: var(--navy);
  }
}

/* TOUCH DEVICES — no fake/sticky :hover. */
@media (hover: none), (pointer: coarse) {
  .links > a:hover,
  .drop > button:hover,
  .drop-menu a:hover,
  .btn:hover,
  .btn.outline:hover,
  .quote:hover,
  .tool:hover,
  .socials a:hover,
  .quick-action:hover,
  .hero-arrow:hover,
  .nav-icon:hover,
  .marquee .orbit-card:hover,
  .material-card:hover,
  .marquee .orbit-card:hover .orbit-image,
  .material-card:hover .orbit-image,
  .marquee .orbit-card:hover strong,
  .material-card:hover strong {
    transform: none !important;
  }

  /* Visible tap state is controlled by JS. */
  .touch-pressed.btn,
  .touch-pressed.quote {
    background: var(--navy) !important;
    color: #fff !important;
    transform: translateY(-2px) scale(.985) !important;
    box-shadow: 0 7px 18px rgba(13,31,61,.18) !important;
  }

  .touch-pressed.btn.outline {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
  }

  .touch-pressed.tool {
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--gold) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 18px rgba(13,31,61,.14) !important;
  }

  .touch-pressed.orbit-card,
  .touch-pressed.material-card {
    background: #fff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 7px 18px rgba(13,31,61,.12) !important;
  }

  .touch-pressed.orbit-card .orbit-image,
  .touch-pressed.material-card .orbit-image {
    transform: scale(1.035) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(229,169,16,.12) !important;
  }

  .touch-pressed.orbit-card strong,
  .touch-pressed.material-card strong {
    color: var(--gold) !important;
  }

  .touch-pressed.social-link,
  .touch-pressed.quick-action,
  .touch-pressed.hero-arrow,
  .touch-pressed.nav-icon {
    transform: translateY(-2px) scale(.98) !important;
    box-shadow: 0 7px 18px rgba(13,31,61,.18) !important;
  }

  .touch-paused .marquee-track {
    animation-play-state: paused !important;
  }
}

/* Tablet/mobile navigation. */
@media (max-width: 1100px) {
  .nav {
    min-height: 74px;
    padding: 7px 4%;
    gap: 12px;
  }

  header .brand img {
    height: 64px !important;
  }

  header .brand .lockup b {
    font-size: 26px;
  }

  header .brand .lockup small {
    font-size: 10px;
  }

  .menu {
    display: inline-flex !important;
    flex: 0 0 44px;
    margin-left: auto;
  }

  .links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 5% 16px;
    margin: 0;
    background: #fff;
    border-top: 1px solid #e1e6ec;
    box-shadow: 0 14px 28px rgba(13,31,61,.14);
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .links.open {
    display: flex;
  }

  .links > a,
  .drop > button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 13px 4px;
    font-size: 15px;
    text-align: left;
  }

  .links > a::after,
  .drop > button::after {
    bottom: 2px;
  }

  .drop-menu {
    position: static !important;
    width: 100%;
    min-width: 0;
    margin: 2px 0 6px 8px;
    padding: 3px 0 3px 12px;
    border: 0 !important;
    border-left: 2px solid var(--gold) !important;
    border-radius: 0;
    box-shadow: none !important;
  }

  .drop-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 11px 12px;
    font-size: 14px;
  }

  .links > .nav-sep {
    display: none;
  }

  .links > .nav-icon {
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 13px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    justify-content: flex-start;
    gap: 12px;
  }

  .nav-icon-label {
    display: inline;
  }

  .links > .quote {
    justify-content: center;
    width: 100%;
    margin-top: 8px;
  }
}

/* Mobile content alignment. */
@media (max-width: 900px) {
  .section {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }

  .about,
  .tech,
  .quote-layout {
    grid-template-columns: 1fr !important;
  }

  .about-art {
    min-height: 260px;
  }

  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quote-copy,
  .quote-form {
    min-width: 0;
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Small phones. */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 88px;
  }

  .nav {
    min-height: 68px;
    padding: 7px 4%;
    gap: 9px;
  }

  header .brand {
    gap: 10px;
    min-height: 58px;
    max-width: calc(100% - 54px);
  }

  header .brand img {
    height: 58px !important;
  }

  header .brand .lockup {
    min-width: 0;
    max-width: calc(100vw - 132px);
  }

  header .brand .lockup b {
    font-size: clamp(21px, 7vw, 25px);
    overflow: hidden;
    text-overflow: clip;
  }

  header .brand .lockup small {
    font-size: clamp(8px, 2.5vw, 10px);
    margin-top: 6px;
  }

  .links {
    max-height: calc(100vh - 68px);
  }

  .hero {
    min-height: 455px;
  }

  .hero-inner {
    width: 100%;
    padding: 42px 6% 62px;
  }

  .hero-inner .btn {
    width: 100%;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .benefits {
    grid-template-columns: 1fr 1fr;
  }

  .benefit {
    min-width: 0;
    justify-content: flex-start;
    padding: 15px 10px;
    font-size: 13px;
  }

  .tools {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .orbit-card {
    flex-basis: 124px;
    width: 124px;
  }

  .orbit-image {
    width: 96px;
    height: 96px;
  }

  .quote-section {
    padding: 34px 5%;
  }

  .quote-copy,
  .quote-form {
    min-height: 0;
    padding: 24px 20px;
  }

  .quote-form input,
  .quote-form textarea,
  .quote-form select {
    font-size: 16px !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  footer .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  footer .foot-grid > div {
    grid-column: auto !important;
    width: 100%;
  }

  footer .bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px;
  }

  .quick-actions {
    left: 12px;
    bottom: 14px;
  }

  .quick-action {
    width: 46px;
    height: 46px;
  }

  .quick-action::after {
    display: none !important;
  }
}

/* Very small phones — keep the complete wordmark visible. */
@media (max-width: 420px) {
  header .brand img {
    height: 52px !important;
  }

  header .brand {
    gap: 8px;
  }

  header .brand .lockup b {
    font-size: 21px;
    letter-spacing: .02em;
  }

  header .brand .lockup small {
    font-size: 8px;
  }

  .menu {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-basis: 42px;
  }

  .benefits {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .touch-pressed,
  .btn,
  .tool,
  .orbit-card,
  .material-card,
  .socials a,
  .quick-action {
    transition: none !important;
  }
}
  

   /* =========================================================
   NEMREX — FINAL MOBILE LAYOUT + FLOATING ACTIONS
   ========================================================= */

/* Benefits: keep the five points compact and balanced on phones. */
@media (max-width: 760px) {
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    overflow: hidden;
  }

  .benefit {
    min-height: 76px;
    padding: 12px 14px !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    border-right: 1px solid #d3dce5;
    border-bottom: 1px solid #d3dce5;
    font-size: 13px !important;
    line-height: 1.35;
  }

  .benefit:nth-child(2n) {
    border-right: 0;
  }

  .benefit:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    justify-content: center !important;
  }

  .benefit svg {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
  }
}

/* Very narrow phones: retain two columns but reduce spacing slightly. */
@media (max-width: 380px) {
  .benefit {
    min-height: 72px;
    padding: 10px 9px !important;
    gap: 8px;
    font-size: 12.5px !important;
  }

  .benefit svg {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
}

/* ---------------------------------------------------------
   Floating contact controls — original circular style
   WhatsApp + Email + Google Review = right-middle stack.
   Back-to-top remains separate at bottom-right.
   --------------------------------------------------------- */
.quick-actions {
  position: fixed !important;
  left: auto !important;
  right: 14px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 1200 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.quick-actions .quick-action {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  box-shadow: 0 6px 16px rgba(13,31,61,.24) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.quick-actions .quick-action svg {
  width: 23px !important;
  height: 23px !important;
}

.quick-actions .quick-action.whatsapp { background: #25D366 !important; }
.quick-actions .quick-action.whatsapp svg { fill: #fff !important; }
.quick-actions .quick-action.email { background: #EA4335 !important; }
.quick-actions .quick-action.email svg { fill: #fff !important; }
.quick-actions .quick-action.google { background: #fff !important; }

@media (hover: hover) and (pointer: fine) {
  .quick-actions .quick-action:hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 9px 20px rgba(13,31,61,.30) !important;
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
}

@media (hover: none), (pointer: coarse) {
  .quick-actions .quick-action:active,
  .quick-actions .quick-action.is-touch-active {
    transform: scale(.96) !important;
    box-shadow: 0 5px 12px rgba(13,31,61,.28) !important;
  }
}

/* Keep the floating controls away from the edge on small phones. */
@media (max-width: 520px) {
  .quick-actions {
    right: 10px !important;
    gap: 9px !important;
  }

  .quick-actions .quick-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .quick-actions .quick-action svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Don't let the fixed controls create horizontal overflow. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
  

   /* =========================================================
   FINAL MOBILE ADJUSTMENTS
   1. Four benefit boxes only (2 x 2)
   2. Comfortable side spacing on phones
   3. Contact icons sit lower than center, above Back-to-Top
   4. Footer Back-to-Top text removed; floating arrow remains
   ========================================================= */
@media (max-width: 760px) {
  .benefits {
    width: calc(100% - 28px) !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border: 1px solid #d3dce5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .benefit {
    min-height: 78px !important;
    padding: 12px 14px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-right: 1px solid #d3dce5 !important;
    border-bottom: 1px solid #d3dce5 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .benefit:nth-child(2n) {
    border-right: 0 !important;
  }

  .benefit:nth-child(n+3) {
    border-bottom: 0 !important;
  }

  .benefit svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  /* Three circular contact buttons: lower than the viewport center,
     but still clearly above the separate Back-to-Top button. */
  .quick-actions {
    top: 64vh !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translate3d(0, -50%, 0) !important;
    gap: 9px !important;
    z-index: 1200 !important;
  }

  .quick-actions .quick-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* The floating arrow is the only Back-to-Top control on mobile. */
  footer .bottom > a[href="/"] {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .benefits {
    width: calc(100% - 20px) !important;
  }

  .benefit {
    min-height: 72px !important;
    padding: 10px 10px !important;
    gap: 8px !important;
    font-size: 12.5px !important;
  }

  .benefit svg {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }

  .quick-actions {
    right: 8px !important;
    top: 63vh !important;
  }
}
  

   /* FINAL MOBILE FLOATING CONTROLS
   WhatsApp + Email + Google Review sit directly above Back-to-Top.
   The gap is intentionally small so the controls feel like one footer-side group. */
@media (max-width: 760px) {
  .quick-actions {
    top: auto !important;
    bottom: 64px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    gap: 8px !important;
    z-index: 1200 !important;
  }

  .quick-actions .quick-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .back-top {
    right: 10px !important;
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 1201 !important;
  }
}

@media (max-width: 380px) {
  .quick-actions {
    right: 8px !important;
    bottom: 62px !important;
    gap: 7px !important;
  }

  .quick-actions .quick-action {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .back-top {
    right: 8px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }
}
  

   /* NEMREX V7 — clean spacing for the 4 benefit cards on desktop + mobile */
.benefits {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #fff !important;
}
.benefit {
  min-width: 0;
  min-height: 78px;
  border: 1px solid #d3dce5 !important;
  background: #f5f8fa;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .benefit {
    min-height: 78px !important;
    border: 1px solid #d3dce5 !important;
    border-radius: 2px;
  }

  /* Keep all four cards in a true 2 x 2 grid. */
  .benefit:last-child {
    grid-column: auto !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 380px) {
  .benefits {
    width: calc(100% - 20px) !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  .benefit {
    min-height: 72px !important;
  }
}

/* Keep the floating arrow clear of the bottom edge and leave a visible gap
   between the three contact buttons and the arrow. */
@media (max-width: 760px) {
  .quick-actions {
    bottom: 72px !important;
    gap: 8px !important;
  }

  .back-top {
    bottom: 18px !important;
  }
}

@media (max-width: 380px) {
  .quick-actions {
    bottom: 70px !important;
  }

  .back-top {
    bottom: 16px !important;
  }
}
  

   /* =========================================================
   FINAL FLOATING CONTACT POSITION
   Match the completed About Us page:
   WhatsApp / Email / Google Review = RIGHT SIDE, LOWER AREA
   Back-to-Top = directly below the contact group.
   ========================================================= */

.quick-actions{
  position:fixed !important;
  right:16px !important;
  left:auto !important;
  bottom:86px !important;
  top:auto !important;
  z-index:1000 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:9px !important;
}

.quick-actions .quick-action{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 5px 14px rgba(13,31,61,.28) !important;
}

.quick-actions .quick-action svg{
  width:25px !important;
  height:25px !important;
}

.quick-actions .quick-action::after{
  left:auto !important;
  right:calc(100% + 10px) !important;
}

/* Desktop/tablet: touch/focus feedback remains available without
   changing the fixed right-side position. */
@media (hover:hover) and (pointer:fine){
  .quick-actions .quick-action:hover{
    transform:translateY(-2px) scale(1.03) !important;
    box-shadow:0 9px 20px rgba(13,31,61,.32) !important;
    outline:2px solid var(--gold) !important;
    outline-offset:2px !important;
  }
}

@media (hover:none), (pointer:coarse){
  .quick-actions .quick-action:active,
  .quick-actions .quick-action.is-touch-active{
    transform:scale(.96) !important;
    box-shadow:0 5px 12px rgba(13,31,61,.28) !important;
    outline:2px solid var(--gold) !important;
    outline-offset:2px !important;
  }
}

/* Back-to-top directly underneath the three contact buttons. */
.back-top{
  position:fixed !important;
  right:16px !important;
  left:auto !important;
  bottom:20px !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  z-index:1001 !important;
}

/* Mobile: keep the same right-side vertical group, with smaller
   controls and a small intentional gap above Back-to-Top. */
@media (max-width:760px){
  .quick-actions{
    right:12px !important;
    left:auto !important;
    bottom:72px !important;
    top:auto !important;
    gap:8px !important;
  }

  .quick-actions .quick-action{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }

  .quick-actions .quick-action svg{
    width:24px !important;
    height:24px !important;
  }

  .quick-actions .quick-action::after{
    display:none !important;
  }

  .back-top{
    right:12px !important;
    bottom:18px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }
}

@media (max-width:380px){
  .quick-actions{
    right:8px !important;
    bottom:70px !important;
    gap:7px !important;
  }

  .quick-actions .quick-action{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  .quick-actions .quick-action svg{
    width:22px !important;
    height:22px !important;
  }

  .back-top{
    right:8px !important;
    bottom:16px !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }
}
  

   /* FINAL FLOATING CONTROL GROUP — WhatsApp / Email / Google / Back to Top */
.quick-actions{
  position:fixed !important;
  right:16px !important;
  left:auto !important;
  top:auto !important;
  bottom:20px !important;
  transform:none !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  z-index:1200 !important;
}
.quick-actions .quick-action,
.quick-actions .back-top{
  position:static !important;
  flex:0 0 48px !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  box-sizing:border-box !important;
}
/* Keep Back-to-Top out of the layout until it becomes visible. */
.quick-actions .back-top{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.quick-actions .back-top.show{
  display:grid !important;
  opacity:1 !important;
  visibility:visible !important;
}
.quick-actions .quick-action{
  display:grid !important;
  place-items:center !important;
}
.quick-actions .quick-action svg{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
}
.quick-actions .back-top{
  border-radius:50% !important;
  font-size:22px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
/* Fine-pointer hover only; touch devices use active/focus feedback. */
@media (hover:hover) and (pointer:fine){
  .quick-actions .quick-action:hover,
  .quick-actions .back-top:hover{
    transform:translateY(-2px) !important;
  }
}
@media (hover:none), (pointer:coarse){
  .quick-actions .quick-action:active,
  .quick-actions .quick-action:focus-visible,
  .quick-actions .back-top:active,
  .quick-actions .back-top:focus-visible{
    transform:scale(.94) !important;
  }
}
@media (max-width:760px){
  .quick-actions{
    right:12px !important;
    bottom:18px !important;
    gap:8px !important;
  }
  .quick-actions .quick-action,
  .quick-actions .back-top{
    flex-basis:46px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
  }
}
@media (max-width:380px){
  .quick-actions{
    right:8px !important;
    bottom:16px !important;
    gap:7px !important;
  }
  .quick-actions .quick-action,
  .quick-actions .back-top{
    flex-basis:42px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
  }
  .quick-actions .quick-action svg{
    width:20px !important;
    height:20px !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .quick-actions .quick-action,
  .quick-actions .back-top{
    transition:none !important;
  }
}
  

   /* =========================================================
   NEMREX HOME PAGE — FINAL VISUAL / RESPONSIVE ALIGNMENT
   Matched to the finished About Us page supplied by the user.
   This layer intentionally overrides older conflicting rules.
   ========================================================= */
.home-page{
  --navy:#0D1F3D;
  --gold:#E5A910;
  --grey:#545454;
  --soft:#f3f7fa;
  overflow-x:hidden;
}
.home-page, .home-page *{box-sizing:border-box}
.home-page body{overflow-x:hidden}
.home-page header .nav{
  width:100%;max-width:1400px;margin:0 auto;min-height:78px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:7px 3.2%!important;
}
.home-page header .brand{
  gap:14px!important;min-height:72px;flex:0 0 auto;overflow:visible;
}
.home-page header .brand img{
  width:auto!important;height:70px!important;max-width:none!important;
  flex:0 0 auto!important;object-fit:contain!important;
}
.home-page header .brand .lockup{
  display:flex!important;flex-direction:column!important;min-width:0;
  white-space:nowrap;justify-content:center;
}
.home-page header .brand .lockup b{
  font-family:"Yeseva One",Georgia,"Times New Roman",serif!important;
  font-size:30px!important;font-weight:400!important;line-height:1!important;
  letter-spacing:.025em!important;color:#0D1F3D!important;white-space:nowrap!important;
}
.home-page header .brand .lockup small{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  margin-top:7px!important;color:#E5A910!important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
  font-size:11px!important;line-height:1!important;letter-spacing:.40em!important;font-weight:700!important;
}
.home-page header .links{
  flex:1 1 auto;min-width:0;justify-content:flex-end;align-items:center;
  gap:clamp(9px,1.05vw,18px);font-size:13px;
}
.home-page header .links>a,.home-page header .links>.drop>button{
  min-height:44px;display:inline-flex;align-items:center;
}
.home-page header .menu{
  display:none;flex:0 0 44px;width:44px;height:44px;min-width:44px;
  padding:0;align-items:center;justify-content:center;border:1px solid #d8dee7;
  border-radius:5px;background:#fff;color:#0D1F3D;font-size:21px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.home-page h1,.home-page h2,.home-page h3,.home-page h4{
  font-family:"Yeseva One",Georgia,"Times New Roman",serif;
}
.home-page p,.home-page li,.home-page label,.home-page input,.home-page textarea,
.home-page select,.home-page button,.home-page .btn,.home-page .links{
  font-family:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif;
}
.home-page p{font-size:15.5px;line-height:1.7}
.home-page h1{line-height:1.08;overflow-wrap:anywhere}
.home-page h2{line-height:1.15;overflow-wrap:anywhere}

/* Hero: keep the existing supplied artwork, but use the same clean type rhythm. */
.home-page .hero h1{font-family:"Yeseva One",Georgia,serif;color:#fff!important;text-shadow:0 2px 18px rgba(4,12,28,.45)}
.home-page .hero h1 em{color:#E5A910!important}
.home-page .hero .eyebrow{font-family:"Canva Sans","Open Sans",Arial,sans-serif;text-shadow:0 1px 10px rgba(4,12,28,.5)}
.home-page .hero p{font-family:"Canva Sans","Open Sans",Arial,sans-serif}
.home-page .btn{min-height:48px}

/* Floating controls: all four are ONE visual group. */
.home-page .quick-actions{
  position:fixed!important;right:16px!important;left:auto!important;
  bottom:18px!important;top:auto!important;z-index:1200!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:8px!important;width:auto!important;height:auto!important;
  transform:none!important;
}
.home-page .quick-actions .quick-action,
.home-page .quick-actions .back-top{
  position:static!important;flex:0 0 48px!important;width:48px!important;height:48px!important;
  min-width:48px!important;min-height:48px!important;max-width:48px!important;max-height:48px!important;
  margin:0!important;padding:0!important;border-radius:50%!important;box-sizing:border-box!important;
}
.home-page .quick-actions .quick-action{
  display:grid!important;place-items:center!important;border:0!important;
  box-shadow:0 5px 14px rgba(13,31,61,.28)!important;
}
.home-page .quick-actions .quick-action svg{width:25px!important;height:25px!important;max-width:25px!important;max-height:25px!important}
.home-page .quick-actions .quick-action.whatsapp{background:#25D366!important}
.home-page .quick-actions .quick-action.email{background:#EA4335!important}
.home-page .quick-actions .quick-action.google{background:#fff!important;border:1px solid #dadce0!important}
.home-page .quick-actions .back-top{
  display:none!important;background:#E5A910!important;color:#0D1F3D!important;border:0!important;
  box-shadow:0 5px 14px rgba(13,31,61,.28)!important;
  font-family:Arial,sans-serif!important;font-size:21px!important;font-weight:500!important;
  line-height:1!important;place-items:center;
}
.home-page .quick-actions .back-top.show{display:grid!important;opacity:1!important;visibility:visible!important}

/* Footer matches the finished About Us footer proportions. */
.home-page footer p,.home-page footer .foot-grid>div:first-child>p{color:#fff!important;opacity:1!important}
.home-page footer .foot-brand{gap:14px!important;align-items:center!important}
.home-page footer .foot-brand img{width:auto!important;height:70px!important;max-width:none!important;flex:0 0 auto!important;object-fit:contain!important}
.home-page footer .foot-brand .lockup b{
  font-family:"Yeseva One",Georgia,serif!important;font-size:30px!important;font-weight:400!important;
  line-height:1!important;color:#fff!important;white-space:nowrap!important;
}
.home-page footer .foot-brand .lockup small{
  display:flex!important;width:100%!important;min-width:100%!important;justify-content:space-between!important;
  align-items:center!important;white-space:nowrap!important;letter-spacing:0!important;line-height:1!important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;color:#E5A910!important;
}

/* Mobile: same menu behavior and footer stacking as About Us. */
@media (max-width:1100px){
  .home-page header .brand img{height:64px!important}
  .home-page header .brand .lockup b{font-size:27px!important}
  .home-page header .brand .lockup small{font-size:10px!important}
  .home-page footer .foot-brand img{height:64px!important}
}
@media (max-width:790px){
  .home-page header .nav{min-height:76px!important;padding:6px 4.5%!important}
  .home-page header .brand{gap:12px!important;min-height:64px!important}
  .home-page header .brand img{width:auto!important;height:62px!important;flex-basis:auto!important}
  .home-page header .brand .lockup b{font-size:25px!important}
  .home-page header .brand .lockup small{font-size:9px!important;letter-spacing:.38em!important}
  .home-page header .menu{display:flex!important;width:46px!important;height:46px!important;min-width:46px!important}
  .home-page header .links{
    display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;
    max-height:calc(100vh - 76px);overflow-y:auto;padding:10px 4.5% 16px!important;background:#fff!important;
    border-top:1px solid #e0e5eb!important;box-shadow:0 14px 28px rgba(13,31,61,.16)!important;
    flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;
  }
  .home-page header .links.open{display:flex!important}
  .home-page header .links>a,.home-page header .links>.drop>button{
    width:100%!important;min-height:48px!important;padding:0 4px!important;display:flex!important;
    align-items:center!important;justify-content:flex-start!important;text-align:left!important;font-size:14px!important;
  }
  .home-page header .links>a:after,.home-page header .links>.drop>button:after{bottom:0!important}
  .home-page header .drop-menu{
    display:none!important;position:static!important;width:auto!important;min-width:0!important;margin:0 0 5px 8px!important;
    padding:4px 0 4px 12px!important;border:0!important;border-left:2px solid #E5A910!important;box-shadow:none!important;
  }
  .home-page header .drop.open>.drop-menu{display:block!important}
  .home-page header .drop-menu a{min-height:42px;padding:9px 10px!important;font-size:13px!important;display:flex;align-items:center}
  .home-page header .links>a.nav-icon{width:100%!important;height:auto!important;min-height:48px!important;border:0!important;border-radius:0!important;background:transparent!important;display:flex!important;justify-content:flex-start!important;gap:12px!important}
  .home-page header .links>.quote{justify-content:center!important;margin-top:8px!important;width:100%!important}

  .home-page .hero{min-height:500px!important}
  .home-page .hero .hero-content{width:92%!important;max-width:none!important}
  .home-page .hero h1{font-size:clamp(34px,9vw,48px)!important}
  .home-page .hero p{font-size:15px!important;line-height:1.62!important}
  .home-page .hero .hero-actions{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important}
  .home-page .hero .hero-actions .btn{width:100%!important;justify-content:center!important}

  .home-page .quick-actions{right:12px!important;bottom:18px!important;gap:8px!important}
  .home-page .quick-actions .quick-action,.home-page .quick-actions .back-top{
    flex-basis:46px!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
    max-width:46px!important;max-height:46px!important;
  }
  .home-page .quick-actions .quick-action svg{width:24px!important;height:24px!important}

  .home-page footer{padding:32px 20px 14px!important}
  .home-page footer .foot-grid{display:grid!important;grid-template-columns:1fr!important;gap:28px!important;width:100%!important}
  .home-page footer .foot-grid>div{grid-column:auto!important;width:100%!important}
  .home-page footer h3{font-size:18px!important;margin-bottom:14px!important}
  .home-page footer .foot-links li{margin:9px 0!important}
  .home-page footer .foot-links a{font-size:14px!important}
  .home-page footer p{font-size:14px!important}
  .home-page footer .bottom{
    width:100%!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;
    gap:8px!important;margin-top:24px!important;padding-top:15px!important;
  }
}
@media (max-width:520px){
  .home-page header .nav{min-height:72px!important;padding:5px 4.5%!important}
  .home-page header .brand{gap:10px!important}
  .home-page header .brand img{height:58px!important}
  .home-page header .brand .lockup b{font-size:23px!important}
  .home-page header .brand .lockup small{font-size:8px!important;margin-top:6px!important}
  .home-page header .menu{width:44px!important;height:44px!important;min-width:44px!important}
  .home-page .quick-actions{right:10px!important;bottom:16px!important;gap:7px!important}
  .home-page .quick-actions .quick-action,.home-page .quick-actions .back-top{
    flex-basis:44px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    max-width:44px!important;max-height:44px!important;
  }
  .home-page .quick-actions .quick-action svg{width:23px!important;height:23px!important}
  .home-page footer .foot-brand{gap:10px!important}
  .home-page footer .foot-brand img{height:60px!important}
  .home-page footer .foot-brand .lockup b{font-size:22px!important}
  .home-page footer .foot-brand .lockup small{font-size:9px!important;margin-top:6px!important}
  .home-page .hero{min-height:510px!important}
  .home-page .hero h1{font-size:clamp(31px,8.6vw,40px)!important}
  .home-page .hero .hero-content{padding:46px 0 56px!important}
  .home-page .benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-page .benefit{min-width:0!important}
}
@media (max-width:380px){
  .home-page header .brand .lockup b{font-size:21px!important}
  .home-page header .brand img{height:54px!important}
  .home-page .quick-actions{right:8px!important;bottom:14px!important;gap:6px!important}
  .home-page .quick-actions .quick-action,.home-page .quick-actions .back-top{
    flex-basis:42px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
    max-width:42px!important;max-height:42px!important;
  }
  .home-page .quick-actions .quick-action svg{width:22px!important;height:22px!important}
}

/* Touch devices get visible pressed feedback; hover remains desktop-only. */
@media (hover:hover) and (pointer:fine){
  .home-page .quick-actions .quick-action:hover,
  .home-page .quick-actions .back-top:hover{transform:translateY(-2px)!important;box-shadow:0 9px 20px rgba(13,31,61,.34)!important}
  .home-page .btn:hover .arr{transform:translateX(4px)}
}
@media (hover:none),(pointer:coarse){
  .home-page .links a:active,.home-page .links button:active,.home-page .btn:active,
  .home-page .quick-action:active,.home-page .back-top:active,.home-page .menu:active{transform:translateY(1px)!important}
  .home-page .drop-menu a:active{background:#f1f4f7!important;color:#E5A910!important}
}
@media (prefers-reduced-motion:reduce){
  .home-page *,.home-page *::before,.home-page *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
  

   /* =========================================================
   FINAL HOME FLOATING CONTROLS — EXACTLY MATCH ABOUT US
   The 3 contact icons sit higher on the right side.
   Back-to-top stays separately at the bottom, just like About Us.
   ========================================================= */

.home-page .quick-actions{
  position:fixed!important;
  right:16px!important;
  left:auto!important;
  top:auto!important;
  bottom:86px!important;
  transform:none!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:9px!important;
  z-index:1200!important;
}

.home-page .quick-actions .quick-action{
  position:static!important;
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  max-width:48px!important;
  max-height:48px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
}

.home-page .quick-actions .quick-action svg{
  width:25px!important;
  height:25px!important;
}

/* Back-to-top is deliberately NOT part of the 3-icon stack.
   It remains at the bottom-right exactly like the About page. */
.home-page .quick-actions .back-top{
  position:fixed!important;
  right:16px!important;
  left:auto!important;
  top:auto!important;
  bottom:20px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  max-width:48px!important;
  max-height:48px!important;
  flex:none!important;
  margin:0!important;
  z-index:1201!important;
  border-radius:50%!important;
  background:#E5A910!important;
  color:#0D1F3D!important;
  border:0!important;
  box-shadow:0 5px 14px rgba(13,31,61,.28)!important;
}

@media (max-width:760px){
  .home-page .quick-actions{
    right:12px!important;
    bottom:82px!important;
    gap:8px!important;
  }
  .home-page .quick-actions .quick-action{
    flex-basis:46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
  }
  .home-page .quick-actions .quick-action svg{
    width:24px!important;
    height:24px!important;
  }
  .home-page .quick-actions .back-top{
    right:12px!important;
    bottom:18px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
  }
}

@media (max-width:520px){
  .home-page .quick-actions{
    right:12px!important;
    bottom:82px!important;
    gap:8px!important;
  }
  .home-page .quick-actions .quick-action{
    flex-basis:46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
  }
  .home-page .quick-actions .back-top{
    right:12px!important;
    bottom:18px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
  }
}

@media (max-width:380px){
  .home-page .quick-actions{
    right:10px!important;
    bottom:80px!important;
    gap:7px!important;
  }
  .home-page .quick-actions .quick-action{
    flex-basis:44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
  }
  .home-page .quick-actions .quick-action svg{
    width:23px!important;
    height:23px!important;
  }
  .home-page .quick-actions .back-top{
    right:10px!important;
    bottom:16px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
  }
}

/* Keep the touch behaviour from the existing page. */
@media (hover:none),(pointer:coarse){
  .home-page .quick-actions .quick-action:active,
  .home-page .quick-actions .back-top:active{
    transform:translateY(1px)!important;
  }
}
  

   .mobile-nav-overlay{display:none}
.drawer-head{display:none}
@media (max-width:790px){
html,body{max-width:100%;overflow-x:hidden}
body.mobile-menu-open{overflow:hidden;touch-action:none}
.home-page header{z-index:1300!important}
.home-page .mobile-nav-overlay{display:block;position:fixed;inset:0;background:rgba(5,14,29,.68);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease;z-index:1301}
.home-page .mobile-nav-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.home-page header .links,.home-page header .links.open{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;width:min(310px,84vw)!important;max-width:310px!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0 14px 24px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff!important;border:0!important;box-shadow:10px 0 30px rgba(0,0,0,.18)!important;z-index:1303!important;transform:translateX(-105%);visibility:hidden;pointer-events:none;transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear .24s}
.home-page header .links.open{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s}
.home-page header .links .drawer-head{display:block!important;flex:0 0 72px;margin:0 -14px 8px;border-bottom:1px solid #e6e9ee;background:#fff}
.home-page header .drawer-close{width:100%;height:72px;padding:0 20px;display:flex;align-items:center;gap:14px;border:0;background:#fff;color:var(--navy);cursor:pointer;text-align:left;font:600 15px/1 "Canva Sans","Open Sans",Arial,sans-serif;-webkit-tap-highlight-color:transparent}
.home-page header .drawer-close span{width:22px;height:22px;display:grid;place-items:center;font:300 28px/20px Arial,sans-serif;color:#7a7f86}
.home-page header .drawer-close strong{font-weight:600}
.home-page header.mobile-menu-open .menu{opacity:0!important;pointer-events:none!important}
.home-page header .links>a,.home-page header .links>.drop>button{width:100%!important;min-height:46px!important;height:auto!important;margin:0!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;border:0!important;border-bottom:1px solid #e6e9ee!important;background:#fff!important;color:var(--navy)!important;font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;letter-spacing:.01em;white-space:normal!important;flex:none!important}
.home-page header .links>a:first-of-type{color:var(--gold)!important}
.home-page header .links>a:after,.home-page header .links>.drop>button:after{display:none!important}
.home-page header .links>.drop{width:100%!important;margin:0!important;padding:0!important;position:static!important;flex:none!important}
.home-page header .links>.drop>button{position:relative!important}
.home-page header .links>.drop>button .nav-chevron{margin-left:8px!important;margin-top:-3px!important;flex:0 0 7px!important}
.home-page header .links>.drop.open>button .nav-chevron{margin-top:3px!important}
.home-page header .drop-menu,.home-page header .drop.open>.drop-menu{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:3px 0 5px 12px!important;display:none!important;overflow:hidden!important;border:0!important;border-left:2px solid var(--gold)!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
.home-page header .drop.open>.drop-menu{display:block!important}
.home-page header .drop-menu a{width:100%!important;min-height:40px!important;height:auto!important;margin:0!important;padding:9px 10px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;border:0!important;border-radius:0!important;background:#fff!important;color:var(--navy)!important;font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif!important;white-space:normal!important;overflow-wrap:anywhere}
.home-page header .drop-menu a:hover,.home-page header .drop-menu a:focus-visible,.home-page header .drop-menu a:active{background:#f7f9fb!important;color:var(--gold)!important}
.home-page header .drop-menu a.view-all{margin-top:2px!important;background:#fff8e7!important;color:var(--navy)!important;font-weight:800!important}
.home-page header .drop-menu a.view-all span{margin-left:auto}
.home-page header .links>a.nav-icon{width:100%!important;min-height:50px!important;height:auto!important;margin:0!important;padding:0 6px!important;gap:12px!important;border:0!important;border-bottom:1px solid #e6e9ee!important;border-radius:0!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;color:var(--navy)!important}
.home-page header .links>a.nav-icon svg{width:20px!important;height:20px!important;flex:0 0 20px!important}
.home-page header .links>a.nav-icon .nav-icon-label{display:inline!important;font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important}
.home-page header .links>.nav-sep{display:none!important}
.home-page header .links>.quote{width:100%!important;min-height:48px!important;height:48px!important;margin:14px 0 0!important;padding:0 12px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:4px!important;background:var(--gold)!important;color:var(--navy)!important;font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important}
body.mobile-menu-open .home-page .quick-actions,body.mobile-menu-open .quick-actions{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}
@media (max-width:380px){.home-page header .links{width:86vw!important}.home-page header .links .drawer-head,.home-page header .drawer-close{height:66px;flex-basis:66px}.home-page header .links>a,.home-page header .links>.drop>button{min-height:44px!important;font-size:13px!important}.home-page header .drop-menu a{font-size:12.5px!important;min-height:38px!important}}
@media (prefers-reduced-motion:reduce){.home-page .mobile-nav-overlay,.home-page header .links{transition:none!important}}
  

   /* ==========================================================
   NEMREX MOBILE NAVIGATION — FINAL OVERRIDE
   Desktop navigation is intentionally untouched.
   Mobile: fixed left drawer + dark overlay + accordions.
   ========================================================== */

@media (max-width: 790px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body.mobile-menu-open{
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  /* Keep the header above page content, while the drawer/overlay
     are separate children inside the same stacking context. */
  .home-page header{
    position:sticky !important;
    top:0 !important;
    z-index:2000 !important;
  }

  /* Hamburger button: always visible when the drawer is closed. */
  .home-page header .menu{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    margin-left:auto !important;
    padding:0 !important;
    border:1px solid #dce2e9 !important;
    border-radius:5px !important;
    background:#fff !important;
    color:var(--navy) !important;
    font:400 0/1 Arial,sans-serif !important;
    position:relative !important;
    z-index:2004 !important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .home-page header .menu::before,
  .home-page header .menu::after{
    content:"";
    position:absolute;
    left:11px;
    right:11px;
    height:2px;
    background:var(--navy);
    box-shadow:0 7px 0 var(--navy), 0 14px 0 var(--navy);
  }
  .home-page header .menu::before{top:11px}
  .home-page header .menu::after{display:none}

  /* The old drawer button/icon must not compete with the new one. */
  .home-page header.mobile-menu-open .menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Dark area outside the drawer. */
  .home-page .mobile-nav-overlay{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    background:rgba(20,20,20,.78) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:2001 !important;
    transition:opacity .22s ease,visibility .22s ease !important;
  }

  .home-page .mobile-nav-overlay.show{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* The actual menu drawer.  It is fixed to the left so the page
     underneath never gets pushed sideways. */
  .home-page header .links,
  .home-page header .links.open{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(320px,82vw) !important;
    max-width:320px !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 14px 24px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    background:#fff !important;
    border:0 !important;
    box-shadow:10px 0 30px rgba(0,0,0,.20) !important;
    z-index:2003 !important;
    transform:translateX(-105%) !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear .24s !important;
  }

  .home-page header .links.open{
    transform:translateX(0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s !important;
  }

  /* Drawer header — matches the clean reference style. */
  .home-page header .links .drawer-head{
    display:block !important;
    flex:0 0 72px !important;
    height:72px !important;
    margin:0 -14px 8px !important;
    padding:0 !important;
    border-bottom:1px solid #e6e9ee !important;
    background:#fff !important;
  }

  .home-page header .drawer-close{
    width:100% !important;
    height:72px !important;
    margin:0 !important;
    padding:0 20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    border:0 !important;
    background:#fff !important;
    color:var(--navy) !important;
    cursor:pointer !important;
    text-align:left !important;
    font:600 15px/1 "Canva Sans","Open Sans",Arial,sans-serif !important;
    -webkit-tap-highlight-color:transparent;
  }

  .home-page header .drawer-close span{
    width:20px !important;
    height:24px !important;
    display:grid !important;
    place-items:center !important;
    color:#777d85 !important;
    font:300 28px/20px Arial,sans-serif !important;
  }
  .home-page header .drawer-close strong{font-weight:600 !important}

  /* Main mobile links. */
  .home-page header .links > a,
  .home-page header .links > .drop > button{
    width:100% !important;
    min-height:46px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    border:0 !important;
    border-bottom:1px solid #e7eaee !important;
    border-radius:0 !important;
    background:#fff !important;
    color:var(--navy) !important;
    font:600 14px/1.25 "Canva Sans","Open Sans",Arial,sans-serif !important;
    letter-spacing:.01em !important;
    white-space:normal !important;
    flex:none !important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .home-page header .links > a:first-of-type{
    color:var(--gold) !important;
  }

  .home-page header .links > a:after,
  .home-page header .links > .drop > button:after{
    display:none !important;
  }

  /* Each dropdown occupies its own full-width row. */
  .home-page header .links > .drop{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    position:static !important;
    flex:none !important;
  }

  .home-page header .links > .drop > button{
    position:relative !important;
  }

  /* Chevron / plus indicator. */
  .home-page header .links > .drop > button .nav-chevron{
    width:8px !important;
    height:8px !important;
    margin-left:8px !important;
    margin-top:-4px !important;
    border-right:1.7px solid currentColor !important;
    border-bottom:1.7px solid currentColor !important;
    transform:rotate(45deg) !important;
    transition:transform .18s ease !important;
    flex:0 0 8px !important;
  }
  .home-page header .links > .drop.open > button .nav-chevron{
    transform:rotate(225deg) !important;
    margin-top:4px !important;
  }

  /* Submenus: hidden until their parent is tapped. */
  .home-page header .drop-menu,
  .home-page header .drop.open > .drop-menu{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:4px 0 5px 12px !important;
    display:none !important;
    overflow:hidden !important;
    border:0 !important;
    border-left:2px solid var(--gold) !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  .home-page header .drop.open > .drop-menu{
    display:block !important;
  }

  .home-page header .drop-menu a{
    width:100% !important;
    min-height:40px !important;
    height:auto !important;
    margin:0 !important;
    padding:9px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border:0 !important;
    color:var(--navy) !important;
    background:#fff !important;
    font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif !important;
    white-space:normal !important;
  }
  .home-page header .drop-menu a.view-all{
    margin-top:4px !important;
    min-height:42px !important;
    background:#fff8e5 !important;
    font-weight:800 !important;
  }
  .home-page header .drop-menu a.view-all span{margin-left:auto !important}

  /* Icons and quote button inside the drawer. */
  .home-page header .links > .nav-sep{display:none !important}

  .home-page header .links > a.nav-icon{
    width:100% !important;
    min-height:50px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    border:0 !important;
    border-bottom:1px solid #e7eaee !important;
    border-radius:0 !important;
    background:#fff !important;
    color:var(--navy) !important;
    font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif !important;
  }
  .home-page header .links > a.nav-icon svg{
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
  }
  .home-page header .links > a.nav-icon .nav-icon-label{
    display:inline !important;
    font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif !important;
  }

  .home-page header .links > a.quote{
    width:100% !important;
    min-height:48px !important;
    height:48px !important;
    margin:14px 0 0 !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:4px !important;
    background:var(--gold) !important;
    color:var(--navy) !important;
    font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif !important;
  }

  /* Hide floating contact buttons while the drawer is open. */
  body.mobile-menu-open .quick-actions{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@media (max-width:380px){
  .home-page header .links{width:84vw !important}
  .home-page header .links .drawer-head,
  .home-page header .drawer-close{height:66px !important;flex-basis:66px !important}
  .home-page header .links > a,
  .home-page header .links > .drop > button{min-height:44px !important;font-size:13px !important}
  .home-page header .drop-menu a{font-size:12.5px !important;min-height:38px !important}
}

@media (prefers-reduced-motion:reduce){
  .home-page .mobile-nav-overlay,
  .home-page header .links,
  .home-page header .nav-chevron{transition:none !important}
}
  

   /* ==========================================================
   NEMREX MOBILE NAVIGATION V14 — CLEAN DRAWER
   Fixes: right-side page bleed, stacking, drawer scrolling,
   accordion behaviour and access to Contact / utilities.
   ========================================================== */
@media (max-width:790px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}

  /* The entire header becomes the top stacking layer. This is the
     important fix for the unwanted content visible on the right. */
  .home-page header{
    position:relative!important;
    z-index:2147483000!important;
  }

  .home-page header .menu{
    position:relative!important;
    z-index:2147483003!important;
  }

  /* Dark, clean backdrop: no page content can show through visually. */
  .home-page .mobile-nav-overlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    background:rgba(24,24,24,.86)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:2147483001!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }
  .home-page .mobile-nav-overlay.show{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Drawer: wide enough to feel like a real mobile navigation,
     but still leaves the dark backdrop visible on the right. */
  .home-page header .links,
  .home-page header .links.open{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:0!important;
    width:min(318px,88vw)!important;
    max-width:318px!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0 14px 22px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:#fff!important;
    box-shadow:10px 0 28px rgba(0,0,0,.18)!important;
    border:0!important;
    border-radius:0!important;
    z-index:2147483002!important;
    transform:translateX(-105%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .22s ease,visibility 0s linear .22s!important;
  }
  .home-page header .links.open{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .22s ease,visibility 0s linear 0s!important;
  }

  /* Drawer heading */
  .home-page header .links .drawer-head{
    display:block!important;
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    flex:0 0 66px!important;
    height:66px!important;
    margin:0 -14px 8px!important;
    background:#fff!important;
    border-bottom:1px solid #e7e9ed!important;
  }
  .home-page header .drawer-close{
    width:100%!important;
    height:66px!important;
    padding:0 20px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    border:0!important;
    background:#fff!important;
    color:var(--navy)!important;
    text-align:left!important;
    font:700 15px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
  }
  .home-page header .drawer-close span{
    width:20px!important;height:20px!important;
    display:grid!important;place-items:center!important;
    color:#7a7f86!important;
    font:300 27px/20px Arial,sans-serif!important;
  }

  /* Main navigation rows */
  .home-page header .links>a,
  .home-page header .links>.drop>button{
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:left!important;
    border:0!important;
    border-bottom:1px solid #e7e9ed!important;
    background:#fff!important;
    color:var(--navy)!important;
    font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
    letter-spacing:.01em!important;
    white-space:normal!important;
    flex:none!important;
  }
  .home-page header .links>a:first-of-type{color:var(--gold)!important}
  .home-page header .links>a:after,
  .home-page header .links>.drop>button:after{display:none!important}

  .home-page header .links>.drop{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    flex:none!important;
  }
  .home-page header .links>.drop>button{position:relative!important}
  .home-page header .links>.drop>button .nav-chevron{
    margin-left:8px!important;
    flex:0 0 7px!important;
  }

  /* Accordion panels */
  .home-page header .drop-menu,
  .home-page header .drop.open>.drop-menu{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:2px 0 5px 12px!important;
    display:none!important;
    overflow:visible!important;
    border:0!important;
    border-left:2px solid var(--gold)!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .home-page header .links>.drop.open>.drop-menu{display:block!important}

  .home-page header .drop-menu a{
    width:100%!important;
    min-height:38px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border:0!important;
    background:#fff!important;
    color:var(--navy)!important;
    font:600 13px/1.25 "Canva Sans","Open Sans",Arial,sans-serif!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .home-page header .drop-menu a.view-all{
    min-height:42px!important;
    margin-top:2px!important;
    background:#fff8e7!important;
    color:var(--navy)!important;
    font-weight:800!important;
  }
  .home-page header .drop-menu a.view-all span{margin-left:auto!important}

  /* Utility links */
  .home-page header .links>.nav-sep{display:none!important}
  .home-page header .links>a.nav-icon{
    width:100%!important;
    min-height:50px!important;
    height:50px!important;
    margin:0!important;
    padding:0 10px!important;
    gap:12px!important;
    border:0!important;
    border-bottom:1px solid #e7e9ed!important;
    background:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    color:var(--navy)!important;
  }
  .home-page header .links>a.nav-icon svg{width:19px!important;height:19px!important;flex:0 0 19px!important}
  .home-page header .links>a.nav-icon .nav-icon-label{display:inline!important;font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important}

  .home-page header .links>.quote{
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    margin:14px 0 0!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:4px!important;
    background:var(--gold)!important;
    color:var(--navy)!important;
    font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
  }

  /* Floating buttons must never sit over the drawer. */
  body.mobile-menu-open .quick-actions,
  body.mobile-menu-open .quick-action{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}

@media (max-width:380px){
  .home-page header .links{width:88vw!important}
  .home-page header .links>a,
  .home-page header .links>.drop>button{min-height:43px!important;font-size:13px!important}
  .home-page header .drop-menu a{min-height:37px!important;font-size:12.5px!important}
}
  

   @media (max-width:790px){
  /* When the mobile drawer is open, hide every page layer outside the header.
     The drawer + overlay remain visible because they live inside the header. */
  body.mobile-menu-open > *:not(header){
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.mobile-menu-open{
    overflow:hidden!important;
    touch-action:none!important;
  }
  body.mobile-menu-open header{
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .mobile-nav-overlay{
    visibility:visible!important;
  }

  /* Keep the drawer as the only bright surface; nothing from the page
     can bleed through at its right edge. */
  body.mobile-menu-open header .links{
    background:#fff!important;
  }
  body.mobile-menu-open header .mobile-nav-overlay{
    background:rgba(24,24,24,.88)!important;
  }

  /* The drawer must be independently scrollable so Contact Us,
     E-Catalogue, Weight Calculator and Quote remain reachable even
     when Products is expanded. */
  body.mobile-menu-open header .links{
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}
  

   /* =========================================================
   NEMREX FINAL HOME PAGE FIX
   Mobile navigation + quote CTA
   ========================================================= */
#quote{scroll-margin-top:90px;}

@media (max-width:790px){
  html{scroll-behavior:smooth;}

  /* The drawer is the only white surface. The page behind it is blocked. */
  body.mobile-menu-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
    touch-action:none!important;
  }

  body.mobile-menu-open > *:not(header){
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.mobile-menu-open header{
    visibility:visible!important;
    pointer-events:auto!important;
    position:relative!important;
    z-index:1400!important;
  }

  body.mobile-menu-open header .mobile-nav-overlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:1401!important;
    background:rgba(22,22,22,.88)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    position:fixed!important;
    z-index:1402!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:0!important;
    width:min(316px,88vw)!important;
    max-width:316px!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0 14px 28px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:#fff!important;
    box-shadow:10px 0 32px rgba(0,0,0,.20)!important;
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Keep the drawer header fixed-looking at the top while its contents scroll. */
  body.mobile-menu-open header .drawer-head{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    flex:0 0 64px!important;
    background:#fff!important;
  }

  body.mobile-menu-open header .drawer-close{
    width:100%!important;
    height:64px!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    border:0!important;
    border-bottom:1px solid #e7e9ed!important;
    background:#fff!important;
    color:var(--navy)!important;
    text-align:left!important;
    font:700 15px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
    cursor:pointer!important;
  }

  body.mobile-menu-open header .drawer-close span{
    width:22px!important;
    height:22px!important;
    display:grid!important;
    place-items:center!important;
    color:#7b8189!important;
    font:300 27px/20px Arial,sans-serif!important;
  }

  body.mobile-menu-open header .links>a,
  body.mobile-menu-open header .links>.drop>button{
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:left!important;
    border:0!important;
    border-bottom:1px solid #e7e9ed!important;
    background:#fff!important;
    color:var(--navy)!important;
    font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
    letter-spacing:.01em!important;
    white-space:normal!important;
    flex:none!important;
  }

  body.mobile-menu-open header .links>a:first-of-type{color:var(--gold)!important;}
  body.mobile-menu-open header .links>a:after,
  body.mobile-menu-open header .links>.drop>button:after{display:none!important;}

  body.mobile-menu-open header .links>.drop{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    flex:none!important;
  }

  body.mobile-menu-open header .links>.drop>button{position:relative!important;}

  body.mobile-menu-open header .nav-chevron{
    margin-left:8px!important;
    flex:0 0 7px!important;
  }

  body.mobile-menu-open header .drop-menu,
  body.mobile-menu-open header .drop.open>.drop-menu{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:3px 0 5px 13px!important;
    display:none!important;
    overflow:hidden!important;
    border:0!important;
    border-left:2px solid var(--gold)!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  body.mobile-menu-open header .drop.open>.drop-menu{display:block!important;}

  body.mobile-menu-open header .drop-menu a{
    width:100%!important;
    min-height:40px!important;
    height:auto!important;
    margin:0!important;
    padding:9px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    color:var(--navy)!important;
    font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  body.mobile-menu-open header .drop-menu a.view-all{
    margin-top:2px!important;
    background:#fff8e7!important;
    color:var(--navy)!important;
    font-weight:800!important;
  }

  body.mobile-menu-open header .drop-menu a.view-all span{margin-left:auto!important;}

  body.mobile-menu-open header .links>a.nav-icon{
    width:100%!important;
    min-height:50px!important;
    height:auto!important;
    margin:0!important;
    padding:0 10px!important;
    gap:12px!important;
    border:0!important;
    border-bottom:1px solid #e7e9ed!important;
    border-radius:0!important;
    background:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    color:var(--navy)!important;
  }

  body.mobile-menu-open header .links>a.nav-icon svg{
    width:20px!important;
    height:20px!important;
    flex:0 0 20px!important;
  }

  body.mobile-menu-open header .links>a.nav-icon .nav-icon-label{
    display:inline!important;
    font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
  }

  body.mobile-menu-open header .links>.nav-sep{display:none!important;}

  body.mobile-menu-open header .links>a.quote{
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    margin:14px 0 0!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:4px!important;
    background:var(--gold)!important;
    color:var(--navy)!important;
    font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
    flex:none!important;
  }

  /* Quote form remains a normal, reachable section after navigation closes. */
  #quote{
    scroll-margin-top:78px!important;
  }
}

@media (max-width:380px){
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{width:88vw!important;}
  body.mobile-menu-open header .links>a,
  body.mobile-menu-open header .links>.drop>button{font-size:13px!important;}
  body.mobile-menu-open header .drop-menu a{font-size:12.5px!important;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
}
  

   @media (max-width:790px){
  /* Lock the PAGE, not the drawer. */
  body.mobile-menu-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  /* The drawer must accept vertical touch scrolling. */
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:thin !important;
    scrollbar-color:#c5c9cf #f7f7f7 !important;
  }

  body.mobile-menu-open header .links::-webkit-scrollbar{
    width:6px !important;
  }
  body.mobile-menu-open header .links::-webkit-scrollbar-track{
    background:#f7f7f7 !important;
  }
  body.mobile-menu-open header .links::-webkit-scrollbar-thumb{
    background:#c5c9cf !important;
    border-radius:10px !important;
  }

  /* Keep the drawer above the overlay and make the overlay completely opaque
     to the page content. */
  body.mobile-menu-open header{
    position:relative !important;
    z-index:1400 !important;
  }
  body.mobile-menu-open header .mobile-nav-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:1401 !important;
    background:rgba(35,35,35,.90) !important;
    pointer-events:auto !important;
  }
  body.mobile-menu-open header .links{
    z-index:1402 !important;
    background:#fff !important;
  }

  /* The submenu itself must not create a second scroll container. */
  body.mobile-menu-open header .drop-menu{
    overflow:visible !important;
    touch-action:auto !important;
  }

  /* Keep every top-level item after an open submenu in normal document flow. */
  body.mobile-menu-open header .links > .drop,
  body.mobile-menu-open header .links > a{
    flex-shrink:0 !important;
  }

  /* Clear separation after Products and Technical submenus. */
  body.mobile-menu-open header .drop.open + a{
    border-top:0 !important;
  }

  /* Make Contact Us and the utility links impossible to accidentally collapse. */
  body.mobile-menu-open header .links > a.nav-icon,
  body.mobile-menu-open header .links > a.quote{
    position:relative !important;
    z-index:2 !important;
    flex-shrink:0 !important;
  }
}

/* On very small phones, keep the menu usable without making text tiny. */
@media (max-width:380px){
  body.mobile-menu-open header .links{
    width:88vw !important;
    max-width:316px !important;
  }
}
  

   /* =========================================================
   NEMREX — PRODUCT / MATERIAL / INDUSTRY CARD REFINEMENT
   Gives the circular image proper breathing room inside the
   white card on mobile. Applies consistently to all 3
   horizontal carousel sections.
   ========================================================= */

@media (max-width: 790px) {
  /* Keep the carousel area comfortable on narrow screens. */
  .carousel-section .marquee {
    padding: 10px 6px 22px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .carousel-section .marquee-track {
    gap: 16px !important;
    align-items: flex-start !important;
  }

  /* The complete card becomes a real card instead of the
     circle sitting directly on the section background. */
  .carousel-section .orbit-card {
    flex: 0 0 205px !important;
    width: 205px !important;
    min-height: 232px !important;
    box-sizing: border-box !important;
    padding: 16px 14px 18px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 26px rgba(13,31,61,.10) !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  /* The circle no longer touches the card's top edge. */
  .carousel-section .orbit-card .orbit-image {
    flex: 0 0 168px !important;
    width: 168px !important;
    height: 168px !important;
    min-width: 168px !important;
    min-height: 168px !important;
    max-width: 168px !important;
    max-height: 168px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 2px solid var(--gold) !important;
    border-radius: 50% !important;
    background: #fff !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
  }

  .carousel-section .orbit-card .orbit-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 50% !important;
  }

  /* Industry photos should fill their circles. */
  #industries .orbit-card .orbit-image {
    padding: 0 !important;
  }

  #industries .orbit-card .orbit-image img {
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
  }

  /* Material initials remain centered inside the circle. */
  #materials .orbit-card .orbit-image {
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .carousel-section .orbit-card strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: var(--gold) !important;
    overflow-wrap: anywhere !important;
  }

  .carousel-section .orbit-card small {
    display: block !important;
    width: 100% !important;
    margin: -2px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #687386 !important;
  }

  /* Do not let the old hover/focus rules change the card layout. */
  .carousel-section .orbit-card:hover,
  .carousel-section .orbit-card:focus,
  .carousel-section .orbit-card:focus-visible,
  .carousel-section .orbit-card:active {
    transform: none !important;
    outline: none !important;
  }

  .carousel-section .orbit-card:hover .orbit-image,
  .carousel-section .orbit-card:focus-visible .orbit-image,
  .carousel-section .orbit-card:active .orbit-image {
    transform: none !important;
  }

  /* Slightly more breathing room between heading and cards. */
  .carousel-section .head {
    margin-bottom: 16px !important;
  }
}

/* Small phones: keep the card comfortably inside the viewport. */
@media (max-width: 380px) {
  .carousel-section .orbit-card {
    flex-basis: 194px !important;
    width: 194px !important;
    min-height: 222px !important;
    padding: 15px 12px 17px !important;
  }

  .carousel-section .orbit-card .orbit-image {
    flex-basis: 158px !important;
    width: 158px !important;
    height: 158px !important;
    min-width: 158px !important;
    min-height: 158px !important;
    max-width: 158px !important;
    max-height: 158px !important;
  }

  .carousel-section .orbit-card strong {
    font-size: 16px !important;
  }
}
  

   /* ==========================================================
   NEMREX — FINAL MOBILE NAV + CAROUSEL FIXES
   1) Removes the visible drawer scrollbar/thumb.
   2) Keeps the gold submenu guide line identical for Products,
      Material/Industries/Technical dropdowns.
   3) Gives mobile Product / Material / Industry cards equal,
      deliberate spacing on all four outer sides.
   ========================================================== */

@media (max-width:790px){

  /* ---------- MOBILE DRAWER ---------- */

  /* The orange/gold pill seen on the right of the Products drawer
     is the scroll thumb. The drawer remains swipe-scrollable, but
     the scrollbar itself is intentionally invisible. */
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  body.mobile-menu-open header .links::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
    background:transparent !important;
  }

  /* Every opened navigation dropdown gets the same gold guide line.
     This prevents Products from looking different from Technical. */
  .home-page header .links > .drop.open > .drop-menu{
    border-left:2px solid var(--gold) !important;
  }

  /* ---------- MOBILE CAROUSEL CARDS ---------- */

  .carousel-section .marquee{
    padding:10px 6px 22px !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .carousel-section .marquee-track{
    align-items:flex-start !important;
  }

  .carousel-section .orbit-card{
    flex:0 0 205px !important;
    width:205px !important;
    height:256px !important;
    min-height:256px !important;
    max-height:256px !important;

    /* Equal outer spacing: 16px top/right/bottom/left. */
    padding:16px !important;
    margin:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0 !important;

    box-sizing:border-box !important;
    background:#fff !important;
    border:0 !important;
    border-radius:15px !important;
    box-shadow:0 10px 26px rgba(13,31,61,.10) !important;
    overflow:hidden !important;
  }

  .carousel-section .orbit-card .orbit-image{
    flex:0 0 168px !important;
    width:168px !important;
    height:168px !important;
    min-width:168px !important;
    min-height:168px !important;
    max-width:168px !important;
    max-height:168px !important;

    margin:0 auto 14px !important;
    padding:5px !important;
    box-sizing:border-box !important;

    border:2px solid var(--gold) !important;
    border-radius:50% !important;
    background:#fff !important;
    overflow:hidden !important;
    display:grid !important;
    place-items:center !important;
  }

  .carousel-section .orbit-card .orbit-image img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    border-radius:50% !important;
  }

  #industries .orbit-card .orbit-image{
    padding:0 !important;
  }

  #industries .orbit-card .orbit-image img{
    object-fit:cover !important;
    object-position:center !important;
    border-radius:50% !important;
  }

  #materials .orbit-card .orbit-image{
    font-size:31px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }

  /* Fixed label area keeps the lower spacing visually consistent,
     especially for two-line names such as Structural Sections &
     Profiles. */
  .carousel-section .orbit-card strong{
    flex:0 0 42px !important;
    width:100% !important;
    max-width:100% !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;

    font-size:17px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    text-align:center !important;
    color:var(--gold) !important;
    overflow-wrap:anywhere !important;
  }

  .carousel-section .orbit-card small{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    font-size:12px !important;
    line-height:1.3 !important;
    text-align:center !important;
    color:#687386 !important;
  }

  /* Touching a card must not distort the card dimensions. */
  .carousel-section .orbit-card:hover,
  .carousel-section .orbit-card:focus,
  .carousel-section .orbit-card:focus-visible,
  .carousel-section .orbit-card:active,
  .carousel-section .orbit-card.is-touch-active,
  .carousel-section .orbit-card.touch-pressed{
    transform:none !important;
    outline:none !important;
  }

  .carousel-section .orbit-card:hover .orbit-image,
  .carousel-section .orbit-card:focus-visible .orbit-image,
  .carousel-section .orbit-card:active .orbit-image,
  .carousel-section .orbit-card.is-touch-active .orbit-image,
  .carousel-section .orbit-card.touch-pressed .orbit-image{
    transform:none !important;
  }
}

/* Keep a deliberate gap between the circle and its text on non-mobile layouts too. */
@media (min-width:791px){
  .carousel-section .orbit-card{
    gap:12px !important;
  }
}

/* Small phones: scale the same balanced proportions down together. */
@media (max-width:380px){
  .carousel-section .orbit-card{
    flex-basis:194px !important;
    width:194px !important;
    height:240px !important;
    min-height:240px !important;
    max-height:240px !important;
    padding:15px !important;
  }

  .carousel-section .orbit-card .orbit-image{
    flex-basis:158px !important;
    width:158px !important;
    height:158px !important;
    min-width:158px !important;
    min-height:158px !important;
    max-width:158px !important;
    max-height:158px !important;
    margin-bottom:12px !important;
  }

  .carousel-section .orbit-card strong{
    flex-basis:40px !important;
    min-height:40px !important;
    font-size:16px !important;
  }
}
  

   /* ==========================================================
   NEMREX — MOBILE NAVIGATION V21 FINAL
   - No visible scrollbar/thumb on the drawer.
   - Drawer itself is vertically swipe-scrollable.
   - Products and Technical use identical accordion structure.
   - Contact, E-Catalogue, Weight Calculator and Quote remain
     normal items in the same drawer flow.
   - Desktop/tablet navigation outside 790px is not changed.
   ========================================================== */
@media (max-width:790px){
  html, body, .home-page{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Do NOT disable touch gestures on the whole body. The old
     touch-action:none rule prevented the drawer from being swiped. */
  body.mobile-menu-open{
    overflow:hidden!important;
    touch-action:auto!important;
    overscroll-behavior:none!important;
  }

  /* Keep the page behind the drawer inert, but never hide the drawer. */
  body.mobile-menu-open > *:not(header){
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.mobile-menu-open > header{
    visibility:visible!important;
    pointer-events:auto!important;
    position:relative!important;
    z-index:2147483000!important;
  }

  /* Dark backdrop */
  .home-page .mobile-nav-overlay,
  body.mobile-menu-open header .mobile-nav-overlay{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    background:rgba(24,24,24,.88)!important;
    z-index:2147483001!important;
  }
  .home-page .mobile-nav-overlay.show{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* One real drawer. It owns the scroll. */
  .home-page header .links,
  .home-page header .links.open,
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:0!important;
    width:min(318px, calc(100vw - 24px))!important;
    max-width:318px!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0 14px 24px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    background:#fff!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:10px 0 32px rgba(0,0,0,.20)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    z-index:2147483002!important;
  }
  .home-page header .links::-webkit-scrollbar,
  body.mobile-menu-open header .links::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
    background:transparent!important;
  }

  /* Closed/open state */
  .home-page header .links{
    transform:translateX(-105%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .home-page header .links.open{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Drawer header */
  .home-page header .links .drawer-head{
    position:sticky!important;
    top:0!important;
    z-index:10!important;
    flex:0 0 66px!important;
    height:66px!important;
    margin:0 -14px 8px!important;
    background:#fff!important;
    border-bottom:1px solid #e7e9ed!important;
  }
  .home-page header .drawer-close{
    width:100%!important;
    height:66px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    border:0!important;
    background:#fff!important;
    color:var(--navy)!important;
    font:600 15px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
    text-align:left!important;
  }
  .home-page header .drawer-close span{
    width:20px!important;
    height:20px!important;
    display:grid!important;
    place-items:center!important;
    color:#7a7f86!important;
    font:300 28px/20px Arial,sans-serif!important;
  }

  /* Every top-level item has exactly the same row treatment. */
  .home-page header .links > a,
  .home-page header .links > .drop > button{
    width:100%!important;
    min-height:46px!important;
    height:auto!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex:none!important;
    border:0!important;
    border-bottom:1px solid #e7eaee!important;
    border-radius:0!important;
    background:#fff!important;
    color:var(--navy)!important;
    font:600 14px/1.25 "Canva Sans","Open Sans",Arial,sans-serif!important;
    text-align:left!important;
    white-space:normal!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .home-page header .links > a:first-of-type{
    color:var(--gold)!important;
  }
  .home-page header .links > a:after,
  .home-page header .links > .drop > button:after{
    display:none!important;
  }

  /* Dropdown wrapper must remain in normal document flow. */
  .home-page header .links > .drop{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    flex:none!important;
  }
  .home-page header .links > .drop > button{
    position:relative!important;
  }

  /* Chevron */
  .home-page header .links > .drop > button .nav-chevron{
    width:8px!important;
    height:8px!important;
    margin-left:8px!important;
    margin-top:-4px!important;
    border-right:1.7px solid currentColor!important;
    border-bottom:1.7px solid currentColor!important;
    transform:rotate(45deg)!important;
    transition:transform .18s ease!important;
    flex:0 0 8px!important;
  }
  .home-page header .links > .drop.open > button .nav-chevron{
    transform:rotate(225deg)!important;
    margin-top:4px!important;
  }

  /* Both Products and Technical use the exact same submenu rules. */
  .home-page header .drop-menu,
  .home-page header .drop.open > .drop-menu{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:4px 0 5px 12px!important;
    display:none!important;
    overflow:visible!important;
    border:0!important;
    border-left:2px solid var(--gold)!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    touch-action:auto!important;
  }
  .home-page header .drop.open > .drop-menu{
    display:block!important;
  }
  .home-page header .drop-menu a{
    width:100%!important;
    min-height:40px!important;
    height:auto!important;
    margin:0!important;
    padding:9px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border:0!important;
    background:#fff!important;
    color:var(--navy)!important;
    font:600 13px/1.3 "Canva Sans","Open Sans",Arial,sans-serif!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    cursor:pointer!important;
  }
  .home-page header .drop-menu a.view-all{
    min-height:42px!important;
    margin-top:2px!important;
    background:#fff8e7!important;
    color:var(--navy)!important;
    font-weight:800!important;
  }
  .home-page header .drop-menu a.view-all span{
    margin-left:auto!important;
  }

  /* Contact + utility links are ordinary rows after Technical. */
  .home-page header .links > a.nav-icon{
    width:100%!important;
    min-height:50px!important;
    height:50px!important;
    padding:0 10px!important;
    gap:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex:none!important;
    border:0!important;
    border-bottom:1px solid #e7eaee!important;
    background:#fff!important;
    color:var(--navy)!important;
  }
  .home-page header .links > a.nav-icon svg{
    width:20px!important;height:20px!important;flex:0 0 20px!important;
  }
  .home-page header .links > a.nav-icon .nav-icon-label{
    display:inline!important;
    font:700 14px/1.2 "Canva Sans","Open Sans",Arial,sans-serif!important;
  }
  .home-page header .links > .nav-sep{display:none!important}

  .home-page header .links > a.quote{
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    margin:14px 0 0!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:none!important;
    border:0!important;
    border-radius:4px!important;
    background:var(--gold)!important;
    color:var(--navy)!important;
    font:800 14px/1 "Canva Sans","Open Sans",Arial,sans-serif!important;
  }

  /* Never allow floating contact buttons to overlap the drawer. */
  body.mobile-menu-open .quick-actions{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

@media (max-width:380px){
  .home-page header .links,
  .home-page header .links.open,
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    width:min(316px, calc(100vw - 18px))!important;
    max-width:316px!important;
  }
  .home-page header .links > a,
  .home-page header .links > .drop > button{
    min-height:44px!important;
    font-size:13px!important;
  }
  .home-page header .drop-menu a{
    min-height:38px!important;
    font-size:12.5px!important;
  }
}
  

   /* ================================================================
   NEMREX V23 — RESPONSIVE PRODUCT / MATERIAL / INDUSTRY CARDS
   Purpose:
   - Give every circular icon the same breathing room above it.
   - Keep the icon/text relationship balanced.
   - Keep card height/content responsive instead of clipping it.
   - Use one consistent card geometry for Products, Materials,
     and Industries on phones, tablets and desktop.
   ================================================================ */

.card-balance-section .marquee-track{
  align-items:flex-start !important;
}

/* Desktop / web ------------------------------------------------ */
@media (min-width:791px){
  .card-balance-section .orbit-card{
    box-sizing:border-box !important;
    padding:14px 8px 16px !important;
    margin:0 !important;
    gap:12px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    min-height:calc(clamp(84px,9vw,112px) + 82px) !important;
  }

  .card-balance-section .orbit-image{
    margin:0 auto !important;
  }

  .card-balance-section .orbit-card strong{
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    line-height:1.3 !important;
  }

  .card-balance-section .orbit-card small{
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    line-height:1.3 !important;
  }
}

/* Tablet ------------------------------------------------------- */
@media (min-width:791px) and (max-width:1100px){
  .card-balance-section .orbit-card{
    padding:16px 8px 18px !important;
    gap:11px !important;
  }
}

/* Mobile ------------------------------------------------------- */
@media (max-width:790px){
  .card-balance-section .marquee{
    padding:14px 6px 24px !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .card-balance-section .marquee-track{
    gap:16px !important;
    align-items:flex-start !important;
  }

  /*
     Do not use a fixed/max height here. Materials contain both a
     title and a grade line, while Products/Industries can have
     one- or two-line titles. Auto height prevents clipping and
     keeps the same visual top/bottom breathing room.
  */
  .card-balance-section .orbit-card{
    flex:0 0 205px !important;
    width:205px !important;
    height:auto !important;
    min-height:280px !important;
    max-height:none !important;
    box-sizing:border-box !important;

    padding:20px 16px 20px !important;
    margin:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:0 !important;

    background:#fff !important;
    border:0 !important;
    border-radius:15px !important;
    box-shadow:0 10px 26px rgba(13,31,61,.10) !important;
    overflow:visible !important;
  }

  /* Identical top breathing room for all three sections. */
  .card-balance-section .orbit-card .orbit-image{
    flex:0 0 168px !important;
    width:168px !important;
    height:168px !important;
    min-width:168px !important;
    min-height:168px !important;
    max-width:168px !important;
    max-height:168px !important;
    box-sizing:border-box !important;

    margin:0 auto 14px !important;
    padding:5px !important;

    border:2px solid var(--gold) !important;
    border-radius:50% !important;
    background:#fff !important;
    overflow:hidden !important;
    display:grid !important;
    place-items:center !important;
  }

  .card-balance-section .orbit-card .orbit-image img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:50% !important;
  }

  /* Industry photos keep their circular photo treatment. */
  #industries.card-balance-section .orbit-card .orbit-image{
    padding:0 !important;
  }

  #industries.card-balance-section .orbit-card .orbit-image img{
    object-fit:cover !important;
    object-position:center !important;
  }

  /* Material initials remain optically centered. */
  #materials.card-balance-section .orbit-card .orbit-image{
    font-size:31px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }

  /* Text begins at one controlled distance below every circle. */
  .card-balance-section .orbit-card strong{
    flex:0 0 42px !important;
    width:100% !important;
    max-width:100% !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;

    font-size:17px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    text-align:center !important;
    color:var(--gold) !important;
    overflow-wrap:anywhere !important;
  }

  .card-balance-section .orbit-card small{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    min-height:16px !important;
    font-size:12px !important;
    line-height:1.3 !important;
    text-align:center !important;
    color:#687386 !important;
  }

  /* Never let touch/focus feedback change the card geometry. */
  .card-balance-section .orbit-card:hover,
  .card-balance-section .orbit-card:focus,
  .card-balance-section .orbit-card:focus-visible,
  .card-balance-section .orbit-card:active,
  .card-balance-section .orbit-card.is-touch-active,
  .card-balance-section .orbit-card.touch-pressed{
    transform:none !important;
    outline:none !important;
  }

  .card-balance-section .orbit-card:hover .orbit-image,
  .card-balance-section .orbit-card:focus-visible .orbit-image,
  .card-balance-section .orbit-card:active .orbit-image,
  .card-balance-section .orbit-card.is-touch-active .orbit-image,
  .card-balance-section .orbit-card.touch-pressed .orbit-image{
    transform:none !important;
  }
}

/* Small phones ------------------------------------------------- */
@media (max-width:380px){
  .card-balance-section .marquee{
    padding:12px 5px 22px !important;
  }

  .card-balance-section .orbit-card{
    flex-basis:194px !important;
    width:194px !important;
    min-height:262px !important;
    padding:18px 15px 18px !important;
  }

  .card-balance-section .orbit-card .orbit-image{
    flex-basis:158px !important;
    width:158px !important;
    height:158px !important;
    min-width:158px !important;
    min-height:158px !important;
    max-width:158px !important;
    max-height:158px !important;
    margin-bottom:12px !important;
  }

  .card-balance-section .orbit-card strong{
    flex-basis:40px !important;
    min-height:40px !important;
    font-size:16px !important;
  }

  .card-balance-section .orbit-card small{
    font-size:12px !important;
  }
}

/* Extra-small phones: scale the complete card, not just the icon. */
@media (max-width:340px){
  .card-balance-section .orbit-card{
    flex-basis:186px !important;
    width:186px !important;
    min-height:252px !important;
    padding:17px 13px !important;
  }

  .card-balance-section .orbit-card .orbit-image{
    flex-basis:148px !important;
    width:148px !important;
    height:148px !important;
    min-width:148px !important;
    min-height:148px !important;
    max-width:148px !important;
    max-height:148px !important;
  }
}
  

   /* ================================================================
   NEMREX V24 — COMPACT + BALANCED CARD SPACING
   Product / Material / Industry cards
   - less internal vertical padding
   - enough top breathing room for the circle
   - controlled icon-to-text gap
   - compact, responsive card height
   ================================================================ */

.card-balance-section .orbit-card {
  box-sizing: border-box !important;
}

/* Web / desktop */
@media (min-width: 791px) {
  .card-balance-section .orbit-card {
    padding: 10px 8px 12px !important;
    gap: 9px !important;
    min-height: 0 !important;
  }

  .card-balance-section .orbit-card .orbit-image {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
  }

  .card-balance-section .orbit-card strong {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }

  .card-balance-section .orbit-card small {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
}

/* Tablet */
@media (min-width: 791px) and (max-width: 1100px) {
  .card-balance-section .orbit-card {
    padding: 11px 8px 13px !important;
    gap: 9px !important;
  }
}

/* Mobile */
@media (max-width: 790px) {
  .card-balance-section .marquee {
    padding: 10px 6px 20px !important;
  }

  .card-balance-section .orbit-card {
    width: 205px !important;
    flex-basis: 205px !important;
    min-height: 250px !important;
    height: auto !important;
    padding: 12px 14px 14px !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* The circle gets a small, deliberate top buffer — not a large empty area. */
  .card-balance-section .orbit-card .orbit-image {
    margin: 0 auto 11px !important;
  }

  /* Keep the title immediately below the circle without touching it. */
  .card-balance-section .orbit-card strong {
    flex: 0 0 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }

  .card-balance-section .orbit-card small {
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .card-balance-section .orbit-card {
    width: 194px !important;
    flex-basis: 194px !important;
    min-height: 236px !important;
    padding: 11px 13px 13px !important;
  }

  .card-balance-section .orbit-card .orbit-image {
    margin-bottom: 10px !important;
  }
}

/* Extra-small phones */
@media (max-width: 340px) {
  .card-balance-section .orbit-card {
    width: 186px !important;
    flex-basis: 186px !important;
    min-height: 226px !important;
    padding: 10px 12px 12px !important;
  }

  .card-balance-section .orbit-card .orbit-image {
    margin-bottom: 9px !important;
  }
}
  

   /* ==========================================================
   NEMREX — FINAL MOBILE NAVIGATION FIX
   Mobile-only override. Desktop navigation is untouched.
   ========================================================== */
@media (max-width:790px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Do not block touch scrolling on the page itself. The drawer
     receives vertical gestures through its own scroll container. */
  body.mobile-menu-open{
    overflow:hidden!important;
    touch-action:auto!important;
    overscroll-behavior:none!important;
  }

  .home-page header .links,
  .home-page header .links.open{
    min-height:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    overflow-anchor:none!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }

  /* Remove the old visible scrollbar. This is the orange/gold strip
     that was being mistaken for part of the Products menu. */
  .home-page header .links::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
  .home-page header .links::-webkit-scrollbar-track,
  .home-page header .links::-webkit-scrollbar-thumb{
    background:transparent!important;
    width:0!important;
  }

  /* Every top-level item keeps its own height when a submenu expands. */
  .home-page header .links > .drop,
  .home-page header .links > a{
    flex:0 0 auto!important;
    flex-shrink:0!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .home-page header .links > .drop > button{
    flex:0 0 46px!important;
    min-height:46px!important;
    height:46px!important;
    box-sizing:border-box!important;
  }

  /* The expanded submenu participates in normal document flow.
     Nothing below Products is positioned underneath it. */
  .home-page header .links > .drop.open > .drop-menu{
    position:static!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    flex:none!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
  }

  .home-page header .links > .drop:not(.open) > .drop-menu{
    display:none!important;
  }

  .home-page header .drop-menu a{
    flex:0 0 auto!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Do not let a long Products list cover the following menu items. */
  .home-page header .links > .drop.open + a,
  .home-page header .links > .drop.open ~ .drop,
  .home-page header .links > .drop.open ~ a{
    position:relative!important;
    z-index:2!important;
    visibility:visible!important;
  }

  /* Keep the drawer itself above the overlay. */
  .home-page header .links.open{
    z-index:2003!important;
    background:#fff!important;
  }
  .home-page .mobile-nav-overlay{
    z-index:2001!important;
  }

  /* Prevent the gold submenu border from becoming a full-height/floating
     element on narrow screens. It belongs only to the submenu. */
  .home-page header .drop.open > .drop-menu{
    border-left:2px solid var(--gold)!important;
    border-top:0!important;
    border-right:0!important;
    border-bottom:0!important;
  }

  /* The quote CTA remains in normal flow after all menu content. */
  .home-page header .links > a.quote{
    position:relative!important;
    flex:0 0 48px!important;
    min-height:48px!important;
    height:48px!important;
    margin-top:14px!important;
    margin-bottom:0!important;
  }
}
  

   /* Final mobile-only navigation cleanup. Desktop rules are intentionally untouched. */
@media (max-width:790px){
  html,body{max-width:100%;overflow-x:hidden!important;}
  body.mobile-menu-open{overflow:hidden!important;overscroll-behavior:none!important;}

  /* The drawer is the only scrolling surface while open. Hide every native scrollbar. */
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    box-sizing:border-box!important;
  }
  body.mobile-menu-open header .links::-webkit-scrollbar,
  body.mobile-menu-open header .links::-webkit-scrollbar-track,
  body.mobile-menu-open header .links::-webkit-scrollbar-thumb{
    width:0!important;height:0!important;display:none!important;background:transparent!important;
  }

  /* Never use a gold vertical border as a mobile drawer edge. */
  body.mobile-menu-open header .drop > .drop-menu,
  body.mobile-menu-open header .drop.open > .drop-menu{
    border:0!important;
    border-left:0!important;
  }

  /* Every menu row remains in normal flow. */
  body.mobile-menu-open header .links > .drop,
  body.mobile-menu-open header .links > a,
  body.mobile-menu-open header .links > .nav-sep{
    flex:0 0 auto!important;
    flex-shrink:0!important;
    position:relative!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body.mobile-menu-open header .links > .drop > button{
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    flex:none!important;
    box-sizing:border-box!important;
  }

  /* Closed submenu = zero layout space. Open submenu = normal document flow. */
  body.mobile-menu-open header .links > .drop:not(.open) > .drop-menu{
    display:none!important;
  }
  body.mobile-menu-open header .links > .drop.open > .drop-menu{
    display:block!important;
    position:static!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:4px 0 6px 12px!important;
    overflow:visible!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
    box-sizing:border-box!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  body.mobile-menu-open header .drop-menu a{
    display:flex!important;
    width:100%!important;
    min-height:38px!important;
    height:auto!important;
    flex:0 0 auto!important;
    box-sizing:border-box!important;
    align-items:center!important;
    padding:8px 10px!important;
  }

  /* Keep the utility rows and quote below Technical in the same flow. */
  body.mobile-menu-open header .links > a.nav-icon,
  body.mobile-menu-open header .links > a.quote{
    flex-shrink:0!important;
    visibility:visible!important;
  }

  body.mobile-menu-open header .links > a.quote{
    margin-top:14px!important;
    margin-bottom:0!important;
  }
}

@media (max-width:380px){
  body.mobile-menu-open header .links{width:88vw!important;max-width:316px!important;}
}
  

   /* ================================================================
   NEMREX V27 — MOBILE NAV STRUCTURAL FLOW FIX
   The mobile drawer uses normal block flow instead of flex flow.
   This prevents a long Products submenu from moving later siblings
   (Technical, Contact Us, E-Catalogue, Weight Calculator, Quote)
   horizontally or outside the drawer.
   Desktop navigation is not changed.
   ================================================================ */
@media (max-width:790px){
  /* Drawer itself scrolls; its children do NOT become horizontal flex items. */
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    display:block!important;
    flex-direction:initial!important;
    align-items:initial!important;
    justify-content:initial!important;
    gap:0!important;
    width:min(316px,88vw)!important;
    max-width:316px!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:0 14px 28px!important;
    box-sizing:border-box!important;
    white-space:normal!important;
  }

  /* Reset layout-positioning properties on every top-level item. */
  body.mobile-menu-open header .links > .drop,
  body.mobile-menu-open header .links > a,
  body.mobile-menu-open header .links > .nav-sep{
    display:block!important;
    position:static!important;
    float:none!important;
    clear:both!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    translate:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* The two dropdown wrappers are ordinary full-width blocks. */
  body.mobile-menu-open header .links > .drop{
    height:auto!important;
    overflow:visible!important;
    padding:0!important;
  }

  body.mobile-menu-open header .links > .drop > button{
    display:flex!important;
    position:static!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:46px!important;
    height:46px!important;
    margin:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    transform:none!important;
    translate:none!important;
  }

  /* Closed menus occupy zero space. */
  body.mobile-menu-open header .links > .drop:not(.open) > .drop-menu{
    display:none!important;
  }

  /* Open menus are INSIDE the Products/Technical wrapper, never beside it. */
  body.mobile-menu-open header .links > .drop.open > .drop-menu{
    display:block!important;
    position:static!important;
    float:none!important;
    clear:both!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    translate:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:4px 0 6px 12px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    visibility:visible!important;
    opacity:1!important;
    border:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  body.mobile-menu-open header .links > .drop.open > .drop-menu > a{
    display:flex!important;
    position:static!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:38px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 10px!important;
    box-sizing:border-box!important;
    transform:none!important;
    translate:none!important;
    white-space:normal!important;
  }

  /* Utility links and Quote are forced back into the same vertical flow. */
  body.mobile-menu-open header .links > a.nav-icon,
  body.mobile-menu-open header .links > a.quote{
    display:flex!important;
    position:static!important;
    float:none!important;
    clear:both!important;
    inset:auto!important;
    transform:none!important;
    translate:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    flex:none!important;
  }

  body.mobile-menu-open header .links > a.nav-icon{
    min-height:50px!important;
    height:50px!important;
    margin-top:0!important;
    margin-bottom:0!important;
    padding:0 10px!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }

  body.mobile-menu-open header .links > a.quote{
    min-height:48px!important;
    height:48px!important;
    margin:14px 0 0!important;
    padding:0 12px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* Sticky drawer header stays full width without affecting menu flow. */
  body.mobile-menu-open header .links > .drawer-head{
    display:block!important;
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    width:auto!important;
    max-width:none!important;
    margin:0 -14px 8px!important;
    clear:both!important;
    float:none!important;
  }

  /* Do not let desktop hover rules open/position dropdowns on touch. */
  body.mobile-menu-open header .links > .drop:hover > .drop-menu,
  body.mobile-menu-open header .links > .drop:focus-within > .drop-menu{
    position:static!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }
}

@media (max-width:380px){
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    width:88vw!important;
    max-width:316px!important;
  }
}
  

   /* ================================================================
   NEMREX V28 — MOBILE NAV SPACING + DROPDOWN GROUPING
   Mobile-only refinement of the already-correct V27 structure.
   - Consistent top-level row height/padding
   - No artificial separator block between Contact and utilities
   - Dropdown children grouped with a left gold rule
   - Drawer shrink-wraps to its content, while remaining scrollable
   ================================================================ */
@media (max-width:790px){
  /* Let the drawer end with its actual content instead of filling the
     remaining viewport with unexplained white space. It still scrolls
     when an expanded menu becomes taller than the viewport. */
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{
    height:auto!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:0 14px 14px!important;
    box-sizing:border-box!important;
  }

  /* One consistent rhythm for every top-level menu row. */
  body.mobile-menu-open header .links > a:not(.nav-icon):not(.quote),
  body.mobile-menu-open header .links > .drop > button{
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    margin:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    border-bottom:1px solid #e9edf2!important;
  }

  /* Keep the parent/dropdown relationship visually consistent. */
  body.mobile-menu-open header .links > .drop{
    margin:0!important;
    padding:0!important;
    border:0!important;
    width:100%!important;
  }

  /* The dropdown itself stays in normal flow and gets ONE left rule.
     This is deliberately on the dropdown container, not on the drawer,
     so it can never push the following top-level items sideways. */
  body.mobile-menu-open header .links > .drop.open > .drop-menu{
    display:block!important;
    position:static!important;
    width:calc(100% - 10px)!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0 0 0 10px!important;
    padding:5px 0 7px 12px!important;
    border:0!important;
    border-left:2px solid #E5A910!important;
    box-sizing:border-box!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  /* Submenu links use the same vertical rhythm, with no extra outer gaps. */
  body.mobile-menu-open header .links > .drop.open > .drop-menu > a{
    width:100%!important;
    min-height:38px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 10px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    border:0!important;
  }

  /* View All Products remains part of the same grouped dropdown. */
  body.mobile-menu-open header .links > .drop.open > .drop-menu > a.view-all{
    min-height:42px!important;
    margin-top:3px!important;
    padding:8px 10px!important;
  }

  /* Technical gets exactly the same treatment as Products. */
  body.mobile-menu-open header .links > .drop.open > button{
    border-bottom:1px solid #e9edf2!important;
  }

  /* Remove the desktop/mobile separator element completely on mobile.
     The old separator rendered as a blank grey block in the screenshot. */
  body.mobile-menu-open header .links > .nav-sep{
    display:none!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  /* Utility rows follow the same rhythm and do not introduce random gaps. */
  body.mobile-menu-open header .links > a.nav-icon{
    min-height:50px!important;
    height:50px!important;
    margin:0!important;
    padding:0 10px!important;
    border-bottom:1px solid #e9edf2!important;
    box-sizing:border-box!important;
  }

  /* Quote is the final element, with only a deliberate small top gap. */
  body.mobile-menu-open header .links > a.quote{
    min-height:48px!important;
    height:48px!important;
    margin:14px 0 0!important;
    padding:0 12px!important;
    box-sizing:border-box!important;
  }

  /* Keep the drawer header from adding an inconsistent bottom margin. */
  body.mobile-menu-open header .links > .drawer-head{
    margin:0 -14px 0!important;
  }
}
  

   /* NEMREX V29 — final mobile drawer render fix.  Reasserts a single,
   predictable flex column so no legacy rule can collapse the menu rows. */
@media (max-width:790px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}

  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open,
  .home-page header .links.open{
    position:fixed!important;
    top:0!important; left:0!important; right:auto!important; bottom:0!important;
    width:min(318px,88vw)!important; max-width:318px!important;
    height:100dvh!important; max-height:100dvh!important;
    margin:0!important; padding:0 14px 14px!important;
    display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important;
    align-items:stretch!important; align-content:stretch!important; justify-content:flex-start!important;
    gap:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important; overflow-y:auto!important;
    background:#fff!important;
    visibility:visible!important; opacity:1!important; pointer-events:auto!important;
    transform:none!important;
    z-index:2147483002!important;
  }

  /* Header row is part of the drawer flow, not an overlay over the links. */
  body.mobile-menu-open header .links > .drawer-head{
    display:block!important; position:sticky!important; top:0!important;
    flex:0 0 64px!important; width:auto!important; height:64px!important;
    margin:0 -14px 0!important; padding:0!important;
    z-index:20!important; background:#fff!important;
    box-sizing:border-box!important;
  }

  body.mobile-menu-open header .links > .drawer-head .drawer-close{
    display:flex!important; width:100%!important; height:64px!important;
    min-height:64px!important; margin:0!important; padding:0 14px!important;
    align-items:center!important; justify-content:flex-start!important;
    box-sizing:border-box!important;
  }

  /* Every top-level navigation item gets a real flex row. */
  body.mobile-menu-open header .links > a,
  body.mobile-menu-open header .links > .drop{
    position:static!important; float:none!important; clear:none!important;
    inset:auto!important; transform:none!important; translate:none!important;
    width:100%!important; max-width:100%!important; min-width:0!important;
    margin:0!important; padding:0!important;
    display:block!important; flex:0 0 auto!important;
    flex-shrink:0!important; visibility:visible!important; opacity:1!important;
    box-sizing:border-box!important;
  }

  body.mobile-menu-open header .links > a:not(.nav-icon):not(.quote),
  body.mobile-menu-open header .links > .drop > button{
    display:flex!important; flex:0 0 46px!important;
    width:100%!important; height:46px!important; min-height:46px!important;
    margin:0!important; padding:0 10px!important;
    align-items:center!important; justify-content:flex-start!important;
    box-sizing:border-box!important;
    border:0!important; border-bottom:1px solid #e9edf2!important;
    background:#fff!important; color:#0D1F3D!important;
  }

  /* Closed dropdowns occupy no space; open dropdowns stay inside parent. */
  body.mobile-menu-open header .links > .drop:not(.open) > .drop-menu{
    display:none!important;
  }
  body.mobile-menu-open header .links > .drop.open > .drop-menu{
    display:block!important; position:static!important; float:none!important;
    width:calc(100% - 10px)!important; min-width:0!important; max-width:none!important;
    height:auto!important; max-height:none!important;
    margin:0 0 0 10px!important; padding:5px 0 7px 12px!important;
    box-sizing:border-box!important; overflow:visible!important;
    border:0!important; border-left:2px solid #E5A910!important;
    background:#fff!important; box-shadow:none!important;
    transform:none!important; visibility:visible!important; opacity:1!important;
  }

  body.mobile-menu-open header .links > .drop.open > .drop-menu > a{
    display:flex!important; position:static!important; float:none!important;
    width:100%!important; min-height:38px!important; height:auto!important;
    margin:0!important; padding:8px 10px!important;
    box-sizing:border-box!important; align-items:center!important;
    border:0!important; background:#fff!important; color:#0D1F3D!important;
  }

  body.mobile-menu-open header .links > .drop.open > .drop-menu > a.view-all{
    min-height:42px!important; margin-top:3px!important;
    background:#fff8e5!important; font-weight:800!important;
  }

  /* Material, Industries, Contact and utility links cannot be positioned sideways. */
  body.mobile-menu-open header .links > a{
    left:auto!important; right:auto!important; top:auto!important; bottom:auto!important;
  }
  body.mobile-menu-open header .links > a.nav-icon{
    display:flex!important; flex:0 0 50px!important;
    width:100%!important; height:50px!important; min-height:50px!important;
    margin:0!important; padding:0 10px!important;
    align-items:center!important; justify-content:flex-start!important;
    border:0!important; border-bottom:1px solid #e9edf2!important;
    background:#fff!important; box-sizing:border-box!important;
  }

  body.mobile-menu-open header .links > .nav-sep{
    display:none!important; flex:none!important; width:0!important; height:0!important;
    margin:0!important; padding:0!important; border:0!important;
  }

  body.mobile-menu-open header .links > a.quote{
    display:flex!important; flex:0 0 48px!important;
    width:100%!important; height:48px!important; min-height:48px!important;
    margin:14px 0 0!important; padding:0 12px!important;
    align-items:center!important; justify-content:center!important;
    box-sizing:border-box!important;
  }

  body.mobile-menu-open header .links::-webkit-scrollbar{
    width:0!important; height:0!important; display:none!important;
  }
  body.mobile-menu-open header .links{
    scrollbar-width:none!important; -ms-overflow-style:none!important;
    touch-action:pan-y!important; -webkit-overflow-scrolling:touch!important;
  }
}
@media (max-width:380px){
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open{width:88vw!important;max-width:316px!important;}
}
  

   /* NEMREX V30 — stop flex-column wrapping. This is the key fix for the
   lower navigation items moving to the right after Products expands. */
@media (max-width:790px){
  body.mobile-menu-open header .links,
  body.mobile-menu-open header .links.open,
  .home-page header .links.open{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    align-content:stretch!important;
    justify-content:flex-start!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  /* Every direct child stays in the same single vertical flex column. */
  body.mobile-menu-open header .links > .drawer-head,
  body.mobile-menu-open header .links > .drop,
  body.mobile-menu-open header .links > a,
  body.mobile-menu-open header .links > .nav-sep{
    flex-shrink:0!important;
    float:none!important;
    clear:none!important;
  }

  /* Never allow later siblings to become a second flex column. */
  body.mobile-menu-open header .links > .drop.open ~ .drop,
  body.mobile-menu-open header .links > .drop.open ~ a{
    position:static!important;
    left:auto!important; right:auto!important;
    transform:none!important; translate:none!important;
    margin-left:0!important; margin-right:0!important;
    visibility:visible!important; opacity:1!important;
  }
}
  

   /* ==========================================================
   NEMREX V31 — TOUCH COLOR FIX FOR PRODUCT / MATERIAL / INDUSTRY CARDS
   Desktop: existing hover behavior remains unchanged.
   Touch: cards stay Navy by default and turn Gold only while tapped.
   ========================================================== */
@media (hover: none), (pointer: coarse) {
  /* Never let a browser-emulated hover leave card text Gold on touch. */
  .card-balance-section .orbit-card strong,
  .carousel-section .orbit-card strong {
    color: var(--navy) !important;
  }

  /* Material initials also remain Navy until the card is actually touched. */
  .card-balance-section .material-card .orbit-image,
  .carousel-section .material-card .orbit-image {
    background: #fff !important;
    color: var(--navy) !important;
  }

  /* Keep the card visually neutral when the browser emulates :hover. */
  .card-balance-section .orbit-card:hover,
  .carousel-section .orbit-card:hover,
  .card-balance-section .material-card:hover,
  .carousel-section .material-card:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .card-balance-section .orbit-card:hover .orbit-image,
  .carousel-section .orbit-card:hover .orbit-image,
  .card-balance-section .material-card:hover .orbit-image,
  .carousel-section .material-card:hover .orbit-image {
    background: #fff !important;
    color: var(--navy) !important;
    transform: none !important;
  }

  /* The actual touch state: Navy -> Gold, briefly, only for the card being tapped. */
  .card-balance-section .orbit-card.touch-pressed strong,
  .carousel-section .orbit-card.touch-pressed strong,
  .card-balance-section .orbit-card.is-touch-active strong,
  .carousel-section .orbit-card.is-touch-active strong {
    color: var(--gold) !important;
  }

  .card-balance-section .material-card.touch-pressed .orbit-image,
  .carousel-section .material-card.touch-pressed .orbit-image,
  .card-balance-section .material-card.is-touch-active .orbit-image,
  .carousel-section .material-card.is-touch-active .orbit-image {
    background: #fff !important;
    color: var(--navy) !important;
  }

  .card-balance-section .orbit-card.touch-pressed .orbit-image,
  .carousel-section .orbit-card.touch-pressed .orbit-image,
  .card-balance-section .orbit-card.is-touch-active .orbit-image,
  .carousel-section .orbit-card.is-touch-active .orbit-image {
    border-color: var(--gold) !important;
  }
}
  

   /* ==========================================================
   NEMREX V32 — MOBILE NAV TOUCH FEEDBACK
   Normal: Navy. While a mobile item is being touched: Gold.
   Desktop hover styling is intentionally untouched.
   ========================================================== */
@media (hover:none), (pointer:coarse){
  /* Keep the normal mobile navigation state Navy. */
  body.mobile-menu-open header .links > a,
  body.mobile-menu-open header .links > .drop > button,
  body.mobile-menu-open header .drop-menu > a,
  body.mobile-menu-open header .nav-icon{
    color:var(--navy)!important;
  }

  /* Direct top-level links: Navy -> Gold while touched. */
  body.mobile-menu-open header .links > a.touch-pressed,
  body.mobile-menu-open header .links > .drop > button.touch-pressed,
  body.mobile-menu-open header .drop-menu > a.touch-pressed,
  body.mobile-menu-open header .nav-icon.touch-pressed{
    color:var(--gold)!important;
  }

  /* Recreate the gold underline feedback for top-level links. */
  body.mobile-menu-open header .links > a.touch-pressed::after,
  body.mobile-menu-open header .links > .drop > button.touch-pressed::after{
    transform:scaleX(1)!important;
  }

  /* Dropdown items get a subtle background plus Gold text while touched. */
  body.mobile-menu-open header .drop-menu > a.touch-pressed{
    background:#f7f9fb!important;
    color:var(--gold)!important;
  }

  /* View All Products keeps its special background, but its text still
     gets touch feedback. */
  body.mobile-menu-open header .drop-menu > a.view-all.touch-pressed{
    background:#fff8e7!important;
    color:var(--gold)!important;
  }

  /* The quote button remains a Gold button; its label does not need to
     become Gold because that would reduce contrast. */
  body.mobile-menu-open header .links > a.quote.touch-pressed{
    color:var(--navy)!important;
  }
}
  

   /* =========================================================
   NEMREX — Footer V33
   Company identity + 7/7 balanced link columns + Contact/Follow Us
   ========================================================= */
footer .footer-company{min-width:0}
footer .footer-tagline{
  margin:14px 0 9px!important;
  color:#fff!important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
  font-size:15px!important;
  font-style:italic!important;
  font-weight:400!important;
  line-height:1.45!important;
}
footer .footer-description{
  margin:0!important;
  max-width:390px;
  color:#d9e1eb!important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.65!important;
  letter-spacing:0!important;
}
footer .footer-follow{margin-top:20px}
footer .footer-follow h4{
  margin:4px 0 14px!important;
  padding-bottom:12px!important;
  position:relative!important;
  color:var(--gold)!important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.25!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
}
footer .footer-follow h4:after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:40px;
  height:2px;
  background:var(--gold);
}
footer .footer-follow .socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:0!important;
}
footer .footer-follow .socials a{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border:1.5px solid var(--gold)!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  color:#fff!important;
  box-shadow:none!important;
  transform:none!important;
  outline:none!important;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
footer .footer-follow .socials a svg{
  width:21px!important;
  height:21px!important;
  display:block!important;
  color:inherit!important;
  fill:currentColor!important;
}
footer .footer-follow .socials .instagram svg{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
}
footer .footer-follow .socials .instagram .dot{
  fill:currentColor!important;
  stroke:none!important;
}
/* Original platform colours on the white circle */
footer .footer-follow .socials .linkedin{color:#0A66C2!important}
footer .footer-follow .socials .instagram{color:#E4405F!important}
footer .footer-follow .socials .youtube{color:#FF0000!important}
footer .footer-follow .socials .facebook{color:#1877F2!important}
/* Touch, hover and keyboard focus: gold-filled circle with white original icon */
footer .footer-follow .socials a:hover,
footer .footer-follow .socials a:active,
footer .footer-follow .socials a:focus-visible,
footer .footer-follow .socials a.touch-active{
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:0 5px 12px rgba(0,0,0,.20)!important;
}
footer .footer-follow .socials a:focus-visible{
  outline:2px solid #fff!important;
  outline-offset:3px!important;
}
@media(max-width:520px){
  footer .footer-follow .socials{gap:10px}
  footer .footer-follow .socials a{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  footer .footer-follow .socials a svg{width:21px!important;height:21px!important}
}
  

   /* Remove the automatic decorative line that appeared when hovering navigation text. */
.links > a::after,
.drop > button::after,
.links > a:hover::after,
.links > a.active::after,
.drop:hover > button::after,
.drop.open > button::after,
.drop:focus-within > button::after,
body.mobile-menu-open header .links > a.touch-pressed::after,
body.mobile-menu-open header .links > .drop > button.touch-pressed::after {
  display: none !important;
  content: none !important;
  transform: none !important;
}

/* Keep navigation text color changes, but do not create an underline. */
.links > a:hover,
.drop > button:hover,
.links > a.active,
.drop.open > button {
  text-decoration: none !important;
}
  

   /*
  NEMREX TYPOGRAPHY — MATCHED TO SUPPLIED PROFILE LOGO

  Display / headings: Yeseva One
  Body / navigation / UI: Canva Sans -> Open Sans -> Arial fallback
  Important: the supplied logo is an image, so its original wordmark remains
  unchanged. These rules make the live HTML text visually match it.
*/
:root{
  --font-display:"Yeseva One",Georgia,"Times New Roman",serif;
  --font-body:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif;
}

body,
button,
input,
select,
textarea,
.top,
.links,
.btn,
.eyebrow,
.benefit,
.tool,
.orbit-card,
.orbit-card strong,
.orbit-card small,
.drop-menu a,
.quote,
footer,
footer p,
footer a,
.foot-links a,
.bottom,
.lockup small,
.brand-text small{
  font-family:var(--font-body)!important;
}

h1,h2,h3,h4,
.brand-text b,
.lockup b,
.foot-brand b,
.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4,
.home-page header .brand .lockup b,
.home-page footer .foot-brand .lockup b{
  font-family:var(--font-display)!important;
  font-weight:400;
}

h1,h2,h3,h4{
  letter-spacing:0;
}

body{
  line-height:1.6;
}

.home-page p,
.home-page li,
.home-page label,
.home-page input,
.home-page textarea,
.home-page select,
.home-page button,
.home-page .btn,
.home-page .links{
  font-family:var(--font-body)!important;
}

.home-page p{
  font-size:15.5px;
  line-height:1.7;
}

.home-page .hero h1{
  font-family:var(--font-display)!important;
}

.home-page .hero .eyebrow,
.home-page .hero p{
  font-family:var(--font-body)!important;
}

.home-page header .brand .lockup b{
  font-family:var(--font-display)!important;
  font-weight:400!important;
}

.home-page header .brand .lockup small,
.home-page footer .foot-brand .lockup small{
  font-family:var(--font-body)!important;
  font-weight:700!important;
}

@media (max-width:790px){
  .home-page .hero h1,
  .home-page h1,
  .home-page h2,
  .home-page h3,
  .home-page h4{
    font-family:var(--font-display)!important;
  }
}
  

   /*
  NEMREX FOOTER TEXT COLOR — FINAL
  The company description under the logo uses exactly the same light-grey
  text colour as the Quick Links / Products / Contact link text.
*/
footer .footer-description,
footer .footer-company .footer-description,
footer .foot-brand + .footer-description {
  color:#d9e1eb !important;
  opacity:1 !important;
}

/* Keep the footer tagline intentionally white; only the descriptive paragraph
   is matched to the link text colour. */
footer .footer-tagline {
  color:#ffffff !important;
}

/* Keep all normal footer link text on the same light-grey tone. */
footer .foot-links a,
footer .footer-links a {
  color:#d9e1eb !important;
}

/* Gold remains reserved for headings, arrows and interaction states. */
footer .foot-links a:hover,
footer .foot-links a:focus-visible,
footer .footer-links a:hover,
footer .footer-links a:focus-visible {
  color:var(--gold) !important;
}
  

   /* FINAL FOOTER HEADING TYPOGRAPHY
   All footer section headings use the same Yeseva One style.
   Normal footer content remains Canva Sans / Open Sans. */
footer h3,
footer .footer-follow h4,
footer .footer-company h3,
footer .foot-links + h3 {
  font-family:"Yeseva One",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:0!important;
}

footer .footer-tagline,
footer .footer-description,
footer .foot-links a,
footer .contact-links a,
footer .bottom,
footer .footer-follow .socials a {
  font-family:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif!important;
}

/* Preserve the approved footer description and its matched light-grey tone. */
footer .footer-description {
  color:#d9e1eb!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.65!important;
}

/* Keep all footer headings in the approved Nemrex gold. */
footer h3,
footer .footer-follow h4 {
  color:var(--gold)!important;
}
  

   /* Final brand lockup: keep NEMREX and INDUSTRIES visibly paired on mobile and footer. */
.brand .lockup,
.foot-brand .lockup{
  width:max-content !important;
  min-width:0 !important;
  flex:0 0 auto !important;
  overflow:visible !important;
}
.brand .lockup b,
.foot-brand .lockup b{
  display:block !important;
  white-space:nowrap !important;
  overflow:visible !important;
  line-height:1 !important;
}
.brand .lockup small,
.foot-brand .lockup small{
  width:100% !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:0 !important;
  margin-top:7px !important;
  padding:0 !important;
  font-family:"Canva Sans","Segoe UI",Arial,sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  color:var(--gold) !important;
  white-space:nowrap !important;
}
.brand .lockup small span,
.foot-brand .lockup small span{
  display:block !important;
  flex:0 0 auto !important;
}
@media(max-width:790px){
  header .brand{gap:10px !important; align-items:center !important;}
  header .brand img{height:50px !important; width:auto !important; max-width:68px !important;}
  header .brand .lockup b{font-size:22px !important; letter-spacing:.025em !important;}
  header .brand .lockup small{font-size:9px !important; margin-top:6px !important;}
}
@media(max-width:520px){
  header .brand img{height:48px !important; max-width:64px !important;}
  header .brand .lockup b{font-size:20px !important;}
  header .brand .lockup small{font-size:8px !important; margin-top:6px !important;}
  footer .foot-brand .lockup b{font-size:24px !important;}
  footer .foot-brand .lockup small{font-size:9px !important;}
}
  

   /* NEMREX — single hero image with subtle cinematic motion */
.hero { min-height:470px; }
.hero-inner { max-width:1400px; padding:48px 5% 62px; }
.hero-media img { object-fit:cover; object-position:center right; }
@media (max-width:790px) { .hero { min-height:455px; } .hero-inner { padding:48px 5% 62px; } }
@media (max-width:520px) { .hero { min-height:455px; } .hero-inner { padding:42px 6% 62px; } .hero-inner .btn { width:100%; justify-content:center; margin-right:0; margin-bottom:10px; } }
@media (prefers-reduced-motion:reduce) { .hero-media img,.hero-media video { animation:none !important; transform:none !important; } }
  

   /* FINAL MOBILE HERO POLISH — floating contact controls intentionally unchanged. */
@media (max-width: 790px){
  .home-page .hero{
    min-height:455px !important;
    align-items:center !important;
  }
  .home-page .hero-media img,
  .home-page .hero-media video{
    object-position:62% center !important;
  }
  .home-page .hero-inner{
    padding:30px 6% 34px !important;
  }
  .home-page .hero .eyebrow{
    font-size:11px !important;
    line-height:1.3 !important;
    letter-spacing:.035em !important;
  }
  .home-page .hero h1{
    font-size:clamp(30px,8.2vw,38px) !important;
    line-height:1.04 !important;
    margin:10px 0 12px !important;
    max-width:100% !important;
  }
  .home-page .hero p{
    font-size:14px !important;
    line-height:1.52 !important;
    max-width:100% !important;
    margin:0 !important;
  }
  .home-page .hero .hero-actions{
    margin-top:12px !important;
    gap:9px !important;
  }
  .home-page .hero .hero-actions .btn{
    min-height:46px !important;
    padding:11px 16px !important;
    margin:0 !important;
  }
}
@media (max-width:520px){
  .home-page .hero{
    min-height:455px !important;
  }
  .home-page .hero-inner{
    padding:28px 6% 32px !important;
  }
  .home-page .hero .eyebrow{
    font-size:10.5px !important;
  }
  .home-page .hero h1{
    font-size:clamp(29px,8.4vw,36px) !important;
    line-height:1.03 !important;
    margin:9px 0 11px !important;
  }
  .home-page .hero p{
    font-size:14px !important;
    line-height:1.5 !important;
  }
  .home-page .hero .hero-actions{
    margin-top:11px !important;
    gap:9px !important;
  }
}
@media (max-width:380px){
  .home-page .hero-inner{
    padding-left:5.5% !important;
    padding-right:5.5% !important;
  }
  .home-page .hero h1{
    font-size:29px !important;
  }
  .home-page .hero p{
    font-size:13.5px !important;
  }
}
  

   /* FINAL CLEAN MOTION HERO — short, premium copy; floating controls untouched. */
.home-page .hero {
  min-height: 470px !important;
}
.home-page .hero-inner {
  max-width: 1400px !important;
  padding: 48px 5% 62px !important;
}
.home-page .hero h1 {
  max-width: 720px !important;
  margin: 13px 0 15px !important;
}
.home-page .hero p {
  max-width: 570px !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.home-page .hero-media img {
  object-fit: cover !important;
  object-position: center right !important;
  transform-origin: center right !important;
  animation: heroKenBurns 22s ease-in-out 1 both !important;
}
@media (max-width: 790px) {
  .home-page .hero {
    min-height: 455px !important;
  }
  .home-page .hero-media img {
    object-position: 62% center !important;
  }
  .home-page .hero-inner {
    padding: 34px 6% 34px !important;
  }
  .home-page .hero .eyebrow {
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: .035em !important;
  }
  .home-page .hero h1 {
    max-width: 100% !important;
    font-size: clamp(30px, 8.2vw, 38px) !important;
    line-height: 1.05 !important;
    margin: 9px 0 12px !important;
  }
  .home-page .hero p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .home-page .hero > .hero-inner > .btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 11px 0 0 !important;
  }
}
@media (max-width: 520px) {
  .home-page .hero {
    min-height: 455px !important;
  }
  .home-page .hero-inner {
    padding: 28px 6% 30px !important;
  }
  .home-page .hero .eyebrow {
    font-size: 10.5px !important;
  }
  .home-page .hero h1 {
    font-size: clamp(29px, 8.4vw, 36px) !important;
    line-height: 1.04 !important;
    margin: 8px 0 10px !important;
  }
  .home-page .hero p {
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
}
@media (max-width: 380px) {
  .home-page .hero h1 {
    font-size: 29px !important;
  }
  .home-page .hero p {
    font-size: 13.5px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-media img {
    animation: none !important;
    transform: none !important;
  }
}
  

   /*
  NEMREX ABOUT US — HOME-PAGE MATCHED SYSTEM
  Source basis:
  - Home hero: 470px desktop / 455px mobile
  - Home hero inner: 48px 5% 62px
  - Home body: Canva Sans / Open Sans, 15.5px, line-height 1.7
  - Home headings: Yeseva One
  - Home h1 max: 56px
  - Home h2 max: 32px
  - Home eyebrow: 12–15px
  - Brand colors: Navy #0D1F3D / Gold #E5A910 / Grey #545454
*/

/* ---------- TYPOGRAPHY ---------- */
body.about-page,
body.about-page p,
body.about-page li,
body.about-page a,
body.about-page button{
  font-family:"Canva Sans","Open Sans",Arial,Helvetica,sans-serif!important;
}

body.about-page h1,
body.about-page h2,
body.about-page h3,
body.about-page h4{
  font-family:"Yeseva One",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  letter-spacing:0!important;
  overflow-wrap:anywhere;
}

body.about-page p{
  font-size:15.5px;
  line-height:1.7;
}

/* ---------- ABOUT HERO: SAME HEIGHT/RHYTHM AS HOME ---------- */
.about-hero{
  position:relative;
  min-height:470px!important;
  height:470px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#0D1F3D;
}

.about-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.about-hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center right;
  transform-origin:center right;
  animation:aboutHeroKenBurns 22s ease-in-out infinite alternate;
}
@keyframes aboutHeroKenBurns{
  from{transform:scale(1);}
  to{transform:scale(1.035);}
}

.about-hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(13,31,61,.92) 0%,
    rgba(13,31,61,.78) 36%,
    rgba(13,31,61,.42) 68%,
    rgba(13,31,61,.12) 100%
  );
  pointer-events:none;
}

.about-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:48px 5% 62px!important;
}

.about-eyebrow,
.about-page .section-eyebrow{
  color:#E5A910!important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
  font-size:clamp(12px,1.15vw,15px)!important;
  line-height:1.35!important;
  letter-spacing:.055em!important;
  font-weight:800!important;
  text-transform:uppercase;
}

.about-hero h1{
  max-width:720px!important;
  margin:13px 0 15px!important;
  color:#fff!important;
  font-size:clamp(30px,4vw,56px)!important;
  line-height:1.08!important;
  text-shadow:0 2px 18px rgba(4,12,28,.45);
}

.about-hero h1 em{
  color:#E5A910!important;
  font-style:normal;
}

.about-hero p{
  max-width:570px!important;
  margin:0!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1.65!important;
  text-shadow:0 1px 10px rgba(4,12,28,.35);
}

/* ---------- CONTENT SECTIONS: SAME VISUAL DENSITY AS HOME ---------- */
.about-content-section,
.about-section{
  padding:76px 5%;
}

.about-container{
  width:100%;
  max-width:1250px;
  margin:0 auto;
}

.about-light{
  background:#f5f7fa;
  border-top:0;
  border-bottom:0;
}

.about-intro h2,
.center-heading h2,
.left-heading,
.about-cta h2{
  color:#0D1F3D!important;
  font-size:clamp(23px,2.5vw,32px)!important;
  line-height:1.18!important;
  margin:12px 0 18px!important;
}

.about-copy{
  max-width:100%;
}

.about-copy p{
  color:#545454;
  margin:0 0 20px;
  font-size:15.5px;
  line-height:1.7;
}

.about-copy p strong{
  color:#545454;
  font-weight:700;
}

.statement-line{
  margin-top:25px;
  padding:6px 0 6px 17px;
  border-left:2px solid #E5A910;
  color:#0D1F3D;
  font-size:16px;
  line-height:1.7;
  font-weight:700;
}

/* ---------- CENTER HEADINGS ---------- */
.center-heading{
  max-width:900px;
  margin:0 auto 38px;
  text-align:center;
}

.center-heading h2{
  margin-bottom:14px!important;
}

.center-heading p{
  max-width:800px;
  margin:0 auto;
  color:#545454;
  font-size:15.5px;
  line-height:1.7;
}

/* ---------- CARDS: HOME-STYLE BORDER/SHADOW/HOVER ---------- */
.about-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.about-card{
  position:relative;
  min-height:260px;
  padding:28px;
  background:#fff;
  border:1px solid #d9dee6;
  border-top:2px solid #E5A910;
  border-radius:0;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.about-card h3{
  margin:19px 0 11px;
  color:#0D1F3D;
  font-size:clamp(20px,1.7vw,25px);
  line-height:1.3;
}

.about-card p{
  margin:0;
  color:#545454;
  font-size:15.5px;
  line-height:1.7;
}

.card-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1.5px solid #E5A910;
  border-radius:50%;
  color:#E5A910;
  background:#fff;
  transition:background-color .22s ease,color .22s ease,transform .22s ease;
}

.card-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.card-icon.filled{
  background:#E5A910;
  color:#0D1F3D;
}

.about-card.featured-card{
  box-shadow:0 10px 28px rgba(13,31,61,.08);
}

.about-card:hover,
.about-card:focus-within{
  border-color:#E5A910;
  box-shadow:0 12px 28px rgba(13,31,61,.13);
  transform:translateY(-4px);
}

.about-card:hover .card-icon:not(.filled),
.about-card:focus-within .card-icon:not(.filled){
  background:#E5A910;
  color:#0D1F3D;
}

.about-card:hover h3,
.about-card:focus-within h3{
  color:#E5A910;
}

/* ---------- STANDARDS NOTE ---------- */
.standards-note{
  margin-top:24px;
  padding:7px 0 7px 17px;
  border-left:2px solid #E5A910;
  color:#0D1F3D;
  font-size:15.5px;
  line-height:1.7;
  font-weight:700;
}

/* ---------- INDUSTRIES ---------- */
.industries-section{
  padding-top:76px;
  padding-bottom:76px;
}

.left-heading{
  margin-bottom:30px!important;
}

.industry-grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:14px;
}

.industry-card{
  min-height:155px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 10px;
  background:#fff;
  border:1px solid #d9dee6;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.industry-icon{
  min-height:40px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  color:#0D1F3D;
  font-size:27px;
  transition:color .22s ease,transform .22s ease;
}

.industry-card h3{
  margin:0;
  color:#0D1F3D;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
}

.industry-card:hover,
.industry-card:focus-within{
  border-color:#E5A910;
  box-shadow:0 8px 18px rgba(13,31,61,.10);
  transform:translateY(-3px);
}

.industry-card:hover .industry-icon,
.industry-card:focus-within .industry-icon,
.industry-card:hover h3,
.industry-card:focus-within h3{
  color:#E5A910;
}

/* ---------- CTA: SAME HOME QUOTE RHYTHM ---------- */
.about-cta{
  background:#f5f7fa;
  padding:76px 5%;
  border-top:0;
}

.cta-inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:56px;
  align-items:center;
  max-width:1250px;
}

.cta-inner > div{
  max-width:760px;
}

.about-cta h2{
  margin:12px 0 18px!important;
  font-size:clamp(30px,3.2vw,46px)!important;
  line-height:1.2!important;
}

.about-cta p{
  max-width:520px;
  color:#545454;
  font-size:16px;
  line-height:1.8;
}

.about-cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:48px;
  padding:13px 22px;
  background:#E5A910;
  color:#0D1F3D;
  border:1px solid #E5A910;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;
  font-size:14px;
  font-weight:700;
  transition:background-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.about-cta-button:hover,
.about-cta-button:focus-visible{
  background:#0D1F3D;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(13,31,61,.18);
}

.about-cta-button span{
  transition:transform .22s ease;
}

.about-cta-button:hover span{
  transform:translateX(4px);
}

/* ---------- TABLET ---------- */
@media (max-width:1100px){
  .about-card-grid{
    gap:18px;
  }
  .about-card{
    padding:24px;
  }
  .industry-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

/* ---------- MOBILE: SAME HOME HERO + SECTION RHYTHM ---------- */
@media (max-width:790px){
  .about-hero{
    min-height:455px!important;
    height:455px;
    align-items:center!important;
  }

  .about-hero-media img{
    object-position:62% center!important;
  }

  .about-hero-scrim{
    background:linear-gradient(
      90deg,
      rgba(13,31,61,.92) 0%,
      rgba(13,31,61,.76) 58%,
      rgba(13,31,61,.45) 100%
    );
  }

  .about-hero-inner{
    padding:34px 6% 34px!important;
  }

  .about-hero .about-eyebrow{
    font-size:11px!important;
    line-height:1.3!important;
    letter-spacing:.035em!important;
  }

  .about-hero h1{
    max-width:100%!important;
    font-size:clamp(30px,8.2vw,38px)!important;
    line-height:1.05!important;
    margin:9px 0 12px!important;
  }

  .about-hero p{
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.5!important;
  }

  .about-content-section,
  .about-section{
    padding:42px 5%;
  }

  .about-container{
    width:100%;
  }

  .about-intro h2,
  .center-heading h2,
  .left-heading{
    font-size:clamp(22px,4.6vw,28px)!important;
    line-height:1.2!important;
  }

  .about-copy p,
  .about-card p,
  .center-heading p,
  .standards-note{
    font-size:15px;
    line-height:1.7;
  }

  .center-heading{
    margin-bottom:30px;
  }

  .about-card-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .about-card{
    min-height:0;
    padding:22px;
  }

  .about-card h3{
    font-size:22px;
    line-height:1.3;
  }

  .industry-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .industry-card{
    min-height:140px;
  }

  .industry-card h3{
    font-size:14px!important;
  }

  .about-cta{
    padding:42px 5%;
  }

  .cta-inner{
    grid-template-columns:1fr;
    gap:22px;
  }

  .about-cta h2{
    font-size:clamp(27px,8vw,34px)!important;
    line-height:1.2!important;
  }

  .about-cta-button{
    width:100%;
  }
}

@media (max-width:520px){
  .about-hero{
    min-height:455px!important;
    height:455px;
  }

  .about-hero-inner{
    padding:28px 6% 30px!important;
  }

  .about-hero .about-eyebrow{
    font-size:10.5px!important;
  }

  .about-hero h1{
    font-size:clamp(29px,8.4vw,36px)!important;
    line-height:1.04!important;
    margin:8px 0 10px!important;
  }

  .about-hero p{
    font-size:14px!important;
    line-height:1.48!important;
  }

  .about-content-section,
  .about-section{
    padding-top:42px;
    padding-bottom:42px;
  }

  .about-intro h2,
  .center-heading h2,
  .left-heading{
    font-size:clamp(21px,5.4vw,25px)!important;
  }

  .about-card{
    padding:20px;
  }

  .about-card h3{
    font-size:21px;
  }

  .industry-card{
    min-height:136px;
    padding:16px 8px;
  }
}

@media (max-width:380px){
  .about-hero h1{
    font-size:29px!important;
  }
  .about-hero p{
    font-size:13.5px!important;
  }
}

@media (hover:none),(pointer:coarse){
  .about-card:hover,
  .industry-card:hover,
  .about-cta-button:hover{
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .about-hero-media img{
    animation:none!important;
    transform:none!important;
  }
  .about-card,
  .industry-card,
  .about-cta-button{
    transition:none!important;
  }
}
  

/* =========================================================
   NEMREX ABOUT US — FINAL BALANCED CONTENT WIDTH
   Matches the horizontal rhythm of the Home page.

   Home page uses roughly 5% side spacing. The About page
   previously constrained its main content to max-width:1250px,
   which created the visibly large left/right margins.

   This override removes that narrow centered container while
   preserving the existing typography, cards, colours,
   navigation, floating buttons and mobile layout.
   ========================================================= */

@media (min-width: 791px) {
  .about-content-section,
  .about-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .about-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Keep the same comfortable 5% mobile rhythm. */
@media (max-width: 790px) {
  .about-content-section,
  .about-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .about-container {
    width: 100% !important;
    max-width: none !important;
  }
}


/* =========================================================
   NEMREX — INDUSTRY CARD TITLE FIX
   Prevents long industry names from breaking in the middle
   of a word (e.g. "Pharmaceutica l").
   ========================================================= */

.industry-card h3{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: 14.5px !important;
  line-height: 1.28 !important;
  text-align: center !important;
}

@media (max-width: 1100px) and (min-width: 791px){
  .industry-card h3{
    font-size: 14px !important;
  }
}

@media (max-width: 790px){
  .industry-card h3{
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }
}


/* =========================================================
   NEMREX ABOUT US — CTA REFINEMENT
   More compact vertical rhythm + clearer B2B call-to-action.
   ========================================================= */

/* Reduce the visual gap between the Industries section and CTA. */
.about-section + .about-cta,
.about-cta{
  padding-top:52px !important;
  padding-bottom:52px !important;
}

/* Keep the CTA text compact and balanced. */
.about-cta h2{
  margin:0 0 14px !important;
  max-width:780px;
}

.about-cta p{
  margin:0 !important;
  max-width:620px !important;
  line-height:1.65 !important;
}

/* Keep the button vertically centered with the shorter copy. */
.cta-inner{
  gap:48px !important;
  align-items:center !important;
}

/* On mobile, retain comfortable spacing without making the CTA tall. */
@media (max-width:790px){
  .about-cta{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  .about-cta h2{
    margin-bottom:12px !important;
  }

  .about-cta p{
    max-width:100% !important;
  }

  .cta-inner{
    gap:20px !important;
  }
}


.about-cta h2{
  margin:0 0 14px !important;
  max-width:780px;
}
.about-cta p{
  margin:0 !important;
  max-width:620px !important;
  line-height:1.65 !important;
}
.about-cta{
  padding-top:52px !important;
  padding-bottom:52px !important;
}
.cta-inner{
  gap:48px !important;
  align-items:center !important;
}
@media (max-width:790px){
  .about-cta{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }
  .about-cta h2{
    margin-bottom:12px !important;
  }
  .about-cta p{
    max-width:100% !important;
  }
  .cta-inner{
    gap:20px !important;
  }
}


/* =========================================================
   NEMREX ABOUT US — FINAL SECTION RHYTHM
   Tightens the large vertical gaps around the final CTA
   while keeping the balanced horizontal 5% spacing.
   ========================================================= */

/* Reduce the space below the Industries cards. */
.industries-section{
  padding-top:52px !important;
  padding-bottom:30px !important;
}

/* Reduce the space above and below the final CTA. */
.about-cta{
  padding-top:34px !important;
  padding-bottom:34px !important;
}

/* Keep the CTA content compact and aligned. */
.about-cta h2{
  margin:0 0 12px !important;
}

.about-cta p{
  margin:0 !important;
  line-height:1.6 !important;
}

.cta-inner{
  gap:42px !important;
  align-items:center !important;
}

/* Mobile: retain comfortable breathing room without the
   excessive desktop-style vertical gap. */
@media (max-width:790px){
  .industries-section{
    padding-top:42px !important;
    padding-bottom:24px !important;
  }

  .about-cta{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  .about-cta h2{
    margin-bottom:10px !important;
  }

  .cta-inner{
    gap:18px !important;
  }
}


/* =========================================================
   NEMREX ABOUT US — FINAL V5
   Balanced vertical rhythm
   - Reduces excessive top/bottom whitespace
   - Keeps the established 5% horizontal alignment
   - Preserves typography, colours, cards, images and nav
   - Responsive for desktop / tablet / mobile
   ========================================================= */

/* ---------- HERO ---------- */
body.about-page .about-hero{
  min-height:430px !important;
  height:430px !important;
}

body.about-page .about-hero-inner{
  padding:36px 5% 42px !important;
}

body.about-page .about-hero h1{
  margin:10px 0 13px !important;
}

/* ---------- MAIN ABOUT CONTENT ---------- */
body.about-page .about-content-section,
body.about-page .about-section{
  padding-top:52px !important;
  padding-bottom:52px !important;
}

/* Intro heading/content should sit closer together. */
body.about-page .about-intro h2,
body.about-page .center-heading h2,
body.about-page .left-heading{
  margin-top:6px !important;
  margin-bottom:14px !important;
}

body.about-page .center-heading{
  margin-bottom:26px !important;
}

/* ---------- CARDS ---------- */
body.about-page .about-card-grid{
  gap:20px !important;
}

body.about-page .about-card{
  min-height:235px !important;
  padding:24px !important;
}

/* ---------- INDUSTRIES ---------- */
body.about-page .industries-section{
  padding-top:44px !important;
  padding-bottom:24px !important;
}

/* ---------- FINAL CTA ---------- */
body.about-page .about-cta{
  padding-top:30px !important;
  padding-bottom:30px !important;
}

body.about-page .about-cta h2{
  margin:0 0 10px !important;
}

body.about-page .about-cta p{
  margin:0 !important;
  line-height:1.6 !important;
}

body.about-page .cta-inner{
  gap:36px !important;
}

/* ---------- TABLET ---------- */
@media (max-width:1100px) and (min-width:791px){
  body.about-page .about-hero{
    min-height:410px !important;
    height:410px !important;
  }

  body.about-page .about-hero-inner{
    padding:32px 5% 38px !important;
  }

  body.about-page .about-content-section,
  body.about-page .about-section{
    padding-top:46px !important;
    padding-bottom:46px !important;
  }

  body.about-page .about-card{
    min-height:220px !important;
    padding:22px !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width:790px){
  body.about-page .about-hero{
    min-height:410px !important;
    height:410px !important;
  }

  body.about-page .about-hero-inner{
    padding:30px 6% 32px !important;
  }

  body.about-page .about-content-section,
  body.about-page .about-section{
    padding:36px 5% !important;
  }

  body.about-page .about-intro h2,
  body.about-page .center-heading h2,
  body.about-page .left-heading{
    margin-top:4px !important;
    margin-bottom:12px !important;
  }

  body.about-page .center-heading{
    margin-bottom:22px !important;
  }

  body.about-page .about-card-grid{
    gap:14px !important;
  }

  body.about-page .about-card{
    min-height:0 !important;
    padding:20px !important;
  }

  body.about-page .industries-section{
    padding-top:34px !important;
    padding-bottom:20px !important;
  }

  body.about-page .about-cta{
    padding:28px 5% !important;
  }

  body.about-page .cta-inner{
    gap:18px !important;
  }
}

/* ---------- SMALL PHONES ---------- */
@media (max-width:520px){
  body.about-page .about-hero{
    min-height:400px !important;
    height:400px !important;
  }

  body.about-page .about-hero-inner{
    padding:26px 6% 28px !important;
  }

  body.about-page .about-hero h1{
    margin:8px 0 10px !important;
  }

  body.about-page .about-content-section,
  body.about-page .about-section{
    padding:32px 5% !important;
  }

  body.about-page .about-card{
    padding:18px !important;
  }

  body.about-page .about-cta{
    padding:26px 5% !important;
  }
}


/* =========================================================
   NEMREX ABOUT US — FINAL V6
   HERO ALIGNMENT + CARD ICON STATE FIX
   ========================================================= */

/* ---------------------------------------------------------
   1. HERO: remove the extra centered max-width constraint.
   The content now follows the same 5% left/right rhythm as
   the rest of the About page.
   --------------------------------------------------------- */
body.about-page .about-hero-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:5% !important;
  padding-right:5% !important;
}

/* Keep the hero copy itself at a comfortable reading width. */
body.about-page .about-hero h1{
  max-width:720px !important;
}

body.about-page .about-hero p{
  max-width:570px !important;
}

/* ---------------------------------------------------------
   2. ABOUT CARDS: no icon is permanently active.
   The existing .filled class is neutralised so every card
   starts in the same white + gold-outline state.
   Gold fill is applied ONLY while the card is actually
   hovered/focused.
   --------------------------------------------------------- */
body.about-page .about-card .card-icon,
body.about-page .about-card .card-icon.filled{
  background:#fff !important;
  color:#E5A910 !important;
  border-color:#E5A910 !important;
  box-shadow:none !important;
}

/* Real mouse/trackpad hover only. */
@media (hover:hover) and (pointer:fine){
  body.about-page .about-card:hover .card-icon,
  body.about-page .about-card:focus-within .card-icon{
    background:#E5A910 !important;
    color:#0D1F3D !important;
    border-color:#E5A910 !important;
  }
}

/* Touch: never leave an old :hover/fill state stuck. */
@media (hover:none), (pointer:coarse){
  body.about-page .about-card:hover .card-icon,
  body.about-page .about-card:focus-within .card-icon{
    background:#fff !important;
    color:#E5A910 !important;
    border-color:#E5A910 !important;
  }

  /* A deliberate tap state can still be shown briefly. */
  body.about-page .about-card.touch-pressed .card-icon,
  body.about-page .about-card.is-touch-active .card-icon{
    background:#E5A910 !important;
    color:#0D1F3D !important;
    border-color:#E5A910 !important;
  }
}

/* ---------------------------------------------------------
   3. INDUSTRY ICONS: also remain neutral until interaction.
   --------------------------------------------------------- */
@media (hover:none), (pointer:coarse){
  body.about-page .industry-card:hover .industry-icon,
  body.about-page .industry-card:focus-within .industry-icon{
    color:#0D1F3D !important;
  }
}


/* =========================================================
   NEMREX ABOUT US — FINAL V7
   Cleaner, shorter hero copy + better vertical breathing room
   ========================================================= */

body.about-page .about-hero-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:46px 5% 50px !important;
}

body.about-page .about-hero h1{
  max-width:790px !important;
  margin:14px 0 17px !important;
  font-size:clamp(30px,4vw,56px) !important;
  line-height:1.08 !important;
}

body.about-page .about-hero p{
  max-width:610px !important;
  margin:0 !important;
  font-size:16px !important;
  line-height:1.6 !important;
}

@media (max-width:790px){
  body.about-page .about-hero-inner{
    padding:38px 6% 42px !important;
  }

  body.about-page .about-hero h1{
    max-width:100% !important;
    margin:10px 0 12px !important;
  }

  body.about-page .about-hero p{
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }
}

@media (max-width:520px){
  body.about-page .about-hero-inner{
    padding:34px 6% 38px !important;
  }

  body.about-page .about-hero h1{
    margin:9px 0 11px !important;
  }
}


/* =========================================================
   NEMREX ABOUT US — V8 HERO CTA
   Compact B2B quote box inside the hero
   ========================================================= */

.about-hero-cta-box{
  width:min(610px,100%);
  margin-top:22px;
  padding:13px 14px 13px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:rgba(13,31,61,.72);
  border:1px solid rgba(229,169,16,.72);
  box-shadow:0 8px 24px rgba(4,12,28,.16);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.about-hero-cta-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.about-hero-cta-copy strong{
  color:#fff;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif;
  font-size:15px;
  line-height:1.25;
  font-weight:700;
}

.about-hero-cta-copy span{
  color:rgba(255,255,255,.88);
  font-family:"Canva Sans","Open Sans",Arial,sans-serif;
  font-size:12.5px;
  line-height:1.4;
}

.about-hero-cta-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:43px;
  padding:10px 17px;
  background:#E5A910;
  color:#0D1F3D !important;
  border:1px solid #E5A910;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif !important;
  font-size:13px;
  font-weight:800;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.about-hero-cta-button span{
  transition:transform .2s ease;
}

@media (hover:hover) and (pointer:fine){
  .about-hero-cta-button:hover,
  .about-hero-cta-button:focus-visible{
    background:#fff;
    color:#0D1F3D !important;
    transform:translateY(-2px);
    box-shadow:0 7px 18px rgba(4,12,28,.18);
  }

  .about-hero-cta-button:hover span{
    transform:translateX(3px);
  }
}

@media (max-width:790px){
  .about-hero-cta-box{
    width:100%;
    margin-top:18px;
    padding:12px;
    gap:12px;
  }

  .about-hero-cta-copy span{
    font-size:12px;
  }

  .about-hero-cta-button{
    min-height:42px;
    padding:9px 13px;
    font-size:12px;
  }
}

@media (max-width:520px){
  .about-hero-cta-box{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
    margin-top:17px;
  }

  .about-hero-cta-button{
    width:100%;
  }
}


/* =========================================================
   NEMREX ABOUT US — V9
   Simple solid-gold hero CTA
   ========================================================= */

body.about-page .about-hero-cta-button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto !important;
  min-width:0 !important;
  min-height:48px;
  margin-top:22px;
  padding:12px 22px;
  background:#E5A910 !important;
  color:#0D1F3D !important;
  border:1px solid #E5A910 !important;
  border-radius:3px;
  box-shadow:none !important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif !important;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}

body.about-page .about-hero-cta-button span{
  display:inline-block;
  color:inherit;
  transition:transform .2s ease;
}

@media (hover:hover) and (pointer:fine){
  body.about-page .about-hero-cta-button:hover,
  body.about-page .about-hero-cta-button:focus-visible{
    background:#fff !important;
    color:#0D1F3D !important;
    border-color:#fff !important;
    transform:translateY(-2px);
  }

  body.about-page .about-hero-cta-button:hover span{
    transform:translateX(4px);
  }
}

@media (max-width:790px){
  body.about-page .about-hero-cta-button{
    min-height:46px;
    margin-top:18px;
    padding:11px 19px;
    font-size:13px;
  }
}

@media (max-width:520px){
  body.about-page .about-hero-cta-button{
    margin-top:17px;
    padding:11px 18px;
  }
}


/* Final hero CTA hover state */
@media (hover: hover) and (pointer: fine) {
  body.about-page .about-hero-cta-button:hover,
  body.about-page .about-hero-cta-button:focus-visible {
    background-color: #0D1F3D !important;
    color: #FFFFFF !important;
    border-color: #0D1F3D !important;
    transform: translateY(-2px);
  }

  body.about-page .about-hero-cta-button:hover span {
    transform: translateX(4px);
  }
}


body.about-page .about-hero-materials{
  display:block;
  margin-top:12px;
  color:rgba(255,255,255,.94);
  font-family:"Canva Sans","Open Sans",Arial,sans-serif;
  font-size:13.5px;
  line-height:1.55;
  font-weight:600;
  letter-spacing:.01em;
}

@media (max-width:790px){
  body.about-page .about-hero-materials{
    margin-top:10px;
    font-size:12.5px;
    line-height:1.5;
  }
}


/* =========================================================
   NEMREX ABOUT US — FINAL GET A QUOTE CTA
   Match the product-category CTA interaction exactly:
   Normal  = GOLD
   Hover / Focus / Touch = NAVY with GOLD border
   ========================================================= */
body.about-page .about-hero-cta-button{
  background:#E5A910 !important;
  color:#0D1F3D !important;
  border:1px solid #E5A910 !important;
  box-shadow:none !important;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Desktop mouse hover + keyboard focus */
@media (hover:hover) and (pointer:fine){
  body.about-page .about-hero-cta-button:hover,
  body.about-page .about-hero-cta-button:focus-visible{
    background:#0D1F3D !important;
    color:#FFFFFF !important;
    border-color:#E5A910 !important;
    transform:translateY(-2px);
    box-shadow:0 7px 18px rgba(4,12,28,.18) !important;
  }

  body.about-page .about-hero-cta-button:hover span,
  body.about-page .about-hero-cta-button:focus-visible span{
    transform:translateX(4px);
  }
}

/* Touch devices: tapping/focusing must use the same navy + gold state. */
@media (hover:none), (pointer:coarse){
  body.about-page .about-hero-cta-button:active,
  body.about-page .about-hero-cta-button:focus,
  body.about-page .about-hero-cta-button:focus-visible{
    background:#0D1F3D !important;
    color:#FFFFFF !important;
    border-color:#E5A910 !important;
    box-shadow:0 7px 18px rgba(4,12,28,.18) !important;
    transform:none;
  }

  body.about-page .about-hero-cta-button:active span,
  body.about-page .about-hero-cta-button:focus span,
  body.about-page .about-hero-cta-button:focus-visible span{
    transform:translateX(4px);
  }
}

body.about-page .about-hero-cta-button:focus-visible{
  outline:2px solid #E5A910;
  outline-offset:3px;
}


/* ============================================================
   VIEW ALL PRODUCTS — FINAL SHARED NEMREX UI
   Navbar / Footer / CTA / Floating Controls = About Us page
   Product cards remain from the approved product catalogue.
   ============================================================ */

:root{
  --navy:#0D1F3D;
  --navy2:#0A1931;
  --gold:#E5A910;
  --grey:#545454;
}

/* Products is the active navigation section on this page. */
header .links > .drop.product-active > button{
  color:var(--gold) !important;
}

/* Never show the back-to-top arrow at the top of the page.
   It stays hidden until the existing About-page scroll script adds .show. */
body > .quick-actions{
  position:fixed !important;
  right:16px !important;
  bottom:20px !important;
  top:auto !important;
  left:auto !important;
  width:auto !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:9px !important;
  z-index:1200 !important;
  transform:none !important;
}

body > .quick-actions .quick-action{
  position:static !important;
  flex:0 0 48px !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
}

body > .quick-actions .back-top{
  position:static !important;
  flex:0 0 48px !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  display:none !important;
  place-items:center !important;
}

body > .quick-actions .back-top.show{
  display:grid !important;
}

body > .quick-actions .quick-action svg{
  width:25px !important;
  height:25px !important;
}

/* Product card interaction — Nemrex gold, not green. */
.product-card{
  border:1px solid #e1e6ec;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background-color .25s ease;
}

.product-card:hover{
  border-color:var(--gold) !important;
  box-shadow:0 14px 34px rgba(13,31,61,.12) !important;
  transform:translateY(-4px) !important;
}

.product-card:focus-within{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(229,169,16,.15) !important;
}

.card-btn{
  height:36px !important;
  border-radius:8px !important;
  font-family:"Canva Sans","Open Sans",Arial,sans-serif !important;
  font-weight:800 !important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease !important;
}

.card-view{
  background:#f0f4f8 !important;
  color:var(--navy) !important;
  border:1px solid transparent !important;
}

.card-inquiry{
  background:var(--gold) !important;
  color:var(--navy) !important;
  border:1px solid var(--gold) !important;
}

.card-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 6px 16px rgba(13,31,61,.12) !important;
}

.card-view:hover{
  background:var(--navy) !important;
  color:#fff !important;
  border-color:var(--navy) !important;
}

.card-inquiry:hover{
  background:#f2bd2e !important;
  color:var(--navy) !important;
  border-color:#f2bd2e !important;
}

.product-card:active{
  transform:translateY(-1px) !important;
}

@media (hover:none),(pointer:coarse){
  .product-card:active{
    border-color:var(--gold) !important;
    box-shadow:0 0 0 3px rgba(229,169,16,.13) !important;
    transform:translateY(-1px) !important;
  }

  .card-btn:active{
    transform:scale(.98) !important;
  }
}

/* Mobile: retain the About Us navigation/footer behaviour and keep
   floating controls away from the viewport edge. */
@media (max-width:760px){
  body > .quick-actions{
    right:12px !important;
    bottom:18px !important;
    gap:8px !important;
  }

  body > .quick-actions .quick-action,
  body > .quick-actions .back-top{
    flex-basis:46px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
  }
}

@media (max-width:380px){
  body > .quick-actions{
    right:8px !important;
    bottom:16px !important;
    gap:7px !important;
  }

  body > .quick-actions .quick-action,
  body > .quick-actions .back-top{
    flex-basis:42px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
  }

  body > .quick-actions .quick-action svg{
    width:22px !important;
    height:22px !important;
  }
}

/* The CTA is intentionally the white About Us version. */
.about-cta{
  background:#fff !important;
  color:var(--navy) !important;
}

.about-cta .about-cta-button{
  background:var(--gold) !important;
  color:var(--navy) !important;
  border-color:var(--gold) !important;
}


/* Exact About Us back-to-top behaviour: hidden until scrollY > 350, then fixed at bottom-right. */
body > .quick-actions .back-top,
.quick-actions .back-top#backTop {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 20px !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  z-index: 1201 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  background: #E5A910 !important;
  color: #0D1F3D !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 18px rgba(13,31,61,.20) !important;
  font: 700 23px/1 Arial, sans-serif !important;
  cursor: pointer !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}
body > .quick-actions .back-top.show,
.quick-actions .back-top#backTop.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
body > .quick-actions .back-top:hover,
.quick-actions .back-top#backTop:focus-visible {
  background: #0D1F3D !important;
  color: #E5A910 !important;
  outline: 2px solid #E5A910 !important;
  outline-offset: 2px !important;
}
@media (max-width:760px){
  body > .quick-actions .back-top,
  .quick-actions .back-top#backTop {
    right: 12px !important;
    bottom: 18px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}
@media (max-width:380px){
  body > .quick-actions .back-top,
  .quick-actions .back-top#backTop {
    right: 8px !important;
    bottom: 16px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}


/* FINAL ALL-RANGE FLOATING CONTACT CONTROLS */
.quick-actions{
  position:fixed !important;
  right:16px !important;
  left:auto !important;
  bottom:86px !important;
  top:auto !important;
  z-index:99999 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:9px !important;
  visibility:visible !important;
  opacity:1 !important;
}
.quick-actions .quick-action{
  display:grid !important;
  place-items:center !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  border-radius:50% !important;
  visibility:visible !important;
  opacity:1 !important;
  box-sizing:border-box !important;
}
.quick-actions .quick-action.whatsapp{background:#25D366 !important;border:0 !important;}
.quick-actions .quick-action.email{background:#EA4335 !important;border:0 !important;}
.quick-actions .quick-action.google{
  display:grid !important;
  background:#fff !important;
  border:1px solid #dadce0 !important;
}
.quick-actions .quick-action.google svg{
  display:block !important;
  width:25px !important;
  height:25px !important;
  visibility:visible !important;
  opacity:1 !important;
}
.quick-actions .quick-action.whatsapp svg,
.quick-actions .quick-action.email svg{
  display:block !important;
  width:25px !important;
  height:25px !important;
  visibility:visible !important;
  opacity:1 !important;
}
@media (max-width:760px){
  .quick-actions{right:10px !important;bottom:70px !important;gap:9px !important;}
  .quick-actions .quick-action{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;max-width:44px !important;max-height:44px !important;}
  .quick-actions .quick-action svg,.quick-actions .quick-action.google svg{width:23px !important;height:23px !important;}
}


/* FINAL ALL-RANGE STRUCTURE FIXES — keep contact controls independent from Back-to-Top */
.quick-actions{
  position:fixed !important;
  right:16px !important;
  bottom:84px !important;
  left:auto !important;
  top:auto !important;
  z-index:5000 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:9px !important;
  width:auto !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.quick-actions .quick-action{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 48px !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  visibility:visible !important;
  opacity:1 !important;
}
.quick-actions .quick-action.whatsapp{background:#25D366 !important;border:0 !important}
.quick-actions .quick-action.email{background:#EA4335 !important;border:0 !important}
.quick-actions .quick-action.google{background:#fff !important;border:1px solid #dadce0 !important}
.quick-actions .quick-action svg{display:block !important;width:25px !important;height:25px !important;visibility:visible !important;opacity:1 !important}
.quick-actions .quick-action.whatsapp svg,
.quick-actions .quick-action.email svg{fill:#fff !important}
.quick-actions .quick-action.google svg{width:27px !important;height:27px !important}
.back-top{
  position:fixed !important;
  right:16px !important;
  bottom:20px !important;
  left:auto !important;
  top:auto !important;
  z-index:5001 !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#E5A910 !important;
  color:#0D1F3D !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:0 5px 18px rgba(13,31,61,.20) !important;
  font:700 23px/1 Arial,sans-serif !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(8px) !important;
}
.back-top.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
@media (hover:hover) and (pointer:fine){
 .quick-actions .quick-action:hover{transform:translateY(-2px) !important;box-shadow:0 8px 22px rgba(13,31,61,.28) !important}
 .back-top:hover{background:#0D1F3D !important;color:#E5A910 !important;outline:2px solid #E5A910 !important;outline-offset:2px}
}
@media (max-width:760px){
 .quick-actions{right:10px !important;bottom:70px !important;gap:8px !important}
 .quick-actions .quick-action{flex-basis:44px !important;width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;max-width:44px !important;max-height:44px !important}
 .quick-actions .quick-action svg{width:23px !important;height:23px !important}
 .back-top{right:10px !important;bottom:14px !important;width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important}
}
@media (max-width:380px){
 .quick-actions{right:8px !important;bottom:66px !important;gap:7px !important}
 .quick-actions .quick-action{flex-basis:42px !important;width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important}
 .quick-actions .quick-action svg{width:22px !important;height:22px !important}
 .back-top{right:8px !important;bottom:12px !important;width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important}
}

/* Product cards: prevent any missing local asset from showing as a broken image */
.product-media img{background:#f4f6f8}
.product-media img[src^="data:image"]{object-fit:cover}


/* ============================================================
   NEMREX FINAL UI FIXES
   - Static hero image: no Ken Burns / zoom / motion.
   - No hero eyebrow text.
   - No hero action boxes.
   - Three contact icons are permanently independent.
   - Back-to-top is a separate fixed control and can never
     replace/reflow the Google Review button.
   ============================================================ */
.hero .hero-media img,
.hero .hero-media video {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
.hero .hero-actions,
.hero .eyebrow {
  display: none !important;
}

/* Contact controls: WhatsApp / Email / Google Review only. */
.quick-actions {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 84px !important;
  top: auto !important;
  z-index: 2147483000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: 48px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}
.quick-actions .quick-action {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.quick-actions .quick-action.whatsapp {
  background: #25D366 !important;
  border: 0 !important;
}
.quick-actions .quick-action.email {
  background: #EA4335 !important;
  border: 0 !important;
}
.quick-actions .quick-action.google {
  background: #fff !important;
  border: 1px solid #dadce0 !important;
}
.quick-actions .quick-action svg,
.quick-actions .quick-action.google svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.quick-actions .quick-action.whatsapp svg,
.quick-actions .quick-action.email svg {
  fill: #fff !important;
}

/* Back-to-top: completely separate from .quick-actions. */
body > #backTop,
#backTop {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 20px !important;
  top: auto !important;
  z-index: 2147483001 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #E5A910 !important;
  color: #0D1F3D !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 5px 18px rgba(13,31,61,.20) !important;
  font: 700 23px/1 Arial, sans-serif !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}
body > #backTop.show,
#backTop.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
@media (hover:hover) and (pointer:fine) {
  .quick-actions .quick-action:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(13,31,61,.28) !important;
  }
  body > #backTop:hover,
  #backTop:hover {
    background: #0D1F3D !important;
    color: #E5A910 !important;
    outline: 2px solid #E5A910 !important;
    outline-offset: 2px;
  }
}
@media (max-width:760px) {
  .quick-actions {
    right: 10px !important;
    bottom: 70px !important;
    gap: 8px !important;
    width: 44px !important;
  }
  .quick-actions .quick-action {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
  .quick-actions .quick-action svg,
  .quick-actions .quick-action.google svg {
    width: 23px !important;
    height: 23px !important;
  }
  body > #backTop,
  #backTop {
    right: 10px !important;
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }
}
@media (max-width:380px) {
  .quick-actions {
    right: 8px !important;
    bottom: 66px !important;
    gap: 7px !important;
    width: 42px !important;
  }
  .quick-actions .quick-action {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }
  body > #backTop,
  #backTop {
    right: 8px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
}


/* ==========================================================
   NEMREX FINAL FLOATING BUTTON FIX
   3 permanent contact buttons + 1 independent back-to-top
   ========================================================== */

/* The contact group contains ONLY WhatsApp, Email and Google. */
body > .quick-actions {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 84px !important;
  top: auto !important;
  width: 48px !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

/* Every contact button is an independent flex item. */
body > .quick-actions > .quick-action {
  position: relative !important;
  display: grid !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  place-items: center !important;
  border-radius: 50% !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Never hide the Google button. */
body > .quick-actions > .quick-action.google {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  flex: 0 0 48px !important;
  background: #fff !important;
  border: 1px solid #dadce0 !important;
}

body > .quick-actions > .quick-action.whatsapp {
  background: #25D366 !important;
  border: 0 !important;
}

body > .quick-actions > .quick-action.email {
  background: #EA4335 !important;
  border: 0 !important;
}

body > .quick-actions > .quick-action svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Back-to-top is NOT inside the contact group. */
body > #backTop {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 20px !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #E5A910 !important;
  color: #0D1F3D !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 5px 18px rgba(13,31,61,.20) !important;
  font: 700 23px/1 Arial, sans-serif !important;
  z-index: 2147483001 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}

/* Scrolling: arrow becomes a FOURTH button. */
body > #backTop.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

@media (max-width: 760px) {
  body > .quick-actions {
    right: 10px !important;
    bottom: 70px !important;
    width: 44px !important;
    gap: 8px !important;
  }

  body > .quick-actions > .quick-action,
  body > .quick-actions > .quick-action.google {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

  body > .quick-actions > .quick-action svg {
    width: 23px !important;
    height: 23px !important;
  }

  body > #backTop {
    right: 10px !important;
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }
}

@media (max-width: 380px) {
  body > .quick-actions {
    right: 8px !important;
    bottom: 66px !important;
    width: 42px !important;
    gap: 7px !important;
  }

  body > .quick-actions > .quick-action,
  body > .quick-actions > .quick-action.google {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  body > #backTop {
    right: 8px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
}


/* Final refinement: compact catalogue cards, persistent controls and a proper filter panel */
.product-card{display:flex!important;flex-direction:column!important;min-width:0}
.product-media{flex:0 0 auto}
.product-card-body{flex:1 1 auto;min-height:0!important;padding:11px 12px 12px!important;gap:7px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
.product-card h3{margin:0!important;min-height:0!important;line-height:1.3!important}
.card-actions{margin-top:auto!important;padding-top:9px!important}
.card-category{line-height:1.25!important;margin:0!important}
.card-subcategory{line-height:1.25!important}
.catalog-tools{gap:10px!important}
.catalog-tools .search{min-width:0;flex:1 1 260px}
.catalog-filter-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 17px;border:1px solid #dce2eb;border-radius:9px;background:#fff;color:var(--navy);font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(13,31,61,.04)}
.catalog-filter-toggle:hover,.catalog-filter-toggle[aria-expanded="true"]{border-color:var(--gold);background:#fffaf0}
.catalog-filter-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.catalog-tools.is-sticky{position:sticky!important;top:82px!important;z-index:950!important;background:rgba(255,255,255,.98)!important;backdrop-filter:blur(12px);border-bottom:1px solid #e9edf2;box-shadow:0 8px 18px rgba(13,31,61,.07);padding:10px 0!important}
.catalog-tools.is-sticky .search input{height:46px}
.filter-drawer-backdrop{position:fixed;inset:0;z-index:2998;background:rgba(8,19,37,.46);display:none}
.filter-drawer-backdrop.open{display:block}
.filter-drawer{position:fixed;z-index:2999;right:0;top:0;bottom:0;width:min(420px,94vw);background:#fff;box-shadow:-18px 0 50px rgba(13,31,61,.18);padding:24px;overflow:auto;transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility .22s ease}
.filter-drawer.open{transform:translateX(0);visibility:visible}
.filter-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid #e9edf2}
.filter-drawer-head h2{font-family:"Yeseva One",Georgia,serif;font-size:27px;line-height:1.15;margin:0;color:var(--navy)}
.filter-drawer-close{width:38px;height:38px;border:1px solid #e2e7ef;border-radius:50%;background:#fff;font-size:24px;line-height:1;color:var(--navy);cursor:pointer}
.filter-field{display:block;margin-top:22px}
.filter-field label{display:block;margin-bottom:8px;font-size:12px;font-weight:800;color:#526078}
.filter-field select{width:100%;min-height:46px;border:1px solid #dce2eb;border-radius:9px;background:#fff;padding:0 12px;color:var(--navy);font:inherit;font-size:14px}
.filter-drawer-note{font-size:12px;line-height:1.55;color:#778196;margin:16px 0 0}
.filter-drawer-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:28px}
.filter-drawer-actions button{min-height:46px;border-radius:9px;font-weight:800;cursor:pointer}
.filter-reset{border:1px solid #dce2eb;background:#f4f6f9;color:var(--navy)}
.filter-apply{border:1px solid var(--gold);background:var(--gold);color:var(--navy)}
@media(max-width:900px){
 .catalog-tools.is-sticky{top:70px!important}
 .catalog-tools{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important}
 .catalog-tools .search{width:100%;min-width:0}
 .catalog-tools .category-filters,.catalog-tools .subcategory-filters{grid-column:1/-1}
 .catalog-tools.is-sticky{padding:8px 0!important}
 .catalog-tools.is-sticky .search input{height:42px}
 .catalog-filter-toggle{min-height:42px;padding:0 12px;font-size:12px}
}
@media(max-width:620px){
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .product-card-body{padding:9px!important;gap:6px!important}
 .product-card h3{font-size:12px!important;line-height:1.28!important}
 .card-actions{padding-top:7px!important;gap:4px!important}
 .card-btn{height:33px!important;font-size:10px!important}
 .catalog-tools.is-sticky{top:68px!important}
 .category-filters{gap:6px!important;padding-bottom:4px!important}
 .filter-pill{padding:7px 10px!important;font-size:10px!important}
 .subcategory-filters{padding-top:4px!important}
 .product-modal{padding:10px!important}
 .modal-panel{width:100%!important;max-width:560px!important;max-height:calc(100dvh - 20px)!important;overflow-y:auto!important;border-radius:17px!important;grid-template-columns:1fr!important}
 .modal-image-wrap{min-height:0!important;height:clamp(165px,31vh,245px)!important;max-height:none!important;padding:15px!important}
 .modal-image-wrap img{height:100%!important;max-height:none!important;object-fit:contain!important}
 .modal-content{padding:19px 18px 20px!important;display:flex!important;justify-content:flex-start!important}
 .modal-category{font-size:10px!important;margin-bottom:5px!important}
 .modal-content h2{font-size:clamp(25px,7vw,33px)!important;line-height:1.12!important;margin:0!important}
 .modal-content p{font-size:13px!important;line-height:1.6!important;margin:11px 0 15px!important;color:#5e6b80!important}
 .modal-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
 .modal-actions a{min-height:44px!important;width:100%!important}

}
@media(max-width:390px){
 .product-card-body{padding:8px!important}
 .card-btn{font-size:9px!important}
 .catalog-filter-toggle{padding:0 10px}
 .catalog-filter-toggle .filter-toggle-label{display:none}
 .modal-image-wrap{height:clamp(150px,28vh,210px)!important}
}
@media(prefers-reduced-motion:reduce){.filter-drawer{transition:none!important}}

html,body{max-width:100%!important;overflow-x:hidden!important}body{margin:0!important}body>header,body>footer,body .quick-actions,body #backTop,body .back-top,body #mobileNavOverlay{display:none!important}body>main,body>section{max-width:100%}img,video,iframe{max-width:100%}

html,body{max-width:100%!important;overflow-x:hidden!important;overflow-anchor:none!important;scroll-behavior:auto!important}body{height:auto!important;min-height:0!important}img,video,iframe{max-width:100%} .carousel-section,.gallery-section,.gallery,.carousel{max-height:none} 

.about-hero-cta-button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;min-width:0!important;min-height:48px;margin-top:22px;padding:12px 22px;background:#E5A910!important;color:#0D1F3D!important;border:1px solid #E5A910!important;border-radius:3px;box-shadow:none!important;font-family:"Canva Sans","Open Sans",Arial,sans-serif!important;font-size:13px;font-weight:800;text-decoration:none!important;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){.about-hero-cta-button:hover,.about-hero-cta-button:focus-visible{background:#0D1F3D!important;color:#fff!important;border-color:#E5A910!important;transform:translateY(-2px);box-shadow:0 7px 18px rgba(4,12,28,.18)!important}.about-hero-cta-button:hover span,.about-hero-cta-button:focus-visible span{transform:translateX(4px)}}
@media(hover:none),(pointer:coarse){.about-hero-cta-button:active,.about-hero-cta-button:focus,.about-hero-cta-button:focus-visible{background:#0D1F3D!important;color:#fff!important;border-color:#E5A910!important;box-shadow:0 7px 18px rgba(4,12,28,.18)!important;transform:none}.about-hero-cta-button:active span,.about-hero-cta-button:focus span,.about-hero-cta-button:focus-visible span{transform:translateX(4px)}}
.about-hero-cta-button:focus-visible{outline:2px solid #E5A910;outline-offset:3px}
@media(max-width:790px){.about-hero-cta-button{min-height:46px;margin-top:18px;padding:11px 19px;font-size:13px}}
@media(max-width:520px){.about-hero-cta-button{margin-top:17px;padding:11px 18px}}


.hero{height:470px!important;min-height:470px!important;max-height:470px!important}
@media(max-width:1100px){.hero{height:410px!important;min-height:410px!important;max-height:410px!important}}
@media(max-width:520px){.hero{height:400px!important;min-height:400px!important;max-height:400px!important}}


/* Scoped to the View All Range page only. Keep the original hero image and theme. */
.hero { min-height:470px !important; height:470px !important; }
.hero-inner { padding:32px 0 38px !important; }
.hero-copy { max-width:700px !important; }
.hero h1 { max-width:700px !important; font-size:clamp(38px,4.6vw,58px) !important; line-height:1.08 !important; margin:0 !important; }
.hero p { max-width:640px !important; margin:14px 0 18px !important; font-size:15.5px !important; line-height:1.55 !important; }
.about-hero-cta-button { min-height:42px !important; padding:9px 16px !important; margin:0 !important; }
/* Hide only this embedded page's duplicate scrollbar; scrolling remains enabled. */
html, body { scrollbar-width:none !important; -ms-overflow-style:none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; }
@media (max-width:760px) {
  .hero { min-height:390px !important; height:auto !important; }
  .hero-inner { min-height:390px !important; padding:28px 0 32px !important; }
  .hero h1 { font-size:clamp(34px,8vw,46px) !important; }
  .hero p { font-size:14px !important; line-height:1.5 !important; margin:12px 0 16px !important; }
}


/* Remove the extra intro copy directly below the hero; keep the catalogue toolbar. */
.catalog-intro{display:none!important}
.all-products-section{padding-top:0!important}
.all-products-section > .container{width:90%;max-width:1400px;margin:0 auto}
.all-products-section .catalog-tools{
  position:sticky!important;top:0!important;z-index:1200!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;align-items:center!important;
  margin:0!important;padding:10px 0 8px!important;
  background:rgba(255,255,255,.97)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid #e8edf3!important;
  box-shadow:0 7px 18px rgba(13,31,61,.08)!important;
}
/* Keep only one clear row of category choices in the toolbar.
   Product-type/subcategory choices remain available inside the Filters drawer. */
.all-products-section .subcategory-filters{display:none!important}
.all-products-section .category-filters{
  grid-column:1/-1!important;display:flex!important;justify-content:flex-start!important;
  min-width:0!important;width:100%!important;overflow-x:auto!important;
  flex-wrap:nowrap!important;white-space:nowrap!important;
  padding:2px 2px 5px!important;margin:0!important;
}
.all-products-section .filter-pill{flex:0 0 auto!important}
.all-products-section .search{min-width:0!important;width:100%!important}
.all-products-section .search input{width:100%!important;min-width:0!important}
.all-products-section .catalog-filter-toggle{min-width:124px!important;white-space:nowrap!important}
.all-products-section .product-grid{scroll-margin-top:180px}
@media(min-width:901px){
 .all-products-section .catalog-tools{grid-template-columns:minmax(280px,1fr) auto!important}
 .all-products-section .category-filters{grid-row:2}
}
@media(max-width:900px){
 .all-products-section .container{width:94%!important}
 .all-products-section .catalog-tools{top:0!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:8px 0 6px!important}
 .all-products-section .search input{height:44px!important}
 .all-products-section .catalog-filter-toggle{min-width:104px!important;padding:0 12px!important}
 .all-products-section .category-filters{grid-column:1/-1!important}
}
@media(max-width:620px){
 .all-products-section .catalog-tools{grid-template-columns:minmax(0,1fr) auto!important}
 .all-products-section .catalog-filter-toggle{min-width:88px!important}
 .all-products-section .filter-pill{font-size:10px!important;padding:8px 10px!important}
 .all-products-section .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
}


/* Important: product cards use display:flex!important for layout.
   The hidden state must also be important or category filtering won't hide cards. */
.product-card[hidden] {
  display: none !important;
}


/* Home gets the larger hero; all secondary-page heroes share a consistent baseline. */
body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .hero,
body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .home-hero {
  min-height: 520px !important;
}
body.about-page .about-hero,
body.about-page .hero,
body.contact-page .contact-hero,
body.product-category-page .product-hero,
body.industries-page .industries-hero,
body.industries-page .industry-hero,
body.industries-page .hero,
body.technical-page-body .technical-hero,
body.technical-page-body .hero,
body.materials-page .materials-hero,
body.material-page .material-hero,
body.material-page .materials-hero,
body.home-page.about-page .materials-hero {
  min-height: 390px !important;
  height: auto !important;
}
@media (max-width: 790px) {
  body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .hero,
  body.home-page:not(.about-page):not(.industries-page):not(.technical-page-body) .home-hero {
    min-height: 455px !important;
  }
  body.about-page .about-hero,
  body.about-page .hero,
  body.contact-page .contact-hero,
  body.product-category-page .product-hero,
  body.industries-page .industries-hero,
  body.industries-page .industry-hero,
  body.industries-page .hero,
  body.technical-page-body .technical-hero,
  body.technical-page-body .hero,
  body.materials-page .materials-hero,
  body.material-page .material-hero,
  body.material-page .materials-hero,
  body.home-page.about-page .materials-hero {
    min-height: 340px !important;
    height: auto !important;
  }
}