@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
html{scroll-behavior:smooth}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;color:#1e2329;background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}

/* Top bar */
.topbar{background:#c8102e;color:#fff;font-size:13px;font-weight:500}
.topbar-inner{display:flex;justify-content:center;gap:16px 40px;padding:9px 0;letter-spacing:0.5px;flex-wrap:wrap}

/* Header */
header{background:#fff;border-bottom:1px solid #e6e9ed;position:sticky;top:0;z-index:100}
.head-main{display:flex;align-items:center;gap:32px;padding:16px 0}
.logo-block{display:flex;flex-direction:column}
.logo{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:40px;letter-spacing:-0.5px;color:#0a2540;text-transform:uppercase;line-height:1}
.logo span{color:#c8102e}
.logo-tagline{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:3.5px;color:#8a929c;text-transform:uppercase;margin-top:3px}
.head-actions{margin-left:auto}
.head-email{font-weight:600;font-size:15px;color:#0a2540;transition:color .15s}
.head-email:hover{color:#c8102e}

/* Nav */
.mainnav{background:#0a2540}
.mainnav-inner{display:flex;flex-wrap:wrap}
.mainnav a{color:#fff;font-weight:600;font-size:15px;padding:13px 20px;transition:background .15s;letter-spacing:0.3px}
.mainnav a:hover{background:#123556}
.mainnav a.active{background:#c8102e}
.nav-toggle{display:none;background:transparent;border:none;color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0.3px;-webkit-appearance:none;appearance:none;align-items:center;gap:9px;padding:14px 0;width:100%}
.nav-toggle .burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#c8102e;border-radius:7px;font-size:16px;line-height:1;flex-shrink:0}
.nav-toggle .i-close{display:none}
.nav-toggle.open .i-open{display:none}
.nav-toggle.open .i-close{display:inline}
.nav-toggle .lbl::after{content:'Menu'}
.nav-toggle.open .lbl::after{content:'Close'}
.nav-toggle .lbl{text-transform:uppercase;letter-spacing:1px;font-size:14px}

/* Page hero */
.phero{background:linear-gradient(105deg,#0a2540 0%,#123b66 100%);color:#fff;padding:54px 0}
.phero .eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#ff8fa3;margin-bottom:14px}
.phero h1{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:-0.5px;margin-bottom:16px;max-width:820px}
.phero p{font-size:18px;color:#c5d3e5;max-width:640px}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Buttons */
.btn-red{display:inline-block;background:#c8102e;color:#fff;font-weight:700;font-size:15px;padding:15px 32px;border-radius:6px;transition:background .15s;cursor:pointer;border:none}
.btn-red:hover{background:#a30d25}
.btn-ghost{display:inline-block;background:transparent;color:#fff;font-weight:700;font-size:15px;padding:15px 32px;border-radius:6px;border:2px solid rgba(255,255,255,0.4)}
.btn-ghost:hover{border-color:#fff}

/* Section headers */
.sec{padding:52px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;border-bottom:2px solid #0a2540;padding-bottom:12px;gap:16px}
.sec-head h2{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:700;text-transform:uppercase;color:#0a2540;letter-spacing:-0.3px}
.sec-head a{color:#c8102e;font-weight:700;font-size:14px;white-space:nowrap}

/* Category tiles (home) */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cattile{position:relative;border-radius:12px;overflow:hidden;height:230px;border:1px solid #e6e9ed;background:#fff;display:flex;flex-direction:column;transition:all .18s}
.cattile:hover{box-shadow:0 10px 30px rgba(10,37,64,0.14);transform:translateY(-3px);border-color:#d5dbe2}
.cattile .ph{flex:1;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#fff;margin:10px}
.cattile .bar{background:#0a2540;padding:13px 16px}
.cattile .bar span{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;text-transform:uppercase;color:#fff;display:block;line-height:1}
.cattile .bar small{font-size:11px;color:#c5d3e5;display:block;margin-top:3px;font-weight:500}

/* Product grid */
.prodgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.prod{border:1px solid #e6e9ed;border-radius:10px;overflow:hidden;transition:all .15s;background:#fff;display:flex;flex-direction:column}
.prod:hover{box-shadow:0 8px 24px rgba(10,37,64,0.1);border-color:#d5dbe2}
.prod-img{height:170px;background:#fff;object-fit:contain;padding:10px;border-bottom:1px solid #eef0f3;width:100%}
.prod-body{padding:13px;display:flex;flex-direction:column;flex:1}
.prod-brand{font-size:11px;font-weight:700;color:#c8102e;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px}
.prod-name{font-size:13px;font-weight:500;line-height:1.35;margin-bottom:12px;flex:1}
.prod-foot{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid #eef0f3;padding-top:9px}
.prod-price{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;color:#0a2540;line-height:1.1}
.prod-price small{font-size:10px;color:#8a929c;font-weight:600;display:block;font-family:'Inter';letter-spacing:0.3px}
.prod-price .enq{font-size:11px;color:#c8102e;font-weight:700;font-family:'Inter';display:block;margin-top:3px}
.prod-gate{font-size:12px;font-weight:700;color:#c8102e;white-space:nowrap;text-decoration:none;transition:color .15s}
.prod-gate:hover{color:#a30d25;text-decoration:underline}

/* Supplier band */
.supplier{background:#0a2540;color:#fff;padding:60px 0;text-align:center}
.supplier h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;text-transform:uppercase;margin-bottom:14px}
.supplier p{font-size:17px;color:#c5d3e5;margin-bottom:24px;max-width:560px;margin-left:auto;margin-right:auto}

/* Footer */
footer{background:#061a2e;color:#8ea6bf;padding:52px 0 28px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:38px}
.foot-logo{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;color:#fff;text-transform:uppercase;margin-bottom:14px}
.foot-logo span{color:#ff5c7a}
.foot-about{font-size:14px;line-height:1.7;margin-bottom:16px;max-width:300px}
.foot-reg{font-size:12px;color:#5f7791;line-height:1.7}
.foot-col h4{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:14px}
.foot-col a{display:block;font-size:14px;margin-bottom:10px}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid #123556;padding-top:22px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Category page controls */
.catbar{background:#f6f8fb;border-bottom:1px solid #e6e9ed;padding:20px 0}
.catbar-inner{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.catpill{display:inline-block;padding:8px 16px;border:1px solid #d5dbe2;border-radius:20px;font-size:14px;font-weight:600;color:#0a2540;background:#fff;transition:all .15s}
.catpill:hover{border-color:#c8102e;color:#c8102e}
.catpill.active{background:#0a2540;color:#fff;border-color:#0a2540}
.count-note{font-size:14px;color:#8a929c;margin-left:auto}

/* Forms */
.form-card{background:#fff;border:1px solid #e6e9ed;border-radius:14px;padding:32px;box-shadow:0 8px 30px rgba(10,37,64,0.06)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:#0a2540;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid #d5dbe2;border-radius:8px;padding:12px 14px;font-size:15px;font-family:'Inter';outline:none;transition:border-color .15s;background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#0a2540}
.field textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12px;color:#8a929c;margin-top:14px;text-align:center}

@media(max-width:1100px){.prodgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){
.catgrid{grid-template-columns:repeat(2,1fr)}
.prodgrid{grid-template-columns:repeat(3,1fr)}
.foot-grid{grid-template-columns:1fr 1fr}
.nav-toggle{display:flex !important}
.mainnav-inner{display:none !important;flex-direction:column}
.mainnav-inner.open{display:flex !important}
.mainnav a{white-space:nowrap;border-top:1px solid #123556}
.phero h1{font-size:38px}
.form-row{grid-template-columns:1fr}
.hero-grid{grid-template-columns:1fr;gap:32px}
.foot-bottom{flex-direction:column;gap:8px}
}
@media(max-width:640px){
.prodgrid{grid-template-columns:repeat(2,1fr)}
.catgrid{grid-template-columns:1fr}
.wrap{padding:0 20px}
.phero h1{font-size:32px}
.hero-stats{grid-template-columns:1fr 1fr}
.topbar-inner{gap:6px 24px;font-size:12px}
.head-main{gap:16px}
.head-email{font-size:13px}
.logo{font-size:34px}
}
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:820px){
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:28px !important}
  [style*="padding:48px"]{padding:28px !important}
  [style*="padding:40px 0"]{padding:28px 0 !important}
}