
.page-hero{position:relative!important;overflow:hidden!important;isolation:isolate!important}
.page-hero>.container{position:relative!important;z-index:30!important}
.page-hero>*:not(.mg-hero-build-overlay){position:relative!important;z-index:30!important}
.mg-hero-build-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;z-index:1!important;pointer-events:none!important;overflow:hidden!important;display:block!important}
.mg-hero-build-overlay *{box-sizing:border-box}
.mg-fascia-strip{position:absolute;left:0;right:0;top:0;height:24px;background:linear-gradient(180deg,#fff,#c8d2de);border-bottom:2px solid rgba(11,43,92,.38);box-shadow:0 6px 16px rgba(0,0,0,.16)}
.mg-attachment-line{position:absolute;left:0;right:0;top:24px;height:4px;background:linear-gradient(90deg,#0b2b5c,#ffffff,#0b2b5c);opacity:.34}

/* Cartoon K-style gutter: flat back/top with ogee-style face. */
.mg-k-gutter{position:absolute;height:38px;left:70px;right:70px;top:27px;background:#b89470;border:1px solid rgba(88,59,36,.58);border-top:4px solid #fff;border-radius:2px 2px 3px 3px;box-shadow:0 7px 15px rgba(0,0,0,.22);overflow:visible}
.mg-k-gutter .mg-top-lip{position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(180deg,#ead8c3,#c5a37d);border-bottom:1px solid rgba(11,43,92,.24)}
.mg-k-gutter .mg-ogee-upper{position:absolute;left:0;right:0;top:7px;height:9px;background:linear-gradient(135deg,#ead8c3,#9f7954);clip-path:polygon(0 0,100% 0,99% 100%,1.5% 68%);border-bottom:1px solid rgba(11,43,92,.22)}
.mg-k-gutter .mg-ogee-cove{position:absolute;left:0;right:0;top:15px;height:6px;background:linear-gradient(180deg,#7d5839,#d2b28d);opacity:.82}
.mg-k-gutter .mg-ogee-bulge{position:absolute;left:0;right:0;top:20px;height:10px;background:linear-gradient(135deg,#d9bea0,#8f6847);clip-path:polygon(1% 0,99% 0,100% 78%,0 100%);border-top:1px solid rgba(255,255,255,.65);border-bottom:1px solid rgba(11,43,92,.24)}
.mg-k-gutter .mg-bottom-lip{position:absolute;left:0;right:0;bottom:0;height:9px;background:linear-gradient(180deg,#b28b63,#6f4e33);clip-path:polygon(0 0,100% 0,98.5% 100%,1.5% 100%);border-top:1px solid rgba(255,255,255,.35)}
.mg-k-profile{position:absolute;top:-4px;width:34px;height:45px;background:linear-gradient(135deg,#ead8c3 0%,#c5a37d 42%,#735236 100%);border:1px solid rgba(11,43,92,.55);clip-path:polygon(0 0,100% 0,100% 17%,82% 25%,100% 43%,72% 57%,89% 79%,76% 100%,0 100%,13% 80%,0 61%,18% 44%,0 26%);box-shadow:0 5px 10px rgba(0,0,0,.23);z-index:2}
.mg-k-profile-left{left:-20px}.mg-k-profile-right{right:-20px;transform:scaleX(-1)}

.mg-final-gutter{opacity:0;animation:mgShowFinalGutter 38s ease .35s forwards}
.mg-carried-gutter{opacity:0;top:calc(100% - 84px);animation:mgCarryGutter 38s ease .35s forwards}

.mg-downspout{position:absolute;top:64px;width:16px;height:calc(100% - 64px);min-height:130px;background:linear-gradient(90deg,#ead8c3,#a97e59,#d2b28d);border:1px solid rgba(88,59,36,.55);box-shadow:4px 7px 14px rgba(0,0,0,.18);opacity:0;transform:translateY(-16px);animation:mgShowDownspouts 38s ease .35s forwards}
.mg-downspout-left{left:94px}.mg-downspout-right{right:94px}
.mg-carried-downspout{position:absolute;top:64px;width:16px;height:calc(100% - 64px);min-height:130px;background:linear-gradient(90deg,#ead8c3,#a97e59,#d2b28d);border:1px solid rgba(88,59,36,.52);box-shadow:3px 5px 10px rgba(0,0,0,.18);opacity:0}
.mg-carried-downspout-left{left:94px;animation:mgLeftCarryDownspout 38s ease .35s forwards}
.mg-carried-downspout-right{right:94px;animation:mgRightCarryDownspout 38s ease .35s forwards}

.mg-ladder{position:absolute;top:36px;bottom:8px;width:58px;min-height:175px;border-left:6px solid #fff;border-right:6px solid #fff;background:repeating-linear-gradient(180deg,transparent 0 16px,rgba(255,255,255,.96) 16px 22px,transparent 22px 38px);filter:drop-shadow(0 7px 6px rgba(0,0,0,.34));opacity:0}
.mg-ladder-left{left:156px;transform-origin:50% 0;animation:mgLeftLadderSet 38s ease .35s forwards}
.mg-ladder-right{right:156px;transform-origin:50% 0;animation:mgRightLadderSet 38s ease .35s forwards}

/* Rounded 3D-ish cartoon installers. */
.mg-worker{position:absolute;width:70px;height:112px;bottom:18px;opacity:0;filter:drop-shadow(0 8px 7px rgba(0,0,0,.32))}
.mg-worker-left{left:0;animation:mgLeftWorkerMove 38s ease .35s forwards}
.mg-worker-right{right:0;transform:scaleX(-1);animation:mgRightWorkerMove 38s ease .35s forwards}
.mg-worker:before{content:"";position:absolute;left:17px;top:39px;width:35px;height:44px;background:linear-gradient(90deg,#071f44 0%,#0b2b5c 46%,#17457b 100%);border-radius:18px 18px 13px 13px;box-shadow:inset -7px 0 0 rgba(255,255,255,.14),inset 6px 0 0 rgba(0,0,0,.13),0 0 0 3px rgba(255,255,255,.85)}
.mg-hardhat{position:absolute;left:15px;top:0;width:40px;height:19px;background:linear-gradient(90deg,#b9831e,#d69b2d,#f0bb4c);border:2px solid #0b2b5c;border-radius:24px 24px 6px 6px;box-shadow:inset -6px 0 0 rgba(0,0,0,.12)}
.mg-hardhat:after{content:"";position:absolute;left:2px;right:2px;bottom:-5px;height:5px;background:#d69b2d;border:2px solid #0b2b5c;border-top:0;border-radius:0 0 9px 9px}
.mg-head{position:absolute;left:20px;top:16px;width:30px;height:29px;background:radial-gradient(circle at 35% 30%,#ffe2c4,#f7d7b7 56%,#d8a985 100%);border:2px solid #0b2b5c;border-radius:50%;box-shadow:inset -6px -2px 0 rgba(0,0,0,.08)}
.mg-head:after{content:"";position:absolute;left:7px;top:10px;width:3px;height:3px;border-radius:50%;background:#0b2b5c;box-shadow:10px 0 0 #0b2b5c,5px 7px 0 -1px #0b2b5c}
.mg-torso{position:absolute;left:25px;top:45px;width:20px;height:38px;background:linear-gradient(90deg,#081d3e,#0b2b5c 55%,#28629c);border-radius:12px;box-shadow:inset -5px 0 0 rgba(255,255,255,.12),0 0 0 3px rgba(255,255,255,.88)}
.mg-torso:after{content:"";position:absolute;left:4px;right:4px;top:9px;height:3px;background:rgba(255,255,255,.75);border-radius:999px}
.mg-arm{position:absolute;top:53px;width:31px;height:8px;background:linear-gradient(90deg,#071f44,#0b2b5c,#17457b);border-radius:999px;transform-origin:5px 4px;box-shadow:inset -4px 0 0 rgba(255,255,255,.14)}
.mg-arm-left{left:6px;transform:rotate(-30deg)}.mg-arm-right{left:33px;transform:rotate(30deg)}
.mg-arm:after{content:"";position:absolute;right:-6px;top:-2px;width:10px;height:10px;border-radius:50%;background:#f7d7b7;border:1px solid #0b2b5c}
.mg-leg{position:absolute;top:78px;width:10px;height:33px;background:linear-gradient(90deg,#071f44,#0b2b5c,#17457b);border-radius:999px;transform-origin:top;box-shadow:inset -3px 0 0 rgba(255,255,255,.12)}
.mg-leg-left{left:25px;transform:rotate(16deg)}.mg-leg-right{left:39px;transform:rotate(-16deg)}
.mg-leg:after{content:"";position:absolute;bottom:-3px;left:-3px;width:17px;height:7px;background:#081a36;border-radius:999px}
.mg-worker-left .mg-arm-right,.mg-worker-right .mg-arm-right{animation:mgWave 38s ease .35s forwards}

@keyframes mgShowFinalGutter{0%,51%{opacity:0}54%,100%{opacity:.98}}
@keyframes mgShowDownspouts{0%,75%{opacity:0;transform:translateY(-16px)}80%,100%{opacity:.94;transform:translateY(0)}}
@keyframes mgCarryGutter{
  0%,31%{opacity:0;top:calc(100% - 84px)}
  36%{opacity:1;top:calc(100% - 84px)}
  48%{opacity:1;top:27px}
  54%{opacity:.96;top:27px}
  56%,100%{opacity:0;top:27px}
}
/* Full-size carried downspouts: they do not grow later. */
@keyframes mgLeftCarryDownspout{
  0%,64%{opacity:0;left:-80px;top:64px}
  67%{opacity:1;left:94px;top:64px}
  75%{opacity:1;left:94px;top:64px}
  79%{opacity:.9;left:94px;top:64px}
  81%,100%{opacity:0;left:94px;top:64px}
}
@keyframes mgRightCarryDownspout{
  0%,64%{opacity:0;right:-80px;top:64px}
  67%{opacity:1;right:94px;top:64px}
  75%{opacity:1;right:94px;top:64px}
  79%{opacity:.9;right:94px;top:64px}
  81%,100%{opacity:0;right:94px;top:64px}
}
/* Ladders stay put until workers are back at the bottom, then leave with them. */
@keyframes mgLeftLadderSet{
  0%{opacity:0;transform:translate(-260px,120%) rotate(-12deg)}
  8%{opacity:1;transform:translate(-120px,72%) rotate(-10deg)}
  18%{opacity:1;transform:translate(0,0) rotate(2deg)}
  93%{opacity:1;transform:translate(0,0) rotate(2deg)}
  96%{opacity:1;transform:translate(-120px,72%) rotate(-10deg)}
  100%{opacity:0;transform:translate(-280px,120%) rotate(-12deg)}
}
@keyframes mgRightLadderSet{
  0%{opacity:0;transform:translate(260px,120%) rotate(12deg)}
  8%{opacity:1;transform:translate(120px,72%) rotate(10deg)}
  18%{opacity:1;transform:translate(0,0) rotate(-2deg)}
  93%{opacity:1;transform:translate(0,0) rotate(-2deg)}
  96%{opacity:1;transform:translate(120px,72%) rotate(10deg)}
  100%{opacity:0;transform:translate(280px,120%) rotate(12deg)}
}
@keyframes mgLeftWorkerMove{
  0%{opacity:0;left:-90px;bottom:-20px;transform:scaleX(1)}
  8%{opacity:1;left:60px;bottom:10px;transform:scaleX(1)}
  18%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  24%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  29%{opacity:0;left:156px;bottom:-130px;transform:scaleX(1)}
  34%{opacity:0;left:-90px;bottom:-120px;transform:scaleX(1)}
  37%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  48%{opacity:1;left:156px;bottom:calc(100% - 132px);transform:scaleX(1)}
  55%{opacity:1;left:156px;bottom:calc(100% - 132px);transform:scaleX(1)}
  62%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  65%{opacity:0;left:156px;bottom:-130px;transform:scaleX(1)}
  67%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  75%{opacity:1;left:156px;bottom:calc(100% - 132px);transform:scaleX(1)}
  79%{opacity:1;left:156px;bottom:calc(100% - 132px);transform:scaleX(1)}
  84%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  88%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  91%{opacity:1;left:156px;bottom:18px;transform:scaleX(1)}
  94%{opacity:1;left:60px;bottom:10px;transform:scaleX(1)}
  100%{opacity:0;left:-95px;bottom:-25px;transform:scaleX(1)}
}
@keyframes mgRightWorkerMove{
  0%{opacity:0;right:-90px;bottom:-20px;transform:scaleX(-1)}
  8%{opacity:1;right:60px;bottom:10px;transform:scaleX(-1)}
  18%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  24%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  29%{opacity:0;right:156px;bottom:-130px;transform:scaleX(-1)}
  34%{opacity:0;right:-90px;bottom:-120px;transform:scaleX(-1)}
  37%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  48%{opacity:1;right:156px;bottom:calc(100% - 132px);transform:scaleX(-1)}
  55%{opacity:1;right:156px;bottom:calc(100% - 132px);transform:scaleX(-1)}
  62%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  65%{opacity:0;right:156px;bottom:-130px;transform:scaleX(-1)}
  67%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  75%{opacity:1;right:156px;bottom:calc(100% - 132px);transform:scaleX(-1)}
  79%{opacity:1;right:156px;bottom:calc(100% - 132px);transform:scaleX(-1)}
  84%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  88%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  91%{opacity:1;right:156px;bottom:18px;transform:scaleX(-1)}
  94%{opacity:1;right:60px;bottom:10px;transform:scaleX(-1)}
  100%{opacity:0;right:-95px;bottom:-25px;transform:scaleX(-1)}
}
@keyframes mgWave{
  0%,86%{transform:rotate(30deg)}
  88%{transform:rotate(-68deg)}
  90%{transform:rotate(18deg)}
  91.5%{transform:rotate(-68deg)}
  93%,100%{transform:rotate(30deg)}
}
/* Mobile: workers use the mobile ladder positions, so they climb the ladders instead of floating up the middle. */
@media(max-width:620px){.mg-hero-build-overlay{opacity:.36}
  .mg-ladder,.mg-worker{opacity:.32!important}
  .mg-worker{width:54px;height:92px}
  .mg-worker:before{left:13px;width:30px;height:38px}
  .mg-head{left:15px;width:26px;height:26px}
  .mg-hardhat{left:12px;width:34px}
  .mg-torso{left:20px;width:18px;height:32px}
  .mg-ladder{width:42px}
  .mg-ladder-left{left:86px}
  .mg-ladder-right{right:86px}
  .mg-carried-gutter,.mg-final-gutter{left:24px;right:24px}
  .mg-downspout-left{left:34px}.mg-downspout-right{right:34px}
  .mg-carried-downspout-left{left:34px}.mg-carried-downspout-right{right:34px}
  .mg-worker-left{animation-name:mgLeftWorkerMoveMobile}
  .mg-worker-right{animation-name:mgRightWorkerMoveMobile}
  @keyframes mgLeftWorkerMoveMobile{
    0%{opacity:0;left:-76px;bottom:-20px;transform:scaleX(1)}
    8%{opacity:1;left:30px;bottom:10px;transform:scaleX(1)}
    18%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    24%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    29%{opacity:0;left:86px;bottom:-110px;transform:scaleX(1)}
    34%{opacity:0;left:-76px;bottom:-110px;transform:scaleX(1)}
    37%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    48%{opacity:1;left:86px;bottom:calc(100% - 112px);transform:scaleX(1)}
    55%{opacity:1;left:86px;bottom:calc(100% - 112px);transform:scaleX(1)}
    62%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    65%{opacity:0;left:86px;bottom:-110px;transform:scaleX(1)}
    67%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    75%{opacity:1;left:86px;bottom:calc(100% - 112px);transform:scaleX(1)}
    79%{opacity:1;left:86px;bottom:calc(100% - 112px);transform:scaleX(1)}
    84%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    88%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    91%{opacity:1;left:86px;bottom:18px;transform:scaleX(1)}
    94%{opacity:1;left:30px;bottom:10px;transform:scaleX(1)}
    100%{opacity:0;left:-80px;bottom:-25px;transform:scaleX(1)}
  }
  @keyframes mgRightWorkerMoveMobile{
    0%{opacity:0;right:-76px;bottom:-20px;transform:scaleX(-1)}
    8%{opacity:1;right:30px;bottom:10px;transform:scaleX(-1)}
    18%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    24%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    29%{opacity:0;right:86px;bottom:-110px;transform:scaleX(-1)}
    34%{opacity:0;right:-76px;bottom:-110px;transform:scaleX(-1)}
    37%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    48%{opacity:1;right:86px;bottom:calc(100% - 112px);transform:scaleX(-1)}
    55%{opacity:1;right:86px;bottom:calc(100% - 112px);transform:scaleX(-1)}
    62%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    65%{opacity:0;right:86px;bottom:-110px;transform:scaleX(-1)}
    67%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    75%{opacity:1;right:86px;bottom:calc(100% - 112px);transform:scaleX(-1)}
    79%{opacity:1;right:86px;bottom:calc(100% - 112px);transform:scaleX(-1)}
    84%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    88%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    91%{opacity:1;right:86px;bottom:18px;transform:scaleX(-1)}
    94%{opacity:1;right:30px;bottom:10px;transform:scaleX(-1)}
    100%{opacity:0;right:-80px;bottom:-25px;transform:scaleX(-1)}
  }
}
@media (prefers-reduced-motion: reduce){
  .mg-hero-build-overlay{display:none!important}
  .award-css-track,.project-marquee-track{animation:none!important;transform:none!important}
  *,*::before,*::after{scroll-behavior:auto!important}
}
