/* Shared by every home-design page. Keep navigation outside the model workspace. */
.site-header{position:sticky;top:0;z-index:30;flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;line-height:1.3;padding:14px 28px;background:#f9faf5;border-bottom:1px solid #dce1d8;box-shadow:0 2px 12px #26342f08}
.site-header .site-brand{display:flex;align-items:center;gap:11px;color:#294e40;text-decoration:none;flex:none}
.site-brand-mark{width:36px;height:40px;display:grid;place-items:center;background:#294e40;color:#fff;font:26px Georgia,serif}
.site-brand-copy{display:grid;gap:4px}.site-brand-copy strong{font-size:13px;letter-spacing:3px;font-weight:650}.site-brand-copy small{font-size:10px;letter-spacing:.4px;color:#647468}
.site-header nav{display:flex;gap:5px;padding:4px;background:#edf0e8;border:1px solid #dce1d8;border-radius:12px}
.site-header nav a{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:10px 19px;border:0;border-radius:8px;color:#526459;text-decoration:none;white-space:nowrap;font-size:14px;font-weight:550;line-height:1.25;touch-action:manipulation}
.site-header nav a:hover{background:#dfe7da;box-shadow:none;color:#294e40}
.site-header nav a[aria-current="page"]{background:#294e40;color:#fff;box-shadow:0 2px 4px #26342f15}
.site-header a:focus-visible{outline:3px solid #9e7634;outline-offset:3px}
.site-header nav a[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.site-skip,.skip-link{position:fixed;left:16px;top:8px;z-index:40;padding:12px;background:#294e40;color:#fff;transform:translateY(-180%)}
.site-skip:focus,.skip-link:focus{transform:translateY(0)}
body.viewer-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.viewer-page #app{position:relative;flex:1;min-height:0;height:auto;width:100%}
.viewer-page .stage-top{flex-wrap:nowrap;gap:10px}
.viewer-page .stage-top .pill{flex:none;margin-left:0}
.viewer-page .stage-top .view-label{flex:1;min-width:0}
.viewer-page .stage-top .view-label strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-page #panel{padding-top:6px}
.viewer-page #backToOverhead{margin-left:auto}
.concept-picker{top:102px}.concept,#siding-options{scroll-margin-top:100px}
@media(max-width:800px){
  .site-header{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .site-header .site-brand{gap:8px}.site-brand-mark{width:27px;height:29px;font-size:21px}
  .site-brand-copy{display:flex;align-items:baseline;gap:12px}.site-brand-copy strong{font-size:11px;letter-spacing:2px}.site-brand-copy small{font-size:10px}
  .site-header nav{width:100%;gap:3px;padding:3px;border-radius:10px}
  .site-header nav a{flex:1;min-width:0;padding:9px 6px;font-size:12px;border-radius:7px}
  .viewer-page #panel{width:min(270px,calc(100% - 56px))}
  .viewer-page:not(.controls-hidden) .stage-top{left:min(280px,calc(100% - 46px));right:6px;width:auto}
  .viewer-page .stage-top{left:12px;right:12px;top:12px;gap:7px}
  body.viewer-page.finishes-open #stage{min-height:140px}
  body.viewer-page.finishes-open .finish-studio{flex:0 0 52%;height:52%;max-height:calc(100% - 140px);min-height:0}
  .concept,#siding-options{scroll-margin-top:120px}
  .concept-picker{top:126px}
}
@media(max-width:360px){.site-header{padding-inline:8px}.site-header nav a{font-size:11px;padding-inline:3px}.site-brand-copy small{font-size:9px}}
@media(min-width:801px) and (max-width:1100px){.viewer-page .stage-top .view-label{display:none}.viewer-page .stage-top #reset{margin-left:auto}}