/* ============================================================
   ONPOINT EQUIPMENT & DISPOSAL SOLUTIONS — brand.css
   Google Ads landing page for dumpsterrentalmanchesternh.co
   Built by Magnate Productions.

   PALETTE (client-supplied): red #E80929, black #000000, white #FFFFFF.
   Contrast notes:
     white on #E80929 .......... 4.66:1  passes WCAG AA for normal text (4.5 min)
     #E80929 text on white ..... 4.66:1  passes, but thin margin -> headings/accents only
     #C40722 text on white ..... 6.18:1  comfortable AA -> used for red body text + hover
   --red-deep is a derived token, not a new brand colour. It exists so red text and
   button hover states clear AA with room to spare. Everything visible as a fill,
   badge or button uses the true brand red.
   Neutrals are derived from #000000 at fixed opacities so nothing drifts off-brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* brand */
  --red:#e80929;
  --red-deep:#c40722;
  --red-dark:#9d0619;
  --red-rgb:232,9,41;
  --black:#000000;
  --ink:#0b0b0b;
  --ink-rgb:11,11,11;
  --white:#ffffff;

  /* neutrals derived from black */
  --gray-050:#f7f7f7;
  --gray-100:#efefef;
  --gray-200:#e2e2e2;
  --gray-300:#cfcfcf;
  --gray-400:#9b9b9b;
  --gray-600:#5c5c5c;
  --gray-700:#333333;
  --gray-900:#161616;

  --green:#12894e;
  --green-rgb:18,137,78;

  --font-display:'Anton',Impact,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --shadow-sm:0 2px 8px rgba(0,0,0,.07);
  --shadow-md:0 10px 30px rgba(0,0,0,.10);
  --shadow-lg:0 22px 60px rgba(0,0,0,.16);
}

/* ===== DOCUMENT RESET =====
   The .ops reset below is deliberately scoped so it cannot leak into anything
   else on the page, but that scoping meant html and body were never touched,
   so the browser's default 8px body margin stayed put and drew a white frame
   around every full-bleed section. These two rules are the only ones allowed
   outside the .ops scope. */
html,body{margin:0;padding:0}
body{background:#fff;-webkit-text-size-adjust:100%}

/* ===== RESET (scoped to .ops so nothing leaks) ===== */
.ops,.ops *,.ops *::before,.ops *::after{margin:0;padding:0;box-sizing:border-box}
.ops ul,.ops ol{list-style:none}
.ops a{text-decoration:none;color:inherit}
.ops img{max-width:100%;height:auto;display:block}
.ops button,.ops input,.ops select,.ops textarea{font-family:inherit}
.ops h1,.ops h2,.ops h3,.ops h4{font-weight:inherit;margin:0}
.ops{font-family:var(--font-body);color:var(--gray-700);font-size:1.06rem;line-height:1.65;
     -webkit-font-smoothing:antialiased;background:var(--white);overflow-x:hidden;width:100%}
.ops .container{width:100%;max-width:1300px;margin:0 auto;padding:0 1.1rem}
.ops .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
              clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){
  .ops *,.ops *::before,.ops *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===== ANIMATION ===== */
@keyframes opsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.72)}}
@keyframes opsGlow{0%,100%{opacity:.35;transform:translate(0,0)}50%{opacity:.7;transform:translate(-36px,26px)}}
@keyframes opsScrollPulse{0%,100%{opacity:.3;height:30px}50%{opacity:1;height:46px}}
.ops .reveal{opacity:1;transform:none}
.ops.ops-js .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.ops.ops-js .reveal.visible{opacity:1;transform:translateY(0)}
.ops.ops-js .reveal-group .reveal:nth-child(2){transition-delay:.07s}
.ops.ops-js .reveal-group .reveal:nth-child(3){transition-delay:.14s}
.ops.ops-js .reveal-group .reveal:nth-child(4){transition-delay:.21s}
.ops.ops-js .reveal-group .reveal:nth-child(5){transition-delay:.28s}

/* ===== BUTTONS ===== */
.ops .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 1.95rem;font-family:var(--font-display);font-size:1.03rem;letter-spacing:.045em;
  text-transform:uppercase;border-radius:.45rem;border:2px solid transparent;cursor:pointer;
  transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
  white-space:nowrap;min-height:48px;line-height:1.05}
.ops .btn-red{background:var(--red);color:#fff!important;border-color:var(--red)}
.ops .btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(var(--red-rgb),.38)}
.ops .btn-dark{background:var(--ink);color:#fff!important;border-color:var(--ink)}
.ops .btn-dark:hover{background:#000;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.32)}
.ops .btn-ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.5)}
.ops .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.13);transform:translateY(-2px)}
.ops .btn-outline{background:#fff;color:var(--ink)!important;border-color:var(--gray-200)}
.ops .btn-outline:hover{border-color:var(--red);color:var(--red-deep)!important;transform:translateY(-2px)}
.ops .btn-lg{padding:1.12rem 2.25rem;font-size:1.13rem}
.ops .btn-full{width:100%}
.ops .btn svg{flex-shrink:0}

/* ===== SECTION FURNITURE ===== */
.ops .s-tag{font-family:var(--font-display);font-size:.86rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:.7rem}
.ops .s-head{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.03;
  text-transform:uppercase;color:var(--gray-900);letter-spacing:.005em;margin-bottom:1rem}
.ops .s-head .accent{color:var(--red)}
.ops .s-intro{font-size:1.1rem;color:var(--gray-600);max-width:760px}
.ops .center{margin-left:auto;margin-right:auto;text-align:center}

/* ===== TOP BAR ===== */
.ops .top-bar{background:var(--black);color:#fff;font-size:.82rem;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:1.6rem;padding:.55rem 1.1rem;flex-wrap:wrap}
.ops .tb-call{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-size:.93rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.ops .tb-call:hover{color:var(--red)}
.ops .tb-call svg{width:15px;height:15px;color:var(--red)}
.ops .tb-areas{color:rgba(255,255,255,.62);font-size:.79rem}
.ops .tb-areas-sm{display:none;color:rgba(255,255,255,.6);font-size:.74rem;letter-spacing:.01em}
.ops .tb-areas-sm strong{color:rgba(255,255,255,.9);font-weight:700}
.ops .tb-areas strong{color:#fff;font-weight:700}
@media(max-width:1024px){
  .ops .tb-areas{display:none}
  .ops .tb-areas-sm{display:block;width:100%;text-align:center}
  .ops .top-bar{flex-direction:column;gap:.25rem}
}

/* ===== HEADER (dark plate — the logo is drawn for a black field) ===== */
.ops .site-header{position:sticky;top:0;z-index:60;background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.09)}
.ops .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  min-height:82px;padding-top:.5rem;padding-bottom:.5rem}
.ops .header-logo img{height:64px;width:auto}
.ops .header-nav{display:flex;align-items:center;gap:1.55rem}
.ops .navlink{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.01em;
  padding:.3rem 0;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
.ops .navlink:hover{color:#fff;border-bottom-color:var(--red)}
.ops .header-cta{display:flex;align-items:center;gap:.9rem}
.ops .header-phone{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-size:1.06rem;letter-spacing:.03em;color:#fff}
.ops .header-phone:hover{color:var(--red)}
.ops .header-phone svg{width:17px;height:17px;color:var(--red)}
@media(max-width:1150px){.ops .header-nav{display:none}}
@media(max-width:640px){
  .ops .header-phone span{display:none}
  .ops .header-logo img{height:50px}
  .ops .header-inner{min-height:68px}
  .ops .header-cta .btn{padding:.8rem 1.15rem;font-size:.9rem}
}

/* ===== HERO ===== */
.ops .hero{position:relative;min-height:clamp(620px,86vh,880px);display:flex;align-items:center;
  overflow:hidden;background:var(--black)}
.ops .hero-bg{position:absolute;inset:0}
.ops .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.ops .hero-overlay{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.84) 38%,rgba(0,0,0,.5) 68%,rgba(0,0,0,.42) 100%)}
.ops .hero-glow{position:absolute;top:-14%;left:-8%;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--red-rgb),.34) 0%,transparent 68%);
  animation:opsGlow 13s ease-in-out infinite;pointer-events:none}
.ops .hero-content{position:relative;z-index:2;width:100%;padding:3.4rem 0}
.ops .hero-inner{display:grid;grid-template-columns:1.16fr .84fr;gap:3rem;align-items:center}
.ops .hero-inner>*{min-width:0}
.ops .hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(var(--red-rgb),.16);
  border:1px solid rgba(var(--red-rgb),.45);color:#fff;font-size:.79rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:.42rem 1rem;border-radius:100px;margin-bottom:1.15rem}
.ops .hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:opsPulse 1.9s ease-in-out infinite}
.ops .hero-tagline{font-family:var(--font-display);font-size:1.02rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:.55rem}
.ops .hero-h1{font-family:var(--font-display);text-transform:uppercase;color:#fff;
  font-size:clamp(2.3rem,5.4vw,4.3rem);line-height:.98;letter-spacing:.004em;margin-bottom:1.15rem}
.ops .hero-h1 .l1,.ops .hero-h1 .l2{display:block}
.ops .hero-h1 .accent{color:var(--red)}
.ops .hero-sub{font-size:1.13rem;color:rgba(255,255,255,.85);max-width:610px;margin-bottom:1.7rem}
.ops .hero-sub strong{color:#fff;font-weight:700}
.ops .hero-ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}
.ops .hero-img-mobile{display:none}
.ops .hero-proof{display:inline-flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:.7rem;padding:.6rem .95rem;width:auto;max-width:none}
.ops .hero-proof img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.ops .hero-proof .glogo{width:22px;height:22px;flex-shrink:0}
.ops .hero-proof-txt{line-height:1.25;text-align:left}
.ops .proof-row{display:flex;align-items:center;gap:.42rem}
.ops .proof-score{font-family:var(--font-display);font-size:1.14rem;color:#fff;line-height:1;letter-spacing:.02em}
.ops .hero-stars{color:#ffb400;letter-spacing:.06em;font-size:.86rem;line-height:1}
.ops .proof-sub{display:block;font-size:.75rem;color:rgba(255,255,255,.62);margin-top:.14rem;text-decoration:none}

@media(min-width:700px){
  .ops .hero-h1{max-width:14ch}
  .ops .hero-h1 .l1,.ops .hero-h1 .l2{white-space:nowrap}
}

/* hero size card */
.ops .hero-card{background:rgba(255,255,255,.97);border-radius:1.05rem;padding:1.6rem;
  box-shadow:var(--shadow-lg);border-top:5px solid var(--red)}
.ops .hero-card-title{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);
  font-size:1.22rem;text-transform:uppercase;color:var(--gray-900);margin-bottom:1rem}
.ops .hero-card-title svg{color:var(--red)}
.ops .card-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.ops .size-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  background:var(--gray-050);border:2px solid var(--gray-200);border-radius:.6rem;padding:.8rem .5rem;
  cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease;text-align:center}
.ops .size-opt:hover{border-color:var(--red);transform:translateY(-2px)}
.ops .size-opt.active{border-color:var(--red);background:rgba(var(--red-rgb),.07)}
.ops .size-opt .num{font-family:var(--font-display);font-size:1.32rem;color:var(--gray-900);line-height:1.1}
.ops .size-opt .lab{font-size:.7rem;color:var(--gray-600);text-transform:uppercase;letter-spacing:.06em}
.ops .size-opt .start{font-size:.63rem;color:var(--gray-400);text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem}
.ops .size-opt .price{font-family:var(--font-display);font-size:1.06rem;color:var(--red-deep);line-height:1.1}
.ops .size-opt.full{grid-column:1/-1;flex-direction:row;gap:.55rem;padding:.7rem .5rem}
.ops .size-opt.full .num{font-size:1rem}
.ops .hero-card-foot{text-align:center;font-size:.87rem;color:var(--gray-600);margin-top:.8rem}
.ops .hero-card-foot a{color:var(--red-deep);font-weight:700}
.ops .scroll-ind{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;color:rgba(255,255,255,.5);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.ops .scroll-line{width:1px;background:rgba(255,255,255,.45);animation:opsScrollPulse 2.3s ease-in-out infinite}
@media(max-width:980px){
  .ops .hero-inner{grid-template-columns:1fr;gap:2rem}
  .ops .hero-sub{max-width:none}
  .ops .scroll-ind{display:none}
}
@media(max-width:640px){
  .ops .hero{min-height:0}
  .ops .hero-h1{font-size:clamp(1.95rem,8vw,2.8rem);max-width:none}
  .ops .hero-badge{font-size:.68rem;letter-spacing:.07em;padding:.4rem .8rem}
  .ops .hero-tagline{font-size:.86rem;letter-spacing:.14em}
  .ops .top-bar{gap:.5rem;padding:.5rem .8rem}
  .ops .tb-call{font-size:.82rem;text-align:center}
  .ops .hero-content{padding:2.4rem 0 2.8rem}
  .ops .hero-img-mobile{display:block;margin:0 0 1.4rem;border-radius:.8rem;overflow:hidden;
    box-shadow:var(--shadow-md)}
  .ops .hero-img-mobile img{width:100%;height:210px;object-fit:cover}
  .ops .hero-ctas .btn{width:100%}
  .ops .hero-proof{max-width:none}
  .ops .btn{white-space:normal;text-align:center;padding-left:1.15rem;padding-right:1.15rem}
  .ops .btn-lg{padding:1.05rem 1.2rem;font-size:1.02rem}
  .ops .hero-card{padding:1.15rem}
  .ops .size-opt.full{flex-direction:column;gap:.15rem}
}

/* ===== TRUST BAR ===== */
.ops .trustbar{background:var(--gray-900);border-top:3px solid var(--red);padding:1.5rem 0}
.ops .trustbar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;text-align:center}
.ops .trustbar-grid>*{min-width:0}
.ops .tbi-num{font-family:var(--font-display);font-size:1.42rem;color:#fff;line-height:1.15;
  text-transform:uppercase;letter-spacing:.02em}
.ops .tbi-num .accent{color:var(--red)}
.ops .tbi-lab{font-size:.76rem;color:rgba(255,255,255,.62);text-transform:uppercase;
  letter-spacing:.09em;margin-top:.2rem}
.ops .trustbar-item + .trustbar-item{border-left:1px solid rgba(255,255,255,.13)}
@media(max-width:900px){
  .ops .trustbar-grid{grid-template-columns:repeat(2,1fr);gap:1.3rem .8rem}
  .ops .trustbar-item + .trustbar-item{border-left:0}
  .ops .trustbar-item:nth-child(5){grid-column:1/-1}
}

/* ===== PRICING ===== */
.ops .pricing{padding:5rem 0 5.5rem;background:var(--gray-050)}
.ops .pricing-sub{font-size:1.08rem;color:var(--gray-600);max-width:840px;margin:0 auto 2.6rem;text-align:center}
.ops .pricing-sub strong{color:var(--gray-900);font-weight:700}
.ops .pricing-sub a{color:var(--red-deep);font-weight:700}
.ops .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem;align-items:start}
.ops .pricing-grid>*{min-width:0}
.ops .price-card{position:relative;background:#fff;border:1px solid var(--gray-200);border-radius:.95rem;
  overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ops .price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gray-300)}
.ops .price-card.featured{border:2px solid var(--red);box-shadow:0 14px 40px rgba(var(--red-rgb),.16)}
.ops .price-flag{position:absolute;top:0;right:0;z-index:2;background:var(--red);color:#fff;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .85rem;border-bottom-left-radius:.55rem}
.ops .price-img{width:100%;height:178px;object-fit:cover}
.ops .price-body{padding:1.35rem 1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
.ops .pc-cat{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--red-deep);
  font-weight:700;margin-bottom:.3rem}
.ops .pc-name{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;
  color:var(--gray-900);line-height:1.1;margin-bottom:.55rem}
.ops .pc-prow{display:block;margin-bottom:.5rem}
.ops .pc-start{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;color:var(--gray-400);margin-top:-.15rem}
.ops .pc-price{font-family:var(--font-display);font-size:3.35rem;color:var(--gray-900);line-height:.95;letter-spacing:-.01em}
.ops .pc-price sup{font-size:1.45rem;top:-.52em;position:relative;color:var(--red);margin-right:.06rem}
.ops .pc-note{font-size:.82rem;color:var(--gray-600);margin-bottom:.95rem;
  padding-bottom:.95rem;border-bottom:1px solid var(--gray-100)}
.ops .feat{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.ops .feat li{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;color:var(--gray-700)}
.ops .feat svg{width:15px;height:15px;flex-shrink:0;margin-top:.25rem;color:var(--green)}
.ops .pc-best{font-size:.85rem;color:var(--gray-600);line-height:1.55;margin-bottom:1.1rem;flex:1}
.ops .pc-best strong{color:var(--gray-900)}
.ops .pricing-foot{text-align:center;margin-top:2.4rem;font-size:.97rem;color:var(--gray-600)}
.ops .pricing-foot strong{color:var(--gray-900)}
@media(max-width:1150px){.ops .pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .ops .pricing{padding:3.5rem 0 4rem}
  .ops .pricing-grid{grid-template-columns:1fr}
  .ops .price-img{height:200px}
}

/* ===== STICKY MOBILE BAR ===== */
.ops .ops-sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--black);
  border-top:2px solid var(--red);padding:.6rem .7rem;transform:translateY(110%);
  transition:transform .3s ease;display:none}
.ops .ops-sticky.visible{transform:translateY(0)}
.ops .ops-sticky-inner{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ops .sb-call,.ops .sb-quote{display:flex;align-items:center;justify-content:center;min-height:48px;
  border-radius:.45rem;font-family:var(--font-display);font-size:1rem;letter-spacing:.05em;text-transform:uppercase}
.ops .sb-call{background:var(--red);color:#fff}
.ops .sb-quote{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.42)}
@media(max-width:768px){.ops .ops-sticky{display:block}.ops{padding-bottom:0}}

/* ===================== PHASE 2 SECTIONS ===================== */

/* --- generic section padding --- */
.ops .sec{padding:5rem 0}
.ops .sec-sm{padding:3.6rem 0}
.ops .sec-dark{background:var(--gray-900);color:rgba(255,255,255,.82)}
.ops .sec-dark .s-head,.ops .sameday .s-head,.ops .quote .s-head{color:#fff}
.ops .sec-dark .s-tag,.ops .sameday .s-tag,.ops .quote .s-tag{color:var(--red)}
.ops .sec-dark .s-intro,.ops .sameday .s-intro,.ops .quote .s-intro{color:rgba(255,255,255,.72)}
.ops .sameday .s-head .accent,.ops .sec-dark .s-head .accent{color:var(--red)}
@media(max-width:600px){.ops .sec{padding:3.4rem 0}.ops .sec-sm{padding:2.6rem 0}}

/* --- pain / three cards --- */
.ops .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.4rem}
.ops .pain-grid>*{min-width:0}
.ops .pain-card{background:#fff;border:1px solid var(--gray-200);border-radius:.9rem;padding:1.7rem 1.5rem}
.ops .pain-ico{width:46px;height:46px;border-radius:.6rem;background:rgba(var(--red-rgb),.09);
  display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:1rem}
.ops .pain-card h3{font-family:var(--font-display);font-size:1.16rem;text-transform:uppercase;
  color:var(--gray-900);margin-bottom:.55rem;line-height:1.15}
.ops .pain-card p{font-size:.94rem;color:var(--gray-600)}
@media(max-width:900px){.ops .pain-grid{grid-template-columns:1fr}}

/* --- why / split with image --- */
.ops .split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.ops .split>*{min-width:0}
.ops .split-media img{border-radius:1rem;width:100%;height:430px;object-fit:cover;box-shadow:var(--shadow-lg)}
.ops .why-list{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.6rem}
.ops .why-item{display:flex;gap:.9rem}
.ops .why-num{flex-shrink:0;width:34px;height:34px;border-radius:.5rem;background:var(--red);color:#fff;
  font-family:var(--font-display);font-size:.98rem;display:flex;align-items:center;justify-content:center}
.ops .why-item h3{font-family:var(--font-display);font-size:1.07rem;text-transform:uppercase;color:#fff;margin-bottom:.2rem}
.ops .why-item p{font-size:.94rem;color:rgba(255,255,255,.7)}
@media(max-width:900px){.ops .split{grid-template-columns:1fr;gap:2rem}.ops .split-media img{height:280px}}

/* --- CTA band --- */
.ops .cta-band{background:var(--red);color:#fff;padding:3.2rem 0;text-align:center}
.ops .cta-band h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.9rem);text-transform:uppercase;
  line-height:1.05;margin-bottom:.7rem}
.ops .cta-band p{color:rgba(255,255,255,.9);max-width:640px;margin:0 auto 1.6rem}
.ops .cta-band .btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.ops .cta-band .btn-outline{background:#fff;color:var(--red-deep)!important;border-color:#fff}
.ops .cta-band .btn-outline:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}

/* --- same-day --- */
.ops .sameday{background:var(--gray-900);color:#fff;padding:4.5rem 0}
.ops .sameday-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.6rem;align-items:center}
.ops .sameday-grid>*{min-width:0}
.ops .sd-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:1rem;padding:1.7rem}
.ops .sd-box h3{font-family:var(--font-display);font-size:1.2rem;text-transform:uppercase;color:#fff;margin-bottom:.9rem}
.ops .sd-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;
  color:rgba(255,255,255,.78);margin-bottom:.7rem}
.ops .sd-list svg{width:16px;height:16px;flex-shrink:0;margin-top:.28rem;color:var(--red)}
.ops .sd-note{font-size:.84rem;color:rgba(255,255,255,.5);margin-top:.9rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
@media(max-width:900px){.ops .sameday-grid{grid-template-columns:1fr;gap:1.8rem}}

/* --- steps --- */
.ops .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.6rem}
.ops .steps>*{min-width:0}
.ops .step{text-align:center;background:#fff;border:1px solid var(--gray-200);border-radius:.9rem;padding:1.9rem 1.3rem;position:relative}
.ops .step-n{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-display);
  font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin:0 auto .95rem}
.ops .step h3{font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;color:var(--gray-900);margin-bottom:.45rem}
.ops .step p{font-size:.92rem;color:var(--gray-600)}
@media(max-width:900px){.ops .steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ops .steps{grid-template-columns:1fr}}

/* --- projects --- */
.ops .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.ops .proj-grid>*{min-width:0}
.ops .proj{position:relative;border-radius:.9rem;overflow:hidden;min-height:230px;display:flex;align-items:flex-end}
.ops .proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ops .proj:hover img{transform:scale(1.06)}
.ops .proj::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.1) 100%)}
.ops .proj-txt{position:relative;z-index:2;padding:1.3rem}
.ops .proj-txt h3{font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;color:#fff;margin-bottom:.2rem}
.ops .proj-txt p{font-size:.87rem;color:rgba(255,255,255,.8)}
@media(max-width:900px){.ops .proj-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ops .proj-grid{grid-template-columns:1fr}}

/* --- contractors --- */
.ops .contract-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.2rem}
.ops .contract-grid>*{min-width:0}
.ops .cbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:.8rem;padding:1.4rem}
.ops .cbox h3{font-family:var(--font-display);font-size:1.02rem;text-transform:uppercase;color:#fff;margin-bottom:.4rem}
.ops .cbox p{font-size:.9rem;color:rgba(255,255,255,.68)}
@media(max-width:900px){.ops .contract-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ops .contract-grid{grid-template-columns:1fr}}

/* --- reviews --- */
.ops .rev-top{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}
.ops .rev-score{font-family:var(--font-display);font-size:2.6rem;color:var(--gray-900);line-height:1}
.ops .rev-stars{color:#ffb400;font-size:1.25rem;letter-spacing:.08em}
.ops .rev-meta{font-size:.92rem;color:var(--gray-600)}
.ops .rev-meta a{color:var(--red-deep);font-weight:700}
.ops .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ops .rev-grid>*{min-width:0}
.ops .rev-card{background:#fff;border:1px solid var(--gray-200);border-radius:.9rem;padding:1.5rem;
  display:flex;flex-direction:column}
.ops .rev-card .stars{color:#ffb400;font-size:.92rem;letter-spacing:.08em;margin-bottom:.7rem}
.ops .rev-card blockquote{font-size:.95rem;color:var(--gray-700);line-height:1.62;flex:1;margin-bottom:1rem}
.ops .rev-who{font-size:.86rem;color:var(--gray-900);font-weight:700}
.ops .rev-who span{display:block;font-weight:400;color:var(--gray-400);font-size:.8rem}
@media(max-width:980px){.ops .rev-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ops .rev-grid{grid-template-columns:1fr}}

/* --- service area --- */
.ops .area-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:2.6rem;align-items:start}
.ops .area-grid>*{min-width:0}
.ops #ops-map{height:460px;border-radius:1rem;border:1px solid var(--gray-200);z-index:1;background:var(--gray-100)}
.ops .city-list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;margin:1.4rem 0}
.ops .city-list li{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  font-size:.93rem;color:var(--gray-700);border-bottom:1px dotted var(--gray-200);padding-bottom:.35rem}
.ops .city-list li strong{color:var(--gray-900);font-weight:700}
.ops .city-list li .pop{font-size:.78rem;color:var(--gray-400);white-space:nowrap}
.ops .zips{background:var(--gray-050);border:1px solid var(--gray-200);border-radius:.7rem;
  padding:1rem 1.15rem;font-size:.84rem;color:var(--gray-600);line-height:1.85}
.ops .zips strong{color:var(--gray-900);display:block;margin-bottom:.2rem;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.09em}
@media(max-width:900px){.ops .area-grid{grid-template-columns:1fr;gap:1.8rem}.ops #ops-map{height:340px}}
@media(max-width:480px){.ops .city-list{grid-template-columns:1fr}}

/* --- FAQ --- */
.ops .faq-wrap{max-width:900px;margin:2.4rem auto 0}
.ops .faq-item{background:#fff;border:1px solid var(--gray-200);border-radius:.7rem;margin-bottom:.7rem;overflow:hidden}
.ops .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.15rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-display);font-size:1.02rem;text-transform:uppercase;color:var(--gray-900);line-height:1.25}
.ops .faq-q:hover{color:var(--red-deep)}
.ops .faq-q .chev{flex-shrink:0;width:18px;height:18px;color:var(--red);transition:transform .25s ease}
.ops .faq-item.open .faq-q .chev{transform:rotate(180deg)}
.ops .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.ops .faq-item.open .faq-a{max-height:640px}
.ops .faq-a p{padding:0 1.3rem 1.25rem;font-size:.95rem;color:var(--gray-600)}
.ops .faq-a p a{color:var(--red-deep);font-weight:700}

/* --- quote form --- */
.ops .quote{background:var(--gray-900);padding:5rem 0}
.ops .quote-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:3rem;align-items:start}
.ops .quote-grid>*{min-width:0}
.ops .quote-left h2{font-family:var(--font-display);font-size:clamp(1.9rem,4.2vw,3rem);text-transform:uppercase;
  color:#fff;line-height:1.05;margin-bottom:1rem}
.ops .quote-left h2 .accent{color:var(--red)}
.ops .quote-left p{color:rgba(255,255,255,.72);margin-bottom:1.5rem}
.ops .qbullets li{display:flex;gap:.6rem;align-items:flex-start;color:rgba(255,255,255,.8);
  font-size:.95rem;margin-bottom:.7rem}
.ops .qbullets svg{width:16px;height:16px;flex-shrink:0;margin-top:.28rem;color:var(--red)}
.ops .qcontact{margin-top:1.8rem;border-top:1px solid rgba(255,255,255,.14);padding-top:1.4rem;
  font-size:.93rem;color:rgba(255,255,255,.7);line-height:1.9}
.ops .qcontact a{color:#fff;font-weight:700}
.ops .qcontact a:hover{color:var(--red)}
.ops .form-card{background:#fff;border-radius:1rem;padding:1.9rem;box-shadow:var(--shadow-lg);border-top:5px solid var(--red)}
.ops .form-card h3{font-family:var(--font-display);font-size:1.35rem;text-transform:uppercase;color:var(--gray-900);margin-bottom:.35rem}
.ops .form-card .fsub{font-size:.9rem;color:var(--gray-600);margin-bottom:1.3rem}
.ops .frow{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.ops .frow>*{min-width:0}
.ops .fld{margin-bottom:.85rem}
.ops .fld label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--gray-600);font-weight:700;margin-bottom:.32rem}
.ops .fld input,.ops .fld select,.ops .fld textarea{width:100%;padding:.78rem .9rem;border:1.5px solid var(--gray-200);
  border-radius:.5rem;font-size:.97rem;color:var(--gray-900);background:#fff;transition:border-color .2s ease}
.ops .fld input:focus,.ops .fld select:focus,.ops .fld textarea:focus{outline:none;border-color:var(--red)}
.ops .fld textarea{min-height:92px;resize:vertical}
.ops .form-note{font-size:.79rem;color:var(--gray-400);text-align:center;margin-top:.8rem;line-height:1.5}
.ops .form-err{display:none;background:rgba(var(--red-rgb),.08);border:1px solid rgba(var(--red-rgb),.35);
  color:var(--red-deep);font-size:.88rem;border-radius:.5rem;padding:.7rem .9rem;margin-bottom:.9rem}
.ops .form-err.show{display:block}
@media(max-width:900px){.ops .quote-grid{grid-template-columns:1fr;gap:2rem}}
@media(max-width:520px){.ops .frow{grid-template-columns:1fr}.ops .form-card{padding:1.35rem}}

/* --- footer --- */
.ops .site-footer{background:var(--black);color:rgba(255,255,255,.62);padding:3.4rem 0 1.6rem;font-size:.92rem}
.ops .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.15fr;gap:2rem;margin-bottom:2.4rem}
.ops .foot-grid>*{min-width:0}
.ops .foot-logo img{height:62px;width:auto;margin-bottom:1rem}
.ops .site-footer h4{font-family:var(--font-display);font-size:1rem;text-transform:uppercase;color:#fff;
  letter-spacing:.06em;margin-bottom:.9rem}
.ops .site-footer a:hover{color:var(--red)}
.ops .foot-links li{margin-bottom:.5rem}
.ops .foot-hours li{display:flex;justify-content:space-between;gap:.8rem;margin-bottom:.35rem;font-size:.88rem}
.ops .foot-nap{line-height:1.9}
.ops .foot-nap strong{color:#fff}
.ops .foot-bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:1.4rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.42)}
@media(max-width:900px){.ops .foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ops .foot-grid{grid-template-columns:1fr;gap:1.6rem}}
@media(max-width:768px){.ops .site-footer{padding-bottom:5.2rem}}


/* ===================== REVIEW MARQUEE ===================== */
.ops .rev-marquee{position:relative;overflow:hidden;padding:.35rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.ops .rev-marquee + .rev-marquee{margin-top:1.1rem}
.ops .rev-track{display:flex;width:max-content}
.ops .rev-set{display:flex;gap:1.1rem;padding-right:1.1rem}
.ops .rev-left{animation:opsRevLeft 150s linear infinite}
.ops .rev-right{animation:opsRevRight 150s linear infinite}
@keyframes opsRevLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes opsRevRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ops .rev-marquee:hover .rev-track,.ops .rev-marquee:focus-within .rev-track{animation-play-state:paused}

.ops .rev-card{flex:0 0 340px;width:340px;background:#fff;border:1px solid var(--gray-200);
  border-radius:.9rem;padding:1.4rem;display:flex;flex-direction:column;margin:0}
.ops .rev-card blockquote{font-size:.93rem;color:var(--gray-700);line-height:1.6;flex:1;margin:0 0 1.05rem;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.ops .rev-who{display:flex;align-items:center;gap:.55rem;margin-top:auto;
  border-top:1px solid var(--gray-100);padding-top:.85rem}
.ops .glogo{width:19px;height:19px;flex-shrink:0}
.ops .rev-name{font-size:.86rem;color:var(--gray-900);font-weight:700;line-height:1.25}
.ops .rev-name span{display:block;font-weight:400;color:var(--gray-400);font-size:.76rem}

@media(max-width:600px){
  .ops .rev-card{flex:0 0 280px;width:280px;padding:1.15rem}
  .ops .rev-card blockquote{font-size:.89rem;-webkit-line-clamp:9}
}
/* no motion: fall back to a normal horizontal scroller */
@media(prefers-reduced-motion:reduce){
  .ops .rev-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ops .rev-track{animation:none!important}
  .ops .rev-set[aria-hidden="true"]{display:none}
}


/* ===================== MOBILE HERO + TYPE SCALE ===================== */
@media(max-width:640px){

  /* everything in the hero reads centred on a phone */
  .ops .hero-content .container{text-align:center}
  .ops .hero-badge{margin-left:auto;margin-right:auto}
  .ops .hero-tagline{margin-left:auto;margin-right:auto}
  .ops .hero-sub{margin-left:auto;margin-right:auto}
  .ops .hero-proof{justify-content:center;text-align:left}
  .ops .hero-card-title{justify-content:center}

  /* H1: significantly larger, still allowed to wrap */
  .ops .hero-h1{font-size:clamp(2.5rem,13vw,3.6rem);line-height:1.06;max-width:none;
                margin-left:auto;margin-right:auto}

  /* the two hero CTAs sit side by side instead of stacking */
  .ops .hero-ctas{flex-wrap:nowrap;gap:.55rem;justify-content:center}
  .ops .hero-ctas .btn{width:auto;flex:1 1 0;min-width:0;padding:.95rem .55rem;
                       font-size:.87rem;letter-spacing:.03em;gap:.35rem}
  .ops .hero-ctas .btn svg{width:15px;height:15px}

  /* section headings up ~18% across the whole page */
  .ops .s-head{font-size:clamp(2.35rem,9vw,2.9rem)}
  .ops .cta-band h2{font-size:clamp(2.1rem,8.4vw,2.6rem)}
  .ops .quote-left h2{font-size:clamp(2.25rem,8.8vw,2.8rem)}
  .ops .form-card h3{font-size:1.55rem}
  .ops .rev-score{font-size:3rem}
}

/* very narrow phones: keep the side-by-side CTAs from crowding */
@media(max-width:360px){
  .ops .hero-h1{font-size:12vw}
  .ops .hero-ctas .btn{font-size:.8rem;padding:.9rem .4rem}
  .ops .hero-ctas .btn svg{display:none}
}


/* =============== MOBILE: centre the page =============== */
@media(max-width:640px){

  /* headings, intros and body copy centre across every section */
  .ops .sec,.ops .sameday,.ops .quote,.ops .pricing{text-align:center}
  .ops .s-intro,.ops .pricing-sub{margin-left:auto;margin-right:auto}
  .ops .hero-proof-txt{text-align:center}
  .ops .hero-proof{gap:.55rem}

  /* icon + text rows centre as a unit rather than hugging the left edge */
  .ops .why-item{flex-direction:column;align-items:center;gap:.5rem}
  .ops .why-num{margin:0 auto}
  .ops .sd-list li,.ops .qbullets li,.ops .feat li{justify-content:center;text-align:center}
  .ops .sd-list svg,.ops .qbullets svg,.ops .feat svg{margin-top:.3rem}
  .ops .sd-box,.ops .cbox,.ops .pain-card,.ops .step{text-align:center}
  .ops .pain-ico{margin-left:auto;margin-right:auto}
  .ops .rev-top{flex-direction:column;gap:.4rem}

  /* pricing cards read centred too */
  .ops .price-body{text-align:center}
  .ops .pc-note{text-align:center}

  /* service area + quote panel */
  .ops .city-list li{justify-content:center}
  .ops .zips{text-align:center}
  .ops .qcontact{text-align:center}
  .ops .fld label{text-align:left}
  .ops .fld{text-align:left}

  /* footer */
  .ops .foot-grid{text-align:center}
  .ops .foot-logo img{margin-left:auto;margin-right:auto}
  .ops .foot-hours li{justify-content:center;gap:.5rem}
  .ops .foot-bottom{justify-content:center;text-align:center}

  /* FAQ questions stay left so the chevron has a home */
  .ops .faq-q{text-align:left}
  .ops .faq-a p{text-align:left}
}


/* =============== MOBILE REVIEWS: shorter, faster loop =============== */
@media(max-width:640px){
  /* two rotating rows, but a trimmed set per row so the loop is short.
     both .rev-set copies are filtered identically, so the -50% translate
     stays exact and the seam is still invisible. */
  .ops .rev-set .rev-card:nth-child(n+11){display:none}
  .ops .rev-left{animation-duration:55s}
  .ops .rev-right{animation-duration:55s}
  .ops .rev-card{flex:0 0 268px;width:268px}
  .ops .rev-card blockquote{-webkit-line-clamp:6}
  .ops .rev-who{justify-content:flex-start;text-align:left}
  .ops .rev-marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
                            mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
}


/* =============== PROGRESSIVE FORM =============== */
/* Collapsed only when JS is running. With JS off every field is visible and
   the form still posts natively, so nobody ever meets a two-field dead end. */
.ops-js .freveal{max-height:0;opacity:0;overflow:hidden;transform:translateY(-8px);
  transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,transform .35s ease}
.ops-js .freveal.revealed{max-height:340px;opacity:1;transform:translateY(0)}
.ops .fhint{font-size:.78rem;color:var(--gray-400);line-height:1.45;margin-top:.35rem}
.ops .ops-form{text-align:left}
.ops .form-card .fsub{margin-bottom:1.15rem}
@media(max-width:640px){
  .ops .ops-form,.ops .ops-form .fld,.ops .ops-form label,.ops .fhint{text-align:left}
}