@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Manrope:wght@300;400;500&display=swap');
.io-header,.io-menu,.io-project{font-family:'DM Sans',sans-serif;box-sizing:border-box}.io-header *,.io-menu *,.io-project *{box-sizing:border-box}.io-header{position:absolute;inset:0 0 auto;z-index:900;display:flex;justify-content:space-between;align-items:center;padding:32px 4%;height:auto;background:none}.io-logo{display:block;width:64px}.io-logo img{display:block;width:100%;height:auto}.io-menu-toggle,.io-menu-close{font:400 13px 'DM Sans',sans-serif;letter-spacing:.08em;border:0;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;gap:20px;padding:12px}.io-menu-toggle span{font-size:20px}.io-menu-open{overflow:hidden!important}.io-menu[hidden]{display:none!important}.io-menu{position:fixed;inset:0;z-index:100000;background:#f3f0e9;color:#252821;display:grid;grid-template-columns:46% 54%;animation:io-enter .45s ease both}.io-menu-photo{position:relative;min-height:0;overflow:hidden}.io-menu-photo img{width:100%;height:100%;object-fit:cover}.io-menu-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.5))}.io-menu-photo>span{position:absolute;z-index:1;bottom:7%;left:10%;color:#fff;font:300 clamp(24px,3vw,44px)/1.3 'Manrope',sans-serif}.io-menu-panel{padding:10vh 10% 5vh;display:flex;flex-direction:column;position:relative;overflow:auto}.io-menu-close{position:absolute;right:6%;top:25px;color:#252821}.io-menu-close span{font-size:28px}.io-eyebrow{font:500 11px/1.5 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 24px}.io-menu nav{display:flex;flex-direction:column;gap:12px;margin:auto 0;padding:30px 0;float:none;width:auto}.io-menu nav a{display:block;color:#252821;font:300 clamp(36px,5vw,76px)/1.2 'Manrope',sans-serif;text-decoration:none;text-transform:none;letter-spacing:-.04em;width:max-content}.io-menu nav a:hover{color:#777a63}.io-menu nav a span{font-size:.5em}.io-menu-bottom{font-size:12px;line-height:1.8;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}.io-menu-bottom a{color:inherit;text-decoration:underline;text-underline-offset:5px}.io-project{margin:0;background:#f3f0e9;color:#252821;font-size:16px;line-height:1.7}.io-project img{max-width:100%;display:block}.io-project a{color:inherit;text-decoration:none}.io-project-hero{height:94svh;min-height:520px;position:relative;color:#fff}.io-project-hero>img{width:100%;height:100%;object-fit:cover}.io-project-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 75%)}.io-hero-copy{position:absolute;bottom:17%;left:7%;z-index:1}.io-project h1,.io-project h2{font-family:'Manrope',sans-serif;font-weight:300;letter-spacing:-.055em;line-height:1.12;margin:0}.io-project h1{font-size:clamp(58px,9vw,144px)}.io-hero-copy>p:last-child{font-size:20px;margin-top:25px}.io-scroll{position:absolute;bottom:5%;left:7%;z-index:1;font-size:12px;letter-spacing:.05em}.io-shell{width:86%;max-width:1440px;margin:auto}.io-story{padding:120px 0;display:grid;grid-template-columns:1fr 1fr;gap:12%}.io-project h2{font-size:clamp(38px,4.5vw,72px)}.io-story-copy>p{margin:0 0 24px;font-size:18px;line-height:1.85}.io-facts{margin-top:48px;font-size:12px}.io-facts>div{display:grid;grid-template-columns:100px 1fr;padding:12px 0;border-top:1px solid #cccabe}.io-facts dt{text-transform:uppercase;letter-spacing:.08em}.io-facts dd{margin:0}.io-project figure{margin:0}.io-wide{padding:0 4%}.io-wide>img{width:100%;max-height:950px;object-fit:cover;aspect-ratio:16/10}.io-project figcaption{font-size:12px;line-height:1.5;padding-top:16px;color:#64665e}.io-wide figcaption{display:flex;justify-content:space-between}.io-pair{padding:110px 0;display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:start}.io-pair figure:nth-child(2){padding-top:140px}.io-pair img{width:100%;aspect-ratio:4/5;object-fit:cover}.io-note{padding:20px 0 120px;max-width:700px;text-align:center}.io-note>p:last-child{max-width:520px;margin:32px auto 0;font-size:18px}.io-next{height:65svh;min-height:380px;position:relative;display:block;overflow:hidden;color:#fff!important}.io-next>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}.io-next:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4)}.io-next:hover>img{transform:scale(1.025)}.io-next-copy{position:absolute;z-index:1;left:7%;bottom:15%;display:flex;flex-direction:column}.io-next-title{font:300 clamp(36px,5vw,80px)/1.2 'Manrope',sans-serif;letter-spacing:-.04em;margin-bottom:20px}.io-footer{padding:45px 7%;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px}.io-footer span{color:#64665e}a:focus-visible,button:focus-visible{outline:2px solid #8b9072;outline-offset:6px}@keyframes io-enter{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media(max-width:700px){.io-header{padding:20px 5%}.io-menu{grid-template-columns:1fr}.io-menu-photo{display:none}.io-menu-panel{padding:100px 9% 35px}.io-menu nav{gap:24px}.io-menu nav a{font-size:50px}.io-story{padding:70px 0;grid-template-columns:1fr;gap:40px}.io-story-copy>p,.io-note>p:last-child{font-size:16px}.io-pair{padding:65px 0;gap:30px;grid-template-columns:1fr}.io-pair figure:nth-child(2){padding-top:0}.io-pair img{aspect-ratio:5/4}.io-note{width:86%;padding:0 0 70px}.io-wide{padding:0 4%}.io-wide>img{aspect-ratio:4/5}.io-footer{flex-direction:column;gap:12px}.io-hero-copy{bottom:20%}.io-project-hero{height:90svh}}
@media(prefers-reduced-motion:reduce){.io-menu{animation:none}.io-next>img{transition:none}}

.io-project-hero:after{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 25%,rgba(0,0,0,.48))}
.io-header-dark .io-menu-toggle{color:#252821}.io-header-dark .io-logo img{filter:brightness(0)}

/* Forest House: a room-by-room, full-screen spatial index. */
.io-room-page{background:#191f19;color:#fff}.room-explorer{position:relative;height:100svh;min-height:650px;overflow:hidden;isolation:isolate}.room-scenes,.room-scene{position:absolute;inset:0}.room-scene[hidden]{display:none}.room-scene>img{width:100%;height:100%;object-fit:cover;animation:room-open 1s cubic-bezier(.2,.7,.2,1) both}.room-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,18,12,.8),transparent 70%),linear-gradient(180deg,rgba(8,18,12,.45),transparent 35%)}.room-caption{position:absolute;z-index:1;left:7%;bottom:26%;max-width:75%;animation:room-words .8s ease both}.room-caption h1{font-size:clamp(48px,7.5vw,116px)}.room-caption>p:last-child{font-size:clamp(16px,1.5vw,22px);margin:24px 0 0}.room-topline{position:absolute;top:130px;left:7%;right:7%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.07em;z-index:2}.room-topline>span{opacity:.8}.room-nav{position:absolute;z-index:2;bottom:10%;left:7%;right:18%;display:flex;gap:clamp(12px,2.2vw,40px);border-top:1px solid #ffffff55;padding-top:22px;overflow-x:auto;scrollbar-width:thin}.room-tab{font:400 13px/1.5 'DM Sans',sans-serif;white-space:nowrap;color:#ffffffb3;background:none;border:0;padding:0 0 12px;cursor:pointer;text-align:left}.room-tab>span{display:block;font-size:10px;margin-bottom:9px;opacity:.6;letter-spacing:.1em}.room-tab.is-current{color:#fff;border-bottom:1px solid #fff}.room-tab:hover{color:#fff}.room-controls{position:absolute;right:5%;bottom:12%;z-index:2;display:flex;align-items:center;gap:15px}.room-count{font-size:11px;letter-spacing:.08em}.room-controls button{border:0;background:none;color:#fff;font:300 30px 'Manrope',sans-serif;cursor:pointer;padding:6px}.room-next-project{position:absolute;bottom:4%;right:7%;z-index:2;font-size:11px;letter-spacing:.06em}@keyframes room-open{from{clip-path:inset(0 0 0 10%);transform:scale(1.035);opacity:.6}to{clip-path:inset(0);transform:scale(1);opacity:1}}@keyframes room-words{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:800px){.room-explorer{min-height:600px}.room-caption{bottom:35%;max-width:86%}.room-topline{top:110px}.room-topline>span{display:none}.room-nav{right:7%;bottom:16%;gap:24px}.room-controls{bottom:5%;right:auto;left:7%}.room-next-project{bottom:7%}.room-caption h1{font-size:clamp(42px,9vw,68px)}.room-caption .io-eyebrow{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.room-scene>img,.room-caption{animation:none}}

/* The client brief shares the room explorer, with a readable text-focused view. */
.room-brief:after{background:linear-gradient(90deg,rgba(8,18,12,.9),rgba(8,18,12,.75) 65%,rgba(8,18,12,.4))}.room-brief .room-caption{bottom:25%;max-width:850px;right:7%}.room-brief .room-caption h1{font-size:clamp(38px,5.5vw,80px)}.room-brief-intro{max-width:680px;font-size:clamp(16px,1.5vw,21px)!important;line-height:1.65;margin:22px 0 30px}.room-needs{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:0}.room-needs>div{border-top:1px solid #ffffff55;padding-top:15px}.room-needs dt{font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}.room-needs dd{font-size:14px;line-height:1.65;margin:0;color:#ffffffd9}@media(max-width:800px){.room-brief .room-caption{bottom:31%;max-width:none}.room-brief-intro{margin:18px 0 20px;font-size:16px!important}.room-needs{gap:15px}.room-needs dd{font-size:12px}.room-needs dt{font-size:10px}}@media(max-width:450px){.room-brief .room-caption{bottom:29%}.room-brief .room-caption h1{font-size:34px}.room-brief .io-eyebrow{margin-bottom:12px}.room-brief-intro{font-size:14px!important;line-height:1.5}.room-needs{grid-template-columns:1fr;gap:8px}.room-needs>div{display:grid;grid-template-columns:80px 1fr;gap:10px;padding-top:8px}.room-needs dt{margin:0}.room-needs dd{line-height:1.4}.room-explorer:has(.room-brief.is-current){min-height:740px}}

/* A second voice on the brief: the life the home is designed around. */
@media(min-width:1100px){.room-brief .room-caption{max-width:none;width:48%;right:auto}.room-brief .room-caption h1{font-size:clamp(38px,5vw,72px)}.room-brief-intro{max-width:650px}.room-lifestyle{position:absolute;z-index:1;right:7%;width:27%;bottom:28%;animation:room-words .8s ease both}.room-lifestyle>p:last-child{font-size:clamp(16px,1.25vw,20px);line-height:1.8;margin:0}.room-lifestyle .io-eyebrow{margin-bottom:22px}.room-brief:after{background:rgba(8,18,12,.78)}}
@media(max-width:1099px){.room-brief.is-current{position:relative;min-height:100svh;padding:180px 7% 240px}.room-brief>img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}.room-brief .room-caption{position:relative;inset:auto;max-width:none;width:auto}.room-lifestyle{position:relative;z-index:1;margin-top:35px;max-width:680px}.room-lifestyle>p:last-child{font-size:16px;line-height:1.75;margin:0}.room-lifestyle .io-eyebrow{margin-bottom:15px}.room-explorer:has(.room-brief.is-current){height:auto;min-height:100svh;overflow:visible}.room-explorer:has(.room-brief.is-current) .room-scenes{position:relative}.room-explorer:has(.room-brief.is-current) .room-nav{bottom:110px}.room-explorer:has(.room-brief.is-current) .room-controls{bottom:25px}.room-explorer:has(.room-brief.is-current) .room-next-project{bottom:43px}}
@media(prefers-reduced-motion:reduce){.room-lifestyle{animation:none}}

.room-lifestyle>p:last-child{font-family:'Manrope',sans-serif;font-weight:300;font-size:15px;line-height:1.8;color:rgba(255,255,255,.82)}
@media(max-width:700px){.room-lifestyle>p:last-child{font-size:14px}}

.room-lifestyle .io-eyebrow{font-size:18px;line-height:1.4;letter-spacing:.1em}

.room-residence .room-caption>p:last-child{max-width:640px;font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(16px,1.4vw,21px);line-height:1.8}
@media(max-width:700px){.room-residence .room-caption>p:last-child{font-size:16px;line-height:1.7}.room-residence .room-caption{bottom:32%}}

@media(min-width:1100px){.room-described .room-caption{width:46%;max-width:none}.room-described .room-caption h1{font-size:clamp(44px,5.5vw,86px)}.room-described:after{background:linear-gradient(0deg,rgba(8,18,12,.85),rgba(8,18,12,.1) 90%),linear-gradient(90deg,transparent,rgba(8,18,12,.4))}.room-detail{bottom:27%}}
@media(max-width:1099px){.room-described.is-current{position:relative;min-height:100svh;padding:200px 7% 235px}.room-described>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.room-described .room-caption{position:relative;inset:auto;width:auto;max-width:none}.room-described .room-detail{margin-top:38px}.room-explorer:has(.room-described.is-current){height:auto;min-height:100svh;overflow:visible}.room-explorer:has(.room-described.is-current) .room-scenes{position:relative}.room-explorer:has(.room-described.is-current) .room-nav{bottom:110px}.room-explorer:has(.room-described.is-current) .room-controls{bottom:25px}.room-explorer:has(.room-described.is-current) .room-next-project{bottom:43px}.room-described:after{background:rgba(8,18,12,.65)}}

/* Residence introduction: retain the title position, set prose to the right. */
.room-residence-copy{position:absolute;z-index:1;right:7%;width:30%;bottom:32%;font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(16px,1.4vw,21px);line-height:1.8}.room-residence-copy p{margin:0}.room-residence-spacer{visibility:hidden;pointer-events:none}
@media(max-width:800px){.room-residence .room-caption{bottom:48%;max-width:86%}.room-residence-spacer{display:none}.room-residence-copy{left:7%;right:7%;width:auto;bottom:28%;font-size:16px;line-height:1.7}}

.room-residence:after{background:rgba(8,18,12,.78)}

/* Alder & Form: wordmark and persistent concept disclosure. */
.io-header .io-logo{width:190px}.io-header .io-logo img{width:100%;height:auto}.project-logo img[src$="alder-form-wordmark.svg"]{width:230px!important;max-width:70vw;height:auto!important}.concept-pill{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200000;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100vw - 28px);padding:12px 20px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(28,36,30,.72);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 24px rgba(0,0,0,.2);color:#fff!important;font:400 11px/1.5 'DM Sans',sans-serif;letter-spacing:.03em;text-decoration:none!important;text-align:center}.concept-pill strong{font-weight:500}.concept-pill-dot{flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:#d5dcc6}.concept-pill:hover{background:rgba(28,36,30,.9)}.concept-pill-note{opacity:.85}.room-explorer .room-next-project{bottom:85px}.room-explorer .room-controls{bottom:70px}.room-explorer:has(.room-described.is-current) .room-controls,.room-explorer:has(.room-brief.is-current) .room-controls{bottom:70px}.room-explorer:has(.room-described.is-current) .room-next-project,.room-explorer:has(.room-brief.is-current) .room-next-project{bottom:85px}.room-explorer:has(.room-described.is-current) .room-nav,.room-explorer:has(.room-brief.is-current) .room-nav{bottom:155px}.room-described.is-current,.room-brief.is-current{padding-bottom:280px}.io-menu-bottom{padding-bottom:65px}
@media(max-width:800px){.room-nav{bottom:17%}.io-header .io-logo{width:165px}.concept-pill{font-size:10px;padding:10px 14px;gap:8px}.room-explorer .room-controls{bottom:75px}.room-explorer .room-next-project{bottom:90px}}
@media(max-width:400px){.concept-pill-divider{display:none}.concept-pill-note{display:block;font-size:9px}.concept-pill{padding:8px 16px}.room-explorer .room-next-project{font-size:10px}}

/* Keep project navigation separate from the room counter and arrows. */
.room-explorer .room-next-project,.room-explorer:has(.room-described.is-current) .room-next-project,.room-explorer:has(.room-brief.is-current) .room-next-project{bottom:145px;right:5%}
@media(max-width:800px){.room-explorer .room-next-project,.room-explorer:has(.room-described.is-current) .room-next-project,.room-explorer:has(.room-brief.is-current) .room-next-project{bottom:91px;right:7%}}

/* Brief layout: bounded content grid above a dedicated navigation area. */
@media(min-width:1100px){
 .room-brief.is-current{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:9%;align-items:center;padding:160px 7% 220px;min-height:0}
 .room-brief>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .room-brief .room-caption{position:relative;inset:auto;width:auto;max-width:none;min-width:0}
 .room-brief .room-caption .io-eyebrow{margin-bottom:18px}
 .room-brief .room-caption h1{font-size:clamp(38px,5.5svh,64px)}
 .room-brief .room-brief-intro{font-size:clamp(16px,1.4svh,19px)!important;line-height:1.6;margin:22px 0 26px;max-width:none}
 .room-brief .room-needs{gap:25px}
 .room-brief .room-needs dt{font-size:11px;margin-bottom:8px}
 .room-brief .room-needs dd{font-size:13px;line-height:1.55}
 .room-brief .room-lifestyle{position:relative;inset:auto;width:auto;max-width:none;margin:0;align-self:center}
 .room-brief .room-lifestyle .io-eyebrow{font-size:18px;margin-bottom:20px}
 .room-brief .room-lifestyle>p:last-child{font-size:15px;line-height:1.8}
 .room-explorer:has(.room-brief.is-current) .room-nav{bottom:85px}
 .room-explorer:has(.room-brief.is-current) .room-next-project{bottom:145px}
}

/* All room views use the same bounded content area as The Brief. */
@media(min-width:1100px){
 .room-described.is-current{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:9%;align-items:center;padding:160px 7% 220px;min-height:0}
 .room-described>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .room-described .room-caption{position:relative;inset:auto;width:auto;max-width:none;min-width:0}
 .room-described .room-caption h1{font-size:clamp(40px,7svh,82px)}
 .room-described .room-caption .io-eyebrow{margin-bottom:22px}
 .room-described .room-caption>p:last-child{font-size:clamp(16px,2.5svh,21px);line-height:1.65;margin-top:24px}
 .room-described .room-detail{position:relative;inset:auto;width:auto;max-width:none;margin:0;align-self:center}
 .room-described .room-detail .io-eyebrow{font-size:18px;line-height:1.4;margin-bottom:20px}
 .room-described .room-detail>p:last-child{font-size:15px;line-height:1.8}
 .room-explorer:has(.room-described.is-current) .room-nav{bottom:85px}
 .room-explorer:has(.room-described.is-current) .room-next-project{bottom:145px}
}

/* One stable stage and navigation baseline for every project view. */
.io-room-page main.room-explorer:has(.room-scene.is-current){height:100svh;min-height:650px;overflow:hidden}
.io-room-page .room-explorer:has(.room-scene.is-current) .room-scenes{position:absolute;inset:0}
.io-room-page .room-explorer:has(.room-scene.is-current) .room-nav{bottom:85px}
.io-room-page .room-explorer:has(.room-scene.is-current) .room-controls{bottom:70px}
.io-room-page .room-explorer:has(.room-scene.is-current) .room-next-project{bottom:145px;right:5%}
@media(max-width:1099px){
 .io-room-page main.room-explorer:has(.room-scene.is-current){min-height:740px}
 .io-room-page .room-explorer .room-scenes .room-brief.is-current,.io-room-page .room-explorer .room-scenes .room-described.is-current{position:absolute;inset:0;height:100%;min-height:0;padding:155px 7% 250px;overflow-y:auto;scrollbar-width:thin}
 .io-room-page .room-explorer:has(.room-scene.is-current) .room-nav{bottom:130px}
 .io-room-page .room-explorer:has(.room-scene.is-current) .room-controls{bottom:70px}
 .io-room-page .room-explorer:has(.room-scene.is-current) .room-next-project{bottom:91px;right:7%}
}

@media(min-width:1100px){body.io-room-page{height:100svh;overflow:hidden}}

/* Fixed-size viewport navigation: selected-tab metrics cannot move the rule. */
.io-room-page .room-explorer:has(.room-scene.is-current) .room-nav{position:fixed;top:auto;bottom:85px;left:7%;right:18%;height:92px;box-sizing:border-box;padding:22px 0 0;margin:0;align-items:flex-start;border-top:1px solid rgba(255,255,255,.35);transform:none}
.io-room-page .room-nav .room-tab{box-sizing:border-box;height:68px;flex-shrink:0;border-bottom:1px solid transparent;padding:0 0 12px;margin:0}
.io-room-page .room-nav .room-tab.is-current{border-bottom-color:#fff}
@media(max-width:1099px){.io-room-page .room-explorer:has(.room-scene.is-current) .room-nav{left:7%;right:7%;bottom:130px}}

/* Alder & Form menu — a quiet, typographic index with an inset photograph. */
.io-menu{grid-template-columns:52% 48%;background:#18241e;color:#eeeae0;padding:0 7%;gap:5%;overflow:auto}
.io-menu-panel{order:1;padding:8vh 0 12vh;overflow:visible;min-width:0;position:static}
.io-menu-panel>.io-eyebrow{font-family:Georgia,serif;font-size:18px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin:0}
.io-menu-close{position:absolute;right:4%;top:28px;color:#eeeae0;font-size:11px;letter-spacing:.12em;gap:16px}
.io-menu-close span{font-size:22px;font-weight:400}.io-menu-close:focus:not(:focus-visible){outline:none}
.io-menu nav{counter-reset:menu;gap:0;margin:auto 0;padding:5vh 0;width:100%;max-width:560px}
.io-menu nav a{counter-increment:menu;display:flex;align-items:baseline;width:100%;gap:24px;padding:14px 0 18px;border-bottom:1px solid rgba(238,234,224,.18);font:400 clamp(36px,4.5vw,66px)/1.15 Georgia,serif;letter-spacing:-.035em;color:#eeeae0;transition:color .3s,padding-left .4s}
.io-menu nav a:before{content:'0' counter(menu);font:400 10px/1 'DM Sans',sans-serif;letter-spacing:.08em;opacity:.5;min-width:20px}
.io-menu nav a:first-child{border-top:1px solid rgba(238,234,224,.18)}
.io-menu nav a:hover{color:#d6c4a2;padding-left:8px}.io-menu nav a>span{font:300 28px 'Manrope',sans-serif;margin-left:auto}
.io-menu-bottom{font:400 11px/1.8 'DM Sans',sans-serif;letter-spacing:.02em;gap:16px;padding:0;max-width:560px;opacity:.8}
.io-menu-photo{order:2;align-self:center;width:76%;height:65svh;min-height:320px;max-height:720px;overflow:visible;justify-self:center;margin-top:-3vh}
.io-menu-photo img{height:100%;width:100%;object-fit:cover}
.io-menu-photo:after{display:none}.io-menu-photo>span{position:static;display:block;margin-top:18px;color:#eeeae0;font:300 12px/1.7 'Manrope',sans-serif;letter-spacing:.02em;opacity:.75}
@media(max-width:800px){.io-menu{grid-template-columns:1fr;padding:0 9%;gap:0}.io-menu-photo{display:none}.io-menu-panel{padding:100px 0 100px;min-height:100svh}.io-menu nav{max-width:none;padding:40px 0}.io-menu nav a{font-size:48px;padding:18px 0 22px}.io-menu-bottom{flex-direction:column;gap:12px}.io-menu-close{right:7%;top:22px}}
@media(max-height:650px) and (min-width:801px){.io-menu nav a{font-size:40px;padding:10px 0}.io-menu-panel{padding-top:55px;padding-bottom:85px}.io-menu-photo{height:60svh;min-height:230px}}
@media(prefers-reduced-motion:reduce){.io-menu nav a{transition:none}}

.io-menu nav a{font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(36px,4.5vw,64px);letter-spacing:-.04em;line-height:1.2}
@media(max-width:800px){.io-menu nav a{font-size:46px;font-weight:300}}
@media(max-height:650px) and (min-width:801px){.io-menu nav a{font-size:40px}}

/* Navigation palette follows the imagery of its page. */
body[data-menu-palette="rose"] .io-menu{--menu-ground:#c5a22c;--menu-ink:#302b1d;--menu-rule:rgba(48,43,29,.23);--menu-hover:#63501c}
body[data-menu-palette="ochre"] .io-menu{--menu-ground:#c7b269;--menu-ink:#302e22;--menu-rule:rgba(48,46,34,.23);--menu-hover:#60532c}
body[data-menu-palette="sand"] .io-menu{--menu-ground:#d2c6b5;--menu-ink:#30302b;--menu-rule:rgba(48,48,43,.23);--menu-hover:#6b604d}
body[data-menu-palette="stone"] .io-menu{--menu-ground:#bdbbb1;--menu-ink:#292f2b;--menu-rule:rgba(41,47,43,.23);--menu-hover:#586559}
body[data-menu-palette="sea"] .io-menu{--menu-ground:#a6babb;--menu-ink:#243638;--menu-rule:rgba(36,54,56,.23);--menu-hover:#466c70}
body[data-menu-palette="clay"] .io-menu{--menu-ground:#c1a799;--menu-ink:#382e29;--menu-rule:rgba(56,46,41,.23);--menu-hover:#765544}
body[data-menu-palette="slate"] .io-menu{--menu-ground:#a4afb6;--menu-ink:#26323b;--menu-rule:rgba(38,50,59,.23);--menu-hover:#4e6374}
body[data-menu-palette="forest"] .io-menu{--menu-ground:#18241e;--menu-ink:#eeeae0;--menu-rule:rgba(238,234,224,.18);--menu-hover:#d6c4a2}
body[data-menu-palette] .io-menu{background:var(--menu-ground);color:var(--menu-ink)}
body[data-menu-palette] .io-menu nav a,body[data-menu-palette] .io-menu-close,body[data-menu-palette] .io-menu-photo>span{color:var(--menu-ink)}
body[data-menu-palette] .io-menu nav a{border-bottom-color:var(--menu-rule)}
body[data-menu-palette] .io-menu nav a:first-child{border-top-color:var(--menu-rule)}
body[data-menu-palette] .io-menu nav a:hover{color:var(--menu-hover)}

/* Projects — an immersive index of four distinct residences. */
.io-projects-page{background:#17221d;color:#fff}.projects-index{height:100svh;min-height:650px;position:relative;overflow:hidden;isolation:isolate}.projects-scenes,.project-view{position:absolute;inset:0}.project-view[hidden]{display:none}.project-image{width:100%;height:100%;object-fit:cover;animation:room-open 1.1s cubic-bezier(.2,.7,.2,1) both}.project-view:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,18,12,.85),rgba(8,18,12,.08) 90%),linear-gradient(90deg,rgba(8,18,12,.25),transparent)}.projects-top{position:absolute;top:135px;left:7%;right:7%;z-index:1;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em}.projects-heading{position:absolute;z-index:1;left:7%;right:42%;bottom:32%;animation:room-words .8s ease both}.projects-heading h1{font:300 clamp(55px,7.5vw,120px)/1.08 'Manrope',sans-serif;letter-spacing:-.055em;margin:0}.projects-heading>p:last-child{font:300 clamp(16px,1.5vw,22px)/1.6 'Manrope',sans-serif;margin:26px 0 0}.projects-caption{position:absolute;z-index:1;right:7%;width:25%;bottom:33%;animation:room-words .8s ease both}.projects-caption>p{font:300 17px/1.8 'Manrope',sans-serif;margin:0 0 30px}.projects-caption>a{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #ffffff66;font-size:12px;letter-spacing:.05em}.projects-caption>a span{font-size:25px}.projects-nav{position:absolute;z-index:2;left:7%;right:23%;bottom:85px;height:92px;display:grid;grid-template-columns:repeat(4,1fr);gap:25px;border-top:1px solid #ffffff66;padding-top:22px}.project-select{background:none;border:0;border-bottom:1px solid transparent;color:#ffffffb3;text-align:left;font:400 13px/1.5 'DM Sans',sans-serif;cursor:pointer;padding:0 0 12px;width:max-content;max-width:100%;height:68px}.project-select span{display:block;font-size:10px;letter-spacing:.1em;margin-bottom:9px;opacity:.65}.project-select.is-current{color:#fff;border-bottom-color:#fff}.project-select:hover{color:#fff}.projects-controls{position:absolute;bottom:90px;right:7%;display:flex;align-items:center;gap:20px;z-index:2}.projects-count{font-size:11px;letter-spacing:.08em}.projects-controls button{font:300 30px 'Manrope',sans-serif;border:0;background:none;color:#fff;padding:8px;cursor:pointer}
@media(max-width:800px){.projects-index{min-height:740px}.projects-top{top:115px}.projects-top>span:last-child{display:none}.projects-heading{right:7%;bottom:48%}.projects-heading h1{font-size:clamp(48px,10vw,72px)}.projects-heading>p:last-child{margin-top:18px}.projects-caption{left:7%;right:7%;width:auto;bottom:28%;max-width:530px}.projects-caption>p{font-size:15px;margin-bottom:18px}.projects-caption>a{max-width:240px}.projects-nav{left:7%;right:7%;bottom:135px;gap:16px;height:82px;padding-top:18px}.project-select{font-size:11px;height:60px}.projects-controls{bottom:64px;right:7%}}
@media(prefers-reduced-motion:reduce){.project-image,.projects-heading,.projects-caption{animation:none}}

.io-projects-page .projects-nav,.io-projects-page .projects-controls{position:fixed}
@media(min-width:801px){body.io-projects-page{height:100svh;overflow:hidden}}

/* Project index mirrors the residence experience, with a four-image selector. */
.io-projects-page .projects-caption>p{font-size:15px;line-height:1.8;font-weight:300}.io-projects-page .projects-caption{width:30%;bottom:33%}.io-projects-page .projects-heading{bottom:42%}
.io-projects-page .projects-nav{height:130px;padding-top:18px;gap:28px;bottom:75px}
.io-projects-page .project-select{height:106px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 0 10px;width:100%;opacity:.65;transition:opacity .3s}
.io-projects-page .project-select img{width:110px;height:62px;object-fit:cover;border:1px solid transparent}
.io-projects-page .project-select .project-thumb-name{font-size:12px;line-height:1.4;margin:0;opacity:1;letter-spacing:0}
.io-projects-page .project-select.is-current,.io-projects-page .project-select:hover{opacity:1}.io-projects-page .project-select.is-current{border-bottom-color:transparent}.io-projects-page .project-select.is-current img{border-color:#fff}
@media(max-width:800px){.io-projects-page .projects-index{min-height:850px}.io-projects-page .projects-heading{bottom:auto;top:180px;right:7%}.io-projects-page .projects-heading h1{font-size:48px}.io-projects-page .projects-caption{left:7%;right:7%;width:auto;bottom:35%;max-width:580px}.io-projects-page .projects-caption>p{font-size:14px;line-height:1.7;margin-bottom:18px}.io-projects-page .projects-nav{bottom:130px;height:120px;gap:15px}.io-projects-page .project-select img{width:100%;max-width:110px;height:54px}.io-projects-page .project-select .project-thumb-name{font-size:10px}.io-projects-page .projects-controls{bottom:65px}}
@media(prefers-reduced-motion:reduce){.io-projects-page .project-select{transition:none}}

.io-projects-page .projects-caption>p{font-size:clamp(17px,1.35vw,20px);line-height:1.75}.io-projects-page .projects-caption>a{font-size:17px;letter-spacing:.03em;padding-bottom:16px}.io-projects-page .projects-caption>a span{font-size:32px}
@media(max-width:800px){.io-projects-page .projects-caption>p{font-size:16px;line-height:1.65}.io-projects-page .projects-caption>a{font-size:16px}}

/* Frosted glass thumbnail cards over project imagery. */
.io-projects-page .projects-nav{gap:18px}
.io-projects-page .project-select{height:112px;padding:9px 12px;gap:8px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 18px rgba(0,0,0,.1);opacity:1;transition:background .3s,border-color .3s}
.io-projects-page .project-select img{width:100%;height:62px;border:0;border-radius:3px;opacity:.8}
.io-projects-page .project-select.is-current{border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.17)}
.io-projects-page .project-select.is-current img{border:0;opacity:1}
.io-projects-page .project-select:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
@media(max-width:800px){.io-projects-page .projects-nav{gap:10px}.io-projects-page .project-select{height:100px;padding:7px;gap:7px}.io-projects-page .project-select img{height:50px;max-width:none}.io-projects-page .project-select .project-thumb-name{font-size:10px}}
@media(prefers-reduced-motion:reduce){.io-projects-page .project-select{transition:none}}

.io-projects-page .projects-caption>p{font-family:'Manrope',sans-serif;font-size:15px;font-weight:300;line-height:1.8}
@media(max-width:800px){.io-projects-page .projects-caption>p{font-size:14px;line-height:1.7}}

/* A consistent, readable Menu control over every photograph. */
.io-header .io-menu-toggle{color:#fff;background:rgba(15,27,21,.76);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:12px 20px;min-height:46px;gap:16px;font-size:13px;font-weight:500;letter-spacing:.08em;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 3px 15px rgba(0,0,0,.15);transition:background .25s,border-color .25s}
.io-header .io-menu-toggle:hover{background:rgba(15,27,21,.95);border-color:rgba(255,255,255,.8)}
.io-header .io-menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.io-header .io-menu-toggle span{font-size:18px;line-height:1}
@media(prefers-reduced-motion:reduce){.io-header .io-menu-toggle{transition:none}}

/* Consistent project navigation and description hierarchy. */
.io-room-page .room-topline>a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;font-size:16px;line-height:1.4;letter-spacing:.04em}
.io-room-page .room-residence-copy{font-family:'Manrope',sans-serif;font-size:15px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.82)}
@media(max-width:700px){.io-room-page .room-residence-copy{font-size:14px}.io-room-page .room-topline>a{font-size:15px}}

/* Shared slide text anchors: alignment does not depend on paragraph length. */
@media(min-width:1100px){
 .io-room-page .room-explorer .room-scenes .room-scene.is-current{display:block;padding:0}
 .io-room-page .room-explorer .room-scenes .room-scene .room-caption{position:absolute;top:29%;bottom:auto;left:7%;right:auto;width:48%;max-width:none;margin:0}
 .io-room-page .room-explorer .room-scenes .room-scene .room-caption>.io-eyebrow{margin:0 0 24px;line-height:1.5}
 .io-room-page .room-explorer .room-scenes .room-scene .room-caption h1{font-size:clamp(40px,7svh,82px);line-height:1.12;margin:0}
 .io-room-page .room-explorer .room-scenes .room-scene .room-lifestyle{position:absolute;top:29%;bottom:auto;right:7%;left:auto;width:30%;max-width:none;margin:0}
 .io-room-page .room-explorer .room-scenes .room-scene .room-lifestyle>.io-eyebrow{font-size:18px;line-height:1.4;margin:0 0 20px}
 .io-room-page .room-explorer .room-scenes .room-scene .room-residence-copy{position:absolute;top:calc(29% + 45px);bottom:auto;right:7%;left:auto;width:30%;margin:0}
}

body.beach-project .room-topline>a{font-family:inherit;font-size:11px;font-weight:400;line-height:1.7;letter-spacing:.06em;text-transform:none}
@media(max-width:400px){body.beach-project .room-topline>a{font-size:10px}}

.io-room-page .room-topline>a{font-family:inherit;font-size:11px;font-weight:400;line-height:1.7;letter-spacing:.06em;text-transform:none}
@media(max-width:400px){.io-room-page .room-topline>a{font-size:10px}}

/* Residence introductions sit beneath their titles on the left. */
.io-room-page .room-explorer .room-scenes .room-residence .room-caption>.residence-intro{max-width:620px;font-family:'Manrope',sans-serif;font-size:15px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.82);margin:28px 0 0}
@media(max-width:800px){.io-room-page .room-explorer .room-scenes .room-residence .room-caption{top:29%;bottom:auto;max-width:86%;width:86%}}
@media(max-width:700px){.io-room-page .room-explorer .room-scenes .room-residence .room-caption>.residence-intro{font-size:14px;margin-top:24px}}

/* Centre the complete Residence introduction between the back link and room divider. */
.io-room-page .room-explorer .room-scenes .room-residence .room-caption{top:174px;bottom:177px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:1099px){.io-room-page .room-explorer .room-scenes .room-residence .room-caption{bottom:222px}}
@media(max-width:800px){.io-room-page .room-explorer .room-scenes .room-residence .room-caption{top:154px;bottom:222px}}

/* A quiet edge control for viewing each residence without text. */
.image-text-toggle{position:fixed;z-index:200001;left:0;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:top left;min-height:36px;padding:11px 19px;border:1px solid rgba(255,255,255,.35);border-bottom:0;border-radius:0 0 5px 5px;background:rgba(15,24,20,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;font:400 10px/1.4 'Manrope',sans-serif;letter-spacing:.13em;white-space:nowrap;cursor:pointer}
.image-text-toggle:hover{background:rgba(15,24,20,.95)}
.image-text-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.io-room-page.image-only :is(.io-header,.room-caption,.room-lifestyle,.room-topline,.room-nav,.room-controls,.room-next-project,.concept-pill){opacity:0!important;pointer-events:none}

/* Compact glass image tabs echo the selected residences gallery. */
.io-room-page .room-explorer:has(.room-scene.is-current) .room-nav{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;padding-top:12px;overflow-x:auto}
.io-room-page .room-explorer .room-nav .room-tab{box-sizing:border-box;width:100%;height:76px;min-width:0;padding:6px;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.09);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);font:400 10px/1.5 'Manrope',sans-serif;letter-spacing:0;white-space:nowrap;transition:background .25s,border-color .25s}
.io-room-page .room-nav .room-tab>span{display:none}
.io-room-page .room-nav .room-thumb{display:block;width:100%;height:40px;object-fit:cover;border-radius:2px;margin:0 0 6px;opacity:.8}
.io-room-page .room-explorer .room-nav .room-tab.is-current{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.18)}
.io-room-page .room-nav .room-tab.is-current .room-thumb{opacity:1}
.io-room-page .room-explorer .room-nav .room-tab:hover{background:rgba(255,255,255,.22)}
@media(max-width:1099px){.io-room-page .room-explorer:has(.room-scene.is-current) .room-nav{grid-template-columns:repeat(8,100px);gap:8px}}
@media(prefers-reduced-motion:reduce){.io-room-page .room-explorer .room-nav .room-tab{transition:none}}

/* Keep decorative image layers clear of project navigation hit targets. */
.io-room-page .room-scene::after{pointer-events:none}
.io-room-page .room-topline{z-index:5}
.io-room-page .room-topline>a{position:relative;cursor:pointer}

/* Contact: retain the dark introduction and overlapping light form. */
.io-contact-page{background:#f3f0e9;font-family:'Manrope',sans-serif;font-weight:300;color:#252821}
.io-contact-page .contacts-wrapper-1{background:#18221d;padding-top:145px}
.io-contact-page .header-empty-space{display:none}
.io-contact-page .contact-title{font:300 clamp(44px,5vw,72px)/1.12 'Manrope',sans-serif;letter-spacing:-.05em;color:#fff;margin:0}
.io-contact-page .simple-article{font-family:'Manrope',sans-serif;font-size:15px;font-weight:300;line-height:1.8}
.io-contact-page .simple-article.large{font-size:17px;line-height:1.8}
.io-contact-page .h4{font:400 11px/1.5 'Manrope',sans-serif;letter-spacing:.14em}
.io-contact-page .h4 b{font-weight:400}
.io-contact-page .contacts-entry{border-top:1px solid #ffffff35;padding-top:22px}
.io-contact-page .contacts-form-1-align{max-width:960px;margin-left:auto;margin-right:auto;background:#f3f0e9;box-shadow:0 20px 60px #0000000a}
.io-contact-page .contact-form,.io-contact-page .contact-form input,.io-contact-page .contact-form textarea,.io-contact-page .input-wrapper label{font-family:'Manrope',sans-serif;font-weight:300}
.io-contact-page .input-wrapper{padding-top:25px}
.io-contact-page .input-wrapper label,.io-contact-page .input-wrapper.focus .input+label{top:0;font-size:11px;line-height:1.5;letter-spacing:.08em;color:#62665f;pointer-events:none}
.io-contact-page .input-wrapper .input{color:#252821;height:44px;padding:0;background:transparent}
.io-contact-page .input-wrapper textarea.input{height:100px;line-height:1.7;padding:8px 0;resize:vertical}
.io-contact-page .input-wrapper span,.io-contact-page .input-wrapper.focus .input+label+span,.io-contact-page .input-wrapper.focus textarea.input+label+span{height:1px;background:#a9ada4}
.io-contact-page .input-wrapper span:after{display:none}
.io-contact-page .button.type-3{font:400 11px/1.5 'Manrope',sans-serif;letter-spacing:.12em;background:#18221d;border-color:#18221d;color:#fff;padding:18px 28px}
.io-contact-page footer{padding-top:110px;padding-bottom:100px;background:#f3f0e9}
.io-contact-page footer .simple-article{font-size:11px}
@media(max-width:767px){.io-contact-page .contacts-wrapper-1{padding-top:110px}.io-contact-page .contacts-entry{margin-top:20px}.io-contact-page .contacts-form-1-align{top:35px}.io-contact-page .simple-article.large{font-size:15px}.io-contact-page footer{padding-top:75px}}

/* More visible image-view control, still flush to the left edge. */
.image-text-toggle{min-height:48px;padding:15px 26px;border:1px solid rgba(255,255,255,.6);border-bottom:0;border-radius:0 0 12px 12px;background:rgba(255,255,255,.18);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 5px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);color:#fff;font-size:12px;font-weight:500;letter-spacing:.12em;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.image-text-toggle:hover{background:rgba(255,255,255,.3);border-color:#fff}

/* Studio: three image-led chapters using the residence visual language. */
.io-studio-page .studio-scene:after{background:linear-gradient(90deg,rgba(8,18,12,.7),rgba(8,18,12,.2) 45%,rgba(8,18,12,.78)),linear-gradient(0deg,rgba(8,18,12,.7),rgba(8,18,12,.12))}
.studio-title{position:absolute;z-index:1;left:7%;top:30%;width:45%;animation:room-words .8s ease both}
.io-studio-page .studio-title h1{font-size:clamp(44px,6.2vw,94px);max-width:700px;line-height:1.08}
.studio-title .io-eyebrow{margin-bottom:28px;font-weight:400}
.studio-copy{position:absolute;z-index:1;right:7%;top:31%;width:30%;animation:room-words .8s ease both}
.io-studio-page .studio-copy h2{font:400 12px/1.5 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;margin:0 0 24px}
.studio-copy>p{font:300 15px/1.85 'Manrope',sans-serif;color:rgba(255,255,255,.85);margin:0}
.studio-copy>a{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-top:32px;padding-bottom:12px;border-bottom:1px solid #ffffff66}
.studio-copy>a span{font-size:26px}
.io-studio-page .room-explorer:has(.room-scene.is-current) .room-nav{grid-template-columns:repeat(3,minmax(0,170px));height:108px;bottom:75px}
.io-studio-page .room-explorer .room-nav .room-tab{height:92px;font-size:11px}
.io-studio-page .room-nav .room-thumb{height:54px}
@media(max-width:800px){.io-studio-page .room-explorer{min-height:850px}.studio-title{top:145px;width:86%}.io-studio-page .studio-title h1{font-size:48px;max-width:480px}.studio-title .io-eyebrow{margin-bottom:20px}.studio-copy{top:340px;left:7%;right:7%;width:auto;max-width:580px}.studio-copy>p{font-size:14px;line-height:1.8}.io-studio-page .room-explorer:has(.room-scene.is-current) .room-nav{bottom:115px;grid-template-columns:repeat(3,minmax(0,1fr))}.io-studio-page .room-controls{bottom:65px}}
@media(prefers-reduced-motion:reduce){.studio-title,.studio-copy{animation:none}}

@media(min-width:801px){.io-studio-page .studio-copy{top:26%;width:32%}.io-studio-page .studio-copy>a{margin-top:24px}}

/* Clear glass edge control: preserve the image detail behind it. */
.image-text-toggle{background:linear-gradient(120deg,rgba(255,255,255,.13),rgba(255,255,255,.025) 42%,rgba(255,255,255,.065));backdrop-filter:blur(3px) saturate(135%);-webkit-backdrop-filter:blur(3px) saturate(135%);border-color:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.12),0 4px 18px rgba(0,0,0,.12)}
.image-text-toggle:hover{background:linear-gradient(120deg,rgba(255,255,255,.21),rgba(255,255,255,.045) 42%,rgba(255,255,255,.1))}

/* Anchor the Studio portraits to their upper edge so faces remain in frame. */
.io-studio-page .studio-scene>img[src="img/background-23.jpg"],.io-studio-page .studio-scene>img[src="img/background-24.jpg"]{object-position:center top}
.io-studio-page .room-thumb[src="img/background-23.jpg"],.io-studio-page .room-thumb[src="img/background-24.jpg"]{object-position:center top}

/* Match the home hero business name to the established serif wordmark. */
.boxgallery-text .home-brand-title{font-family:Georgia,serif!important;font-weight:400!important;font-size:clamp(28px,3.6vw,48px)!important;line-height:1.2;letter-spacing:2px!important;text-transform:uppercase}

/* Phones (640px and narrower), 23 October 2026: photo-first room views.
   The room photo sits at the top, clear of text; the words follow below on the page colour and scroll with
   the page; the room thumbnails are a slim strip pinned to the bottom of the screen; the image-text toggle
   is not needed. Wider screens are unchanged. Selectors repeat classes and use :has() to outrank the layered rules above. */
@media(max-width:640px){
html body.io-room-page{height:auto;overflow:visible}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current){height:auto;min-height:0;overflow:visible;padding:0}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes{position:relative;inset:auto;height:auto}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .room-scene.room-scene.is-current{position:relative;inset:auto;display:block;height:auto;min-height:0;padding:0 0 6px;overflow:visible}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scene.room-scene>img{position:relative;inset:auto;display:block;width:100%;height:56svh;min-height:320px;object-fit:cover}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scene.room-scene::after{inset:0 0 auto;height:56svh;min-height:320px;background:linear-gradient(rgba(8,12,10,.6),rgba(8,12,10,0) 34%,rgba(8,12,10,0) 72%,rgba(8,12,10,.3))}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .room-scene .room-caption.room-caption{position:relative;inset:auto;top:auto;bottom:auto;width:auto;max-width:none;margin:0;padding:28px 7% 0;transform:none}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .room-scene .room-caption.room-caption h1{font-size:clamp(34px,10vw,44px);line-height:1.05}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .room-scene .room-lifestyle.room-lifestyle{position:relative;inset:auto;width:auto;max-width:none;margin:26px 0 0;padding:0 7%}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-topline.room-topline{position:absolute;top:84px;left:7%;right:7%;z-index:3}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-controls.room-controls{position:relative;inset:auto;display:flex;align-items:center;gap:18px;margin:0;padding:30px 7% 0}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-next-project.room-next-project{position:relative;inset:auto;display:inline-block;margin:18px 7% 0}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-nav.room-nav{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:150;display:flex;height:auto;gap:8px;margin:0;padding:10px 4% calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.18);background:rgba(16,20,17,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-nav.room-nav::-webkit-scrollbar{display:none}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-nav .room-tab.room-tab{flex:0 0 86px;width:86px;height:auto;padding:5px;font-size:10px;overflow:hidden;text-overflow:ellipsis}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-nav .room-tab .room-thumb.room-thumb{height:36px;margin-bottom:4px}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .studio-scene .studio-title.studio-title,html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .studio-scene .studio-copy.studio-copy{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;width:auto;max-width:none;margin:0;padding:28px 7% 0;transform:none}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .studio-scene .studio-title.studio-title h1{font-size:clamp(34px,10vw,44px);line-height:1.05}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-scenes .studio-scene .studio-copy.studio-copy{padding-top:18px}
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .studio-scene.studio-scene>img{object-position:center 20%}
html body.io-room-page .concept-pill.concept-pill{position:static;transform:none;margin:30px auto calc(112px + env(safe-area-inset-bottom))}
html body.io-room-page .image-text-toggle{display:none}
}

/* 23 October 2026: text links without their own rule (Studio "Explore our projects" / "Start a conversation",
   Projects "Explore residence"). The divider above the thumbnails is the only line; the arrow sits beside the
   words, and an underline draws in on hover. */
.io-studio-page .studio-copy>a,.io-projects-page .projects-caption>a{display:inline-flex;justify-content:flex-start;align-items:center;gap:16px;width:auto;max-width:none;padding-bottom:8px;border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.22,1,.36,1)}
.io-studio-page .studio-copy>a span,.io-projects-page .projects-caption>a span{transition:translate .35s cubic-bezier(.22,1,.36,1)}
.io-studio-page .studio-copy>a:hover,.io-studio-page .studio-copy>a:focus-visible,.io-projects-page .projects-caption>a:hover,.io-projects-page .projects-caption>a:focus-visible{background-size:100% 1px}
.io-studio-page .studio-copy>a:hover span,.io-projects-page .projects-caption>a:hover span{translate:3px -3px}
@media(prefers-reduced-motion:reduce){.io-studio-page .studio-copy>a,.io-projects-page .projects-caption>a,.io-studio-page .studio-copy>a span,.io-projects-page .projects-caption>a span{transition:none}}

/* 23 October 2026: one divider per page, the full content width (7% each side) at every screen size.
   On wide screens the room and project dividers used to stop short of the right edge (right: 18% / 23%)
   where the counter and arrows sit; the line now runs edge to edge and padding keeps the thumbnails clear of the controls. */
@media(min-width:1100px){
html body.io-room-page main.room-explorer.room-explorer:has(.room-scene.is-current) .room-nav.room-nav{right:7%;padding-right:11vw}
}
@media(min-width:801px){
html body.io-projects-page main.projects-index.projects-index .projects-nav.projects-nav{right:7%;padding-right:max(16vw,240px)}
}
/* Contact: the Follow us column gets the same top rule, so the line runs across all four columns */
.io-contact-page div[class*="col"]:last-child .contacts-entry{border-top:1px solid #ffffff35}
/* Contact on phones: the columns stack, so one rule above the group instead of one per entry */
@media(max-width:767px){
.io-contact-page div[class*="col"] .contacts-entry,.io-contact-page div[class*="col"]:last-child .contacts-entry{border-top:0}
.io-contact-page div[class*="col"]:first-child .contacts-entry{border-top:1px solid #ffffff35}
}

/* Projects page on phones (640px and narrower), 23 October 2026: photo-first, as on the room pages.
   The house photo at the top with nothing over it, the name, description and Explore residence below,
   then the counter and arrows; the house thumbnails pinned to the bottom of the screen. */
@media(max-width:640px){
html body.io-projects-page{height:auto;overflow:visible}
html body.io-projects-page main.projects-index.projects-index{height:auto;min-height:0;overflow:visible}
html body.io-projects-page main.projects-index.projects-index .projects-scenes{position:relative;inset:auto}
html body.io-projects-page main.projects-index.projects-index .projects-scenes .project-view.project-view{position:relative;inset:auto}
html body.io-projects-page main.projects-index.projects-index .project-view .project-image.project-image{position:relative;display:block;width:100%;height:56svh;min-height:320px;object-fit:cover}
html body.io-projects-page main.projects-index.projects-index .projects-scenes .project-view.project-view::after{inset:0 0 auto;height:56svh;min-height:320px;background:linear-gradient(rgba(8,18,12,.6),rgba(8,18,12,0) 34%,rgba(8,18,12,0) 72%,rgba(8,18,12,.3))}
html body.io-projects-page main.projects-index.projects-index .project-view .projects-heading.projects-heading{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;width:auto;max-width:none;margin:0;padding:28px 7% 0}
html body.io-projects-page main.projects-index.projects-index .project-view .projects-heading.projects-heading h1{font-size:clamp(36px,11vw,48px);line-height:1.05}
html body.io-projects-page main.projects-index.projects-index .project-view .projects-caption.projects-caption{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;width:auto;max-width:none;margin:0;padding:18px 7% 0}
html body.io-projects-page main.projects-index.projects-index .projects-controls.projects-controls{position:relative;inset:auto;display:flex;align-items:center;gap:18px;margin:0;padding:30px 7% 0}
html body.io-projects-page main.projects-index.projects-index .projects-nav.projects-nav{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:150;display:flex;height:auto;gap:8px;margin:0;padding:10px 4% calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.18);background:rgba(16,20,17,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none}
html body.io-projects-page main.projects-index.projects-index .projects-nav.projects-nav::-webkit-scrollbar{display:none}
html body.io-projects-page main.projects-index.projects-index .projects-nav .project-select.project-select{flex:1 0 76px;width:auto;height:auto;padding:5px;gap:4px;font-size:10px}
html body.io-projects-page main.projects-index.projects-index .projects-nav .project-select.project-select img{height:36px}
html body.io-projects-page .concept-pill.concept-pill{position:static;transform:none;margin:30px auto calc(112px + env(safe-area-inset-bottom))}
}

/* 23 October 2026: contact page. The thank-you line under the form, and room at the bottom of the page
   so the fixed concept pill never covers the Submit button. */
.io-contact-page{padding-bottom:96px}
.io-contact-page .enquiry-done{margin:22px 0 0;text-align:center;font:400 15px/1.6 'Manrope',sans-serif;color:#252821}

/* 23 October 2026: home page without jQuery. The hero fills the screen in CSS (global.js used to set its
   height), and the hero words, arrows and footer move from the old monospace fonts to Manrope like every
   other page. The business name keeps its Georgia wordmark styling. */
.io-home-page .page-height{height:100svh;min-height:480px}
.io-home-page .boxgallery-text .slide-description,.io-home-page .boxgallery-text .slide-title:not(.home-brand-title),.io-home-page .boxgallery .number,.io-home-page .boxgallery-text .button,.io-home-page footer,.io-home-page footer *{font-family:'Manrope',sans-serif}
.io-home-page .boxgallery-text .button{font-weight:500;letter-spacing:.12em}
.io-home-page .boxgallery-text .slide-description{font-weight:300;letter-spacing:0;max-width:560px;margin-left:auto;margin-right:auto}
.io-home-page .boxgallery-text .slide-title:not(.home-brand-title){font-weight:300;letter-spacing:-.01em;text-transform:none}
@media(max-width:640px){.io-home-page .boxgallery-text .slide-description{font-size:15px;line-height:1.6;padding:0 6%}}