.elementor-56257 .elementor-element.elementor-element-0d43820{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56257 .elementor-element.elementor-element-ac07338{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56257 .elementor-element.elementor-element-1d68273{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56257 .elementor-element.elementor-element-31738fe{--display:flex;}.elementor-56257 .elementor-element.elementor-element-26d1851{--spacer-size:50px;}.elementor-56257 .elementor-element.elementor-element-e34b0e3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56257 .elementor-element.elementor-element-ffcc358{--display:flex;}.elementor-56257 .elementor-element.elementor-element-b235954{--spacer-size:50px;}.elementor-56257 .elementor-element.elementor-element-d930d83{--display:flex;}.elementor-56257 .elementor-element.elementor-element-74290a4{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56257 .elementor-element.elementor-element-74290a4:not(.elementor-motion-effects-element-type-background), .elementor-56257 .elementor-element.elementor-element-74290a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-56257 .elementor-element.elementor-element-89c511d{--display:flex;}.elementor-56257 .elementor-element.elementor-element-30a5ed4{--spacer-size:50px;}.elementor-56257 .elementor-element.elementor-element-faee0db{--spacer-size:50px;}.elementor-56257 .elementor-element.elementor-element-9568de1{--display:flex;}.elementor-56257 .elementor-element.elementor-element-869d9a1{--display:flex;}.elementor-56257 .elementor-element.elementor-element-8258e50{--spacer-size:50px;}.elementor-56257 .elementor-element.elementor-element-fe0619e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56257 .elementor-element.elementor-element-3aeae5a{--spacer-size:50px;}.elementor-56257 .elementor-element.elementor-element-79138eb{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56257 .elementor-element.elementor-element-79138eb:not(.elementor-motion-effects-element-type-background), .elementor-56257 .elementor-element.elementor-element-79138eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-56257 .elementor-element.elementor-element-5a108d0 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-56257 .elementor-element.elementor-element-3aeae5a{--spacer-size:75px;}}/* Start custom CSS for html, class: .elementor-element-6a9a1c5 *//* =============================================================
   MOOSE ROOFING — GUTTER INSTALLATION & GUARDS: HERO (CSS)
   Follows Moose Roofing Website Rules + Brand Guide 2026.
   Everything is scoped to .moose-gtr-hero so it won't affect the rest of the site.

   FONTS: if your theme already loads Anton and Work Sans, delete the @import line.
   If you keep it, it must stay the very first line of this CSS.
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;700;800&display=swap");

.moose-gtr-hero{
  /* Brand colors (Website Rules) */
  --pr-black:#000000;
  --pr-white:#FFFFFF;
  --pr-maroon:#3A1717;
  --pr-green:#454636;        /* Dark Green */
  --pr-pale-green:#DEDDD8;   /* Fade Green */
  --pr-light-green:#4A3A03;  /* VERIFY: Website Rules lists "#4A31A03" (7 digits, not a valid hex) */
  --pr-muted:#454636;
  --pr-slate:#21212A;
  --pr-stone:#D1CDC2;        /* Grey eyebrow/span color on black backgrounds */
  --pr-radius:4px;

  position:relative;
  overflow:hidden;
  padding:150px 24px 130px;
  font-family:"Work Sans",Arial,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.65;
  color:var(--pr-white);

  /* Background photo (set in the HTML style="" attribute) */
  background-color:var(--pr-black);
  background-image:var(--hero-img);
  background-size:cover;
  background-position:var(--hero-pos,center);
  background-repeat:no-repeat;
}
.moose-gtr-hero *,
.moose-gtr-hero *::before,
.moose-gtr-hero *::after{box-sizing:border-box}

/* Dark overlay: keeps white text high-contrast over any photo (Brand Guide "Moose Tip") */
.moose-gtr-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.74) 55%,rgba(0,0,0,.4) 100%);
}

/* Angled Dark Green accent on the right (Brand Guide design element: "angles accentuate images of roofs") */
.moose-gtr-hero::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:34%;
  height:100%;
  background:var(--pr-green);
  clip-path:polygon(55% 0,100% 0,100% 100%,15% 100%);
  opacity:.5;
  pointer-events:none;
}

.moose-gtr-hero__wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.moose-gtr-hero__copy{max-width:760px}

/* Breadcrumb */
.moose-gtr-hero__crumbs{font-size:13px;margin:0 0 22px;color:var(--pr-stone)}
.moose-gtr-hero__crumbs a{color:var(--pr-stone);text-decoration:none}
.moose-gtr-hero__crumbs a:hover{text-decoration:underline}

/* Eyebrow: 15px / 800, grey on black (Website Rules) */
.moose-gtr-hero__eyebrow{
  display:inline-block;
  margin:0 0 14px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pr-stone);
}

/* H1: Anton, 75px desktop, no weight (Website Rules / Brand Guide) */
.moose-gtr-hero__title{
  margin:0 0 22px;
  font-family:"Anton",Impact,sans-serif;
  font-size:75px;
  line-height:1.02;
  text-transform:uppercase;
  color:var(--pr-white)!important;
}

/* Paragraph: 15px, no weight */
.moose-gtr-hero__lead{margin:0;max-width:620px;font-size:15px;color:#dcd9d2}

/* Buttons row */
.moose-gtr-hero__btns{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:30px}

/* ---------- Button (anatomy from Website Rules) ---------- */
.moose-gtr-hero .moose-gtr-price__btn{
  display:inline-flex;align-items:center;gap:14px;
  color:var(--pr-white);           /* white label on the black hero for contrast */
  font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.04em;
  text-decoration:none;text-transform:uppercase;
  transition:color .3s ease,transform .3s ease;
}
.moose-gtr-hero .moose-gtr-price__arrow{
  width:46px;height:46px;flex:0 0 46px;
  display:grid;place-items:center;
  color:var(--pr-pale-green);      /* lighter arrow so it reads on black */
  border:2px solid var(--pr-pale-green);   /* pre-hover border: Fade Green */
  border-radius:50%;
  background:transparent;          /* pre-hover background: transparent */
  transition:color .25s ease,background-color .3s ease,transform .3s ease;
}
.moose-gtr-hero .moose-gtr-price__arrow svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:color .25s ease,background-color .25s ease,transform .25s ease;
}
.moose-gtr-hero .moose-gtr-price__btn:hover{color:var(--pr-pale-green)}
.moose-gtr-hero .moose-gtr-price__btn:hover .moose-gtr-price__arrow{
  color:var(--pr-green);
  background:var(--pr-green);      /* hover background: Dark Green */
  border-color:var(--pr-green);    /* hover border: Dark Green */
  transform:translatey(4px);
}

.moose-gtr-hero .moose-gtr-price__btn:hover{color:var(--pr-pale-green)}
.moose-gtr-hero .moose-gtr-price__btn:hover .moose-gtr-price__arrow{
  color:var(--pr-green);
  background:var(--pr-green);      /* hover background: Dark Green */
  border-color:var(--pr-green);    /* hover border: Dark Green */
  transform:translatex(4px);
}
.moose-gtr-hero .moose-gtr-price__btn:hover .moose-gtr-price__arrow svg{
  color:var(--pr-white);           /* hover arrow: White */
  background:transparent;
  transform:translatex(4px);
}
.moose-gtr-hero a:focus-visible{outline:3px solid var(--pr-white);outline-offset:4px;border-radius:4px}

/* Tagline */
.moose-gtr-hero__tagline{
  margin:28px 0 0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pr-stone);
}
.moose-gtr-hero__tagline span{margin:0 10px;color:var(--pr-pale-green);opacity:.6}

/* ===================== TABLET ===================== */
@media (max-width:1024px){
  .moose-gtr-hero{padding:120px 24px 110px}
  .moose-gtr-hero__title{font-size:65px}
  .moose-gtr-hero__eyebrow{font-size:15px}
}

/* ===================== MOBILE ===================== */
@media (max-width:767px){
  .moose-gtr-hero{padding:80px 16px 72px;background-position:var(--hero-pos-mobile,var(--hero-pos,center))}
  .moose-gtr-hero::after{display:none}
  .moose-gtr-hero::before{background:rgba(0,0,0,.78)}
  .moose-gtr-hero__title{font-size:45px}
  .moose-gtr-hero__btns{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  .moose-gtr-hero *{transition:none !important}
}/* End custom CSS */