/* =========================================================
   AUGERPROS HERO  — paste everything below into theme CSS
   ========================================================= */
.ap-hero{
  --ap-red:#861316;
  --ap-red-bright:#c8102e;
  --ap-black:#0b0b0d;
  position:relative;overflow:hidden;
  background:#fff url(../images/2026/hero-desktop.jpg) center/100% 100% no-repeat;
  background-image:image-set(url(../images/2026/hero-desktop.webp) type('image/webp'), url(../images/2026/hero-desktop.jpg) type('image/jpeg'));
  aspect-ratio:1925/465;
  font-family:Montserrat,system-ui,sans-serif;
}
.ap-hero__inner{
  position:absolute;inset:0;z-index:2;
  padding:12px 40px 3.2vw 4.8vw;box-sizing:border-box;
  height:100%;display:flex;align-items:center;
}
.ap-hero__copy{max-width:min(560px,34.5vw)}
.ap-hero__eyebrow{display:none;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ap-red)}
.ap-hero__title{margin:0 0 8px;font-size:clamp(22px,2.2vw,36px);line-height:1.08;font-weight:800;color:#111}
.ap-hero__sub{margin:0 0 10px;font-size:clamp(13px,1.05vw,16px);line-height:1.45;color:#333}
.ap-hero__checks{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.ap-hero__checks li{display:flex;align-items:center;gap:7px;font-weight:700;font-size:clamp(13px,1.05vw,16px);color:#111;white-space:nowrap}
.ap-hero__checks a,.ap-hero__checks a:link,.ap-hero__checks a:visited{color:inherit;text-decoration:underline;text-decoration-color:rgba(134,19,22,.45);text-underline-offset:3px}
.ap-hero__checks a:hover,.ap-hero__checks a:focus{color:var(--ap-red);text-decoration-color:var(--ap-red)}
/* Financing promo: same check row, in the brighter red so it stands out */
.ap-hero__promo a,.ap-hero__promo a:link,.ap-hero__promo a:visited{color:var(--ap-red-bright);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ap-hero__promo a:hover,.ap-hero__promo a:focus{text-decoration:underline;text-underline-offset:3px}
.ap-hero__promo::before{background:var(--ap-red-bright)}
.ap-hero__checks li::before{
  content:"";width:18px;height:18px;border-radius:3px;background:var(--ap-red);flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}
.ap-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ap-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  padding:12px 24px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  transition:transform .15s,box-shadow .15s;
}
.ap-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ap-btn--solid,.ap-btn--solid:link,.ap-btn--solid:visited,.ap-btn--solid:hover,.ap-btn--solid:focus{background:var(--ap-red);color:#fff;--glow:200,16,46;animation:ap-pulse 2.2s ease-out infinite}
/* Pulsing glow ring on the primary CTA. --glow is an RGB triplet so the ring can swap colors per breakpoint. */
@keyframes ap-pulse{
  0%{box-shadow:0 0 0 0 rgba(var(--glow),.75),0 0 14px 2px rgba(var(--glow),.55)}
  70%{box-shadow:0 0 0 14px rgba(var(--glow),0),0 0 22px 6px rgba(var(--glow),.35)}
  100%{box-shadow:0 0 0 14px rgba(var(--glow),0),0 0 14px 2px rgba(var(--glow),.55)}
}
.ap-btn--solid:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ap-btn--solid{animation:none;box-shadow:0 0 0 3px rgba(var(--glow),.45),0 0 16px 4px rgba(var(--glow),.4)}}
.ap-btn--outline,.ap-btn--outline:link,.ap-btn--outline:visited,.ap-btn--outline:hover,.ap-btn--outline:focus{background:#fff;color:var(--ap-red);border:2px solid var(--ap-red)}
/* "Financing available" sits in the baked-in red bar on desktop */
.ap-hero__bar{
  position:absolute;left:0;right:0;bottom:0;height:3.1vw;z-index:2;
  display:flex;align-items:center;padding:0 92px;
  color:#fff;font-weight:700;letter-spacing:.25em;font-size:clamp(11px,1vw,15px);text-transform:uppercase;
}
/* Google rating in the red bar: gold stars + "4.9 · 1,709 Google Reviews" */
.ap-hero__stars,.ap-hero__stars:link,.ap-hero__stars:visited,.ap-hero__stars:hover,.ap-hero__stars:focus{
  display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  text-transform:none;letter-spacing:.02em;font-weight:600;font-size:clamp(13px,1.15vw,17px);white-space:nowrap;
}
.ap-hero__stars strong{font-weight:800}
.ap-stars{display:inline-flex;gap:2px;flex:none}
.ap-stars svg{width:1.2em;height:1.2em;fill:#f6b100;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.ap-hero__stars:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.ap-hero__bar-trust,.ap-hero__bar-trust:link,.ap-hero__bar-trust:visited,.ap-hero__bar-trust:hover,.ap-hero__bar-trust:focus{margin-left:auto;color:#fff;letter-spacing:.04em;text-transform:none;font-weight:600;font-size:clamp(11px,.95vw,14px);padding-right:0;text-decoration:none;white-space:nowrap}
.ap-hero__bar-trust:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:991px){.ap-hero__bar-trust{display:none}}

/* ---- laptops (1281-1540): strip is short and the subheading shows, so step the type down to fit ---- */
@media (min-width:1281px) and (max-width:1540px){
  .ap-hero__inner{padding-top:8px}
  .ap-hero__title{font-size:26px;margin-bottom:6px}
  .ap-hero__sub{font-size:13.5px;line-height:1.4;margin-bottom:8px}
  .ap-hero__checks{gap:2px 14px;margin-bottom:10px}
  .ap-hero__checks li{font-size:14px}
  .ap-btn{padding:10px 20px;font-size:14px}
}

/* ---- tablet: image gets cramped, shift text up a bit ---- */
@media (max-width:1280px){
  .ap-hero__sub{display:none}
  .ap-hero__checks{gap:3px 14px;margin-bottom:10px}
  .ap-btn{padding:10px 18px;font-size:14px}
}

/* ---- small desktops / iPad Pro landscape (992-1280): strip is too short, so give it height and crop the image ---- */
@media (min-width:992px) and (max-width:1280px){
  .ap-hero{aspect-ratio:auto;min-height:340px;background-size:cover;background-position:12% center}
  .ap-hero__inner{padding-top:16px;padding-bottom:calc(12.8% + 12px)}
  .ap-hero__copy{max-width:min(560px,38vw)}
  .ap-hero__title{font-size:26px;margin-bottom:10px}
  .ap-hero__checks{gap:5px 16px;margin-bottom:14px}
  .ap-hero__checks li{font-size:14px}
  .ap-btn{padding:11px 20px;font-size:14px}
  /* the red stripe is 12.8% of the image height; with cover scaled by height that is 12.8% of the hero */
  .ap-hero__bar{height:12.8%;padding:0 48px}
}

/* ---- mobile + tablet (<=991): stacked layout. White copy area, then a CSS-drawn dark band and red stripe,
   so every section is exactly as tall as its content at any width. ---- */
@media (max-width:991px){
  .ap-hero{aspect-ratio:auto;min-height:0;background:#fff}
  .ap-hero__inner{
    position:relative;inset:auto;height:auto;min-height:0;
    padding:0 20px 0;display:flex;flex-direction:column;align-items:stretch;
  }
  .ap-hero__copy{max-width:none;display:flex;flex-direction:column}
  .ap-hero__eyebrow{display:block}
  .ap-hero__title{font-size:28px;line-height:1.08;margin-bottom:8px}
  .ap-hero__sub{display:block;font-size:14px;margin-bottom:10px}
  .ap-hero__checks{flex-direction:column;gap:4px;margin-bottom:0}
  .ap-hero__checks li{font-size:14px}
  /* dark band: charcoal with a faint diagonal texture and two red diagonal stripes on the right */
  .ap-hero__band{
    margin:22px -20px 0;padding:24px 20px;
    border-top:3px solid var(--ap-red-bright);
    background:
      linear-gradient(112deg,transparent 56%,rgba(140,12,20,.95) 56% 63%,transparent 63% 67%,var(--ap-red-bright) 67% 80%,transparent 80%),
      repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px),
      linear-gradient(180deg,#2b2b2e,#141416 50%,#0b0b0d);
  }
  .ap-hero__ctas{flex-direction:column;align-items:stretch;gap:9px}
  .ap-btn{width:100%;padding:12px 20px;font-size:15px}
  /* Extra selectors beat the theme's global a:link color rule */
  .ap-hero .ap-btn--solid,.ap-hero .ap-btn--solid:link,.ap-hero .ap-btn--solid:visited,.ap-hero .ap-btn--solid:hover,.ap-hero .ap-btn--solid:focus{background:var(--ap-red);color:#fff;--glow:255,255,255}
  .ap-hero .ap-btn--outline,.ap-hero .ap-btn--outline:link,.ap-hero .ap-btn--outline:visited,.ap-hero .ap-btn--outline:hover,.ap-hero .ap-btn--outline:focus{background:#fff;color:var(--ap-red);border-color:#fff}
  /* red stripe with the Google rating */
  .ap-hero__bar{
    position:relative;height:64px;margin:0 -20px 0;padding:0 20px;justify-content:center;
    background:linear-gradient(112deg,var(--ap-red-bright) 0 55%,#b00f28 55% 72%,#9a0e18 72%);
  }
  .ap-hero__stars,.ap-hero__stars:link,.ap-hero__stars:visited{font-size:15px}
}

/* ---- tablet + large phones (600-991): wider copy, buttons side by side ---- */
@media (min-width:600px) and (max-width:991px){
  .ap-hero__inner{padding:4px 32px 0}
  .ap-hero__title,.ap-hero__sub,.ap-hero__checks{max-width:640px}   /* copy stays readable; band stays full width */
  .ap-hero__title{font-size:36px}
  .ap-hero__checks{flex-direction:row;flex-wrap:wrap;gap:6px 24px;max-width:520px}   /* two per row */
  .ap-hero__band{margin:26px -32px 0;padding:28px 32px}
  .ap-hero__ctas{flex-direction:row;flex-wrap:wrap;gap:12px}
  .ap-btn{width:auto;min-width:220px;flex:1 1 220px}
  .ap-hero__bar{height:64px;margin:0 -32px;padding:0 32px}
}

/* ---- Mobile header trims (phone only) ---- */
/* Applies on every page so the mobile header matches the home page */
@media (max-width:991px){
  .top-bar__menu--link:nth-child(1),   /* Blog */
  .top-bar__menu--link:nth-child(2){display:none}   /* Contact Us: in the drawer, hero, and (tablet) the nav pill */
  .top-bar{padding-top:.6rem;padding-bottom:.6rem}
  .top-bar__menu--links{flex-wrap:nowrap}
  .top-bar__menu--links{margin-bottom:0}
}
/* 576-767: give the three links more of the bar so they stay on one line */
@media (min-width:576px) and (max-width:767px){
  .top-bar__menu{flex:0 0 62%;max-width:62%}
  .top-bar__cta{flex:0 0 38%;max-width:38%}
}
@media (max-width:767px){
  .header-nav .contact-btn{display:none}
  .header-nav{padding-top:8px;padding-bottom:10px}   /* pull the hero eyebrow up under the logo */
}

/* ---- Site-wide: hide the PulseM floating "7.0K Reviews" badge (the <review-widget> element). The footer reviews embed and the chat widget are unaffected. ---- */
review-widget{display:none!important}