.st-film-frame{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--line);background:#071a2e url(/images/qrs-film-poster.webp) 50%/cover no-repeat;position:relative;overflow:hidden}.st-film-frame video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.st-film-ctrl{gap:8px;display:flex;position:absolute;bottom:12px;left:12px}.st-film-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;min-width:44px;height:44px;font:600 14px/1 var(--font-text),sans-serif;cursor:pointer;background:#071a2e73;border:1px solid #ffffff59;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 16px;transition:background .2s;display:inline-flex}.st-film-btn svg{fill:currentColor;width:16px;height:16px}.st-film-re{width:44px;padding:0}.st-film-re svg{fill:none}@media (hover:hover){.st-film-btn:hover{background:#071a2eb3}}.st-film-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media (min-width:621px){.st-film-ctrl{bottom:20px;left:20px}}.st-film-frame:not(.is-started):before{content:"";pointer-events:none;background:linear-gradient(#071a2e00 55%,#071a2e47);position:absolute;inset:0}.st-film-play{color:#fff;cursor:pointer;text-align:left;background:0 0;border:0;justify-content:flex-start;align-items:flex-end;gap:14px;padding:16px;display:flex;position:absolute;inset:0}.st-film-play-icon{background:var(--gold);color:#071a2e;border-radius:50%;flex:none;place-items:center;width:56px;height:56px;transition:transform .3s cubic-bezier(.17,.84,.44,1);display:grid;box-shadow:0 0 #d4b5728c}.st-film-play-icon svg{fill:currentColor;width:22px;height:22px;margin-left:3px}.st-film-play-text{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 16px/1.1 var(--font-text),sans-serif;letter-spacing:-.01em;background:#071a2ed1;border-radius:999px;gap:5px;padding:11px 20px;display:grid}.st-film-play-text small{font:500 12px/1 var(--font-text),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fffc}.st-film-play:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:var(--radius)}@media (hover:hover){.st-film-play:hover .st-film-play-icon{transform:scale(1.08)}}@media (prefers-reduced-motion:no-preference){.st-film-play-icon{animation:2.6s ease-out infinite filmPulse}}@keyframes filmPulse{0%{box-shadow:0 0 #d4b5728c}70%,to{box-shadow:0 0 0 18px #d4b57200}}@media (min-width:621px){.st-film-play{padding:28px}.st-film-play-icon{width:76px;height:76px}.st-film-play-icon svg{width:28px;height:28px}.st-film-play-text{padding:13px 24px;font-size:19px}}.st-film-frame.is-started video{cursor:pointer}@media print{.st-film-ctrl,.st-film-play{display:none}}
.splash{display:none}html.splash-on .splash{z-index:10050;color:#fff;pointer-events:none;background:radial-gradient(120% 90% at 70% 8%,#0b3460 0%,#071a2e 58%,#050f1c 100%);place-items:center;display:grid;position:fixed;inset:0}html.splash-on .splash:after{content:"";background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);opacity:0;height:2px;position:absolute;bottom:0;left:0;right:0}.splash-in{text-align:center;justify-items:center;gap:20px;padding:0 24px;display:grid}.splash-mark{aspect-ratio:372/195;width:clamp(118px,13vw,176px)}html.splash-on .splash-mark{background:url(/images/logo/qrs-mark.webp) 50%/contain no-repeat;animation:.95s cubic-bezier(.65,0,.35,1) 80ms forwards splashWipe;-webkit-mask-image:linear-gradient(65deg,#000 42%,#0000 58%);mask-image:linear-gradient(65deg,#000 42%,#0000 58%);-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-size:300% 100%;mask-size:300% 100%}.splash-name:after{content:"Quality Roofing Specialists";font:600 clamp(12px,1.05vw,15px)/1.2 var(--font-text),sans-serif;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-right:-.42em;display:block}html.splash-on .splash-name{clip-path:inset(0 50%);animation:.9s cubic-bezier(.17,.84,.44,1) .5s forwards splashOpen}.splash-bar{background:#ffffff29;width:clamp(150px,14vw,200px);height:1px;display:block;overflow:hidden}.splash-bar i{background:var(--gold);transform-origin:0;height:100%;display:block;transform:scaleX(0)}html.splash-on .splash-bar i{animation:1.3s cubic-bezier(.45,.05,.25,1) .2s forwards splashFill}.splash-place:after{content:"Los Angeles · Orange County";font:400 clamp(12px,.95vw,14px)/1 var(--font-text),sans-serif;letter-spacing:.14em;color:#ffffff9e}html.splash-on .splash-place{opacity:0;animation:.7s cubic-bezier(.17,.84,.44,1) .8s forwards splashUp}@keyframes splashWipe{to{-webkit-mask-position:0 0;mask-position:0 0}}@keyframes splashOpen{to{clip-path:inset(0)}}@keyframes splashFill{to{transform:scaleX(1)}}@keyframes splashUp{0%{opacity:0;translate:0 22px}to{opacity:1;translate:0}}html.splash-out .splash{transition:transform .9s cubic-bezier(.76,0,.24,1) 50ms;transform:translateY(-101%)}html.splash-out .splash:after{opacity:1;transition:opacity .2s}html.splash-out .splash-in{opacity:0;transition:opacity .35s,translate .5s cubic-bezier(.76,0,.24,1);translate:0 -28px}html.splash-fast .splash{opacity:0;transition:opacity .35s;transform:none}html.splash-on .promo-home .promo-copy>*,html.splash-on .st-hero-inner>*{opacity:0}html.splash-out .promo-home .promo-copy>*,html.splash-out .st-hero-inner>*{animation:.8s cubic-bezier(.17,.84,.44,1) .42s both splashUp}html.splash-out :is(.promo-home .promo-title,.st-hero-title){animation:.95s cubic-bezier(.17,.84,.44,1) .3s both headRise}html.splash-out .promo-home .promo-copy>:nth-child(3),html.splash-out .st-hero-inner>:nth-child(3){animation-delay:.52s}html.splash-out .promo-home .promo-copy>:nth-child(4),html.splash-out .st-hero-inner>:nth-child(4){animation-delay:.62s}html.splash-out .promo-home .promo-copy>:nth-child(n+5){animation-delay:.72s}html:is(.splash-on,.splash-out) .hand-draw path{animation-delay:1.25s}html:is(.splash-on,.splash-out) .hand-draw .hl-second{animation-delay:1.75s}html.splash-on:not(.splash-out) .hand-draw path{animation-play-state:paused}@media print{.splash{display:none!important}}