/* v24: varied compositions, working plan study, and persistent useful navigation. */
html{scroll-padding-top:88px}
.nav{position:fixed;width:100%;height:72px;padding-inline:6%;z-index:20;background:#171c18f2;transition:background-color .25s,border-color .25s;border-bottom:1px solid transparent}
html[data-section=home] .nav{background:transparent;border-color:transparent;backdrop-filter:none}
html[data-section]:not([data-section=home]) .nav{background:#171c18f2;border-color:#c6c9b31f;backdrop-filter:blur(12px)}
.nav .brand b{font-size:27px}.nav .brand>span{font-size:24px}.nav nav a{font-size:12px}.nav nav a[aria-current=location]{color:var(--accent)}.nav .button.small{min-height:42px;font-size:12px;padding:9px 17px}
html[data-motion=enhanced] .build-view{padding-top:90px}
html[data-motion=enhanced] .build-heading h2{font-size:clamp(28px,3vw,43px)}
html[data-motion=enhanced] .build-scene{width:min(88vw,calc(58svh * 1672 / 941));max-height:58svh}
html[data-motion=enhanced] .project-pin{padding-top:92px}
html[data-motion=enhanced] .section-heading{margin-bottom:20px}
html[data-motion=enhanced] .project-heading h3{font-size:clamp(38px,4.2vw,66px)}
html[data-motion=enhanced] .featured-image{max-height:66svh}
.work-scroll-hint{max-width:250px;line-height:1.9}
.cinema{padding-block:115px 130px}
.cinema-copy h2{font-size:clamp(48px,6vw,88px);line-height:1.15}.cinema-copy>p:not(.eyebrow){max-width:230px;line-height:1.9}
.film-player{box-shadow:0 28px 75px #0004}.film-caption{border-top:1px solid var(--line);padding-top:14px}
/* Material photography travels as one continuous spatial strip, not another split panel. */
html[data-motion=enhanced] .material-folio{height:260svh;background:#181d18}
html[data-motion=enhanced] .material-pin{width:100%;padding:92px 0 30px}
html[data-motion=enhanced] .material-heading{width:88%;margin:0 auto 20px;display:flex;align-items:end;justify-content:space-between}
html[data-motion=enhanced] .material-heading h2{font-size:clamp(35px,4.8vw,70px);line-height:1.15}
html[data-motion=enhanced] .material-heading>p:last-child{max-width:240px;font-size:13px;text-align:right;line-height:1.9}
html[data-motion=enhanced] .material-layout{display:block;position:relative;perspective:none;width:100%;overflow:hidden}
html[data-motion=enhanced] .material-visual{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:0}
html[data-motion=enhanced] .material-images{overflow:visible;perspective:1500px;transform-style:preserve-3d}
html[data-motion=enhanced] .material-images img{inset:0 auto 0 25%;width:50%;height:100%;object-fit:contain;transform-origin:50% 50%;backface-visibility:hidden}
html[data-motion=enhanced] .material-info{position:absolute;left:5.5%;bottom:6%;width:26%;z-index:4;padding:25px 16px 15px 0;background:linear-gradient(90deg,#181d18fa 60%,#181d1800)}
html[data-motion=enhanced] .detail-tabs{gap:18px}
html[data-motion=enhanced] .detail-tabs button{font-size:11px;min-width:52px}
html[data-motion=enhanced] .swatch{width:29px;height:29px}
html[data-motion=enhanced] .detail-current{margin-block:27px 20px;min-height:125px}
html[data-motion=enhanced] .detail-current h3{font-size:35px}
html[data-motion=enhanced] .detail-current p{font-size:13px;max-width:245px;line-height:1.9}
html[data-motion=enhanced] .material-info>.button{min-width:180px;font-size:12px;padding:12px 18px}
html[data-motion=enhanced] .detail-quote{max-width:180px;font-size:12px}
html[data-motion=enhanced] .detail-scroll-hint{font-size:10px;max-width:220px;line-height:1.9;margin-top:22px;gap:12px}
/* A quiet architectural drawing is an aid to choosing, not an ornamental 3D object. */
.layout-guide{background:#e4e7dc;color:#263326;padding-block:85px 90px;overflow:visible}
.layout-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}
.layout-heading h2{font-size:clamp(38px,5.5vw,80px);line-height:1.3}
.layout-heading p{font-size:14px;line-height:1.9;color:#56644f;max-width:300px}
.layout-body{display:grid;grid-template-columns:1.25fr .75fr;gap:9%;direction:ltr;align-items:center}
.plan-sheet{background:#edf0e7;border:1px solid #c1c9b7;box-shadow:0 18px 50px #3545320b;direction:rtl;position:relative}
.plan-sheet-label{display:flex;justify-content:space-between;align-items:center;padding:20px 25px 0;color:#62705a;font-size:11px}.plan-sheet-label>span:last-child{direction:ltr;font:11px Arial;letter-spacing:.13em}
.plan-sheet svg{display:block;width:100%;height:auto;overflow:visible}
.plan-sheet figcaption{padding:0 25px 20px;font-size:11px;color:#63705a;line-height:1.9}
.plan-module{transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .3s;transform-box:view-box}
.plan-fixtures{fill:none;stroke:#f5f1df;stroke-width:1.4}
.plan-label,.plan-island-label{font:12px var(--site-font),sans-serif;fill:#6c775f;text-anchor:middle;direction:rtl}
.plan-island-label{fill:#f2ecda}
#layoutDiagram:not([data-layout-plan=island]) .plan-island-label{opacity:0}
.layout-choice{direction:rtl;padding-block:15px}
.layout-options{display:none;flex-wrap:wrap;gap:20px;border-bottom:1px solid #abb6a1;padding-bottom:10px}
.layout-guide[data-ready=true] .layout-options{display:flex}
.layout-options button{background:none;color:#69745f;border:0;border-bottom:2px solid transparent;padding:10px 0;font-size:13px;min-height:45px}
.layout-options button[aria-pressed=true]{color:#263d26;border-color:#465a3b}
.layout-description{margin-block:35px 30px;min-height:205px;position:relative}
#planNumber{font:12px/1 Arial;letter-spacing:.15em;color:#7c896f}
.layout-description h3{font:400 clamp(29px,3.2vw,44px)/1.4 var(--display),serif;margin-block:16px 18px}
.layout-description p{font-size:14px;line-height:1.95;color:#53614a;max-width:330px}
.layout-choice .button{background:#2e3d2b;color:#f0f0e7;border-color:#2e3d2b;min-width:230px;font-size:13px;gap:30px}
.plan-help{font-size:11px;line-height:1.9;max-width:290px;color:#68765e;margin-top:17px}
.layout-guide :focus-visible{outline-color:#415b32}
.request-services{padding-top:15px}.request-services>p{font-size:13px;color:var(--muted);margin-bottom:10px}
.request-services>button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:18px 0;min-height:65px;text-align:right;font:400 27px/1.4 var(--display),serif}
.request-services i{font:22px Arial;color:var(--muted)}.request-services>small{display:block;font-size:11px;color:var(--muted);margin-top:22px}
.journey-heading h2{font-size:clamp(46px,6vw,85px)}.journey{padding-block:85px;align-items:center}
.contact-links a{transition:color .2s,background-color .2s}.contact-links a:hover{color:var(--accent)}
@media(hover:hover) and (pointer:fine){.layout-options button:hover{color:#263d26}.layout-choice .button:hover{background:#45573c;color:#fff}.request-services button:hover{color:var(--accent)}}
@media(max-width:1023px) and (min-width:768px){
 .nav nav{gap:17px}.nav nav a{font-size:11px}.nav .brand b{font-size:24px}
 html[data-motion=enhanced] .material-info{left:3%;width:29%;padding-right:0}
 html[data-motion=enhanced] .detail-tabs{gap:10px}.layout-body{gap:6%}.layout-options{gap:15px}.layout-description p{font-size:13px}
}
@media(max-width:767px){
 html{scroll-padding-top:78px}.nav{height:64px;padding-inline:5%;gap:12px}.nav .brand b{font-size:24px}.nav .brand>span{font-size:23px}.nav .button.small{font-size:10px;padding:9px 12px}
 .nav nav{top:64px;inset-inline:0;padding-inline:5%}.nav nav a{font-size:14px}
 html[data-motion=enhanced] .build-view{padding-top:82px}
 html[data-motion=enhanced] .build-heading h2{font-size:27px}
 html[data-motion=enhanced] .build-scene{width:100%;max-height:43svh}
 html[data-motion=enhanced] .project-pin{padding-top:82px}
 html[data-motion=enhanced] .section-heading{margin-bottom:17px}
 html[data-motion=enhanced] .section-heading h2{font-size:39px}
 html[data-motion=enhanced] .featured-image{max-height:none}
 .cinema{padding-block:70px 75px}.cinema-copy h2{font-size:46px}.cinema-copy>p:not(.eyebrow){font-size:12px}
 html[data-motion=enhanced] .material-folio{height:245svh}
 html[data-motion=enhanced] .material-pin{padding:82px 0 20px}
 html[data-motion=enhanced] .material-heading{width:90%;margin-bottom:16px}
 html[data-motion=enhanced] .material-heading h2{font-size:36px}
 html[data-motion=enhanced] .material-heading>p:last-child{display:none}
 html[data-motion=enhanced] .material-layout{display:flex;flex-direction:column;gap:13px;overflow:visible;align-items:stretch}
 html[data-motion=enhanced] .material-visual{position:relative;inset:auto;flex:1;min-height:0;width:100%;height:auto;overflow:hidden}
 html[data-motion=enhanced] .material-images img{width:72%;left:14%}
 html[data-motion=enhanced] .material-info{position:relative;left:auto;bottom:auto;width:90%;margin-inline:auto;background:none;padding:0;display:grid;grid-template-columns:1fr auto;gap:8px 14px}
 html[data-motion=enhanced] .detail-tabs{gap:14px;justify-content:space-between}
 html[data-motion=enhanced] .detail-tabs button{font-size:11px;min-width:0}
 html[data-motion=enhanced] .swatch{width:20px;height:20px}
 html[data-motion=enhanced] .detail-current{margin:0;min-height:66px}
 html[data-motion=enhanced] .detail-current h3{font-size:25px}
 html[data-motion=enhanced] .detail-current p{font-size:11px;max-width:none;margin-top:3px}
 html[data-motion=enhanced] .material-info>.button{min-width:0;font-size:11px;padding:10px 14px}
 html[data-motion=enhanced] .detail-quote{max-width:none;font-size:11px}
 html[data-motion=enhanced] .detail-scroll-hint{display:none}
 .layout-guide{padding-block:55px 60px}.layout-heading{display:block;margin-bottom:28px}.layout-heading h2{font-size:41px}.layout-heading p{font-size:12px;margin-top:15px}.layout-heading br{display:none}
 .layout-body{grid-template-columns:1fr;gap:28px}.plan-sheet-label{padding:17px 18px 0;font-size:10px}.plan-sheet figcaption{padding:0 18px 17px;font-size:10px}
 .layout-choice{padding:0}.layout-options{justify-content:space-between;gap:15px}.layout-options button{font-size:13px}
 .layout-description{margin-block:25px;min-height:140px}.layout-description h3{font-size:32px;margin-block:12px}.layout-description p{font-size:13px;max-width:none}.layout-choice .button{width:100%;min-width:0;justify-content:space-between}
 .plan-help{font-size:11px;max-width:none}.journey{padding-block:55px;gap:30px}.journey-heading h2{font-size:48px}.request-services{padding:0}.request-services>button{font-size:25px;padding-block:15px}
}
/* Short landscape viewports use free-flow sections instead of clipping essential controls. */
@media(max-height:480px){
 html[data-motion=enhanced] .hero{height:100svh;min-height:0}
 html[data-motion=enhanced] .hero-wordmark{top:80px;font-size:min(22vw,130px)}
 html[data-motion=enhanced] .hero h1{font-size:25px}
 html[data-motion=enhanced] .hero-inquiry p{display:none}
 html[data-motion=enhanced] .hero-bottom{padding-bottom:16px;gap:15px}
 html[data-motion=enhanced] .build-story,html[data-motion=enhanced] .project,html[data-motion=enhanced] .material-folio{height:auto;min-height:0}
 html[data-motion=enhanced] .build-sticky,html[data-motion=enhanced] .project-pin,html[data-motion=enhanced] .material-pin{position:relative;height:auto;min-height:0;overflow:visible}
 html[data-motion=enhanced] .build-view{height:auto;grid-template-rows:auto auto auto;padding-top:85px}
 html[data-motion=enhanced] .build-scene{width:88vw;height:auto;max-height:none;aspect-ratio:1672/941}
 html[data-motion=enhanced] .project-spread{flex:none;min-height:500px}
 html[data-motion=enhanced] .project-main{height:500px}.featured-image{max-height:none!important}
 html[data-motion=enhanced] .material-layout{height:580px;flex:none}
}
@media(prefers-reduced-motion:reduce){.plan-module,.nav,.contact-links a{transition:none}}
html[data-motion=reduced] .build-sticky{height:auto;min-height:0}
html[data-motion=reduced] .build-view{height:auto;display:flex;flex-direction:column;padding:90px 0 25px}
html[data-motion=reduced] .build-view::after{display:none}
html[data-motion=reduced] .build-heading{position:relative;inset:auto;order:0;padding:0}
html[data-motion=reduced] .build-scene{position:relative;inset:auto;order:1;height:auto;width:100%;aspect-ratio:1672/941;z-index:0;margin:25px 0}
html[data-motion=reduced] .build-footer{position:relative;inset:auto;order:2;margin:20px auto}
html[data-motion=reduced] .project,html[data-motion=reduced] .material-folio{padding-top:90px}
/* Continue the scroll composition through planning, request, questions and contact. */
html[data-motion=enhanced] .plan-sheet{transform-origin:50% 55%;will-change:transform}
html[data-motion=enhanced] .request-services>button,
html[data-motion=enhanced] .faq details,
html[data-motion=enhanced] .contact-links a{position:relative;border-bottom-color:transparent}
html[data-motion=enhanced] .request-services>button::after,
html[data-motion=enhanced] .faq summary::after,
html[data-motion=enhanced] .contact-links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line);transform:scaleX(var(--row-reveal,1));transform-origin:right;pointer-events:none}
html[data-motion=enhanced] .footer-wordmark{transform-origin:50% 100%;will-change:transform,opacity}
html[data-motion=enhanced] .faq summary{position:relative}
/* The terminal wordmark may translate without introducing horizontal page overflow. */
body{overflow-x:clip}
/* Contain RTL entrance travel locally without changing the sticky scene's ancestor. */
.journey,.faq,.contact{overflow:clip}
/* Planning receives a genuine visible scroll interval; the drawing stays on screen. */
@media(min-width:768px) and (min-height:481px){
 html[data-motion=enhanced] .layout-guide{height:190svh;padding:0;position:relative}
 html[data-motion=enhanced] .layout-guide>.wrap{position:sticky;top:0;height:100svh;padding:90px 0 24px;display:flex;flex-direction:column;justify-content:center}
 html[data-motion=enhanced] .layout-heading{margin-bottom:24px;flex-shrink:0}
 html[data-motion=enhanced] .layout-heading h2{font-size:clamp(38px,4.2vw,61px)}
 html[data-motion=enhanced] .layout-heading p{font-size:13px}
 html[data-motion=enhanced] .layout-body{flex:1;min-height:0;align-items:center}
 html[data-motion=enhanced] .plan-sheet svg{height:min(48svh,480px);width:100%}
 html[data-motion=enhanced] .plan-sheet-label{padding-top:15px}
 html[data-motion=enhanced] .plan-sheet figcaption{padding-bottom:15px}
 html[data-motion=enhanced] .layout-description{min-height:175px;margin-block:24px}
 html[data-motion=enhanced] .layout-description h3{font-size:36px}
 html[data-motion=enhanced] .layout-description p{font-size:13px}
}
/* v28: a readable, stationary drawing morphs between four scroll-selected plans. */
html[data-motion=enhanced] .layout-guide{height:300svh}
.plan-sheet{box-shadow:none}
.plan-label,.plan-island-label{font-size:22px}
.plan-label{fill:#4d5c45}
.plan-skip{border:0;background:none;padding:0;text-align:right;display:flex;align-items:center;gap:15px;cursor:pointer;color:#53644b;min-height:36px;max-width:none;font-size:12px}
.layout-choice .plan-skip{background:none;color:#53644b;border:0;min-width:0}
.film-position{font:12px/1.5 Arial;color:var(--muted);min-width:50px;text-align:center;align-self:center}
@media(max-width:767px){
 .cinema{padding-block:38px 45px}
 .cinema-layout{gap:20px}
 .cinema-copy{display:block}
 .cinema-copy h2{font-size:34px;line-height:1.4}
 .cinema-copy h2 br,.cinema-copy>p br{display:none}
 .cinema-copy>p:not(.eyebrow){font-size:12px;line-height:1.8;max-width:none;margin-top:8px}
 .cinema-copy .film-navigation{margin-top:18px;align-items:center;justify-content:flex-end;gap:10px}
 .film-grid{gap:18px;align-items:start;scrollbar-width:none;padding-bottom:0;overscroll-behavior-x:contain}
 .film-grid::-webkit-scrollbar{display:none}
 .film{margin:0!important;transform:none!important;flex:0 0 100%;width:100%;max-width:none;min-width:0}
 .film-player{height:min(55svh,440px);aspect-ratio:auto;display:flex;justify-content:center;background:#111712;box-shadow:none;overflow:hidden}
 .film-player video{width:100%;height:100%;object-fit:contain;aspect-ratio:auto;background:#111712}
 .film-play{font-size:12px;gap:12px}
 .film-play>span:first-child{width:54px;height:54px;font-size:17px}
 .film-caption{padding-top:11px;gap:12px}
 .film-caption h3{font-size:13px;line-height:1.7}
 .film-caption>span{font-size:11px}
 .request-services>p{font-size:12px}
 .journey-heading h2{font-size:38px}
 .journey-heading>p:not(.eyebrow){font-size:13px;line-height:1.9}
 .layout-heading h2{font-size:32px;line-height:1.3}
 .layout-heading p{font-size:11px;margin-top:6px;line-height:1.6}
 .plan-skip{min-height:24px;font-size:11px;line-height:1.6;justify-content:center}
}
@media(min-width:560px) and (max-width:767px){
 .film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
 .film{width:auto}
 .cinema-copy .film-navigation{display:none}
 .film-player{height:min(53svh,420px)}
}
@media(max-width:767px) and (min-height:481px){
 html[data-motion=enhanced] .layout-guide{height:300svh;padding:0}
 html[data-motion=enhanced] .layout-guide>.wrap{position:sticky;top:0;height:100svh;padding:80px 0 14px;display:flex;flex-direction:column;justify-content:start}
 html[data-motion=enhanced] .layout-heading{flex-shrink:0;margin-bottom:10px}
 html[data-motion=enhanced] .layout-body{display:grid;grid-template-columns:1fr;grid-template-rows:40px minmax(120px,1fr) auto 44px 24px;gap:8px;flex:1;min-height:0}
 html[data-motion=enhanced] .layout-choice{display:contents}
 html[data-motion=enhanced] .layout-options{grid-row:1;flex-wrap:nowrap;gap:10px;padding:0;align-items:stretch}
 html[data-motion=enhanced] .layout-options button{min-height:40px;padding:6px 0;font-size:12px;white-space:nowrap}
 html[data-motion=enhanced] .plan-sheet{grid-row:2;min-height:0;height:100%;display:flex;flex-direction:column;margin:0}
 html[data-motion=enhanced] .plan-sheet-label{padding:8px 12px 0;font-size:10px;flex-shrink:0}
 html[data-motion=enhanced] .plan-sheet svg{flex:1;min-height:0;height:0;width:100%}
 html[data-motion=enhanced] .plan-sheet figcaption{padding:3px 12px 6px;font-size:9px;line-height:1.5;flex-shrink:0}
 html[data-motion=enhanced] .layout-description{grid-row:3;min-height:0;margin:0;position:relative;padding:2px 0;text-align:right}
 html[data-motion=enhanced] #planNumber{display:none}
 html[data-motion=enhanced] .layout-description h3{font-size:24px;line-height:1.35;margin:0 0 3px}
 html[data-motion=enhanced] .layout-description p{font-size:11px;line-height:1.7;margin:0;max-width:none}
 html[data-motion=enhanced] #planQuote{grid-row:4;min-height:44px;font-size:12px;padding:10px 14px;width:100%;justify-content:space-between}
 html[data-motion=enhanced] .plan-skip{grid-row:5;margin:0;padding:0;width:100%;min-height:24px;justify-content:center;font-size:10px;line-height:1.5}
}
@media(max-height:480px){html[data-motion=enhanced] .layout-guide{height:auto}}
/* Preserve the scroll experience in the app's compact, zoomed preview as well. */
@media(min-height:481px) and (max-height:640px){
 html[data-motion=enhanced] .hero-wordmark{top:90px;font-size:min(25vw,160px)}
 html[data-motion=enhanced] .hero h1{font-size:28px}
 html[data-motion=enhanced] .hero-bottom{padding-bottom:22px;gap:15px}
 html[data-motion=enhanced] .build-view{padding:76px 0 10px;gap:8px}
 html[data-motion=enhanced] .build-heading .eyebrow{display:none}
 html[data-motion=enhanced] .build-heading h2{font-size:24px;line-height:1.3}
 html[data-motion=enhanced] .build-hint{font-size:10px;line-height:1.5;margin-top:5px}
 html[data-motion=enhanced] .build-current h3{font-size:22px}
 html[data-motion=enhanced] .build-current p{font-size:10px;line-height:1.6;margin-top:3px}
 html[data-motion=enhanced] .build-footer{gap:7px;padding-top:8px}
 html[data-motion=enhanced] .build-controls button{min-height:35px;font-size:11px;padding-top:5px}
 html[data-motion=enhanced] .build-scrub input{min-height:20px;height:20px}
 html[data-motion=enhanced] .build-scene{max-height:43svh}
 html[data-motion=enhanced] .project-pin{padding:76px 0 12px}
 html[data-motion=enhanced] .section-heading h2{font-size:32px}
 html[data-motion=enhanced] .material-pin{padding:76px 0 12px}
 html[data-motion=enhanced] .material-heading h2{font-size:30px}
 html[data-motion=enhanced] .material-heading{margin-bottom:10px}
 html[data-motion=enhanced] .layout-guide>.wrap{padding:76px 0 10px}
 html[data-motion=enhanced] .layout-heading{margin-bottom:8px}
 html[data-motion=enhanced] .layout-heading h2{font-size:28px;line-height:1.3}
 html[data-motion=enhanced] .layout-heading p{font-size:10px;line-height:1.5;margin-top:4px}
 html[data-motion=enhanced] .plan-sheet-label{padding-top:6px}
 html[data-motion=enhanced] .plan-sheet svg{max-height:43svh}
 html[data-motion=enhanced] .layout-description{min-height:0;margin-block:14px}
 html[data-motion=enhanced] .layout-description h3{font-size:28px;margin-block:8px}
 html[data-motion=enhanced] .layout-description p{font-size:12px;line-height:1.7}
 html[data-motion=enhanced] .layout-choice .button{min-height:40px;padding:9px 14px;font-size:12px}
 html[data-motion=enhanced] .plan-skip{font-size:11px;line-height:1.6;min-height:24px;margin-top:8px}
}
@media(max-width:767px) and (min-height:481px) and (max-height:640px){
 html[data-motion=enhanced] .layout-body{grid-template-rows:36px minmax(85px,1fr) auto 40px 22px;gap:6px}
 html[data-motion=enhanced] .layout-description{margin:0;padding:0}
 html[data-motion=enhanced] .layout-description h3{font-size:22px;margin:0 0 3px;line-height:1.3}
 html[data-motion=enhanced] .layout-description p{font-size:10px;line-height:1.6}
 html[data-motion=enhanced] .layout-options button{min-height:36px;font-size:11px}
 html[data-motion=enhanced] #planQuote{min-height:40px;font-size:11px}
 html[data-motion=enhanced] .plan-skip{margin:0;min-height:22px;font-size:9px}
 html[data-motion=enhanced] .plan-sheet svg{max-height:none}
}