header .head>a.brand{position:static;flex:none;width:auto;min-width:0;display:flex;margin:0;padding:0;align-items:center}
header .head .brand img{position:static;display:block;max-width:118px;height:36px}
header .head #menuToggle{flex:none;margin:0 6px}
header .head .channels{gap:7px}header .head .channels a{font-size:.77rem}header .head .channels .digits{font-size:.83rem}
@media(min-width:1200px){
 header .head #menuToggle{display:none}
 header .head .navPanel,header .head #menuToggle[aria-expanded=true]+.navPanel{position:static;display:block;width:auto;min-width:0;background:none;border:none;box-shadow:none;padding:0;overflow:visible}
 header .head .navPanel #topnav,header .head .navPanel #topnav.expanded{position:static;display:flex!important;gap:14px;padding:0;flex-wrap:nowrap;border:0;background:none;box-shadow:none}
}
@media(max-width:600px){header .head .brand img{width:auto;height:28px}header .head #menuToggle{margin:0}header .head{gap:5px}header .head .channels{gap:2px}}
#app .tourView{display:grid;grid-template-columns:minmax(240px,27%) minmax(0,1fr);align-items:start;gap:clamp(16px,2.4vw,36px);width:100%;max-width:1600px;padding:clamp(12px,2.4vw,36px);height:auto}
.tourRail{min-width:0}.tourRail h1{font:500 clamp(26px,3vw,43px)/1.12 var(--serif);margin:0 0 15px}
.tourNav{display:grid;gap:2px}.tourNav>div{border-bottom:1px solid var(--line)}
.tourNav>div>button{display:block;text-align:start;width:100%;min-height:44px;padding:9px 10px;font-size:1rem}
.tourNav button[aria-current]{background:#233e34;color:#fff9e8}
.tourChoices{padding:9px 10px}.tourChoices p{font-size:.91rem;line-height:1.4;color:#46554d;margin:0 0 9px}.tourChoices .viewerTools,.tourChoices .roomStrip,.tourChoices .gardenOption{display:grid;gap:8px;align-items:stretch;border:0;width:100%;padding:6px 0}
.tourChoices .styleControl{width:100%}.tourChoices .sceneSwitch{position:static}.tourChoices .switcher{display:flex;flex-wrap:wrap;gap:3px}.tourChoices :is(select,button){max-width:100%;min-height:36px}
.tourRail .propertyFacts{width:100%;text-align:start;margin-top:12px;padding:10px;white-space:normal}
#app .tourView .scenePhoto{margin:0;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0}
#app .tourView .sceneZoom{order:0;width:100%;max-width:none;margin:0}
#app .tourView .sceneZoom img{width:100%;height:auto;max-height:none;object-fit:contain}
#app .tourView .sceneCaption{order:1;position:static;max-width:none}
#app .tourView .reviewSurface{height:auto;max-height:none;min-width:0;overflow:visible}
#app .closing .brandGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:9px}
#app .brandGrid a{width:auto;height:auto;min-height:78px;display:grid;align-content:center;justify-items:center;gap:4px;background:#faf7ee;border:1px solid #bbab81;color:#534124;padding:8px;text-align:center}
#app .brandGrid a img{width:auto;max-width:100%;height:31px}
#app .brandGrid a span{font:600 1rem/1.25 var(--sans)}
#app .closing :is(h2,h3,p,address,.mail,.channels){font-family:var(--sans);overflow-wrap:anywhere}
@media(max-width:740px){
 #app .tourView{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 #app .tourView .tourRail{display:contents}
 #app .tourView h1{order:0;margin:0;font-size:1.75rem}#app .tourView :is(.scenePhoto,.reviewSurface){order:1}
 #app .tourView .tourNav{order:2}#app .tourView .propertyFacts{order:3}
}

/* Give the emblem, section links and contact controls independent columns. */
header .head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;justify-content:initial;gap:clamp(10px,1.8vw,26px)}
header .head>a.brand{grid-column:1;grid-row:1}
header .head #returnStep:not([hidden]){grid-column:2;grid-row:1}
header .head :is(#menuToggle,.navPanel){grid-column:3;grid-row:1;justify-self:start;order:0}
header .head #quickContacts{grid-column:4;grid-row:1;margin:0}
header .head #langs{grid-column:5;grid-row:1}
header .head #quickContacts .channels a:not(.digits) span{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
header .head .channels a:not(.digits){min-width:27px;justify-content:center}
header .head .channels .digits{font-size:.84rem}
header .head #topnav a{font-size:.94rem;border:0;box-shadow:none}
@media(min-width:1050px){
 header .head #menuToggle{display:none}
 header .head .navPanel,header .head #menuToggle[aria-expanded=true]+.navPanel{position:static;display:block;padding:0;background:none;border:0;box-shadow:none;overflow:visible;min-width:0}
 header .head .navPanel #topnav,header .head .navPanel #topnav.expanded{position:static;display:flex!important;gap:clamp(10px,1.3vw,20px);padding:0;flex-wrap:nowrap;background:none;border:0}
}
@media(max-width:1049px){
 header .head .navPanel{left:auto;top:100%;grid-row:auto}
 header .head #menuToggle{display:inline-flex}
}
@media(max-width:600px){
 header .head{grid-template-columns:auto minmax(0,1fr) auto auto;gap:5px}
 header .head :is(#menuToggle,.navPanel){grid-column:2}
 header .head #quickContacts{grid-column:3}
 header .head #langs{grid-column:4}
 header .head #returnStep:not([hidden]){position:fixed;top:auto;left:8px;bottom:8px;color:#584424;background:#fcf9f1}
 header .head .channels a:not(.digits){min-width:23px}
 header .head .channels a[aria-label="GSM"]{display:none}
}
@media(max-width:380px){header .head .digits{font-size:.74rem!important}header .head .brand img{max-width:62px}header .head #langs select{width:37px}}
#app .tourView{margin-inline:auto;grid-template-columns:minmax(245px,min(26vw,340px)) minmax(0,1fr)}
#app .tourView .tourRail{padding:clamp(12px,1.3vw,22px);background:#faf7ef;border:1px solid #d9c9aa}
#app .tourView .tourChoices :is(button,select,label,span){white-space:normal;line-height:1.35;overflow-wrap:break-word}
#app .tourView .tourChoices select{width:100%;font-size:1rem}
#app .tourView .sceneZoom{position:static;display:block;height:auto}
#app .tourView .sceneZoom img{height:auto;max-height:calc(100svh - var(--headheight,56px) - 110px);width:100%;object-position:center;background:#eeeae0}
#app .tourRail .propertyFacts :is(span,small){display:block;font-size:.9rem;line-height:1.45}
#app .tourView .sceneCaption :is(span,h2){position:static;margin:0;text-shadow:none}
#app .tourView .sceneCaption span{font:500 .9rem/1.4 var(--sans)}
#app .closing .brandGrid{grid-template-columns:repeat(auto-fit,minmax(min(154px,100%),1fr));gap:10px}
#app .brandGrid a{padding:10px;min-height:98px;gap:7px;background:#f6f0e1;color:#45351b}
#app .brandGrid a img{height:40px;width:100%;max-width:158px;object-fit:contain}
#app .brandGrid a[href*="liranona"] img{background:#24221d;border-radius:3px}
#app .brandGrid a span{font:600 1.08rem/1.25 var(--sans)}
#app section :is(h1,h2,h3,p){overflow-wrap:break-word}
#app section :is(article,figure,section,div){min-width:0}
@media(max-width:740px){
 #app .tourView{padding:14px;gap:12px}
 #app .tourView .tourRail{padding:0;border:0}
 #app .tourView .sceneZoom img{max-height:56svh}
 #app .tourView .tourNav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;border:1px solid #ccbc9b;background:#faf7ef}
 #app .tourNav>div:has(.tourChoices){grid-column:1/-1}
 #app .tourChoices .viewerTools{display:grid;grid-template-columns:1fr}
 #app .tourView .propertyFacts{margin:0}
}
@media(max-width:740px){#app .closing .brandGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
header .head .navPanel{margin-inline:0}
@media(max-width:345px){
 header .head .channels a[aria-label="GSM"]{display:inline-flex}
 header .head .channels .digits{display:none}
}

@media(min-width:741px){
  #app .residenceView.tourView{
    grid-template-rows:auto;
    align-content:start;
    padding:clamp(14px,2vw,32px);
  }
  #app .tourView>.scenePhoto{align-items:stretch}
  #app .tourView .scenePhoto .sceneZoom img{
    display:block;
    width:100%;
    max-height:none;
    height:auto;
  }
}
@media(min-width:901px) and (max-width:1049px){
  header .head{gap:8px;padding-inline:12px}
  header .head #menuToggle{display:none}
  header .head .navPanel{position:static;display:block;width:auto;min-width:0;background:none;border:0;box-shadow:none;padding:0;overflow:visible;grid-row:1}
  header .head .navPanel #topnav{position:static;display:flex!important;flex-wrap:wrap;justify-content:flex-start;gap:2px 10px;padding:0;background:none;border:0;box-shadow:none}
}

/* The brand line and the section links have independent rows. */
header .head{
  grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-rows:auto auto;
  column-gap:clamp(10px,2vw,32px);
  row-gap:0;
  padding-block:6px 0;
}
header .head #brandMotto{grid-area:1/2;justify-self:start;color:#e6c888;font:italic clamp(13px,1.3vw,19px)/1.25 var(--serif)}
header .head #quickContacts{grid-area:1/3}
header .head #langs{grid-area:1/4}
header .head #menuToggle{display:none}
header .head .navPanel{
  position:static;grid-area:2/1/3/-1;justify-self:stretch;display:block;
  width:100%;min-width:0;inset:auto;padding:0;margin:4px 0 0;
  border:0;border-top:1px solid #ad905047;background:none;box-shadow:none;overflow:visible;
}
header .head .navPanel #topnav,body.inside header .head .navPanel #topnav{
  position:static;display:flex!important;width:100%;min-width:0;max-width:none;
  flex-wrap:wrap;justify-content:center;gap:0 clamp(12px,2.2vw,32px);
  padding:0;margin:0;background:transparent;border:0;box-shadow:none;overflow:visible;
}
header .head .navPanel #topnav a{min-height:32px;white-space:normal;text-align:center}
.pageReturn{position:sticky;top:var(--headheight,82px);z-index:15;background:#faf7ef;padding:5px clamp(12px,2vw,32px);border-bottom:1px solid #d9cfb7}
.pageReturn:has([hidden]){display:none}
.pageReturn #returnStep:not([hidden]){position:static;background:#263c32;color:#fff8e8;border-color:#526553;box-shadow:none;min-height:36px;padding:4px 17px}
#app .tourView{max-width:none}
#app .railCaption h2{font:400 clamp(19px,1.7vw,26px)/1.2 var(--serif);margin:0 0 .65em}
#app .railCaption small{display:block;margin-bottom:10px}
#app .tourRail h1{margin-bottom:.22em}
@media(min-width:741px){
  #app .tourView{grid-template-columns:clamp(245px,22vw,315px) minmax(0,1fr);gap:clamp(10px,1.2vw,20px);padding:clamp(10px,1vw,18px)}
  #app .tourView .scenePhoto .sceneZoom img{height:calc(100svh - var(--headheight,80px) - 72px);width:100%;object-fit:contain;background:#f4f0e6}
}
#app #engineering .buildingStudy{position:relative;isolation:isolate;overflow:hidden;background:#f6f1e5}
#app #engineering .buildingStudy>img:first-child{display:block;width:100%;height:auto;mask-image:linear-gradient(90deg,#000 70%,transparent 100%)}
#app #engineering .buildingStudy>.planOverlay{position:absolute;right:-1%;bottom:5%;width:31%;height:auto;opacity:.42;mix-blend-mode:multiply;pointer-events:none}
#app #visit.closing{align-items:stretch;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
#app #visit .worldCard{background:#20252a;color:#f3d69b;border:1px solid #bda575;padding:clamp(14px,2vw,30px)}
#app .worldCard .brandGrid{grid-template-columns:repeat(auto-fit,minmax(min(154px,100%),1fr))}
#app .worldCard .brandGrid a{min-width:0;height:auto;min-height:96px;padding:9px;border-color:#b29966;background:#faf7ef;white-space:normal;overflow:visible}
#app .worldCard .brandGrid img{height:48px;object-fit:contain}
#app .worldCard .brandGrid a[href*="liranona"] img{height:56px;background:transparent}
#app .worldCard .brandGrid span{max-width:100%;text-align:center;overflow-wrap:anywhere}
@media(max-width:740px){
  #app #visit.closing{grid-template-columns:1fr}
  header .head{column-gap:6px}
  header .head .navPanel #topnav{gap:0 12px}
  header .head .navPanel #topnav a{font-size:.83rem;min-height:28px}
  .tourView .railCaption{order:0}
  body:has(#returnStep:not([hidden])){padding-bottom:0}
}
@media(max-width:620px){
  header .head #brandMotto{font-size:12px}
  header .head .channels a.digits{display:none}
  header .head .channels a[aria-label="GSM"]{display:inline-flex}
}

header .head #menuToggle+.navPanel{grid-area:2/1/3/-1;justify-self:stretch;position:static;width:100%;height:auto}
#app #engineering{background:#f4f1e8}
#app #engineering>div{background:transparent}
:root{--page-room:calc(100svh - var(--headheight,82px) - 49px)}
#app>section[id]{scroll-margin-top:calc(var(--headheight,82px) + 48px)}
@media(min-width:801px){
  #app>section:not(.residenceView),#app>section.illustrated,#app #visit.closing{
    box-sizing:border-box;min-height:var(--page-room);align-content:center;
    padding-block:clamp(12px,2.3vh,24px);
  }
  #app :is(.project,.locality,.houseAbout,.familyStory,.illustrated)>figure img{
    max-height:calc(var(--page-room) - 54px);object-fit:contain
  }
  #app .plots .atlas svg{max-height:calc(var(--page-room) - 75px)}
  #app .galleryBlock video{max-height:calc(var(--page-room) - 145px)}
  #app #visit .worldCard,#app #visit .contactCard{align-self:center}
  #app .tourView .scenePhoto .sceneZoom img{height:auto;max-height:calc(var(--page-room) - 24px);object-position:left top;background:transparent}
}
.costPanel{margin-top:10px;border-top:1px solid #c6b38a}
.costPanel>button{width:100%;padding:9px 2px;text-align:start;background:transparent;color:#314239;display:grid;grid-template-columns:1fr auto;gap:4px}
.costPanel>button:after{content:'+';grid-area:1/2;font-size:1.15rem}
.costPanel>button[aria-expanded=true]:after{content:'−'}
.costPanel>button span{grid-column:1/-1;font-size:.86rem;line-height:1.35}
.costPanel fieldset{border:0;margin:5px 0;padding:0;display:grid;gap:4px}
.costPanel fieldset label{display:flex;align-items:center;gap:7px;line-height:1.25;cursor:pointer}
.costPanel fieldset input{width:16px;height:16px;accent-color:#314c3f}
.costPanel h3,.costPanel legend,.costPanel p{font:500 .88rem/1.35 var(--sans);margin:.4em 0}
.costPanel .bill{font-size:.86rem;margin:4px 0}
.costPanel select{width:100%}
.tourRail .lotFacts{display:block;background:transparent;border:0;font:500 .86rem/1.35 var(--sans);text-align:start;color:#51482e;padding:6px 0}
#app .tourView .tourRail{max-height:calc(var(--page-room) - 26px);overflow-y:auto;scrollbar-width:thin}
@media(max-height:800px) and (min-width:741px){
  #app .tourRail{padding:9px 12px}
  .tourNav>div>button{min-height:33px;padding:5px 8px}
  #app .railCaption h2{font-size:18px;margin-bottom:6px}
  .tourChoices{padding:4px 7px}
  .tourRail h1{font-size:29px}
}
@media(max-width:740px){.tourView .costPanel,.tourView .lotFacts{order:3}#app .tourView .tourRail{max-height:none;overflow:visible}}
#app .tourRail:has(.costBody) .tourNav{grid-template-columns:1fr 1fr;gap:3px}
#app .tourRail:has(.costBody) .tourNav>div>button{min-height:32px;padding:5px;font-size:.87rem}
.costBody .bill div{padding:3px 0}
.costBody .field{margin:3px 0}
@media(max-width:620px){
  header .head #quickContacts .channels .digits{display:inline-flex;font-size:.72rem}
  header .head #quickContacts .channels a[aria-label="GSM"]{display:none}
}
@media(max-width:800px){
  #app #visit.closing{padding-block:10px;gap:8px}
  #app .closing .worldCard .brandGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  #app .closing .worldCard .brandGrid a{padding:4px;min-height:54px;gap:2px}
  #app .closing .worldCard .brandGrid a img{height:28px}
  #app .closing .worldCard .brandGrid a span{font-size:.85rem}
  #app .closing .contactCard{padding:5px 0}
  #app .closing .channels{margin-block:5px}
  #app .closing address{margin-top:6px}
  #app .illustrated figure img{height:clamp(115px,19svh,170px);width:100%;object-fit:contain}
  #app .illustrated{padding-block:12px;gap:8px}
  #app .illustrated article{margin:3px 0}
  #app .illustrated summary{padding:5px 0}
  #app .illustrated blockquote{margin:7px 0;font-size:1.05rem}
  #app .tourView{height:var(--page-room);overflow:auto;display:flex;gap:5px}
  #app .tourView .sceneZoom img{height:auto;max-height:28svh}
  #app .tourView .tourNav>div>button{min-height:32px}
  #app .tourView .railCaption h2{font-size:17px;margin:0}
  #app .tourView .tourNav .tourChoices{padding:3px 7px}
  #app .tourView .tourNav .tourChoices p{margin:3px 0;font-size:.83rem}
  #app .tourView:has(.costBody) .scenePhoto{display:none}
  #app>section:not(.residenceView){min-height:var(--page-room)}
}
@media(min-width:801px){
  #app #plan.plots{grid-template-rows:auto}
  #app #plan>.choiceIntro{grid-row:1}
  #app #plan>.atlas{grid-area:1/2;align-self:center}
}
@media(max-width:800px){
  #app>section:not(.residenceView),#app>section.illustrated,#app #visit.closing{min-height:var(--page-room);align-content:center}
}

/* Keep the section links in the header's natural flow, clear of the house. */
header .head {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-rows:auto; align-items:center; gap:clamp(6px,1.1vw,16px);
  min-height:38px; padding-block:2px;
}
header .head .brand img {height:31px}
header .head #menuToggle+.navPanel {
  grid-area:1/2; align-self:center; margin:0; padding:0;
  border:0; min-width:0; max-height:none; overflow:visible;
}
header .head .navPanel #topnav,body.inside header .head .navPanel #topnav {
  flex-wrap:nowrap; justify-content:center; gap:clamp(6px,1.15vw,20px);
}
header .head .navPanel #topnav a {min-height:32px; padding:2px 0; white-space:nowrap}
.heroMotto {color:#756039;font:italic clamp(14px,1.3vw,19px)/1.35 var(--serif);margin:0 0 .7em}
#app #engineering .buildingStudy>img:first-child {mask-image:none}

#app #visit .worldCard {background:transparent;border:0;color:#393c32;padding:10px}
#app #visit .worldCard h2 {text-align:center;font:400 clamp(20px,2vw,29px)/1.2 var(--serif);margin:0 0 15px}
#app #visit .worldCard .brandGrid {
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
}
#app #visit .worldCard .brandGrid a {
  width:clamp(92px,8vw,116px);min-height:55px;height:auto;padding:5px;gap:3px;
  border:1px solid #d8cebb;background:transparent;box-shadow:none;
}
#app #visit .worldCard .brandGrid a img {height:26px;width:auto;max-width:100%;object-fit:contain}
#app #visit .worldCard .brandGrid a span {font:500 .8rem/1.2 var(--sans);color:#504936}
@media(max-width:1100px) {
  header .head #menuToggle {grid-area:1/2;display:inline-flex;justify-self:start}
  header .head #menuToggle+.navPanel {display:none;grid-area:2/1/3/-1}
  header .head #menuToggle[aria-expanded=true]+.navPanel {display:block}
  header .head #menuToggle[aria-expanded=true]+.navPanel #topnav.expanded {
    display:flex!important;flex-wrap:wrap;justify-content:center;gap:0 12px;
  }
  header .head {grid-template-rows:auto;row-gap:0}
}


#app #engineering .systemsPhoto {
  display:block; width:auto; max-width:100%; height:clamp(140px,24svh,240px);
  object-fit:contain; margin:12px auto 0;
}
#app #engineering p {margin:.5em 0;font-size:clamp(15px,1.15vw,18px);line-height:1.45}
#app #visit.closing {
  background:linear-gradient(180deg,rgba(250,247,238,.44),rgba(250,247,238,.26)),
    url('media/three-homes.webp') center 55% / cover no-repeat;
}
#app #visit :is(.contactCard,.worldCard) {
  padding:clamp(16px,2vw,30px); background:rgba(255,252,244,.94);
  border:1px solid #d8cbb1;
}