:root{
  --red:#be1e27;
  --red-dark:#7a0f17;
  --red-light:#e2545c;
  --dark:#191414;
  --dark-2:#241414;
  --ink:#201c1c;
  --muted:#6b6363;
  --bg:#f7f5f5;
  --line:#e8e2e2;
  --white:#ffffff;
  --silver:#9aa0a6;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* Header */
header{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:3px solid var(--red);
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
  max-width:1180px; margin:0 auto;
  gap:24px;
}
.brand{display:flex; align-items:center;}
.brand img{height:46px; width:auto;}

nav ul{display:flex; gap:30px;}
nav a{
  color:var(--ink);
  font-size:14.5px;
  font-weight:600;
  transition:color .2s;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
nav a:hover, nav a.active{color:var(--red); border-bottom-color:var(--red);}

.nav-cta{
  background:var(--red);
  color:var(--white) !important;
  padding:10px 20px;
  border-radius:4px;
  font-weight:700 !important;
  font-size:13.5px !important;
  border:none !important;
}
.nav-cta:hover{background:var(--red-dark); border:none !important;}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{width:26px; height:2px; background:var(--ink); border-radius:2px;}

/* Page hero (secondary pages) */
.page-hero{
  background:
    linear-gradient(120deg, rgba(25,20,20,0.94), rgba(122,15,23,0.90)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 22px);
  color:var(--white);
  padding:64px 24px 56px;
  text-align:center;
}
.page-hero .eyebrow{color:var(--red-light);}
.page-hero h1{font-size:34px; font-weight:800; margin-bottom:12px;}
.page-hero p{color:#e8d6d6; max-width:640px; margin:0 auto; font-size:15.5px;}
.breadcrumb{font-size:13px; color:#e8d6d6; margin-bottom:14px;}
.breadcrumb a{color:var(--red-light); font-weight:600;}

/* Hero (home) */
.hero{
  background:
    linear-gradient(115deg, rgba(25,20,20,0.95), rgba(122,15,23,0.90)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 22px);
  color:var(--white);
  padding:100px 24px 92px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; right:-120px; bottom:-160px;
  width:420px; height:420px; border-radius:50%;
  border:60px solid rgba(226,84,92,0.12);
}
.hero-inner{max-width:1180px; margin:0 auto; position:relative; z-index:1;}
.hero-flex{display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center;}
.hero-collage{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hero-collage a{display:block; border-radius:10px; overflow:hidden; aspect-ratio:1/1; border:1px solid rgba(255,255,255,0.15);}
.hero-collage img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.hero-collage a:hover img{transform:scale(1.06);}
.hero-collage .tall{grid-row:span 2; aspect-ratio:auto;}
.eyebrow{
  display:inline-block; color:var(--red-light);
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; margin-bottom:18px;
}
.hero h1{font-size:42px; font-weight:800; max-width:680px; margin-bottom:20px; letter-spacing:-0.5px;}
.hero p{font-size:17px; color:#e8d6d6; max-width:560px; margin-bottom:34px;}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:14px 30px; border-radius:4px;
  font-weight:700; font-size:14.5px; letter-spacing:0.3px;
  transition:transform .15s, box-shadow .15s;
}
.btn-primary{background:var(--red); color:var(--white);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(190,30,39,0.4);}
.btn-outline{border:1.5px solid rgba(255,255,255,0.45); color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,0.1); transform:translateY(-2px);}

.stats-strip{background:var(--white); border-bottom:1px solid var(--line);}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding:34px 24px; max-width:1180px; margin:0 auto;
}
.stat{text-align:center;}
.stat strong{display:block; font-size:26px; color:var(--red); font-weight:800;}
.stat span{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px;}

/* Section generic */
section{padding:84px 24px;}
.section-head{text-align:center; max-width:660px; margin:0 auto 52px;}
.section-tag{
  color:var(--red); font-weight:700; font-size:12.5px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:12px; display:block;
}
.section-head h2{font-size:31px; color:var(--dark); font-weight:800; letter-spacing:-0.4px; margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:15.5px;}

/* About */
.about{background:var(--white);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; max-width:1180px; margin:0 auto;}
.about-visual{
  background:linear-gradient(150deg, var(--dark), var(--red-dark));
  border-radius:12px; min-height:340px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:30px;
}
.about-visual img{width:78%; filter:drop-shadow(0 10px 24px rgba(0,0,0,0.35));}
.about-copy .section-tag{margin-bottom:10px;}
.about-copy h2{font-size:29px; color:var(--dark); margin-bottom:18px; font-weight:800;}
.about-copy p{color:var(--muted); margin-bottom:16px; font-size:15.5px;}
.checklist li{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; font-size:15px; color:var(--ink);}
.checklist li svg{flex-shrink:0; margin-top:2px;}

blockquote.quote{
  border-left:4px solid var(--red);
  padding:16px 22px; margin:22px 0; background:var(--bg);
  font-style:italic; color:var(--ink); font-size:15px; border-radius:0 6px 6px 0;
}
blockquote.quote cite{display:block; margin-top:10px; font-style:normal; font-weight:700; font-size:13.5px; color:var(--red);}

/* Vision/Mission */
.vm{background:var(--bg);}
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1180px; margin:0 auto;}
.vm-card{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:32px;}
.vm-card h3{color:var(--red); font-size:19px; margin-bottom:14px; font-weight:800;}
.vm-card p{color:var(--muted); font-size:15px;}

/* Services / product grid */
.services{background:var(--white);}
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1180px; margin:0 auto;}
.service-card{
  background:var(--white); border-radius:10px; padding:32px 26px;
  border:1px solid var(--line); transition:transform .2s, box-shadow .2s, border-color .2s;
}
.service-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(25,20,20,0.10); border-color:transparent;}
.service-icon{
  width:50px; height:50px; border-radius:10px;
  background:linear-gradient(135deg, var(--red), var(--red-dark));
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.service-card h3{font-size:17.5px; color:var(--dark); margin-bottom:10px; font-weight:700;}
.service-card p{color:var(--muted); font-size:14.5px;}

/* Why us */
.why{background:linear-gradient(180deg, var(--dark), var(--dark-2)); color:var(--white);}
.why .section-head p{color:#cfc0c0;}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1180px; margin:0 auto;}
.why-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:26px 22px; text-align:center;}
.why-card .num{font-size:13px; color:var(--red-light); font-weight:800; letter-spacing:1px; margin-bottom:14px;}
.why-card h4{font-size:15.5px; margin-bottom:10px; font-weight:700;}
.why-card p{font-size:13.5px; color:#cfc0c0;}

/* Brands */
.brands{background:var(--white);}
.brands-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1180px; margin:0 auto;}
.brand-card{
  border:1px solid var(--line); border-radius:10px; padding:26px;
  text-align:center; background:var(--bg); transition:box-shadow .2s, transform .2s;
}
.brand-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(25,20,20,0.08);}
.brand-card strong{display:block; font-size:19px; color:var(--red); font-weight:800; margin-bottom:8px;}
.brand-card p{font-size:13.5px; color:var(--muted);}

/* Industries */
.industries{background:var(--bg); text-align:center;}
.tag-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:860px; margin:0 auto;}
.tag-pill{background:var(--white); border:1px solid var(--line); color:var(--dark); font-size:14px; font-weight:600; padding:12px 22px; border-radius:30px;}

/* Category quick nav (products page) */
.cat-nav{
  position:sticky; top:73px; z-index:90;
  background:var(--white); border-bottom:1px solid var(--line);
  padding:14px 24px; overflow-x:auto; white-space:nowrap;
}
.cat-nav-inner{max-width:1180px; margin:0 auto; display:flex; gap:10px;}
.cat-pill{
  display:inline-block; padding:9px 18px; border-radius:30px;
  border:1.5px solid var(--line); font-size:13.5px; font-weight:700;
  color:var(--ink); flex-shrink:0; transition:all .15s;
}
.cat-pill:hover, .cat-pill.active{background:var(--red); border-color:var(--red); color:var(--white);}

/* Product category blocks */
.product-section{padding:64px 24px; border-bottom:1px solid var(--line);}
.product-section:nth-child(even){background:var(--white);}
.product-section:nth-child(odd){background:var(--bg);}
.product-section-head{max-width:1180px; margin:0 auto 32px;}
.product-section-head .cat-num{
  display:inline-block; color:var(--white); background:var(--red);
  font-size:12px; font-weight:800; padding:4px 10px; border-radius:4px; margin-bottom:10px;
}
.product-section-head h2{font-size:26px; color:var(--dark); font-weight:800; margin-bottom:8px;}
.product-section-head p{color:var(--muted); font-size:14.5px; max-width:700px;}

.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:1180px; margin:0 auto;
}
.product-item{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:20px 22px; transition:box-shadow .2s, transform .2s;
}
.product-item:hover{box-shadow:0 10px 22px rgba(25,20,20,0.08); transform:translateY(-3px);}
.product-item h4{font-size:15px; color:var(--dark); font-weight:700; margin-bottom:6px;}
.product-item p{font-size:13.5px; color:var(--muted);}

/* Spec table style products (pumps, hydraulic) */
.spec-block{
  max-width:1180px; margin:0 auto 20px; background:var(--white);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.spec-block-head{
  background:var(--dark); color:var(--white);
  padding:14px 22px; font-weight:700; font-size:15px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.spec-block-head span.code{
  background:var(--red); font-size:12px; font-weight:800;
  padding:4px 10px; border-radius:4px; letter-spacing:0.5px;
}
.spec-block-body{padding:18px 22px; color:var(--muted); font-size:14px;}
.spec-table{width:100%; border-collapse:collapse; margin-top:8px; font-size:13px;}
.spec-table th, .spec-table td{border:1px solid var(--line); padding:8px 10px; text-align:left;}
.spec-table th{background:var(--bg); color:var(--dark); font-weight:700;}

.hose-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:1180px; margin:0 auto;}

.feature-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.feature-chip{
  background:var(--bg); border:1px solid var(--line); color:var(--dark);
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:20px;
}

/* Contact */
.contact{background:var(--bg);}
.contact-locations{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:1180px; margin:0 auto 24px;
}
.location-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.location-head{
  background:linear-gradient(120deg, var(--dark), var(--red-dark));
  color:var(--white); padding:18px 24px; font-weight:800; font-size:17px;
}
.location-body{padding:22px 24px;}
.contact-item{display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:14.5px;}
.contact-item:last-child{margin-bottom:0;}
.contact-item .ic{
  width:36px; height:36px; border-radius:8px; background:var(--bg);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-item .ic svg path, .contact-item .ic svg circle, .contact-item .ic svg line{stroke:var(--red);}

.contact-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  max-width:1180px; margin:0 auto; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 50px rgba(25,20,20,0.10);
}
.contact-info{background:linear-gradient(150deg, var(--dark), var(--red-dark)); color:var(--white); padding:44px 40px;}
.contact-info h3{font-size:22px; margin-bottom:14px; font-weight:800;}
.contact-info p{color:#e8d6d6; font-size:14.5px; margin-bottom:26px;}
.contact-info .contact-item .ic{background:rgba(255,255,255,0.12); border:none;}
.contact-info .contact-item .ic svg path, .contact-info .contact-item .ic svg circle{stroke:var(--white);}
.contact-form{background:var(--white); padding:44px 40px;}
.contact-form h3{color:var(--dark); font-size:19px; margin-bottom:20px; font-weight:800;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-group{margin-bottom:16px;}
label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600;}
input, textarea, select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px;
  font-size:14px; font-family:inherit; color:var(--ink); background:var(--bg);
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--red-light); outline-offset:0;}
textarea{resize:vertical; min-height:100px;}
.contact-form .btn-primary{width:100%; border:none; cursor:pointer; font-size:15px; padding:14px;}

/* Footer */
footer{background:#0d0a0a; color:#a99b9b; padding:48px 24px 24px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; max-width:1180px; margin:0 auto 32px;}
.footer-brand{margin-bottom:16px;}
.footer-brand img{height:44px;}
footer p{font-size:13.5px; line-height:1.7;}
footer h5{color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px;}
footer ul li{margin-bottom:10px; font-size:13.5px;}
footer ul a:hover{color:var(--red-light);}
.footer-bottom{
  max-width:1180px; margin:0 auto; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:12.5px; text-align:center; color:#6b5f5f;
}

/* Product photo cards (category pages, no codes/inventory tables) */
.category-block{max-width:1180px; margin:0 auto 64px;}
.category-banner{
  display:grid; grid-template-columns:340px 1fr; gap:0;
  border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:var(--white); margin-bottom:26px;
}
.category-banner img{width:100%; height:100%; object-fit:cover; min-height:220px;}
.category-banner-copy{padding:30px 32px; display:flex; flex-direction:column; justify-content:center;}
.category-banner-copy .cat-num{align-self:flex-start;}
.category-banner-copy h2{font-size:25px; color:var(--dark); font-weight:800; margin:10px 0 10px;}
.category-banner-copy p{color:var(--muted); font-size:14.5px;}

.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.photo-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; transition:transform .2s, box-shadow .2s;
}
.photo-card:hover{transform:translateY(-5px); box-shadow:0 14px 28px rgba(25,20,20,0.10);}
.photo-card .photo-wrap{
  width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.photo-card .photo-wrap img{width:100%; height:100%; object-fit:cover;}
.photo-card-body{padding:18px 20px;}
.photo-card-body h4{font-size:15.5px; color:var(--dark); font-weight:700; margin-bottom:6px;}
.photo-card-body p{font-size:13.5px; color:var(--muted);}

.brand-logo-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:26px; text-align:center; transition:box-shadow .2s, transform .2s;
}
.brand-logo-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(25,20,20,0.08);}
.brand-logo-card img{max-height:56px; width:auto; margin:0 auto 16px; object-fit:contain;}
.brand-logo-card p{font-size:13.5px; color:var(--muted);}
.brand-logo-card.text-only strong{display:block; font-size:20px; color:var(--red); font-weight:800; margin-bottom:10px;}

/* Teasers (home page summaries linking to full pages) */
.teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1180px; margin:0 auto;}
.teaser-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:28px 24px; transition:transform .2s, box-shadow .2s;
}
.teaser-card:hover{transform:translateY(-5px); box-shadow:0 14px 28px rgba(25,20,20,0.08);}
.teaser-card .service-icon{margin-bottom:16px;}
.teaser-card h3{font-size:16.5px; color:var(--dark); font-weight:700; margin-bottom:8px;}
.teaser-card p{color:var(--muted); font-size:14px; margin-bottom:14px;}
.link-arrow{color:var(--red); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:6px;}
.link-arrow:hover{color:var(--red-dark);}

.section-cta{text-align:center; margin-top:40px;}

.brand-strip{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  max-width:1180px; margin:0 auto;
}
.brand-chip{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:16px 26px; font-weight:800; color:var(--red); font-size:16px;
  min-width:140px; text-align:center;
}

@media (max-width:900px){
  .teaser-grid, .photo-grid{grid-template-columns:1fr;}
  .category-banner{grid-template-columns:1fr;}
  .category-banner img{min-height:180px;}
  .hero-flex{grid-template-columns:1fr;}
  .hero-collage{margin-top:28px;}
  nav{display:none;}
  .nav-toggle{display:flex;}
  .hero h1, .page-hero h1{font-size:30px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid, .services-grid, .why-grid, .vm-grid, .brands-grid,
  .product-grid, .hose-grid, .contact-wrap, .contact-locations{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .cat-nav{top:0;}
}