@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root { --graphite:#17191b; --black:#0c0d0e; --ink:#1c1e20; --muted:#64686d; --line:#dcdde0; --pale:#f4f4f1; --yellow:#ffcb05; --white:#fff; --container:1200px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
.container { width:min(calc(100% - 48px),var(--container)); margin-inline:auto; }
.sr-only,.skip-link { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { z-index:999; top:10px; left:10px; width:auto; height:auto; margin:0; clip:auto; padding:10px 14px; color:var(--black); background:var(--yellow); }
.utility-bar { color:#cbcdcf; background:#101112; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.utility-content { display:flex; align-items:center; justify-content:space-between; min-height:33px; gap:16px; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(23,25,27,.97); color:white; border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(14px); }
.nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; width:230px; height:51px; align-items:center; gap:10px; overflow:hidden; line-height:0; }
.brand img { width:74px; min-width:74px; height:74px; display:block; transform:translateY(-9px); }
.brand-wordmark { color:#fff; font-family:"Plus Jakarta Sans",sans-serif; font-size:14px; font-weight:800; letter-spacing:-.04em; line-height:1.05; white-space:nowrap; }
.brand-wordmark small { display:block; margin-top:4px; color:#aeb1b3; font-family:"DM Mono",monospace; font-size:7px; font-weight:400; letter-spacing:.065em; text-transform:uppercase; }
.footer-brand img { width:100%; height:auto; display:block; }
.site-nav { display:flex; align-items:center; justify-content:flex-end; gap:17px; font-size:12px; font-weight:700; }
.site-nav>a:not(.nav-cta) { opacity:.75; transition:opacity .2s; }.site-nav>a:not(.nav-cta):hover { opacity:1; }
.nav-cta { padding:11px 15px; color:var(--black); background:var(--yellow); font-size:12px; }
.menu-toggle { display:none; border:0; background:transparent; color:white; padding:9px; }.menu-toggle span:not(.sr-only) { display:block; width:25px; height:2px; margin:5px; background:currentColor; }
.hero { min-height:690px; position:relative; display:flex; align-items:center; overflow:hidden; color:white; background:var(--graphite); }.hero-bg { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(7,8,9,.98) 0%,rgba(7,8,9,.89) 32%,rgba(7,8,9,.14) 72%),url('public/assets/hardware-showroom-hero.png'); background-size:cover; background-position:center; }.hero-content { position:relative; width:100%; padding-block:90px 58px; }.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 16px; color:#64686d; font-family:"DM Mono",monospace; font-size:10px; font-weight:500; letter-spacing:.075em; text-transform:uppercase; }.eyebrow span { display:block; width:27px; height:2px; background:var(--yellow); }.on-dark { color:#dedede; }.hero h1,h2,h3 { margin-top:0; }.hero h1 { max-width:820px; margin-bottom:22px; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(44px,6.4vw,80px); line-height:1.05; letter-spacing:-.062em; }.hero-copy { max-width:495px; margin:0 0 33px; color:#d6d7d7; font-size:17px; line-height:1.7; }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:50px; padding:13px 19px; border:1px solid transparent; font-size:12px; font-weight:800; letter-spacing:.01em; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-yellow { background:var(--yellow); color:var(--black); }.button-dark { width:100%; color:white; background:var(--graphite); }.button-outline { color:#fff; border-color:rgba(255,255,255,.45); }.button-outline:hover { background:#fff; color:var(--black); }.text-link { display:inline-flex; gap:12px; align-items:center; padding-bottom:4px; border-bottom:1px solid var(--yellow); font-size:12px; font-weight:800; }.text-link.light { color:#fff; border-color:var(--yellow); }.hero-proof { display:flex; gap:0; margin-top:86px; }.hero-proof>div { min-width:155px; padding-right:24px; margin-right:24px; border-right:1px solid rgba(255,255,255,.25); }.hero-proof>div:last-child { border:0; }.hero-proof strong,.hero-proof span { display:block; }.hero-proof strong { margin-bottom:3px; font-family:"Plus Jakarta Sans",sans-serif; font-size:26px; letter-spacing:-.055em; }.hero-proof span { color:#b7b9ba; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.section { padding-block:122px; }.intro-grid { display:grid; grid-template-columns:.78fr 1.3fr; gap:30px; }.intro-grid>div { max-width:720px; }.intro h2,.section-heading h2,.why-title-block h2,.enquiry-section h2,.visit-section h2 { margin-bottom:24px; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(34px,4vw,54px); line-height:1.13; letter-spacing:-.056em; }.intro p:not(.eyebrow) { max-width:640px; margin-bottom:25px; color:var(--muted); font-size:17px; }
.section-soft { background:var(--pale); }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:52px; margin-bottom:42px; }.section-heading h2 { margin:0; }.section-heading>p { max-width:355px; margin:0 0 7px; color:var(--muted); font-size:14px; }.category-grid { display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line); }.category-card { position:relative; display:flex; min-height:264px; flex-direction:column; padding:23px; overflow:hidden; background:white; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s,color .25s,transform .25s; }.category-card:hover { z-index:1; color:white; background:var(--graphite); transform:translateY(-4px); }.category-card.featured { color:white; background:var(--graphite); }.category-card.dark-card { color:white; background:#2b2d2f; }.category-index { font-family:"DM Mono",monospace; font-size:10px; color:#85888a; }.tool-icon { margin:auto 0 21px; color:var(--yellow); font-size:48px; line-height:.8; }.drill { width:63px; height:32px; transform:rotate(-14deg); border:9px solid currentColor; border-radius:3px 14px 14px 3px; position:relative; }.drill:before { content:""; position:absolute; top:-7px; right:-25px; width:26px; height:13px; background:currentColor; border-radius:1px 4px 4px 1px; }.drill:after { content:""; position:absolute; left:11px; top:22px; width:14px; height:22px; border:7px solid currentColor; border-top:0; transform:skew(-15deg); }.wrench { font-size:60px; transform:rotate(-40deg); }.brick { font-size:50px; }.pipe { font-size:70px; transform:rotate(180deg); }.bolt { font-size:65px; }.paint { font-size:56px; }.safety { font-size:63px; }.search { font-size:62px; }.category-card h3 { margin:0 0 6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:18px; line-height:1.25; letter-spacing:-.035em; }.category-card p { max-width:235px; margin:0; color:#777b80; font-size:12px; line-height:1.55; transition:color .25s; }.category-card:hover p,.category-card.featured p,.dark-card p { color:#c4c6c7; }.card-arrow { position:absolute; right:22px; bottom:21px; color:var(--yellow); font-size:20px; }
.why-grid { display:grid; grid-template-columns:1fr 1.08fr; gap:92px; }.why-title-block p:not(.eyebrow) { max-width:300px; color:var(--muted); }.reasons { border-top:1px solid var(--line); }.reasons article { display:grid; grid-template-columns:48px 1fr; gap:17px; padding:26px 0 25px; border-bottom:1px solid var(--line); }.reasons article>span { padding-top:4px; color:#92969a; font-family:"DM Mono",monospace; font-size:10px; }.reasons h3 { margin:0 0 5px; font-size:17px; letter-spacing:-.03em; }.reasons p { margin:0; max-width:410px; color:var(--muted); font-size:13px; }
.cordless-section { position:relative; overflow:hidden; color:white; background:#16181a; }.cordless-content { position:relative; display:grid; grid-template-columns:.58fr 1.1fr .38fr; min-height:470px; align-items:center; gap:55px; }.cordless-mark { align-self:stretch; display:grid; place-items:center; color:var(--yellow); font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(86px,12vw,170px); font-style:italic; font-weight:800; letter-spacing:-.14em; background:linear-gradient(135deg,#202326 0%,#111214 82%); }.cordless-mark span { font-size:.38em; vertical-align:top; }.cordless-content>div:nth-child(2) { padding-block:80px; }.cordless-content h2 { margin-bottom:17px; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(38px,4.2vw,60px); line-height:1; letter-spacing:-.06em; }.cordless-content p:not(.eyebrow) { max-width:525px; color:#c7c9ca; font-size:15px; }.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin:25px 0 31px; }.tag-row span { padding:5px 9px; color:#d1d3d4; border:1px solid #4e5154; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.04em; text-transform:uppercase; }.coming-soon { position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center; overflow:hidden; font-family:"Plus Jakarta Sans",sans-serif; font-size:21px; line-height:.94; text-transform:uppercase; }.coming-soon span { color:#8e9295; }.coming-soon strong { color:var(--yellow); font-size:34px; letter-spacing:-.05em; }.coming-soon i { position:absolute; top:0; bottom:0; left:0; width:1px; background:#46494b; }
.enquiry-section { background:#f7f7f5; }.enquiry-grid { display:grid; grid-template-columns:.9fr 1fr; gap:110px; }.enquiry-intro { max-width:410px; color:var(--muted); font-size:16px; }.contact-details { margin-top:45px; border-top:1px solid var(--line); }.contact-details a { display:block; padding:15px 0; border-bottom:1px solid var(--line); }.contact-details span,.contact-details strong { display:block; }.contact-details span { color:#777b80; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }.contact-details strong { margin-top:3px; font-size:15px; }.enquiry-form { padding:30px; background:#fff; box-shadow:0 13px 40px rgba(0,0,0,.06); }.enquiry-form label { display:block; margin-bottom:18px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }.enquiry-form input,.enquiry-form select,.enquiry-form textarea { display:block; width:100%; padding:11px 0 9px; color:var(--ink); outline:0; border:0; border-bottom:1px solid #cfd1d2; background:transparent; font-family:Manrope,sans-serif; font-size:13px; letter-spacing:0; text-transform:none; resize:vertical; }.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus { border-color:var(--yellow); }.enquiry-form textarea { min-height:75px; }.form-note { margin:13px 0 0; color:#74787c; font-size:10px; line-height:1.5; }
.visit-section { color:white; background:#181a1b; }.visit-grid { display:grid; grid-template-columns:.9fr 1.1fr; min-height:490px; }.visit-grid>div:first-child { padding:90px 20px 90px 0; }.visit-section h2 { margin-bottom:28px; }.visit-section address { margin-bottom:25px; color:#c3c5c6; font-size:15px; font-style:normal; line-height:1.7; }.hours { margin-bottom:28px; color:#c3c5c6; font-size:13px; }.hours strong { color:#fff; }.location-panel { position:relative; overflow:hidden; background:#242729; }.location-panel:before,.location-panel:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; }.location-panel:before { width:650px; height:650px; top:-240px; left:-90px; }.location-panel:after { width:450px; height:450px; bottom:-220px; right:-70px; }.map-line { position:absolute; z-index:1; display:block; height:1px; background:rgba(255,255,255,.17); transform:rotate(-24deg); }.map-line.one { top:36%; left:-5%; width:118%; }.map-line.two { top:68%; left:-7%; width:115%; transform:rotate(20deg); }.map-line.three { top:55%; left:12%; width:95%; transform:rotate(79deg); }.map-pin { position:absolute; z-index:3; top:44%; left:54%; display:grid; width:68px; height:68px; place-items:center; color:#0d0e0f; background:var(--yellow); border-radius:50% 50% 50% 0; font-family:"Plus Jakarta Sans",sans-serif; font-size:20px; font-weight:800; transform:rotate(-45deg); }.map-pin::first-line { transform:rotate(45deg); }.map-caption { position:absolute; z-index:2; bottom:36px; left:36px; color:#b7b9ba; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.07em; }
.site-footer { padding:48px 0 24px; color:#c9cbcd; background:#101112; }.footer-top { display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:45px; padding-bottom:42px; }.footer-brand { width:122px; }.footer-top p { max-width:510px; margin:0; color:#aeb0b1; font-size:12px; line-height:1.7; }.footer-top p strong { color:#fff; font-size:13px; }.footer-top p a { color:#dfe0df; }.footer-top p small { color:#898d90; font-size:10px; }.footer-button { white-space:nowrap; }.footer-bottom { display:flex; flex-wrap:wrap; gap:9px 24px; justify-content:flex-start; padding-top:22px; border-top:1px solid #303235; color:#898d90; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.04em; line-height:1.55; text-transform:uppercase; }.footer-bottom a { color:#dfe0df; text-decoration:underline; text-underline-offset:3px; }.whatsapp-float { position:fixed; z-index:15; right:23px; bottom:22px; display:flex; align-items:center; gap:9px; padding:11px 15px 11px 12px; color:var(--black); background:var(--yellow); box-shadow:0 8px 30px rgba(0,0,0,.22); font-size:11px; font-weight:800; }.whatsapp-float span { display:grid; place-items:center; width:23px; height:23px; color:#fff; background:#181a1b; border-radius:50%; font-size:17px; }
.company-story { border-top:1px solid var(--line); }.story-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:105px; }.story-grid h2,.brands-grid h2,.detail-intro h2,.detail-brand-grid h2 { margin:0; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(34px,4vw,54px); line-height:1.12; letter-spacing:-.055em; }.story-copy>p { max-width:600px; margin:4px 0 35px; color:var(--muted); font-size:16px; }.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.mission-grid article { padding:24px; background:#fff; border-top:3px solid var(--yellow); }.mission-grid article>span { color:#777b80; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }.mission-grid h3 { margin:13px 0 9px; font-size:17px; line-height:1.35; letter-spacing:-.035em; }.mission-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.product-category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.product-category-card { position:relative; min-height:325px; overflow:hidden; color:#fff; background:#151719; }.product-category-card:after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(9,10,11,.04) 0%,rgba(9,10,11,.85) 92%); transition:background .25s; }.product-category-card:hover:after { background:linear-gradient(180deg,rgba(9,10,11,.08) 0%,rgba(9,10,11,.94) 92%); }.product-category-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }.product-category-card:hover img { transform:scale(1.045); }.product-category-card>div { position:absolute; z-index:2; right:26px; bottom:23px; left:26px; }.product-category-card span { display:block; margin-bottom:7px; color:var(--yellow); font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }.product-category-card h3 { margin:0 0 4px; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(23px,2.5vw,32px); line-height:1; letter-spacing:-.055em; }.product-category-card p { margin:0; color:#e0e1e2; font-size:12px; }.product-category-card b { display:inline-flex; gap:8px; margin-top:12px; padding-bottom:2px; border-bottom:1px solid var(--yellow); font-size:11px; }.product-category-card b i { color:var(--yellow); font-style:normal; }.specific-product-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:18px; padding:28px; color:#fff; background:var(--graphite); }.specific-product-cta>div { display:grid; gap:3px; }.specific-product-cta strong { font-family:"Plus Jakarta Sans",sans-serif; font-size:20px; letter-spacing:-.04em; }.specific-product-cta span { max-width:640px; color:#c1c4c6; font-size:13px; }.specific-product-cta .button { flex:0 0 auto; background:var(--yellow); color:var(--black); }
.brands-section { background:#fff; }.brands-grid { display:grid; grid-template-columns:.9fr 1fr; gap:110px; margin-bottom:44px; }.brands-grid>div:nth-child(2) { max-width:525px; }.brands-grid p:not(.eyebrow) { margin:3px 0 25px; color:var(--muted); font-size:15px; }.brand-card-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }.brand-card { display:grid; min-height:120px; place-content:center; padding:12px; color:#86898c; background:#f0f1ef; border:1px solid #e4e5e2; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.055em; line-height:1.7; text-align:center; text-transform:uppercase; }.brand-card strong { color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; font-size:13px; letter-spacing:-.035em; text-transform:none; }
.services-section { border-top:1px solid #e5e5e3; }.services-heading { margin-bottom:42px; }.services-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.services-grid article { min-height:235px; padding:23px; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.services-grid span { color:#85888a; font-family:"DM Mono",monospace; font-size:9px; }.services-grid h3 { margin:48px 0 10px; font-size:16px; line-height:1.25; letter-spacing:-.035em; }.services-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.knowledge-section { background:#fff; }.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.article-grid article { display:flex; min-height:310px; flex-direction:column; padding:27px; background:#1b1d1f; color:#fff; }.article-grid article:nth-child(2) { background:#2c2f31; }.article-grid article:nth-child(3) { background:#f0f1ef; color:var(--ink); }.article-type { color:var(--yellow); font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }.article-grid article:nth-child(3) .article-type { color:#686b70; }.article-grid h3 { margin:72px 0 11px; font-family:"Plus Jakarta Sans",sans-serif; font-size:22px; line-height:1.16; letter-spacing:-.05em; }.article-grid p { margin:0; color:#c5c7c8; font-size:12px; line-height:1.65; }.article-grid article:nth-child(3) p { color:var(--muted); }.article-grid a { display:inline-flex; gap:8px; align-items:center; align-self:flex-start; margin-top:auto; padding-bottom:2px; border-bottom:1px solid var(--yellow); font-size:11px; font-weight:800; }.article-grid a span { color:var(--yellow); }.social-prompt { display:block; padding:15px 0; border-bottom:1px solid var(--line); }.social-prompt span,.social-prompt strong,.social-prompt small { display:block; }.social-prompt span { color:#777b80; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }.social-prompt strong { margin-top:3px; font-size:15px; }.social-prompt small { margin-top:3px; color:#84878b; font-size:10px; }
.back-link { padding:8px 0; border-bottom:1px solid var(--yellow); color:#fff; font-size:11px; font-weight:800; }.category-hero { color:#fff; background:#17191b; }.category-hero-grid { display:grid; grid-template-columns:.95fr 1.05fr; min-height:500px; align-items:center; gap:55px; }.category-hero-grid>div { padding-block:80px; }.category-hero h1 { margin:0 0 17px; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(44px,5.4vw,70px); line-height:1; letter-spacing:-.065em; }.category-hero p:not(.eyebrow) { max-width:515px; margin-bottom:30px; color:#c9cbcd; font-size:16px; }.category-hero img { width:100%; height:330px; object-fit:cover; }.detail-intro { display:grid; grid-template-columns:1fr .84fr; gap:75px; align-items:end; margin-bottom:42px; }.detail-intro h2 { max-width:580px; }.detail-intro>p { max-width:440px; margin:0 0 4px; color:var(--muted); font-size:14px; }.sample-product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.sample-product-grid article { position:relative; overflow:hidden; padding-bottom:25px; background:#f4f4f1; }.sample-product-grid article>span { position:absolute; z-index:2; top:14px; left:15px; display:grid; width:28px; height:28px; place-items:center; color:#fff; background:#1b1d1f; border-radius:50%; font-family:"DM Mono",monospace; font-size:9px; }.sample-thumb { height:180px; overflow:hidden; }.sample-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }.sample-product-grid article:hover img { transform:scale(1.04); }.sample-product-grid h3,.sample-product-grid p { margin-inline:21px; }.sample-product-grid h3 { margin-top:21px; margin-bottom:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:20px; letter-spacing:-.04em; }.sample-product-grid p { color:var(--muted); font-size:12px; line-height:1.55; }.detail-brand-section { padding-block:88px; }.detail-brand-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; }.detail-brand-grid>div:nth-child(2) { max-width:480px; }.detail-brand-grid p:not(.eyebrow) { margin:0 0 21px; color:var(--muted); font-size:14px; }.category-enquiry { color:#fff; background:#17191b; }.category-enquiry-inner { display:flex; min-height:300px; align-items:center; justify-content:space-between; gap:40px; }.category-enquiry h2 { margin:0 0 9px; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(31px,3.6vw,48px); line-height:1.05; letter-spacing:-.06em; }.category-enquiry p:not(.eyebrow) { margin:0; color:#c8cbcc; font-size:14px; }.category-enquiry .button { flex:0 0 auto; }
@media (max-width:900px) { .site-nav { gap:16px; }.category-grid { grid-template-columns:repeat(2,1fr); }.why-grid,.enquiry-grid { gap:55px; }.cordless-content { grid-template-columns:.58fr 1fr; }.coming-soon { display:none; }.footer-top { grid-template-columns:160px 1fr; }.footer-button { grid-column:1/-1; justify-self:start; }.location-panel { min-height:420px; }.story-grid,.brands-grid { gap:55px; }.brand-card-grid { grid-template-columns:repeat(3,1fr); }.services-grid { grid-template-columns:repeat(3,1fr); }.services-grid article:nth-child(4),.services-grid article:nth-child(5) { min-height:205px; }.category-hero-grid { gap:30px; }.category-hero img { height:260px; } }
@media (max-width:680px) { .container { width:min(calc(100% - 34px),var(--container)); }.utility-hours { display:none; }.nav-wrap { min-height:65px; }.brand { width:195px; height:45px; }.brand img { width:65px; min-width:65px; height:65px; transform:translateY(-8px); }.brand-wordmark { font-size:12px; }.menu-toggle { display:block; }.site-nav { position:absolute; top:65px; right:0; left:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px 17px 18px; background:#17191b; border-top:1px solid rgba(255,255,255,.1); }.site-nav.open { display:flex; }.site-nav>a { padding:12px 4px; }.site-nav .nav-cta { margin-top:8px; text-align:center; }.hero { min-height:690px; }.hero-bg { background-position:59% center; background-image:linear-gradient(90deg,rgba(7,8,9,.96) 0%,rgba(7,8,9,.88) 54%,rgba(7,8,9,.30) 100%),url('public/assets/hardware-showroom-hero.png'); }.hero-content { padding-block:72px 36px; }.hero h1 { font-size:45px; }.hero-copy { font-size:15px; }.hero-proof { gap:0; margin-top:64px; }.hero-proof>div { min-width:auto; flex:1; padding-right:11px; margin-right:11px; }.hero-proof strong { font-size:18px; }.hero-proof span { font-size:8px; letter-spacing:0; }.section { padding-block:78px; }.intro-grid,.why-grid,.enquiry-grid,.visit-grid { grid-template-columns:1fr; gap:28px; }.intro-grid>.eyebrow { margin-bottom:0; }.section-heading { display:block; }.section-heading>p { margin-top:18px; }.category-grid { grid-template-columns:1fr 1fr; }.category-card { min-height:230px; padding:18px; }.category-card h3 { font-size:15px; }.category-card p { font-size:10px; }.tool-icon { transform:scale(.8); transform-origin:left bottom; }.wrench,.pipe { transform:scale(.8) rotate(-40deg); }.pipe { transform:scale(.8) rotate(180deg); }.why-title-block h2 { margin-bottom:15px; }.cordless-content { grid-template-columns:1fr; gap:0; }.cordless-mark { min-height:160px; font-size:120px; }.cordless-content>div:nth-child(2) { padding-block:56px; }.enquiry-form { padding:23px; }.visit-grid { min-height:0; }.visit-grid>div:first-child { padding:72px 0 55px; }.location-panel { min-height:310px; margin-inline:calc(50% - 50vw); }.footer-top { grid-template-columns:1fr; gap:22px; }.footer-button { grid-column:auto; }.footer-bottom { flex-direction:column; gap:8px; }.whatsapp-float { right:16px; bottom:16px; }.whatsapp-float small { display:none; }.whatsapp-float { padding:11px; border-radius:50%; } }