@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--paper:#efe8db;--ink:#192d3b;--muted:#546252;--orange:#715237;--line:#c9c0af}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:5px}header{height:100px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:25px}.brand img{width:175px;display:block;mix-blend-mode:multiply}nav{display:flex;gap:36px;font-size:13px;font-weight:600}nav a:hover{color:var(--orange)}.button{display:flex;align-items:center;justify-content:space-between;gap:44px;background:var(--orange);color:#fff;padding:19px 23px;border:0;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s}.button:hover{background:#192d3b}.button.small{padding:15px 18px;font-size:12px;gap:28px}.button span{font-size:20px}.hero{padding:66px 5% 40px}.eyebrow,.section-label{font-size:10px;letter-spacing:1.8px;font-weight:700;display:flex;align-items:center;gap:10px}.eyebrow i,.live i{width:6px;height:6px;background:var(--orange);border-radius:50%;display:inline-block}.hero-title{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:28px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,Arial,sans-serif}h1{font-size:clamp(48px,6.4vw,100px);font-weight:650;letter-spacing:-5px;line-height:1.08}em{font-style:normal;color:var(--orange)}.hero-side{display:flex;align-items:center;gap:34px;padding-bottom:8px}.hero-side p{font-size:13px;line-height:1.7}.round-link{border:1px solid #c8cbbd;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px}.round-link:hover{background:var(--ink);color:var(--paper)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:38px}.hero-bottom p{font-size:13px;line-height:1.7;color:#676f61}.hero-bottom>span{font-size:9px;font-weight:700;letter-spacing:1.4px}.hero-bottom b{margin-left:27px;font-size:16px}.build-story{height:440vh;position:relative;margin:0 24px}.build-sticky{position:sticky;top:0;height:100svh;min-height:650px;max-height:1150px;background:#222c25;overflow:hidden;color:var(--paper);display:flex;flex-direction:column}.scene-top{display:flex;justify-content:space-between;padding:28px 3%;font-size:9px;letter-spacing:1.5px;color:#c3c9b9;z-index:2}.live{display:flex;align-items:center;gap:10px}.scene-wrap{flex:1;min-height:0;position:relative}.scene-wrap svg{height:100%;width:100%;overflow:visible}.mountain{fill:none;stroke:#5c6c58;stroke-width:1;opacity:.24}.mountain.faint{opacity:.13}.layer{opacity:0;transform:translateY(-30px);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}.layer.shown{opacity:1;transform:translateY(0)}.dimensions{opacity:.5}.drawing-label,.drawing-number{position:absolute;bottom:20px;font-size:8px;letter-spacing:1.5px;color:#98a58e}.drawing-label{left:3%}.drawing-number{right:3%}.scene-bottom{padding:0 3%}.stage-tabs{display:flex;justify-content:space-between;margin-bottom:17px;border-top:1px solid #485043;padding-top:20px;gap:12px}.stage-tabs button{border:0;color:#8c9a84;background:none;text-align:left;padding:0;cursor:pointer;font-size:10px;letter-spacing:.6px;display:flex;gap:14px;align-items:center;min-height:25px}.stage-tabs button.active{color:#f6ad7d}.stage-tabs button span{font-size:11px;letter-spacing:0}.progress-track{height:2px;background:#46503f}.progress-track div{height:2px;background:#e79462;width:0;transition:width .1s linear}.scene-caption{display:grid;grid-template-columns:90px 1.15fr 1fr;align-items:start;gap:20px;padding:27px 3% 31px}.scene-caption>span{color:#9fae94;font-size:10px;letter-spacing:1px;padding-top:5px}.scene-caption h2{font-size:23px;font-weight:500;letter-spacing:-.7px}.scene-caption p{font-size:12px;line-height:1.7;max-width:330px;color:#aeb9a2}.intro{padding:110px 8%}.intro h2,.about h2,.project h2{font-size:clamp(36px,4.5vw,64px);font-weight:550;line-height:1.15;letter-spacing:-2.6px;margin-top:28px}.service-list{margin-top:60px}.service-list article{display:grid;grid-template-columns:55px 1fr 1.2fr 30px;gap:25px;align-items:center;border-top:1px solid var(--line);padding:32px 0}.service-list article:last-child{border-bottom:1px solid var(--line)}.service-list article>span{font-size:10px;color:#87907c}.service-list h3{font-size:25px;font-weight:500;letter-spacing:-.9px}.service-list p{font-size:13px;line-height:1.8;color:#70776a;max-width:380px}.service-list b{font-size:24px;color:var(--orange);font-weight:400}.about{margin:0 5%;padding:70px 5%;background:#e8e9de;display:grid;grid-template-columns:1fr 1.2fr;gap:9%}.about-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #cbd0bf;position:relative;min-height:350px}.about-mark:before,.about-mark:after{content:'+';position:absolute;color:#75816d;font-size:18px;top:-13px;left:-6px}.about-mark:after{top:auto;left:auto;bottom:-12px;right:-6px}.about-mark svg{width:160px;height:185px;fill:#252d28}.about-mark span{font-size:8px;letter-spacing:1.5px;margin-top:20px}.about h2{font-size:45px;margin-bottom:26px}.about-content>p{font-size:13px;line-height:1.9;color:#68725f;margin-top:15px}.about-foot{margin-top:34px;padding-top:20px;border-top:1px solid #cbd0bf;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.8px;gap:10px}.project{padding:115px 8%;display:grid;grid-template-columns:1fr 1fr;gap:10%}.project>div>p{margin-top:25px;font-size:14px;line-height:1.8;color:#70776a}form{padding-top:5px}label{display:flex;flex-direction:column;font-size:11px;font-weight:600;gap:12px;margin-bottom:25px}input,select,textarea{border:0;border-bottom:1px solid #b8bfae;background:transparent;border-radius:0;padding:0 0 12px;width:100%;font-size:13px;color:var(--ink);resize:vertical}input::placeholder,textarea::placeholder{color:#8b9183}select{height:30px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}form .button{width:100%;margin-top:30px}.form-note{font-size:10px;line-height:1.7;color:#7c8474;margin-top:15px}#form-status{font-size:12px;line-height:1.6;margin-top:12px;color:var(--orange)}footer{margin:0 5%;padding:30px 0 35px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}footer img{width:140px;mix-blend-mode:multiply}footer div{font-size:11px;line-height:1.8;color:#6c7564}footer>span,footer>a{font-size:8px;letter-spacing:1px}footer a{white-space:nowrap}
@media(min-width:1500px){body{max-width:1800px;margin:auto}.scene-wrap svg{max-width:1100px;display:block;margin:auto}}
@media(max-width:850px){nav{gap:18px}.hero-side p{display:none}h1{letter-spacing:-3px}.scene-caption{grid-template-columns:60px 1fr}.scene-caption p{grid-column:2;max-width:none}.stage-tabs button{gap:6px}.about{gap:6%;padding:45px 5%}.about h2{font-size:36px}.service-list article{grid-template-columns:30px .9fr 1fr 20px;gap:15px}.project{gap:7%;padding:90px 6%}.callout{display:none}}
@media(max-width:600px){header{height:80px;margin:0 6%;gap:10px}.brand img{width:133px}nav{display:none}.button.small{font-size:10px;padding:12px;gap:17px}.hero{padding:43px 6% 30px}.eyebrow{font-size:8px;letter-spacing:1.1px}.hero-title{margin-top:24px;gap:8px}h1{font-size:46px;letter-spacing:-2.9px}.hero-side{padding-bottom:0}.round-link{width:37px;height:37px;font-size:21px}.hero-bottom{margin-top:24px;gap:20px}.hero-bottom p{font-size:11px}.hero-bottom>span{font-size:7px;max-width:65px;line-height:1.9}.hero-bottom b{margin-left:0;display:block}.build-story{margin:0 10px;height:400vh}.build-sticky{min-height:560px;max-height:900px}.scene-top{padding:24px 6%;font-size:7px;letter-spacing:1px}.scene-wrap{display:flex;align-items:center;overflow:hidden}.scene-wrap svg{width:140%;height:auto;max-height:100%;flex-shrink:0;margin-left:-20%}.drawing-label,.drawing-number{font-size:6px;bottom:15px;letter-spacing:.7px}.drawing-label{left:6%}.drawing-number{right:6%}.scene-bottom{padding:0 6%}.stage-tabs{gap:7px;padding-top:15px;margin-bottom:12px}.stage-tabs button{display:flex;flex-direction:column;gap:7px;font-size:9px;align-items:flex-start}.stage-tabs button span{font-size:8px}.scene-caption{padding:21px 6% 26px;grid-template-columns:40px 1fr;gap:10px}.scene-caption h2{font-size:20px;letter-spacing:-.5px}.scene-caption p{font-size:11px}.scene-caption>span{font-size:8px}.intro{padding:70px 7%}.section-label{font-size:8px;letter-spacing:1.5px}.intro h2,.project h2{font-size:38px;letter-spacing:-1.8px}.service-list{margin-top:35px}.service-list article{grid-template-columns:22px 1fr 20px;padding:25px 0;gap:8px 15px}.service-list h3{font-size:23px}.service-list p{grid-column:2;grid-row:2;font-size:12px}.service-list b{grid-column:3;grid-row:1}.about{margin:0 5%;padding:30px 7%;grid-template-columns:1fr;gap:35px}.about-mark{min-height:220px}.about-mark svg{width:115px;height:125px}.about-mark span{font-size:7px;margin-top:12px}.about h2{font-size:38px;letter-spacing:-1.8px}.project{padding:75px 7%;grid-template-columns:1fr;gap:35px}.project>div>p{font-size:13px;margin-top:20px}.about-foot{font-size:7px}footer{flex-wrap:wrap;gap:20px;padding:25px 0}footer img{width:120px}footer div{font-size:10px}footer>span,footer>a{font-size:7px}.form-row{gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.layer{transition:none}}

/* Fixed photographic scene; six aligned construction exposures follow scroll. */
.build-story{margin:0;height:460vh}.build-sticky{background:#1e2925;isolation:isolate;min-height:580px;max-height:none}.scene-wrap{position:absolute;inset:0;z-index:-2;overflow:hidden}.photo-scene{position:absolute;inset:0;overflow:hidden;background:#77877d}.scene-frame{position:absolute;inset:0;background-size:200% 300%;background-repeat:no-repeat;opacity:0;transition:opacity .8s ease;transform:scale(1.015)}.scene-frame.shown{opacity:1}.scene-frame[data-frame="0"]{background-position:0 0}.scene-frame[data-frame="1"]{background-position:100% 0}.scene-frame[data-frame="2"]{background-position:0 50%}.scene-frame[data-frame="3"]{background-position:100% 50%}.scene-frame[data-frame="4"]{background-position:0 100%}.scene-frame[data-frame="5"]{background-position:100% 100%}.build-sticky:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(25,45,59,.48),transparent 24%,transparent 48%,rgba(25,45,59,.85) 78%,#192d3b 100%);pointer-events:none}.scene-top{padding:30px 5%;color:#fff;text-shadow:0 1px 10px #263930}.scene-bottom{margin-top:auto;padding:0 5%}.scene-caption{padding:25px 5% 36px;grid-template-columns:90px 1.15fr 1fr}.scene-caption p{color:#d1dbcf}.scene-caption>span{color:#c5d1bf}.stage-tabs{border-color:#b3bfb455}.stage-tabs button{color:#d1d9cf;text-shadow:0 1px 5px #17231d}.stage-tabs button.active{color:#ffd3a7}.progress-track{background:#d1dbcf44}.drawing-label,.drawing-number{display:none}.scene-caption h2{font-size:clamp(22px,2.3vw,34px)}
@media(min-aspect-ratio:3/2){.photo-scene{top:50%;bottom:auto;height:66.667vw;transform:translateY(-50%)}}
@media(max-aspect-ratio:3/2){.photo-scene{left:50%;right:auto;width:150svh;transform:translateX(-50%)}}
@media(max-width:600px){.build-story{height:420vh}.scene-wrap{display:block}.photo-scene{width:150svh;left:48%}.scene-top{padding:24px 6%;font-size:8px}.scene-bottom{padding:0 6%}.scene-caption{padding:20px 6% 27px;grid-template-columns:40px 1fr;gap:10px}.scene-caption h2{font-size:23px}.scene-caption p{font-size:12px}.stage-tabs button{font-size:9px}.stage-tabs button span{font-size:8px}.build-sticky:after{background:linear-gradient(180deg,#192d3b66,transparent 22%,transparent 44%,#192d3be6 73%,#192d3b 100%)}}
@media(prefers-reduced-motion:reduce){.scene-frame{transition:none;transform:none}}
@media(max-width:600px){.photo-scene{inset:auto;top:13%;left:-25%;width:150%;height:100vw;transform:none}.scene-wrap{background:linear-gradient(#8ba4ac,#c2c7b4 40%,#314538 64%,#192d3b 87%)}.build-sticky:after{background:linear-gradient(180deg,#192d3b66,transparent 23%,transparent 45%,#192d3baa 68%,#192d3b 86%)}}

.about-mark .foundation-tags{display:block;width:180px;height:auto;mix-blend-mode:multiply}@media(max-width:600px){.about-mark .foundation-tags{width:130px}}

.hero-intro{max-width:650px}.hero-intro p{max-width:610px}.hero-project{display:inline-flex;margin-top:24px}.hero-bottom{gap:24px}@media(max-width:600px){.hero-project{font-size:12px;padding:16px;gap:20px}.hero-intro{flex:1}.hero-bottom>span{flex-shrink:0}}

/* Approved navy, warm sand, and timber palette. */
.button{background:#233e50;color:#fffaf0;justify-content:center}.button:hover{background:#192d3b}.hero-bottom p,.service-list p,.project>div>p,footer div{color:#4f5c61}.form-note{color:#536068}input,select,textarea{border-color:#9f9c90}input::placeholder,textarea::placeholder{color:#636b6c}.eyebrow{color:#546252}.eyebrow i,.live i{background:#715237}.service-list article{grid-template-columns:40px 1fr 1.2fr}.service-list article>span{color:#715237}.about{background:#192d3b;color:#efe8db}.about h2 em{color:#d8c19c}.about-content>p{color:#deded4}.about-mark{background:#efe8db;color:#192d3b;border-color:#a89980}.about-foot{border-color:#69747a}.about-mark:before,.about-mark:after{color:#d8c19c}.scene-caption p,.scene-caption>span,.stage-tabs button{color:#efe8db}.stage-tabs button.active{color:#e0c69e}.progress-track div{background:#d8c19c}.build-sticky{background:#192d3b}.scene-top,.stage-tabs button{text-shadow:0 1px 6px #192d3b}.button.small,.hero-project{gap:0}
@media(max-width:600px){.service-list article{grid-template-columns:22px 1fr}.service-list p{grid-column:2}.service-list h3{font-size:22px}.scene-wrap{background:linear-gradient(#8ba4ac,#c2c7b4 40%,#344b59 64%,#192d3b 87%)}}

.portfolio{padding:65px 6% 90px}.portfolio h1{margin:25px 0 65px;font-size:clamp(44px,6vw,82px)}.project-feature-copy{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:30px}.project-feature h2{font-size:32px;font-weight:550;letter-spacing:-1px;margin-top:15px}.project-feature-copy p{font-size:14px;line-height:1.8;color:#4f5c61;max-width:470px}.project-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project-gallery figure{margin:0}.project-gallery a{display:block}.project-gallery img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}.project-gallery figcaption{font-size:12px;color:#4f5c61;margin-top:12px}.portfolio-cta{display:inline-flex;margin-top:45px}header nav{gap:24px}@media(max-width:850px){header nav{gap:15px;font-size:11px}.project-feature-copy{grid-template-columns:1fr;gap:20px}.project-gallery{gap:14px}}@media(max-width:600px){header{height:auto;min-height:80px;flex-wrap:wrap;padding:16px 0;gap:16px}header nav{display:flex;order:3;width:100%;justify-content:space-between;padding:8px 0 0;gap:8px;font-size:10px}.portfolio{padding:38px 7% 60px}.portfolio h1{margin-bottom:40px;letter-spacing:-2px}.project-feature h2{font-size:28px}.project-gallery{grid-template-columns:1fr;gap:28px}.project-gallery img{aspect-ratio:auto}.project-feature-copy{gap:15px}}

.framing-feature{margin-top:80px;padding-top:50px;border-top:1px solid var(--line)}.framing-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.framing-gallery img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}.framing-gallery .landscape img{aspect-ratio:4/3}.framing-gallery .portrait img{aspect-ratio:3/4}@media(max-width:600px){.framing-gallery{grid-template-columns:1fr;gap:28px}.framing-feature{margin-top:55px;padding-top:35px}}

/* Six photographic viewpoints: shell construction, then the custom rear deck. */
.scene-frame{background-size:302.3622% 270.8995%;transition:none;will-change:opacity,transform;backface-visibility:hidden}
.scene-frame[data-frame="0"]{background-position:0% 14.706%}.scene-frame[data-frame="1"]{background-position:50.1945% 14.706%}.scene-frame[data-frame="2"]{background-position:100% 14.706%}.scene-frame[data-frame="3"]{background-position:0% 84.3653%}.scene-frame[data-frame="4"]{background-position:50.1945% 84.3653%}.scene-frame[data-frame="5"]{background-position:100% 84.3653%}
@media(min-aspect-ratio:4/3){.photo-scene{top:50%;left:0;right:0;bottom:auto;width:100%;height:75vw;transform:translateY(-50%)}}
@media(max-aspect-ratio:4/3){.photo-scene{top:0;bottom:0;left:50%;right:auto;width:133.333svh;height:100%;transform:translateX(-50%)}}
@media(max-width:600px){.photo-scene{inset:auto;top:13%;left:-25%;width:150%;height:112.5vw;transform:none}.stage-tabs button span{font-size:8px;max-width:54px;line-height:1.4}.stage-tabs{align-items:flex-start}.build-story{height:480vh}}
@media(prefers-reduced-motion:reduce){.scene-frame{will-change:auto}}

/* Approved natural-light construction concept, six square photographic frames. */
.scene-frame{background-image:url('assets/house-build-v2.webp');background-size:300% 200%}
.scene-frame[data-frame="0"]{background-position:0% 0%}.scene-frame[data-frame="1"]{background-position:50% 0%}.scene-frame[data-frame="2"]{background-position:100% 0%}.scene-frame[data-frame="3"]{background-position:0% 100%}.scene-frame[data-frame="4"]{background-position:50% 100%}.scene-frame[data-frame="5"]{background-position:100% 100%}
@media(min-width:601px){.photo-scene{inset:auto;left:0;top:58%;width:100vw;height:100vw;transform:translateY(-58%)}}
@media(max-width:600px){.photo-scene{inset:auto;left:-15%;top:5%;width:130%;height:130vw;transform:none}}


/* ============================================================
   Improvements: tap-to-call phone, mobile menu, photo lightbox,
   readable mobile stage tabs, contact/footer additions.
   ============================================================ */
.phone-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;letter-spacing:.4px;font-weight:500;color:var(--ink);white-space:nowrap}
.phone-link:hover{color:var(--orange)}
.phone-link svg{flex-shrink:0}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer;flex-direction:column;align-items:center;gap:5px}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
@media(max-width:600px){
 header{position:relative}
 .menu-toggle{display:flex}
 header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:8px 6% 16px;border-bottom:1px solid var(--line);box-shadow:0 16px 34px rgba(25,45,59,.10);z-index:60}
 header nav.open{display:flex}
 header nav a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:15px}
 header nav a:last-child{border-bottom:none}
 .phone-link{font-size:11px}
}
/* photo lightbox */
.lightbox{position:fixed;inset:0;background:rgba(15,26,34,.93);display:flex;align-items:center;justify-content:center;padding:5vw;z-index:1000;cursor:zoom-out}
.lightbox img{max-width:min(1100px,94vw);max-height:80vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lightbox .lb-cap{position:absolute;bottom:3.5vh;left:0;right:0;text-align:center;color:#e8e2d5;font-size:14px;letter-spacing:.4px}
.lightbox .lb-close{position:absolute;top:3vh;right:4vw;width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:rgba(15,26,34,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lightbox .lb-close:hover{background:rgba(15,26,34,.8)}
/* contact section phone + service area */
.contact-phone{margin:6px 0 0;font-size:15px;color:var(--muted)}
.contact-phone a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.contact-area{font-size:13px;color:var(--muted)}
/* footer service area */
footer .service-area{font-size:12px;letter-spacing:.4px;color:var(--muted);line-height:1.9}
footer .service-area a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* readable mobile stage tabs */
@media(max-width:600px){
 .stage-tabs{flex-wrap:wrap;gap:8px}
 .stage-tabs button{padding:9px 10px}
 .stage-tabs button span{font-size:10px;max-width:76px;line-height:1.35}
}
