.why-scs .scs-name-hero{isolation:isolate;color:#fff;background:#071b2c;position:relative;overflow:clip}.why-scs .scs-name-hero:before,.why-scs .scs-name-hero:after{content:"";pointer-events:none;position:absolute;inset:0}.why-scs .scs-name-hero:before{z-index:-2;background:url(/images/roofing-hero-project.webp) 65% 55%/cover no-repeat}.why-scs .scs-name-hero:after{z-index:-1;background:linear-gradient(#071b2c59 0%,#0000 30%,#071b2c33 72%,#071b2c 100%),radial-gradient(48% 65% at 77% 43%,#071b2cd9 0%,#071b2c99 40%,#0000 78%),linear-gradient(90deg,#071b2c 3%,#071b2cf7 34%,#071b2c80 64%,#071b2c3d 100%)}.why-scs .scs-name-layout{z-index:0;grid-template-columns:46% 54%;align-items:center;width:min(1440px,100% - 112px);min-height:730px;margin:auto;display:grid;position:relative}.why-scs .scs-name-copy{z-index:2;padding:70px 0 64px;position:relative}.why-scs .scs-name-eyebrow{color:#d2ae69;letter-spacing:.16em;text-transform:uppercase;margin:0 0 30px;font-size:.75rem;font-weight:600}.why-scs .scs-name-hero h1{letter-spacing:-.015em;text-wrap:nowrap;font-size:clamp(4.2rem,7.5vw,7.5rem);line-height:.92}.why-scs .scs-name-hero h1>span{color:#d2ae69}.why-scs .scs-name-intro{color:#bdcbd5;max-width:35ch;margin:30px 0;font-size:1.0625rem;line-height:1.65}.why-scs .scs-name-cta{color:#071b2c;background:#d2ae69;align-items:center;gap:35px;min-height:58px;padding:16px 23px;font-weight:600;text-decoration:none;display:inline-flex}.why-scs .scs-name-cta:hover{background:#e3c38c}.why-scs .scs-name-proof-link{color:#e9eef0;align-items:center;gap:17px;width:fit-content;min-height:48px;margin-top:14px;font-size:.9375rem;text-decoration:none;display:flex}.why-scs .scs-name-proof-link svg{color:#d2ae69}.why-scs .scs-name-hero :is(a,button):focus-visible{outline-color:#edca8a}.why-scs .scs-name-art{--scs-signature-duration:14s;flex-direction:column;align-items:center;min-width:0;padding:24px 0 24px 30px;display:flex;position:relative}.why-scs .scs-name-house{width:100%;max-width:670px;height:auto;display:block;overflow:visible}.why-scs :is(.scs-name-foundation,.scs-name-walls,.scs-name-details,.scs-name-roof,.scs-name-lettering){transform-box:fill-box;transform-origin:50%}.why-scs :is(.scs-name-walls,.scs-name-details){opacity:0}.why-scs .scs-name-trades{font-family:var(--font-why-display),sans-serif;letter-spacing:3.5px;text-transform:uppercase;font-size:19px;font-weight:600}.why-scs .scs-name-promise{text-align:center;margin-top:-10px}.why-scs .scs-name-promise p{font-family:var(--font-why-display),sans-serif;text-transform:uppercase;letter-spacing:-.015em;margin:0 0 13px;font-size:clamp(2rem,3.2vw,3.2rem);font-weight:600;line-height:1}.why-scs .scs-name-promise p span{color:#d2ae69}.why-scs .scs-name-promise>span{color:#bdcbd5;font-size:1rem}.why-scs .scs-name-playback{justify-content:center;min-height:44px;margin-top:20px;display:flex}.why-scs .scs-name-playback button{color:#9dafbb;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;min-width:76px;min-height:44px;padding:10px 14px;font-size:.75rem;display:inline-flex}.why-scs .scs-name-playback button:hover{color:#fff}.why-scs .scs-name-playback svg{color:#d2ae69}.why-scs .scs-name-location{z-index:0;color:#a9bac7;letter-spacing:.015em;border-top:1px solid #2b3d4d;justify-content:space-between;gap:20px;padding:20px max(56px,50% - 720px);font-size:.75rem;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.why-scs .scs-name-hero[data-motion=true] .scs-name-foundation{animation:scs-name-foundation var(--scs-signature-duration) ease infinite both}.why-scs .scs-name-hero[data-motion=true] .scs-name-walls{animation:scs-name-walls var(--scs-signature-duration) cubic-bezier(.16,1,.3,1) infinite both}.why-scs .scs-name-hero[data-motion=true] .scs-name-details{animation:scs-name-details var(--scs-signature-duration) ease infinite both}.why-scs .scs-name-hero[data-motion=true] .scs-name-lettering{animation:scs-name-lettering var(--scs-signature-duration) cubic-bezier(.22,1,.36,1) infinite both}.why-scs .scs-name-hero[data-playing=false] :is(.scs-name-foundation,.scs-name-walls,.scs-name-details,.scs-name-roof,.scs-name-lettering){animation-play-state:paused}.why-scs .scs-name-cta svg,.why-scs .scs-name-proof-link svg{transition:transform .25s}.why-scs .scs-name-cta:hover svg{transform:translate(5px)}.why-scs .scs-name-proof-link:hover svg{transform:translateY(4px)}}@keyframes scs-name-foundation{0%,to{opacity:0;transform:scaleX(.5)}10%,88%{opacity:1;transform:scaleX(1)}}@keyframes scs-name-walls{0%,3%{opacity:0;transform:translateY(24px)}15%,32%{opacity:1;transform:translateY(0)}48%,to{opacity:0;transform:translateY(0)}}@keyframes scs-name-details{0%,9%{opacity:0}20%,32%{opacity:1}42%,to{opacity:0}}@keyframes scs-name-lettering{0%,41%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(7px)}44%{opacity:1}60%,88%{opacity:1;clip-path:inset(0);transform:translateY(0)}98%,to{opacity:0;clip-path:inset(0);transform:translateY(0)}}@media (max-width:1100px){.why-scs .scs-name-layout{grid-template-columns:47% 53%;width:calc(100% - 72px);min-height:690px}.why-scs .scs-name-copy{padding-block:60px}.why-scs .scs-name-hero h1{font-size:7.5vw}.why-scs .scs-name-intro{max-width:31ch;font-size:1rem}.why-scs .scs-name-location{padding-inline:36px}}@media (max-width:760px){.why-scs .scs-name-hero:before{background-position:62%;top:35%}.why-scs .scs-name-hero:after{background:linear-gradient(#071b2c 0% 34%,#071b2ca6 58%,#071b2c4d 75%,#071b2c 96%),radial-gradient(68% 29% at 50% 69%,#071b2cdb 0%,#071b2c99 48%,#071b2c2e 100%)}.why-scs .scs-name-layout{grid-template-columns:1fr;width:100%;min-height:0}.why-scs .scs-name-copy{padding:46px 24px 0}.why-scs .scs-name-eyebrow{margin-bottom:24px;font-size:.6875rem}.why-scs .scs-name-hero h1{font-size:clamp(3.8rem,15.3vw,7rem)}.why-scs .scs-name-intro{max-width:37ch;margin-block:24px}.why-scs .scs-name-art{padding:22px 0 20px}.why-scs .scs-name-house{width:min(100%,520px)}.why-scs .scs-name-promise{margin:0 20px}.why-scs .scs-name-promise p{margin-bottom:9px;font-size:clamp(1.7rem,7.5vw,2.8rem)}.why-scs .scs-name-promise>span{font-size:.875rem}.why-scs .scs-name-playback{margin-top:12px}.why-scs .scs-name-location{padding:18px 24px;font-size:.6875rem;display:block}.why-scs .scs-name-location span{display:block}.why-scs .scs-name-location span+span{margin-top:6px}}
