/* Reliable Pumps - hand-written stylesheet. Colors/fonts live in :root so redesigns are quick. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Montserrat-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Montserrat-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Montserrat-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/OpenSans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/OpenSans-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --navy:#23326b; --navy-dark:#1d2d67; --text:#444; --grey:#e1e1e1; --line:#222;
  --head:'Montserrat','Gotham Bold',Helvetica,Arial,sans-serif;
  --body:'Open Sans',Helvetica,Arial,sans-serif;
  --side:280px; --max:1010px;
}
/* To use the customer's licensed Gotham files instead of Montserrat, add @font-face rules
   for the Gotham files and put 'Gotham' first in --head. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 16px/1.7 var(--body);color:var(--text);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);color:var(--navy);text-transform:uppercase;line-height:1.2;margin:0 0 .6em}
h2{font-size:28px;font-weight:700;letter-spacing:.02em}
h3{font-size:18px;font-weight:600}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:0}

/* sidebar */
#header{position:fixed;inset:0 auto 0 0;width:var(--side);background:#fff;box-shadow:2px 0 10px rgba(0,0,0,.25);z-index:50;padding:40px 24px;overflow-y:auto}
#header .logo img{margin:0 auto 38px;width:120px}
#nav ul{list-style:none;margin:0;padding:0}
#nav a{display:block;font:500 13px/1 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);padding:13px 0}
#nav a:hover,#nav a.active{text-decoration:none;opacity:.65}
.menu-toggle{display:none}
main{margin-left:var(--side)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}
.sec{padding:70px 30px}
.center{text-align:center}
.sub{font:500 15px/1.4 var(--head);margin:-8px 0 30px}

/* hero */
.hero{position:relative;overflow:hidden;background:#111}
.hero-page img{width:100%;height:clamp(180px,25vw,330px);object-fit:cover}
.hero-home{height:clamp(300px,56vw,520px);background:var(--grey)}
.slide{position:absolute;inset:0;background:center/cover;opacity:0;transition:opacity .9s;display:flex;align-items:center;justify-content:center}
.slide.active{opacity:1}
.slide-box{background:rgba(52,66,126,.92);color:#fff;text-align:center;padding:64px 48px;width:min(72%,600px)}
.slide-box h2{color:#fff;font-size:clamp(20px,2.6vw,32px);margin-bottom:.5em}
.slide-box p{font:500 clamp(15px,1.6vw,20px)/1.4 var(--head);margin:0}
.sl-prev,.sl-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;background:rgba(0,0,0,.25);color:#fff;font-size:34px;cursor:pointer;opacity:0;transition:opacity .2s}
.hero:hover .sl-prev,.hero:hover .sl-next,.sl-prev:focus,.sl-next:focus{opacity:1}
.sl-prev{left:0}.sl-next{right:0}
.sl-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
.sl-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.sl-dots button.on{background:#fff}

/* buttons */
.btn{display:inline-block;font:500 13px/1 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);background:transparent;border:1px solid var(--navy);padding:14px 20px;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--navy);color:#fff;text-decoration:none}

/* about / two-column rows */
.about-row,.pump-row,.contact-row,.pumps-teaser{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:calc(var(--max) + 60px);margin:0 auto}
.about-text p{margin:0 0 1.2em}
.about-img img,.card-img img{border-radius:28px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.pump-row.flip .card-img{order:2}
.pump-docs h2{font-size:22px}
.doclist{list-style:none;margin:0;padding:0}
.doclist a,.doclist .na{display:block;padding:11px 0;border-bottom:1px solid var(--line);font:500 13px/1.3 var(--head);text-transform:uppercase;letter-spacing:.03em}
.doclist .na{opacity:.45}
.pump-row{padding:40px 30px}

/* pumps teaser (home/services) */
.pumps-teaser{align-items:start}
.pt-list ul{list-style:none;margin:0;padding:0}
.pt-list a{display:block;padding:15px 0;border-bottom:2px solid var(--line);font:500 13px/1.3 var(--head);text-transform:uppercase;color:var(--navy)}
.pt-list a:hover{text-decoration:none;opacity:.65}
.pt-view h3{margin-top:6px}

/* services band */
.band{background:var(--navy-dark);padding:60px 0 70px}
.band h2.light,.band .sub.light{color:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.svc{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:1/.78;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.svc img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.svc:hover img{transform:scale(1.05)}
.svc-label{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.72);color:#fff;text-align:center;font:500 11px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;padding:11px 6px}
.svc-desc{position:absolute;inset:0;background:rgba(29,45,103,.9);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:14px;opacity:0;transition:opacity .25s}
.svc:hover{text-decoration:none}.svc:hover .svc-desc,.svc:focus .svc-desc{opacity:1}

/* gallery */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0 0 30px}
.g-grid.g-3{grid-template-columns:repeat(3,1fr)}
.g-item{display:block;overflow:hidden;border-radius:10px;aspect-ratio:4/3;background:#eee}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.g-item:hover img{transform:scale(1.06)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:center;justify-content:center;padding:30px}
.lb img{max-height:90vh;max-width:92vw;border-radius:6px}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:42px;cursor:pointer;padding:12px}
.lb .x{top:6px;right:14px}.lb .p{left:10px;top:50%}.lb .n{right:10px;top:50%}

/* news / contact */
.narrow{max-width:820px;margin:0 auto}
.news-item{border-bottom:1px solid #ddd;padding:18px 0}
.news-item h3{margin:0 0 4px}.news-item p{margin:0}
.contact-row{align-items:start}
.contact-form form{display:grid;gap:14px}
.contact-form input,.contact-form textarea{width:100%;font:400 14px var(--body);letter-spacing:.04em;padding:14px;border:1px solid #bbb;background:#fff;color:var(--text);border-radius:0}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--navy);border-color:var(--navy)}
.contact-form .btn{justify-self:start}
.hp{position:absolute!important;left:-9999px}
.form-msg{margin:0;min-height:1.5em;font-weight:600}
.social{display:flex;gap:14px;margin-bottom:28px}
.social a{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
.social a:hover{opacity:.8}.ico{width:22px;height:22px}
.contact-info p{margin:0 0 1em}

/* footer */
#footer{margin-left:var(--side);background:var(--grey);font-size:14px}
.foot-grid{max-width:calc(var(--max) + 60px);margin:0 auto;padding:60px 30px;display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:44px}
#footer h3{font-size:15px}
.foot-brand img{width:90px;margin-bottom:14px}.foot-brand p{margin:0}
.quick{list-style:none;margin:0;padding:0}.quick a{display:block;padding:4px 0;font:500 12px var(--head);text-transform:uppercase}
.foot-contact p{margin:0 0 .8em}
.foot-contact strong{display:inline-block;width:14px;color:var(--navy);text-transform:uppercase}
.socket{background:#fff;text-align:center;padding:16px 20px;font-size:12px;color:#777}

/* tablet/mobile */
@media(max-width:1000px){
  :root{--side:0px}
  #header{inset:0 0 auto 0;width:auto;height:72px;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;overflow:visible}
  #header .logo img{margin:0;width:56px}
  .menu-toggle{display:block;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
  .menu-toggle span{display:block;height:3px;background:var(--navy);margin:5px 0;transition:.2s}
  #nav{position:absolute;top:72px;left:0;right:0;background:#fff;box-shadow:0 8px 14px rgba(0,0,0,.2);display:none;padding:6px 24px 14px}
  #nav.open{display:block}
  main{margin-top:72px}
  .about-row,.pump-row,.contact-row,.pumps-teaser{grid-template-columns:1fr;gap:30px}
  .pump-row.flip .card-img{order:0}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .sec{padding:50px 20px}
  .wrap{padding:0 20px}
}
@media(max-width:560px){
  h2{font-size:23px}
  .svc-grid,.g-grid.g-3{grid-template-columns:1fr}
  .slide-box{padding:34px 20px;width:88%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}