@font-face{font-family:'Barlow Condensed';src:url(../../fonts/concepts/barlow.woff2) format('woff2');font-weight:700;font-display:swap}
.st-roof{--ba:'Barlow Condensed',var(--body);background:var(--cr-storm);color:var(--cr-white)}
.st-roof h1,.st-roof h2{font-family:var(--ba);font-weight:700;text-transform:uppercase;letter-spacing:-.005em}
.rf-hero{position:relative;min-height:calc(100vh - 2.8rem);min-height:calc(100svh - 2.8rem);overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--cr-storm),var(--cr-storm-b))}
.st-roof .st-nav{position:relative;z-index:2;font-size:max(11px,.76rem);letter-spacing:.12em;text-transform:uppercase}
.st-roof .st-nav b{font:700 1.5rem/1 var(--ba);letter-spacing:.02em}
.rf-cloud{position:absolute;left:-30%;width:160%;height:60%;background:radial-gradient(38% 60% at 30% 50%,var(--cr-storm-c),transparent),radial-gradient(30% 50% at 70% 42%,var(--cr-storm-c),transparent);opacity:.6}
.rf-cloud.a{top:-12%}.rf-cloud.b{top:12%;opacity:.42}
html.motion .rf-cloud.a{animation:rf-drift 26s linear infinite alternate}
html.motion .rf-cloud.b{animation:rf-drift 38s linear infinite alternate-reverse}
@keyframes rf-drift{to{transform:translateX(16%)}}
.rf-rain{position:absolute;inset:-20% 0;background-image:repeating-linear-gradient(104deg,transparent 0 13px,var(--cr-grey) 13px 14px,transparent 14px 37px);opacity:.14;pointer-events:none}
html.motion .rf-rain{animation:rf-rain .5s linear infinite}
@keyframes rf-rain{to{transform:translate(-18px,74px)}}
.rf-flash{position:absolute;inset:0;background:var(--cr-white);opacity:0;pointer-events:none}
html.motion .rf-flash{animation:rf-flash 9s linear infinite}
@keyframes rf-flash{0%,91%,93.5%,95%,100%{opacity:0}92%{opacity:.14}94%{opacity:.26}}
.st-roof h1{position:relative;z-index:1;margin:auto 0 0;padding:0 var(--st-pad) clamp(1.4rem,3vw,4rem);font-size:min(21vw,31vh);line-height:.86}
.st-roof h1 em{font-style:normal;color:var(--cr-bolt)}
.rf-aim{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,6rem);align-items:center;padding:clamp(2.6rem,5vw,8rem) var(--st-pad)}
.rf-map svg{display:block;width:100%;height:auto}
.rf-rd{fill:none;stroke:var(--cr-line);stroke-width:3}
.rf-h{fill:var(--cr-house);transition:fill .4s var(--ease)}
.rf-h.on{fill:var(--cr-bolt)}
.rf-c{fill:var(--cr-white)}
.st-roof h2{font-size:clamp(3rem,7vw,17vh);line-height:.9;margin:0 0 1rem}
.rf-budget{display:block;margin:0 0 1rem}
.rf-budget span{display:block;font-size:max(11px,.76rem);color:var(--cr-grey);margin-bottom:.3rem}
.rf-budget output{display:block;font:700 clamp(2.6rem,5vw,10rem)/1 var(--ba)}
.rf-budget input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:2.4rem;margin:.3rem 0 0;background:none;cursor:ew-resize}
.rf-budget input::-webkit-slider-runnable-track{height:2px;background:var(--cr-grey)}
.rf-budget input::-moz-range-track{height:2px;background:var(--cr-grey)}
.rf-budget input::-webkit-slider-thumb{-webkit-appearance:none;width:1.2rem;height:2rem;margin-top:-.95rem;background:var(--cr-bolt)}
.rf-budget input::-moz-range-thumb{width:1.2rem;height:2rem;border:0;background:var(--cr-bolt)}
.rf-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 1rem;border-top:1px solid var(--cr-line);padding-top:.9rem}
.rf-stats dt{font-size:max(11px,.74rem);color:var(--cr-grey);margin-bottom:.3rem}
.rf-stats dd{margin:0;font:700 clamp(1.8rem,3vw,6rem)/1 var(--ba);font-variant-numeric:lining-nums}
.rf-note{font-size:max(11px,.78rem);color:var(--cr-grey);margin:0}
.rf-reels{padding:0 var(--st-pad) clamp(2.6rem,5vw,8rem)}
.rf-row{display:flex;gap:clamp(.7rem,2vw,3rem);justify-content:flex-start}
.rf-ph{width:min(30%,17rem);aspect-ratio:9/18;padding:.35rem;background:var(--cr-line);border-radius:clamp(.8rem,1.6vw,2rem);container-type:inline-size}
.rf-face{position:relative;height:100%;overflow:hidden;border-radius:clamp(.5rem,1.2vw,1.6rem);background:var(--cr-storm-b)}
.rf-ph-2 .rf-face{background:var(--cr-bolt);color:var(--cr-storm)}
.rf-ph-3 .rf-face{background:var(--cr-white);color:var(--cr-storm)}
.rf-words{position:absolute;left:8cqi;top:9cqi;font:700 25cqi/.9 var(--ba)}
.rf-words span{display:block}
html.motion .rf-words span{animation:rf-word 6s var(--ease) infinite;animation-delay:calc(var(--i) * .26s)}
html.motion .rf-ph-2 .rf-words span{animation-delay:calc(1s + var(--i) * .26s)}
html.motion .rf-ph-3 .rf-words span{animation-delay:calc(2s + var(--i) * .26s)}
@keyframes rf-word{0%{opacity:0;transform:translateY(42%)}7%,78%{opacity:1;transform:none}86%,100%{opacity:0}}
.rf-cta{position:absolute;left:8cqi;bottom:8cqi;font:700 11cqi/1 var(--ba);text-transform:uppercase;padding:.36em .5em;background:var(--cr-storm);color:var(--cr-bolt)}
@media (max-width:860px){.rf-aim{grid-template-columns:minmax(0,1fr)}.st-roof h1{font-size:23vw}}