header{background:#14171a;border-bottom:1px solid #796443}
header .head{max-width:1450px;padding:6px clamp(14px,2.1vw,36px);min-height:59px;gap:clamp(10px,1.6vw,25px);justify-content:flex-start}
header .brand img{width:118px;height:42px;max-width:none;object-fit:contain;mix-blend-mode:screen}
header .navPanel{margin:0}
header .head #topnav{gap:clamp(9px,1vw,16px);margin:0}
header .head #topnav a,header .head #menuToggle{display:inline-flex;align-items:center;width:auto;height:auto;min-height:36px;padding:4px 0;background:none;border:0;border-radius:0;box-shadow:none;color:#e6c888;font:500 .86rem/1.25 var(--sans);white-space:nowrap}
header .head #topnav a:is(:hover,[aria-current]){text-decoration:underline;text-underline-offset:5px}
header .head #menuToggle{display:none}
header #quickContacts{margin-left:auto}
.channels{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;color:#ead098;font-family:var(--sans)}
.channels a{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:.83rem;min-height:35px}
.channels a:hover,.closing a.mail:hover,.closing address a:hover{text-decoration:underline;text-underline-offset:3px}
.channels svg{width:15px;height:15px}.channels .digits{font-size:1rem;letter-spacing:.025em;font-variant-numeric:tabular-nums}
header .head #langs{display:block;position:static;margin:0;padding:0;border:0;background:none}
#langs select{border:none;background:#14171a;color:#e6c888;padding:6px 0;max-width:89px;cursor:pointer;font:500 .82rem var(--sans)}
#returnStep:not([hidden]){display:inline-flex;align-items:center;position:fixed;z-index:19;left:max(10px,1.3vw);bottom:max(12px,env(safe-area-inset-bottom));color:#f5db9c;background:#171b1d;border:1px solid #b3965b;border-radius:4px;min-height:40px;padding:6px 14px;font:600 .91rem var(--sans);box-shadow:0 2px 8px #0003}
#app .illustrated{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;align-content:center;gap:clamp(18px,4vw,68px)}
#app .illustrated figure{margin:0}#app .illustrated figure img{width:100%;height:clamp(240px,54vh,550px);object-fit:cover}
#app .illustrated article{display:block;margin:12px 0;padding:0;border:0}
#app .illustrated h3{font:500 clamp(17px,1.5vw,23px)/1.2 var(--serif);margin:0 0 3px}
#app .illustrated p{line-height:1.45;margin:5px 0}
#app .illustrated .phaseGrid{display:block}
#app .familyStory p+p{margin-top:.9em}
#app #visit.closing{height:auto;min-height:min(70vh,620px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(18px,3vw,44px);align-content:center;background:#f6f2e9;padding:clamp(35px,6vw,90px) var(--section-gutter);color:#272820}
.contactCard,.worldCard{border:1px solid #c7b285;padding:clamp(18px,2.4vw,36px);background:#fffdf6}
.closing h2{font:400 clamp(24px,2.1vw,35px)/1.13 var(--serif);margin:0 0 12px}
.closing h3{font:600 1.06rem var(--sans);margin:8px 0}
.managerLead{display:grid;grid-template-columns:clamp(85px,10vw,135px) 1fr;gap:16px;align-items:center}
.managerLead img{width:100%;aspect-ratio:4/5;object-fit:cover}
.closing p,.closing address,.closing .mail{font:400 .95rem/1.5 var(--sans)}
.closing .channels{margin:18px 0 5px;border-block:1px solid #d6c8a9;color:#654c1f}
.closing .channels a{min-height:42px}
.closing address{margin-top:12px}.closing address strong{font-weight:500;margin-right:8px}
.worldCard{background:#181b20;color:#f0d49b}
.brandGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.brandGrid a{background:linear-gradient(120deg,#eed38d,#b9924e);border:1px solid #d9b674;padding:5px;border-radius:4px;display:grid;place-items:center;min-height:52px}
.brandGrid img{width:100%;height:43px;object-fit:contain;background:#080808;padding:3px}
.brandGrid a:hover{filter:brightness(1.13)}.foot{justify-content:center}
@media(max-width:1130px) and (min-width:761px){header .head{flex-wrap:wrap;gap:0 15px}header .head .navPanel{order:4;flex:0 0 100%}header .head .navPanel #topnav{display:flex!important;justify-content:center;flex:auto}}
@media(max-width:760px){header .head{flex-wrap:wrap;gap:0 12px}header .head #menuToggle{display:inline-flex;order:1;margin-left:auto}header .head #langs{order:2}
header #quickContacts{order:3;flex:1 0 100%;margin:0;border-top:1px solid #ffffff18}header .channels{justify-content:center;gap:0 11px}.channels a{font-size:.79rem}header .channels .digits{font-size:.88rem}header .brand img{width:99px;height:34px}
header .head .navPanel{order:4;background:#171b1d;z-index:22;top:100%;width:max-content}
header .head #menuToggle[aria-expanded=true]+.navPanel #topnav{display:grid!important;position:static;min-width:160px;background:transparent;padding:0;border:0}
header .head #topnav a{min-height:42px;justify-content:start}
#app .illustrated{height:auto;min-height:var(--section-room);grid-template-columns:1fr;grid-template-rows:auto auto;gap:18px}
#app .illustrated figure img{height:clamp(160px,27vh,250px)}#app #visit.closing{grid-template-columns:1fr;padding-bottom:58px}
#app .familyStory{height:auto;min-height:var(--section-room);grid-template-rows:auto auto}
#app .familyStory figure img{max-height:38vh}
}
@media(max-width:400px){header .channels{gap:0 7px}header .channels svg{width:13px}header .channels a{font-size:.72rem}header .channels .digits{font-size:.79rem}}

/* Compact site navigation. The menu opens over the page without resizing the header. */
header{background:#20232b;color:#e7c579;position:sticky;top:0}
header .head{position:relative;flex-wrap:nowrap;gap:clamp(8px,1.4vw,22px);min-height:48px;padding:4px clamp(10px,2.5vw,40px)}
header .brand img{width:clamp(86px,11vw,146px);height:36px}
header .head #menuToggle{order:0;display:inline-flex;margin:0;color:inherit;align-items:center}
header #menuToggle::after{content:'⌄';margin-inline-start:.35em}
header .head .navPanel{display:none;position:absolute;top:100%;left:clamp(12px,11vw,175px);right:auto;order:0;width:max-content;min-width:168px;max-height:70vh;overflow:auto;padding:6px 15px;background:#252830;border:1px solid #a68a53;box-shadow:0 5px 12px #27231d22}
header .head #menuToggle[aria-expanded=true]+.navPanel{display:block}
header .head .navPanel #topnav.expanded{display:grid!important;position:static;gap:0;min-width:0;padding:0;background:none;border:0;box-shadow:none}
header .head .navPanel #topnav a{justify-content:start;color:#e7c579;min-height:36px;background:transparent}
header #quickContacts{order:0;flex:0 1 auto;margin-left:auto;border:0}
header .channels{flex-wrap:nowrap;gap:clamp(4px,1vw,16px);color:inherit}
header .head #langs{order:0}header #langs select{color:inherit;background:#20232b;width:43px}
header .head #returnStep:not([hidden]){position:static;order:-1;min-height:32px;padding:3px 6px;background:none;color:inherit;box-shadow:none;border:1px solid #897449;font-size:.78rem}
@media(max-width:760px){header .head{gap:6px;padding-inline:8px}header .channels a:not(.digits) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}header .channels a:not(.digits){min-width:22px;justify-content:center}header .channels .digits{font-size:.81rem}header .brand img{width:78px;height:32px}}
@media(max-width:510px){header .head #returnStep:not([hidden]){position:fixed;left:8px;bottom:8px;top:auto;background:#fbf8ef;color:#574522}body:has(#returnStep:not([hidden])){padding-bottom:42px}}
@media(max-width:355px){header .brand img{width:61px}header .head{gap:3px}header #menuToggle::after{margin:0}}
/* Let text and images determine each section's height. */
#app>section:not(.residenceView),#app>section.illustrated,#app #visit.closing{height:auto;min-height:0;max-height:none;overflow:visible;scroll-margin-top:calc(var(--headheight,50px) + 8px)}
#app>section:not(.residenceView){padding-block:clamp(24px,3.5vw,56px)}
#app .illustrated figure img{height:auto;max-height:470px;object-fit:contain}
#app .illustrated figure{height:auto}
#app #engineering{background:#f4f6f3 url('media/systems.svg') right center / min(53%,620px) auto no-repeat}
#app #engineering>div{background:#f5f7f1c9;padding:clamp(12px,2vw,28px)}
#app #visit.closing{background:#f7f4eb;align-items:start;padding-block:32px}
.closing .managerLead{display:block}.closing :is(.contactCard,.worldCard){background:transparent;color:#34352c;border:0;border-top:1px solid #c9bc9e;padding:18px 0}
.closing h2{font-size:clamp(22px,2vw,29px)}.brandGrid{display:flex;flex-wrap:wrap;gap:8px}
.brandGrid a{min-height:36px;width:100px;padding:3px 6px;background:#f2ebda;border-color:#d3c6a7}
.brandGrid img{height:26px;background:transparent;padding:0;object-fit:contain;border-radius:2px}footer{background:#f7f4eb;color:#635c4a;border-top:1px solid #ddd4c0}.foot{min-height:36px;font-size:.8rem}
#app .residenceView{height:auto;min-height:0;overflow:visible;display:block;padding-block:14px}
#app .sceneBody{display:block}
#app .scenePhoto{display:grid;height:auto;min-height:0;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin-top:12px;background:transparent;border-radius:0;overflow:visible}
#app .scenePhoto::after{display:none}
#app .scenePhoto .sceneZoom{display:block;position:static;grid-column:1/-1;grid-row:2;width:fit-content;max-width:100%;height:auto;justify-self:center;background:transparent;border:0;padding:0}
#app .scenePhoto .sceneZoom img{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(270px,54vh,680px);object-fit:contain;border-radius:3px}
#app .sceneCaption,#app .sceneSwitch{position:static;max-width:100%;color:#35372e}
#app .sceneCaption{grid-column:1;grid-row:1}#app .sceneCaption span{color:#6c685b;text-shadow:none}
#app .sceneCaption h2{font-size:clamp(20px,2.1vw,30px);color:inherit;line-height:1.14}
#app .sceneSwitch{grid-column:2;grid-row:1}#app .walkFoot{flex-wrap:wrap;padding-block:10px}
@media(max-width:800px){#app :is(.project,.locality,.houseAbout,.familyStory,.illustrated){grid-template-rows:auto auto}#app :is(.project,.houseAbout,.familyStory)>figure{height:auto}#app .scenePhoto{grid-template-columns:1fr}#app .sceneSwitch{grid-column:1;grid-row:3}#app .sceneCaption{grid-column:1}#app .sceneSwitch .switcher{width:fit-content}}
header .head>a.brand{order:-2;text-decoration:none;border:0}
header .head .brand img{width:auto;height:38px}
@media(max-width:510px){header .head .brand img{height:28px}}
