header{position:sticky;top:0;height:96px;margin:0;width:100%;padding-inline:3.5%;background:#f5f3ed;color:var(--ink);border-bottom:1px solid #dadcd1;box-shadow:none;backdrop-filter:none;transition:height .65s cubic-bezier(.22,1,.36,1),padding .65s,box-shadow .65s,border-radius .65s;z-index:60}
header .owners-link{color:var(--ink);border-color:#bfc4b6;background:transparent;font-size:10px;padding:10px}header .header-end{gap:18px}header .brand{transform-origin:center}header .en{color:var(--ink)}
header.is-sticky{position:fixed;top:12px;left:16px;right:16px;width:calc(100% - 32px);height:76px;margin:0;padding-inline:2.8%;background:#f5f3edf5;color:var(--ink);border:1px solid #d6d9cb;border-radius:5px;box-shadow:0 12px 35px #14231c16;backdrop-filter:blur(14px);animation:header-cinematic .7s cubic-bezier(.22,1,.36,1) both}
header.is-sticky+main{margin-top:96px}header.is-sticky .brand{transform:scale(.92)}
.cinematic-hero{min-height:calc(100svh - 96px);height:calc(100svh - 96px)}
@keyframes header-cinematic{from{opacity:.4;transform:translateY(-24px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}


@media(max-width:1100px){header{height:86px;padding-inline:5%}header .mobile-menu{display:flex}header.is-sticky{height:70px;top:8px;left:10px;right:10px;width:calc(100% - 20px);padding-inline:4%}header.is-sticky+main{margin-top:86px}.cinematic-hero{height:calc(100svh - 86px);min-height:calc(100svh - 86px)}body.menu-open header,body.menu-open header.is-sticky{background:#f5f3ed;backdrop-filter:none;animation:none;transform:none}header nav{padding-top:115px}header.is-sticky nav{inset:-8px -10px auto!important;width:100vw;height:100dvh!important}header .owners-link{font-size:10px!important}header .header-end{gap:12px}}
.portfolio-stage{top:96px;height:calc(100svh - 96px)}.portfolio-section+section{scroll-margin-top:96px}
@media(max-width:1100px){.portfolio-stage{top:86px;height:calc(100svh - 86px)}.portfolio-section+section{scroll-margin-top:86px}}
@media(prefers-reduced-motion:reduce){header,header.is-sticky{transition:none;animation:none}}

/* Use the full-screen menu on every screen size. */
header .mobile-menu{display:flex;align-items:center;gap:14px;color:var(--ink);min-width:80px}
header .owners-link{display:inline-flex}
header nav,header.is-sticky nav{position:fixed!important;inset:0!important;width:100vw;height:100dvh!important;padding:115px 12% 55px;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;background:#f5f3ed;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1),opacity .4s,visibility .7s;overflow:auto;z-index:61}
header nav.open,header.is-sticky nav.open{visibility:visible;opacity:1;clip-path:inset(0)}
header nav>a,header nav>.nav-label,header nav .development-toggle{font-size:clamp(26px,3.2vw,46px);font-weight:300;line-height:1.4}
body.menu-open header,body.menu-open header.is-sticky{position:fixed;top:0;left:0;right:0;width:100%;height:96px;background:#f5f3ed;border-radius:0;backdrop-filter:none;animation:none;transform:none;box-shadow:none;padding-inline:3.5%}
body.menu-open main{margin-top:96px}
@media(max-width:1100px){header .mobile-menu{min-width:28px}header nav,header.is-sticky nav{padding:110px 8% 45px}header nav>a,header nav>.nav-label,header nav .development-toggle{font-size:28px}body.menu-open header,body.menu-open header.is-sticky{height:86px;padding-inline:5%}body.menu-open main{margin-top:86px}}
@media(prefers-reduced-motion:reduce){header nav,header nav.open{transition:none}}
/* A compact navigation bar floats over a full-height film. */
header{position:absolute;top:18px;left:3%;right:3%;width:94%;height:76px;padding-inline:2.5%;margin:0;border:1px solid #ffffff80;border-radius:4px;background:#f5f3edf2;box-shadow:0 6px 24px #14231c0a}
header.is-sticky+main,body.menu-open main{margin-top:0}
.cinematic-hero{height:100svh;min-height:100svh;max-height:none}
@media(min-width:1101px){header:not(.is-sticky) .mobile-menu{display:none}header:not(.is-sticky) nav{position:static!important;inset:auto!important;width:auto;height:auto!important;max-height:none!important;display:flex!important;flex:1;flex-direction:row;align-items:center;justify-content:center;gap:clamp(11px,1.2vw,20px);padding:0;margin-inline:22px;overflow:visible;background:transparent;visibility:visible;opacity:1;clip-path:none;transition:none;white-space:nowrap;z-index:auto}header:not(.is-sticky) nav>a,header:not(.is-sticky) nav>.nav-label,header:not(.is-sticky) nav .development-toggle{font-size:12px!important;line-height:1.35!important;font-weight:400}header:not(.is-sticky) nav>a,header:not(.is-sticky) nav>.nav-development{opacity:1;transform:none}header:not(.is-sticky) nav>.nav-label{transform:none}header:not(.is-sticky) nav .nav-development{position:relative}header:not(.is-sticky) nav .development-menu{position:absolute;top:calc(100% + 25px);inset-inline-start:-15px;background:#f5f3ed;border:1px solid #d6d9cb;padding:14px;min-width:180px;box-shadow:0 14px 30px #14231c16}header:not(.is-sticky) nav .development-menu a{font-size:12px;padding:8px}header.is-sticky .mobile-menu{display:flex}header.is-sticky .header-end{margin-inline-start:auto}}
@media(min-width:1101px) and (max-width:1320px){header:not(.is-sticky) .owners-link{display:none}header:not(.is-sticky) nav{gap:12px;margin-inline:16px}header:not(.is-sticky) nav>a,header:not(.is-sticky) nav>.nav-label,header:not(.is-sticky) nav .development-toggle{font-size:11px!important}}
@media(max-width:1100px){header{height:70px;top:12px;left:3%;right:3%;width:94%;padding-inline:4%}.cinematic-hero{height:100svh;min-height:100svh}header.is-sticky+main,body.menu-open main{margin-top:0}}
/* Charcoal navigation; the sticky bar meets the viewport edges. */
header{background:#202a26f2;color:#f4f1e8;border-color:#ffffff20;box-shadow:0 8px 28px #00000012}
header .en,header .owners-link,header .mobile-menu,header .development-toggle{color:#f4f1e8}
header .owners-link{border-color:#d5bd8660;background:transparent}
header.is-sticky{top:0;left:0;right:0;width:100%;height:76px;border:0;border-bottom:1px solid #ffffff16;border-radius:0;background:#202a26fa;padding-inline:4%;box-shadow:0 7px 22px #00000014}
header nav,header.is-sticky nav,body.menu-open header,body.menu-open header.is-sticky{background:#202a26;color:#f4f1e8}
header nav>a:hover,header .development-toggle:hover{color:#d5bd86}
header nav .development-menu,header:not(.is-sticky) nav .development-menu{background:#27322d;color:#f4f1e8;border-color:#ffffff20}
header nav .development-menu a:hover{background:#ffffff0a;color:#d5bd86}
header .menu-lines i{background:#d5bd86}
@media(min-width:1101px){header:not(.is-sticky) nav{background:transparent;color:#f4f1e8}}
@media(max-width:1100px){header.is-sticky{top:0;left:0;right:0;width:100%;height:70px;padding-inline:5%}}
/* Warm limestone and olive echo the architecture and gold wordmark. */
header{background:#e9e1d2f2;color:#344239;border-color:#ffffff70;box-shadow:0 6px 24px #30291c0e}
header.is-sticky{background:#e9e1d2fa;color:#344239;border-bottom:1px solid #b7ac942e}
header .en,header .owners-link,header .mobile-menu,header .development-toggle{color:#344239}
header .owners-link{border-color:#a28b5d80}
header nav,header.is-sticky nav,body.menu-open header,body.menu-open header.is-sticky{background:#e9e1d2;color:#344239}
header nav>a:hover,header .development-toggle:hover{color:#816a3a}
header nav .development-menu,header:not(.is-sticky) nav .development-menu{background:#f2ecdf;color:#344239;border-color:#b7ac9445}
header nav .development-menu a:hover{background:#e5dac5;color:#705a30}
header .menu-lines i{background:#816a3a}
@media(min-width:1101px){header:not(.is-sticky) nav{background:transparent;color:#344239}}
/* Neutral stone keeps the gold mark distinct. */
header{background:#e5e6e4f2;color:#303533;border-color:#ffffff70}
header.is-sticky{background:#e5e6e4fa;color:#303533;border-bottom-color:#30353315}
header .en,header .owners-link,header .mobile-menu,header .development-toggle{color:#303533}
header .owners-link{border-color:#91969170}
header nav,header.is-sticky nav,body.menu-open header,body.menu-open header.is-sticky{background:#e5e6e4;color:#303533}
header nav .development-menu,header:not(.is-sticky) nav .development-menu{background:#f2f3f1;color:#303533;border-color:#30353320}
header nav .development-menu a:hover{background:#dcdeda;color:#6f623f}
@media(min-width:1101px){header:not(.is-sticky) nav{background:transparent;color:#303533}}
header .brand,html[lang^=en] header .brand{width:128px;height:41px;flex:0 0 128px}
header .brand img,html[lang^=en] header .brand img{width:149px;transform:translate(-11px,-22px)}
header.is-sticky .brand{transform:scale(.95)}

/* Secondary destinations move into the menu after scrolling. */
.sticky-menu-utilities{display:none}
header.is-sticky .header-end>.en,header.is-sticky .header-end>.owners-link{display:none}
header.is-sticky nav .sticky-menu-utilities{display:flex;align-items:center;flex-wrap:wrap;gap:28px;border-top:1px solid #30353325;margin-top:22px;padding-top:22px}
header nav .sticky-menu-utilities a{font-size:14px;line-height:1.5;letter-spacing:0;color:#60675e;padding:6px 0}
header nav .sticky-menu-utilities a:hover{color:#816a3a}
@media(max-width:1100px){header.is-sticky nav .sticky-menu-utilities{gap:22px;margin-top:18px;padding-top:18px}header nav .sticky-menu-utilities a{font-size:13px}}
header nav.open .sticky-menu-utilities{display:flex;align-items:center;gap:28px;border-top:1px solid #30353325;margin-top:22px;padding-top:22px}
/* A compact palette switch, available before and after scrolling. */
.menu-color-toggle{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #8d948c70;border-radius:50%;background:transparent;cursor:pointer;flex-shrink:0;transition:border-color .25s,background .25s}
.menu-color-swatch{width:13px;height:13px;border-radius:50%;background:linear-gradient(90deg,#26302a 50%,#c9b17b 50%);border:1px solid #81857440}
.menu-color-toggle:hover{background:#ffffff30}.menu-color-toggle:focus-visible{outline:2px solid #a0874e;outline-offset:3px}
html.menu-charcoal header{background:#202a26f2;color:#f4f1e8;border-color:#ffffff20}
html.menu-charcoal header.is-sticky{background:#202a26fa;color:#f4f1e8;border-bottom:1px solid #ffffff16}
html.menu-charcoal header .en,html.menu-charcoal header .owners-link,html.menu-charcoal header .mobile-menu,html.menu-charcoal header .development-toggle{color:#f4f1e8}
html.menu-charcoal header .owners-link{border-color:#d5bd8660}
html.menu-charcoal header nav,html.menu-charcoal header.is-sticky nav,html.menu-charcoal body.menu-open header,html.menu-charcoal body.menu-open header.is-sticky{background:#202a26;color:#f4f1e8}
html.menu-charcoal header nav>a:hover,html.menu-charcoal header .development-toggle:hover{color:#d5bd86}
html.menu-charcoal header nav .development-menu,html.menu-charcoal header:not(.is-sticky) nav .development-menu{background:#27322d;color:#f4f1e8;border-color:#ffffff20}
html.menu-charcoal header nav .development-menu a:hover{background:#ffffff0a;color:#d5bd86}
html.menu-charcoal header .menu-lines i{background:#d5bd86}
html.menu-charcoal header nav .sticky-menu-utilities{border-color:#d5bd8635}
html.menu-charcoal header nav .sticky-menu-utilities a{color:#d9ceaf}
html.menu-charcoal .menu-color-toggle{border-color:#d5bd8660}
html.menu-charcoal .menu-color-swatch{background:linear-gradient(90deg,#e5e6e4 50%,#303533 50%)}
@media(min-width:1101px){html.menu-charcoal header:not(.is-sticky) nav{background:transparent;color:#f4f1e8}}
@media(max-width:750px){header .header-end{gap:8px}.menu-color-toggle{width:26px;height:26px}.menu-color-swatch{width:11px;height:11px}}