@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--green:#193e31;--deep:#10281f;--yellow:#e7ff57;--ink:#172d23;--muted:#647067;--paper:#f5f5ee;--line:#d2d8cb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'DM Sans',sans-serif}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a,button,summary{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #8f8f00;outline-offset:6px}img{max-width:100%;display:block}p{margin:0 0 22px;color:var(--muted)}h1,h2,h3{margin:0;font-weight:700}h1,h2,.local-word,.ticker-track,.material-symbol{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}h2{font-size:clamp(48px,5.5vw,82px);line-height:.99;letter-spacing:-1.3px;margin-bottom:28px}h2 em{font-style:normal;color:#6e8067}h3{font-size:21px;line-height:1.25;margin-bottom:14px;letter-spacing:-.5px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;margin-bottom:28px;line-height:1.5;color:inherit}.reading-progress{height:3px;width:100%;position:fixed;top:0;left:0;background:var(--yellow);transform:scaleX(0);transform-origin:left;z-index:100}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;z-index:101;background:var(--yellow);padding:20px}header{position:absolute;z-index:10;top:0;left:0;width:100%;height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;color:white;border-bottom:1px solid #ffffff30;gap:28px}.brand{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:700;line-height:1;letter-spacing:-1px}.brand svg{width:38px}.brand-sub{display:block;font-size:10px;letter-spacing:2.6px;margin-top:8px}.brand svg path:last-child{fill:var(--yellow)}nav{display:flex;gap:27px;font-size:14px}nav a{position:relative;padding:8px 0}nav a:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s}nav a:hover:after{transform:scaleX(1)}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:32px;padding:19px 24px;background:var(--yellow);color:var(--deep);font-size:14px;font-weight:700;border:0;border-radius:0;transition:background .25s,box-shadow .25s,transform .25s}.button:hover{background:white;box-shadow:7px 7px 0 #e7ff5750;transform:translate(-3px,-3px)}.button span{font-size:26px;line-height:1;transition:transform .25s}.button:hover span{transform:rotate(45deg)}.small{font-size:13px;padding:12px 18px;gap:26px}.hero{min-height:850px;height:100svh;max-height:1150px;position:relative;isolation:isolate;color:var(--paper);overflow:hidden;padding:127px 4.5% 40px;background:#24382b;display:flex;flex-direction:column;justify-content:space-between}.hero-photo{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;object-position:center 54%;z-index:-3;transform:scale(1.03);will-change:transform}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#07160ed9 0%,#0b170e78 45%,#0c160e14 90%),linear-gradient(0deg,#09150fe0,transparent 40%,#09150f66);z-index:-2}.hero-topline{display:flex;justify-content:space-between;gap:25px;font-size:11px;letter-spacing:2px;color:#e4e9dd}.hero-title-wrap{position:relative;margin:25px 0;max-width:1150px}h1{font-size:clamp(100px,12.4vw,190px);font-weight:800;line-height:.82;letter-spacing:-3px}h1>span{display:block;width:fit-content}h1 .outline{color:transparent;-webkit-text-stroke:1.5px #f5f5ee;margin:6px 0}h1 .last-line{padding-left:15vw}.yellow-dot{color:var(--yellow)}.orbit-link{position:absolute;right:2%;top:39%;height:146px;width:146px;border-radius:50%;background:var(--yellow);color:var(--deep);display:flex;justify-content:center;align-items:center;flex-direction:column;transform:rotate(10deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 9px #e7ff571a}.orbit-link:hover{transform:rotate(-10deg) scale(1.08)}.orbit-link span{font-size:12px;line-height:1.3;letter-spacing:.8px;text-align:center;font-weight:700}.orbit-link b{font-size:45px;font-weight:400;line-height:1.2}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-bottom:12px}.hero-bottom p{font-size:15px;color:#dde4d8;line-height:1.6;margin:0}.scroll-link{display:flex;gap:20px;align-items:center}.scroll-link span{font-size:10px;letter-spacing:2px}.scroll-link b{font-size:35px;font-weight:400;animation:nudge 2s infinite}.photo-caption{position:absolute;bottom:10px;right:4.5%;font-size:10px;color:#c2cdc0}.ticker{background:var(--yellow);color:var(--deep);overflow:hidden;position:relative;padding:17px 0;transform:rotate(-1.4deg);margin:-3px -1px 0;z-index:2;border-top:1px solid var(--yellow);border-bottom:1px solid var(--yellow)}.ticker-track{display:flex;align-items:center;gap:40px;width:max-content;white-space:nowrap;font-size:30px;font-weight:700;line-height:1.2;animation:marquee 28s linear infinite}.ticker-track i{font-family:Arial;font-style:normal;font-size:29px}.motion-toggle{position:absolute;right:15px;top:50%;transform:translateY(-50%);height:36px;width:36px;background:var(--deep);color:var(--yellow);border:1px solid var(--yellow);border-radius:50%;font-size:14px}.section{max-width:1460px;margin:auto;padding:110px 6%}.split{display:grid;grid-template-columns:1fr 1fr;gap:10%}.inline-link{display:inline-block;border-bottom:1px solid currentColor;font-size:14px;font-weight:700;padding:5px 0;margin-top:10px}.inline-link:hover{color:#698144}#vervangen{padding-top:140px}#vervangen>div:first-child>p:not(.eyebrow){max-width:475px}.signs{padding-top:15px}.signs-label{font-size:11px;letter-spacing:2px;color:#718166;margin-bottom:20px}.signs article{display:flex;gap:26px;padding:30px 0;border-top:1px solid var(--line);transition:transform .3s}.signs article:hover{transform:translateX(8px)}.signs article>span{font-family:'Barlow Condensed';font-size:50px;line-height:1;color:#b3bea9}.signs article p{margin:0;font-size:15px}.roof-lab{background:var(--green);color:var(--paper);position:relative;overflow:hidden}.roof-lab:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:60px 60px;pointer-events:none}.roof-lab .section{position:relative;padding-bottom:85px}.lab-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:60px}.lab-heading>p{font-size:16px;color:#c8d6c1;max-width:345px}.lab-heading h2 em{color:var(--yellow)}.lab-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:9%;align-items:center}.roof-diagram{position:relative;min-width:0}.roof-diagram svg{display:block;width:100%;overflow:visible}.layer-shape{opacity:.42;transform-origin:50% 50%;transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1),filter .5s}.layer-shape.active{opacity:1;transform:translateY(-10px);filter:drop-shadow(0 12px 12px #0004)}.diagram-label{font-size:10px;letter-spacing:1.2px;color:#a5b59d;display:block;text-align:center}.diagram-cross{position:absolute;font-size:28px;line-height:1;color:#ffffff55}.cross-one{left:0;top:15%}.cross-two{right:0;bottom:15%}.layer-controls{padding-top:30px}.layer-controls .eyebrow{color:#a5b69c}.layer-buttons{display:grid}.layer-buttons button{border:0;border-top:1px solid #ffffff25;background:transparent;color:#dbe4d3;padding:18px 14px;text-align:left;display:flex;align-items:center;gap:20px;font-size:17px;transition:background .3s,color .3s,padding .3s}.layer-buttons button>span{font-size:12px;opacity:.65}.layer-buttons button b{margin-left:auto;font-weight:400}.layer-buttons button.active{background:var(--yellow);color:var(--deep);padding-left:22px}.layer-buttons button:hover:not(.active){background:#ffffff0b}.layer-description{padding:30px 0 0;min-height:160px}.layer-description h3{font-size:24px}.layer-description p{font-size:15px;color:#c1d1b7;margin:0}.lab-note{font-size:12px;color:#a2b798;border-top:1px solid #ffffff20;padding-top:18px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:40px}.section-head>p{max-width:360px;font-size:16px}.texture-banner{height:350px;position:relative;overflow:hidden;margin-bottom:25px}.texture-banner img{width:100%;height:100%;object-fit:cover}.texture-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0009,transparent)}.texture-banner>span{position:absolute;left:5%;top:20%;z-index:1;font:700 clamp(40px,5vw,70px)/.95 'Barlow Condensed';color:white}.texture-banner em{color:var(--yellow);font-style:normal}.texture-banner small{position:absolute;bottom:10px;right:15px;font-size:10px;z-index:2;color:white}.material-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.material{padding:35px 38px;border:1px solid var(--line);position:relative;transition:transform .35s,box-shadow .35s}.material:hover{transform:translateY(-8px);box-shadow:0 18px 30px #14251912}.material-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.material-top>span:first-child{font-size:12px;letter-spacing:2px}.material-symbol{font-size:80px;line-height:1;color:#a5b398}.material h3{font-size:28px}.material p{font-size:15px}.material ul,.plan-card ul{list-style:none;padding:0;margin:25px 0}.material li,.plan-card li{font-size:14px;padding:7px 0}.material li:before,.plan-card li:before{content:'↗';margin-right:14px}.material-bottom{font-size:12px;padding-top:20px;border-top:1px solid var(--line)}.epdm{background:var(--green);color:var(--paper);border-color:var(--green)}.epdm p{color:#c2d0b8}.epdm .material-symbol{color:var(--yellow)}.epdm .material-bottom{border-color:#ffffff30}.material-note{font-size:12px;margin-top:22px}.materials-wrap .section{padding-bottom:55px}#kosten{padding-top:60px}.list-title{font-size:11px;letter-spacing:1.5px}.cost-list>div{display:flex;gap:20px;border-bottom:1px solid var(--line);padding:19px 0}.cost-list>div>span{font-size:12px;color:#899990;padding-top:4px}.cost-list p{margin:0;font-size:14px}.cost-list p strong{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}.insulation{background:var(--yellow);position:relative;overflow:hidden}.insulation h2{font-size:clamp(46px,5vw,75px)}.insulation h2 em{color:#526923}.insulation p{color:#3a4e24}.insulation .section{padding-top:75px;padding-bottom:75px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:60px}.steps article{border-top:1px solid #a7b6a8;padding-top:25px;position:relative}.steps article:before{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--green)}.steps article>span{font-family:'Barlow Condensed';font-size:80px;color:#a6b09b;line-height:1}.steps h3{margin-top:28px;font-size:19px}.steps p{font-size:15px;margin-bottom:0}.local{background:#e5e9dc;position:relative;overflow:hidden;padding-top:40px}.local-word{font-size:clamp(65px,16.8vw,255px);line-height:1;letter-spacing:-3px;color:transparent;-webkit-text-stroke:1px #8c9a7e;white-space:nowrap;text-align:center;will-change:transform}.local .section{padding-top:65px;padding-bottom:80px}.local-tags{display:flex;gap:10px;flex-wrap:wrap}.local-tags span{font-size:12px;border:1px solid #a8b8a9;border-radius:30px;padding:6px 15px}.faq details{border-bottom:1px solid var(--line)}.faq summary{padding:22px 35px 22px 0;position:relative;list-style:none;cursor:pointer;font-weight:600;line-height:1.5;font-size:16px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';position:absolute;right:3px;font-size:27px;top:14px;font-weight:400;transition:transform .3s}.faq details[open] summary:after{transform:rotate(45deg)}.faq details p{font-size:15px;padding-right:20px}.plan{margin:0 3% 60px;background:var(--green);padding:80px 7%;display:grid;grid-template-columns:1.3fr 1fr;gap:12%;color:var(--paper);position:relative;overflow:hidden}.plan h2{font-size:clamp(65px,7vw,105px)}.plan h2 em{color:var(--yellow)}.plan-heading>p:not(.eyebrow){color:#c1d1b7;max-width:450px;font-size:16px}.plan .eyebrow{color:#a6bf98}.plan-card{align-self:center;background:var(--paper);color:var(--ink);padding:35px;transform:rotate(5deg);box-shadow:12px 12px 0 #ffffff14;transition:transform .5s}.plan-card:hover{transform:rotate(0deg) translateY(-8px)}.plan-card>span{font-size:11px;letter-spacing:2px}.plan-card h3{font-size:30px;margin-top:24px}.plan-card li{font-size:14px;border-bottom:1px solid var(--line)}.plan-card p{font-size:12px;margin-bottom:0}footer{padding:0 4.5% 25px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:25px}footer>p{font-size:14px;margin:0}footer>a:not(.brand){font-size:13px}.footer-bottom{width:100%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--muted)}.reveal{opacity:1;transform:none}.js-motion .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.js-motion .reveal.visible{opacity:1;transform:translateY(0)}.js-motion h1>span{animation:title-in .9s cubic-bezier(.2,.8,.2,1) both}.js-motion h1>span:nth-child(2){animation-delay:.12s}.js-motion h1>span:nth-child(3){animation-delay:.24s}.motion-paused *{animation-play-state:paused!important}.motion-paused .reveal{opacity:1;transform:none}.motion-paused .hero-photo{transform:none!important}@keyframes title-in{from{opacity:0;transform:translateY(60px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(min-width:1700px){.hero{padding-left:max(4.5%,calc((100vw - 1550px)/2));padding-right:max(4.5%,calc((100vw - 1550px)/2))}}
@media(max-width:1050px){nav{gap:18px;font-size:12px}.hero{min-height:790px}.hero-title-wrap{margin:40px 0}h1{font-size:15vw}.orbit-link{right:0;width:120px;height:120px}.hero-bottom{gap:22px}.scroll-link span{display:none}.hero-bottom .button{font-size:12px;padding:17px}.split{gap:7%}.lab-grid{gap:4%;grid-template-columns:1.1fr 1fr}.layer-buttons button{font-size:15px}.section{padding:90px 6%}.material{padding:28px}.plan{gap:8%;padding:65px 6%}}
@media(max-width:760px){header{height:80px;padding:0 6%}.brand{font-size:24px}.brand svg{width:30px}.brand-sub{font-size:8px;letter-spacing:2.5px}nav{display:none}.small{font-size:12px;padding:11px 13px;gap:15px}.hero{padding:107px 6% 34px;min-height:760px;height:95svh;max-height:950px}.hero-photo{object-position:61% center}.hero-shade{background:linear-gradient(90deg,#07160edb,#0b170e44),linear-gradient(0deg,#07160ee0,transparent 65%)}.hero-topline{font-size:9px;letter-spacing:1.1px}.hero-topline>span:last-child{display:none}.hero-title-wrap{margin:38px 0 28px}h1{font-size:22vw;letter-spacing:-1.5px;line-height:.87}h1 .last-line{padding-left:0}.orbit-link{right:0;top:37%;width:85px;height:85px;box-shadow:0 0 0 5px #e7ff571a}.orbit-link span{font-size:8px;letter-spacing:.2px}.orbit-link b{font-size:30px}.hero-bottom{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:22px}.hero-bottom p{font-size:14px;width:100%}.hero-bottom .button{padding:15px 18px;font-size:12px;gap:25px}.scroll-link{margin-left:auto}.scroll-link b{font-size:30px}.photo-caption{font-size:9px}.ticker{padding:14px 0}.ticker-track{font-size:25px;gap:28px}.ticker-track i{font-size:24px}.section{padding:70px 6%}.split{grid-template-columns:1fr;gap:35px}h2{font-size:53px}.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:23px}#vervangen{padding-top:80px}.signs article{padding:23px 0}.signs article>span{font-size:40px}.lab-heading{display:block}.lab-heading>p{font-size:15px;margin-bottom:0}.lab-grid{grid-template-columns:1fr;gap:5px}.roof-diagram{margin:25px -8px 5px}.layer-controls{padding-top:25px}.layer-description{min-height:135px}.lab-note{font-size:12px}.section-head{display:block;margin-bottom:30px}.section-head>p{margin-top:20px}.texture-banner{height:290px}.texture-banner>span{font-size:42px;left:7%;top:24%}.material-grid{grid-template-columns:1fr}.material{padding:26px}.material-symbol{font-size:65px}.material h3{font-size:25px}.steps{grid-template-columns:1fr 1fr;gap:35px 25px;margin-top:40px}.steps article>span{font-size:64px}.steps h3{font-size:18px;margin-top:18px}.local{padding-top:28px}.local-word{letter-spacing:-1px;font-size:17vw}.local .section{padding-top:45px}.insulation h2{font-size:51px}.insulation .section{padding-top:65px;padding-bottom:65px}.plan{margin:0 3% 45px;padding:48px 7% 60px;grid-template-columns:1fr;gap:40px}.plan h2{font-size:65px}.plan-card{transform:rotate(3deg);margin:0 5px;padding:27px}.footer-bottom{flex-direction:column;gap:10px}footer>p{width:100%}.faq summary{font-size:15px}.texture-banner img{object-position:60% center}}
@media(max-width:360px){.hero-bottom .button{gap:14px;font-size:11px;padding:14px}.orbit-link{width:70px;height:70px}.orbit-link span{font-size:7px}.brand{font-size:21px}.small{font-size:11px}.hero{min-height:740px}.steps{grid-template-columns:1fr}h2{font-size:47px}.plan h2{font-size:56px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.hero-photo{transform:none!important}.scroll-link b{transform:none}}
/* Interactive roof check */
[hidden]{display:none!important}.hero{height:auto;min-height:900px;max-height:none;padding-top:120px}.hero-experience{display:grid;grid-template-columns:1fr 440px;gap:7%;align-items:center;margin:35px 0 40px}.hero-story h1{font-size:clamp(66px,7vw,112px);line-height:.88;letter-spacing:-1.5px}.hero-story h1 small{display:block;color:var(--yellow);font-size:.43em;letter-spacing:4px;margin-top:20px}.hero-lead{margin-top:28px;color:#e1e9dc;font-size:18px}.hero-story .eyebrow{font-size:11px}.hero-story{min-width:0}.live-roof{max-width:490px;background:#10281fbb;border:1px solid #a1c58d44;padding:20px 22px 14px;backdrop-filter:blur(12px)}.live-roof svg{width:100%;max-height:200px}.live-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px}.live-top strong{font-size:23px;letter-spacing:-1px;color:var(--yellow);font-weight:500}.live-note{font-size:12px;color:#c6d7bd}.mini-insulation{transition:fill .4s,opacity .4s}.live-roof.is-insulated .mini-insulation{animation:thermal-pulse 2.5s infinite}.rain-lines{stroke-dasharray:8 20;animation:rainfall 1.8s linear infinite}.water-path{stroke-dasharray:14 12;animation:waterflow 2s linear infinite}.roof-form-card{background:var(--paper);color:var(--ink);padding:26px 30px;position:relative;border-top:5px solid var(--yellow);box-shadow:14px 14px 0 #e7ff5720;scroll-margin-top:25px}.form-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1.5px;font-weight:700}.form-top span:last-child{color:#6b7f5d}.form-progress{height:3px;background:#dce2d3;margin:15px 0 22px}.form-progress span{display:block;width:33.33%;height:100%;background:var(--green);transition:width .4s}.roof-form-card h2{font-size:44px;line-height:1;margin-bottom:13px;letter-spacing:-.6px}.roof-form-card h2 em{color:#698053}.roof-form-card p{font-size:13px;line-height:1.5;margin-bottom:15px}.roof-form-card fieldset{padding:0;border:0;margin:18px 0}.roof-form-card legend{font-size:13px;font-weight:600;margin-bottom:10px}.roof-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.roof-options label{position:relative;cursor:pointer}.roof-options input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.roof-options label>span{display:flex;flex-direction:column;align-items:center;padding:12px 2px;border:1px solid #c4ceba;transition:background .25s,transform .25s;font-size:27px;line-height:1.2}.roof-options b{font:500 11px/1.4 'DM Sans';margin-top:7px}.roof-options input:checked+span{background:var(--green);color:var(--yellow);border-color:var(--green);transform:translateY(-4px)}.roof-options input:focus-visible+span{outline:3px solid #8f8f00;outline-offset:3px}.field-label{display:block;font-size:13px;font-weight:600;margin:18px 0 7px}.field-label output{float:right;font-size:16px;font-weight:700}.roof-form-card input:not([type=radio]):not([type=checkbox]):not([type=range]),.roof-form-card select{display:block;width:100%;padding:12px 13px;background:#fff;border:1px solid #bbc8af;color:var(--ink);font:400 16px/1.4 'DM Sans';border-radius:0;min-width:0}.roof-form-card input:focus,.roof-form-card select:focus{outline:2px solid #7c943d;outline-offset:1px}.roof-form-card input[type=range]{width:100%;accent-color:var(--green);height:24px;cursor:ew-resize}.range-caps{display:flex;justify-content:space-between;font-size:10px;color:#798770}.roof-form-card .button{margin-top:23px;width:100%;font-size:14px;padding:16px 18px;background:var(--green);color:var(--yellow);overflow:hidden;position:relative}.roof-form-card .button:before{content:'';position:absolute;inset:-100% auto -100% -60%;width:30%;background:#fff2;transform:rotate(22deg);animation:cta-sweep 6s ease-in-out infinite;pointer-events:none}.roof-form-card .button:hover{box-shadow:5px 5px 0 #d4e886;transform:translate(-2px,-2px)}.roof-form-card .form-disclosure{font-size:11px;margin:16px 0 0;color:#637357}.wish-options{display:grid;gap:10px}.wish-options label{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #c4ceba;font-size:14px;cursor:pointer}.wish-options input{accent-color:var(--green);width:18px;height:18px}.wish-options label:has(input:checked){background:#e5ebd9;border-color:#78925c}.form-actions{display:flex;gap:10px;align-items:stretch;margin-top:23px}.form-actions .button{margin:0}.form-back{border:1px solid #aebea0;background:none;padding:0 16px;color:var(--ink)}.form-step{animation:step-arrive .35s ease-out}.contact-fields .field-label{margin-top:13px}.contact-fields input{margin-top:6px}.optional{font-weight:400;color:#6d7a63;font-size:11px}.form-status:empty{display:none}.roof-form-card .form-status{background:#e1ebd5;padding:12px;margin:14px 0 0;font-size:13px}.hero-bottom{border-top:1px solid #ffffff25;padding-top:22px}.hero-bottom>p{font-size:13px}.weather-lab{display:grid;grid-template-columns:1fr 1.2fr;gap:8%;align-items:center}.weather-intro>p:not(.eyebrow){font-size:16px;max-width:420px}.weather-controls{display:flex;gap:8px;margin:28px 0 20px}.weather-controls button{padding:13px 15px;background:transparent;border:1px solid #a8b89b;font-size:13px;color:var(--ink);transition:background .25s,color .25s}.weather-controls button.active{background:var(--green);color:var(--yellow);border-color:var(--green)}.weather-explanation{min-height:90px}.weather-stage{background:var(--green);color:var(--paper);padding:23px 25px;position:relative;box-shadow:14px 14px 0 #e1e6d7}.stage-label{display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:1px;color:#c1d1b7}.stage-label span:last-child{color:var(--yellow)}.weather-stage svg{width:100%;display:block}.heat-flows{opacity:0;stroke-dasharray:18 9;transition:opacity .5s;animation:waterflow 2.2s linear infinite}.weather-stage[data-mode=heat] .heat-flows{opacity:1}.weather-stage[data-mode=heat] .weather-rain,.weather-stage[data-mode=heat] .weather-water{opacity:0}.weather-rain,.weather-water{transition:opacity .5s}.weather-stage[data-mode=heat] .thermal-layer{animation:thermal-pulse 2s infinite}.stage-fact{display:flex;gap:22px;align-items:center;border-top:1px solid #ffffff25;padding-top:18px}.stage-fact>span{font:600 60px/1 'Barlow Condensed';color:var(--yellow)}.stage-fact p{color:#c1d1b7;font-size:13px;margin:0}.stage-fact strong{display:block;color:white;font-size:18px;margin-bottom:4px}.cta-ribbon{margin:0 3% 25px;padding:35px 5%;background:var(--yellow);display:flex;justify-content:space-between;align-items:center;gap:30px;overflow:hidden}.cta-ribbon p{margin:0;font:600 36px/1.05 'Barlow Condensed';text-transform:uppercase;color:var(--green)}.cta-ribbon strong{font-weight:800}.ribbon-cta{display:flex;align-items:center;gap:40px;font-size:13px;font-weight:700;letter-spacing:1px}.ribbon-cta b{display:flex;align-items:center;justify-content:center;width:75px;height:75px;border-radius:50%;background:var(--green);color:var(--yellow);font-size:38px;font-weight:400;animation:cta-breathe 3s ease-in-out infinite}.ribbon-cta:hover b{background:#456429}.floating-cta{position:fixed;z-index:15;bottom:20px;right:24px;background:var(--yellow);padding:14px 24px;box-shadow:0 4px 25px #0003;display:flex;flex-direction:column;transform:translateY(130%);opacity:0;transition:transform .4s,opacity .4s;pointer-events:none}.floating-cta.show{transform:translateY(0);opacity:1;pointer-events:auto}.floating-cta span{font-size:11px;color:#4b622f}.floating-cta b{font-size:16px}.motion-paused *{animation-play-state:paused!important}@keyframes rainfall{to{stroke-dashoffset:-56}}@keyframes waterflow{to{stroke-dashoffset:-104}}@keyframes thermal-pulse{50%{fill:#b9d833}}@keyframes cta-sweep{0%,65%{left:-60%}90%,100%{left:150%}}@keyframes cta-breathe{50%{box-shadow:0 0 0 10px #193e3114;transform:rotate(8deg)}}@keyframes step-arrive{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1100px){.hero-experience{grid-template-columns:1fr 400px;gap:5%}.hero-story h1{font-size:7.3vw}.roof-form-card{padding:24px}.hero-story .eyebrow{font-size:9px}.weather-lab{gap:5%}.weather-controls{flex-direction:column}.weather-explanation{min-height:115px}}
@media(max-width:760px){.hero{padding-top:108px;min-height:0}.hero-experience{grid-template-columns:1fr;gap:30px;margin:26px 0}.hero-story h1{font-size:15vw;line-height:.88}.hero-story h1 small{font-size:.42em;margin-top:16px}.hero-story .eyebrow{font-size:10px;margin-bottom:15px}.hero-lead{font-size:16px;margin:20px 0}.live-roof{padding:12px 16px;max-width:none}.live-roof svg{max-height:135px}.live-top strong{font-size:20px}.live-note{font-size:11px}.roof-form-card{padding:23px;box-shadow:7px 7px 0 #e7ff5720;scroll-margin-top:18px}.roof-form-card h2{font-size:43px}.hero-bottom{display:none}.hero .photo-caption{font-size:9px}.weather-lab{grid-template-columns:1fr;gap:30px}.weather-controls{flex-direction:row}.weather-controls button{font-size:12px;padding:12px}.weather-explanation{min-height:0}.weather-stage{padding:20px 16px;box-shadow:8px 8px 0 #e1e6d7}.stage-label{font-size:8px}.stage-label span:last-child{display:none}.cta-ribbon{padding:28px 6%;gap:20px}.cta-ribbon p{font-size:28px}.ribbon-cta{gap:12px;font-size:10px;letter-spacing:0}.ribbon-cta>span{max-width:85px}.ribbon-cta b{width:52px;height:52px;font-size:30px}.floating-cta{bottom:12px;right:12px;padding:10px 18px}.floating-cta span{font-size:10px}.floating-cta b{font-size:14px}footer{padding-bottom:95px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.form-step{animation:none}.floating-cta{transition:none}}
.transformation{height:230svh;position:relative;background:#e8ebdf;padding:0 5%}.transformation-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:28px 0;max-width:1320px;margin:auto}.transformation-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.transformation-heading h2{font-size:clamp(38px,4.3vw,64px);margin:0;line-height:.98}.transformation-heading .eyebrow{margin-bottom:12px;font-size:11px}.transformation-heading>p{font-size:14px;line-height:1.6;margin:0}.roof-comparison{position:relative;overflow:hidden;flex:1;min-height:180px;max-height:68svh;background:#324331;--reveal:0%}.comparison-photo{position:absolute;inset:0;background-image:url('/roof-before-after.png');background-size:201.3% auto;background-repeat:no-repeat}.comparison-after{background-position:right center}.comparison-before{background-position:left center;clip-path:inset(0 var(--reveal) 0 0)}.comparison-label{position:absolute;top:20px;padding:9px 14px;font-size:11px;letter-spacing:1px;font-weight:600;z-index:2}.before-label{left:20px;background:#14251de0;color:white}.after-label{right:20px;background:var(--yellow);color:var(--green);opacity:0}.comparison-seam{position:absolute;top:0;bottom:0;left:calc(100% - var(--reveal));width:2px;background:var(--yellow);pointer-events:none}.comparison-seam>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;background:var(--yellow);border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--green)}.comparison-caption{position:absolute;bottom:12px;left:20px;font-size:11px;color:white;background:#12271bc9;padding:4px 9px}.comparison-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:36px}.comparison-bottom label{display:flex;align-items:center;gap:14px;font-size:13px;min-width:240px}.comparison-bottom input{width:170px;accent-color:var(--green);cursor:ew-resize}.comparison-instruction{font-size:10px;letter-spacing:1.4px;color:#637557}.comparison-bottom .motion-toggle{position:static;transform:none;flex-shrink:0;border:0;background:var(--green);color:var(--yellow)}.motion-paused .transformation{height:auto}.motion-paused .transformation-sticky{position:relative;min-height:700px;height:95svh}.motion-paused .comparison-instruction{visibility:hidden}@media(max-width:760px){.transformation{padding:0 5%;height:210svh}.transformation-sticky{gap:16px;padding:25px 0;height:100svh}.transformation-heading{display:block}.transformation-heading h2{font-size:44px}.transformation-heading>p{font-size:13px;margin-top:14px}.comparison-photo{background-size:auto 100%;width:201.3%;}.comparison-after{left:-101.3%;background-position:right center}.comparison-before{width:100%;background-size:201.3% 100%;background-position:left center}.comparison-after{background-size:100% 100%}.roof-comparison{flex:1;max-height:58svh;min-height:200px}.comparison-label{top:12px;font-size:8px;padding:7px 9px;letter-spacing:.4px}.before-label{left:12px}.after-label{right:12px}.comparison-caption{left:12px;font-size:9px}.comparison-bottom{gap:10px}.comparison-bottom label{min-width:0;gap:9px}.comparison-bottom input{width:130px}.comparison-instruction{display:none}.motion-paused .transformation-sticky{min-height:650px}}@media(prefers-reduced-motion:reduce){.transformation{height:auto}.transformation-sticky{position:relative;height:95svh;min-height:650px}.comparison-instruction{visibility:hidden}}
@media(max-width:760px){.comparison-photo{width:100%;left:0;background-size:auto 100%}.comparison-before{background-position:left center}.comparison-after{background-position:right center}}