:root{
  --ink:#15191b;
  --ink-2:#242a2d;
  --slate:#4b565b;
  --paper:#f2efe8;
  --white:#fff;
  --orange:#ef6a2e;
  --orange-dark:#d5541d;
  --line:rgba(21,25,27,.16);
  --radius:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.page-loader{position:fixed;inset:0;background:var(--ink);z-index:9999;display:grid;place-content:center;gap:18px;color:white;transition:transform 1s cubic-bezier(.85,0,.15,1)}
.page-loader.loaded{transform:translateY(-100%)}
.page-loader p{letter-spacing:.35em;font:700 12px "Manrope";text-align:center}
.loader-roof{width:90px;height:60px;position:relative}
.loader-roof span{position:absolute;background:var(--orange);display:block;height:3px;transform-origin:left;animation:draw 1s ease forwards}
.loader-roof span:nth-child(1){width:54px;left:3px;top:39px;transform:rotate(-40deg) scaleX(0)}
.loader-roof span:nth-child(2){width:54px;left:44px;top:5px;transform:rotate(40deg) scaleX(0);animation-delay:.2s}
.loader-roof span:nth-child(3){width:75px;left:8px;top:49px;transform:scaleX(0);animation-delay:.4s}
@keyframes draw{to{transform:var(--final)}}
.loader-roof span:nth-child(1){--final:rotate(-40deg) scaleX(1)}
.loader-roof span:nth-child(2){--final:rotate(40deg) scaleX(1)}
.loader-roof span:nth-child(3){--final:scaleX(1)}

.site-header{height:92px;position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;padding:0 3.3vw;color:white;border-bottom:1px solid rgba(255,255,255,.18);transition:.35s ease}
.site-header.scrolled{height:74px;background:rgba(21,25,27,.97);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:12px;min-width:238px}
.brand-mark{display:grid;place-items:center;width:45px;height:42px}
.brand-mark svg{width:44px;fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter}
.brand-copy{display:flex;flex-direction:column;line-height:.95}
.brand-copy strong{font:800 17px "Manrope";letter-spacing:.08em}
.brand-copy small{font:600 9px "Manrope";letter-spacing:.43em;margin-top:7px;color:#bdc2c3}
.main-nav{display:flex;align-items:center;gap:34px;margin:auto}
.main-nav a{font-size:13px;font-weight:600;position:relative}
.main-nav a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--orange);transition:.3s}
.main-nav a:hover:after{right:0}
.nav-cta{background:var(--orange);padding:14px 18px;color:white}
.header-phone{min-width:190px;text-align:right;display:flex;flex-direction:column}
.header-phone span{font-size:9px;letter-spacing:.16em;color:#afb6b8;text-transform:uppercase}
.header-phone strong{font:700 15px "Manrope";margin-top:4px}
.nav-toggle{display:none;background:none;border:0;color:white}

.hero{min-height:860px;height:100vh;background:var(--ink);color:white;position:relative;overflow:hidden;display:grid;grid-template-columns:43% 57%;padding:130px 3.3vw 54px}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,25,27,1) 0%,rgba(21,25,27,.93) 38%,rgba(21,25,27,.1) 70%);pointer-events:none}
.hero-grid,.cta-blueprint{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to right,#000,transparent 68%)}
.hero-sky{position:absolute;inset:0;background:radial-gradient(circle at 72% 24%,#718189 0,rgba(66,79,85,.55) 22%,transparent 50%)}
.cloud{position:absolute;width:240px;height:50px;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(25px);animation:cloudMove 24s linear infinite}
.cloud-a{top:20%;left:55%}.cloud-b{top:35%;left:82%;animation-duration:34s}
@keyframes cloudMove{from{transform:translateX(-15vw)}to{transform:translateX(25vw)}}

.hero-copy{position:relative;z-index:4;align-self:center;padding-bottom:20px}
.eyebrow{font:700 10px "Manrope";letter-spacing:.23em;display:flex;align-items:center;gap:14px;margin:0 0 25px;color:#c5cbcd}
.eyebrow span{width:34px;height:2px;background:var(--orange)}
.eyebrow.dark{color:#737b7e}
.hero h1,.intro-heading h2,.section-head h2,.roof-explorer h2,.process-sticky h2,.estimator-copy h2,.cta-copy h2{font:700 clamp(48px,6vw,100px)/.94 "Manrope";letter-spacing:-.06em;margin:0}
.hero h1 em,.roof-explorer h2 em,.process-sticky h2 em,.estimator-copy h2 em{font-style:normal;color:var(--orange)}
.hero-intro{max-width:580px;font-size:17px;line-height:1.75;color:#c3c8ca;margin:32px 0}
.hero-actions{display:flex;gap:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:54px;padding:0 22px;border:1px solid transparent;font-weight:700;font-size:13px;transition:.3s}
.button span{font-size:18px}
.button-primary{background:var(--orange);color:white}
.button-primary:hover{background:var(--orange-dark);transform:translateY(-2px)}
.button-ghost{border-color:rgba(255,255,255,.28);color:white}
.button-ghost:hover{border-color:white}
.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);max-width:620px;margin-top:48px;padding-top:25px;border-top:1px solid rgba(255,255,255,.16)}
.hero-proof div{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.13);padding-right:20px;margin-right:20px}
.hero-proof div:last-child{border:0}
.hero-proof strong{font:700 21px "Manrope"}
.hero-proof span{font-size:10px;color:#9ca5a8;margin-top:7px}

.hero-visual{position:absolute;z-index:2;right:-3%;bottom:0;width:68%;height:88%;display:flex;align-items:flex-end}
.house-scene{position:relative;width:100%;height:100%;display:flex;align-items:flex-end}
.hero-house{width:100%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.35));transform:translateY(5%)}
.sun-glow{position:absolute;width:580px;height:580px;border-radius:50%;background:radial-gradient(circle,rgba(238,106,46,.18),transparent 68%);right:12%;top:2%}
.hero-badge{position:absolute;z-index:3;right:11%;top:16%;width:118px;height:118px;border-radius:50%;background:var(--orange);display:grid;place-content:center;text-align:center;box-shadow:0 0 0 10px rgba(239,106,46,.13)}
.hero-badge span,.hero-badge small{font-size:8px;letter-spacing:.08em}.hero-badge strong{font:800 16px "Manrope";margin:3px 0}
.blueprint-label{position:absolute;z-index:4;font:600 8px "Manrope";letter-spacing:.14em;color:#d4d8da;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:5px}
.blueprint-label:after{content:"";position:absolute;width:60px;height:1px;background:rgba(255,255,255,.4);top:14px}
.blueprint-label-1{top:28%;right:35%}.blueprint-label-1:after{right:100%}
.blueprint-label-2{top:46%;right:8%}.blueprint-label-2:after{right:100%}
.measurement{position:absolute;z-index:3;color:#b8c0c3;font:600 8px "Manrope";text-transform:uppercase;letter-spacing:.18em}
.measure-a{left:22%;top:41%;transform:rotate(-38deg)}.measure-b{right:14%;bottom:27%}
.hero-scroll{position:absolute;z-index:5;left:3.3vw;bottom:20px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#949ea1}
.hero-scroll i{display:block;width:70px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hero-scroll i:after{content:"";position:absolute;width:25px;height:1px;background:var(--orange);animation:scrollLine 2s infinite}
@keyframes scrollLine{from{left:-30px}to{left:70px}}

.trust-strip{display:flex;align-items:center;justify-content:space-between;padding:28px 3.3vw;background:white;border-bottom:1px solid var(--line)}
.trust-strip p{font:700 11px "Manrope";letter-spacing:.1em;text-transform:uppercase}
.trust-items{display:flex;gap:50px;align-items:center;color:#747b7e;font:700 10px "Manrope";letter-spacing:.12em}

.intro-section{padding:130px 6vw 110px;display:grid;grid-template-columns:80px 1.7fr 1fr;gap:50px;position:relative}
.section-number{font:600 11px "Manrope";color:#8a9295;padding-top:14px}
.intro-heading h2,.section-head h2{font-size:clamp(42px,5.5vw,78px)}
.intro-copy{padding-top:55px}
.intro-copy p,.section-head>p{font-size:16px;line-height:1.8;color:#626a6d;margin:0 0 28px}
.text-link{font-weight:700;font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:8px;display:inline-flex;gap:24px}
.intro-metrics{grid-column:2/4;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:55px}
.intro-metrics article{padding:35px 25px 0 0;border-right:1px solid var(--line);display:flex;flex-direction:column}
.intro-metrics article:not(:first-child){padding-left:35px}
.intro-metrics article:last-child{border:0}
.intro-metrics strong{font:700 40px "Manrope";letter-spacing:-.05em}
.intro-metrics span{max-width:230px;font-size:12px;line-height:1.6;color:#70777a;margin-top:8px}

.roof-explorer{min-height:800px;background:var(--ink);color:white;display:grid;grid-template-columns:37% 63%;padding:110px 5vw 70px;position:relative;overflow:hidden}
.roof-explorer:after{content:"";position:absolute;right:0;top:0;bottom:0;width:63%;background:radial-gradient(circle at 50% 50%,rgba(90,107,115,.3),transparent 67%)}
.explorer-copy{position:relative;z-index:3;padding-top:35px}
.roof-explorer h2{font-size:clamp(48px,5.4vw,80px)}
.explorer-copy>p:not(.eyebrow){color:#aeb6b9;line-height:1.8;max-width:410px;margin:30px 0 45px}
.explorer-detail{border-top:1px solid rgba(255,255,255,.18);padding-top:26px;display:grid;grid-template-columns:55px 1fr;gap:18px;max-width:470px;min-height:205px}
.detail-index{font:700 11px "Manrope";color:var(--orange)}
.explorer-detail h3{font:700 21px "Manrope";margin:0 0 12px}
.explorer-detail p{font-size:13px;line-height:1.7;color:#aeb6b9;margin:0 0 15px}
.explorer-detail a{font-size:12px;font-weight:700;color:var(--orange)}
.interactive-house-wrap{position:relative;z-index:3;display:flex;align-items:center;justify-content:center}
.interactive-house{width:100%;filter:drop-shadow(0 45px 45px rgba(0,0,0,.3));transition:.5s}
.hotspot{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(20,25,27,.55);color:white;display:grid;place-content:center;backdrop-filter:blur(8px);transition:.3s}
.hotspot:before{content:"";position:absolute;inset:-8px;border:1px solid rgba(255,255,255,.15);border-radius:50%;transition:.3s}
.hotspot span{font:700 10px "Manrope"}
.hotspot i{position:absolute;width:6px;height:6px;background:var(--orange);border-radius:50%;right:-3px;top:5px}
.hotspot:hover,.hotspot.active{background:var(--orange);transform:scale(1.12)}
.hotspot.active:before{border-color:var(--orange);animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.35);opacity:0}}

.services-section,.projects-section{padding:120px 5vw;background:#ece9e2}
.section-head{display:grid;grid-template-columns:1.3fr .7fr;gap:90px;align-items:end;margin-bottom:65px}
.section-head>p{max-width:520px;margin-bottom:0}
.service-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:420px;gap:14px}
.service-card{grid-column:span 2;position:relative;background:#d9d6cf;overflow:hidden;padding:25px;display:flex;flex-direction:column;justify-content:space-between}
.service-card.feature-card{grid-column:span 4}
.service-card.dark-card{background:#252b2e;color:white}
.service-card.orange-card{background:var(--orange);color:white}
.service-no{font:700 10px "Manrope";z-index:2}
.service-card-copy{position:relative;z-index:2}
.service-card-copy p{font:700 9px "Manrope";letter-spacing:.16em;color:var(--orange)}
.service-card h3{font:700 26px/1.12 "Manrope";margin:0 0 9px}
.service-card-copy span{font-size:11px;color:#656d70}
.dark-card .service-card-copy span,.orange-card .service-card-copy span{color:rgba(255,255,255,.7)}
.service-card>a{position:absolute;right:24px;bottom:26px;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;display:grid;place-content:center;z-index:2;transition:.3s}
.service-card:hover>a{transform:rotate(45deg);background:var(--orange);border-color:var(--orange);color:white}
.orange-card:hover>a{background:var(--ink);border-color:var(--ink)}
.service-visual{position:absolute;inset:0;transition:.55s}
.service-card:hover .service-visual{transform:scale(1.035)}
.roof-lines{background:linear-gradient(150deg,#68747a,#262d31)}
.roof-lines span{position:absolute;width:90%;height:22%;background:repeating-linear-gradient(90deg,#30383d 0 50px,#171d20 51px 53px);transform:skewY(-8deg);left:12%;border-bottom:4px solid #15191b}
.roof-lines span:nth-child(1){top:18%}.roof-lines span:nth-child(2){top:40%;left:4%}.roof-lines span:nth-child(3){top:62%;left:-4%}
.storm-visual{background:linear-gradient(#56666e,#2c3539)}
.storm-visual:before{content:"";position:absolute;inset:45% -10% -15%;background:repeating-linear-gradient(135deg,#22292d 0 35px,#343d41 36px 69px);transform:rotate(-8deg)}
.storm-visual i{position:absolute;width:80px;height:80px;border-radius:50%;background:rgba(239,106,46,.8);right:15%;top:16%;filter:blur(2px)}
.flat-lines{background:linear-gradient(165deg,#9da3a3,#555f62)}
.flat-lines:after{content:"";position:absolute;left:-10%;right:-10%;bottom:18%;height:42%;background:#30383c;transform:skewY(-8deg);border-top:12px solid #171b1d}
.lead-visual{background:linear-gradient(130deg,#6d777a,#2b3337)}
.lead-visual:before{content:"";position:absolute;left:18%;top:4%;width:40%;height:100%;background:#30383c;transform:skewX(-18deg);border-right:18px solid #8b989d}
.roofline-visual{background:linear-gradient(150deg,#d95b23,#ef6a2e)}
.roofline-visual:before{content:"";position:absolute;left:-15%;right:-10%;top:29%;height:34%;background:#293034;transform:rotate(-12deg);box-shadow:0 22px 0 #fff}

.process-section{background:#1a1f21;color:white;padding:120px 5vw;display:grid;grid-template-columns:42% 58%;gap:70px}
.process-sticky{position:sticky;top:140px;height:max-content;padding-right:70px}
.process-sticky h2{font-size:clamp(48px,5.3vw,78px)}
.process-sticky>p:last-child{font-size:15px;line-height:1.8;color:#a8b0b3;margin-top:30px;max-width:480px}
.process-list{border-top:1px solid rgba(255,255,255,.16)}
.process-step{display:grid;grid-template-columns:80px 1fr;gap:30px;padding:45px 0;border-bottom:1px solid rgba(255,255,255,.16);opacity:.45;transition:.4s}
.process-step.visible{opacity:1}
.process-step>span{font:700 11px "Manrope";color:var(--orange)}
.process-step small{font:700 9px "Manrope";letter-spacing:.18em;color:#899397}
.process-step h3{font:700 25px "Manrope";margin:10px 0}
.process-step p{font-size:13px;line-height:1.7;color:#abb3b6;max-width:560px;margin:0}

.projects-section{background:var(--paper)}
.projects-section .section-head{grid-template-columns:1fr auto}
.projects-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.project-card{min-width:0}
.project-card:first-child{grid-row:span 2}
.project-art{height:360px;position:relative;overflow:hidden;background:#bfc7c9}
.project-card:first-child .project-art{height:780px}
.art-sky{position:absolute;inset:0;background:linear-gradient(#9aaeb8,#e8e4dc 60%)}
.art-roof{position:absolute;background:#30383b;clip-path:polygon(8% 100%,38% 10%,92% 48%,100% 100%);left:4%;right:4%;height:55%;bottom:31%;box-shadow:inset 0 -18px #1d2326}
.art-wall{position:absolute;background:#ddd7cd;left:15%;right:10%;bottom:0;height:42%}
.art-window{position:absolute;background:#2e414a;left:30%;bottom:7%;width:28%;height:25%;box-shadow:90px 0 #2e414a}
.house-b .art-sky{background:linear-gradient(#6f7f87,#d9d6d0)}
.house-b .art-roof{clip-path:polygon(0 55%,74% 8%,100% 55%,100% 100%,0 100%);bottom:35%}
.house-c .art-sky{background:linear-gradient(#c2c8c7,#ece7df)}
.house-c .art-roof{background:#7a5948;clip-path:polygon(0 100%,40% 5%,100% 58%,100% 100%)}
.project-meta{display:grid;grid-template-columns:45px 1fr;gap:14px;padding:22px 0 26px;border-bottom:1px solid var(--line)}
.project-meta>span{font:700 10px "Manrope";color:#7c8487}
.project-meta small{font:700 9px "Manrope";letter-spacing:.16em;color:var(--orange)}
.project-meta h3{font:700 21px "Manrope";margin:7px 0}
.project-meta p{font-size:11px;color:#777f82;margin:0}

.review-section{background:var(--orange);color:white;padding:110px 8vw;display:grid;grid-template-columns:220px 1fr;gap:90px;align-items:start}
.review-score strong{display:block;font:700 80px/.9 "Manrope";letter-spacing:-.06em}
.review-score span{display:block;letter-spacing:.2em;margin:16px 0 10px}
.review-score p{font-size:11px;color:rgba(255,255,255,.75)}
.review-section blockquote{font:600 clamp(28px,3.1vw,48px)/1.28 "Manrope";letter-spacing:-.035em;margin:0;max-width:1050px}
.review-author{grid-column:2;display:flex;gap:14px;align-items:center}
.review-author>span{width:45px;height:45px;border-radius:50%;background:var(--ink);display:grid;place-content:center;font-weight:700}
.review-author div{display:flex;flex-direction:column}.review-author small{opacity:.7;margin-top:5px}

.estimator-section{background:#252b2e;color:white;padding:120px 6vw;display:grid;grid-template-columns:40% 60%;gap:70px}
.estimator-copy h2{font-size:clamp(48px,5vw,76px)}
.estimator-copy>p:last-child{color:#aab2b4;line-height:1.8;max-width:460px;margin-top:28px}
.estimator-card{background:#f2efe8;color:var(--ink);padding:45px;min-height:440px;position:relative}
.estimator-progress{height:2px;background:#d2cec6;margin-bottom:42px}.estimator-progress i{display:block;height:100%;width:33%;background:var(--orange);transition:.4s}
.estimate-step{display:none}.estimate-step.active{display:block}
.estimate-step>span,.estimate-result>span{font:700 9px "Manrope";letter-spacing:.18em;color:#7c8385}
.estimate-step h3{font:700 30px "Manrope";margin:16px 0 30px}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice-grid button{min-height:72px;text-align:left;padding:0 20px;background:transparent;border:1px solid #c3c0b9;font-weight:700;color:var(--ink);transition:.25s}
.choice-grid button:hover{border-color:var(--orange);background:#fff;transform:translateY(-2px)}
.estimate-result{display:none}.estimate-result.active{display:block}
.estimate-result strong{display:block;font:700 44px "Manrope";margin:20px 0 12px}
.estimate-result p{font-size:12px;line-height:1.6;color:#6f777a;max-width:520px;margin-bottom:26px}
.restart{background:none;border:0;border-bottom:1px solid var(--ink);margin-left:20px;padding:8px 0;font-size:12px}

.cta-section{background:#111618;color:white;padding:120px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:100px;position:relative;overflow:hidden}
.cta-section:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(239,106,46,.1);right:-120px;top:-180px}
.cta-copy,.contact-form{position:relative;z-index:2}
.cta-copy h2{font-size:clamp(48px,5vw,76px)}
.cta-copy>p:last-child{color:#aeb6b8;line-height:1.8;max-width:480px;margin-top:27px}
.contact-form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label{display:flex;flex-direction:column;gap:8px}
.contact-form label span{font:700 9px "Manrope";letter-spacing:.12em;color:#9da6a8;text-transform:uppercase}
.contact-form input,.contact-form select{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);color:white;padding:12px 0 15px;outline:none}
.contact-form select option{color:#111}
.contact-form input:focus,.contact-form select:focus{border-color:var(--orange)}
.contact-form .button{align-self:flex-start;border:0;margin-top:8px}
.form-note{font-size:10px;color:#8b9598}

.site-footer{background:#0b0f11;color:white;padding:70px 5vw 25px}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:70px;padding-bottom:55px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-top>p{font-size:13px;line-height:1.8;color:#98a2a5;max-width:380px;margin:0}
.footer-contact{display:flex;flex-direction:column;align-items:flex-end}
.footer-contact span{font-size:9px;color:#8e989a;text-transform:uppercase;letter-spacing:.15em}
.footer-contact a:first-of-type{font:700 24px "Manrope";margin:10px 0 6px}
.footer-contact a:last-of-type{font-size:12px;color:#9ca6a8}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:55px 0}
.footer-links div{display:flex;flex-direction:column;gap:11px}
.footer-links strong{font:700 10px "Manrope";letter-spacing:.14em;color:var(--orange);margin-bottom:8px;text-transform:uppercase}
.footer-links a,.footer-links span{font-size:12px;color:#9aa4a6}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:9px;color:#788285;text-transform:uppercase;letter-spacing:.1em}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1100px){
  .main-nav{gap:18px}.header-phone{display:none}
  .hero{grid-template-columns:1fr;padding-top:130px}.hero-copy{max-width:620px}.hero-visual{width:78%;opacity:.58}
  .hero:after{background:linear-gradient(90deg,var(--ink) 0%,rgba(21,25,27,.88) 50%,rgba(21,25,27,.25))}
  .trust-items{gap:20px}
  .roof-explorer{grid-template-columns:1fr;padding-top:80px}.explorer-copy{max-width:700px}.interactive-house-wrap{min-height:560px}
  .service-grid{grid-template-columns:repeat(2,1fr)}.service-card,.service-card.feature-card{grid-column:span 1}
  .process-section{grid-template-columns:1fr}.process-sticky{position:static}
}
@media(max-width:760px){
  .site-header{height:76px;padding:0 20px}.brand{min-width:0}.brand-copy strong{font-size:14px}
  .nav-toggle{display:block;margin-left:auto;width:42px;height:42px;position:relative}.nav-toggle span:not(.sr-only){position:absolute;left:9px;width:24px;height:2px;background:white;transition:.3s}.nav-toggle span:first-child{top:16px}.nav-toggle span:nth-child(2){top:24px}
  .nav-toggle[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}.nav-toggle[aria-expanded="true"] span:nth-child(2){top:20px;transform:rotate(-45deg)}
  .main-nav{position:fixed;inset:76px 0 0;background:var(--ink);display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:30px;transform:translateX(100%);transition:.45s;gap:0}
  .main-nav.open{transform:none}.main-nav a{font:700 28px "Manrope";padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}.main-nav .nav-cta{margin-top:20px;padding:18px;text-align:center;font-size:16px}
  .hero{min-height:820px;height:auto;padding:140px 20px 80px;display:block}.hero-copy{position:relative}.hero h1{font-size:51px}.hero-intro{font-size:14px;max-width:90%}
  .hero-actions{flex-direction:column;align-items:stretch}.hero-proof{gap:12px;margin-top:35px}.hero-proof div{padding:0;margin:0}.hero-proof span{font-size:8px}.hero-proof strong{font-size:17px}
  .hero-visual{width:125%;height:55%;right:-32%;opacity:.45}.hero-badge,.blueprint-label,.measurement{display:none}.hero-scroll{display:none}
  .trust-strip{padding:22px 20px;display:block}.trust-strip p{margin:0 0 15px}.trust-items{overflow:hidden;gap:25px}.trust-items span:nth-child(n+4){display:none}
  .intro-section{padding:80px 20px;display:block}.section-number{margin-bottom:30px}.intro-heading h2,.section-head h2{font-size:43px}.intro-copy{padding-top:30px}
  .intro-metrics{display:grid;grid-template-columns:1fr;margin-top:50px}.intro-metrics article,.intro-metrics article:not(:first-child){padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .roof-explorer{padding:80px 20px 30px}.roof-explorer h2{font-size:46px}.interactive-house-wrap{min-height:400px;margin-left:-18%;margin-right:-18%}.hotspot{width:38px;height:38px}
  .services-section,.projects-section{padding:80px 20px}.section-head{display:block;margin-bottom:40px}.section-head>p{margin-top:25px}
  .service-grid{display:block}.service-card{height:340px;margin-bottom:12px}
  .process-section{padding:80px 20px;gap:50px}.process-sticky{padding:0}.process-sticky h2{font-size:45px}.process-step{grid-template-columns:40px 1fr}
  .projects-section .section-head{display:block}.projects-grid{display:block}.project-card:first-child .project-art,.project-art{height:430px}
  .review-section{padding:75px 20px;display:block}.review-score{margin-bottom:35px}.review-section blockquote{font-size:27px}.review-author{margin-top:35px}
  .estimator-section{padding:80px 20px;display:block}.estimator-copy{margin-bottom:40px}.estimator-copy h2{font-size:46px}.estimator-card{padding:28px 20px;min-height:500px}.choice-grid{grid-template-columns:1fr}.estimate-result strong{font-size:34px}
  .cta-section{padding:80px 20px;display:block}.cta-copy h2{font-size:46px}.contact-form{margin-top:50px}.form-row{grid-template-columns:1fr}
  .footer-top,.footer-links{grid-template-columns:1fr}.footer-contact{align-items:flex-start}.footer-bottom{flex-direction:column;gap:10px}
}

/* Phase 2 visual direction — editorial architecture rather than card-led trade layout */
.hero-photo-visual{right:0;width:62%;height:100%;top:0;bottom:auto;align-items:stretch;overflow:hidden}
.hero-photo-frame{position:absolute;inset:0;margin:0;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,8% 60%);overflow:hidden}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.04);animation:heroDrift 14s ease-in-out infinite alternate}
.hero-photo-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,25,27,.68),rgba(21,25,27,.08) 48%,rgba(21,25,27,.18)),linear-gradient(0deg,rgba(21,25,27,.55),transparent 48%)}
.hero-photo-frame figcaption{position:absolute;right:5vw;bottom:5.5vw;display:flex;flex-direction:column;text-align:right;gap:6px;z-index:3}
.hero-photo-frame figcaption span{font:700 9px "Manrope";letter-spacing:.2em;color:var(--orange)}
.hero-photo-frame figcaption strong{font:600 12px "Manrope";color:white}
.blueprint-frame{position:absolute;inset:11% 7% 13% 17%;z-index:2;border:1px solid rgba(255,255,255,.28);pointer-events:none}
.blueprint-frame:before,.blueprint-frame:after{content:"";position:absolute;background:rgba(255,255,255,.25)}
.blueprint-frame:before{left:33%;top:0;bottom:0;width:1px}.blueprint-frame:after{top:61%;left:0;right:0;height:1px}
.blueprint-frame span{position:absolute;width:8px;height:8px;border:1px solid var(--orange)}
.blueprint-frame span:first-child{left:-4px;top:-4px}.blueprint-frame span:nth-child(2){right:-4px;bottom:-4px}
.blueprint-frame i{position:absolute;left:0;top:0;width:36%;height:61%;border-right:1px dashed rgba(255,255,255,.28);border-bottom:1px dashed rgba(255,255,255,.28)}
@keyframes heroDrift{to{transform:scale(1.09) translate3d(-1.2%,.8%,0)}}

.roof-explorer{grid-template-columns:34% 66%;padding-right:3vw}
.interactive-house-wrap{min-height:680px;display:block;padding:3vw 0 3vw 4vw}
.interactive-photo{position:absolute;inset:4% 0 4% 5%;margin:0;overflow:hidden;background:#273034;clip-path:polygon(8% 0,100% 0,100% 91%,90% 100%,0 100%,0 9%)}
.interactive-photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.7) contrast(1.05) brightness(.8);transition:filter .45s,transform .65s;transform:scale(1.02)}
.interactive-house-wrap:hover .interactive-photo img{transform:scale(1.045)}
.interactive-house-wrap[data-active="roof"] .interactive-photo img{filter:saturate(.9) contrast(1.08) brightness(.92)}
.interactive-house-wrap[data-active="chimney"] .interactive-photo img{filter:saturate(.55) contrast(1.18) brightness(.78)}
.interactive-house-wrap[data-active="flat"] .interactive-photo img{filter:saturate(.8) contrast(1.03) brightness(.82)}
.interactive-house-wrap[data-active="solar"] .interactive-photo img{filter:saturate(1) contrast(1.06) brightness(.9)}
.interactive-house-wrap[data-active="gutter"] .interactive-photo img{filter:saturate(.65) contrast(1.13) brightness(.84)}
.inspection-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent,#000 25%,#000)}
.focus-ring{position:absolute;width:230px;height:230px;border:1px solid rgba(239,106,46,.8);border-radius:50%;left:42%;top:22%;box-shadow:0 0 0 30px rgba(239,106,46,.06);transition:.5s cubic-bezier(.2,.8,.2,1)}
[data-active="chimney"] .focus-ring{left:62%;top:15%;width:175px;height:175px}
[data-active="flat"] .focus-ring{left:10%;top:38%;width:220px;height:180px;border-radius:2px}
[data-active="solar"] .focus-ring{left:30%;top:15%;width:190px;height:150px;border-radius:2px}
[data-active="gutter"] .focus-ring{left:54%;top:49%;width:280px;height:70px;border-radius:2px}
.interactive-photo figcaption{position:absolute;left:28px;bottom:25px;z-index:2;display:flex;flex-direction:column;gap:5px;padding-left:14px;border-left:2px solid var(--orange)}
.interactive-photo figcaption span{font:700 8px "Manrope";letter-spacing:.18em;color:var(--orange)}
.interactive-photo figcaption strong{font:600 12px "Manrope";color:white}

.services-section{background:#f4f1eb}
.service-grid{grid-template-columns:1.35fr .65fr .65fr;grid-auto-rows:390px;gap:1px;background:rgba(21,25,27,.16);border:1px solid rgba(21,25,27,.16)}
.service-card,.service-card.feature-card{grid-column:auto;border:0}
.service-card.feature-card{grid-row:span 2}
.service-card:nth-child(4){grid-column:2/3}.service-card:nth-child(5){grid-column:3/4}
.service-card{min-height:390px}

.editorial-projects{grid-template-columns:1.2fr .8fr;grid-template-rows:auto auto}
.editorial-projects .project-card:first-child{grid-row:1/3}
.project-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.project-card:hover .project-art img{transform:scale(1.045);filter:contrast(1.04)}
.project-stamp{position:absolute;left:18px;top:18px;padding:9px 11px;background:rgba(21,25,27,.84);color:white;font:700 8px "Manrope";letter-spacing:.16em;backdrop-filter:blur(8px)}
.editorial-projects .project-card:nth-child(2) .project-art,.editorial-projects .project-card:nth-child(3) .project-art{height:330px}

@media(max-width:1100px){
  .hero-photo-visual{width:72%;opacity:.65}.roof-explorer{grid-template-columns:1fr}.interactive-house-wrap{min-height:620px;padding-left:0}.interactive-photo{inset:4% 0}
  .service-grid{grid-template-columns:1fr 1fr}.service-card.feature-card{grid-row:span 1}.service-card:nth-child(4),.service-card:nth-child(5){grid-column:auto}
}
@media(max-width:760px){
  .hero-photo-visual{width:130%;height:58%;top:auto;bottom:0;right:-38%;opacity:.48}.hero-photo-frame{clip-path:none}.blueprint-frame{display:none}
  .interactive-house-wrap{min-height:420px;margin:0;padding:0}.interactive-photo{inset:0}.focus-ring{width:140px;height:140px}.interactive-photo figcaption{left:16px;bottom:16px}
  .service-grid{display:block;border:0;background:transparent}.service-card{min-height:340px}
  .editorial-projects{display:block}.editorial-projects .project-card:first-child .project-art,.editorial-projects .project-card:nth-child(2) .project-art,.editorial-projects .project-card:nth-child(3) .project-art{height:430px}
}

/* Phase 2.1 — restored illustrated interactive roof explorer */
.interactive-house-wrap{min-height:660px;display:flex!important;align-items:center;justify-content:center;padding:1.5vw 0 1.5vw 2vw!important;margin:0!important}
.interactive-house-stage{position:relative;width:min(100%,920px);aspect-ratio:900/650}
.interactive-house{display:block;width:100%;height:100%;filter:drop-shadow(0 42px 42px rgba(0,0,0,.32));overflow:visible}
.interactive-house .explorer-part{transition:opacity .35s ease,filter .35s ease,transform .35s ease;transform-box:fill-box;transform-origin:center}
.interactive-house-wrap[data-active] .explorer-part{opacity:.48}
.interactive-house-wrap[data-active="roof"] #roofSystem,
.interactive-house-wrap[data-active="chimney"] #chimneySystem,
.interactive-house-wrap[data-active="flat"] #flatSystem,
.interactive-house-wrap[data-active="solar"] #solarSystem,
.interactive-house-wrap[data-active="gutter"] #gutterSystem{opacity:1;filter:url(#activeGlow);transform:translateY(-3px)}
.interactive-house-stage .hotspot{z-index:6;transform:translate(-50%,-50%)}
.interactive-house-stage .hotspot:hover,.interactive-house-stage .hotspot.active{transform:translate(-50%,-50%) scale(1.12)}
.explorer-status{position:absolute;right:5%;bottom:5%;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.56);font:700 9px "Manrope";letter-spacing:.17em}
.explorer-status span{width:30px;height:1px;background:var(--orange)}
.interactive-photo,.inspection-grid,.focus-ring{display:none!important}
@media(max-width:980px){.interactive-house-wrap{min-height:auto!important;padding:20px 0 0!important}.interactive-house-stage{width:min(100%,850px)}}
@media(max-width:760px){.interactive-house-wrap{min-height:auto!important;margin:0 -11%!important;padding:20px 0!important}.interactive-house-stage .hotspot{width:36px;height:36px}.explorer-status{display:none}}

/* v2.2 — precise hero system callouts */
.hero-callout{position:absolute;z-index:5;color:#fff;font-family:"Manrope",sans-serif;text-transform:uppercase;letter-spacing:.13em;font-size:8px;line-height:1.35;min-width:150px}
.hero-callout span,.hero-callout small{display:block}.hero-callout span{font-weight:800}.hero-callout small{font-size:7px;color:rgba(255,255,255,.72);margin-top:2px}.hero-callout i{position:absolute;width:7px;height:7px;border:2px solid var(--orange);background:rgba(18,23,25,.75)}
.hero-callout:before,.hero-callout:after{content:"";position:absolute;background:rgba(255,255,255,.72);height:1px;transform-origin:left center}
.callout-slate{top:17%;left:48%;padding-left:28px}.callout-slate i{left:0;top:17px}.callout-slate:before{left:6px;top:20px;width:55px;transform:rotate(90deg)}.callout-slate:after{left:6px;top:20px;width:22px}
.callout-rooflights{top:45%;left:13%;text-align:right;padding-right:28px}.callout-rooflights i{right:0;top:16px}.callout-rooflights:before{right:6px;top:19px;width:74px;transform:rotate(180deg)}.callout-rooflights:after{right:4px;top:20px;width:43px;transform:rotate(40deg);transform-origin:right center}
.callout-ridge{top:39%;right:4%;padding-left:30px}.callout-ridge i{left:0;top:17px}.callout-ridge:before{left:6px;top:20px;width:62px;transform:rotate(145deg)}.callout-ridge:after{left:6px;top:20px;width:25px}
@media(max-width:980px){.hero-callout{display:none}}

/* v2.3 — corrected roof-explorer geometry */
.interactive-house-wrap[data-active="flat"] #flatSystem{transform:translateY(-2px) scale(1.015)}
.interactive-house-wrap[data-active="solar"] #solarSystem{transform:translateY(-2px) scale(1.012)}
@media(max-width:760px){
  .interactive-house-wrap{margin:0 -6%!important}
}

/* v2.4 — continuous main roof, left-positioned garage and roof-flush solar array */

/* v2.6 — rebuilt roof explorer geometry from scratch */
.interactive-house-wrap{min-height:650px}
.interactive-house-wrap[data-active="roof"] #roofSystem,
.interactive-house-wrap[data-active="chimney"] #chimneySystem,
.interactive-house-wrap[data-active="flat"] #flatSystem,
.interactive-house-wrap[data-active="solar"] #solarSystem,
.interactive-house-wrap[data-active="gutter"] #gutterSystem{transform:translateY(-2px)}
@media(max-width:760px){
  .interactive-house-wrap{margin:0 -4%!important}
}

/* v2.8 premium imagery + clearer roof build */
.hero-photo-frame picture{display:block;width:100%;height:100%}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:52% 48%;transform:scale(1.015);animation:heroPush 18s ease-out both;image-rendering:auto}
@keyframes heroPush{from{transform:scale(1.015)}to{transform:scale(1.065)}}
.hero-callout{animation:calloutIn .75s both}
.callout-slate{animation-delay:.8s}.callout-rooflights{animation-delay:1.05s}.callout-ridge{animation-delay:1.3s}
@keyframes calloutIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.hero-photo-frame img{object-position:56% 50%;animation:none;transform:scale(1.02)}}

/* v2.8 clear exploded roof build */
.roof-build-section{position:relative;min-height:300vh;background:#111719;color:#fff;display:grid;grid-template-columns:38% 62%;padding:0 5.5vw}
.roof-build-copy{position:sticky;top:118px;align-self:start;padding:112px 5.5vw 112px 0;z-index:3}
.roof-build-copy h2{font-size:clamp(48px,5vw,80px);letter-spacing:-.055em;margin:18px 0 28px;line-height:.98}
.roof-build-copy h2 em{font-style:normal;color:var(--orange)}
.roof-build-copy>p{color:#a8b0b2;line-height:1.8;max-width:520px}
.build-stage-copy{margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:56px 1fr;gap:22px;transition:opacity .2s,transform .2s}
.build-stage-copy.is-changing{opacity:.25;transform:translateY(5px)}
.build-stage-copy>span{font:700 12px "Manrope";color:var(--orange)}
.build-stage-copy small{font:700 9px "Manrope";letter-spacing:.18em;color:#7f898c}
.build-stage-copy h3{font:700 25px "Manrope";margin:10px 0}
.build-stage-copy p{font-size:13px;line-height:1.65;color:#aab2b4;margin:0;max-width:460px}
.roof-build-visual{position:sticky;top:86px;height:calc(100vh - 86px);min-height:650px;overflow:hidden;align-self:start;background:radial-gradient(circle at 54% 40%,#293235 0,#1a2123 45%,#121719 100%);border-left:1px solid rgba(255,255,255,.08)}
.roof-assembly{position:absolute;inset:5% 4.5% 11%;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.005));overflow:hidden}
.roof-assembly:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 92%)}
.assembly-heading{position:absolute;z-index:5;left:28px;right:28px;top:23px;display:flex;justify-content:space-between;align-items:center;font:700 9px "Manrope";letter-spacing:.17em;color:#9aa3a5}
.assembly-heading b{font-size:10px;color:#fff}.assembly-heading i{font-style:normal;color:var(--orange)}
.assembly-canvas{position:absolute;inset:70px 20px 60px;perspective:1000px}
.assembly-layer{position:absolute;left:12%;right:9%;height:72px;transform:skewX(-24deg) translateY(20px);border:1px solid rgba(255,255,255,.14);opacity:.18;filter:saturate(.4);transition:opacity .45s,transform .55s,filter .45s,box-shadow .45s;display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr 1fr;column-gap:16px;align-content:center;padding:12px 24px 12px 34px;color:#fff;overflow:hidden}
.assembly-layer:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.11),transparent 36%,rgba(0,0,0,.18))}
.assembly-layer>*{position:relative;z-index:2;transform:skewX(24deg)}
.assembly-layer .layer-code{grid-row:1/3;align-self:center;font:700 12px "Manrope";color:var(--orange)}
.assembly-layer strong{align-self:end;font:700 15px "Manrope";letter-spacing:-.01em}
.assembly-layer small{align-self:start;font:600 9px "Manrope";letter-spacing:.12em;text-transform:uppercase;color:#aeb6b8;margin-top:3px}
.assembly-rafters{bottom:2%;background:repeating-linear-gradient(90deg,#38291f 0 20px,#6b4a32 20px 27px)}
.assembly-insulation{bottom:13%;background:repeating-linear-gradient(135deg,#8b6f34 0 11px,#c29c4d 11px 20px)}
.assembly-deck{bottom:24%;background:repeating-linear-gradient(90deg,#6b513b 0 54px,#85664c 54px 57px)}
.assembly-membrane{bottom:35%;background:linear-gradient(90deg,#253b42,#45616a)}
.assembly-battens{bottom:46%;background:repeating-linear-gradient(0deg,#3c2a1d 0 12px,#9a683d 12px 17px,#2b2119 17px 30px)}
.assembly-tiles{bottom:57%;background:repeating-linear-gradient(0deg,#242b2e 0 14px,#566064 14px 16px),repeating-linear-gradient(90deg,transparent 0 52px,rgba(0,0,0,.6) 52px 54px)}
.assembly-ridge{bottom:68%;height:56px;background:linear-gradient(180deg,#616a6d,#252c2f)}
.roof-build-visual[data-build-stage="1"] .assembly-layer[data-stage="1"],
.roof-build-visual[data-build-stage="2"] .assembly-layer[data-stage="2"],
.roof-build-visual[data-build-stage="3"] .assembly-layer[data-stage="3"],
.roof-build-visual[data-build-stage="4"] .assembly-layer[data-stage="4"],
.roof-build-visual[data-build-stage="5"] .assembly-layer[data-stage="5"],
.roof-build-visual[data-build-stage="6"] .assembly-layer[data-stage="6"],
.roof-build-visual[data-build-stage="7"] .assembly-layer[data-stage="7"]{opacity:1;filter:none;transform:skewX(-24deg) translateY(0) scale(1.018);box-shadow:0 0 0 1px rgba(239,106,46,.75),0 15px 35px rgba(0,0,0,.28),0 0 28px rgba(239,106,46,.15)}
.roof-build-visual[data-build-stage="2"] .assembly-layer[data-stage="1"],
.roof-build-visual[data-build-stage="3"] .assembly-layer[data-stage="1"],.roof-build-visual[data-build-stage="3"] .assembly-layer[data-stage="2"],
.roof-build-visual[data-build-stage="4"] .assembly-layer[data-stage="1"],.roof-build-visual[data-build-stage="4"] .assembly-layer[data-stage="2"],.roof-build-visual[data-build-stage="4"] .assembly-layer[data-stage="3"],
.roof-build-visual[data-build-stage="5"] .assembly-layer[data-stage="1"],.roof-build-visual[data-build-stage="5"] .assembly-layer[data-stage="2"],.roof-build-visual[data-build-stage="5"] .assembly-layer[data-stage="3"],.roof-build-visual[data-build-stage="5"] .assembly-layer[data-stage="4"],
.roof-build-visual[data-build-stage="6"] .assembly-layer:not([data-stage="7"]),
.roof-build-visual[data-build-stage="7"] .assembly-layer{opacity:.62;filter:none;transform:skewX(-24deg) translateY(0)}
.assembly-key{position:absolute;z-index:5;left:28px;right:28px;bottom:20px;display:flex;justify-content:space-between;font:600 9px "Manrope";letter-spacing:.12em;text-transform:uppercase;color:#858f91}
.assembly-key span:first-child{display:flex;align-items:center;gap:9px}.assembly-key i{width:22px;height:2px;background:var(--orange);display:inline-block}
.build-photo-inset{position:absolute;right:6%;bottom:12%;width:27%;margin:0;border:1px solid rgba(255,255,255,.16);background:#111719;z-index:7;box-shadow:0 18px 50px rgba(0,0,0,.38)}
.build-photo-inset img{display:block;width:100%;height:145px;object-fit:cover;object-position:center 40%;filter:saturate(.78) contrast(1.05)}
.build-photo-inset figcaption{padding:12px 14px;font:600 9px "Manrope";line-height:1.55;color:#aab2b4}.build-photo-inset figcaption span{color:var(--orange);letter-spacing:.16em;margin-right:8px}
.build-progress{position:absolute;left:5%;right:5%;bottom:30px;height:2px;background:rgba(255,255,255,.16)}
.build-progress i{display:block;width:14.285%;height:100%;background:var(--orange);transition:width .35s}
.build-progress span{position:absolute;bottom:12px;left:0;font:700 9px "Manrope";letter-spacing:.16em;color:#fff;text-transform:uppercase}
.build-scroll-track{position:absolute;inset:0;pointer-events:none}
@media(max-width:1100px){.build-photo-inset{display:none}.assembly-layer{left:7%;right:5%}}
@media(max-width:900px){
 .roof-build-section{display:block;min-height:auto;padding:82px 20px}
 .roof-build-copy{position:static;padding:0 0 40px}
 .roof-build-visual{position:relative;top:auto;height:720px;min-height:0;border-left:0}
 .build-scroll-track{display:none}
 .assembly-layer{opacity:.58;transform:skewX(-24deg);left:5%;right:4%;padding-left:24px}
 .roof-build-visual[data-build-stage] .assembly-layer{opacity:.64;filter:none;transform:skewX(-24deg)}
 .roof-build-visual[data-build-stage] .assembly-layer[data-stage="7"]{opacity:1;box-shadow:0 0 0 1px rgba(239,106,46,.65)}
}
@media(max-width:600px){
 .roof-build-copy h2{font-size:46px}
 .roof-build-visual{height:650px}
 .roof-assembly{inset:2% 0 10%}
 .assembly-heading{left:16px;right:16px}
 .assembly-canvas{inset:62px 4px 55px}
 .assembly-layer{height:62px;grid-template-columns:32px 1fr;column-gap:8px;padding:8px 10px 8px 18px}
 .assembly-layer strong{font-size:12px}.assembly-layer small{font-size:7px}.assembly-layer .layer-code{font-size:10px}
 .assembly-key{left:16px;right:16px}.assembly-key span:last-child{display:none}
}