/* =========================================================
   ACTIVE HYDRAULICS — HYDRAULIC OIL PAGES
   Uses the site's shared global.css design system.
   ========================================================= */

.oil-hero{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.oil-hero:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,20,32,.96) 0%,rgba(3,20,32,.84) 52%,rgba(3,20,32,.38) 100%),
    url('../assets/hero-hoses.png') center/cover;
  opacity:.95;
}
.oil-hero .wrap{position:relative;z-index:1}
.oil-hero-inner{padding:95px 0 88px;max-width:900px}
.oil-hero h1{
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(48px,6vw,78px);
  line-height:1;
  letter-spacing:-.05em;
  margin:0 0 22px;
  max-width:900px;
}
.oil-hero h1 span{color:var(--blue2)}
.oil-hero-copy{font-size:19px;color:#d8e8f0;max-width:760px}
.oil-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.oil-trust{
  background:linear-gradient(180deg,#061d2d 0%,#071f31 100%);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.oil-trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.oil-trust-item{
  min-height:118px;padding:22px 25px;display:flex;align-items:center;gap:15px;
  border-right:1px solid rgba(255,255,255,.12)
}
.oil-trust-item:last-child{border-right:0}
.oil-trust-icon{
  width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(54,181,255,.55);
  border-radius:12px;display:grid;place-items:center;color:var(--blue2);
  background:rgba(54,181,255,.06)
}
.oil-trust-item strong{display:block;color:#fff;font-size:15px}
.oil-trust-item span{display:block;color:#a9c0cf;font-size:12px;margin-top:4px}

.oil-section{padding:90px 0}
.oil-section.pale{background:#f4f8fa}
.oil-section.dark{background:var(--navy);color:#fff}
.oil-section.dark .section-head p{color:#b7d0df}

.oil-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
.oil-product-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 25px rgba(5,35,55,.05);display:flex;flex-direction:column
}
.oil-product-image{
  min-height:210px;background:linear-gradient(135deg,#eaf1f5,#fff);
  display:grid;place-items:center;text-align:center;color:#587083;font-weight:900;
  border-bottom:1px solid var(--line);padding:25px
}
.oil-product-body{padding:26px}
.oil-product-body h3{font-family:Manrope;font-size:28px;margin:8px 0}
.oil-product-body p{color:var(--muted)}
.oil-price{font-family:Manrope;font-size:24px;font-weight:800;margin:18px 0}
.oil-status{display:inline-flex;width:max-content;background:#eaf8f1;color:#17663b;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}

.oil-split{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.oil-feature-card{
  background:#102f45;color:#fff;border:1px solid #31526a;border-radius:14px;padding:32px
}
.oil-feature-card h3{font-family:Manrope;font-size:27px;margin-bottom:14px}
.oil-feature-card p{color:#b7d0df}
.oil-check-banner{
  background:linear-gradient(100deg,#0a9de6,#0a8ed4);color:#fff;border-radius:8px;
  padding:36px 40px;display:flex;justify-content:space-between;align-items:center;gap:25px
}
.oil-check-banner h2{font-family:Manrope;font-size:34px;margin:0 0 8px}
.oil-check-banner p{margin:0;color:#e1f4ff}

.oil-application-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:35px}
.oil-application{
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:23px;font-weight:800;
  box-shadow:0 8px 25px rgba(5,35,55,.04)
}

.oil-notice{
  border-left:3px solid var(--blue);background:#eef8fd;padding:20px 22px;border-radius:7px;
  color:#31566c
}

.oil-quote-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}
.oil-form{
  background:#fff;color:var(--ink);border-radius:15px;padding:30px;
  display:grid;grid-template-columns:1fr 1fr;gap:17px
}
.oil-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:900}
.oil-form input,.oil-form select,.oil-form textarea{
  width:100%;border:1px solid #cad9e2;border-radius:7px;padding:13px;font:inherit;color:var(--ink);background:#fff
}
.oil-form textarea{min-height:135px;resize:vertical}
.oil-form .full{grid-column:1/-1}
.oil-form button{border:0;cursor:pointer}

.oil-breadcrumb{padding:22px 0 0;color:var(--muted);font-size:13px}
.oil-breadcrumb a{color:var(--blue);font-weight:800}

.oil-product-hero{background:#f4f8fa;padding:65px 0 75px}
.oil-product-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center}
.oil-packshot{
  min-height:430px;border-radius:16px;background:linear-gradient(135deg,#e2ebf0,#fff);
  border:1px solid var(--line);display:grid;place-items:center;text-align:center;
  color:#526b7c;font-weight:900;padding:35px
}
.oil-product-copy h1{
  font-family:Manrope;font-size:clamp(46px,5vw,70px);line-height:1;letter-spacing:-.05em;margin:12px 0 20px
}
.oil-product-copy .oil-price{font-size:30px}
.oil-spec-table{width:100%;border-collapse:collapse;margin-top:25px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.oil-spec-table th,.oil-spec-table td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line)}
.oil-spec-table th{background:#eef4f7;width:35%}
.oil-spec-table tr:last-child th,.oil-spec-table tr:last-child td{border-bottom:0}

.quick-steps{display:grid;gap:28px}
.quick-step{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;
  box-shadow:0 8px 25px rgba(5,35,55,.04)
}
.quick-step h2{font-family:Manrope;font-size:30px;margin:0 0 20px}
.quick-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.quick-option{
  border:2px solid #d7e3ea;background:#fff;border-radius:8px;padding:16px 18px;
  font-weight:800;cursor:pointer;transition:.18s
}
.quick-option:hover,.quick-option.selected{border-color:var(--blue);background:#eef8fd;transform:translateY(-1px)}
.quick-result{
  margin-top:32px;background:var(--navy);color:#fff;border-radius:14px;padding:36px
}
.quick-result h2{font-family:Manrope}
.quick-result p{color:#c6d8e3}
.quick-result strong{color:#fff}

.oil-millers-hero{
  background:var(--navy);color:#fff;padding:90px 0;position:relative;overflow:hidden
}
.oil-millers-hero:after{
  content:"";position:absolute;right:-5%;top:-30%;width:50%;height:170%;
  background:url('../assets/engineering.png') center/cover;opacity:.18
}
.oil-millers-hero .wrap{position:relative;z-index:1}
.millers-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.millers-badge{
  border:1px solid rgba(54,181,255,.4);background:rgba(54,181,255,.06);
  border-radius:14px;padding:30px
}
.millers-badge strong{display:block;color:#fff;font-size:22px;margin-bottom:8px}
.millers-badge p{color:#b7d0df;margin:0}

@media (min-width:1201px){
  .oil-hero-inner{padding-top:110px;padding-bottom:95px}
}
@media(max-width:1000px){
  .oil-trust-grid{grid-template-columns:1fr 1fr}
  .oil-trust-item:nth-child(2){border-right:0}
  .oil-product-grid,.oil-application-grid{grid-template-columns:1fr 1fr}
  .oil-split,.oil-quote-grid,.oil-product-layout,.millers-grid{grid-template-columns:1fr}
  .oil-product-layout{gap:35px}
}
@media(max-width:650px){
  .oil-trust-grid,.oil-product-grid,.oil-application-grid,.quick-options{grid-template-columns:1fr}
  .oil-trust-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .oil-section{padding:70px 0}
  .oil-hero-inner{padding:75px 0 65px}
  .oil-hero h1,.oil-product-copy h1{font-size:50px}
  .oil-check-banner{display:block;padding:28px}
  .oil-check-banner .btn{margin-top:20px}
  .oil-form{grid-template-columns:1fr}
  .oil-form .full{grid-column:auto}
  .quick-step{padding:22px}
  .quick-step h2{font-size:26px}
  .oil-packshot{min-height:300px}
}