:root{
  --ink:#FFCA95; --ink2:#FFF1E2;
  --cream:#2a2318; --muted:#9a8e7b;
  --gold:#eece8f; --gold-deep:#9c7a3c; --gold-soft:rgba(238,206,143,.22);
  --panel:rgba(255,255,255,.32); --line:rgba(42,35,24,.14);
  --serif:"DM Serif Text",Georgia,serif; /* matches JRNY website brand style */
  --sans:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ink);color:#4a4237;font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
[hidden]{display:none!important}

/* ---------- Liquid Glass (POI dock + info card ONLY) -----------------------
   Exact recipe (LiquidGlassCard, blurIntensity=xl, glowIntensity=sm, shadowIntensity=md):
   bend  = backdrop-blur(24px) of what's actually behind the panel — NO fill
   face  = outer drop-shadow + soft white glow — NO fill
   edge  = inset white highlight (glass bezel catching light) — NO fill
   Zero background colour — the "glass" is pure blur + shadow, exactly as specified.
   Scoped to these two surfaces only; every other frosted control in the UI keeps
   the simpler var(--panel) light-glass treatment it already had.
   IMPORTANT: backdrop-filter must live on .dock__panel/.poi-card THEMSELVES, not
   on a nested child span. Both are position:absolute|relative with an explicit
   z-index/isolation, which unconditionally creates a stacking context — and a
   stacking context blocks a DESCENDANT's backdrop-filter from sampling anything
   behind it (it only ever sees empty space inside the panel). An element's OWN
   backdrop-filter is unaffected by a stacking context it establishes itself, so
   applying it directly on the panel is what actually lets it reach the real
   splat/iframe content behind it. The SVG turbulence distortion filter can't be
   layered on top of that for the same reason: `filter` on the very element that
   also contains the text warps the text/buttons along with the backdrop, so it's
   dropped here — the blur alone is the effect that matters. */

/* ---------- Soft-focus vignette (landing + main experience) ----------------
   Real blur, not a colour wash: one element, backdrop-filter blur directly on
   itself (see note above), masked with a radial gradient that's fully
   transparent through the centre (sharp, untouched) and fades to fully opaque
   toward the edges (full blur). Frames the whole view on all four sides so the
   centre reads as the focal point and softens the splat reconstruction's rough
   edges. Sits above the splat/iframe (z-index:2) but below the dock/cards/UI.
   Same glass recipe as the dock/info card so the whole UI reads as one
   material: identical blur(24px) + the same soft white inset highlight (here a
   wide inset glow rather than a 3px bezel — the mask confines it to the edges).
   ALL interactive UI must live in the parent document, above this layer — the
   viewer iframe's native control bar is hidden (an iframe is one flat layer;
   nothing inside it can be raised above a parent overlay) and replaced by the
   .v-ctl proxy chips below, which drive the viewer's buttons directly. */
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 0 90px rgba(255,255,255,.32);
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 46%,transparent 38%,black 80%);
  mask-image:radial-gradient(ellipse 75% 75% at 50% 46%,transparent 38%,black 80%)}
/* viewer control proxies — same chip format as the gallery toggle, top layer */
.v-ctl{position:absolute;z-index:7;display:flex;align-items:center;justify-content:center;
  bottom:max(16px,env(safe-area-inset-bottom));width:44px;height:44px;border-radius:50%;color:var(--cream);
  background:var(--panel);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line);box-shadow:0 4px 10px rgba(0,0,0,.14);transition:border-color .2s,background .2s}
.v-ctl:hover{border-color:var(--gold)}
#vPlay{left:max(16px,env(safe-area-inset-left))}
#vInfo{right:max(16px,env(safe-area-inset-right))}
#vPlay .ic-pause{display:none}
#vPlay.is-playing .ic-pause{display:block}
#vPlay.is-playing .ic-play{display:none}
/* timeline scrubber — slim glass pill above the play/gallery chips, mirrors
   the viewer's tour progress (streamed via postMessage) and scrubs it back */
.v-timeline{position:absolute;z-index:7;left:max(16px,env(safe-area-inset-left));
  bottom:calc(max(16px,env(safe-area-inset-bottom)) + 58px);width:min(210px,30vw);height:20px;
  display:flex;align-items:center;padding:0 10px;border-radius:999px;cursor:pointer;
  background:var(--panel);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line);box-shadow:0 4px 10px rgba(0,0,0,.14);touch-action:none;
  transition:opacity .25s ease}
/* only on screen while the tour is actually playing (or being scrubbed) */
.v-timeline.is-hidden{opacity:0;pointer-events:none}
.v-timeline__track{position:relative;width:100%;height:3px;border-radius:2px;background:rgba(42,35,24,.18)}
.v-timeline__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--gold-deep)}
.v-timeline__dot{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#fff;border:1px solid var(--gold-deep);box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-size:14px;font-weight:500;letter-spacing:.02em;
  padding:13px 22px;border-radius:999px;transition:transform .15s ease,background .2s ease,border-color .2s ease,opacity .2s}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--gold);color:#43120f;font-weight:600}
.btn--primary:hover{background:#D9B876}
.btn--ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-shadow:0 1px 3px rgba(0,0,0,.25)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.28)}
.btn--sm{padding:9px 16px;font-size:13px}
.btn--block{width:100%;justify-content:center;padding:15px}
.btn--icon{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);justify-content:center;font-size:24px;line-height:0;padding:0;color:var(--cream);background:var(--panel);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
.btn__dot{width:7px;height:7px;border-radius:50%;background:#43120f;box-shadow:0 0 0 4px var(--gold-soft)}

/* ---------- landing (centered, high-impact visual) ---------- */
.landing{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(22px,5vw,56px)}
.landing__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center}
/* swimming-pool water shader — sits over the hero photo (which stays as the
   no-WebGL / reduced-motion fallback), under the frosted scrim + content */
.landing__water{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block}
.landing__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 0 90px rgba(255,255,255,.32);
  -webkit-mask-image:radial-gradient(ellipse 60% 92% at center,transparent 58%,black 92%);
  mask-image:radial-gradient(ellipse 60% 92% at center,transparent 58%,black 92%)}
.hero__logo{width:clamp(80px,11vw,120px);height:auto;margin:0 auto 14px;
  filter:drop-shadow(0 6px 30px rgba(74,58,34,.3))}
.hero__wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6.5vw,58px);
  color:#fff;letter-spacing:.24em;text-indent:.24em;   /* balance the tracking */
  line-height:1;text-shadow:0 4px 26px rgba(0,0,0,.28),0 1px 6px rgba(0,0,0,.18)}
.hero__tagline{text-transform:uppercase;letter-spacing:.38em;text-indent:.38em;font-size:12px;
  color:rgba(255,255,255,.9);margin:14px 0 clamp(30px,5vh,46px);
  text-shadow:0 1px 8px rgba(0,0,0,.3)}
/* how-to tips — boxless editorial strip: icon over micro-label, hairline
   dividers; premium restraint instead of pill containers */
.howto{list-style:none;display:flex;flex-direction:row;justify-content:center;align-items:stretch;
  gap:0;margin:0 auto clamp(28px,5vh,44px);max-width:1000px;text-align:center}
.howto__item{display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:6px clamp(18px,2.6vw,34px);border-left:1px solid rgba(255,255,255,.35)}
.howto__item:first-child{border-left:0}
.howto__icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.howto__text{max-width:11em;font-size:11px;line-height:1.6;text-transform:uppercase;
  letter-spacing:.16em;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.howto__text strong{color:#fff;font-weight:700}
@media (max-width:700px){
  .howto{display:grid;grid-template-columns:1fr 1fr;gap:22px 0;max-width:420px}
  .howto__item{border-left:0;padding:0 10px}
  .howto__item:nth-child(2n){border-left:1px solid rgba(255,255,255,.35)}
}

.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,4vw,34px)}
.brand{display:flex;align-items:center;gap:.5em;font-weight:600;letter-spacing:.16em;font-size:15px;
  text-shadow:0 1px 3px rgba(0,0,0,.25),0 1px 12px rgba(0,0,0,.12)}
.brand__name{color:#fff} .brand__x{color:rgba(255,255,255,.8);font-weight:400} .brand__jrny{color:rgba(255,255,255,.72)}
.brand--sm{font-size:12px;letter-spacing:.14em}

.hero{max-width:640px;position:relative;display:flex;flex-direction:column;align-items:center}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.34em;font-size:12px;color:var(--gold-deep);margin-bottom:18px}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(64px,16vw,150px);line-height:.92;letter-spacing:.01em}
.hero__sub{font-size:clamp(16px,2.4vw,20px);line-height:1.55;color:#4a4237;margin:20px 0 30px;max-width:30em;font-weight:400}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero__cta .btn{padding:16px 30px;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.hero__note{margin-top:18px;font-size:13px;color:rgba(255,255,255,.85);letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
.landing__foot{position:absolute;bottom:14px;right:clamp(22px,5vw,56px);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(166,163,155,.6)}

/* ---------- experience ---------- */
.experience{position:fixed;inset:0;background:#FFD9B3}
.experience__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#FFD9B3}
.ov-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px clamp(14px,3vw,24px);pointer-events:none}
.ov-top>*{pointer-events:auto}
.ov-top__left{display:flex;align-items:center;gap:10px}
.ov-top__left>*{pointer-events:auto}
/* performance toggle — always-visible quality/smoothness switch beside Back */
.perf-toggle{display:flex;align-items:center;gap:9px;height:42px;padding:0 15px;border-radius:999px;
  color:var(--cream);font-size:12px;font-weight:600;letter-spacing:.05em;
  background:var(--panel);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line);transition:border-color .2s}
.perf-toggle:hover{border-color:var(--gold)}
.perf-toggle__track{position:relative;width:30px;height:18px;flex:0 0 30px;border-radius:999px;
  background:rgba(42,35,24,.28);transition:background .2s}
.perf-toggle__thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.perf-toggle.is-on .perf-toggle__track{background:var(--gold-deep)}
.perf-toggle.is-on .perf-toggle__thumb{left:14px}
.perf-hint{font-size:12px;color:#fff;letter-spacing:.02em;opacity:.9;
  text-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none}
@media (max-width:560px){ .perf-toggle{padding:0 12px} .perf-toggle__label{display:none} .perf-hint{display:none} }

/* ---------- POI dock (magnifying, macOS-style, TRUE liquid glass) ----------
   Anchored bottom-right so it sits directly under the POI info card, which
   shares the same right offset. */
.dock{position:absolute;z-index:5;right:clamp(14px,3vw,26px);bottom:18px}
.dock__panel{position:relative;display:flex;align-items:flex-end;gap:10px;height:60px;padding:0 10px 8px;
  border-radius:999px;overflow:visible;isolation:isolate;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 10px 30px rgba(0,0,0,.18),0 0 1px rgba(0,0,0,.08),
    0 4px 4px rgba(0,0,0,.15),0 0 12px rgba(0,0,0,.08),0 0 24px rgba(255,255,255,.1),
    inset 3px 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 3px 0 rgba(255,255,255,.45);
  --edge-proximity:0;--cursor-angle:45deg;--edge-sensitivity:30}
.dock__panel>.edge-light{position:absolute;inset:-24px;pointer-events:none;z-index:4;border-radius:inherit;
  mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity))/(100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter;transition:opacity .3s ease-in-out}
.dock__panel:not(:hover)>.edge-light{opacity:0;transition:opacity .6s ease-in-out}
.dock__panel>.edge-light::before{content:"";position:absolute;inset:24px;border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 2px 0 rgba(255,255,255,.6),0 0 6px 0 rgba(255,255,255,.5),
    0 0 14px 0 rgba(255,255,255,.35),0 0 26px 2px rgba(255,255,255,.22),0 0 46px 2px rgba(255,255,255,.12)}
/* icon tiles sit OPAQUE on top of the glass shell — so an enlarged, magnified
   tile always reads as a clean solid square, never a messy see-through blob */
.dock__item{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;cursor:pointer;outline:none;z-index:5;
  background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.07);
  box-shadow:0 4px 10px rgba(0,0,0,.14);transition:background .2s,border-color .2s;will-change:width,height}
.dock__item:hover{border-color:var(--gold)}
.dock__item:focus-visible{border-color:var(--gold-deep)}
.dock__item.is-active{background:rgba(238,206,143,.55);border-color:var(--gold-deep);
  box-shadow:0 0 0 1px rgba(156,122,60,.35),0 4px 12px rgba(0,0,0,.16)}
.dock__icon{display:flex;align-items:center;justify-content:center;color:var(--cream);
  width:55%;height:55%;pointer-events:none}
.dock__icon svg{width:100%;height:100%}
.dock__label{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
  white-space:nowrap;pointer-events:none;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--cream);
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:8px;padding:4px 10px;
  opacity:0;transition:opacity .18s ease,transform .18s ease;z-index:6;
  box-shadow:0 6px 16px rgba(0,0,0,.14)}
.dock__item:hover .dock__label,.dock__item:focus-visible .dock__label{opacity:1;transform:translate(-50%,-4px)}

.poi-card{position:absolute;z-index:6;right:clamp(14px,3vw,26px);bottom:96px;width:min(330px,86vw);
  border-radius:24px;isolation:isolate;overflow:visible;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 20px 50px rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.08),
    0 4px 4px rgba(0,0,0,.15),0 0 12px rgba(0,0,0,.08),0 0 24px rgba(255,255,255,.1),
    inset 3px 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 3px 0 rgba(255,255,255,.45);
  animation:riseSolid .28s ease;
  /* BorderGlow (React Bits port) — WHITE edge glow following the cursor, layered
     on top of the liquid-glass shell below */
  --edge-proximity:0;--cursor-angle:45deg;--edge-sensitivity:30;--color-sensitivity:50;
  --glow-padding:30px;--cone-spread:25;--fill-opacity:.4;
  --glow-color:hsl(0deg 0% 100%/100%);--glow-color-60:hsl(0deg 0% 100%/60%);
  --glow-color-50:hsl(0deg 0% 100%/50%);--glow-color-40:hsl(0deg 0% 100%/40%);
  --glow-color-30:hsl(0deg 0% 100%/30%);--glow-color-20:hsl(0deg 0% 100%/20%);
  --glow-color-10:hsl(0deg 0% 100%/10%);
  --g1:radial-gradient(at 80% 55%,#ffffff 0px,transparent 50%);
  --g2:radial-gradient(at 69% 34%,#f0f0f0 0px,transparent 50%);
  --g3:radial-gradient(at 8% 6%,#ffffff 0px,transparent 50%);
  --g4:radial-gradient(at 41% 38%,#f0f0f0 0px,transparent 50%);
  --g5:radial-gradient(at 86% 85%,#ffffff 0px,transparent 50%);
  --g6:radial-gradient(at 82% 18%,#f0f0f0 0px,transparent 50%);
  --g7:radial-gradient(at 51% 4%,#ffffff 0px,transparent 50%);
  --gbase:linear-gradient(#f0f0f0 0 100%)}
.poi-card__ring{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  transition:opacity .25s ease-out;padding:1.5px;
  background:
    var(--g1) border-box,var(--g2) border-box,var(--g3) border-box,var(--g4) border-box,
    var(--g5) border-box,var(--g6) border-box,var(--g7) border-box,var(--gbase) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity))/(100 - var(--color-sensitivity)));
  -webkit-mask-image:
    conic-gradient(from var(--cursor-angle) at center,
      black calc(var(--cone-spread)*1%),transparent calc((var(--cone-spread) + 15)*1%),
      transparent calc((100 - var(--cone-spread) - 15)*1%),black calc((100 - var(--cone-spread))*1%)),
    linear-gradient(#fff 0 0);
  -webkit-mask-clip:border-box,content-box;
  -webkit-mask-composite:source-out;
  mask-image:
    conic-gradient(from var(--cursor-angle) at center,
      black calc(var(--cone-spread)*1%),transparent calc((var(--cone-spread) + 15)*1%),
      transparent calc((100 - var(--cone-spread) - 15)*1%),black calc((100 - var(--cone-spread))*1%)),
    linear-gradient(#fff 0 0);
  mask-clip:border-box,content-box;
  mask-composite:subtract}
.poi-card:not(:hover) .poi-card__ring{opacity:0;transition:opacity .75s ease-in-out}
.poi-card>.edge-light{position:absolute;z-index:4;inset:calc(var(--glow-padding)*-1);pointer-events:none;
  border-radius:inherit;
  mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity))/(100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter;transition:opacity .3s ease-in-out}
.poi-card:not(:hover)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}
.poi-card>.edge-light::before{content:"";position:absolute;inset:var(--glow-padding);border-radius:24px;
  box-shadow:0 0 0 1px var(--glow-color),0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* entrance for GLASS panels: translate only, NO opacity — an element that is
   mid-opacity-fade cannot render its backdrop-filter (it becomes its own
   backdrop root), so fading glass makes the blur "pop" in at the end */
@keyframes riseSolid{from{transform:translateY(10px)}to{transform:none}}
.poi-card__content{position:relative;z-index:5;padding:22px}
.poi-card__close{position:absolute;top:12px;right:14px;font-size:22px;color:rgba(255,255,255,.7);line-height:1;transition:color .2s}
.poi-card__close:hover{color:#fff}
.poi-card__kicker{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:#fff;opacity:.9;margin-bottom:8px}
.poi-card h3{font-family:var(--serif);font-size:30px;font-weight:400;margin-bottom:8px;color:#fff}
.poi-card p:not(.poi-card__kicker){font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);margin-bottom:16px}
.poi-card__nav{display:flex;gap:10px}
.poi-card__nav .btn{flex:1;justify-content:center}
.poi-card .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.poi-card .btn--ghost:hover{border-color:#fff}

/* ---------- estate gallery — 3D focus rail (coverflow), light glass overlay ---------- */
.pg{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;outline:none;
  user-select:none;-webkit-user-select:none;
  background:rgba(255,250,244,.55);
  backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);
  animation:pgIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .pg{animation:none} }
.pg__bg{display:none}
.pg__close{position:absolute;top:calc(max(14px,env(safe-area-inset-top)) + 6px);right:clamp(16px,3vw,28px);
  z-index:4;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;color:var(--cream);
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);transition:background .2s,border-color .2s}
.pg__close:hover{background:rgba(238,206,143,.35);border-color:var(--gold-deep)}
.pg__head{position:relative;z-index:2;text-align:center;padding:calc(max(14px,env(safe-area-inset-top)) + 14px) 70px 0}
.pg__headKicker{display:block;text-transform:uppercase;letter-spacing:.34em;font-size:11px;color:var(--gold-deep);margin-bottom:6px}
.pg__headTitle{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);font-weight:400;color:var(--cream);line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.1)}
.pg__icon{display:flex;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;
  border-radius:50%;color:var(--gold-deep);background:rgba(255,255,255,.45);border:1px solid rgba(238,206,143,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(238,206,143,.18)}
.pg__icon svg{width:24px;height:24px}
.pg__stage{position:relative;flex:1;perspective:1400px;cursor:grab;touch-action:none;min-height:0}
.pg__stage:active{cursor:grabbing}
.pg__card{position:absolute;left:50%;top:50%;width:min(60vw,1060px);max-height:calc(100% - 16px);aspect-ratio:3/2;
  border-radius:16px;overflow:hidden;background:#f2ede4;
  border-top:1px solid rgba(255,255,255,.5);box-shadow:0 24px 60px rgba(0,0,0,.28);
  transform-style:preserve-3d;will-change:transform,filter;
  transition:transform .6s cubic-bezier(.3,1.4,.45,1),opacity .5s ease,filter .5s ease}
.pg__card img{width:100%;height:100%;object-fit:cover;pointer-events:none;border-radius:16px;
  -webkit-user-drag:none;user-select:none}
.pg__card::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 40%)}
.pg__card.is-center{z-index:20;box-shadow:0 30px 90px rgba(0,0,0,.3),0 0 40px rgba(255,255,255,.15)}
.pg__card:not(.is-center){z-index:10;cursor:pointer}
.pg__info{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:6px 22px 26px;width:min(1100px,94vw);margin:0 auto}
.pg__text{display:flex;flex-direction:column;gap:4px;min-height:96px;justify-content:center;flex:1;
  transition:opacity .22s ease,transform .22s ease}
.pg__text.is-swap{opacity:0;transform:translateY(8px)}
.pg__meta{text-transform:uppercase;letter-spacing:.22em;font-size:10.5px;color:var(--gold-deep)}
.pg__title{font-family:var(--serif);font-size:clamp(21px,2.5vw,29px);font-weight:400;color:var(--cream);line-height:1.05}
.pg__desc{font-size:13.5px;line-height:1.55;color:#6b6152;max-width:46em}
.pg__nav{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding:4px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.pg__nav button{width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;color:var(--muted);
  transition:background .18s,color .18s,transform .12s}
.pg__nav button:hover{background:rgba(255,255,255,.35);color:var(--cream)}
.pg__nav button:active{transform:scale(.93)}
#pgCount{min-width:46px;text-align:center;font:11px ui-monospace,monospace;color:var(--muted);letter-spacing:.08em}
/* gallery toggle — same tile format as the Play button + dock */
.pg-toggle{position:absolute;z-index:7;display:flex;align-items:center;justify-content:center;
  left:calc(max(16px,env(safe-area-inset-left)) + 54px);bottom:max(16px,env(safe-area-inset-bottom));
  width:44px;height:44px;border-radius:50%;color:var(--cream);
  background:var(--panel);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line);box-shadow:0 4px 10px rgba(0,0,0,.14);transition:border-color .2s,background .2s}
.pg-toggle:hover{border-color:var(--gold)}
.pg-toggle.is-on{background:rgba(238,206,143,.5);border-color:var(--gold-deep);box-shadow:0 0 0 1px rgba(156,122,60,.3)}
.pg-toggle--vid{left:calc(max(16px,env(safe-area-inset-left)) + 108px)}
/* promo film lightbox — same overlay chrome as the gallery, video centre stage */
.pg--vid .pg__stage{display:flex;align-items:center;justify-content:center;cursor:default;
  padding:18px clamp(16px,4vw,44px) clamp(18px,4vh,36px)}
.pg--vid video{width:min(1060px,92vw);max-width:100%;max-height:100%;border-radius:16px;background:#000;
  border-top:1px solid rgba(255,255,255,.5);box-shadow:0 24px 60px rgba(0,0,0,.28)}

@media (max-width:560px){
  /* hamburger occupies the slot next to Play; gallery + film go one further along */
  .pg-toggle{left:calc(max(16px,env(safe-area-inset-left)) + 92px)}
  .pg-toggle--vid{left:calc(max(16px,env(safe-area-inset-left)) + 146px)}
  /* portrait media on mobile — as large as the screen allows */
  .pg__card{width:min(88vw,440px);aspect-ratio:3/4}
  .pg__info{flex-direction:column;text-align:center;gap:10px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .pg__text{align-items:center;min-height:0}
}

/* ---------- 360° panorama viewer — opens ABOVE the info card (z 9 > card z 6) ---------- */
.pv{position:absolute;inset:0;z-index:9;user-select:none;-webkit-user-select:none;
  background:rgba(255,250,244,.55);
  backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);
  animation:pgIn .4s cubic-bezier(.22,1,.36,1)}
/* even breathing space: all four margins around the FRAME land on the same
   pixel value (9vh); the top inset compensates for the tabs row when a scene
   has multiple panos (.pv--tabs), and for the drag hint below */
.pv__wrap{position:absolute;display:flex;flex-direction:column;gap:12px;
  top:max(12px,calc(9vh - 12px));bottom:max(12px,calc(9vh - 30px));
  left:clamp(20px,9vh,140px);right:clamp(20px,9vh,140px)}
.pv--tabs .pv__wrap{top:max(12px,calc(9vh - 56px))}
/* tabs row only exists for multi-pano scenes */
.pv__top{position:relative;display:none;align-items:center;justify-content:center;min-height:44px}
.pv--tabs .pv__top{display:flex}
/* ‹ Back sits at the SAME spot as the 3D experience's back button */
.pv__back{position:absolute;z-index:8;top:16px;left:clamp(14px,3vw,24px);
  display:flex;align-items:center;gap:6px;height:42px;padding:0 18px;
  border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--cream);
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:background .2s,border-color .2s}
.pv__back:hover{background:rgba(238,206,143,.35);border-color:var(--gold-deep)}
.pv__tabs{display:flex;gap:6px;justify-content:center;padding:4px;margin:0 auto;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.pv__tab{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  padding:8px 18px;border-radius:999px;transition:background .2s,color .2s}
.pv__tab:hover{color:var(--cream)}
.pv__tab.is-active{background:rgba(238,206,143,.5);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(156,122,60,.4)}
.pv__frame{flex:1;min-height:0;border-radius:18px;overflow:hidden;background:#f2ede4;
  border:1px solid rgba(238,206,143,.4);box-shadow:0 34px 90px rgba(0,0,0,.24)}
.pv__frame .pnlm-container{background:#f2ede4!important}
.pv__hint{text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---- in-pano storytelling hotspots ---------------------------------------
   Same glowing white orb language as the 3D splat hotspots. Info orbs open the
   glass spot-card; video orbs play an alpha-matted person composited into the
   scene (see alphavid.js). */
/* NOTE: all in-scene sticker components below are authored at 3x their visual
   size — the sticker plane scales them down, keeping text/edges crisp
   (rasterisation happens at layout size; see pv3dAddPlane). */
.pv-orb{width:66px;height:66px;cursor:pointer}
.pv-orb::before{content:'';position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff 0%,#fff 30%,rgba(255,255,255,.92) 55%,rgba(255,255,255,.55) 80%,rgba(255,255,255,.15) 100%);
  box-shadow:0 0 14px 5px rgba(255,255,255,.8),0 0 42px 14px rgba(255,255,255,.38),0 0 84px 28px rgba(255,255,255,.14);
  animation:pvOrb 2.8s ease-in-out infinite}
@keyframes pvOrb{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
.pv-orb__label{position:absolute;left:50%;bottom:calc(100% + 30px);transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;font-size:36px;font-weight:600;letter-spacing:.04em;color:#fff;
  text-shadow:0 3px 12px rgba(0,0,0,.5);opacity:0;transition:opacity .2s}
.pv-orb:hover .pv-orb__label{opacity:1}
/* editorial copy — a distant sticker at the scene's load-view centre; fades
   away whenever any hotspot UI is open (authored 3x, like all DOM stickers).
   The sub-text sits on a glass-look panel: translucent fill + inset highlights
   only — TRUE backdrop-filter can't sample the pano from inside the 3D layer
   (the transformed ancestor is its own backdrop root). */
.pv-edit{text-align:center;width:1080px;pointer-events:none}
.pv-edit__title{font-family:var(--serif);font-size:96px;font-weight:400;color:#fff;line-height:1.12;
  text-shadow:0 6px 36px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.35)}
.pv-edit__rule{width:150px;height:3px;margin:26px auto 0;background:rgba(255,255,255,.65);border-radius:2px}
/* CTA-style hotspot (e.g. "Start your morning here…") — serif line + brand mark */
.pv-cta{cursor:pointer;width:auto;text-align:center}
.pv-cta__text{font-family:var(--serif);font-size:72px;color:#fff;line-height:1.15;
  text-shadow:0 6px 30px rgba(0,0,0,.45);white-space:nowrap}
.pv-cta__mark{width:132px;height:132px;margin:24px auto 0;opacity:.95;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.4));animation:pvOrb 2.6s ease-in-out infinite}
/* alpha-video person composited into the scene */
.pv-vid{pointer-events:none;width:100%;height:100%}
.pv-vid canvas{display:block;width:100%;height:100%}
/* in-scene Close pill shown beneath a playing video person — same family as
   the ‹ Back chip (glass panel, cream text). backdrop-filter is unreliable
   inside 3D-transformed layers, so the panel tone is baked in instead. */
.pv-close{display:inline-flex;align-items:center;gap:18px;padding:30px 54px;border-radius:999px;
  font-size:40px;font-weight:600;letter-spacing:.03em;color:var(--cream);white-space:nowrap;
  background:rgba(255,252,248,.78);border:3px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.14)}
.pv-close:hover{background:rgba(238,206,143,.5);border-color:var(--gold-deep)}
/* "sticker" projection layer — 3DVista-style: media planes are fixed to the
   pano SPHERE (not the screen), so they warp/rotate with the same perspective
   as the panorama itself. The scene div counter-rotates with the camera every
   frame; each plane is rotated to its yaw/pitch and pushed onto the sphere. */
.pv3d{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.pv3d__scene{position:absolute;inset:0;transform-style:preserve-3d}
.pv3d__plane{position:absolute;left:50%;top:50%;transform-style:preserve-3d;
  transform-origin:0 0;   /* pivot at the frame centre (= camera), NOT the element centre */
  pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:opacity .22s ease}   /* smooth fades for clip switches + orb hide/show */
.pv3d__plane.is-interactive{pointer-events:auto;cursor:pointer}
.pv3d__plane canvas{display:block;width:100%;height:100%}
/* spot detail card — glass, deliberately overlapping the frame's top-right
   edge so the scene reads as 3D layers; pano stays draggable around it */
.pv__spotcard{position:absolute;z-index:6;top:34px;right:calc(clamp(20px,9vh,140px)*-0.45);
  width:min(340px,78vw);border-radius:24px;isolation:isolate;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 20px 50px rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.08),
    0 4px 4px rgba(0,0,0,.15),0 0 12px rgba(0,0,0,.08),0 0 24px rgba(255,255,255,.1),
    inset 3px 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 3px 0 rgba(255,255,255,.45);
  padding:22px;animation:riseSolid .28s ease}
.pv__spotcard-close{position:absolute;top:12px;right:14px;font-size:22px;color:rgba(255,255,255,.7);line-height:1}
.pv__spotcard-close:hover{color:#fff}
.pv__spotcard-kicker{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:#fff;opacity:.9;margin-bottom:8px}
.pv__spotcard h3{font-family:var(--serif);font-size:26px;font-weight:400;color:#fff;margin-bottom:8px}
.pv__spotcard p:not(.pv__spotcard-kicker){font-size:15px;line-height:1.6;color:rgba(255,255,255,.88)}
.pv__spotcard img{width:100%;margin-top:14px;border-radius:14px;display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.3)}
/* editorial variant: copy only, tighter leading */
.pv__spotcard--edit p{line-height:1.45;margin:0}

/* session bar — glass navigation strip along the BOTTOM of the pano frame */
.pv__bar{position:absolute;z-index:7;left:3%;right:3%;bottom:18px;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
  padding:10px 18px;border-radius:20px;isolation:isolate;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 12px 34px rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.08),
    0 0 24px rgba(255,255,255,.1),
    inset 3px 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 3px 0 rgba(255,255,255,.45);
  animation:riseSolid .28s ease}
.pv__bar-title{display:flex;flex-direction:column;margin-right:6px;min-width:0}
.pv__bar-kicker{text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:#fff;opacity:.85}
.pv__bar-title strong{font-family:var(--serif);font-size:20px;font-weight:400;color:#fff;line-height:1.1;white-space:nowrap}
.pv__bar-opts{display:flex;gap:8px;flex-wrap:wrap}
.pv__bar-opts button{padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  transition:background .2s,border-color .2s,color .2s}
.pv__bar-opts button:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.75)}
.pv__bar-opts button.is-active{background:rgba(238,206,143,.6);border-color:var(--gold-deep);color:#43120f}
.pv__bar-extra{display:flex;align-items:center;gap:6px}
.pv__bar{padding-right:64px}   /* room for the anchored close button */
.pv__bar-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  font-size:20px;line-height:1;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.45);transition:background .2s,border-color .2s}
.pv__bar-close:hover{background:rgba(255,255,255,.3);border-color:#fff}
/* segmented clip switcher (lives in the bar's extra slot) */
.pv__panel-seg{display:flex;gap:5px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3)}
.pv__panel-seg button{padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  white-space:nowrap;color:rgba(255,255,255,.85);transition:background .2s,color .2s}
.pv__panel-seg button:hover{color:#fff}
.pv__panel-seg button.is-active{background:rgba(238,206,143,.6);color:#43120f}
/* guide overlay — info card at left, the person FREE-STANDING beside it
   (no container: the alpha canvas floats directly over the pano) */
/* NOTE: no standing opacity transition on .pv__guide — while any ancestor is
   mid-opacity-fade the card's backdrop-filter can't render (blur pops in
   late). The exit fade is applied inline, entrance is fade-free. */
.pv__guide{position:absolute;inset:0;z-index:6;pointer-events:none}
.pv__guide-card{position:absolute;left:4.5%;bottom:110px;width:min(320px,38%);z-index:2;
  max-height:calc(100% - 190px);overflow-y:auto;overscroll-behavior:contain;
  pointer-events:auto;border-radius:24px;isolation:isolate;padding:22px;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 20px 50px rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.08),
    0 4px 4px rgba(0,0,0,.15),0 0 12px rgba(0,0,0,.08),0 0 24px rgba(255,255,255,.1),
    inset 3px 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 3px 0 rgba(255,255,255,.45);
  animation:riseSolid .28s ease}
.pv__guide-card h3{font-family:var(--serif);font-size:26px;font-weight:400;color:#fff;margin-bottom:8px}
.pv__guide-card p:not(.pv__spotcard-kicker){font-size:15px;line-height:1.6;color:rgba(255,255,255,.88)}
/* the person is CENTRAL to the frame at every screen size, and her base fades
   into the interface bar below (short fade — last ~14% only).
   NO filter here: drop-shadow on an accelerated WebGL canvas re-composites
   with broken premultiplication in Chrome — paints a milky veil over the
   whole canvas rectangle. mask-image is safe. */
.pv__guide-video{position:absolute;left:50%;transform:translateX(-50%);bottom:86px;
  height:min(56%,440px);pointer-events:none;animation:riseCentred .28s ease;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%)}
/* the generic `rise` keyframes animate `transform`, which would override the
   translateX(-50%) centring mid-animation (she'd enter off-centre and snap) —
   this variant keeps the centring in every frame */
@keyframes riseCentred{from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
.pv__guide-video canvas{display:block;height:100%;width:auto}

/* mobile: near-full-bleed pano (this override must live AFTER the base
   .pv__wrap rule — an earlier copy sat before it in the file and never won
   the cascade, leaving phones with the huge desktop 19% side margins) */
@media (max-width:560px){
  /* taller container: fixed 64px top (clears the Back chip), slim bottom */
  .pv__wrap{top:64px;bottom:4%;left:3%;right:3%}
  .pv--tabs .pv__wrap{top:64px}
  /* hotspot info card sits BELOW the Back chip, never over it */
  .pv__spotcard{right:2%;top:64px}
  /* editorial copy docks to the BOTTOM of the frame on mobile — full-width
     glass, clear of Back and the tabs row (the bedroom collision) */
  .pv__spotcard--edit{top:auto;bottom:8px;left:3%;right:3%;width:auto;max-height:36%}
  /* mobile keeps the smaller body size (desktop bumps to 15px) */
  .pv__spotcard p:not(.pv__spotcard-kicker),
  .pv__guide-card p:not(.pv__spotcard-kicker){font-size:13.5px}
  /* the drag hint drops below the bottom-docked copy card, not under it */
  .pv__hint{position:absolute;left:0;right:0;bottom:-27px}
  /* compact single-row controls: title line, then BOTH option pills + close
     on one row */
  .pv__bar{left:2%;right:2%;bottom:10px;padding:9px 12px}
  .pv__bar-title{flex-basis:100%;margin-right:0}
  .pv__bar-title strong{font-size:16px}
  .pv__bar-opts{flex-wrap:wrap;gap:6px;padding-right:42px}   /* 4-option menus wrap to two rows */
  .pv__bar-opts button{padding:7px 11px;font-size:11.5px;white-space:nowrap}
  .pv__bar-close{top:auto;bottom:8px;transform:none;width:32px;height:32px;font-size:17px;right:10px}
  .pv__panel-seg button{padding:6px 10px;font-size:11px}
  /* mobile guide: card full-width at the top, the person centred beneath it,
     rising out of (and fading into) the interface bar */
  .pv__guide-card{left:4%;right:4%;width:auto;top:58px;bottom:auto;max-height:42%}
  .pv__guide-video{height:40%;bottom:78px}
}
.poi-card__pano{width:100%;justify-content:center;margin-bottom:10px}

/* ---------- lite fallback ---------- */
.lite{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px}
.lite__bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 60% 20%,#FFF1E2,#FFD9B3 75%)}
.lite__inner{position:relative;max-width:440px}
.lite__tag{text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--gold-deep);margin-bottom:14px}
.lite__inner h2{font-family:var(--serif);font-size:64px;font-weight:400;margin-bottom:14px}
.lite__inner p{color:#5b5245;line-height:1.6;margin-bottom:22px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px}
.modal__scrim{position:absolute;inset:0;background:rgba(74,58,34,.35);backdrop-filter:blur(4px)}
.modal__card{position:relative;width:min(420px,92vw);background:var(--ink2);border:1px solid var(--line);border-radius:22px;padding:30px;
  box-shadow:0 30px 80px rgba(74,58,34,.32);animation:rise .3s ease}
.modal__close{position:absolute;top:16px;right:18px;font-size:24px;color:var(--muted);line-height:1}
.modal__kicker{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--gold-deep);margin-bottom:8px}
.modal__card h3{font-family:var(--serif);font-size:34px;font-weight:400}
.modal__sub{color:var(--muted);font-size:14px;margin:6px 0 20px}
.modal__card input,.modal__card textarea{width:100%;margin-bottom:12px;padding:13px 15px;border-radius:12px;
  background:#FFF6EC;border:1px solid var(--line);color:var(--cream);font:inherit;font-size:14px;resize:none}
.modal__card input:focus,.modal__card textarea:focus{outline:0;border-color:var(--gold)}
.modal__done{color:var(--gold-deep);text-align:center;margin-top:14px;font-size:14px}

/* ---------- mobile location drawer (hidden on desktop) ---------- */
.m-menu-btn{display:none}
.m-drawer{display:none}
.m-drawer[hidden]{display:none!important}

.m-menu-icon,.m-menu-icon::before,.m-menu-icon::after{content:'';display:block;width:18px;height:2px;background:var(--cream);border-radius:2px}
.m-menu-icon{position:relative}
.m-menu-icon::before{position:absolute;top:-6px;left:0}
.m-menu-icon::after{position:absolute;top:6px;left:0}

.m-drawer__scrim{position:absolute;inset:0;background:transparent}
.m-drawer__panel{position:absolute;left:0;top:0;bottom:0;width:min(80vw,290px);
  padding:calc(env(safe-area-inset-top) + 32px) 24px calc(env(safe-area-inset-bottom) + 24px);
  background:linear-gradient(100deg,rgba(255,248,240,.97) 0%,rgba(255,248,240,.9) 52%,rgba(255,248,240,0) 100%);
  display:flex;flex-direction:column;animation:drawerIn .26s ease}
@keyframes drawerIn{from{transform:translateX(-12%);opacity:0}to{transform:none;opacity:1}}
.m-drawer__eyebrow{text-transform:uppercase;letter-spacing:.32em;font-size:11px;color:var(--gold-deep);margin-bottom:20px}
.m-drawer__list{display:flex;flex-direction:column}
.m-drawer__item{text-align:left;font-family:var(--serif);font-size:26px;font-weight:400;color:var(--cream);
  padding:13px 0;border-bottom:1px solid var(--line);transition:color .15s}
.m-drawer__item:active{color:var(--gold-deep)}
.m-drawer__close{margin-top:auto;align-self:flex-start;color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:12px 0}

@media (max-width:560px){
  .poi-card{left:14px;right:14px;width:auto;bottom:84px}
  .hero__cta{flex-direction:column;align-items:flex-start}
  .hero__cta .btn{width:auto}

  .dock{display:none}   /* dock replaced by the hamburger drawer */
  .m-menu-btn{display:flex;align-items:center;justify-content:center;position:fixed;z-index:8;
    bottom:max(16px,env(safe-area-inset-bottom));
    left:calc(max(16px,env(safe-area-inset-left)) + 46px);
    width:40px;height:40px;border-radius:50%;background:var(--panel);
    backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid var(--line)}
  .m-drawer{display:block;position:fixed;inset:0;z-index:15}
  .m-drawer[hidden]{display:none!important}
}