/* Shared finishing pass: brand colours, readable glass and consistent interaction. */
:root{--muted:#606973}
.track-metrics dt,.breadcrumbs,.article-cover figcaption,.optional,.service-tabs button{color:#606973}
.service-tabs button[aria-selected=true]{color:var(--navy)}
.phone-app-header>div>span,.owner-phone-tour .owner-phone .portal-scene figcaption p{color:#596579}
.phone-app-nav button{color:#5d697a}
.phone-app-nav button[aria-pressed=true]{color:#122b4e}
input::placeholder,textarea::placeholder{color:#606973;opacity:1}
.consultation-panel :is(input,select,textarea),.contact-form-panel :is(input,select,textarea),#enquiry :is(input,select,textarea){border-color:#7d8791}
/* A neutral backing protects labels when a photograph or film is very bright. */
.collection .photo-open{background:linear-gradient(135deg,#ffffff0d,transparent),rgba(0,0,0,.64);text-shadow:none}
.service-photo:after{background:linear-gradient(transparent,rgba(0,0,0,.78))}
.site-header.is-scrolled:not(.is-over-dark):before,.inner-page .site-header:not(.is-over-dark):before{background:var(--glass-sheen),rgba(255,255,255,.76)}
.site-header.is-scrolled.is-over-dark:before{background:linear-gradient(135deg,#ffffff12,transparent 65%),rgba(12,16,24,.65)}
/* Larger hit areas do not change the size of the logos or navigation text. */
.site-header .logo,.footer-logo{min-height:44px;display:flex;align-items:center}
.site-header .main-nav a{min-height:36px;display:flex;align-items:center;position:relative}
.site-header .main-nav a:after{position:absolute;bottom:4px;left:0}
.property-details>a{min-height:32px;display:inline-flex;align-items:center}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:4px}
:where(button,a,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}
#consultation,#owner-app,#process,#calculator,#collection,#guest-services,#discover-dubai,#guest-faq{scroll-margin-top:16px}
/* Native details must also hide their content in browsers without ::details-content. */
details:not([open])>:not(summary){display:none}
@media(max-width:950px){
 /* Keep the menu in its own right-hand column on every page and scroll state. */
 .site-header,.inner-page .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;column-gap:12px}
 .site-header .logo{grid-column:1;grid-row:1;min-width:0;max-width:100%}
 .site-header .audience,.site-header .nav-cta{grid-column:2;grid-row:1;margin:0;justify-self:end}
 .site-header #menu{grid-column:3;grid-row:1;justify-self:end;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:14px;cursor:pointer;touch-action:manipulation}
 .site-header #menu>span{display:block;flex:none;width:22px;height:2px;border-radius:2px;transform-origin:center;transition:transform .2s ease}
 .site-header #menu[aria-expanded=true]>span:first-child{transform:translateY(4px) rotate(45deg)}
 .site-header #menu[aria-expanded=true]>span:last-child{transform:translateY(-4px) rotate(-45deg)}
 .site-header #menu[aria-expanded=true]{background:#ffffff18}
 .site-header .main-nav.open{top:calc(100% + 8px);left:0;right:0;width:auto;margin:0;padding:12px;gap:2px;max-height:calc(100dvh - 110px - env(safe-area-inset-bottom,0px));border-radius:20px}
 .site-header .main-nav.open a{min-height:48px;width:100%;padding:10px 14px;border-radius:12px;font-size:16px;line-height:1.4}
 .site-header .main-nav.open a:hover,.site-header .main-nav.open a:focus-visible{background:#8080801a;outline-offset:-3px}
 .home-header:has(.main-nav.open):before{opacity:1}
 .site-header.is-over-dark .main-nav.open{background:linear-gradient(135deg,#ffffff0a,transparent),rgba(12,16,24,.74)}
 .site-header:not(.is-over-dark) .main-nav.open{background:var(--glass-sheen),rgba(255,255,255,.9)}
}
@media(max-width:650px){
 .site-header,.inner-page .site-header{padding-inline:12px;column-gap:8px}
 .site-header .logo{width:112px}
 .home-header .audience :is(button,a){min-height:38px;padding-inline:8px}
 .inner-page .site-header .nav-cta{padding-inline:10px}
}
@media(max-width:360px){
 .site-header,.inner-page .site-header{padding-inline:8px;column-gap:6px}
 .site-header .logo{width:96px}
 .home-header .audience :is(button,a){padding-inline:6px;font-size:12px}
 .inner-page .site-header .nav-cta span{display:none}
}
@media(prefers-reduced-motion:reduce){.site-header #menu>span{transition:none}}
/* One site-wide preference keeps separate sections free of repeated controls. */
@media(max-width:700px){.footer-motion{grid-column:1;grid-row:2;justify-self:start}.footer-top-link{grid-column:2;grid-row:2}.footer-copyright{grid-column:1/-1;grid-row:3;max-width:none;padding-top:4px}}
html[data-motion=paused]{scroll-behavior:auto!important}
html[data-motion=paused] *,html[data-motion=paused] *:before,html[data-motion=paused] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=paused] .reveal.pending{opacity:1;transform:none}
@media(prefers-contrast:more){
 :root{--muted:#414b56;--glass-edge:#697481}
 .site-header:before,.site-header .main-nav.open{background:#f8f9f6!important}
 .site-header,.site-header.is-over-dark,.site-header.is-over-dark .main-nav.open{color:var(--navy);text-shadow:none}
 .site-header.is-over-dark .logo img{filter:brightness(0)}
 .home-header:not(.is-scrolled):before{opacity:1}
 .consultation-panel,.contact-form-panel{background:#fff}
}
/* Honour an explicit preference for opaque, high-legibility surfaces. */
@media(prefers-reduced-transparency:reduce){
 .site-header:before,.site-header.is-over-dark:before,.site-header .main-nav.open{background:#f5f5f5!important}
 .site-header,.site-header.is-over-dark,.site-header.is-over-dark .main-nav.open{color:var(--navy)!important;text-shadow:none}
 .site-header.is-over-dark .logo img{filter:brightness(0)}
 .collection .photo-open{background:#17202c;color:white}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .site-header:before,.site-header.is-over-dark:before,.site-header .main-nav.open{background:#f5f5f5!important}
 .site-header,.site-header.is-over-dark,.site-header.is-over-dark .main-nav.open{color:var(--navy)!important;text-shadow:none}
 .site-header.is-over-dark .logo img{filter:brightness(0)}
 .collection .photo-open{background:#17202c;color:white}
}
.accordion summary:focus-visible{outline-offset:-3px;border-radius:4px}
/* Keep small hero labels readable even when a bright frame passes underneath. */
.hero .hero-shade:after{content:'';position:absolute;inset:0 0 auto;height:175px;background:linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.62) 88px,transparent 175px);pointer-events:none}
.home-header .audience :is(a,button):is([aria-current=page],[aria-selected=true]){color:var(--navy);background:linear-gradient(145deg,#ffffffed,#ffffffc9);text-shadow:none}
.hero .hero-main #hero-link{background:var(--glass-sheen),rgba(255,255,255,.14);border-color:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(24px) saturate(110%);backdrop-filter:blur(24px) saturate(110%);box-shadow:var(--glass-depth);color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.45)}
.guest-page .guest-booking{background:var(--glass-sheen),rgba(0,0,0,.24);border-color:var(--glass-edge);box-shadow:var(--glass-depth);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:#fff;text-shadow:0 1px 6px #00000030}
.guest-page .guest-booking .button{background:var(--glass-sheen),rgba(255,255,255,.16);border:1px solid var(--glass-edge);color:#fff;box-shadow:var(--glass-depth);text-shadow:0 1px 6px #00000030}
.guest-page .guest-booking .button:hover{background:var(--glass-sheen),rgba(255,255,255,.26)}
.guest-booking label{color:#fff}
@media(prefers-reduced-transparency:reduce){.hero .hero-main #hero-link{background:#17202c}.guest-page .guest-booking{background:#17202c}.guest-page .guest-booking .button{background:#303944}}
.hero .hero-main #hero-link:hover{background:var(--glass-sheen),rgba(255,255,255,.24)}
@media(prefers-reduced-transparency:reduce){.hero .hero-main #hero-link:hover{background:#263142}}
