@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/bodoni-moda-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/plex-mono-500.woff2") format("woff2"); }

:root {
  --abyss: #0d1f2d;
  --tide: #17384d;
  --chalk: #f3f6f4;
  --salt: #9fb4bf;
  --lagoon: #7fe3d6;
  --glass: rgba(13, 31, 45, .58);
  --glass-strong: rgba(13, 31, 45, .92);
  --hair: rgba(243, 246, 244, .22);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --helm: 84px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--abyss); color: var(--chalk); font-family: var(--ui); overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }

#pano { position: fixed; inset: 0; touch-action: none; transform-origin: 50% 55%; }
#progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; overflow: hidden; }
#progress::after { content: ""; display: block; height: 100%; width: 30%; background: var(--lagoon); animation: sweep 1s ease-in-out infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* ---------- icons (mask images, coloured by currentColor) ---------- */
i { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; flex: none; }
#btnAreas i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.4'/%3E%3C/svg%3E"); }
#btnBack i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
#btnInquire i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.6-2.3 1.4a11.5 11.5 0 0 0 6 6l1.4-2.3 4.6 1.8V19a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 3 6.2 2 2 0 0 1 5 4z'/%3E%3C/svg%3E"); }
#btnMenu i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }
.mi > i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.disc i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
#btnRotate[aria-pressed="true"] i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='6.2' y='5' width='4' height='14' rx='1.2'/%3E%3Crect x='13.8' y='5' width='4' height='14' rx='1.2'/%3E%3C/svg%3E"); }
#btnRotate[aria-pressed="false"] i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M8.2 5.6v12.8a.8.8 0 0 0 1.2.7l10-6.4a.8.8 0 0 0 0-1.4l-10-6.4a.8.8 0 0 0-1.2.7z'/%3E%3C/svg%3E"); }
#btnMap i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14'/%3E%3C/svg%3E"); }
#btnPhotos i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='1.8'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E"); }
#btnFull i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }
#btnPrev i, #lbPrev i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 6-6 6 6 6'/%3E%3C/svg%3E"); }
#btnNext i, #lbNext i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 6 6 6-6 6'/%3E%3C/svg%3E"); }

/* ---------- top bar ---------- */
#top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: calc(14px + var(--safe-t)) 18px 0; pointer-events: none; }
#top > * { pointer-events: auto; }
.dock { display: flex; align-items: center; gap: 3px; height: 54px; padding: 0 8px 0 8px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 0; text-align: left; border-radius: 999px; }
#brand img { width: 38px; height: 38px; }
#brand span { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
#brandName { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.05; letter-spacing: .01em; text-wrap: balance; }
#brandTag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--salt); }
.sep { width: 1px; height: 26px; margin: 0 6px 0 2px; background: var(--hair); }
.dock-btn { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.dock-btn i { width: 18px; height: 18px; }
.dock-btn:hover { background: rgba(243, 246, 244, .13); }
.dock-btn[aria-expanded="true"] { background: var(--lagoon); color: var(--abyss); }
#topRight { display: flex; align-items: center; gap: 8px; }
#tools { display: flex; gap: 6px; }
.tool { white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, color .2s, border-color .2s; }
.tool:hover { background: var(--glass-strong); }
.tool.icon { position: relative; width: 44px; padding: 0; justify-content: center; }
[data-tip]::after { content: attr(data-tip); position: absolute; padding: 5px 10px; border-radius: 8px; white-space: nowrap; font: 500 12px/1.2 var(--ui); letter-spacing: .01em; color: var(--chalk);
  background: var(--glass-strong); border: 1px solid var(--hair); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; }
.tool[data-tip]::after { top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); }
@media (hover: hover) {
  .tool[data-tip]:hover::after, .tool[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}
.tool[aria-pressed="true"], .tool[aria-expanded="true"] { background: var(--lagoon); color: var(--abyss); border-color: var(--lagoon); }

.tool.primary { height: 44px; padding: 0 20px 0 15px; font-weight: 600; background: var(--lagoon); color: var(--abyss); border-color: var(--lagoon); }
.tool.primary:hover, .tool.primary[aria-expanded="true"] { background: var(--chalk); border-color: var(--chalk); }
#btnMenu { height: 44px; padding: 0 16px 0 19px; }
a.tool { text-decoration: none; }
#btnWebsite { position: relative; }
#btnWebsite i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7V19a1.5 1.5 0 0 1-1.5 1.5h-3.5V15h-7v5.5H5A1.5 1.5 0 0 1 3.5 19z'/%3E%3C/svg%3E"); }

#btnRotate.tool[aria-pressed] { background: var(--glass); color: var(--chalk); border-color: var(--hair); }
#btnRotate.tool[aria-pressed]:hover { background: var(--glass-strong); }
.tool.lang { width: 44px; height: 44px; padding: 0; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; }

/* ---------- slim scrollbars ---------- */
#areasBody, #menuList, #intro, #galGrid, #lbStrip { scrollbar-width: thin; scrollbar-color: rgba(127, 227, 214, .5) transparent; }
@supports selector(::-webkit-scrollbar) {
  #areasBody, #menuList, #intro, #galGrid, #lbStrip { scrollbar-width: auto; scrollbar-color: auto; }
  #areasBody::-webkit-scrollbar, #menuList::-webkit-scrollbar, #intro::-webkit-scrollbar, #galGrid::-webkit-scrollbar { width: 6px; height: 6px; }
  #areasBody::-webkit-scrollbar-track, #menuList::-webkit-scrollbar-track, #intro::-webkit-scrollbar-track, #galGrid::-webkit-scrollbar-track { background: rgba(243, 246, 244, .05); border-radius: 999px; margin: 10px 0; }
  #areasBody::-webkit-scrollbar-thumb, #menuList::-webkit-scrollbar-thumb, #intro::-webkit-scrollbar-thumb, #galGrid::-webkit-scrollbar-thumb {
    background: rgba(243, 246, 244, .38); border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; }
  #areasBody::-webkit-scrollbar-thumb:hover, #menuList::-webkit-scrollbar-thumb:hover, #intro::-webkit-scrollbar-thumb:hover, #galGrid::-webkit-scrollbar-thumb:hover { background: var(--lagoon); background-clip: padding-box; }
}

/* ---------- inquire card ---------- */
.pop { position: fixed; top: calc(76px + var(--safe-t)); right: 18px; z-index: 35; width: min(348px, calc(100vw - 24px)); padding: 24px 24px 22px; border-radius: 22px;
  background: var(--glass-strong); border: 1px solid var(--hair); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: 100% 0; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.pop.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.pop-kicker { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--lagoon); }
.pop h2 { margin: 0 0 16px; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 27px; line-height: 1.05; }
.pop-phone { display: block; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 31px; line-height: 1.1; letter-spacing: .01em; color: var(--chalk); text-decoration: none; transition: color .2s; }
.pop-phone:hover { color: var(--lagoon); }
.pop-phone + .pop-actions { margin-top: 20px; }
.pop-actions { display: flex; gap: 8px; }
.pop .close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; font-size: 26px; }

/* ---------- language picker ---------- */
/* Anchored under #btnLang and centred on it, not the top-right corner .pop normally uses - app.js
   sets left/top inline (positionLangMenu()) each time it opens, so right must not fight that. */
.pop-lang { width: min(216px, calc(100vw - 24px)); padding: 16px 12px; right: auto; transform-origin: 50% 0; transform: translateY(-8px) scale(.97); }
.pop-lang .pop-kicker { margin: 0 8px 8px; }
.lang-list { display: flex; flex-direction: column; gap: 2px; }
.lang-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 14px; text-align: left; transition: background .2s; }
.lang-row:hover, .lang-row:focus-visible { background: rgba(243, 246, 244, .07); }
.lang-code { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(243, 246, 244, .08);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--chalk); transition: background .2s, color .2s; }
.lang-name { flex: 1; font-size: 15px; font-weight: 500; letter-spacing: .005em; }
.lang-row[aria-pressed="true"] .lang-code { background: var(--lagoon); color: var(--abyss); }
.lang-row[aria-pressed="true"] .lang-name { color: var(--lagoon); }

/* ---------- menu drawer ---------- */
.panel.panel-right { left: auto; right: 0; width: min(340px, 100vw); border-right: 0; border-left: 1px solid var(--hair); transform: translateX(102%); }
.panel.panel-right.open { transform: none; }
#menu > header { align-items: center; padding: 18px 14px 4px 22px; }
#menu h2 { margin: 0; font-size: 26px; }
#menuList { flex: 1; overflow-y: auto; padding: 8px 12px; -webkit-overflow-scrolling: touch; }
.mi { display: flex; align-items: center; gap: 13px; width: 100%; padding: 8px 10px 8px 8px; text-align: left; border-radius: 14px; transition: background .2s; }
.mi[hidden] { display: none; }
.mi .ico, .menu-contact .ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(243, 246, 244, .08); transition: background .2s, color .2s; }
.mi .ico i, .menu-contact .ico i { width: 20px; height: 20px; }
.mi .lbl { flex: 1; font-size: 16px; font-weight: 500; letter-spacing: .005em; }
.mi .chev { width: 16px; height: 16px; color: var(--salt); transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .2s; }
.mi:hover, .mi:focus-visible { background: rgba(243, 246, 244, .07); }
.mi:hover .ico { background: var(--lagoon); color: var(--abyss); }
.mi:hover .chev { color: var(--chalk); transform: translateX(2px); }
.mi[aria-expanded="true"] .chev { transform: rotate(90deg); }
.mi-sub { margin: 0 0 6px 30px; padding: 2px 0 6px 14px; border-left: 1px solid var(--hair); }
.mi-sub button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 5px 6px 5px 0; text-align: left; border-radius: 8px; font-size: 14px; font-weight: 500; }
.mi-sub button:hover { background: rgba(243, 246, 244, .07); }
.mi-sub img { width: 52px; height: 32px; object-fit: cover; border-radius: 6px; background: var(--tide); }
.mi-sub span { flex: 1; }
.mi-sub small { display: none; }
.menu-mode { display: none; margin: 4px 20px 14px; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(243, 246, 244, .07); border: 1px solid var(--hair); }
.menu-mode button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--salt); transition: background .25s, color .25s; }
.menu-mode button[aria-pressed="true"] { background: var(--chalk); color: var(--abyss); }
.menu-mode i { width: 18px; height: 18px; }
.menu-contact { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px calc(16px + var(--safe-b)); border-top: 1px solid var(--hair); background: rgba(23, 56, 77, .5); }
.menu-kicker { display: block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lagoon); }
.menu-row { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.menu-row .ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--lagoon); color: var(--abyss); }
.menu-row .ico i { width: 17px; height: 17px; }
.menu-email { font-size: 15px; color: var(--salt); transition: color .2s; }
.menu-phone { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.1; color: var(--chalk); transition: color .2s; }
.menu-row:hover .menu-email, .menu-row:hover .menu-phone { color: var(--lagoon); }
.mi[data-act="start"] .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10.2 8.4 5 3.6-5 3.6z'/%3E%3C/svg%3E"); }
.mi[data-act="areas"] .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.4'/%3E%3C/svg%3E"); }
.mi[data-act="aerial"] .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19 9 9.5l4 5.5 3-4 5 8z'/%3E%3Ccircle cx='17' cy='6' r='1.6'/%3E%3C/svg%3E"); }
.mi[data-act="galleries"] .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='1.8'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E"); }
.mi[data-act="plan"] .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.mi[data-act="share"] .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5.5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='18.5' r='2.5'/%3E%3Cpath d='m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1'/%3E%3C/svg%3E"); }
.mi[data-act="welcome"] .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.mi .chev { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
#menuPhone .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.6-2.3 1.4a11.5 11.5 0 0 0 6 6l1.4-2.3 4.6 1.8V19a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 3 6.2 2 2 0 0 1 5 4z'/%3E%3C/svg%3E"); }
#menuEmail .ico i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
/* Welcome-screen Day/Night start buttons - mode is picked once, here, and fixed for the visit. */
.disc-day i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E"); }
.disc-night i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E"); }
#mDay i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E"); }
#mNight i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E"); }

/* ---------- scene title ---------- */
#scene { position: fixed; left: 22px; bottom: calc(22px + var(--safe-b)); z-index: 10; max-width: min(560px, calc(100vw - var(--helm) - 60px)); }
#sceneChapter { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lagoon); }
#sceneName { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(34px, 5.2vw, 60px); line-height: 1; letter-spacing: -.005em; text-shadow: 0 2px 24px rgba(13, 31, 45, .6); }
#stepper { display: flex; align-items: center; gap: 4px; margin-top: 16px; }
#stepper button { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#stepper button:hover:not(:disabled) { background: var(--glass-strong); }
#stepper button:disabled { opacity: .35; cursor: default; }
#stepper i { width: 16px; height: 16px; }

/* ---------- day / night + zoom ---------- */
#nav { position: fixed; right: 18px; bottom: calc(18px + var(--safe-b)); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#zoom { display: flex; height: 36px; border-radius: 999px; overflow: hidden; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#zoom button { width: 52px; font-size: 20px; line-height: 1; touch-action: none; }
#zoom button:hover { background: var(--glass-strong); }
#zoom button + button { border-left: 1px solid var(--hair); }

/* ---------- hotspots: a small white-silver badge (bead ring and star, after the logo) with pulse rings, and a thumbnail card on hover ---------- */
.hs { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; cursor: pointer; }
/* Two solid rings spread out from the badge and fade, half a cycle apart */
.hs::before, .hs::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--chalk); pointer-events: none; opacity: 0; animation: hsPulse 3s ease-out infinite; }
.hs::after { animation-delay: 1.5s; }
.hs-card { z-index: 2; }
.hs-pin { position: absolute; z-index: 1; inset: 3px; border-radius: 50%; background: linear-gradient(145deg, #fff, #c5ced2); border: 1.5px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(0, 0, 0, .45), inset 0 -3px 5px rgba(13, 31, 45, .18); transition: background .2s; }
.hs-pin svg { display: block; width: 100%; height: 100%; fill: var(--tide); transition: fill .2s; }
.hs-beads { transform-origin: 24px 24px; animation: hsBeads 24s linear infinite; }
.hs-star { transform-origin: 24px 24px; animation: hsGlint 4s ease-in-out infinite; }
.hs:hover .hs-pin, .hs:focus-visible .hs-pin { background: var(--lagoon); }
.hs:hover::before, .hs:hover::after, .hs:focus-visible::before, .hs:focus-visible::after { background: var(--lagoon); }
.hs:hover .hs-pin svg, .hs:focus-visible .hs-pin svg { fill: var(--abyss); }
@keyframes hsPulse { 0% { scale: 1; opacity: .55; } 100% { scale: 2.6; opacity: 0; } }
@keyframes hsBeads { to { transform: rotate(360deg); } }
@keyframes hsGlint { 0%, 78%, 100% { scale: 1; } 89% { scale: 1.25; } }
@media (prefers-reduced-motion: reduce) { .hs::before, .hs::after, .hs-beads, .hs-star { animation: none; } }
.hs:focus-visible { outline: none; }

.hs-card { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 196px; padding: 6px 6px 12px; border-radius: 16px; text-align: left;
  background: var(--glass-strong); border: 1px solid var(--hair); box-shadow: 0 22px 46px rgba(0, 0, 0, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), 10px) scale(.9); transform-origin: 50% 100%; pointer-events: none;
  transition: opacity .22s, transform .34s cubic-bezier(.2, .8, .2, 1); }
.hs-card::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; rotate: 45deg; background: var(--abyss); border: solid var(--hair); border-width: 0 1px 1px 0; }
.hs-card .thumb { position: relative; display: block; overflow: hidden; border-radius: 11px; aspect-ratio: 16 / 9; background: var(--tide); }
.hs-card .thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.hs-card .thumb::after { content: ""; position: absolute; inset: 5px; border-radius: 7px; border: 1px dashed rgba(243, 246, 244, .55); }
.hs-card b { display: block; margin: 10px 8px 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1; }
.hs-card small { display: block; margin: 6px 8px 0; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lagoon); }
.hs:hover .hs-card, .hs:focus-visible .hs-card { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px)), 0) scale(1); }
.hs:hover .hs-card .thumb img, .hs:focus-visible .hs-card .thumb img { transform: scale(1); }
.hs.flip .hs-card { bottom: auto; top: calc(100% + 8px); transform-origin: 50% 0; transform: translate(calc(-50% + var(--dx, 0px)), -10px) scale(.9); }
.hs.flip:hover .hs-card, .hs.flip:focus-visible .hs-card { transform: translate(calc(-50% + var(--dx, 0px)), 0) scale(1); }
.hs.flip .hs-card::after { bottom: auto; top: -6px; rotate: 225deg; }
@media (hover: none) {
  .hs-card { width: auto; padding: 5px 12px; border-radius: 999px; opacity: 1; transform: translate(-50%, 0); bottom: calc(100% + 4px); }
  .hs-card .thumb, .hs-card small, .hs-card::after { display: none; }
  .hs-card b { margin: 0; font-size: 15px; white-space: nowrap; }
  .hs.flip .hs-card { top: auto; bottom: calc(100% + 4px); transform: translate(-50%, 0); }
}

/* ---------- speed-shift transition ---------- */
#trailCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; display: none; }
#trailCanvas.on { display: block; }
#trailCanvas.fade { opacity: 0; transition: opacity .8s ease-out; }
#scene.reveal #sceneChapter, #scene.reveal #sceneName, #scene.reveal #stepper { animation: titleIn 1s cubic-bezier(.2, .7, .2, 1) both; }
#scene.reveal #sceneName { animation-delay: .12s; }
#scene.reveal #stepper { animation-delay: .24s; }
@keyframes titleIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- panels ---------- */
.panel { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: min(400px, 100vw); display: flex; flex-direction: column; padding-top: var(--safe-t);
  background: var(--glass-strong); border-right: 1px solid var(--hair); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: translateX(-102%); visibility: hidden; transition: transform .35s cubic-bezier(.3, .7, .2, 1), visibility 0s .35s; }
.panel.open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
.panel.panel-wide { width: min(640px, 100vw); }
.panel > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 6px 22px; }
.panel > header img { width: 100px; height: auto; margin-left: -6px; }
.panel-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel > header .panel-brand img { width: 38px; height: 38px; margin-left: 0; flex: none; }
.panel-brand span { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel h2 { margin: 6px 0 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 30px; }
.close { width: 40px; height: 40px; font-size: 30px; line-height: 1; border-radius: 50%; }
.close:hover { background: var(--hair); }
#areasBody { overflow-y: auto; padding: 4px 18px calc(24px + var(--safe-b)) 22px; -webkit-overflow-scrolling: touch; }
.chapter { margin-top: 22px; }
.chapter h3 { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--lagoon); }
.route { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--hair); }
.stop { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px 6px 0; text-align: left; border-radius: 8px; }
.stop::before { content: ""; position: absolute; left: -18px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--abyss); border: 1px solid var(--salt); }
.stop .thumb { position: relative; flex: none; width: 76px; height: 46px; }
.stop img { width: 76px; height: 46px; object-fit: cover; border-radius: 6px; background: var(--tide); display: block; }
.stop b { flex: 1; font-size: 14px; font-weight: 500; }
.stop:hover { background: rgba(243, 246, 244, .07); }
.stop.current::before { background: var(--lagoon); border-color: var(--lagoon); box-shadow: 0 0 0 4px rgba(127, 227, 214, .22); }
.stop.current b { color: var(--lagoon); }
/* Gallery badge: a small corner marker, only shown (see updateAreaBadges in js/app.js) on a
   thumbnail whose place actually has a gallery in the current day/night mode. */
.gal-badge { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; border-radius: 7px;
  background: var(--lagoon); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); display: grid; place-items: center; }
.gal-badge[hidden] { display: none; }
.gal-badge::before { content: ""; width: 14px; height: 14px; background: var(--abyss);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='1.8'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='1.8'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E") center/contain no-repeat; }
#planWrap { margin: 8px 18px 24px; }
#planWrap img { width: 100%; border-radius: 10px; background: #fff; }

/* ---------- welcome screen ---------- */
body.intro-on #topLeft, body.intro-on #btnMap, body.intro-on #btnPhotos, body.intro-on #btnRotate, body.intro-on #btnFull, body.intro-on #btnMode, body.intro-on #scene, body.intro-on #nav, body.intro-on .hs { visibility: hidden; }
#intro { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 84px 24px 32px; overflow-y: auto;
  background: radial-gradient(ellipse 75% 65% at 50% 46%, rgba(13, 31, 45, .6), rgba(13, 31, 45, .9)); }
.intro-inner { display: flex; flex-direction: column; align-items: center; width: min(660px, 100%); margin: auto; text-align: center; }
.intro-inner > * { animation: rise .95s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
.intro-inner > :nth-child(2) { --i: 1; } .intro-inner > :nth-child(3) { --i: 2; } .intro-inner > :nth-child(4) { --i: 3; } .intro-inner > :nth-child(5) { --i: 4; } .intro-inner > :nth-child(6) { --i: 5; }
.intro-logo { width: clamp(140px, 21vh, 220px); height: auto; margin-bottom: 20px; }
.intro-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--lagoon); }
.intro-eyebrow::before, .intro-eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
#introLead { margin: 0; max-width: 21em; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; letter-spacing: .003em; color: var(--chalk); text-wrap: balance; }
#introLead em { font-style: italic; color: var(--lagoon); }
/* The /night route (see NIGHT_ROUTE in app.js): the client's idea of a visibly distinct night
   theme, not just a different welcome photo. --lagoon (the site's one accent colour - hotspot
   pins, focus rings, active states, kickers, the 360 pill, all of it) is a dusk-lantern gold here
   instead of the day tour's teal, so the whole night experience re-themes from this one line -
   every existing rule that reads var(--lagoon) picks it up automatically, nothing else to touch.
   Chosen deliberately less saturated than the welcome text's own #ffc104 (see below): that brighter
   gold is the one hero moment, this quieter one is the everyday UI accent underneath it. */
:root.night-route { --lagoon: #e3b24d; }
/* A few places bake the teal in as a literal rgba() instead of var(--lagoon) (needed for alpha
   blending), so they need their own night-route line with the new gold's own RGB (227, 178, 77). */
.night-route #areasBody, .night-route #menuList, .night-route #intro, .night-route #galGrid, .night-route #lbStrip {
  scrollbar-color: rgba(227, 178, 77, .5) transparent; }
.night-route .stop.current::before { box-shadow: 0 0 0 4px rgba(227, 178, 77, .22); }
.night-route #pan::before { background: linear-gradient(90deg, rgba(227, 178, 77, .34), rgba(227, 178, 77, .7)); }
.night-route .cta.big::before { background: linear-gradient(90deg, rgba(166, 128, 56, .65), var(--lagoon)); }
.night-route .cta.big:hover { box-shadow: 0 18px 46px rgba(227, 178, 77, .28); }
.night-route .cta.big.loading .lbl { color: var(--abyss); }
.night-route .disc-night { border-color: rgba(227, 178, 77, .55); }
/* .cta:hover (the base class) sets background directly, not via var(--lagoon) at the declaration
   site in a way the cascade alone would re-theme - needs its own override, or the button still
   flashes the old teal on hover before a click starts the fill. Scoped to this one button, not
   every .cta site-wide (the Inquire card's "Call now" etc. should stay teal everywhere). */
.night-route #introStartDay:hover { background: var(--lagoon); }
/* The welcome screen's own eyebrow and highlighted words keep the brighter, separate #ffc104 -
   this is the one spot that's intentionally NOT the quieter --lagoon gold above. */
.night-route .intro-eyebrow, .night-route #introLead em { color: #ffc104; }
.intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.cta, .ghost { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cta { height: 50px; padding: 0 30px; border-radius: 999px; font-size: 16px; font-weight: 600; background: var(--chalk); color: var(--abyss); transition: background .25s, transform .2s, box-shadow .25s; }
.cta:hover { background: var(--lagoon); transform: translateY(-1px); }
.ghost { height: 50px; padding: 0 24px; color: var(--chalk); border-radius: 999px; font-size: 15px; font-weight: 500; border: 1px solid var(--hair); background: var(--glass); transition: background .2s, border-color .2s; }
.ghost:hover { background: var(--glass-strong); border-color: rgba(243, 246, 244, .5); }
.cta.small, .ghost.small { height: 42px; padding: 0 18px; font-size: 14px; }
/* .cta.big and .ghost.big are only ever used together, as the welcome screen's paired Day/Night
   start buttons - sized, weighted and animated identically so neither reads as more "primary" than
   the other; only fill (solid vs outline) tells them apart. */
.cta.big, .ghost.big { position: relative; overflow: hidden; isolation: isolate; height: 62px; gap: 18px; padding: 0 10px 0 32px; font-size: 17px; min-width: 210px; }
.cta.big { box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.cta.big:hover { box-shadow: 0 18px 46px rgba(127, 227, 214, .28); }
.ghost.big:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, .3); }
/* Loading fill: the button that was clicked fills left-to-right with real load progress, exactly
   the same mechanism as the #pan 360 pill (same --p variable convention), while the *other* button
   is disabled so a second click mid-load can't start a second scene load. Day fills with the site's
   dark navy (--tide) since the pill's teal barely shows against the white .cta - night keeps teal,
   which already reads clearly against its dark .ghost fill. */
.cta.big::before, .ghost.big::before { content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .5s ease .1s; }
.cta.big::before { background: linear-gradient(90deg, rgba(23, 56, 77, .65), var(--tide)); }
.ghost.big::before { background: linear-gradient(90deg, rgba(127, 227, 214, .38), rgba(127, 227, 214, .75)); }
.cta.big.loading::before, .ghost.big.loading::before { opacity: 1; transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
.cta.big.loading .lbl { color: var(--chalk); transition: color .2s ease .1s; }
.cta.big:not(.loading)[disabled], .ghost.big:not(.loading)[disabled] { opacity: .4; pointer-events: none; }
/* isolate + a fully opaque background (no rgba here) keeps the disc's own colour completely
   unaffected by the fill sweeping behind it, at any progress amount, in either button. */
.disc { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--abyss); color: var(--chalk); transition: background .25s, color .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.disc::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(243, 246, 244, .5); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.disc i { width: 20px; height: 20px; }
/* The night button sits on a dark, translucent .ghost fill, so its disc gets a lighter tint and a
   teal-tinted icon instead of the day button's dark-on-light disc, or it would flatten into the
   button behind it - solid (not translucent) so the fill sweep can never show through it either. */
.disc-night { background: #1c3a47; border: 1px solid rgba(127, 227, 214, .45); color: var(--lagoon); }
.cta.big:hover .disc, .ghost.big:hover .disc { transform: scale(1.08); }
.cta.big:hover .disc::before, .ghost.big:hover .disc::before { transform: rotate(180deg); }
.intro-hint { margin: 28px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--salt); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 70; padding: 10px 16px; border-radius: 10px; max-width: 92vw; font-family: var(--mono); font-size: 12px; background: var(--glass-strong); border: 1px solid var(--hair); }
#crosshair { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; z-index: 5; pointer-events: none; border: 2px solid #f33; border-radius: 50%; }

/* ---------- photo gallery: bento grid + large viewer ---------- */
#lightbox { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: radial-gradient(ellipse 80% 60% at 50% 0%, #143247 0%, #0b1a26 70%); animation: galIn .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes galIn { from { opacity: 0; } to { opacity: 1; } }
#lightbox > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(16px + var(--safe-t)) 18px 12px 28px; }
#lightbox header p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin: 0; min-width: 0; }
#lbTitle { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(30px, 4.4vw, 52px); line-height: 1; letter-spacing: -.005em; }
#lbCount { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lagoon); }
#lbClose { flex: none; width: 46px; height: 46px; font-size: 32px; line-height: 1; border-radius: 50%; border: 1px solid var(--hair); background: var(--glass); transition: background .2s, color .2s, transform .3s; }
#lbClose:hover { background: var(--chalk); color: var(--abyss); transform: rotate(90deg); }

.bento { --gap: 12px; --col: 320px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 24px calc(28px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.bento[hidden] { display: none; }
.bento.gal-loading { display: flex; align-items: center; justify-content: center; }
.gal-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(243, 246, 244, .2); border-top-color: var(--lagoon); animation: galSpin .8s linear infinite; }
@keyframes galSpin { to { transform: rotate(360deg); } }
.bcols { display: flex; align-items: flex-start; gap: var(--gap); }
.bcol { display: flex; flex-direction: column; gap: var(--gap); flex: none; }
.tile { position: relative; flex: none; overflow: hidden; border-radius: 18px; background: var(--tide); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); cursor: zoom-in;
  animation: tileIn .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(243, 246, 244, .16); background: linear-gradient(180deg, rgba(13, 31, 45, 0) 55%, rgba(13, 31, 45, .5)); opacity: 0; transition: opacity .4s; pointer-events: none; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 3px; }
@keyframes tileIn { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }

#lbStage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
#lbStage[hidden] { display: none; }
#lbImg { display: block; width: auto; height: auto; max-width: calc(100% - 168px); max-height: calc(100% - 24px); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
#lbImg.in { animation: viewIn .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes viewIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
#lbStrip { display: flex; gap: 8px; justify-content: safe center; padding: 6px 18px calc(16px + var(--safe-b)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#lbStrip[hidden] { display: none; }
#lbStrip::-webkit-scrollbar { display: none; }
#lbStrip button { flex: none; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: .5; transition: opacity .25s, border-color .25s, transform .25s; }
#lbStrip button img { display: block; height: 100%; width: auto; }
#lbStrip button:hover { opacity: .9; }
#lbStrip button.current { opacity: 1; border-color: var(--lagoon); transform: translateY(-2px); }
#lbPrev, #lbNext { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); background: var(--glass); transition: background .2s, color .2s; }
#lbPrev { left: 16px; } #lbNext { right: 16px; }
#lbPrev:hover, #lbNext:hover { background: var(--chalk); color: var(--abyss); }
@media (max-width: 1024px) { .bento { --col: 260px; padding-left: 18px; padding-right: 18px; } }
@media (max-width: 700px) {
  #lightbox > header { padding: calc(12px + var(--safe-t)) 12px 8px 18px; }
  .bento { --gap: 8px; --col: 150px; padding: 4px 12px calc(20px + var(--safe-b)); }
  .tile { border-radius: 14px; }
  #lbImg { max-width: calc(100% - 16px); max-height: calc(100% - 16px); }
  #lbStrip { gap: 6px; padding: 4px 12px calc(12px + var(--safe-b)); }
  #lbStrip button { height: 48px; border-radius: 8px; }
  #lbPrev, #lbNext { width: 44px; height: 44px; margin-top: -22px; background: rgba(13, 31, 45, .72); }
  #lbPrev { left: 10px; } #lbNext { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- centre look left / right ---------- */
#pan { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 12px; padding: 5px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#pan button { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--chalk); color: var(--abyss); touch-action: none;
  transition: background .2s, transform .15s; }
#pan button:hover { background: var(--lagoon); }
#pan button:active { transform: scale(.94); }
#pan i { width: 22px; height: 22px; }
#panL i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
#panR i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.pan-label { min-width: 46px; text-align: center; font-size: 18px; font-weight: 500; letter-spacing: .02em; }
body.intro-on #pan { visibility: hidden; }


#top button { pointer-events: auto; }
.tool.lang { flex: none; }

/* ---------- responsive ---------- */
/* Tablet and small laptops */
@media (max-width: 1024px) {
  #top { padding: calc(12px + var(--safe-t)) 14px 0; }
  .dock-btn span { display: none; }
  .dock-btn { width: 38px; padding: 0; justify-content: center; }
  #scene { left: 18px; max-width: calc(50vw - 100px); }
  #sceneName { font-size: clamp(30px, 4.6vw, 44px); }
  .pop { right: 14px; }
}
@media (max-width: 860px) {
  .tool.primary span, #btnMenu span { display: none; }
  .tool.primary, #btnMenu { width: 44px; padding: 0; justify-content: center; }
}

/* Phones: logo left; quick controls and menu top right; place name bottom left; Areas bottom right */
@media (max-width: 700px) {
  #top { padding: calc(12px + var(--safe-t)) 12px 0; align-items: center; }
  #topLeft { display: contents; }
  .sep, #btnBack, #btnInquire, #pan, #nav { display: none; }
  #brand { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100vw - 250px); padding: 5px 12px 5px 6px; border-radius: 26px; background: var(--glass); border: 1px solid var(--hair);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  #brand img { width: 34px; height: 34px; flex: none; }
  #brandName { font-size: 16px; }
  #brandTag { display: none; }
  #topRight { gap: 6px; flex: none; }
  #tools { gap: 6px; }
  .tool.icon, .tool.lang, #btnMenu, #btnWebsite { width: 40px; height: 40px; padding: 0; justify-content: center; }
  /* Photos and Areas sit together at the bottom right: Photos first, Areas last */
  #btnAreas, #btnPhotos { position: fixed; right: 14px; bottom: calc(22px + var(--safe-b)); z-index: 10; width: 54px; height: 54px; padding: 0; justify-content: center;
    background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
  #btnPhotos { right: calc(14px + 54px + 10px); }
  #btnAreas i, #btnPhotos i { width: 24px; height: 24px; }
  .menu-mode { display: flex; }
  #scene { left: 14px; bottom: calc(22px + var(--safe-b)); max-width: calc(100vw - 96px); }
  body:has(#btnPhotos:not([hidden])) #scene { max-width: calc(100vw - 160px); }
  #sceneName { font-size: 34px; }
  #stepper { margin-top: 12px; }
  #stepper button span { display: none; }
  #stepper button { padding: 0 11px; }
  .pop { top: calc(66px + var(--safe-t)); right: 12px; }
  .panel.panel-right { width: min(360px, 100vw); }
  #intro { padding: 76px 22px 40px; }
  .intro-eyebrow::before, .intro-eyebrow::after { width: 18px; }
  .cta.big, .ghost.big { height: 56px; padding-left: 26px; font-size: 16px; min-width: 0; }
  #lbImg { max-width: calc(100% - 16px); }
  #lbPrev, #lbNext { width: 40px; height: 40px; margin-top: -20px; background: rgba(13, 31, 45, .7); }
}
@media (max-width: 380px) {
  #sceneName { font-size: 29px; }
  #topRight, #tools { gap: 3px; }
  .tool.icon, .tool.lang, #btnMenu, #btnWebsite { width: 36px; height: 36px; }
  #brand { max-width: calc(100vw - 214px); gap: 6px; padding: 4px 10px 4px 5px; }
  #brand img { width: 30px; height: 30px; }
  #brandName { font-size: 14.5px; }
}
@media (max-width: 340px) {
  .tool.icon, .tool.lang, #btnMenu, #btnWebsite { width: 34px; height: 34px; }
  #brand { max-width: calc(100vw - 200px); }
  #brand img { width: 26px; height: 26px; }
  #brandName { font-size: 13px; }
}
/* Landscape phones and very short screens */
@media (max-height: 470px) and (orientation: landscape) {
  #brandTag, #sceneChapter, #zoom, #stepper { display: none; }
  #sceneName { font-size: 26px; }
  #scene { bottom: calc(16px + var(--safe-b)); }
  #nav { bottom: calc(14px + var(--safe-b)); }
}

/* day / night button (top right): the icon shows the mode you are in */
:root[data-mode="day"] #btnMode i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E"); }
:root[data-mode="night"] #btnMode i { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E"); }
@media (max-width: 700px) { #btnMode { display: none; } }

/* loading progress: the whole 360 pill fills while a new place loads, then returns to normal */
#pan { overflow: hidden; isolation: isolate; }
#pan::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(127, 227, 214, .34), rgba(127, 227, 214, .7));
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .6s ease .1s; }
#pan.loading::before { opacity: 1; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .1s; }

/* the edge gradients are gone, so the text carries its own soft shadow for readability */
#sceneName, #sceneChapter, #brandName, #brandTag { text-shadow: 0 1px 3px rgba(13, 31, 45, .65), 0 2px 22px rgba(13, 31, 45, .55); }