*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,sans-serif;color:#183a38;background:#e0e9e9;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;background:#fff;border:1px solid #cbd6d5;border-radius:7px;padding:10px 15px}button:hover{background:#e4efeb}button:focus-visible{outline:3px solid #cb702c;outline-offset:3px}#viewport{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 32px;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;gap:12px;align-items:center}.mark{background:#163e38;color:#fff;padding:11px;font-size:16px;border-radius:5px}b{font-size:22px;letter-spacing:-.7px}small{display:block;font-size:12px;letter-spacing:2px}aside{position:fixed;top:120px;left:32px;width:278px;padding:23px;background:#ffffffed;border:1px solid #fff;border-radius:12px;box-shadow:0 16px 60px #17382b12}.eyebrow{font-size:12px;letter-spacing:1.3px;color:#5b7771}h1{font-size:32px;line-height:1.12;letter-spacing:-1.3px;margin:17px 0}p{font-size:14px;color:#5b6f6a;margin-bottom:24px}.modes{display:flex;gap:4px}.modes button{flex:1;font-size:14px;padding:10px 8px}.active{background:#163e38!important;color:white}.roof{display:flex;align-items:center;gap:8px;margin:17px 0;font-size:14px}.roof input{width:18px;height:18px;accent-color:#163e38}.plain{background:none;border:0;padding:0;font-size:14px;text-decoration:underline}.rooms{margin-top:25px;border-top:1px solid #d8e0dd;padding-top:15px}.rooms>span{font-size:12px;letter-spacing:1.3px;color:#697b76}.rooms button{display:flex;width:100%;justify-content:space-between;background:transparent;border:0;border-bottom:1px solid #e1e8e5;border-radius:0;text-align:left;font-size:14px;padding:10px 0}.rooms button:hover{color:#bd622e}.rooms i{font-style:normal;color:#8b9e98}.note{font-size:12px;color:#6a7d77;margin-top:18px}.view-label{position:fixed;bottom:32px;left:340px;background:#ffffffdd;padding:12px 18px;border-radius:8px}.view-label span{font-size:15px;font-weight:bold}.view-label small{font-size:12px;letter-spacing:0;color:#62746e;margin-top:3px}.actions{position:fixed;right:28px;bottom:32px;display:flex;gap:5px}#walkpad{position:fixed;right:32px;bottom:102px;text-align:center}#walkpad button{width:48px;height:48px;padding:8px;touch-action:none}#walkpad>div{margin-top:5px;display:flex;gap:5px}dialog{padding:12px;background:#fff;border:0;border-radius:12px;max-width:min(90vw,800px)}dialog::backdrop{background:#102823bb}dialog img{display:block;max-width:100%;max-height:75vh}#close{display:block;margin:0 0 10px auto}#loading{position:absolute;top:50%;left:50%;background:white;padding:20px;border-radius:10px}@media(max-height:800px) and (min-width:761px){aside{top:105px;padding:18px}h1{font-size:26px;margin:12px 0}p{margin:10px 0 16px}.rooms{margin-top:15px}.rooms button{padding:7px 0}.note{margin-top:12px}}@media(max-width:760px){header{padding:16px}.brand b{font-size:19px}header>button{font-size:12px;padding:9px}aside{left:12px;right:12px;top:auto;bottom:90px;width:auto;padding:12px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}aside h1,aside p,.eyebrow,.note{display:none}.modes{flex:1}.roof{margin:0}.plain{font-size:12px}.rooms{width:100%;margin:0;padding:0;border:0;display:flex;overflow:auto;gap:8px}.rooms>span,.rooms i{display:none}.rooms button{white-space:nowrap;border:1px solid #d8e0dd;border-radius:5px;width:auto;padding:7px;font-size:12px}.view-label{bottom:17px;left:12px;max-width:55%;padding:6px 9px}.view-label span{font-size:12px}.view-label small{font-size:11px}.actions{right:12px;bottom:22px}.actions button{font-size:12px;padding:9px}#walkpad{bottom:230px;right:14px}}
/* Give the architecture the full working area beside the compact controls. */
#viewport{left:300px;right:0;top:0;bottom:0}header{z-index:4}.brand{background:#ffffffed;border-radius:8px;padding:5px 10px 5px 5px}aside{width:252px;left:24px;top:118px;padding:20px}h1{font-size:27px}aside p{font-size:14px;line-height:1.6}.view-label{left:324px;pointer-events:none}#loading{left:50%;transform:translate(-50%,-50%);min-width:230px;text-align:center;box-shadow:0 12px 50px #183a3820;z-index:5;font-size:14px}#walkpad[hidden]{display:none}canvas{outline:none}
@media(max-height:800px) and (min-width:761px){aside{top:110px;padding:15px}.rooms button{padding:7px 0}.rooms{margin-top:13px}h1{font-size:24px}}
@media(max-width:760px){#viewport{left:0;top:76px;bottom:213px}aside{left:12px;right:12px;top:auto;bottom:87px;width:auto;padding:12px}.view-label{left:12px;bottom:17px}#walkpad{bottom:244px}.brand{padding:0;background:transparent}#loading{max-width:80%;min-width:180px}.rooms button{font-size:13px}.modes button,.roof{font-size:14px}#reference{background:#fffffff0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(min-width:761px){aside{max-height:calc(100dvh - 138px);overflow:auto;scrollbar-width:thin}}

/* Coordinated MEP mode */
.modes button{font-size:13px;padding-left:6px;padding-right:6px;white-space:nowrap}
.mep-active #mep.active{background:#090d0d!important;color:#fff;border-color:#2de2ff}
.mep-active aside,.mep-active .brand,.mep-active .view-label{background:#090d0deb;color:#fff;border-color:#253334}
.mep-active aside p,.mep-active .eyebrow,.mep-active .note,.mep-active .view-label small{color:#9caaaa}
.mep-active .rooms button,.mep-active .rooms{border-color:#263535;color:#dfe7e7}
.mep-active .plain{color:#fff}.mep-active .mark{background:#fff;color:#090d0d}
#mep-legend{display:grid;gap:7px;margin:15px 0 4px;padding:12px;border:1px solid #263737;border-radius:8px;background:#050707}
#mep-legend[hidden]{display:none}
#mep-legend span{display:flex;align-items:center;gap:9px;color:#eef7f7;font-size:13px}
#mep-legend small{margin-top:4px;padding-top:9px;border-top:1px solid #263737;color:#aebdbc;font-size:12px;line-height:1.35;letter-spacing:0}
#mep-legend i{width:18px;height:4px;border-radius:5px;box-shadow:0 0 9px currentColor}
.mechanical{background:#ff3f81;color:#ff3f81}.electrical{background:#ffc93d;color:#ffc93d}.plumbing{background:#2de2ff;color:#2de2ff}
@media(max-width:760px){#mep-legend{position:absolute;bottom:100%;left:0;right:0;grid-template-columns:repeat(3,1fr);margin-bottom:8px}.mep-active aside{bottom:87px}}

/* Mobile-first AR entry and touch-friendly controls */
#ar{width:100%;margin-top:10px;background:#cb702c;color:#fff;border-color:#cb702c;font-weight:700;box-shadow:0 8px 20px #8c481c30}
#ar:hover{background:#b86124}
#ar span{display:inline-grid;place-items:center;margin-right:7px;width:28px;height:22px;border:1px solid #ffffff90;border-radius:5px;font-size:11px;letter-spacing:1px}
#ar-help{max-width:min(90vw,430px);padding:22px;color:#183a38}
#ar-help h2{font-size:23px;line-height:1.15;margin:8px 0 10px}
#ar-help p{font-size:15px;margin:0;color:#566b66}
#ar-help-close{display:block;margin-left:auto}
#ios-ar{max-width:min(90vw,430px);padding:22px;color:#183a38}
#ios-ar h2{font-size:23px;line-height:1.15;margin:8px 0 10px}
#ios-ar p{font-size:15px;margin:0 0 14px;color:#566b66}
#ios-ar-close{display:block;margin-left:auto}
.ios-roof{margin:4px 0 18px;color:#183a38}
.ios-roof{display:flex!important}
#ios-ar-link{display:inline-flex;align-items:center;padding:12px 15px;border-radius:7px;background:#163e38;color:#fff;text-decoration:none;font-weight:700}
#ios-ar-link img{width:1px;height:1px;opacity:0}
#ar-status{position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;background:#07110feb;color:#fff;border:1px solid #ffffff35;border-radius:12px;backdrop-filter:blur(12px)}
#ar-status[hidden]{display:none}
#ar-status div{min-width:0}
#ar-status b{display:block;font-size:16px;letter-spacing:0}
#ar-status span{display:block;font-size:13px;line-height:1.35;color:#c7d5d0}
#ar-exit{flex:none;background:#fff;color:#173d37;border:0;font-weight:700}
.ar-active header,.ar-active aside,.ar-active .view-label,.ar-active .actions,.ar-active #walkpad{display:none!important}
.ar-active #viewport{inset:0}

@media(max-width:760px){
 body{overscroll-behavior:none}
 header{height:64px;padding:10px 12px max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-left));background:#f8fbfaf2;backdrop-filter:blur(9px);border-bottom:1px solid #cfdbd7}
 .mark{padding:8px;font-size:13px}.brand b{font-size:18px}.brand small{font-size:9px;letter-spacing:1.4px}
 #reference{display:none}
 #viewport{top:64px;bottom:202px}
 aside{left:8px;right:8px;bottom:58px;padding:9px;gap:8px;border-radius:11px;box-shadow:0 10px 34px #17382b24}
 .modes{width:100%;flex:none}.modes button{min-height:42px;font-size:13px;padding:8px 5px}
 #ar{order:2;width:100%;min-height:44px;margin:0;font-size:14px}
 .roof{order:3;font-size:13px}.plain{order:3;margin-left:auto;font-size:13px;padding:8px}
 .rooms{order:4;gap:6px;padding-bottom:1px;scrollbar-width:none}.rooms::-webkit-scrollbar{display:none}
 .rooms button{min-height:38px;padding:8px 10px;font-size:13px;background:#fff}
 .view-label{bottom:max(10px,env(safe-area-inset-bottom));left:8px;max-width:56%;padding:6px 8px}
 .view-label small{display:none}
 .actions{right:8px;bottom:max(9px,env(safe-area-inset-bottom));gap:4px}.actions button{min-width:38px;min-height:38px;padding:7px}
 #walkpad{right:10px;bottom:268px}#walkpad button{width:46px;height:46px;background:#fffffff2}
 #mep-legend{bottom:calc(100% + 2px);grid-template-columns:repeat(3,1fr);padding:9px}
 #mep-legend span{font-size:11px;gap:5px}
 #mep-legend small{grid-column:1/-1}
}

@media(max-width:390px){
 #viewport{bottom:196px}.modes button{font-size:12px}.roof{display:none}.plain{margin-left:0}
 aside{bottom:56px}.rooms button{font-size:12px;min-height:34px;padding:6px 8px}
 #walkpad{bottom:258px}
}

/* Design selector is shared by both tours; each page keeps its own model. */
.house-switch{display:flex;gap:5px;padding:4px;margin-bottom:17px;background:#e8eeeb;border-radius:8px}
.house-switch a{flex:1;display:grid;place-items:center;min-height:39px;padding:6px 7px;border-radius:5px;color:#35534e;text-align:center;text-decoration:none;font-size:13px;font-weight:700;line-height:1.2}
.house-switch a:hover{background:#f5f9f7}
.house-switch a.selected{background:#163e38;color:#fff;box-shadow:0 2px 7px #0b292222}
.house-switch a:focus-visible{outline:3px solid #cb702c;outline-offset:2px}
@media(max-width:760px){
 #viewport{bottom:254px}
 .house-switch{order:-1;width:100%;margin:0}
 .house-switch a{min-height:42px;font-size:13px}
 #walkpad{bottom:310px}
}
@media(max-width:390px){#viewport{bottom:248px}.house-switch a{font-size:12px}#walkpad{bottom:306px}}
@media(max-width:760px){.house-two #reference{display:block;min-height:38px;padding:6px 9px;font-size:12px}}
#ar-quicklook{display:flex;align-items:center;justify-content:center;width:100%;min-height:45px;margin-top:10px;padding:7px 11px;border-radius:7px;background:#cb702c;color:#fff;text-align:center;text-decoration:none;font-size:14px;font-weight:700;box-shadow:0 8px 20px #8c481c30}
#ar-quicklook img{width:29px;height:29px;margin-right:10px;object-fit:cover;border:1px solid #ffffff8c;border-radius:5px}
#ar-quicklook:hover{background:#b86124}
#ar-quicklook:focus-visible{outline:3px solid #163e38;outline-offset:3px}
#ar-quicklook[hidden],#ar[hidden]{display:none!important}
@media(max-width:760px){#ar-quicklook{order:2;width:100%;min-height:44px;margin:0}}
@media(min-width:761px){#ar{display:none!important}}

/* Final phone pass: keep the model large, controls thumb-friendly, and safe-area aware. */
@media(max-width:760px){
 body{width:100%;min-height:100dvh;background:#dfe8e2}
 header{top:0;height:calc(64px + env(safe-area-inset-top));padding-top:max(10px,env(safe-area-inset-top));}
 #viewport{top:calc(64px + env(safe-area-inset-top));bottom:calc(246px + env(safe-area-inset-bottom));}
 aside{bottom:calc(58px + env(safe-area-inset-bottom));max-height:44dvh;overflow-y:auto;overscroll-behavior:contain;align-content:center;}
 .modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .modes button{min-width:0;min-height:44px;padding:8px 4px}
 #ar,#ar-quicklook{min-height:46px}
 .roof,.plain{min-height:40px;display:flex;align-items:center}
 .plain{justify-content:center}
 .rooms{min-height:40px;align-items:center}
 .rooms button{min-height:40px;padding:8px 11px}
 .actions{bottom:calc(12px + env(safe-area-inset-bottom));}
 .actions button{min-width:42px;min-height:42px}
 .view-label{bottom:calc(12px + env(safe-area-inset-bottom));}
 #walkpad{bottom:calc(260px + env(safe-area-inset-bottom));}
}
@media(max-width:390px){
 #viewport{bottom:calc(238px + env(safe-area-inset-bottom))}
 aside{max-height:46dvh;padding:9px}
 .modes button{font-size:12px}
 .rooms button{min-height:38px;padding-inline:9px}
 #walkpad{bottom:calc(252px + env(safe-area-inset-bottom))}
}
@media(max-width:760px) and (orientation:landscape){
 #viewport{top:calc(54px + env(safe-area-inset-top));bottom:12px}
 aside{left:8px;right:auto;bottom:8px;width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 70px)}
 .view-label{left:calc(380px + 8px);bottom:10px}
 .actions{right:8px;bottom:10px}
 #walkpad{right:8px;bottom:120px}
}

/* Compact mobile controls so the house remains the focus. */
@media(max-width:760px){
 #viewport{bottom:calc(178px + env(safe-area-inset-bottom))}
 aside{bottom:calc(42px + env(safe-area-inset-bottom));max-height:30dvh;padding:6px 8px;gap:5px;border-radius:9px}
 .house-switch{padding:2px;margin:0}
 .house-switch a{min-height:30px;font-size:11px;padding:4px 6px}
 .modes{gap:3px}
 .modes button{min-height:34px;font-size:12px;padding:5px 3px}
 #ar,#ar-quicklook{min-height:38px;font-size:12px}
 #ar span{width:23px;height:18px;font-size:9px}
 .roof,.plain{min-height:28px;font-size:11px;padding:3px 5px}
 .roof input{width:15px;height:15px}
 .rooms{min-height:32px;gap:4px}
 .rooms button{min-height:31px;padding:5px 8px;font-size:11px}
 .view-label{bottom:calc(8px + env(safe-area-inset-bottom));padding:5px 7px}
 .view-label span{font-size:11px}
 .actions{bottom:calc(8px + env(safe-area-inset-bottom));right:8px}
 .actions button{min-width:34px;min-height:34px;padding:5px;font-size:11px}
 #walkpad{bottom:calc(194px + env(safe-area-inset-bottom));right:8px}
 #walkpad button{width:38px;height:38px;padding:4px}
 #walkpad>div{margin-top:3px;gap:3px}
}
@media(max-width:390px){
 #viewport{bottom:calc(166px + env(safe-area-inset-bottom))}
 aside{bottom:calc(38px + env(safe-area-inset-bottom));max-height:31dvh;padding:5px 7px}
 .roof{display:none}
 .plain{margin-left:auto}
 #walkpad{bottom:calc(180px + env(safe-area-inset-bottom))}
}
@media(max-width:760px) and (orientation:landscape){
 #viewport{bottom:8px}
 aside{bottom:8px;max-height:calc(100dvh - 70px);padding:6px}
}