/* Clear glass: the page supplies the colour; neutral light, blur and edges supply depth. */
:root{
 --glass-clear:rgba(255,255,255,.16);
 --glass-panel:rgba(255,255,255,.24);
 --glass-reading:rgba(255,255,255,.76);
 --glass-edge:rgba(255,255,255,.64);
 --glass-blur:blur(24px) saturate(110%);
 --glass-depth:inset 0 1.5px 1px rgba(255,255,255,.8),inset 1px 0 1px rgba(255,255,255,.3),inset 0 -1px 1px rgba(0,0,0,.09),0 1px 3px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.10);
 --glass-sheen:radial-gradient(ellipse at var(--glass-x,18%) var(--glass-y,0%),rgba(255,255,255,.26),transparent 65%),linear-gradient(135deg,rgba(255,255,255,.13),transparent 45%,rgba(255,255,255,.035));
}

/* The glass layer is independent of the menu so both can blur the page beneath. */
.site-header,.inner-page .site-header{
 top:12px;left:16px;width:calc(100% - 32px);height:max(68px,calc(var(--site-header-height) - 24px));
 padding:0 28px;gap:22px;background:transparent;color:var(--navy);border:0;border-radius:25px;box-shadow:none;
 -webkit-backdrop-filter:none;backdrop-filter:none;
}
.site-header.is-scrolled,.site-header:has(.main-nav.open){background:transparent}
.inner-page .site-header{left:auto;margin:12px auto;position:sticky}
.site-header:before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 background:var(--glass-sheen),rgba(255,255,255,.26);
 border:1px solid var(--glass-edge);box-shadow:var(--glass-depth);
 -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
/* Leave the hero opening unframed; reveal the floating pane after scrolling. */
.home-header:before{opacity:1;transition:opacity .28s ease}
.home-header:not(.is-scrolled):before{opacity:0}
@media(prefers-reduced-motion:reduce){.home-header:before{transition:none}}
.site-header .logo img{filter:brightness(0);opacity:.9}
.site-header .main-nav a,.site-header .nav-cta,.site-header .audience :is(button,a){color:inherit}
.site-header #menu>span{background:currentColor}
.site-header #menu{color:inherit}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:currentColor}
.site-header.is-over-dark{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.18)}
.site-header.is-over-dark:before{background:var(--glass-sheen),rgba(255,255,255,.06)}
.site-header.is-over-dark .logo img{filter:none;opacity:1}
.home-header .audience{gap:0;padding:4px;margin:0;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.35);border-radius:18px;box-shadow:inset 0 1px 1px #ffffff5c,inset 0 -1px 1px #0000000d}
.home-header .audience :is(button,a){border:0;border-radius:14px;min-height:39px;transition:background .2s,box-shadow .2s;color:inherit}
.home-header .audience :is(button,a):is([aria-selected=true],[aria-current=page]){color:inherit;background:linear-gradient(145deg,#ffffff80,#ffffff33);box-shadow:inset 0 1px 1px #ffffffe0,0 2px 8px #00000016;text-shadow:none;font-weight:600}
.home-header .audience :is(button,a):hover:not(:is([aria-selected=true],[aria-current=page])){background:#ffffff1f}
.site-header .nav-cta{border:1px solid #ffffff70;border-radius:16px;background:var(--glass-sheen),#ffffff14;box-shadow:inset 0 1px 1px #ffffff70,0 3px 10px #0000000c}
.site-header .nav-cta:hover{background:var(--glass-sheen),#ffffff38}

/* Floating controls keep their backdrop visible, including the hero film. */
.hero .hero-main #hero-link,.destination-copy .line-link,.destination-play .film-symbol,
.collection .photo-label,.collection .photo-open,.story-photo-index,
.dialog-close,.gallery-arrow,.owner-app-actions .owner-access,.whatsapp-float{
 background:var(--glass-sheen),var(--glass-clear);border:1px solid var(--glass-edge);
 -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
 box-shadow:var(--glass-depth);
}
.hero .hero-main #hero-link{color:#fff;border-radius:20px;text-shadow:0 1px 6px #00000030;background:var(--glass-sheen),rgba(255,255,255,.10)}
.hero .hero-main #hero-link:hover{background:var(--glass-sheen),rgba(255,255,255,.19)}
.destination-copy .line-link{color:#fff;padding:13px 18px;border-radius:18px;text-shadow:0 1px 6px #00000030}
.destination-play .film-symbol{border-radius:50%;color:#fff}
.collection .photo-label,.story-photo-index{border-radius:13px;color:#111;background:var(--glass-sheen),rgba(255,255,255,.54)}
.collection .photo-open{padding:9px 14px;border-radius:15px;color:#fff;background:var(--glass-sheen),rgba(0,0,0,.13);text-shadow:0 1px 5px #00000070}
.dialog-close,.gallery-arrow{border-radius:50%;color:#111;background:var(--glass-sheen),rgba(255,255,255,.58)}
.owner-app-actions .owner-access{color:white;border-radius:18px;background:var(--glass-sheen),var(--glass-clear)}
.owner-app-actions .owner-access:hover{background:var(--glass-sheen),#ffffff30}
.whatsapp-float{background:var(--glass-sheen),rgba(255,255,255,.35);color:#111;text-shadow:none}
.whatsapp-float img{filter:brightness(0)}
.whatsapp-float.is-over-dark{background:var(--glass-sheen),rgba(255,255,255,.10);color:#fff}
.whatsapp-float.is-over-dark img{filter:brightness(0) invert(1)}
.whatsapp-float:hover{background:var(--glass-sheen),#ffffff55}
.whatsapp-label{background:var(--glass-reading);color:#111;border:1px solid var(--glass-edge);box-shadow:var(--glass-depth);border-radius:12px}

/* Clear segmented controls: elevation, rather than a coloured fill, marks selection. */
.collection .filters{display:inline-flex;gap:4px;padding:5px;max-width:100%;border:1px solid #ffffff9c;border-radius:20px;background:var(--glass-sheen),var(--glass-clear);box-shadow:var(--glass-depth)}
.collection .filters button{min-height:40px;padding:7px 13px;border:0;border-radius:15px;color:#46505b;white-space:nowrap;transition:background .2s,box-shadow .2s}
.collection .filters .active{color:#111;font-weight:600;background:linear-gradient(145deg,#ffffffb3,#ffffff55);box-shadow:inset 0 1px 1px #fff,0 2px 7px #00000017}
.collection .filters button:not(.active):hover{color:#111;background:#ffffff45}
.story-step-nav{gap:12px}
.story-step-nav a{padding-left:12px;padding-right:12px;border:1px solid #ffffffa8;border-radius:14px;background:var(--glass-sheen),var(--glass-clear);box-shadow:inset 0 1px 1px #fff9,0 4px 12px #00000007}
.story-step-nav a[aria-current="step"]{color:#111;background:var(--glass-sheen),#ffffff65;border-color:#ffffffd9;box-shadow:var(--glass-depth);font-weight:600}
.story-step-nav a:hover:not([aria-current="step"]){background:#ffffff45;border-color:#ffffffc4}

/* Readable content on clear panels. No navy or ivory is mixed into the material. */
.calculator,.owner-visibility{background-image:none}
.calculator-result,.owner-tour,.contact-form-panel,.consultation-panel{
 border:1px solid var(--glass-edge);border-radius:26px;background:var(--glass-sheen),var(--glass-panel);
 box-shadow:var(--glass-depth);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.calculator-result{color:var(--navy)}
.calculator-result :is(.estimate-selection,.calc-total small,.estimate-metrics span,.estimate-daily,.estimate-method>div,.calc-disclaimer,#calc-status){color:#505966}
.calculator-result .estimate-daily strong{color:var(--navy)}
.calculator-result :is(.estimate-metrics,.estimate-method){border-color:#00000024}
.calculator-result .estimate-method summary i:before,.calculator-result .estimate-method summary i:after{background:currentColor}
.calculator-result .estimate-method summary:focus-visible{outline-color:var(--navy)}
.owner-tour{color:#fff;background:var(--glass-sheen),rgba(255,255,255,.055)}
.owner-tour .portal-tour-bar{background:transparent;border-radius:26px 26px 0 0;border-color:#ffffff26}
.owner-tour .portal-screen-viewport{border-radius:14px;background:white}
.owner-tour .portal-tour-footer,.owner-tour .portal-human-support{border-color:#ffffff26}
.owner-tour :is(.portal-platform,.portal-scene figcaption p,.portal-human-support>p:first-child,.portal-human-support>p:last-child,.portal-tour-footer p){color:#ffffffbd}
.owner-tour .portal-caption-number{border-color:#ffffff55;border-radius:7px}
.owner-feature-nav{gap:8px}
.owner-feature-nav button,.owner-feature-nav button:first-child{border:1px solid #ffffff2e;border-radius:15px;color:#ffffffbd;background:#ffffff05;box-shadow:inset 0 1px 1px #ffffff24}
.owner-feature-nav small{color:#ffffffb8}
.owner-feature-nav button[aria-selected=true]{color:#fff;background:var(--glass-sheen),#ffffff15;border-color:#ffffff94;box-shadow:inset 0 1px 1px #ffffffb3,0 4px 15px #00000014}
.owner-feature-nav button[aria-selected=true]:after{left:12px;right:12px;width:calc(100% - 24px);bottom:0;background:#fff}
.owner-feature-nav button:hover{color:#fff;background:#ffffff18}
.owner-tour :is(button,[role=tabpanel]):focus-visible{outline-color:#fff}
.portal-tour-toggle{color:#fff;border:1px solid #ffffff59;border-radius:13px;background:var(--glass-sheen),#ffffff0d;box-shadow:inset 0 1px 1px #ffffff7d,0 3px 10px #00000012}
.portal-tour-toggle:hover{background:#ffffff26}
.calc-field select,.consultation-panel input,.consultation-panel select,.consultation-panel textarea,
.contact-form-panel input,.contact-form-panel select,.contact-form-panel textarea,#enquiry input,#enquiry select,#enquiry textarea{
 background-color:rgba(255,255,255,.42);border-color:#00000029;border-radius:12px;box-shadow:inset 0 1px 2px #00000008,0 1px 0 #ffffffb3;
}
select option{background:#fff;color:#111}
.button.copper,.closing .button{border:1px solid #ffffffb3;border-radius:18px;color:var(--navy);background:var(--glass-sheen),rgba(255,255,255,.20);box-shadow:var(--glass-depth)}
.button.copper:hover,.closing .button:hover{background:var(--glass-sheen),#ffffff65}

/* The image stays sharp inside the glass viewer; its surrounding page is blurred. */
dialog{background:var(--glass-sheen),var(--glass-reading);border:1px solid var(--glass-edge);border-radius:26px;box-shadow:var(--glass-depth),0 28px 90px #00000038;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
dialog::backdrop{background:rgba(0,0,0,.26);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gallery-caption{background:transparent}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero .hero-main #hero-link,.owner-access,.button.copper,.destination-copy .line-link{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
 .hero .hero-main #hero-link:hover,.owner-access:hover,.button.copper:hover,.destination-copy .line-link:hover{transform:translateY(-2px);box-shadow:var(--glass-depth),0 16px 32px #0000000f}
}
@media(max-width:1150px) and (min-width:951px){.site-header{padding-left:22px;padding-right:22px;gap:16px}.site-header .main-nav{gap:17px}.site-header .main-nav a{font-size:13px}.site-header .logo{width:145px}.site-header .audience :is(button,a){padding-left:13px;padding-right:13px}}
@media(max-width:950px){
 .site-header,.inner-page .site-header{padding-left:20px;padding-right:20px;border-radius:22px}
 .site-header .main-nav.open{top:calc(100% + 10px);left:0;right:0;max-height:calc(100svh - var(--site-header-height) - 30px);border:1px solid var(--glass-edge);border-radius:22px;padding:25px;background:var(--glass-sheen),var(--glass-reading);color:var(--navy);box-shadow:var(--glass-depth);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);text-shadow:none}
 .site-header.is-over-dark .main-nav.open{background:var(--glass-sheen),rgba(0,0,0,.16);color:#fff}
}
@media(max-width:650px){
 :root{--glass-blur:blur(18px) saturate(110%)}
 .site-header,.inner-page .site-header{left:12px;top:10px;width:calc(100% - 24px);height:68px;padding:0 14px;gap:10px;border-radius:22px}
 .inner-page .site-header{left:auto;margin:10px auto}
 .home-header .logo{width:112px}
 .site-header .nav-cta{padding:9px 11px;font-size:11px}
 .home-header .audience{padding:3px;border-radius:15px}
 .home-header .audience :is(button,a){padding:7px 10px;min-height:36px;font-size:13px;border-radius:12px}
 .collection .filters{padding:4px;gap:2px}
 .collection .filters button{padding:7px 10px;font-size:13px}
 .story-step-nav{gap:7px}
 .story-step-nav a{padding-left:7px;padding-right:5px;border-radius:12px}
 .owner-feature-nav{gap:6px}
 .owner-tour,.contact-form-panel,.consultation-panel,.calculator-result{border-radius:20px}
 .owner-tour .portal-tour-bar{border-radius:20px 20px 0 0}
 .owner-feature-nav button,.owner-feature-nav button:first-child{border-radius:12px}
}
@media(max-width:360px){.home-header .logo{width:92px}.home-header .audience :is(button,a){padding:7px 8px;font-size:12px}.site-header,.inner-page .site-header{gap:8px;padding:0 12px}.inner-page .site-header .logo{width:108px}}

/* A neutral solid material replaces transparency when it is unavailable or unwanted. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root{--glass-clear:#f5f5f5;--glass-panel:#f5f5f5;--glass-reading:#f5f5f5}
 .site-header:before,.site-header.is-over-dark:before,.site-header .main-nav.open,.site-header.is-over-dark .main-nav.open{background:#f5f5f5}
 .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)}
 .owner-tour{background:#242424}
 .hero .hero-main #hero-link,.collection .photo-open,.destination-copy .line-link,.destination-play .film-symbol,.owner-app-actions .owner-access,.whatsapp-float,.whatsapp-float.is-over-dark{background:#f5f5f5;color:#111;text-shadow:none}
 .whatsapp-float.is-over-dark img{filter:brightness(0)}
}
@media(prefers-reduced-transparency:reduce){
 :root{--glass-clear:#f5f5f5;--glass-panel:#f5f5f5;--glass-reading:#f5f5f5;--glass-blur:none}
 .site-header:before,.site-header.is-over-dark:before,.site-header .main-nav.open,.site-header.is-over-dark .main-nav.open{background:#f5f5f5}
 .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)}
 .owner-tour{background:#242424}
 .hero .hero-main #hero-link,.collection .photo-open,.destination-copy .line-link,.destination-play .film-symbol,.owner-app-actions .owner-access,.whatsapp-float,.whatsapp-float.is-over-dark{background:#f5f5f5;color:#111;text-shadow:none}
 .whatsapp-float.is-over-dark img{filter:brightness(0)}
 dialog::backdrop{background:#000000b3;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){.collection .filters button,.home-header .audience :is(button,a){transition:none}}
@media(max-width:360px){.inner-page .site-header .nav-cta span{display:none}.inner-page .site-header #menu{padding:8px 4px}}
