/* Ackerman Pump — landing page theme.
   Dark navy + dark red + white. Built mobile-first; every screen keeps a call button in reach. */

:root{
  --navy:#0a1628;
  --navy-2:#0f2038;
  --navy-3:#16304f;
  --red:#a4161a;
  --red-2:#c1272d;
  --red-dk:#7d0f13;
  --white:#ffffff;
  --paper:#f4f6f9;
  --ink:#12202f;
  --ink-2:#48586b;
  --line:#dbe2ea;
  --wrap:1100px;
  --r:14px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  /* The room for the sticky bar lives on the footer, not here, so that when the bar
     slides away the space left behind is navy footer rather than a dead gray strip. */
}
img{max-width:100%;height:auto;display:block}
h1,h2{line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--white);padding:10px 14px;border-radius:8px}

/* ---------- bars ---------- */
.topbar{background:var(--navy);color:#c8d6e6;font-size:.78rem;letter-spacing:.02em}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:38px;flex-wrap:wrap}
.topbar .avail{color:#8fb4d9}

.brandbar{background:var(--white);border-bottom:3px solid var(--red);position:relative;z-index:3}
.brandbar-in{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 20px}
.logo{width:auto;max-height:52px;object-fit:contain}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:800;text-decoration:none;border-radius:12px;
  transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-call{background:var(--red);color:var(--white);box-shadow:0 6px 18px rgba(164,22,26,.32)}
.btn-call:hover{background:var(--red-2)}
.btn-sm{padding:10px 16px;font-size:1rem;white-space:nowrap}
.btn-xl{padding:20px 30px;font-size:1.35rem;letter-spacing:.01em}
.btn-block{width:100%;padding:18px;font-size:1.18rem;border-radius:14px}
.ico{font-size:1.05em;line-height:1}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy);color:var(--white);overflow:hidden}
.hero-media{
  position:absolute;inset:-6% -6% -6% -6%;z-index:-2;
  background:var(--navy-2) url('/lp/img/hero-water.jpg') center/cover no-repeat;
  animation:drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.4%,-1.6%,0)}}
@media (prefers-reduced-motion:reduce){.hero-media{animation:none}}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,22,40,.86) 0%,rgba(10,22,40,.72) 45%,rgba(10,22,40,.94) 100%);
}
.hero-in{padding:34px 20px 74px;max-width:var(--wrap);margin:0 auto}
.hero-in > *{max-width:44rem}
.eyebrow{
  display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:999px;
  background:rgba(164,22,26,.9);color:#fff;font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;
}
.place{margin:0 0 10px;font-size:.95rem;font-weight:700;color:#9fc4e8;letter-spacing:.02em}
.hero h1{font-size:clamp(1.9rem,6.2vw,3.4rem);font-weight:900;margin-bottom:.3em}
.hero .hl{color:#ffd9db}
.hero .sub{font-size:clamp(1rem,2.5vw,1.16rem);color:#cddcec;max-width:58ch;margin-bottom:1.35em}
.micro{margin:14px 0 0;font-size:.9rem;color:#9fbcd8}

/* animated water line under the hero — two offset SVG waves, drifting */
.waterline{position:absolute;left:0;right:0;bottom:-1px;height:54px;overflow:hidden;pointer-events:none}
.waterline span{
  position:absolute;bottom:0;left:0;width:200%;height:54px;
  background-repeat:repeat-x;background-position:0 100%;background-size:50% 54px;
  animation:wave 18s linear infinite;
}
.waterline span:first-child{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 54' preserveAspectRatio='none'%3E%3Cpath d='M0 34c120 22 240 22 360 6s240-30 360-14 240 30 360 20 120-14 120-14V54H0Z' fill='%23f4f6f9'/%3E%3C/svg%3E");
  opacity:1;
}
.waterline span:last-child{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 54' preserveAspectRatio='none'%3E%3Cpath d='M0 42c150-18 260 10 400 12s250-22 380-16 300 20 420 8V54H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  opacity:.08;animation-duration:27s;animation-direction:reverse;
}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.waterline span{animation:none}}

/* ---------- services ---------- */
.services{display:grid;gap:16px;padding-block:40px}
@media(min-width:760px){.services{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--white);border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:var(--r);padding:22px 20px;box-shadow:0 2px 10px rgba(16,32,52,.05);
}
.card h2{font-size:1.16rem;color:var(--navy);margin-bottom:.4em}
.card p{margin:0;color:var(--ink-2);font-size:.98rem}

/* ---------- proof ---------- */
.proof{background:var(--navy);color:#dce8f4;padding-block:44px}
.proof-in{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.proof-in{grid-template-columns:1.05fr .95fr}}
.proof h2{color:var(--white);font-size:clamp(1.5rem,4vw,2.1rem)}
.proof p{color:#b9cde0}
.ticks{list-style:none;margin:0 0 22px;padding:0}
.ticks li{position:relative;padding-left:30px;margin-bottom:10px;color:#dce8f4}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;
  border-left:3px solid var(--red-2);border-bottom:3px solid var(--red-2);transform:rotate(-45deg);
}
.badges{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  background:rgba(255,255,255,.94);border-radius:12px;padding:12px 16px;width:fit-content}
.badges img{height:46px;width:auto}
.proof-photo{margin:0;border-radius:var(--r);overflow:hidden;border:3px solid var(--red);
  box-shadow:0 18px 40px rgba(0,0,0,.4)}
.proof-photo img{width:100%;max-height:340px;object-fit:cover;object-position:center 62%}
@media(min-width:860px){.proof-photo img{max-height:460px}}

/* ---------- closer ---------- */
.closer{background:linear-gradient(180deg,var(--red-dk),var(--red));color:#fff;
  padding-block:48px;text-align:center}
.closer h2{color:#fff;font-size:clamp(1.6rem,5vw,2.3rem)}
.closer p{color:#ffe3e4;max-width:56ch;margin:0 auto 1.6em}
.closer .btn-call{background:var(--white);color:var(--red-dk);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.closer .btn-call:hover{background:#fff3f3}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#8aa6c2;padding:26px 0 34px;font-size:.88rem;text-align:center}
@media(max-width:899px){.foot{padding-bottom:calc(34px + 84px)}}
.foot p{margin:0 0 6px}
.foot strong{color:#cfe0f0}

/* ---------- sticky call bar ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,22,40,.97);border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:saturate(140%) blur(8px);
}
/* The closer section already carries a full-size call button. When it scrolls into
   view, the fixed bar sitting an inch below it is just a second red button saying the
   same thing, so slide it out of the way. tracking.js sets the class; with no JS the
   bar simply stays put, which is the old behavior. */
.sticky{transition:transform .22s ease, opacity .22s ease}
body.closer-visible .sticky{transform:translateY(115%);opacity:0;pointer-events:none}

@media(min-width:900px){
  /* On desktop the bar was falling back to position:static, which parked a third
     call button below the footer on bare background - unanchored and redundant next
     to the closer CTA and the one in the brand bar. Nothing is out of reach on a
     desktop viewport, so it just goes. */
  .sticky{display:none}
}

/* ---------- reviews ---------- */
.reviews{background:var(--paper);padding-block:44px;border-top:1px solid var(--line)}
.rev-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.reviews h2{font-size:clamp(1.5rem,4vw,2.05rem);color:var(--navy);margin-bottom:.25em}
.rev-aggs{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.rev-badge{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  color:var(--ink-2);font-size:.9rem;transition:border-color .12s ease,box-shadow .12s ease}
.rev-badge:hover{border-color:var(--red);box-shadow:0 2px 10px rgba(164,22,26,.12)}
.rev-badge strong{color:var(--ink);font-size:1.02rem}
.rev-src{color:var(--ink-2)}
.stars{color:#e8a13a;letter-spacing:.09em;font-size:1.05rem;line-height:1}
.rev-more{white-space:nowrap;font-weight:800;color:var(--red);text-decoration:none;
  border-bottom:2px solid rgba(164,22,26,.28);padding-bottom:2px}
.rev-more:hover{border-bottom-color:var(--red)}

.rev-grid{display:grid;gap:16px}
@media(min-width:800px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:0 2px 10px rgba(16,32,52,.05);display:flex;flex-direction:column;gap:10px}
.rev blockquote{margin:0;font-size:.97rem;color:#26313d;line-height:1.6}
.rev blockquote::before{content:"“"}
.rev blockquote::after{content:"”"}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rev-when{font-size:.8rem;color:var(--ink-2);white-space:nowrap}
.rev figcaption{margin-top:auto;display:flex;align-items:center;gap:8px;
  font-weight:800;color:var(--navy);font-size:.92rem}
.rev-pic{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
.rev-via{font-style:normal;font-weight:600;color:var(--ink-2);font-size:.82rem}
.rev-foot{margin:18px 0 0;font-size:.86rem;color:var(--ink-2)}
.rev-foot a{color:var(--red);font-weight:700}