.explorer-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:5%;align-items:center}.explorer-photo{aspect-ratio:1.16;position:relative;overflow:hidden;background:#243b2d}.explorer-scene{position:absolute;inset:0;background:url('/roof-before-after.png') left center/201.3% 100% no-repeat;transition:transform 1s cubic-bezier(.2,.7,.2,1);will-change:transform}.hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;border:2px solid white;background:var(--green);color:white;font-size:14px;box-shadow:0 0 0 9px #ffffff30;animation:hotspot-ring 3s infinite}.hotspot.active{background:var(--yellow);color:var(--green);border-color:var(--yellow)}.hotspot:hover{box-shadow:0 0 0 15px #ffffff35}.zoomed .photo-hotspots{visibility:hidden}.zoom-reset{position:absolute;top:18px;left:18px;padding:10px 14px;border:1px solid #ffffff70;background:#193e31e6;color:white;font-size:13px}.asset-caption{position:absolute;bottom:14px;left:16px;right:16px;color:white;font-size:11px;text-shadow:0 1px 4px #000;background:#10281fad;padding:5px 8px;width:fit-content;max-width:calc(100% - 32px)}.detail-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}.detail-nav button{font-size:12px;padding:9px 12px;background:transparent;border:1px solid #aabb9c;color:var(--green)}.detail-nav button.active{background:var(--green);color:var(--yellow)}.detail-number{display:block;font:600 90px/1 'Barlow Condensed';color:#a9b99b;margin-bottom:20px}.explorer-detail h3{font-size:30px;line-height:1.15}.explorer-detail p{font-size:16px}.detail-question{border-left:3px solid #a9b99b;padding-left:18px;font-size:14px!important}.explorer-detail .button{font-size:13px;gap:18px}.detail-disclaimer{font-size:12px!important;margin-top:15px}.photo-story{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;padding:60px 6%;background:var(--green);color:var(--paper);align-items:start}.story-visual{position:sticky;top:5svh;min-width:0}.story-images{height:78svh;max-height:850px;min-height:400px;position:relative;overflow:hidden;background:#31462a}.story-before,.story-after{position:absolute;inset:0;background-image:url('/roof-before-after.png');background-size:auto 100%;background-repeat:no-repeat;transition:opacity 1.1s,transform 1.2s;will-change:transform,opacity}.story-before{background-position:left center}.story-after{background-position:right center;opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1),opacity .3s}.photo-story[data-stage='1'] .story-before{transform:scale(1.2);transform-origin:25% 45%}.photo-story[data-stage='2'] .story-after{opacity:1;clip-path:inset(0)}.story-photo-title{position:absolute;top:25px;left:25px;right:25px;padding:20px;background:#10281fde}.story-photo-title>span{font-size:11px;letter-spacing:1.5px;color:var(--yellow);display:block}.story-photo-title strong{font:600 34px/1.2 'Barlow Condensed';display:block;margin-top:8px}.story-focus{position:absolute;top:40%;left:18%;width:90px;height:90px;border:1px solid var(--yellow);border-radius:50%;box-shadow:0 0 0 18px #e7ff5718;opacity:0;transition:opacity .6s}.photo-story[data-stage='1'] .story-focus{opacity:1}.story-nav{display:flex;gap:24px;padding-top:17px}.story-nav a{font-size:13px;color:#b6c9a8;padding-bottom:5px;border-bottom:2px solid transparent}.story-nav a.active{color:var(--yellow);border-color:var(--yellow)}.story-copy article{min-height:85svh;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:12svh}.story-copy article>span{font-size:12px;color:#adc798;letter-spacing:1px;margin-bottom:25px}.story-copy h2{font-size:clamp(44px,4.5vw,70px)}.story-copy h2 em{color:var(--yellow)}.story-copy p{color:#ccdbc3;font-size:16px}.story-copy .button,.story-copy .inline-link{align-self:flex-start}.collage-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:280px 280px;gap:25px;align-items:stretch}.collage-grid figure{margin:0;position:relative;overflow:hidden;background:var(--green);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s}.collage-main{grid-row:span 2}.collage-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.collage-grid figure:hover img{transform:scale(1.045)}.collage-grid figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#0a1e15ef);padding:50px 25px 25px;color:white;font-size:23px}.collage-grid figcaption span{display:block;font-size:11px;letter-spacing:1px;margin-bottom:7px;color:var(--yellow)}.collage-note{font-size:12px;margin-top:16px}.collage-ready:not(.arrived) .collage-main{transform:translateY(45px) rotate(-3deg);opacity:0}.collage-ready:not(.arrived) .collage-detail{transform:translateY(65px) rotate(4deg);opacity:0}.collage-ready:not(.arrived) .collage-drain{transform:translateY(75px) rotate(-3deg);opacity:0}.collage-detail{transition-delay:.1s!important}.collage-drain{transition-delay:.2s!important}.material-showcase{display:grid;grid-template-columns:1.3fr 1fr;gap:5%;margin-bottom:45px;align-items:center}.material-photo-wrap{position:relative;overflow:hidden;aspect-ratio:1.25;background:var(--green)}.material-photo-wrap img{height:100%;width:100%;object-fit:cover;transition:scale .7s}.material-photo-tag{position:absolute;top:18px;left:25px;font:700 90px/1 'Barlow Condensed';color:var(--yellow);text-shadow:0 2px 12px #0005}.material-switch{display:flex;margin-bottom:28px;border:1px solid #9cae8f;width:fit-content}.material-switch button{padding:14px 24px;background:transparent;border:0;color:var(--green);font-size:16px}.material-switch button.active{background:var(--green);color:var(--yellow)}.material-picker h3{font-size:30px}.material-picker p{font-size:16px}.material-picker .button{font-size:13px;gap:15px}.detail-view .material-photo-wrap img{scale:1.18}.context-summary{background:#e2ebd5;border-left:3px solid #718950;padding:12px 14px;margin-bottom:20px}.context-summary>span{font-size:10px;letter-spacing:1px;font-weight:700;text-transform:uppercase}.context-summary p{margin:7px 0;font-size:14px!important}.context-summary button{background:none;border:0;padding:4px 0;text-decoration:underline;font-size:12px;color:var(--green)}.motion-paused .collage-grid figure{opacity:1;transform:none}.motion-paused .photo-story .story-visual{position:relative;top:0}.motion-paused .story-copy article{min-height:0;padding:35px 0}.motion-paused .explorer-scene{transform:none!important}.motion-paused .story-before,.motion-paused .story-after{transition:none}.motion-paused .collage-grid img{transform:none!important}@keyframes hotspot-ring{50%{box-shadow:0 0 0 14px #ffffff15}}@media(max-width:1000px){.explorer-grid{grid-template-columns:1fr 1fr;gap:4%}.explorer-detail h3,.material-picker h3{font-size:26px}.detail-number{font-size:65px}.photo-story{gap:5%;padding:40px 5%}.story-nav{gap:15px}.material-showcase{grid-template-columns:1fr 1fr}.material-picker .button{font-size:12px}.collage-grid{grid-template-rows:240px 240px}}@media(max-width:760px){.explorer-grid,.material-showcase{grid-template-columns:1fr;gap:28px}.explorer-photo{aspect-ratio:1.12}.detail-number{font-size:55px;margin-bottom:12px}.detail-nav{margin-bottom:18px}.photo-story{display:block;padding:24px 6%}.story-visual{top:12px;z-index:2;background:var(--green);padding-bottom:10px}.story-images{height:42svh;min-height:260px;max-height:400px}.story-before,.story-after{background-size:201.3% auto}.story-photo-title{top:12px;left:12px;right:12px;padding:12px}.story-photo-title strong{font-size:26px}.story-photo-title>span{font-size:10px}.story-nav{justify-content:space-between;gap:8px;padding-top:12px}.story-nav a{font-size:12px}.story-copy article{min-height:72svh;padding:30px 0;scroll-margin-top:52svh}.story-copy h2{font-size:48px}.story-copy article>span{margin-bottom:17px}.collage-grid{grid-template-columns:1fr 1fr;grid-template-rows:370px 240px;gap:14px}.collage-main{grid-column:span 2;grid-row:auto}.collage-grid figcaption{padding:40px 15px 18px;font-size:17px;line-height:1.25}.collage-grid figcaption span{font-size:9px}.material-photo-wrap{aspect-ratio:1.3}.material-picker .eyebrow{margin-bottom:16px}.material-switch{margin-bottom:20px}.material-photo-tag{font-size:70px}.hotspot{width:42px;height:42px;font-size:12px}.asset-caption{font-size:10px}.motion-paused .story-copy article{scroll-margin-top:20px}}@media(prefers-reduced-motion:reduce){.collage-grid figure{opacity:1!important;transform:none!important}.story-visual{position:relative;top:0}.story-copy article{min-height:0;padding:30px 0}.explorer-scene{transform:none!important}.story-before,.story-after{transition:none}.material-photo-wrap img{transition:none}.hotspot{animation:none}.collage-grid figure:hover img{transform:none}}