html,body{overflow-x:clip}
.hero-visual{--look-x:0deg;--look-y:0deg;--stage-light:50%;touch-action:pan-y;isolation:isolate}
.hero-photo-main,.hero-photo-small{will-change:transform}
.hero-photo-main{cursor:grab;transform:rotateY(var(--look-x)) rotateX(var(--look-y)) translateZ(15px);transition:transform 400ms cubic-bezier(.16,.75,.15,1)}
.hero-photo-small{display:block;cursor:pointer;transform:rotateY(calc(var(--look-x)*.65)) rotateX(calc(var(--look-y)*.55)) translateZ(65px);transition:transform 500ms cubic-bezier(.16,.75,.15,1)}
.hero-photo-small>span{display:flex;align-items:center;gap:10px}
.hero-photo-small:focus-visible{outline:3px solid #08777d;outline-offset:5px}
.hero-visual.dragging .hero-photo-main,.hero-visual.dragging .hero-photo-small{transition:none;cursor:grabbing}
.hero-photo-main:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff0c 40%,#ffffff55 49%,#ffffff0b 57%,transparent 75%);background-position:var(--stage-light) 50%;background-size:210% 100%;opacity:.6;mix-blend-mode:screen}
.hero-photo-main:after{content:"";position:absolute;inset:7px;z-index:2;border:1px solid #ffffff44;border-radius:1px;pointer-events:none;opacity:.6}
.stage-floor{position:absolute;left:-25px;right:-25px;bottom:34px;height:155px;z-index:-1;background:repeating-linear-gradient(90deg,#08777d16 0 1px,transparent 1px 30px),repeating-linear-gradient(0deg,#08777d16 0 1px,transparent 1px 30px);transform:rotateX(65deg);transform-origin:center bottom;mask-image:radial-gradient(ellipse,#000 20%,transparent 70%)}
.stage-orbit{position:absolute;left:0;right:-25px;top:30px;bottom:15px;z-index:-1;border:1px solid #20a7ad21;border-radius:50%;transform:rotateY(-20deg) rotateX(15deg)}
.stage-controls{position:absolute;top:-42px;right:0;display:flex;align-items:center;gap:8px;z-index:4}
.stage-index{font:500 9px/1 var(--sans);letter-spacing:.15em;color:#6e9582;margin-right:8px;font-variant-numeric:tabular-nums}
.stage-controls button{width:29px;height:29px;border:1px solid #a9cfc1;border-radius:50%;color:var(--teal);background:#ffffffdf;font-size:13px;display:grid;place-items:center;transition:background 200ms,transform 200ms}
.stage-controls button:hover{background:#e4f2ec;transform:translateY(-2px)}
.hero-visual.stage-change .hero-photo-main>img,.hero-visual.stage-change .hero-photo-small>img{animation:stage-switch 650ms cubic-bezier(.17,.7,.18,1) both}
.hero-visual.stage-change .photo-caption{animation:stage-caption 600ms ease both}
body.motion-on .hero-visual.stage-visible .hero-guide-trace{animation:blueprint-current 4200ms ease-in-out infinite;stroke-dasharray:300 1900;stroke-dashoffset:2200}
body.motion-on .hero-visual.stage-visible .stage-orbit{animation:orbit-breathe 7500ms ease-in-out infinite}
body.motion-on .hero-visual.stage-visible .hero-photo-main>img{animation:photo-breathe 8000ms ease-in-out infinite}
body.motion-on .hero-visual.stage-change .hero-photo-main>img{animation:stage-switch 650ms cubic-bezier(.17,.7,.18,1) both}
body.motion-on .hero h1 em{background:linear-gradient(115deg,#08777d 15%,#08777d 37%,#4ba3a1 48%,#08777d 60%,#08777d 90%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:type-shine 7000ms ease-in-out infinite}
/* Keep the reveal mask outside the glyph bounds, including italic overhangs and descenders. */
.motion-word{display:inline-block;overflow:visible;vertical-align:baseline;clip-path:inset(-.25em -.15em)}
.motion-word-inner{display:inline-block;padding-block:.18em;margin-block:-.18em}
.motion-heading.heading-fired .motion-word-inner{animation:word-rise 720ms cubic-bezier(.18,.75,.13,1) both;animation-delay:var(--word-delay,0ms)}
.section-heading{position:relative}.section-heading:before{content:"";position:absolute;left:0;right:0;top:-25px;height:1px;background:linear-gradient(90deg,#08777d70,#08777d14 60%,transparent);transform-origin:left}
.section-heading.motion-fired:before{animation:rule-grow 1100ms cubic-bezier(.18,.7,.18,1) both}.reveal.motion-fired .eyebrow{animation:label-scan 650ms ease-out both}
.service-image:before{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:38%;z-index:2;background:linear-gradient(90deg,transparent,#ffffff55,transparent);transform:skewX(-15deg);pointer-events:none;opacity:0}
.service-card:hover .service-image:before{animation:card-sweep 650ms ease-out}.service-card{transition:transform 350ms var(--ease)}.service-card:hover{transform:translateY(-5px)}.service-card:hover .service-image{box-shadow:0 12px 28px #08777d1c}
.service-card.motion-fired .service-image{animation:photo-power 750ms var(--ease) both;animation-delay:var(--card-delay,0ms)}.project-card.motion-fired .project-image{animation:photo-power 1000ms var(--ease) both}.project-card.motion-fired .project-image img{animation:project-settle 1300ms var(--ease) both}
.process-steps.motion-fired:before{animation:rule-grow 1400ms ease-out both}.process-steps.motion-fired .process-number{animation:step-ignite 1000ms ease-out both}.process-steps.motion-fired article:nth-child(2) .process-number{animation-delay:180ms}.process-steps.motion-fired article:nth-child(3) .process-number{animation-delay:360ms}
.roofline-module.house-fired .house-walls>path:nth-child(3){animation:roof-settle 1200ms cubic-bezier(.18,.75,.2,1) both}.roofline-module.house-fired .roofline-gutter{stroke-dasharray:580;animation:gutter-trace 1400ms ease-out both;animation-delay:200ms}
.video-review:hover .video-review-play{box-shadow:0 0 0 10px #ffffff26;transform:scale(1.05);transition:transform 300ms,box-shadow 300ms}.contact-dock a:first-child>span{transition:transform 250ms}.contact-dock a:first-child:hover>span{transform:translate(2px,-2px)}
@keyframes stage-switch{from{opacity:.3;transform:scale(1.045);filter:blur(3px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes stage-caption{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes blueprint-current{0%{stroke-dashoffset:2200;opacity:.35}50%{opacity:.9}100%{stroke-dashoffset:0;opacity:.35}}@keyframes orbit-breathe{0%,100%{transform:rotateY(-20deg) rotateX(15deg) scale(.98);opacity:.5}50%{transform:rotateY(-10deg) rotateX(8deg) scale(1.04);opacity:1}}@keyframes photo-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}@keyframes type-shine{0%,25%{background-position:100% 50%}75%,100%{background-position:0% 50%}}@keyframes word-rise{from{transform:translateY(105%);filter:blur(3px);opacity:.3}to{transform:translateY(0);filter:blur(0);opacity:1}}@keyframes rule-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes label-scan{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes card-sweep{0%{left:-70%;opacity:0}15%{opacity:1}100%{left:135%;opacity:0}}@keyframes photo-power{from{clip-path:inset(8% 0 8% 0);opacity:.15;transform:translateY(12px)}to{clip-path:inset(0);opacity:1;transform:translateY(0)}}@keyframes project-settle{from{transform:scale(1.1)}to{transform:scale(1)}}@keyframes step-ignite{from{color:#b1cec0;transform:translateY(5px)}to{color:#08777d;transform:translateY(0)}}@keyframes roof-settle{from{transform:translateY(-16px);opacity:.1}to{transform:translateY(0);opacity:1}}@keyframes gutter-trace{from{stroke-dashoffset:580}to{stroke-dashoffset:0}}
body.motion-off .motion-word-inner{transform:none!important;filter:none!important;opacity:1!important}body.motion-off .hero h1 em{color:var(--teal);background:none}body.motion-off .hero-photo-main>img{transform:none!important;filter:none!important}body.motion-off .service-card:hover{transform:none!important}body.motion-off .section-heading:before{transform:scaleX(1)}body.motion-off .roofline-gutter{stroke-dashoffset:0}
body.motion-on .hero h1 em{color:var(--teal);background:none;animation:none}
body.motion-on .hero h1 em .motion-word-inner{background:linear-gradient(115deg,#08777d 20%,#4ba3a1 48%,#08777d 72%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent}
body.motion-on .hero h1.heading-fired em .motion-word-inner{animation:word-rise 720ms cubic-bezier(.18,.75,.13,1) var(--word-delay,0ms) both,type-shine 7000ms ease-in-out 0ms infinite}
@media(max-width:600px){.stage-controls{top:-30px}.hero-visual{margin-top:15px}.stage-floor{left:0;right:0}.stage-orbit{right:0}}
@media(max-width:360px){.hero{padding-bottom:98px}.hero-photo-small{width:155px;height:125px}.hero-film{bottom:-50px;right:0}.hero-visual{height:405px}}
@media(prefers-reduced-motion:reduce){.motion-word-inner{transform:none!important;filter:none!important;opacity:1!important}.hero h1 em{background:none!important;color:var(--teal)!important}.service-card:hover{transform:none}.hero-photo-main>img{transform:none!important;filter:none!important}.roofline-gutter{stroke-dashoffset:0}}