:root{--ink:#1c231f;--paper:#f5f5f0;--accent:#d79760;--muted:#aab1aa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,summary{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:6px}header{height:96px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:white;gap:30px}.brand{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:700;letter-spacing:1.5px;line-height:1.4}.brand small{display:block;font-size:10px;letter-spacing:3px;font-weight:400}.monogram{font-size:37px;letter-spacing:-3px;line-height:1}.monogram span{color:var(--accent)}nav{display:flex;gap:34px;font-size:14px}nav a:hover{color:var(--accent)}.nav-location{font-size:12px;letter-spacing:1.5px;border:1px solid #707770;padding:10px 17px}.hero{height:730px;min-height:620px;position:relative;color:white;background:#354036;overflow:hidden}.hero>img{height:100%;width:100%;object-fit:cover;object-position:center 58%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,17,.86),rgba(11,20,17,.26) 70%),linear-gradient(0deg,rgba(11,20,17,.85),transparent 40%)}.hero-copy{position:absolute;top:65px;left:7%;max-width:720px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;line-height:1.7}.hero .eyebrow{color:#e3b38d}h1{font-size:clamp(56px,6.6vw,98px);line-height:1.02;letter-spacing:-4px;font-weight:500;margin:24px 0}h1 em{font-style:normal;color:#e7b18a}.hero-copy>p:not(.eyebrow){font-size:18px;color:#e7e9e5;margin:25px 0 28px}.button{display:inline-flex;background:var(--accent);color:#19201b;padding:15px 26px;font-size:14px;font-weight:700;border:1px solid var(--accent);transition:background .2s}.button:hover{background:#e9b388}.hero-caption{position:absolute;right:7%;bottom:114px;display:flex;flex-direction:column;border-left:1px solid #d8996377;padding-left:20px;gap:5px}.hero-caption span{font-size:12px;letter-spacing:1px}.hero-caption strong{font-size:18px;font-weight:400}.hero-bottom{position:absolute;bottom:0;left:7%;right:7%;padding:22px 0;border-top:1px solid #ffffff42;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px}.trade-strip{padding:23px 7%;display:flex;align-items:center;justify-content:space-between;background:#e8e9e2;font-size:14px}.trade-strip i{height:4px;width:4px;background:#9f7957}.section{padding:95px 7%}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px;gap:30px}.section-top>p{color:#626a62;font-size:16px}h2{font-size:clamp(35px,4vw,58px);letter-spacing:-2px;line-height:1.12;font-weight:500;margin:15px 0 0}.filters{display:flex;gap:28px;border-bottom:1px solid #cdd1c8;margin-bottom:35px}.filters button{background:none;border:0;border-bottom:2px solid transparent;color:#646b63;padding:14px 0}.filters button.active{border-color:var(--ink);color:var(--ink)}sup{font-size:10px;margin-left:3px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 28px}.project{padding:0;text-align:left;background:none;border:0;color:var(--ink);min-width:0}.project.featured{grid-column:1/-1}.photo{height:365px;position:relative;overflow:hidden;background:#d8ddd2}.featured .photo{height:540px}.photo img{width:100%;height:100%;object-fit:cover;transition:transform .65s}.featured .photo img{object-position:center 56%}.project:hover img{transform:scale(1.025)}.view{position:absolute;bottom:18px;right:18px;background:var(--paper);padding:10px 17px;font-size:13px}.project-info{display:flex;justify-content:space-between;gap:12px;padding-top:19px}.project-info .eyebrow{color:#72796e;font-size:11px}h3{font-size:25px;line-height:1.3;margin:5px 0;font-weight:500;letter-spacing:-.6px}.index{font-size:13px;color:#7c8578;padding-top:4px}.expertise{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 1.15fr;gap:11%}.expertise .eyebrow{color:var(--accent)}.expertise-intro>p:not(.eyebrow){color:#b6bdb5;max-width:380px;margin:28px 0}.text-link{font-size:14px;border-bottom:1px solid var(--accent);padding-bottom:6px}.service-list details{border-top:1px solid #485146}.service-list details:last-child{border-bottom:1px solid #485146}.service-list summary{display:flex;align-items:center;gap:23px;cursor:pointer;padding:25px 0;font-size:23px;list-style:none;letter-spacing:-.5px}.service-list summary::-webkit-details-marker{display:none}.service-list summary span{font-size:12px;color:var(--accent);letter-spacing:0}.service-list summary b{font-size:20px;font-weight:400;margin-left:auto;color:var(--accent)}details[open] summary b{transform:rotate(45deg)}.service-list details p{color:#b6bdb5;font-size:16px;margin:0 0 26px 39px;max-width:430px}.about{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.about-image{position:relative;min-height:540px;height:100%}.about-image img{width:100%;height:100%;position:absolute;object-fit:cover}.about-image span{position:absolute;bottom:0;left:0;right:0;color:white;background:#1c231fcc;padding:19px 24px;font-size:11px;letter-spacing:2px}.about-copy h2{font-size:43px}.about-copy>p:not(.eyebrow){color:#61695e;margin:26px 0}.about-note{font-size:24px;line-height:1.4;border-left:3px solid var(--accent);padding-left:20px;margin-top:35px}.area{text-align:center;background:#e5e8df;padding-top:75px;padding-bottom:75px}.area h2{margin-bottom:25px}.area>p:not(.eyebrow){color:#5c6659;margin-bottom:28px}footer{background:var(--ink);color:#f2f3ed;padding:40px 5%;display:flex;justify-content:space-between;align-items:center;gap:25px}footer p,footer>span{font-size:12px;color:#aab1a6}dialog{border:0;padding:0;width:min(1000px,92vw);max-height:90vh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#0a130feb;backdrop-filter:blur(5px)}.close{position:sticky;top:12px;float:right;margin:12px 15px 0 0;border:0;background:var(--ink);color:white;border-radius:50%;width:44px;height:44px;font-size:28px;z-index:2}.dialog-copy{padding:35px 40px}.dialog-copy h2{font-size:38px}.dialog-copy p:last-child{max-width:740px;color:#596254}#dialog-images{display:grid;gap:12px;padding:0 15px 15px}#dialog-images img{width:100%;height:auto;display:block}[hidden]{display:none!important}@media(min-width:1600px){.hero{height:850px}.hero-copy{top:100px}}@media(max-width:800px){header{height:80px;padding:0 5%;gap:15px}.brand{font-size:11px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:2px}.monogram{font-size:32px}nav{gap:17px;font-size:12px}.nav-location{display:none}.hero{height:700px;min-height:0}.hero-copy{left:6%;top:48px}h1{font-size:72px}.hero>img{object-position:60% center}.hero-caption{bottom:90px;left:6%;right:auto}.hero-bottom{left:6%;right:6%;font-size:9px;letter-spacing:1px}.hero-bottom span{display:none}.trade-strip{padding:18px 6%;gap:20px;overflow:auto;white-space:nowrap;font-size:13px}.trade-strip i{flex:0 0 3px}.section{padding:62px 6%}.section-top{display:block}.section-top>p{margin-top:24px}.project-grid{gap:30px;grid-template-columns:1fr}.project.featured{grid-column:auto}.photo,.featured .photo{height:330px}.expertise,.about{grid-template-columns:1fr;gap:45px}.expertise-intro>p:not(.eyebrow){max-width:none}.about-image{height:430px;min-height:0}.about-copy h2{font-size:38px}.filters{gap:23px;font-size:14px;overflow-x:auto;white-space:nowrap}footer{align-items:start;flex-direction:column;gap:16px}footer p{margin:0}.dialog-copy{padding:25px}.dialog-copy h2{font-size:30px}}@media(max-width:420px){nav a:last-child{display:none}h1{font-size:61px;letter-spacing:-3px}.hero-copy>p:not(.eyebrow){font-size:16px}.hero .eyebrow{font-size:10px}.service-list summary{font-size:20px}.photo,.featured .photo{height:270px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

#dialog-images figure{margin:0;background:#e8e9e2}#dialog-images figcaption{padding:13px 18px;font-size:14px;color:#46503f}.gallery-frame{background:#e8e9e2}.gallery-frame.portrait{aspect-ratio:9/16;max-width:420px;margin:auto;overflow:hidden}#dialog-images .portrait img{width:100%;height:100%;object-fit:cover}

.gallery-frame.letterbox{aspect-ratio:16/9;overflow:hidden}#dialog-images .letterbox img{width:100%;height:100%;object-fit:cover}

/* Tacoma: intentional framing of the original construction photographs. */
#dialog-images .gallery-frame[data-photo="tacoma-6773"]{position:relative;overflow:hidden;aspect-ratio:2.054645}
#dialog-images .gallery-frame[data-photo="tacoma-6773"] img{position:absolute;max-width:none;width:106.382979%;height:163.934426%;left:-6.382979%;top:-37.704918%;object-fit:fill}
#dialog-images .gallery-frame[data-photo="tacoma-7429"]{position:relative;overflow:hidden;aspect-ratio:2.150538}
#dialog-images .gallery-frame[data-photo="tacoma-7429"] img{position:absolute;max-width:none;width:100.000000%;height:161.290323%;left:0.000000%;top:-37.096774%;object-fit:fill}
#dialog-images .gallery-frame[data-photo="tacoma-8001"]{position:relative;overflow:hidden;aspect-ratio:2.181818}
#dialog-images .gallery-frame[data-photo="tacoma-8001"] img{position:absolute;max-width:none;width:138.888889%;height:227.272727%;left:-23.611111%;top:-104.545455%;object-fit:fill}
#dialog-images .gallery-frame[data-photo="tacoma-7422"]{position:relative;overflow:hidden;aspect-ratio:1.545894}
#dialog-images .gallery-frame[data-photo="tacoma-7422"] img{position:absolute;max-width:none;width:125.000000%;height:144.927536%;left:-11.250000%;top:-28.985507%;object-fit:fill}
#dialog-images .gallery-frame[data-photo="tacoma-0837"]{position:relative;overflow:hidden;aspect-ratio:2.067183}
#dialog-images .gallery-frame[data-photo="tacoma-0837"] img{position:absolute;max-width:none;width:100.000000%;height:155.038760%;left:0.000000%;top:-35.658915%;object-fit:fill}
#dialog-images [data-photo="tacoma-6773"] img{filter:brightness(1.035)}
#dialog-images [data-photo="tacoma-7429"] img{filter:brightness(1.08)}
#dialog-images [data-photo="tacoma-8001"] img{filter:brightness(1.13)}
#dialog-images [data-photo="tacoma-7422"] img{filter:brightness(1.045)}
#dialog-images [data-photo="tacoma-0837"] img{filter:brightness(1.025)}
#dialog-images [data-photo="tacoma-6304"]{max-width:600px;margin-inline:auto}
.project[data-project="3"] .photo{height:auto;aspect-ratio:16/10}
.project[data-project="3"] .photo img{display:block;aspect-ratio:16/10;object-position:50% 56%;filter:brightness(1.035)}

/* Keep the introduction readable on phones and desktop. */
.hero-copy>p:not(.eyebrow){max-width:38ch}

/* Puyallup: retain vertical framing details and crop only screenshot side bars. */
#dialog-images [data-photo="puyallup-floor"],#dialog-images [data-photo="puyallup-trusses"]{position:relative;overflow:hidden;aspect-ratio:9/16;max-width:540px;margin-inline:auto}
#dialog-images [data-photo="puyallup-floor"] img,#dialog-images [data-photo="puyallup-trusses"] img{height:100%;width:100%;object-fit:cover}
#dialog-images [data-photo="puyallup-interior"]{max-width:600px;margin-inline:auto}
.project[data-project="1"] .photo{height:auto;aspect-ratio:4/3}
.project[data-project="1"] .photo img{display:block;aspect-ratio:4/3;object-fit:cover}
/* Port Orchard: show the full construction story with original photographs. */
.project[data-project="2"] .photo{height:auto;aspect-ratio:4/3}
.project[data-project="2"] .photo img{display:block;aspect-ratio:4/3;object-fit:cover;object-position:center 43%}
#dialog-images [data-photo="port-orchard-siding-overview"]{aspect-ratio:4/3;overflow:hidden}
#dialog-images [data-photo="port-orchard-siding-overview"] img{height:100%;object-fit:cover;object-position:center 43%}
#dialog-images [data-photo="port-orchard-floor"]{aspect-ratio:9/16;max-width:540px;margin:auto;overflow:hidden}
#dialog-images [data-photo="port-orchard-floor"] img{height:100%;object-fit:cover}
#dialog-images [data-photo="port-orchard-walls"]{aspect-ratio:3/4;max-width:600px;margin:auto;overflow:hidden}
#dialog-images [data-photo="port-orchard-walls"] img{height:100%;object-fit:cover}
#dialog-images [data-photo="port-orchard-roof"]{max-width:600px;margin:auto}
/* Original company mark and direct project inquiries. */
.brand-logo{display:block;width:72px;height:72px;object-fit:contain;flex-shrink:0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.button-outline{background:transparent;color:white;border-color:#ffffff8c}
.button-outline:hover{background:#ffffff18}
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;background:var(--paper)}
.contact-intro>p:not(.eyebrow){max-width:48ch;color:#596254}
.contact-details{align-self:center;min-width:0;display:grid;gap:25px}
.contact-label{display:block;font-size:12px;font-weight:700;letter-spacing:2px;color:#626a62;margin-bottom:8px}
.contact-phone{font-size:clamp(26px,3vw,40px);line-height:1.2;letter-spacing:-1px}
.contact-email{font-size:clamp(16px,1.65vw,22px);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
.contact-details .button{justify-self:start;text-align:center;justify-content:center}
.contact-hint{margin:-13px 0 0;font-size:14px;color:#626a62}
@media(max-width:800px){.brand-logo{width:52px;height:52px}.contact{grid-template-columns:1fr;gap:30px}header .brand>span{font-size:10px;letter-spacing:.4px}header .brand small{font-size:8px;letter-spacing:1px}header nav{gap:14px}header{gap:10px}.hero-actions{gap:10px}.hero-actions .button{padding:13px 17px}}
@media(max-width:420px){header nav a:last-child{display:inline}header nav a[href="#expertise"]{display:none}.hero-actions .button{font-size:13px;padding:12px 13px}}
@media(max-width:800px){.hero{height:auto;min-height:0;padding-top:48px}.hero>img{position:absolute;inset:0}.hero-copy{position:relative;inset:auto;margin:0 6%;max-width:none}.hero-caption{position:relative;inset:auto;margin:40px 6% 24px}.hero-bottom{position:relative;inset:auto;margin:0 6%}.hero-copy,.hero-caption,.hero-bottom{z-index:1}}

/* Tehaleh: multiple homes, one production-framing collection. */
.project[data-project="4"] .photo{height:auto;aspect-ratio:4/3}
.project[data-project="4"] .photo img{display:block;aspect-ratio:4/3;object-fit:cover}
#dialog-images [data-photo="tehaleh-0395"]{aspect-ratio:16/9;overflow:hidden}
#dialog-images [data-photo="tehaleh-0395"] img{height:100%;object-fit:cover;object-position:center}
#dialog-images [data-photo="tehaleh-5287"]{max-width:600px;margin:auto}

/* Vashon: wide overview and original-resolution construction details. */
.project[data-project="5"] .photo{height:auto;aspect-ratio:16/9}
.project[data-project="5"] .photo img{display:block;aspect-ratio:16/9;object-fit:cover;object-position:center 50%}
#dialog-images [data-photo="vashon-4277"]{aspect-ratio:16/9;overflow:hidden}
#dialog-images [data-photo="vashon-4277"] img{height:100%;object-fit:cover;object-position:center 50%}
#dialog-images [data-photo="vashon-4164"]{max-width:600px;margin:auto}
#dialog-images [data-photo="vashon-video-4153"]{max-width:450px;margin:auto}

/* Seattle: retain the full entry and roofline in the portrait cover. */
.project[data-project="6"] .photo{height:auto;aspect-ratio:1}
.project[data-project="6"] .photo img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center 52%}
#dialog-images [data-photo^="seattle-"]{max-width:900px;margin-inline:auto}
#dialog-images [data-photo="seattle-3688"],#dialog-images [data-photo="seattle-2948"],#dialog-images [data-photo="seattle-2956"],#dialog-images [data-photo="seattle-2994"],#dialog-images [data-photo="seattle-3642"]{max-width:600px}

/* JK Monarch: show several residences and preserve construction details. */
.project[data-project="7"] .photo{height:auto;aspect-ratio:16/9}
.project[data-project="7"] .photo img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 58%}
#dialog-images [data-photo="jk-monarch-3861"],#dialog-images [data-photo="jk-monarch-3918"]{aspect-ratio:16/9;overflow:hidden}
#dialog-images [data-photo="jk-monarch-3861"] img{height:100%;object-fit:cover;object-position:center 58%}
#dialog-images [data-photo="jk-monarch-3918"] img{height:100%;object-fit:cover;object-position:center 65%}
#dialog-images [data-photo="jk-monarch-3825"]{max-width:600px;margin-inline:auto}

.contact-details .contact-phone{display:block;width:fit-content}
.contact-details .contact-phone+.contact-phone{margin-top:8px}

.contact-instagram{font-size:clamp(16px,1.65vw,22px);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
.contact-instagram:hover{color:#815329}