/*
 * glassworks.css — GlassWorks v1.0 overlay styles
 * ─────────────────────────────────────────────────
 * Design tokens and overlay styles for the GlassWorks viewer.
 * viewer.css is the engine's file (untouched).
 * Everything Digler owns lives here.
 *
 * Sections:
 *   1. Design tokens
 *   2. Settings error banner
 *   3. Hotspot marker orb presets  (8 styles)
 *   4. Slide / panel animation presets  (4 styles)
 */

/* ── 1. Design tokens ──────────────────────────────────────────────────── */
:root {
  --gw-bg-0:       #04060b;
  --gw-bg-1:       #0a1120;
  --gw-glass:      rgba(15, 23, 40, .50);
  --gw-glass-hi:   rgba(22, 32, 54, .70);
  --gw-accent:     #6cb4ff;
  --gw-glow:       rgba(108, 180, 255, .28);
  --gw-ink:        #eef2f6;
  --gw-muted:      #8a97ad;
  --gw-font:       'Montserrat', system-ui, sans-serif;
}

/* ── 2. Settings error banner ──────────────────────────────────────────── */
/*
 * Shown when settings.json is empty, missing, or corrupt.
 * Injected by the bulletproof loader in index.html; styled here.
 */
#dg-settings-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  background: var(--gw-glass);
  color: var(--gw-ink);
  border: 1px solid rgba(108, 180, 255, .35);
  border-radius: 0;
  padding: 12px 42px 12px 16px;
  font: 500 12.5px/1.65 var(--gw-font);
  max-width: 660px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#dg-settings-banner b {
  color: var(--gw-accent);
}

/* ── 3. Hotspot marker orb presets ─────────────────────────────────────── */
/*
 * The digler-gaze runtime sets data-mstyle on each .dg-marker element.
 * Default (no data-mstyle) is a solid glowing orb via digler-gaze.js itself.
 * These presets override the dot appearance for alternative looks.
 */

/* halo: soft outer disc with a bright inner core */
.dg-marker[data-mstyle="halo"] .dg-marker-dot {
  width: 30px; height: 30px;
  background: rgba(108, 180, 255, .22);
  box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.dg-marker[data-mstyle="halo"] .dg-marker-dot::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gw-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(108, 180, 255, .7);
}

/* ring: hollow ring with a centre pin */
.dg-marker[data-mstyle="ring"] .dg-marker-dot {
  width: 18px; height: 18px;
  background: transparent;
  border: 2px solid var(--gw-accent);
  box-shadow: 0 0 14px rgba(108, 180, 255, .35);
}
.dg-marker[data-mstyle="ring"] .dg-marker-dot::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gw-accent);
  transform: translate(-50%, -50%);
}

/* pulse: solid core with an expanding ring */
.dg-marker[data-mstyle="pulse"] .dg-marker-dot {
  width: 12px; height: 12px;
  background: var(--gw-accent);
  box-shadow: 0 0 8px rgba(108, 180, 255, .5);
}
.dg-marker[data-mstyle="pulse"] .dg-marker-dot::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(108, 180, 255, .8);
  transform: translate(-50%, -50%);
  animation: gw-pulse 2.2s ease-out infinite;
}
@keyframes gw-pulse {
  0%   { width: 12px; height: 12px; opacity: .9; }
  100% { width: 44px; height: 44px; opacity: 0;  }
}

/* breath: slow glowing inhale / exhale */
.dg-marker[data-mstyle="breath"] .dg-marker-dot {
  width: 14px; height: 14px;
  background: var(--gw-accent);
  animation: gw-dot-breath 3.6s ease-in-out infinite;
}
@keyframes gw-dot-breath {
  0%,  100% { box-shadow: 0 0 4px  rgba(108, 180, 255, .35); transform: translate(-50%, -50%) scale(1);    }
  50%       { box-shadow: 0 0 18px rgba(108, 180, 255, .85); transform: translate(-50%, -50%) scale(1.14); }
}

/* diamond: rotated square */
.dg-marker[data-mstyle="diamond"] .dg-marker-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.dg-marker[data-mstyle="diamond"] .dg-marker-dot:hover {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.18);
}

/* reticle: camera-style corner brackets with a centre point */
.dg-marker[data-mstyle="reticle"] .dg-marker-dot {
  width: 22px; height: 22px;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(circle, var(--gw-accent) 0 2.5px, transparent 3px);
}
.dg-marker[data-mstyle="reticle"] .dg-marker-dot::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px;
  border-left: 2px solid var(--gw-accent);
  border-top:  2px solid var(--gw-accent);
}
.dg-marker[data-mstyle="reticle"] .dg-marker-dot::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 7px; height: 7px;
  border-right:  2px solid var(--gw-accent);
  border-bottom: 2px solid var(--gw-accent);
}

/* crosshair */
.dg-marker[data-mstyle="crosshair"] .dg-marker-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(108, 180, 255, .55);
  box-shadow: none;
  background:
    linear-gradient(var(--gw-accent), var(--gw-accent)) center / 2px 20px no-repeat,
    linear-gradient(var(--gw-accent), var(--gw-accent)) center / 20px 2px no-repeat;
}

/* beam: small dot with a rising shaft of light */
.dg-marker[data-mstyle="beam"] .dg-marker-dot {
  width: 10px; height: 10px;
  background: var(--gw-accent);
  box-shadow: 0 0 10px rgba(108, 180, 255, .55);
}
.dg-marker[data-mstyle="beam"] .dg-marker-dot::after {
  content: "";
  position: absolute; left: 50%; bottom: 50%;
  transform: translateX(-50%);
  width: 2px; height: 46px;
  background: linear-gradient(to top, rgba(108, 180, 255, .75), rgba(108, 180, 255, 0));
  pointer-events: none;
}

/* ── 4. Slide / panel animation presets ───────────────────────────────── */
/*
 * Applied via data-sstyle on the detail panel element.
 * The editor offers these as named presets.
 */

/* CSS custom property needed for traceline conic rotation */
@property --gw-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* fx layer sits over the slide content — no pointer events */
.dg-d-fx {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
}

/* breath: the whole slide pulses with a soft blue glow */
#dg-detail[data-sstyle="breath"] {
  animation: gw-slide-breath 5s ease-in-out infinite;
}
@keyframes gw-slide-breath {
  0%,  100% { box-shadow: 0 44px 140px rgba(0, 0, 0, .6), 0 0  0   rgba(108, 180, 255, 0);   }
  50%       { box-shadow: 0 44px 140px rgba(0, 0, 0, .6), 0 0 38px rgba(108, 180, 255, .35); }
}

/* traceline: a blue line endlessly travels the slide border */
#dg-detail[data-sstyle="traceline"] .dg-d-fx::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--gw-ang),
    transparent 0deg 300deg,
    rgba(108, 180, 255, .95) 332deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: gw-trace 4.5s linear infinite;
}
@keyframes gw-trace { to { --gw-ang: 360deg; } }

/* frame: quiet blue gallery frame with corner accents */
#dg-detail[data-sstyle="frame"] .dg-d-fx {
  border: 1px solid rgba(108, 180, 255, .42);
}
#dg-detail[data-sstyle="frame"] .dg-d-fx::before,
#dg-detail[data-sstyle="frame"] .dg-d-fx::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
}
#dg-detail[data-sstyle="frame"] .dg-d-fx::before {
  left: -1px; top: -1px;
  border-left: 2px solid var(--gw-accent);
  border-top:  2px solid var(--gw-accent);
}
#dg-detail[data-sstyle="frame"] .dg-d-fx::after {
  right: -1px; bottom: -1px;
  border-right:  2px solid var(--gw-accent);
  border-bottom: 2px solid var(--gw-accent);
}

/* shimmer: a soft light sweep across the glass */
#dg-detail[data-sstyle="shimmer"] .dg-d-fx { overflow: hidden; }
#dg-detail[data-sstyle="shimmer"] .dg-d-fx::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 46%; left: -60%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(108, 180, 255, .08) 45%,
    rgba(180, 220, 255, .16) 50%,
    rgba(108, 180, 255, .08) 55%,
    transparent 100%
  );
  animation: gw-shimmer 5.5s ease-in-out infinite;
}
@keyframes gw-shimmer {
  0%       { left: -60%;  }
  60%, 100%{ left:  120%; }
}

/* ── Slide content block helpers (used by the gaze renderer) ──────────── */
.dg-bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dg-bcell { grid-column: 1 / -1; min-width: 0; }
.dg-bcell.half { grid-column: auto; }
.dg-b-h   { font-family: var(--gw-font); font-weight: 200; font-size: 26px; letter-spacing: .12em; color: var(--gw-ink); text-transform: lowercase; }
.dg-b-sub { font-family: var(--gw-font); font-weight: 600; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gw-accent); }
.dg-b-t   { font-family: var(--gw-font); font-weight: 300; font-size: 13.5px; line-height: 1.75; color: rgba(238, 242, 246, .78); }
.dg-b-img { width: 100%; display: block; border-radius: 0; border: 1px solid rgba(108, 180, 255, .16); }
.dg-b-cap { font-family: var(--gw-font); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(238, 242, 246, .45); margin-top: 6px; }
.dg-b-vid { width: 100%; display: block; background: #000; }
.dg-b-aud { width: 100%; }

/* flowing dash animation (used by connector lines in gaze) */
@keyframes gw-dash-flow { to { stroke-dashoffset: -26; } }

/* ── Layer styles (markers, ghost cards, slide panels) — from dg-x ── */
/* ============================================================
   DIGLER LAYER v21 — live-edit bridge: ghost cards, flowing slides, draggable slide position
   ============================================================ */
:root{ --dg-gold:#e8d5b0; --dg-cream:#f0ede8; }

#dg-panel-wrap{ display:none !important; }
#dg-hamburger,#dg-nav,#dg-sub{ display:none !important; }
#dg-markers{ position:fixed; inset:0; pointer-events:none; z-index:950; overflow:hidden; }
#annotationNav,#annotationNavTitle,#annotationPrev,#annotationNext{ display:none !important; }
.pc-annotation,.pc-annotation-hotspot,[class*="annotation-hotspot"],[class*="pc-annotation"]{ display:none !important; }

/* ===================== AMBIENT HEADING CARDS (one per area) ===================== */
#dg-hotspots{ position:fixed; inset:0; z-index:951; pointer-events:none; overflow:hidden; transition:opacity .3s ease; }
body.dg-detail-open #dg-hotspots, body.dg-dos-open #dg-hotspots{ opacity:0 !important; pointer-events:none !important; }
.dg-hs{ position:absolute; left:0; top:0; }
.dg-hs-i{ position:relative; width:0; height:0; transform-origin:0 0; }
.dg-hs-card{ position:absolute; left:0; top:0; width:420px; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer; font-family:'Montserrat',sans-serif;
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:0 22px 60px rgba(0,0,0,.34); }
/* heading slide (very transparent glass, two-edge gold edge-light) */
.dg-hs-top{ position:relative; background:rgba(8,7,5,.10); padding:26px 30px 24px; }
.dg-hs-top::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(232,213,176,.95), rgba(232,213,176,.18) 65%, transparent); }
.dg-hs-top::after{ content:""; position:absolute; top:0; left:0; bottom:0; width:2px; pointer-events:none;
  background:linear-gradient(180deg, rgba(232,213,176,.95), rgba(232,213,176,.1) 70%, transparent); }
.dg-hs-head{ font-size:46px; font-weight:300; letter-spacing:.06em; text-transform:uppercase; color:#fff; line-height:1; text-shadow:0 2px 10px rgba(0,0,0,.6); }
/* connected bottom bar = the "Specs & features" button */
.dg-hs-bar{ position:relative; background:rgba(10,9,7,.24); padding:14px 30px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid rgba(232,213,176,.18); transition:background .25s; }
.dg-hs-card:hover .dg-hs-bar{ background:rgba(232,213,176,.18); }
.dg-hs-bar span{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.dg-hs-bar svg{ width:15px; height:15px; color:rgba(232,213,176,.85); }
.dg-hs-sub{ margin-top:8px; font-size:14px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:rgba(240,237,232,.78); text-shadow:0 2px 8px rgba(0,0,0,.55); }
/* ghost cards — empty rooms, visible only while the Studio is open */
.dg-hs.ghost .dg-hs-card{ opacity:.45; }
.dg-hs.ghost .dg-hs-top{ border:1px dashed rgba(232,213,176,.5); }
.dg-hs.ghost .dg-hs-top::before, .dg-hs.ghost .dg-hs-top::after{ display:none; }
/* ── signature: glowing orb at the spot + an angled arm to the slide's corner ── */
.dg-hs-orb{ position:absolute; left:0; top:0; width:30px; height:30px; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer;
  border-radius:50%; background:radial-gradient(circle at 50% 42%, #fff 0 12%, #f3e6c6 28%, rgba(232,213,176,.85) 52%, rgba(232,213,176,.18) 74%, transparent 80%);
  box-shadow:0 0 18px 4px rgba(232,213,176,.5), 0 0 4px 1px rgba(255,255,255,.7); }
.dg-hs-orb::after{ content:""; position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%); border-radius:50%;
  border:1.5px solid rgba(232,213,176,.55); animation:dgOrbBreath 4.2s ease-in-out infinite; }
@keyframes dgOrbBreath{ 0%,100%{ box-shadow:0 0 10px rgba(232,213,176,.3); transform:translate(-50%,-50%) scale(1); opacity:.8; } 50%{ box-shadow:0 0 26px rgba(232,213,176,.7); transform:translate(-50%,-50%) scale(1.45); opacity:.3; } }
.dg-hs-orb:hover{ box-shadow:0 0 26px 7px rgba(232,213,176,.75), 0 0 6px 2px #fff; }
.dg-hs-arm{ position:absolute; left:0; top:0; height:1.5px; transform-origin:0 50%; pointer-events:none;
  /* GW4 — rises from the house: faint at the roofline, gold at the label */
  background:linear-gradient(to right, transparent, rgba(232,213,176,.35) 35%, rgba(232,213,176,.95)); }
.dg-hs.orbmode .dg-hs-card{ transform:none; }   /* corner-attached, not centred */
.dg-hs.orbmode .dg-hs-top{ background:rgba(8,7,5,.16); }

/* ===================== designed slide — flowing blocks (v21) ===================== */
.dg-d-flow{ position:absolute; inset:0; z-index:4; padding:34px 38px 28px; overflow:auto;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:14px 16px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.dg-d-flow > *{ flex:1 1 100%; min-width:0; }
.dg-d-flow > .half{ flex:1 1 calc(50% - 8px); }
.dg-f-h{ font-size:30px; font-weight:300; letter-spacing:.1em; text-transform:uppercase; color:var(--dacc,#e8d5b0); line-height:1.15; }
.dg-f-sub{ font-size:13px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--dink,#f0ede8); opacity:.8; }
.dg-f-t{ font-size:14.5px; font-weight:300; line-height:1.75; color:var(--dink,#f0ede8); opacity:.92; }
.dg-f-spec{ flex:1 1 calc(50% - 8px); border-left:2px solid var(--dacc,#e8d5b0); padding:2px 0 2px 12px; }
.dg-f-spec.half{ flex:1 1 calc(50% - 8px); }
.dg-f-spec .k{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dink,#f0ede8); opacity:.6; margin-bottom:3px; }
.dg-f-spec .v{ font-size:15px; font-weight:400; color:var(--dink,#f0ede8); }
.dg-f-img{ width:100%; max-height:300px; object-fit:cover; border-radius:8px; display:block; }
.dg-f-vid{ width:100%; max-height:320px; border-radius:8px; background:#000; display:block; }
.dg-f-aud audio{ width:100%; }
.dg-f-cap{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dink,#f0ede8); opacity:.65; margin:0 0 6px; }
/* while the Studio drags the slide */
body.dg-slide-dragging #dg-detail{ transition:none !important; cursor:grabbing; }
body.dg-slide-dragging{ user-select:none; -webkit-user-select:none; }

/* ===================== HOTSPOT PANELS — designed sets (v21) ===================== */
#dg-panels{ position:fixed; inset:0; z-index:1452; pointer-events:none; display:none; }
#dg-panels.on{ display:block; }
#dg-panels .dg-pn-wrap{ position:absolute; inset:0; pointer-events:none;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.dg-pn{ position:absolute; pointer-events:auto; overflow:hidden; box-shadow:0 14px 44px rgba(0,0,0,.45);
  font-family:'Montserrat',sans-serif; }
.dg-pn .dg-pn-flow{ position:absolute; inset:0; padding:26px 28px; overflow:auto; display:flex; flex-wrap:wrap;
  align-content:flex-start; gap:12px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.dg-pn .dg-pn-flow > *{ flex:1 1 100%; min-width:0; }
.dg-pn .dg-pn-flow > .half{ flex:1 1 calc(50% - 7px); }
.dg-pn[data-shape="round"]{ border-radius:50%; }
.dg-pn[data-shape="round"] .dg-pn-flow{ padding:15%; align-content:center; text-align:center; }
.dg-pn[data-shape="pill"]{ border-radius:999px; }
.dg-pn[data-shape="pill"] .dg-pn-flow{ padding:16px 36px; align-content:center; }
.dg-pn[data-shape="tri"]{ clip-path:polygon(50% 0, 100% 100%, 0 100%); box-shadow:none; }
.dg-pn[data-shape="tri"] .dg-pn-flow{ padding:36% 16% 10%; text-align:center; align-content:center; }
.dg-pn[data-shape="hex"]{ clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); box-shadow:none; }
.dg-pn[data-shape="hex"] .dg-pn-flow{ padding:12% 18%; align-content:center; }
.dg-pn .dg-f-gal{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.dg-pn .dg-f-gal img{ height:var(--gh,180px); border-radius:6px; scroll-snap-align:center; flex:none; display:block; }
.dg-pn video{ width:100%; border-radius:6px; background:#000; display:block; }
.dg-pn audio{ width:100%; }
/* reveal in */
#dg-panels .dg-pn{ transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); transition-delay:var(--rvd,0s); }
#dg-panels.rv-rise .dg-pn.pre{ opacity:0; transform:translateY(26px); }
#dg-panels.rv-scale .dg-pn.pre{ opacity:0; transform:scale(.85); }
#dg-panels.rv-drift .dg-pn.pre{ opacity:0; transform:translateX(-34px); }
/* leaving */
#dg-panels.bye .dg-pn{ transition:opacity .34s ease, transform .4s cubic-bezier(.4,0,.7,0) !important; transition-delay:0s !important; }
#dg-panels.bye.out-fade .dg-pn{ opacity:0; }
#dg-panels.bye.out-scale .dg-pn{ opacity:0; transform:scale(.86); }
body.dg-panels-dragging #dg-panels .dg-pn-wrap{ transition:none !important; }
body.dg-panels-dragging #dg-detail-backdrop{ transition:none !important; }
body.dg-panels-open #dg-tour-hud.on{ z-index:1460; }
#dg-plines{ position:fixed; inset:0; z-index:1451; pointer-events:none; width:100%; height:100%; }
/* ── panel style presets (data-sstyle) — the look + breathing/animate from the old slides ── */
.dg-pn .dg-pn-fx{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5; }
.dg-pn[data-sstyle="breath"]{ animation:dgSlideBreath 5s ease-in-out infinite; }
.dg-pn[data-sstyle="traceline"] .dg-pn-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--dgang), transparent 0deg 300deg, rgba(232,213,176,.95) 332deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; animation:dgTrace 4.5s linear infinite; }
.dg-pn[data-sstyle="frame"] .dg-pn-fx{ border:1px solid rgba(232,213,176,.42); }
.dg-pn[data-sstyle="frame"] .dg-pn-fx::before,
.dg-pn[data-sstyle="frame"] .dg-pn-fx::after{ content:""; position:absolute; width:22px; height:22px; }
.dg-pn[data-sstyle="frame"] .dg-pn-fx::before{ left:-1px; top:-1px; border-left:2px solid #e8d5b0; border-top:2px solid #e8d5b0; }
.dg-pn[data-sstyle="frame"] .dg-pn-fx::after{ right:-1px; bottom:-1px; border-right:2px solid #e8d5b0; border-bottom:2px solid #e8d5b0; }
.dg-pn[data-sstyle="shimmer"] .dg-pn-fx{ overflow:hidden; }
.dg-pn[data-sstyle="shimmer"] .dg-pn-fx::after{ content:""; position:absolute; top:0; bottom:0; width:46%; left:-60%;
  background:linear-gradient(100deg, transparent 0%, rgba(232,213,176,.10) 45%, rgba(255,255,255,.16) 50%, rgba(232,213,176,.10) 55%, transparent 100%);
  animation:dgShimmer 5.5s ease-in-out infinite; }

/* ===================== BIG DETAIL SLIDE (fills most of screen) ===================== */
#dg-detail-backdrop{ position:fixed; inset:0; z-index:1450; background:rgba(4,4,3,.3); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .5s,visibility .5s; }
#dg-detail-backdrop.open{ opacity:1; visibility:visible; }
#dg-detail-link{ position:fixed; inset:0; z-index:1451; pointer-events:none; opacity:0; transition:opacity .4s ease; }
#dg-detail-link.show{ opacity:1; }
#dg-detail-link svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#dg-detail-link .ln{ stroke:rgba(240,237,232,.65); stroke-width:1.5; }
#dg-link-dot{ position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); background:var(--dg-cream); box-shadow:0 0 0 7px rgba(232,213,176,.15), 0 0 16px rgba(232,213,176,.55); }
#dg-detail{ position:fixed; z-index:1452; left:50%; top:7vh; width:min(720px,92vw); height:min(600px,66vh);
  opacity:0; pointer-events:none; transform:translateY(var(--dy,0px)) scale(var(--s,1)); transform-origin:50% 50%;
  background:rgba(10,9,7,.32); backdrop-filter:blur(26px) saturate(1.2); -webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 44px 140px rgba(0,0,0,.6); overflow:hidden; display:flex; flex-direction:column; font-family:'Montserrat',sans-serif; }
#dg-detail.open{ pointer-events:auto; }
#dg-detail::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(232,213,176,.95), rgba(232,213,176,.2) 62%, transparent); }
#dg-detail::after{ content:""; position:absolute; top:0; left:0; bottom:0; width:2px; pointer-events:none;
  background:linear-gradient(180deg, rgba(232,213,176,.95), transparent 62%); }
#dg-detail-handle{ position:absolute; top:0; left:0; right:0; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:grab; z-index:6; touch-action:none; }
#dg-detail.dragging{ transition:none !important; }
#dg-detail-handle:active{ cursor:grabbing; }
#dg-detail-handle .bar{ width:46px; height:4px; border-radius:3px; background:rgba(232,213,176,.55); }
#dg-detail-handle .cue{ font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.4); }
#dg-detail-body{ display:flex; flex:1; min-height:0; }
.dg-d-gal{ flex:0 0 56%; position:relative; min-width:0; }
.dg-d-gal .dg-gal{ height:100%; }
.dg-d-info{ flex:1; min-width:0; padding:52px 46px 34px; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none; }
.dg-d-info::-webkit-scrollbar{ display:none; }
.dg-d-eyebrow{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--dg-gold); }
.dg-d-title{ font-size:clamp(30px,4vw,46px); font-weight:200; letter-spacing:.04em; text-transform:uppercase; color:#fff; line-height:1; margin:8px 0 0; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.dg-d-rule{ height:1px; background:linear-gradient(90deg, rgba(232,213,176,.6), transparent); margin:22px 0; }
.dg-d-desc{ font-size:15px; font-weight:300; line-height:1.65; color:rgba(255,255,255,.88); text-shadow:0 1px 4px rgba(0,0,0,.5); }
.dg-d-specs{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; margin-top:30px; }
.dg-d-spec{ position:relative; padding-left:14px; }
.dg-d-spec::before{ content:""; position:absolute; top:1px; left:0; width:1.5px; height:32px; background:rgba(232,213,176,.55); }
.dg-d-spec .k{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dg-gold); font-weight:600; }
.dg-d-spec .v{ font-size:22px; font-weight:200; color:#fff; margin-top:4px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.dg-d-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:28px; }
.dg-d-arrow{ background:none; border:0; color:rgba(232,213,176,.85); font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; padding:5px 2px; transition:color .2s; }
.dg-d-arrow:hover{ color:#fff; }
.dg-d-count{ font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.45); }
.dg-d-block{ opacity:0; }
#dg-detail.open .dg-d-block{ animation:dgDIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes dgDIn{ from{opacity:0; transform:translateY(24px); filter:blur(8px);} to{opacity:1; transform:none; filter:blur(0);} }
/* GW3 — the slide honours the hotspot's "Animate in" + "Stagger" settings
   (delays are set per-block from reveal.stagger in digler-layer) */
#dg-detail[data-rv="scale"].open .dg-d-block{ animation-name:dgDInScale; }
#dg-detail[data-rv="drift"].open .dg-d-block{ animation-name:dgDInDrift; }
#dg-detail[data-rv="none"].open .dg-d-block{ animation:none; opacity:1; }
@keyframes dgDInScale{ from{opacity:0; transform:scale(.86); filter:blur(8px);} to{opacity:1; transform:none; filter:blur(0);} }
@keyframes dgDInDrift{ from{opacity:0; transform:translateX(-34px); filter:blur(8px);} to{opacity:1; transform:none; filter:blur(0);} }

/* ===================== iPHONE-STYLE GALLERY ===================== */
.dg-gal{ width:100%; }
.dg-gal-main{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:rgba(255,255,255,.05); }
.dg-gal.fill .dg-gal-main{ aspect-ratio:auto; height:100%; }
.dg-gal-track{ display:flex; height:100%; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.dg-gal-slide{ flex:0 0 100%; height:100%; }
.dg-gal-slide img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.dg-gal-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(232,213,176,.45); }
.dg-gal-ph svg{ width:34px; height:34px; }
.dg-gal-thumbs{ display:flex; gap:6px; margin-top:6px; overflow-x:auto; scrollbar-width:none; }
.dg-gal-thumbs::-webkit-scrollbar{ display:none; }
.dg-gal.fill .dg-gal-thumbs{ position:absolute; left:10px; right:10px; bottom:10px; margin:0; padding:8px; gap:7px; background:linear-gradient(to top, rgba(0,0,0,.4), transparent); }
.dg-gal-thumb{ flex:0 0 auto; width:54px; height:38px; overflow:hidden; opacity:.45; cursor:pointer; outline:1.5px solid transparent; transition:opacity .25s, outline-color .2s; }
.dg-gal-thumb img{ width:100%; height:100%; object-fit:cover; }
.dg-gal-thumb.active{ opacity:1; outline-color:rgba(232,213,176,.95); }

/* ===================== DOSSIER (landscape, drag-to-dismiss) ===================== */
#dg-dos-backdrop{ position:fixed; inset:0; z-index:1500; background:rgba(4,4,3,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; visibility:hidden; transition:opacity .5s,visibility .5s; }
#dg-dos-backdrop.open{ opacity:1; visibility:visible; }
#dg-dossier{ position:fixed; z-index:1501; left:50%; top:50%; --dos-dy:115vh; width:min(1080px,95vw); height:min(640px,88vh);
  transform:translate(-50%, calc(-50% + var(--dos-dy))); transition:transform .6s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(150deg, rgba(20,18,13,.6), rgba(8,7,5,.66)); backdrop-filter:blur(26px) saturate(1.2); -webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 40px 130px rgba(0,0,0,.6); overflow:hidden; font-family:'Montserrat',sans-serif; }
#dg-dossier.open{ --dos-dy:0px; }
#dg-dossier.dragging{ transition:none; }
#dg-dossier::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; pointer-events:none; background:linear-gradient(90deg, rgba(232,213,176,.9), rgba(232,213,176,.2) 60%, transparent); }
#dg-dossier::after{ content:""; position:absolute; top:0; left:0; bottom:0; width:2px; pointer-events:none; background:linear-gradient(180deg, rgba(232,213,176,.9), transparent 60%); }
#dg-dos-handle{ position:absolute; top:0; left:0; right:0; height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:grab; z-index:6; touch-action:none; }
#dg-dos-handle:active{ cursor:grabbing; }
#dg-dos-handle .bar{ width:46px; height:4px; border-radius:3px; background:rgba(232,213,176,.55); }
#dg-dos-handle .cue{ font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.4); }
#dg-dos-grid{ display:flex; height:100%; }
#dg-dos-left{ flex:1.05; position:relative; min-width:0; }
#dg-dos-left .dg-gal{ height:100%; }
.dg-dos-leftcap{ position:absolute; left:0; right:0; bottom:0; padding:26px 30px 22px; z-index:3; background:linear-gradient(to top, rgba(4,4,3,.85), rgba(4,4,3,.35) 60%, transparent); }
.dg-dos-eyebrow{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--dg-gold); }
.dg-dos-name{ font-size:clamp(30px,4.4vw,46px); font-weight:200; letter-spacing:.03em; text-transform:lowercase; color:#fff; line-height:1; margin:7px 0 4px; }
.dg-dos-addr{ font-size:13px; letter-spacing:.1em; color:rgba(255,255,255,.7); }
#dg-dos-right{ flex:1; min-width:0; padding:54px 40px 28px; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none; }
#dg-dos-right::-webkit-scrollbar{ display:none; }
.dg-dos-price{ font-size:clamp(30px,4.2vw,44px); font-weight:300; color:#fff; }
.dg-dos-price small{ display:block; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-top:6px; }
.dg-dos-stats{ display:flex; gap:10px; margin-top:24px; }
.dg-dos-stat{ flex:1; text-align:center; padding:18px 6px; position:relative; background:rgba(255,255,255,.035); }
.dg-dos-stat::before{ content:""; position:absolute; top:0; left:0; width:14px; height:1.5px; background:rgba(232,213,176,.7); }
.dg-dos-stat::after{ content:""; position:absolute; top:0; left:0; width:1.5px; height:14px; background:rgba(232,213,176,.7); }
.dg-dos-stat .n{ font-size:30px; font-weight:200; color:#fff; line-height:1; }
.dg-dos-stat .l{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.48); margin-top:7px; }
.dg-dos-rows{ margin-top:22px; }
.dg-dos-row{ display:flex; justify-content:space-between; align-items:center; padding:13px 1px; border-bottom:1px solid rgba(255,255,255,.08); }
.dg-dos-row .k{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--dg-gold); font-weight:500; }
.dg-dos-row .v{ font-size:15px; font-weight:300; color:rgba(255,255,255,.92); }
.dg-dos-cta{ display:flex; gap:10px; margin-top:auto; padding-top:24px; }
.dg-dos-btn{ flex:1; position:relative; cursor:pointer; font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; padding:15px 10px; text-align:center; color:#fff; background:rgba(255,255,255,.05); transition:.28s; border-top:1px solid rgba(232,213,176,.4); }
.dg-dos-btn:hover{ background:rgba(232,213,176,.16); border-top-color:rgba(232,213,176,.95); }
.dg-dos-btn.primary{ background:linear-gradient(180deg, rgba(232,213,176,.26), rgba(232,213,176,.14)); border-top-color:rgba(232,213,176,.95); }
.dg-dos-btn.primary:hover{ background:linear-gradient(180deg, rgba(232,213,176,.36), rgba(232,213,176,.2)); }
.dg-dos-block{ opacity:0; }
#dg-dossier.open .dg-dos-block{ animation:dgDosIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes dgDosIn{ from{opacity:0; transform:translateY(26px); filter:blur(8px);} to{opacity:1; transform:none; filter:blur(0);} }

/* ===================== FLOOR-PLAN caption ===================== */
#dg-fp{ position:fixed; top:54px; left:50%; transform:translateX(-50%) translateY(-8px); z-index:1400; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .5s, transform .5s, visibility .5s; text-align:center; font-family:'Montserrat',sans-serif; }
#dg-fp.open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#dg-fp .big{ font-size:clamp(30px,6.2vw,58px); font-weight:200; letter-spacing:.22em; text-transform:uppercase; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.65); }

/* ===================== CONTROL WHEEL (radial pie menu, top-left) ===================== */
#dg-wheel{ position:fixed; left:24px; top:24px; width:128px; height:128px; z-index:1200; font-family:'Montserrat',sans-serif; }
#dg-wheel svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 12px 28px rgba(0,0,0,.42)); }
.dg-seg{ cursor:pointer; }
.dg-seg .seg-bg{ fill:rgba(8,7,5,.36); transition:fill .25s; }
.dg-seg:hover .seg-bg{ fill:rgba(232,213,176,.16); }
.dg-seg.active .seg-bg{ fill:rgba(232,213,176,.30); }
.dg-seg .seg-ic{ fill:none; stroke:rgba(255,255,255,.72); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; pointer-events:none; }
.dg-seg.active .seg-ic{ stroke:#fff; }
.dg-seg .seg-edge{ fill:none; stroke:rgba(232,213,176,.9); stroke-width:1.6; opacity:0; transition:opacity .25s; pointer-events:none; }
.dg-seg.active .seg-edge{ opacity:1; }
#dg-wheel-label{ position:fixed; left:162px; top:62px; z-index:1200; font-family:'Montserrat',sans-serif; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:#fff; background:rgba(8,7,5,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:9px 15px; opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; pointer-events:none; }
#dg-wheel-label.show{ opacity:1; transform:translateX(0); }

/* ===================== NAV-MODE buttons: orbit / fly / walk (bottom-left) ===================== */
#dg-nav-modes{ position:fixed; left:24px; bottom:26px; z-index:1200; display:flex; gap:3px; padding:4px; background:rgba(8,7,5,.34); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(232,213,176,.4); }
.dg-navmode{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,.72); transition:.22s; }
.dg-navmode:hover{ color:#fff; background:rgba(232,213,176,.12); }
.dg-navmode.active{ color:#0d0b08; background:rgba(232,213,176,.92); }
.dg-navmode svg{ width:20px; height:20px; }

/* ===================== PROPERTY INFO pill ===================== */
#dg-prop{ position:fixed; right:24px; bottom:30px; z-index:1200; cursor:pointer; display:flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#fff; background:rgba(8,7,5,.34); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:13px 20px; transition:.28s; border-top:1px solid rgba(232,213,176,.4); }
#dg-prop:hover{ background:rgba(232,213,176,.16); border-top-color:rgba(232,213,176,.95); }
#dg-prop .d{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--dg-cream); box-shadow:0 0 0 4px rgba(232,213,176,.2); }

/* ===================== hide leftover SuperSplat UI + relocate branding ===================== */
#controlsWrap,#settingsPanel,#infoPanel,#infoPanels,#desktopInfoPanel,#touchInfoPanel,#annotationInfo,#tooltip{ display:none !important; }
#dg-watermark{ top:auto !important; left:auto !important; right:24px !important; bottom:84px !important; }

/* ===================== bottom-right controls (own interface) ===================== */
/* GW7 — recentre moves to the BOTTOM LEFT and joins the round family */
#dg-controls{ position:fixed; left:24px; bottom:26px; z-index:1200; display:flex; gap:8px; }
/* ── the round-glass family: HOME (top right), RECENTRE (bottom left),
      BACK TO GROUP (bottom right). Same disc, same gold ring, same lift. ── */
.gw-round{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:rgba(8,7,5,.42); backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); border:1px solid rgba(232,213,176,.42);
  color:rgba(255,255,255,.9); box-shadow:0 6px 22px rgba(0,0,0,.4);
  transition:background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease,
             opacity .4s ease, visibility .4s; }
.gw-round:hover{ background:rgba(232,213,176,.2); border-color:rgba(232,213,176,.95); color:#fff; transform:translateY(-2px); }
.gw-round:active{ transform:translateY(0); }
.gw-round svg{ width:23px; height:23px; }
body.gw-visitor .gw-round{ width:58px; height:58px; }
body.gw-visitor .gw-round svg{ width:26px; height:26px; }
/* ── GW13: ONE SLOT, TWO BUTTONS ──────────────────────────────────────
   HOME sits here the whole way through. The moment a single house is on
   stage it scales out and BACK-TO-GROUP scales in over the top of it —
   same spot, no button appearing in a far corner. */
#gw-slot{ position:fixed; right:24px; top:24px; z-index:1210;
  width:58px; height:58px; }
#gw-slot > *{ position:absolute; inset:0; transition:transform .42s cubic-bezier(.34,1.4,.5,1), opacity .3s ease; }
#gw-home{ transform:scale(1); opacity:1; pointer-events:auto; }
#gw-back-group{ transform:scale(0); opacity:0; pointer-events:none; visibility:visible; }
body.gw-unit-stop #gw-home{ transform:scale(0); opacity:0; pointer-events:none; }
body.gw-unit-stop #gw-back-group{ transform:scale(1); opacity:1; pointer-events:auto; }
/* docked into the tour HUD the slot becomes one of the three buttons */
#dg-tour-hud #gw-slot{ position:relative; right:auto; top:auto; bottom:auto; left:auto; flex:0 0 auto;
  pointer-events:auto;                    /* the HUD is none by default */
  width:var(--tb-size,54px); height:var(--tb-size,54px); }
#dg-tour-hud #gw-slot > *{ width:100%; height:100%; }
/* (BACK-TO-GROUP lives in the slot above, not in the corner) */
/* nothing but the vignette and the cluster during the landing */
body.gw-landing-on #gw-slot,
body.gw-landing-on #dg-controls{ opacity:0; visibility:hidden; pointer-events:none; }
body.dg-detail-open #gw-slot, body.dg-dos-open #gw-slot{ opacity:0; visibility:hidden; pointer-events:none; }
#gw-slot{ transition:opacity .4s ease, visibility .4s; }
/* the editor keeps its own furniture */
body.gw-edit #gw-slot{ display:none; }
.dg-ctrl{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(8,7,5,.34); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(232,213,176,.4); color:rgba(255,255,255,.85); transition:.25s; }
.dg-ctrl:hover{ background:rgba(232,213,176,.16); border-top-color:rgba(232,213,176,.95); color:#fff; }
.dg-ctrl svg{ width:20px; height:20px; }

/* ===================== GUIDED TOUR HUD (prev / next — designable in the Studio) ===================== */
#dg-tour-hud{ position:fixed; left:0; right:0; bottom:calc(var(--tb-bottom,26px) + env(safe-area-inset-bottom,0px)); z-index:1205;
  display:flex; align-items:center; justify-content:center; gap:var(--tb-gap,14px); padding:0 var(--tb-margin,24px);
  pointer-events:none; opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s; font-family:'Montserrat',sans-serif; }
#dg-tour-hud.on{ opacity:1; visibility:visible; transform:none; }
body.dg-detail-open #dg-tour-hud, body.dg-dos-open #dg-tour-hud{ opacity:0 !important; pointer-events:none !important; }
#dg-tour-hud[data-layout="corners"]{ justify-content:space-between; }
#dg-tour-hud[data-layout="corners"] #dg-tour-chip{ position:absolute; left:50%; transform:translateX(-50%); }
#dg-tour-hud[data-layout="sides"] .dg-tbtn.prev{ position:fixed; left:var(--tb-margin,24px); top:50%; margin-top:calc(var(--tb-size,54px) / -2); }
#dg-tour-hud[data-layout="sides"] .dg-tbtn.next{ position:fixed; right:var(--tb-margin,24px); top:50%; margin-top:calc(var(--tb-size,54px) / -2); }
.dg-tbtn{ pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:9px; height:var(--tb-size,54px); min-width:var(--tb-size,54px); padding:0 calc(var(--tb-size,54px) * .38);
  background:var(--tb-fill,rgba(10,9,7,.38)); -webkit-backdrop-filter:blur(var(--tb-blur,14px)) saturate(1.15); backdrop-filter:blur(var(--tb-blur,14px)) saturate(1.15);
  border:var(--tb-bw,1px) solid var(--tb-border,#e8d5b0); border-radius:var(--tb-radius,14px); color:var(--tb-ic,#f0ede8);
  font:600 var(--tb-fs,11px)/1 'Montserrat',sans-serif; letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer; box-shadow:var(--tb-glow,none); transition:filter .25s, border-color .25s, transform .15s, opacity .3s; }
.dg-tbtn .ic{ display:flex; }
.dg-tbtn svg{ width:var(--tb-icsz,16px); height:var(--tb-icsz,16px); display:block; }
.dg-tbtn:hover{ filter:brightness(1.3); }
.dg-tbtn:active{ transform:scale(.95); }
.dg-tbtn.end{ }   /* GW9 — Back and Next never grey out */
#dg-tour-hud[data-shape="pill"] .dg-tbtn{ border-radius:999px; }
#dg-tour-hud[data-shape="circle"] .dg-tbtn{ width:var(--tb-size,54px); padding:0; border-radius:50%; }
#dg-tour-hud[data-shape="circle"] .dg-tbtn .lb{ display:none; }
#dg-tour-hud[data-shape="minimal"] .dg-tbtn{ background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
#dg-tour-hud[data-labels="0"] .dg-tbtn .lb{ display:none; }
#dg-tour-hud[data-icon="text"] .dg-tbtn .ic{ display:none; }
#dg-tour-hud[data-breathe="1"] .dg-tbtn{ animation:dgTbtnBreath 5.4s ease-in-out infinite; }
@keyframes dgTbtnBreath{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.045); filter:brightness(1.15); box-shadow:0 0 22px var(--tb-glowc,rgba(232,213,176,.45)); } }
#dg-tour-chip{ pointer-events:none; display:flex; align-items:baseline; gap:11px; padding:10px 18px;
  background:var(--tc-bg,rgba(10,9,7,.32)); -webkit-backdrop-filter:blur(var(--tc-blur,10px)); backdrop-filter:blur(var(--tc-blur,10px));
  border-radius:var(--tc-radius,999px); color:var(--tc-color,#f0ede8);
  font:300 var(--tc-fs,11px)/1.1 'Montserrat',sans-serif; letter-spacing:.26em; text-transform:uppercase; white-space:nowrap; }
#dg-tour-chip .c{ opacity:.55; font-size:calc(var(--tc-fs,11px) * .86); letter-spacing:.2em; }
#dg-tour-hud[data-chip="0"] #dg-tour-chip{ display:none; }
#dg-tour-hud[data-count="0"] #dg-tour-chip .c{ display:none; }
@media (max-width:680px){
  #dg-tour-hud{ padding:0 14px; }
  #dg-tour-hud[data-layout="sides"] .dg-tbtn.prev{ left:10px; }
  #dg-tour-hud[data-layout="sides"] .dg-tbtn.next{ right:10px; }
}

/* ===================== audio + video placeholders ===================== */
.dg-media{ margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.dg-aud{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); padding:11px 13px; }
.dg-aud-play{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,213,176,.5); background:rgba(232,213,176,.12); color:var(--dg-gold); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.dg-aud-play svg{ width:12px; height:12px; }
.dg-aud-wave{ flex:1; display:flex; align-items:center; gap:2px; height:26px; }
.dg-aud-wave i{ flex:1; min-width:0; background:rgba(232,213,176,.38); }
.dg-aud-meta{ flex:0 0 auto; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.dg-vid{ position:relative; aspect-ratio:16/9; background:rgba(255,255,255,.06); overflow:hidden; cursor:pointer; }
.dg-vid-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; color:#fff; }
.dg-vid-play svg{ width:16px; height:16px; margin-left:2px; }
.dg-vid-label{ position:absolute; left:12px; bottom:9px; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.75); }

/* ===================== FLOOR HUD overlay (projected onto the scan floor) ===================== */
#dg-floor{ position:fixed; inset:0; z-index:949; pointer-events:none; opacity:0; transition:opacity .8s ease .2s; }
#dg-floor.show{ opacity:1; }
#dg-floor .holder{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
#dg-floor .fp-img{ display:block; width:100%; height:100%; filter:drop-shadow(0 0 14px rgba(232,213,176,.25)); }
#dg-floor svg{ display:block; overflow:visible; width:100%; height:100%; }
#dg-floor .fp-fill{ fill:rgba(232,213,176,.045); }
#dg-floor .fp-wall{ fill:none; stroke:rgba(232,213,176,.82); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
#dg-floor.draw .fp-wall{ animation:dgFpDraw 2s ease forwards; }
@keyframes dgFpDraw{ to{ stroke-dashoffset:0; } }
#dg-floor .fp-lbl{ fill:rgba(255,255,255,.5); font-family:'Montserrat',sans-serif; font-size:24px; font-weight:300; letter-spacing:.12em; text-transform:uppercase; text-anchor:middle; }

@media (max-width:680px){
  #dg-detail{ width:95vw; height:90vh; }
  #dg-detail-body{ flex-direction:column; }
  .dg-d-gal{ flex:0 0 40%; }
  .dg-d-info{ padding:24px 24px 28px; }
  #dg-dossier{ width:96vw; height:90vh; }
  #dg-dos-grid{ flex-direction:column; }
  #dg-dos-left{ flex:0 0 42%; }
  #dg-dos-right{ padding:24px 22px; }
  #dg-prop{ right:16px; bottom:22px; padding:11px 15px; }
  #dg-wheel{ left:14px; top:14px; width:112px; height:112px; }
  #dg-wheel-label{ left:134px; top:46px; }
  #dg-nav-modes{ left:14px; bottom:18px; }
}

/* ===================== BREATHING BACKGROUND (idle drift behind landing/property slides) ===================== */
@keyframes dgBreatheDrift{
  0%   { transform:scale(1.06) translate(-0.9%, -0.4%); }
  50%  { transform:scale(1.06) translate(0.9%, 0.4%); }
  100% { transform:scale(1.06) translate(-0.9%, -0.4%); }
}
body.dg-breathe #application-canvas{
  animation:dgBreatheDrift 21s ease-in-out infinite;
  will-change:transform;
}
/* GW4 — the floor-plan view is a technical drawing moment: dead still.
   The drift also skews the plan-to-scan registration, so it's banned here. */
body.gw-fp-on #application-canvas{ animation:none !important; transform:none !important; }

/* ===================== WALK-MODE EYE HEIGHT — transient readout (gesture only) ===================== */
#dg-eye-tag{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(6px); z-index:1206;
  padding:8px 16px; box-sizing:border-box;
  background:rgba(8,7,5,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(232,213,176,.4); border-top:1px solid rgba(232,213,176,.6);
  font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600; letter-spacing:.1em; color:#e8d5b0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
#dg-eye-tag::before{ content:"eye height  ·  "; font-size:8.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); }
#dg-eye-tag.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ============================================================
   GW2 — THE VISITOR PRESENTATION
   Dark glass all the way through, white type, terracotta accent
   (from the Fortuna Village identity). Big, simple
   controls; gaze-driven hotspot cards; full-bleed detail slide.
   Everything scoped to body.gw-visitor — the Studio (?edit) keeps
   its own look untouched.
   ============================================================ */
:root{
  --gw-acc:#e8d5b0;            /* the warm stone accent */
  --gw-acc-soft:rgba(232,213,176,.55);
  --gw-ink:#f4f1ec;
  --gw-glass:rgba(10,9,7,.42);
  --gw-glass-deep:rgba(8,7,5,.66);
}

/* ---- kill the wheel; visitors get gw-nav + big orbit/fly buttons ---- */
#dg-wheel, #dg-wheel-label{ display:none !important; }
/* the Studio's marker renderer has no business on the visitor URL */
body.gw-visitor #dg-markers{ display:none !important; }

/* one way to move: orbit. Click to set focus, click-drag to circle it. */
body.gw-visitor #dg-nav-modes{ display:none !important; }
.dg-navmode .lb{ display:none; }
/* no pretend media — the dossier's decorative audio/video widgets stay off
   for visitors until a property ships real recordings */
body.gw-visitor #dg-dossier .dg-dos-media-slot{ display:none !important; }

/* ---- LANDING PAGE — full glass over the live scan ---- */
/* editor preview sits above every Studio dock; a click hands control back */
body.gw-edit #gw-landing{ z-index:100100; cursor:pointer; }
/* GW7 — the landing is in 3-D now. This sheet is only a soft vignette:
   completely clear in the middle, just a hint of shade at the corners to
   say "this is the opening of something". No blur at all. */
#gw-landing{ position:fixed; inset:0; z-index:1600; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 78% 70% at 50% 46%, transparent 42%, rgba(8,7,5,.30) 82%, rgba(8,7,5,.62) 100%);
  font-family:'Montserrat',sans-serif; text-align:center; pointer-events:none;
  opacity:1; visibility:visible; transition:opacity .6s ease, visibility .6s; }
/* GW18 — the home page is 2-D again; the sheet carries it */
/* the Studio (?edit) still previews the old 2-D page, glass and all */
body.gw-edit #gw-landing{ pointer-events:auto;
  background:linear-gradient(180deg, rgba(8,7,5,.55), rgba(8,7,5,.38) 40%, rgba(8,7,5,.62));
  backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05); }
#gw-landing.off{ opacity:0; visibility:hidden; pointer-events:none; }
.gwl-inner{ max-width:min(620px, 92vw); padding:20px; animation:gwlIn 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes gwlIn{ from{ opacity:0; transform:translateY(26px); filter:blur(8px);} to{ opacity:1; transform:none; filter:blur(0);} }
/* GW3 — sizes + spacing are CSS vars so the Studio's "Landing & exit" panel
   can restyle the page live (digler-layer sets them from settings.landing) */
.gwl-logo{ height:var(--gwl-logo-h,46px); width:auto; opacity:.97; }   /* the estate mark */
.gwl-by{ margin-top:10px; font-size:11px; font-weight:600; letter-spacing:.5em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.gwl-title{ margin:var(--gwl-gap,18px) 0 0; font-size:min(7vw, var(--gwl-title-size,74px)); font-weight:200; letter-spacing:.14em; text-transform:lowercase; color:#fff; line-height:1.04; text-shadow:0 4px 30px rgba(0,0,0,.55); }
.gwl-addr{ margin-top:var(--gwl-addr-gap,14px); font-size:var(--gwl-addr-size,13px); font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.gwl-rule{ width:120px; height:1px; margin:var(--gwl-rule-gap,30px) auto; background:linear-gradient(90deg, transparent, var(--gw-acc), transparent); }
.gwl-btns{ display:flex; flex-direction:column; gap:var(--gwl-btn-gap,14px); width:min(400px, 84vw); margin:0 auto; }
.gwl-btn{ position:relative; isolation:isolate; min-height:64px; padding:18px 30px; cursor:pointer;
  background:var(--gw-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16); border-radius:2px;
  color:#fff; font-family:'Montserrat',sans-serif; font-size:16px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  transition:background .3s, border-color .3s, letter-spacing .3s; }
.gwl-btn::before{ content:""; position:absolute; left:50%; bottom:0; width:44%; height:0; transform:translateX(-50%);
  border:1px solid transparent; border-bottom-color:var(--gw-acc); border-radius:2px;
  transition:width .32s cubic-bezier(.16,1,.3,1), height .32s cubic-bezier(.16,1,.3,1), border-color .32s; pointer-events:none; }
.gwl-btn:hover, .gwl-btn:focus-visible{ background:rgba(24,18,14,.55); letter-spacing:.34em; outline:none; }
.gwl-btn:hover::before, .gwl-btn:focus-visible::before{ width:100%; height:100%; border-color:var(--gw-acc-soft); }
.gwl-btn.primary{ background:linear-gradient(180deg, rgba(232,213,176,.34), rgba(232,213,176,.16)); border-color:var(--gw-acc-soft); }
.gwl-btn.primary:hover{ background:linear-gradient(180deg, rgba(232,213,176,.48), rgba(232,213,176,.24)); }
.gwl-btn:active{ transform:translateY(1px); }

/* ---- WATERMARK (top-left) — just the mark, floating free. Tap = back to start. ---- */
#gw-wm{ position:fixed; left:26px; top:24px; z-index:1210; display:none; cursor:pointer;
  background:none; border:none; padding:0; font-family:'Montserrat',sans-serif;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.65));
  transition:transform .25s ease, opacity .25s; }
body.gw-visitor #gw-wm{ display:block; }
/* GW13 — the corner mark is the one logo in the tour; it stays put */
#gw-wm:hover{ transform:scale(1.05); }
#gw-wm img{ height:var(--gw-wm-h,32px); width:auto; opacity:.97; display:block; }
#gw-wm b{ font-size:13px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#fff; }

/* ---- BOTTOM GLASS NAV — four big words, nothing to learn ---- */
#gw-nav{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
  z-index:1204; display:none; gap:10px; padding:8px;
  background:rgba(8,7,5,.38); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; font-family:'Montserrat',sans-serif; }
body.gw-visitor #gw-nav{ display:flex; }
body.gw-landing-on #gw-nav, body.dg-detail-open #gw-nav, body.dg-dos-open #gw-nav{ opacity:0; pointer-events:none; }
/* GW13 — the corner mark is the one logo in the tour; it stays put */
/* the landing is a stage of its own — Back and Next have nothing to say yet */
body.gw-landing-on #dg-tour-hud{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
/* …and once the tour is running, the four doors get out of its way */
body.gw-visitor.gw-tour-on #gw-nav{ opacity:0; pointer-events:none; }
#gw-nav{ transition:opacity .3s ease; }
.gwn-btn{ position:relative; min-height:56px; padding:14px 26px; cursor:pointer; background:transparent;
  border:1px solid transparent; border-radius:12px; color:rgba(255,255,255,.85);
  font-family:'Montserrat',sans-serif; font-size:14px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s; }
.gwn-btn:hover{ background:rgba(255,255,255,.07); color:#fff; }
.gwn-btn.active{ background:rgba(232,213,176,.22); border-color:var(--gw-acc-soft); color:#fff; }
.gwn-btn:active{ transform:translateY(1px); }
/* tour HUD sits above the nav when running */
body.gw-visitor #dg-tour-hud{ bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }

/* ---- GAZE-DRIVEN HOTSPOT CARDS — GW4: the orb is GONE. A house on stage
   is a fine gold line rising from the roof with its label centred on top;
   gaze / a tap / the tour opens the full card. Nothing else is drawn. ---- */
body.gw-visitor .dg-hs-orb{ display:none !important; }
/* ---- GW11: THE REVEAL, rebuilt as ONE movement ----
   The line grows up out of the roof, and the card — pinned by its bottom
   edge to the top of that line — scales up from nothing while its opacity
   runs 0 → 100. Same second, same curve, both directions.
   The card's own transform is written inline every frame by the projector,
   so the scale lives on .dg-hs-top with its origin at the bottom edge —
   exactly where the line ends. Nothing here may touch .dg-hs-card's
   transform, ever: that is what caused the jump-cut. */
body.gw-visitor .dg-hs .dg-hs-arm{
  transition:width 1s cubic-bezier(.33,.9,.36,1); }
body.gw-visitor .dg-hs:not(.gz-on):not(.gz-group) .dg-hs-arm{ width:0 !important; }
body.gw-visitor .dg-hs .dg-hs-card{
  transition:opacity 1s cubic-bezier(.33,.9,.36,1),
             width .75s cubic-bezier(.33,.9,.36,1); }
/* the chip → card growth, so the first click reads like every other step */
body.gw-visitor .dg-hs .dg-hs-top{ transition:transform 1s cubic-bezier(.33,.9,.36,1),
             padding .75s cubic-bezier(.33,.9,.36,1); }
body.gw-visitor .dg-hs .dg-hs-head{ transition:font-size .75s cubic-bezier(.33,.9,.36,1); }
body.gw-visitor .dg-hs .dg-hs-specs{ transition:gap .75s cubic-bezier(.33,.9,.36,1),
             margin-top .75s cubic-bezier(.33,.9,.36,1), padding-top .75s cubic-bezier(.33,.9,.36,1); }
body.gw-visitor .dg-hs .dg-hs-specs .ms b,
body.gw-visitor .dg-hs .dg-hs-specs .ms span{ transition:font-size .75s cubic-bezier(.33,.9,.36,1); }
/* the extra rows breathe open instead of popping into being */
.dg-hs-rows{ display:block !important; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .6s ease, max-height .75s cubic-bezier(.33,.9,.36,1), margin-top .6s, padding-top .6s;
  margin-top:0 !important; padding-top:0 !important; border-top:0 solid rgba(232,213,176,.28) !important; }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows{ opacity:1; max-height:120px;
  margin-top:10px !important; padding-top:9px !important; border-top-width:1px !important; }
body.gw-visitor .dg-hs .dg-hs-top{
  transform-origin:50% 100%;                        /* pinned to the line */
  transition:transform 1s cubic-bezier(.33,.9,.36,1); }
body.gw-visitor .dg-hs:not(.gz-on):not(.gz-group) .dg-hs-top{ transform:scale(.45); }
body.gw-visitor .dg-hs.gz-group .dg-hs-top,
body.gw-visitor .dg-hs.gz-on .dg-hs-top{ transform:scale(1); }
/* GW9 — on the way OUT a card keeps every class it had, so it never
   re-styles itself backwards through the smaller states. It just goes. */
body.gw-visitor .dg-hs.gz-out .dg-hs-card{
  opacity:0 !important; pointer-events:none;
  transition:opacity 1s cubic-bezier(.33,.9,.36,1) !important; }
body.gw-visitor .dg-hs.gz-out .dg-hs-top{
  transform:scale(.45) !important;
  transition:transform 1s cubic-bezier(.33,.9,.36,1) !important; }
body.gw-visitor .dg-hs.gz-out .dg-hs-arm{
  width:0 !important; transition:width 1s cubic-bezier(.33,.9,.36,1) !important; }
body.gw-visitor .dg-hs.gz-out{ pointer-events:none; }
body.gw-visitor .dg-hs:not(.gz-on):not(.gz-group) .dg-hs-card{
  opacity:0; pointer-events:none; }
body.gw-visitor .dg-hs{ transition:opacity 1s cubic-bezier(.33,.9,.36,1); }
/* staged but not opened (a group's houses during the tour): line + a slim
   centred name chip — the full specs stay folded until it's THE house */
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-card{ opacity:1; clip-path:inset(-2px); width:auto; min-width:0; }
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-top{ padding:9px 16px 8px; white-space:nowrap; }
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-head{ font-size:14px; }
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-sub,
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-specs,
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-price{ display:none; }
/* the aerial finale is clean — the estate reads like a 2-D plan, title only */
body.gw-aerial-on .dg-hs .dg-hs-arm{ opacity:0 !important; }
body.gw-aerial-on .dg-hs .dg-hs-card{ opacity:0 !important; pointer-events:none !important; }
/* the card itself — small and subtle, framed neatly above the house */
body.gw-visitor .dg-hs-card{ width:250px; border-radius:14px; overflow:hidden; }
body.gw-visitor .dg-hs-top{ padding:15px 18px 14px; text-align:center; }
/* GW7 — the gold rule sits at the BOTTOM of the card, meeting the stalk */
body.gw-visitor .dg-hs-top::before{ top:auto; bottom:0;
  background:linear-gradient(90deg, transparent, rgba(232,213,176,.9), transparent); }
body.gw-visitor .dg-hs-top::after{ display:none; }
body.gw-visitor .dg-hs-head{ font-size:19px; font-weight:400; letter-spacing:.22em; }
/* GW4 — the wee ⓘ on an opened card → the unit's full 2-D slide */
body.gw-visitor .dg-hs-info{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer;
  border:1px solid rgba(232,213,176,.55); color:var(--gw-acc); background:rgba(8,7,5,.35);
  font-family:Georgia,serif; font-style:italic; font-size:14px; line-height:1;
  opacity:0; transition:opacity .3s ease, background .25s, transform .25s; }
body.gw-visitor .dg-hs.gz-on .dg-hs-info{ opacity:1; }
body.gw-visitor .dg-hs-info:hover{ background:rgba(232,213,176,.25); transform:scale(1.1); }
body.gw-edit .dg-hs-info{ display:none; }
body.gw-visitor .dg-hs-sub{ margin-top:5px; font-size:9.5px; letter-spacing:.2em; }
/* GW7 — the expanded card, rebuilt for older eyes: the NUMBER is the hero,
   the label is half its size but much bolder and brighter. The dividing
   rule now sits between the unit name and the numbers. */
/* GW8 — the same card, 40% smaller: it was shouting over the house */
body.gw-visitor .dg-hs.gz-on .dg-hs-top{ padding:12px 18px 13px; }
body.gw-visitor .dg-hs.gz-on .dg-hs-head{ font-size:18px; font-weight:500; letter-spacing:.18em; }
body.gw-visitor .dg-hs.gz-on .dg-hs-card{ width:212px; }
body.gw-visitor .dg-hs.gz-on .dg-hs-specs{ position:relative; gap:18px; margin-top:11px; padding-top:11px; }
body.gw-visitor .dg-hs.gz-on .dg-hs-specs::before{ content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,213,176,.85), transparent); }
body.gw-visitor .dg-hs.gz-on .dg-hs-specs .ms b{ font-size:23px; font-weight:400; line-height:1; }
body.gw-visitor .dg-hs.gz-on .dg-hs-specs .ms span{ font-size:11.5px; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.9); }
/* the extra specs, a line each, label left and value right */
.dg-hs-rows{ display:none; }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows{ display:block; margin-top:10px; padding-top:9px;
  border-top:1px solid rgba(232,213,176,.28); }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows .rw{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:2.5px 2px; }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows .rw span{ font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.72); }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows .rw b{ font-size:13px; font-weight:500; color:#fff; }
/* SOLD — a quiet gold stamp, only where it applies */
.dg-hs-sold{ display:none; }
body.gw-visitor .dg-hs.gz-on .dg-hs-sold{ display:inline-block; margin-bottom:7px; padding:3px 10px;
  border:1px solid rgba(232,213,176,.85); border-radius:999px; background:rgba(232,213,176,.16);
  font-size:9.5px; font-weight:700; letter-spacing:.26em; color:var(--gw-acc); }
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-sold{ display:none; }
.dg-hs-specs{ display:flex; gap:20px; margin-top:12px; justify-content:center; }
.dg-hs-specs .ms{ display:flex; flex-direction:column-reverse; gap:5px; align-items:center; }
.dg-hs-specs .ms span{ font-size:8px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.dg-hs-specs .ms b{ font-size:15px; font-weight:300; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.dg-hs-price{ margin-top:10px; padding-top:9px; border-top:1px solid rgba(232,213,176,.35);
  font-size:11.5px; font-weight:500; letter-spacing:.14em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.55); }

/* the static estate title — plain text living in the air, no glass at all */
.dg-hs.titlemode{ pointer-events:none; transition:opacity .5s ease; }
body.gw-unit-stop .dg-hs.titlemode{ opacity:0; }
/* GW3 — group stops feature the houses; the estate title steps aside there too
   (the straight-down finale keeps it, poster-style) */
body.gw-group-stop .dg-hs.titlemode{ opacity:0; }

/* ---- EDIT MODE — the STAGE: the viewer shrinks to a bordered viewport
   between the docks, so the WHOLE visitor frame is visible while you work —
   edges, nav buttons, the lot. Every overlay that plots world→screen
   coordinates shares the exact same rectangle, so everything stays aligned. */
:root{ --gw-stage-l:272px; --gw-stage-r:348px; --gw-stage-t:64px; --gw-stage-b:56px;
  --gw-stage-w:calc(100vw - var(--gw-stage-l) - var(--gw-stage-r));
  --gw-stage-h:calc(100vh - var(--gw-stage-t) - var(--gw-stage-b)); }
/* the canvas and the two SVG overlays need explicit sizes — `auto` collapses
   replaced elements to their intrinsic 300×150 and the engine's resize loop
   follows them down. Explicit calc keeps clientWidth honest, and the engine's
   RESOLUTION_AUTO then sizes the render buffer to match. */
body.gw-edit #application-canvas,
body.gw-edit #dg-plines,
body.gw-edit #gw-gizmo{
  position:fixed !important;
  left:var(--gw-stage-l) !important; top:var(--gw-stage-t) !important;
  right:auto !important; bottom:auto !important;
  width:var(--gw-stage-w) !important; height:var(--gw-stage-h) !important;
}
body.gw-edit #application-canvas{
  box-shadow:0 0 0 1px rgba(232,213,176,.4), 0 24px 80px rgba(0,0,0,.55);
}
body.gw-edit #dg-markers, body.gw-edit #dg-hotspots, body.gw-edit #dg-panels,
body.gw-edit #dg-detail-link, body.gw-edit #dg-floor{
  left:var(--gw-stage-l) !important; right:var(--gw-stage-r) !important;
  top:var(--gw-stage-t) !important; bottom:var(--gw-stage-b) !important;
}
body.gw-edit #dg-hotspots, body.gw-edit #dg-markers{ overflow:hidden; }
/* the tour HUD sits at the stage's bottom edge — where visitors get it */
body.gw-edit #dg-tour-hud{ left:var(--gw-stage-l); right:var(--gw-stage-r);
  bottom:calc(var(--gw-stage-b) + 18px); }

/* ---- EDIT MODE — compact tags, so two dozen cards don't wall off the scan ---- */
body.gw-edit .dg-hs-card{ width:190px; }
body.gw-edit .dg-hs-top{ padding:9px 12px 8px; }
body.gw-edit .dg-hs-head{ font-size:14px; letter-spacing:.14em; font-weight:500; }
body.gw-edit .dg-hs-sub{ margin-top:3px; font-size:7.5px; letter-spacing:.16em; }
body.gw-edit .dg-hs-bar{ padding:7px 12px; }
body.gw-edit .dg-hs-bar span{ font-size:8px; }
body.gw-edit .dg-hs-title .t{ font-size:34px; }
body.gw-edit .dg-hs-title .s{ font-size:9px; }
.dg-hs-title{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); text-align:center;
  pointer-events:none; font-family:'Montserrat',sans-serif; white-space:nowrap; }
/* GW7 — while the landing is up the title assembly owns the screen */
body.gw-landing-on #dg-hotspots{ z-index:1620; }
body.gw-landing-on .dg-hs.titlemode{ pointer-events:auto; }
.dg-hs-title .t{ font-size:84px; font-weight:200; letter-spacing:.34em; text-transform:uppercase; color:#fff;
  text-shadow:0 3px 20px rgba(0,0,0,.8), 0 0 70px rgba(0,0,0,.5); }
.dg-hs-title .s{ margin-top:16px; font-size:19px; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(255,255,255,.85); text-shadow:0 2px 12px rgba(0,0,0,.7); }

/* ===================== GW7 — THE 3-D LANDING CLUSTER =====================
   Logo, title, address, rule and the four doors are one assembly floating
   in the scene, projected and scaled with distance like any other hotspot.
   It fades out the moment a door is chosen, and returns on HOME. */
.gwl3d{ transition:opacity .5s ease; }
/* (the cluster no longer carries a logo — the corner mark is the one) */
.gwl3d-tail{ margin-top:26px; }
.gwl3d-rule{ width:150px; height:1px; margin:0 auto 26px;
  background:linear-gradient(90deg, transparent, var(--gw-acc), transparent); }
.gwl3d-btns{ display:flex; flex-direction:column; gap:12px; width:360px; margin:0 auto; }
.gwl3d-btn{ position:relative; min-height:56px; padding:17px 28px; cursor:pointer; pointer-events:auto;
  background:rgba(10,9,7,.42); backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(232,213,176,.34); border-radius:12px;
  font-family:'Montserrat',sans-serif; font-size:15px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7);
  transition:background .28s ease, border-color .28s ease, letter-spacing .28s ease, transform .18s ease; }
.gwl3d-btn:hover{ background:rgba(232,213,176,.24); border-color:rgba(232,213,176,.95); letter-spacing:.32em; }
.gwl3d-btn:active{ transform:translateY(1px); }
.gwl3d-btn.primary{ background:linear-gradient(180deg, rgba(232,213,176,.36), rgba(232,213,176,.17));
  border-color:rgba(232,213,176,.7); }
.gwl3d-btn.primary:hover{ background:linear-gradient(180deg, rgba(232,213,176,.5), rgba(232,213,176,.26)); }
/* off the landing, the cluster folds away and the title stands alone */
body.gw-visitor:not(.gw-landing-on):not(.gw-finale) .gwl3d{ opacity:0; pointer-events:none; visibility:hidden; }
/* the finale's copy lies flat over the estate — in a top-down shot a
   screen-space assembly already reads as lying on the ground */
body.gw-visitor.gw-finale .dg-hs.titlemode{ opacity:1 !important; }
/* the title itself keeps its own fade rules (gw-unit-stop / gw-group-stop) */
body.gw-landing-on .dg-hs.titlemode{ opacity:1 !important; }

/* GW7 — diving into one house hushes the REST of the group's chips, so the
   chosen house is the only voice while the camera flies in */
body.gw-visitor.gw-unit-stop .dg-hs.gz-group:not(.gz-on){ opacity:0; pointer-events:none;
  transition:opacity 1s cubic-bezier(.33,.9,.36,1); }

/* ---- FULL-BLEED DETAIL SLIDE — edge to edge, OS-clean ---- */
body.gw-visitor #dg-detail{ background:rgba(8,7,5,.6); backdrop-filter:blur(30px) saturate(1.15); -webkit-backdrop-filter:blur(30px) saturate(1.15); border-radius:0; }
/* GW4 — floorplan units: slide on the RIGHT half only, the LEFT half stays
   live 3-D with the gold plan lying on the house. Backdrop steps aside and
   the gallery hides (the plan is in the scene, not on the slide). */
body.gw-fp-on #dg-detail-backdrop{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
#dg-detail.fp-half .dg-d-gal{ display:none; }
body.gw-fp-on #dg-floor{ z-index:1451; }   /* plan reads above the dimmed scene chrome */
body.gw-visitor #dg-detail::before{ background:linear-gradient(90deg, rgba(232,213,176,.9), rgba(232,213,176,.15) 62%, transparent); }
body.gw-visitor #dg-detail::after{ display:none; }
body.gw-visitor #dg-detail-link{ display:none !important; }
body.gw-visitor #dg-detail .dg-d-gal{ flex:0 0 58%; }
body.gw-visitor #dg-detail .dg-gal.fill .dg-gal-thumbs{ left:0; right:0; bottom:0; padding:14px 16px; gap:9px; }
body.gw-visitor .dg-gal-thumb{ width:74px; height:50px; }
body.gw-visitor #dg-detail .dg-d-info{ padding:9vh 5vw 5vh 4vw; }
body.gw-visitor .dg-d-eyebrow{ color:var(--gw-acc); font-size:13px; }
body.gw-visitor .dg-d-title{ font-size:clamp(40px, 5vw, 68px); }
body.gw-visitor .dg-d-rule{ background:linear-gradient(90deg, rgba(232,213,176,.7), transparent); }
body.gw-visitor .dg-d-desc{ font-size:17.5px; line-height:1.8; max-width:52ch; }
body.gw-visitor .dg-d-specs{ gap:26px 28px; margin-top:36px; }
body.gw-visitor .dg-d-spec::before{ background:rgba(232,213,176,.75); height:40px; }
body.gw-visitor .dg-d-spec .k{ color:var(--gw-acc); font-size:11.5px; }
body.gw-visitor .dg-d-spec .v{ font-size:26px; }
.dg-d-feats{ margin-top:32px; display:flex; flex-direction:column; gap:13px; }
.dg-d-feat{ position:relative; padding-left:24px; font-size:15.5px; font-weight:300; line-height:1.5; color:rgba(255,255,255,.87); }
.dg-d-feat::before{ content:""; position:absolute; left:0; top:10px; width:12px; height:1.5px; background:var(--gw-acc,#e8d5b0); }
body.gw-visitor .dg-d-arrow{ font-size:14px; letter-spacing:.2em; padding:16px 24px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:2px; transition:background .25s, border-color .25s; }
body.gw-visitor .dg-d-arrow:hover{ background:rgba(232,213,176,.24); border-color:var(--gw-acc-soft); }
body.gw-visitor .dg-d-count{ font-size:12px; }
body.gw-visitor #dg-detail-handle{ height:56px; }
body.gw-visitor #dg-detail-handle .bar{ width:64px; height:5px; background:rgba(255,255,255,.5); }
body.gw-visitor #dg-detail-handle .cue{ font-size:10.5px; color:rgba(255,255,255,.55); }
/* big close for big fingers */
#dg-detail-x{ position:absolute; top:14px; right:14px; z-index:8; width:54px; height:54px; display:none; align-items:center; justify-content:center;
  background:rgba(8,7,5,.5); border:1px solid rgba(255,255,255,.16); border-radius:2px; color:#fff; cursor:pointer;
  transition:background .25s, border-color .25s; }
#dg-detail-x svg{ width:22px; height:22px; }
body.gw-visitor #dg-detail-x{ display:flex; }
#dg-detail-x:hover{ background:rgba(232,213,176,.32); border-color:var(--gw-acc-soft); }

/* ---- dossier + tour buttons pick up the accent, bigger targets ---- */
body.gw-visitor #dg-controls .dg-ctrl{ width:56px; height:56px; }
body.gw-visitor #dg-controls .dg-ctrl svg{ width:24px; height:24px; }
body.gw-visitor .dg-tbtn .lb{ font-size:14px !important; }

/* mobile — the same story, stacked */
@media (max-width:640px){
  .gwl-title{ letter-spacing:.08em; }
  .gwl-btn{ min-height:58px; font-size:14px; }
  #gw-nav{ left:12px; right:12px; justify-content:space-between; gap:4px; padding:6px; }
  .gwn-btn{ padding:12px 10px; font-size:11px; letter-spacing:.14em; min-height:50px; flex:1; }
  body.gw-visitor .dg-hs-card{ width:min(360px, 86vw); }
  body.gw-visitor #dg-detail-body{ flex-direction:column; }
  body.gw-visitor #dg-detail .dg-d-gal{ flex:0 0 42%; }
  body.gw-visitor #dg-detail .dg-d-info{ padding:26px 22px 90px; }
}


/* ===================== GW8 — THE CONTACT PAGE =====================
   The one 2-D page in the presentation. It borrows the dossier's glass
   shell; only the contents are new. */
#dg-enq{ margin-top:22px; }
.dg-enq-row{ margin-bottom:13px; }
.dg-enq-row label{ display:block; margin-bottom:5px; font-size:10px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(232,213,176,.85); }
.dg-enq-row input, .dg-enq-row textarea{ width:100%; box-sizing:border-box; padding:11px 13px;
  background:rgba(240,237,232,.07); border:1px solid rgba(240,237,232,.2); border-radius:10px;
  color:#f0ede8; font:400 14px/1.5 'Montserrat',sans-serif; transition:border-color .25s, background .25s; }
.dg-enq-row input::placeholder, .dg-enq-row textarea::placeholder{ color:rgba(240,237,232,.35); }
.dg-enq-row input:focus, .dg-enq-row textarea:focus{ outline:none; border-color:var(--gw-acc);
  background:rgba(240,237,232,.11); }
.dg-enq-row textarea{ resize:vertical; min-height:74px; }
.dg-enq-note{ min-height:18px; margin-top:10px; font-size:12.5px; letter-spacing:.04em; color:rgba(240,237,232,.7); }
.dg-enq-note.ok{ color:var(--gw-acc); }
.dg-enq-note.warn{ color:#d98b6a; }
.dg-ct-h{ font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  margin-bottom:9px; }
.dg-ct-lines{ margin-bottom:13px; font-size:14px; line-height:1.7; color:rgba(240,237,232,.8); }
#dg-enq .dg-dos-btn.primary{ width:100%; margin-top:4px; border-radius:10px; }
#dg-dos-right .dg-dos-btn{ border-radius:10px; }


/* GW8 — the contact page reuses the dossier shell, but its left column is
   a form, not a photo: the heading belongs at the TOP and the column
   scrolls if the viewport is short. */
body.gw-visitor #dg-dos-left{ display:flex; flex-direction:column; padding:30px 34px; overflow:auto; }
body.gw-visitor #dg-dos-left .dg-dos-leftcap{ position:static; padding:0 0 4px; background:none;
  order:-1; flex:0 0 auto; }
body.gw-visitor #dg-dos-right{ overflow:auto; }

/* the contact columns scroll, but the bar itself stays out of the picture */
body.gw-visitor #dg-dos-left, body.gw-visitor #dg-dos-right{ scrollbar-width:none; -ms-overflow-style:none; }
body.gw-visitor #dg-dos-left::-webkit-scrollbar, body.gw-visitor #dg-dos-right::-webkit-scrollbar{ width:0; height:0; }


/* ===================== GW10 — CONTACT, in the landing's language =====================
   The old dossier styling was left over from the previous editor. Same
   glass, same rounded buttons, same weight of type as the opening menu. */
body.gw-visitor #dg-dossier{ border-radius:18px; overflow:hidden; }
body.gw-visitor #dg-dos-handle .cue{ font-size:12px; letter-spacing:.26em; }
body.gw-visitor #dg-dos-left{ padding:38px 42px; }
body.gw-visitor #dg-dos-right{ padding:38px 42px; }
body.gw-visitor .dg-dos-eyebrow{ font-size:12px; letter-spacing:.34em; }
body.gw-visitor .dg-dos-name{ font-size:44px; letter-spacing:.06em; }
body.gw-visitor .dg-dos-addr{ font-size:15px; letter-spacing:.06em; }
/* the form */
body.gw-visitor .dg-enq-row label{ font-size:12px; letter-spacing:.24em; }
body.gw-visitor .dg-enq-row input,
body.gw-visitor .dg-enq-row textarea{ padding:14px 16px; border-radius:12px; font-size:16px; }
body.gw-visitor .dg-enq-note{ font-size:14px; }
/* the details */
body.gw-visitor .dg-ct-h{ font-size:17px; letter-spacing:.16em; margin-bottom:11px; }
body.gw-visitor .dg-ct-lines{ font-size:16px; line-height:1.75; }
body.gw-visitor .dg-dos-row{ padding:11px 0; }
body.gw-visitor .dg-dos-row .k{ font-size:12px; letter-spacing:.2em; }
body.gw-visitor .dg-dos-row .v{ font-size:16px; }
/* every button on this page wears the landing's coat */
body.gw-visitor #dg-dossier .dg-dos-btn{
  min-height:56px; padding:17px 28px; border-radius:12px;
  background:rgba(10,9,7,.42); backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(232,213,176,.34);
  font-family:'Montserrat',sans-serif; font-size:15px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7);
  transition:background .28s ease, border-color .28s ease, letter-spacing .28s ease, transform .18s ease; }
body.gw-visitor #dg-dossier .dg-dos-btn:hover{
  background:rgba(232,213,176,.24); border-color:rgba(232,213,176,.95); letter-spacing:.3em; }
body.gw-visitor #dg-dossier .dg-dos-btn:active{ transform:translateY(1px); }
body.gw-visitor #dg-dossier .dg-dos-btn.primary{
  background:linear-gradient(180deg, rgba(232,213,176,.36), rgba(232,213,176,.17));
  border-color:rgba(232,213,176,.7); }
body.gw-visitor #dg-dossier .dg-dos-btn.primary:hover{
  background:linear-gradient(180deg, rgba(232,213,176,.5), rgba(232,213,176,.26)); }
body.gw-visitor #dg-dossier .dg-dos-cta{ display:flex; flex-direction:column; gap:12px; }

/* GW10 — the contact page needs the room its bigger type asks for */
body.gw-visitor #dg-dossier{ width:min(1180px,94vw); height:min(820px,90vh); }

/* GW11 — the closing page carries the whole menu, so the tour's own
   Back / Home / Next have nothing left to do there */
body.gw-visitor.gw-finale #dg-tour-hud{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
/* GW13 — no white navigation ring on the opening or the closing page */
body.gw-landing-on #gw-navcursor,
body.gw-visitor.gw-finale #gw-navcursor{ display:none !important; }


/* ===================== GW16 — FREE ORBIT =====================
   The Aerial View door hands the visitor the landing's own ride with the
   graphics taken away: the whole property turning, nothing on top of it
   but a home button and five lines telling them what their hands do. */
body.gw-orbit-explore #gw-landing{ background:none; }
body.gw-orbit-explore .gwl3d,
body.gw-orbit-explore .dg-hs.titlemode{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
/* the home button comes back, bottom right, while they explore */
body.gw-orbit-explore #gw-slot{
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  right:24px; left:auto; top:auto; bottom:26px; }
body.gw-orbit-explore #gw-home{ transform:scale(1); opacity:1; pointer-events:auto; }
body.gw-orbit-explore #gw-back-group{ transform:scale(0); opacity:0; pointer-events:none; }

/* the crib sheet */
/* (GW16 help panel retired — see the GW18 block below) */
.gw-help-row{ display:flex; align-items:baseline; gap:14px; padding:4px 0; white-space:nowrap; }
.gw-help-row b{ min-width:112px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gw-acc); }
.gw-help-row span{ font-size:13.5px; font-weight:400; letter-spacing:.04em; color:rgba(255,255,255,.9); }
body.gw-edit #gw-help{ display:none; }
@media (max-width:820px){
  /* (help panel sizing lives in the GW18 block) */
}


/* ═════════════════ GW18 — THE HOME PAGE, IN 2-D ═════════════════
   Everything the visitor reads is stuck to the screen: it cannot be cut
   off in portrait, cannot drift behind a roof, cannot climb out of view.
   Ranged along the left, because a title centred over a scan fights it. */
#gw-landing{ justify-content:flex-start; align-items:flex-start; text-align:left; }
body.gw-visitor #gw-landing{ pointer-events:none; }
.gwl-inner{ max-width:none; width:auto; padding:0; margin:6vh 0 0 5vw;
  text-align:left; animation:gwlIn 1s cubic-bezier(.16,1,.3,1) both;
  transition:transform .9s cubic-bezier(.33,.9,.36,1); }
.gwl-title{ margin:0; font-size:clamp(36px, 7.44vw, 98px); font-weight:200; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; line-height:1.02; white-space:nowrap;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
  transition:font-size .9s cubic-bezier(.33,.9,.36,1), letter-spacing .9s cubic-bezier(.33,.9,.36,1); }
.gwl-addr{ margin-top:12px; font-size:clamp(10px, 1.15vw, 15px); font-weight:500; letter-spacing:.32em;
  text-transform:uppercase; color:rgba(255,255,255,.78); white-space:nowrap;
  transition:font-size .9s cubic-bezier(.33,.9,.36,1), opacity .6s ease, margin-top .9s ease; }
.gwl-btns{ display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  width:min(330px, 74vw); margin:34px 0 0;
  transition:transform .8s cubic-bezier(.33,.9,.36,1), opacity .6s ease, visibility .6s; }
.gwl-btn{ position:relative; width:100%; min-height:54px; padding:16px 26px; cursor:pointer; pointer-events:auto;
  text-align:left;
  background:rgba(10,9,7,.42); backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(232,213,176,.34); border-radius:12px;
  font-family:'Montserrat',sans-serif; font-size:14px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7);
  transition:background .28s ease, border-color .28s ease, letter-spacing .28s ease, transform .18s ease; }
.gwl-btn::before{ display:none; }
.gwl-btn:hover{ background:rgba(232,213,176,.24); border-color:rgba(232,213,176,.95); letter-spacing:.28em; }
.gwl-btn:active{ transform:translateY(1px); }
.gwl-btn.primary{ background:linear-gradient(180deg, rgba(232,213,176,.36), rgba(232,213,176,.17));
  border-color:rgba(232,213,176,.7); }
.gwl-btn.primary:hover{ background:linear-gradient(180deg, rgba(232,213,176,.5), rgba(232,213,176,.26)); }

/* ── in a mode: the doors slide off to the left, the title becomes a
      corner watermark, and the mode bar takes the bottom of the screen ── */
body.gw-mode-on #gw-landing{ opacity:1 !important; visibility:visible !important; background:none; }
body.gw-mode-on .gwl-inner{ margin:18px 0 0 22px; }
body.gw-mode-on .gwl-title{ font-size:clamp(15px, 1.5vw, 20px); letter-spacing:.26em; }
body.gw-mode-on .gwl-addr{ margin-top:5px; font-size:clamp(8px, .72vw, 10px); opacity:.62; }
body.gw-mode-on .gwl-btns{ transform:translateX(-140%); opacity:0; visibility:hidden; pointer-events:none; }
/* the finale: the tour is over, so the name grows back to full size */
body.gw-mode-on.gw-finale .gwl-inner{ margin:6vh 0 0 5vw; }
body.gw-mode-on.gw-finale .gwl-title{ font-size:clamp(36px, 7.44vw, 98px); letter-spacing:.16em; }
body.gw-mode-on.gw-finale .gwl-addr{ margin-top:12px; font-size:clamp(10px, 1.15vw, 15px); opacity:.78; }
/* the corner mark rides with it */
#gw-wm{ left:auto; right:24px; top:22px; }
#gw-wm img{ height:var(--gw-wm-h,44px); opacity:.85; }
body.gw-visitor #gw-wm{ display:block; }
body.dg-dos-open #gw-wm{ opacity:0; }

/* ── THE MODE BAR: three doors, always present, the one you are in lit ── */
body.gw-visitor #gw-nav{ display:flex; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease .15s, visibility .6s, transform .6s cubic-bezier(.33,.9,.36,1) .15s;
  transform:translateX(-50%) translateY(12px); }
body.gw-visitor.gw-mode-on #gw-nav{ opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0); }
/* it stays put during the tour — the tour's own buttons sit above it */
body.gw-visitor.gw-tour-on #gw-nav{ opacity:1; pointer-events:auto; }
body.gw-landing-on:not(.gw-mode-on) #gw-nav{ opacity:0 !important; pointer-events:none !important; }
body.dg-detail-open #gw-nav, body.dg-dos-open #gw-nav{ opacity:0; pointer-events:none; }
.gwn-btn.active{ background:linear-gradient(180deg, rgba(232,213,176,.36), rgba(232,213,176,.17));
  border-color:rgba(232,213,176,.7); color:#fff; }
/* the tour's Back / Home / Next ride above the mode bar */
body.gw-visitor.gw-tour-on #dg-tour-hud{ bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ── SKY VIEW instructions: centre screen, large, one slow breath ── */
#gw-help{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); right:auto; bottom:auto;
  z-index:1215; padding:0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  opacity:0; visibility:hidden; pointer-events:none; text-align:center;
  transition:opacity 1.4s ease, visibility 1.4s; }
#gw-help.show{ opacity:1; visibility:visible; }
body.gw-orbit-explore #gw-help{ }                     /* shown by gwHelpShow, not by the mode */
.gw-help-row{ display:flex; align-items:baseline; justify-content:center; gap:16px;
  padding:7px 0; white-space:nowrap; }
.gw-help-row b{ min-width:0; font-size:clamp(13px,1.35vw,19px); font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gw-acc); text-shadow:0 2px 14px rgba(0,0,0,.85); }
.gw-help-row i{ font-style:normal; font-size:clamp(13px,1.3vw,18px); color:rgba(255,255,255,.55); }
.gw-help-row span{ font-size:clamp(13px,1.35vw,19px); font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.85); }

/* portrait rules live at the foot of this file, after every desktop rule */

/* GW18b — the studio mark owns the top right; HOME moves to the bottom
   right so the two never sit on top of each other. */
#gw-wm{ right:22px; top:18px; z-index:1215; pointer-events:none; }
/* the PNG carries a lot of transparent padding, so it needs to run big to
   read as a small mark */
#gw-wm img{ height:var(--gw-wm-h,146px); opacity:.95;
  filter:brightness(1.5) drop-shadow(0 2px 14px rgba(0,0,0,.8)); }
#gw-slot{ right:24px; top:auto; bottom:26px; }
body.gw-orbit-explore #gw-slot{ right:24px; top:auto; bottom:26px; }


/* ═════════════ PORTRAIT / PHONE — LAST WORD IN THE FILE ═════════════
   These have to sit after every desktop rule, or a later block with the
   same specificity quietly wins and the phone gets the desktop sizes. */
@media (max-width:820px){
  .gwl-inner{ margin:5vh 0 0 6vw; }
  .gwl-title{ font-size:clamp(29px, 9.12vw, 53px); letter-spacing:.1em; white-space:normal; }
  .gwl-addr{ font-size:11px; letter-spacing:.22em; white-space:normal; }
  .gwl-btns{ width:min(300px, 82vw); margin-top:26px; }
  body.gw-mode-on .gwl-inner{ margin:14px 0 0 16px; }
  body.gw-mode-on .gwl-title{ font-size:14px; letter-spacing:.2em; }
  body.gw-mode-on.gw-finale .gwl-inner{ margin:5vh 0 0 6vw; }
  body.gw-mode-on.gw-finale .gwl-title{ font-size:clamp(29px, 9.12vw, 53px); letter-spacing:.1em; }
  body.gw-mode-on.gw-finale .gwl-addr{ font-size:11px; }
  body.gw-mode-on .gwl-addr{ font-size:8px; }
  #gw-wm{ right:14px; top:12px; }
  #gw-wm img{ height:83px; }
  body.gw-visitor #gw-slot,
  body.gw-orbit-explore #gw-slot{ right:14px; top:auto;
    bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  .gw-help-row{ gap:10px; padding:5px 0; }
}
@media (max-width:640px){
  /* the phone bar runs edge to edge, so it must NOT also be shifted half
     its own width to the left — that is what pushed it off screen. */
  body.gw-visitor #gw-nav{ transform:translateY(12px); }
  body.gw-visitor.gw-mode-on #gw-nav{ transform:translateY(0); }
  /* the tour's Back / Home / Next clear the taller phone bar */
  body.gw-visitor.gw-tour-on #dg-tour-hud{ bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
}


/* ═══════════════════ GW19 - ONE FAMILY OF CONTROLS ═══════════════════
   Everything the visitor can press is now the same object: dark glass, a
   gold hairline, a 12px corner. The mode bar is the reference; the unit
   labels, Back / Next and HOME are made to match it. These rules are last
   in the file on purpose - see the ordering note above. */

/* ── the guided tour takes the bar's place ──────────────────────────────
   The finale is exempt: its own HUD is hidden and the landing buttons are
   slid away, so hiding the bar there would leave the closing page with no
   menu at all. */
body.gw-visitor.gw-tour-on:not(.gw-finale) #gw-nav{
  opacity:0; visibility:hidden; pointer-events:none; }

/* ── Back / Next, wearing the mode bar exactly ────────────────────────── */
body.gw-visitor.gw-tour-on #dg-tour-hud{
  left:50%; right:auto; width:auto; bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  gap:10px; padding:8px;
  background:rgba(8,7,5,.38);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.12); border-radius:18px;
  transform:translateX(-50%) translateY(14px); }
body.gw-visitor.gw-tour-on #dg-tour-hud.on{ transform:translateX(-50%); }
body.gw-visitor #dg-tour-hud .dg-tbtn{
  height:auto; min-height:56px; min-width:0; padding:14px 26px;
  background:transparent; border:1px solid transparent; border-radius:12px;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
  color:rgba(255,255,255,.85);
  font:500 14px/1 'Montserrat',sans-serif; letter-spacing:.26em; text-transform:uppercase;
  transition:background .25s, color .25s, border-color .25s; }
body.gw-visitor #dg-tour-hud .dg-tbtn .lb{ font-size:14px !important; letter-spacing:.26em; }
body.gw-visitor #dg-tour-hud .dg-tbtn .ic{ display:none; }   /* the mode pills are words only */
body.gw-visitor #dg-tour-hud .dg-tbtn:hover{ background:rgba(255,255,255,.07); color:#fff; filter:none; }
body.gw-visitor #dg-tour-hud .dg-tbtn:active{ transform:translateY(1px); }

/* ── HOME: the bottom right corner, in every mode ─────────────────────── */
body.gw-visitor #gw-slot,
body.gw-orbit-explore #gw-slot{
  left:auto; right:24px; top:auto; bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px; }
body.gw-visitor #gw-slot .gw-round{
  width:56px; height:56px; border-radius:12px;
  border:1px solid rgba(232,213,176,.7); background:rgba(8,7,5,.38);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:none; }
body.gw-visitor #gw-slot .gw-round:hover{
  background:rgba(232,213,176,.22); border-color:rgba(232,213,176,.95); transform:none; }

/* ── ONE PILL, THREE MODES: bottom left ───────────────────────────────── */
#gw-cycle{ box-sizing:border-box; position:fixed; left:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:1206; display:none; align-items:center; min-height:56px; padding:14px 26px;
  cursor:pointer; pointer-events:auto;
  background:rgba(8,7,5,.38);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(232,213,176,.7); border-radius:12px;
  color:rgba(255,255,255,.85);
  font-family:'Montserrat',sans-serif; font-size:14px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; white-space:nowrap;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s, background .25s, border-color .25s; }
body.gw-visitor.gw-mode-on #gw-cycle{ display:flex; opacity:1; visibility:visible; }
body.gw-visitor #gw-cycle:hover{ background:rgba(232,213,176,.22); border-color:rgba(232,213,176,.95); color:#fff; }
body.gw-visitor #gw-cycle:active{ transform:translateY(1px); }
body.dg-detail-open #gw-cycle, body.dg-dos-open #gw-cycle{ opacity:0; pointer-events:none; }
body.gw-edit #gw-cycle{ display:none !important; }
/* only the words change - the pill itself never moves or resizes */
.gwc-lb{ display:block; transition:opacity .2s ease; }
.gwc-lb.swap{ opacity:0; }

/* ── the unit labels wear the pill, gold all the way round ─────────────
   The glass moves OFF .dg-hs-card, whose transform is rewritten by the
   projector every frame, and ONTO .dg-hs-top, which already owns the
   scale. Nothing here may name transform on .dg-hs-card. */
body.gw-visitor .dg-hs-card{
  border-radius:0; overflow:visible;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-card{ clip-path:none; }
body.gw-visitor .dg-hs-top{
  border:1px solid rgba(232,213,176,.7); border-radius:12px;
  background:rgba(8,7,5,.38);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 6px 22px rgba(0,0,0,.4); }
body.gw-visitor .dg-hs-top::before{ display:none; }   /* the underline became a border */
/* the house you are actually looking at lights up, like the active pill */
body.gw-visitor .dg-hs.gz-on .dg-hs-top{
  background:rgba(232,213,176,.16); border-color:rgba(232,213,176,.95); }

/* ── the crib sheet: a quick fade per slide, not one long breath ─────── */
#gw-help{ transform:translate(-50%,-50%) translateY(10px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.22,.9,.3,1), visibility .38s; }
#gw-help.show{ transform:translate(-50%,-50%); }

@media (max-width:820px){
  /* the estate name breaks before its last word, and runs larger for it */
  .gwl-title .gwl-tw2{ display:block; }
  #gw-cycle{ left:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    min-height:48px; padding:12px 18px; font-size:12px; letter-spacing:.2em; }
  body.gw-visitor #gw-slot,
  body.gw-orbit-explore #gw-slot{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    width:48px; height:48px; }
  body.gw-visitor #gw-slot .gw-round{ width:48px; height:48px; }
  body.gw-visitor #gw-slot .gw-round svg{ width:22px; height:22px; }
  body.gw-visitor.gw-tour-on #dg-tour-hud{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)); padding:6px; gap:6px; }
  body.gw-visitor #dg-tour-hud .dg-tbtn{ min-height:48px; padding:12px 18px; }
  body.gw-visitor #dg-tour-hud .dg-tbtn .lb{ font-size:12px !important; letter-spacing:.2em; }
}


/* ═══════════════════ GW20 - THE FOUR CORNERS ═══════════════════
   The three-door bar is retired. One pill names the mode and cycles it,
   and it sits bottom RIGHT, under a right-handed thumb. HOME takes the
   top right. The studio credit owns the bottom left. Back and Next keep
   the bottom centre during the tour. Appended last, so it wins - see the
   ordering note further up this file. */

/* the bar is gone; the pill does its job in every mode */
body.gw-visitor #gw-nav{ display:none !important; }

/* ── the home page: bigger doors, more air between them ── */
.gwl-btns{ gap:18px; width:min(420px, 82vw); margin:44px 0 0; }
.gwl-btn{ min-height:68px; padding:22px 32px; font-size:15px; letter-spacing:.24em; }

/* ── bottom left: the credit ── */
#gw-wm{ left:24px; right:auto; top:auto; bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:1215; pointer-events:none; text-align:left; }
.gw-wm-by{ margin:0 0 3px 3px; font-family:'Montserrat',sans-serif;
  font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.6); text-shadow:0 2px 10px rgba(0,0,0,.85);
  transition:opacity .6s ease; }
#gw-wm img{ display:block; height:var(--gw-wm-h,124px); opacity:.95;
  filter:brightness(1.5) drop-shadow(0 2px 14px rgba(0,0,0,.8));
  transition:height .8s cubic-bezier(.33,.9,.36,1); }
/* in a mode the sentence goes and the mark alone stays, smaller */
body.gw-mode-on .gw-wm-by{ opacity:0; }
body.gw-mode-on #gw-wm img{ height:82px; }

/* ── top right: HOME ── */
body.gw-visitor #gw-slot,
body.gw-orbit-explore #gw-slot{
  left:auto; right:24px; bottom:auto; top:calc(22px + env(safe-area-inset-top, 0px));
  width:56px; height:56px; }

/* ── bottom right: the one pill that names and changes the mode ── */
#gw-cycle{ left:auto; right:24px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
body.gw-visitor #gw-cycle:active{ transform:none; }

@media (max-width:820px){
  .gwl-btns{ gap:14px; width:min(340px, 86vw); margin:32px 0 0; }
  .gwl-btn{ min-height:60px; padding:18px 24px; font-size:13px; letter-spacing:.2em; }
  #gw-wm{ left:14px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  #gw-wm img{ height:76px; }
  .gw-wm-by{ font-size:8px; letter-spacing:.2em; }
  body.gw-mode-on #gw-wm img{ height:52px; }
  body.gw-visitor #gw-slot,
  body.gw-orbit-explore #gw-slot{ right:14px; top:calc(12px + env(safe-area-inset-top, 0px));
    width:48px; height:48px; }
  #gw-cycle{ right:14px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* on a phone the centred Back/Next bar and the pill would touch, so the
     pill steps up above it for the length of the tour */
  body.gw-visitor.gw-tour-on:not(.gw-finale) #gw-cycle{
    bottom:calc(74px + env(safe-area-inset-bottom, 0px)); }
}


/* ═══════════════════ V5 — THE MAGAZINE (14 Oct 2026; the type made fine, 15 Oct) ═══════════════════
   His notes on the live V4: "I'm not a fan of the glass slides and the font. I want it to look more like a magazine, more
   elegant, clean white writing, easy to look at, easy to tap, quite bold and headlining, almost like … the face of a
   magazine" — and for the tour: "ditch the slides underneath them altogether … keep the golden stem … the next and back
   buttons and all the buttons in the user interface … that see-through magazine look."
   15 Oct, on the first V5: "the text is way too heavy. I want it to be elegant. Fine. And not thick. Throughout the whole
   tour. I did like the old text" — so the magazine LAYOUT stays and the TYPE is V4's own again: Montserrat, ExtraLight (200)
   for the big words, Light (300) for the words you press, Regular (400) only for the small tracked kickers; capitals and
   wide spacing, as V4 had them. Every line is thinner to match (stems, rings, icons). "That funny line before 22 Chum
   Street can go" — gone.
   No glass anywhere a visitor looks: white type straight on the picture, held up by a soft shadow and, on the cover, a
   scrim. Gold stays as the thread: the stems, the discs, the numbers. Appended last, so it wins (the ordering note above).
   The layer's JS for V5 is marked "V5" in digler-layer.js. */
:root{
  --v5-sans:'Montserrat', system-ui, sans-serif;
  --v5-gold:#e9cf9c;
  --v5-ink:#ffffff;
  --v5-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.6), 0 0 32px rgba(0,0,0,.4);
  --v5-drop:drop-shadow(0 1px 2px rgba(0,0,0,.85)) drop-shadow(0 3px 10px rgba(0,0,0,.55));
}

/* ── THE COVER ─────────────────────────────────────────────────────────── */
/* a scrim, not a sheet: dark where the words are (top and bottom), clear in the middle where the estate is */
body.gw-landing-on:not(.gw-mode-on) #gw-landing{
  background:
    linear-gradient(180deg, rgba(6,5,4,.62) 0%, rgba(6,5,4,.22) 30%, rgba(6,5,4,0) 46%, rgba(6,5,4,0) 56%, rgba(6,5,4,.34) 74%, rgba(6,5,4,.78) 100%),
    linear-gradient(90deg, rgba(6,5,4,.34) 0%, rgba(6,5,4,0) 46%); }
#gw-landing .gwl-inner{ position:absolute; inset:0; margin:0; max-width:none; width:auto;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:max(4.6vh, 26px) 5.2vw calc(max(4.6vh, 26px) + env(safe-area-inset-bottom, 0px)); box-sizing:border-box;
  transition:padding .9s cubic-bezier(.33,.9,.36,1); }
/* the kicker: the address, small tracked capitals */
#gw-landing .gwl-addr{ order:0; display:block; margin:0 0 clamp(12px,1.8vh,20px);
  font:400 clamp(10.5px, .95vw, 13px)/1.2 var(--v5-sans); letter-spacing:.38em; text-transform:uppercase;
  color:rgba(255,255,255,.9); text-shadow:var(--v5-shadow); white-space:nowrap; opacity:1; }
#gw-landing .gwl-addr::before{ display:none; }
/* the masthead: the estate's name in V4's own hand — ExtraLight capitals, wide apart — two lines, magazine-big */
#gw-landing .gwl-title{ order:1; margin:0; font-family:var(--v5-sans); font-weight:200; font-style:normal;
  font-size:clamp(44px, 8vw, 128px); line-height:1.02; letter-spacing:.14em; text-transform:uppercase;
  color:var(--v5-ink); text-shadow:var(--v5-shadow); white-space:normal; }
#gw-landing .gwl-title .gwl-tw2{ display:block; font-style:normal; font-weight:200; letter-spacing:.14em; padding-left:0; }
/* the standfirst: the estate's own line */
#gw-landing .gwl-sf{ order:2; margin:clamp(16px,2.4vh,28px) 0 0; max-width:36ch;
  font:300 clamp(14.5px, 1.2vw, 18px)/1.6 var(--v5-sans); letter-spacing:.03em;
  color:rgba(255,255,255,.95); text-shadow:var(--v5-shadow); transition:opacity .5s ease; }
/* the cover lines: number · words · arrow, a hairline under each — the whole row is the button */
#gw-landing .gwl-btns{ order:3; margin:auto 0 0; padding-top:24px; gap:0;
  width:min(520px, 90vw); display:flex; flex-direction:column; align-items:stretch;
  border-top:1px solid rgba(255,255,255,.34); }
#gw-landing .gwl-btn{ display:flex; align-items:center; gap:clamp(14px,1.4vw,22px); width:100%;
  min-height:clamp(58px, 7.2vh, 72px); padding:10px 4px; margin:0; box-sizing:border-box;
  background:none; border:0; border-bottom:1px solid rgba(255,255,255,.34); border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; text-align:left; cursor:pointer;
  font:300 clamp(15px, 1.35vw, 19px)/1.1 var(--v5-sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--v5-ink); text-shadow:var(--v5-shadow);
  transition:color .25s ease, padding .3s cubic-bezier(.33,.9,.36,1); }
#gw-landing .gwl-btn::before{ display:none; }
#gw-landing .gwl-btn .gwl-n{ flex:0 0 2.6em; font:400 clamp(10px,.8vw,11.5px)/1 var(--v5-sans); letter-spacing:.2em;
  color:var(--v5-gold); text-shadow:var(--v5-shadow); }
#gw-landing .gwl-btn .gwl-w{ flex:1 1 auto; }
#gw-landing .gwl-btn .gwl-arr{ flex:0 0 auto; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round; filter:var(--v5-drop); opacity:.6;
  transition:transform .3s cubic-bezier(.33,.9,.36,1), opacity .25s; }
#gw-landing .gwl-btn:hover, #gw-landing .gwl-btn:focus-visible{ background:none; color:var(--v5-gold); padding-left:12px;
  letter-spacing:.24em; outline:none; }
#gw-landing .gwl-btn:hover .gwl-arr, #gw-landing .gwl-btn:focus-visible .gwl-arr{ opacity:1; transform:translateX(6px); }
#gw-landing .gwl-btn:active{ transform:none; color:var(--v5-gold); }
/* the guided tour is the lead story: a little larger, the same fine hand */
#gw-landing .gwl-btn.primary{ background:none; border-color:rgba(255,255,255,.34);
  font-size:clamp(18px, 1.75vw, 25px); font-weight:300; letter-spacing:.22em; min-height:clamp(70px, 9vh, 88px); }
#gw-landing .gwl-btn.primary .gwl-arr{ opacity:.9; width:28px; height:28px; }
#gw-landing .gwl-btn.primary:hover{ background:none; }

/* ── IN A MODE: the cover becomes the corner folio ─────────────────────── */
body.gw-mode-on #gw-landing .gwl-inner{ padding:max(16px, 2.4vh) 22px 0; }
body.gw-mode-on #gw-landing .gwl-addr{ margin:0 0 7px; font-size:8.5px; letter-spacing:.32em; opacity:.85; }
body.gw-mode-on #gw-landing .gwl-title{ font-size:clamp(15px, 1.4vw, 19px); line-height:1; letter-spacing:.24em; white-space:nowrap; }
body.gw-mode-on #gw-landing .gwl-title .gwl-tw2{ display:inline; letter-spacing:.24em; }
body.gw-mode-on #gw-landing .gwl-sf{ opacity:0; visibility:hidden; height:0; margin:0; }
body.gw-mode-on #gw-landing .gwl-btns{ border-top-color:transparent; }

/* ── THE CREDIT: top right on the cover (the cover lines own the bottom), back to the corner in a mode ── */
body.gw-landing-on:not(.gw-mode-on) #gw-wm{ left:auto; right:3.4vw; top:max(2.4vh, 14px); bottom:auto; text-align:right; }
body.gw-landing-on:not(.gw-mode-on) .gw-wm-by{ margin:0 6px 0 0; font:400 9px/1.3 var(--v5-sans); letter-spacing:.3em;
  color:rgba(255,255,255,.82); text-shadow:var(--v5-shadow); }
body.gw-landing-on:not(.gw-mode-on) #gw-wm img{ height:110px; margin-left:auto; }

/* ── THE TOUR'S BUTTONS: Back · the folio · Next, fine capitals straight on the picture ── */
body.gw-visitor.gw-tour-on #dg-tour-hud{ background:none; border:0; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; gap:clamp(18px, 3vw, 46px); }
body.gw-visitor #dg-tour-hud .dg-tbtn{ min-height:60px; padding:10px 8px; gap:12px;
  background:none; border:0; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
  font:300 clamp(14px, 1.2vw, 17px)/1 var(--v5-sans); letter-spacing:.26em; text-transform:uppercase; color:var(--v5-ink);
  text-shadow:var(--v5-shadow); }
body.gw-visitor #dg-tour-hud .dg-tbtn .lb{ font-size:inherit !important; letter-spacing:.26em; }
body.gw-visitor #dg-tour-hud .dg-tbtn .ic{ display:flex; }
body.gw-visitor #dg-tour-hud .dg-tbtn svg{ width:24px; height:24px; stroke-width:1.1; filter:var(--v5-drop); }
body.gw-visitor #dg-tour-hud .dg-tbtn:hover{ background:none; color:var(--v5-gold); filter:none; }
body.gw-visitor #dg-tour-hud .dg-tbtn.prev:hover .ic{ transform:translateX(-4px); }
body.gw-visitor #dg-tour-hud .dg-tbtn.next:hover .ic{ transform:translateX(4px); }
body.gw-visitor #dg-tour-hud .dg-tbtn .ic{ transition:transform .3s cubic-bezier(.33,.9,.36,1); }
/* the folio: where you are, like a page number */
body.gw-visitor #dg-tour-chip{ flex-direction:column; align-items:center; gap:7px; padding:0 4px; min-width:9em;
  background:none; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; white-space:nowrap; }
body.gw-visitor #dg-tour-chip .t{ font:300 clamp(12px, 1.05vw, 14px)/1.05 var(--v5-sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--v5-ink); text-shadow:var(--v5-shadow); }
body.gw-visitor #dg-tour-chip .c{ order:-1; opacity:1; font:400 9.5px/1 var(--v5-sans); letter-spacing:.32em;
  color:var(--v5-gold); text-shadow:var(--v5-shadow); }

/* ── HOME and BACK-TO-GROUP: a fine white ring, see-through ─────────────── */
body.gw-visitor #gw-slot .gw-round, body.gw-visitor .gw-round{
  background:rgba(0,0,0,.06); border:1px solid rgba(255,255,255,.9); border-radius:50%;
  backdrop-filter:none; -webkit-backdrop-filter:none; color:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.4), inset 0 0 12px rgba(0,0,0,.15); }
body.gw-visitor .gw-round svg{ filter:var(--v5-drop); stroke-width:1.2; }
body.gw-visitor #gw-slot .gw-round:hover, body.gw-visitor .gw-round:hover{
  background:rgba(0,0,0,.12); border-color:var(--v5-gold); color:var(--v5-gold); }

/* ── THE MODE BUTTON: a cover line in the corner ───────────────────────── */
#gw-cycle{ flex-direction:column; align-items:flex-end; gap:6px; min-height:0; padding:8px 4px;
  background:none; border:0; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
#gw-cycle .gwc-k{ font:400 9px/1 var(--v5-sans); letter-spacing:.32em; text-transform:uppercase;
  color:var(--v5-gold); text-shadow:var(--v5-shadow); }
#gw-cycle .gwc-row{ display:flex; align-items:center; gap:10px; }
#gw-cycle .gwc-lb{ font:300 clamp(14px, 1.2vw, 17px)/1 var(--v5-sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--v5-ink); text-shadow:var(--v5-shadow); }
#gw-cycle .gwc-ic{ width:19px; height:19px; fill:none; stroke:#fff; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
  filter:var(--v5-drop); transition:transform .5s cubic-bezier(.33,.9,.36,1); }
body.gw-visitor #gw-cycle:hover{ background:none; }
body.gw-visitor #gw-cycle:hover .gwc-lb{ color:var(--v5-gold); }
body.gw-visitor #gw-cycle:hover .gwc-ic{ transform:rotate(180deg); stroke:var(--v5-gold); }

/* ── THE UNIT LABELS: no slide. A folio on a gold disc, on the golden stem ── */
body.gw-visitor .dg-hs-card{ width:auto !important; min-width:0; background:none; border:0;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; overflow:visible; }
body.gw-visitor .dg-hs-top, body.gw-visitor .dg-hs.gz-on .dg-hs-top,
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-top{
  background:none; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0 0 15px; text-align:center; white-space:nowrap; }
/* the disc the label stands on — a gold ring seen at an angle, so it reads as a thing in the place, not a sticker */
body.gw-visitor .dg-hs-top::before{ display:block; content:""; position:absolute; top:auto; right:auto;
  left:50%; bottom:-6px; width:70px; height:12px; transform:translateX(-50%);
  border:1px solid var(--v5-gold); border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(233,207,156,.26), rgba(233,207,156,0) 70%);
  box-shadow:0 2px 10px rgba(0,0,0,.5); }
/* …and the pin, where the stem meets it */
body.gw-visitor .dg-hs-top::after{ display:block; content:""; position:absolute; top:auto; right:auto;
  left:50%; bottom:-2.5px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 1.5px var(--v5-gold), 0 0 10px rgba(233,207,156,.85); }
body.gw-visitor .dg-hs-arm{ height:1.5px;
  background:linear-gradient(to right, rgba(233,207,156,0), rgba(233,207,156,.45) 30%, var(--v5-gold));
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6)); }
body.gw-visitor .dg-hs-head, body.gw-visitor .dg-hs.gz-on .dg-hs-head,
body.gw-visitor .dg-hs.gz-group:not(.gz-on) .dg-hs-head{
  display:flex; flex-direction:column; align-items:center; gap:4px; font-size:inherit;
  font-weight:inherit; letter-spacing:0; text-transform:none; line-height:1; color:var(--v5-ink); text-shadow:var(--v5-shadow); }
body.gw-visitor .dg-hs-head .k{ font:400 9px/1 var(--v5-sans); letter-spacing:.38em; text-transform:uppercase;
  padding-left:.38em; color:rgba(255,255,255,.95); }
body.gw-visitor .dg-hs-head .num{ font:200 36px/.95 var(--v5-sans); letter-spacing:.04em; }
body.gw-visitor .dg-hs-head .num.w{ font-size:18px; font-weight:300; letter-spacing:.2em; text-transform:uppercase; }
/* the house you are looking at: bigger, and its numbers come out */
body.gw-visitor .dg-hs.gz-on .dg-hs-head .k{ font-size:10.5px; color:var(--v5-gold); }
body.gw-visitor .dg-hs.gz-on .dg-hs-head .num{ font-size:50px; }
body.gw-visitor .dg-hs.gz-on .dg-hs-top{ padding-bottom:18px; }
/* the specs: a drawn icon, the number large and fine, the word small */
body.gw-visitor .dg-hs.gz-on .dg-hs-specs{ display:flex; gap:26px; justify-content:center; margin-top:14px; padding-top:14px; }
body.gw-visitor .dg-hs.gz-on .dg-hs-specs::before{ left:22%; right:22%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
body.gw-visitor .dg-hs-specs .ms{ display:flex; flex-direction:column; align-items:center; gap:5px; }
body.gw-visitor .dg-hs.gz-on .dg-hs-specs .ms b{ font:200 30px/1 var(--v5-sans); color:var(--v5-ink); text-shadow:var(--v5-shadow); }
body.gw-visitor .dg-hs.gz-on .dg-hs-specs .ms span{ font:400 8.5px/1 var(--v5-sans); letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.9); text-shadow:var(--v5-shadow); }
body.gw-visitor .dg-hs .gwi{ display:block; line-height:0; }
body.gw-visitor .dg-hs .gwi svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round; filter:var(--v5-drop); }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows{ border-top:0 !important; margin-top:13px !important; padding-top:2px !important;
  display:grid !important; grid-template-columns:repeat(2, max-content); justify-content:center; gap:10px 24px;
  white-space:nowrap; max-height:160px !important; }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows .rw{ display:flex; align-items:center; gap:8px; padding:0; }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows .rw .gwi svg{ width:19px; height:19px; stroke:var(--v5-gold); }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows .rw span{ font:400 8px/1 var(--v5-sans); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.85); text-shadow:var(--v5-shadow); }
body.gw-visitor .dg-hs.gz-on .dg-hs-rows .rw b{ font:300 15px/1 var(--v5-sans); letter-spacing:.04em; color:#fff; text-shadow:var(--v5-shadow); }
/* SOLD: a gold kicker over the number, no stamp */
body.gw-visitor .dg-hs.gz-on .dg-hs-sold{ display:block; margin:0 0 6px; padding:0; border:0; background:none; border-radius:0;
  font:400 9.5px/1 var(--v5-sans); letter-spacing:.44em; padding-left:.44em; color:var(--v5-gold); text-shadow:var(--v5-shadow); }

/* ── THE GESTURES (Sky view): each line with its own little moving drawing ── */
.gw-help-row{ align-items:center; gap:16px; }
.gw-help-row b{ font:400 clamp(11px,1vw,13px)/1 var(--v5-sans); letter-spacing:.28em; color:var(--v5-gold); }
.gw-help-row span:not(.gw-gest){ font:300 clamp(17px,1.6vw,23px)/1 var(--v5-sans); letter-spacing:.06em; text-transform:none; color:#fff; }
.gw-gest{ position:relative; flex:0 0 auto; width:46px; height:46px; border:1px solid rgba(255,255,255,.85); border-radius:50%;
  box-shadow:0 2px 12px rgba(0,0,0,.5); }
.gw-gest i{ position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px rgba(0,0,0,.6); }
.gw-gest i + i{ display:none; }
.gw-gest[data-g="tap"] i:first-child{ animation:v5tapDot 1.6s ease-in-out infinite; }
.gw-gest[data-g="tap"] i + i{ display:block; background:none; border:1.5px solid var(--v5-gold); box-shadow:none; animation:v5tapRing 1.6s ease-out infinite; }
.gw-gest[data-g="drag"] i:first-child{ animation:v5dragX 1.8s cubic-bezier(.45,0,.55,1) infinite; }
.gw-gest[data-g="drag2"] i:first-child{ animation:v5dragY 1.8s cubic-bezier(.45,0,.55,1) infinite; }
.gw-gest[data-g="pinch"] i{ display:block; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; }
.gw-gest[data-g="pinch"] i:first-child{ animation:v5pinchA 1.8s cubic-bezier(.45,0,.55,1) infinite; }
.gw-gest[data-g="pinch"] i + i{ animation:v5pinchB 1.8s cubic-bezier(.45,0,.55,1) infinite; }
.gw-gest[data-g="two"] i{ display:block; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; }
.gw-gest[data-g="two"] i:first-child{ animation:v5twoA 1.8s cubic-bezier(.45,0,.55,1) infinite; }
.gw-gest[data-g="two"] i + i{ animation:v5twoB 1.8s cubic-bezier(.45,0,.55,1) infinite; }
.gw-gest[data-g="wheel"]{ border-radius:13px; width:28px; margin:0 9px; }
.gw-gest[data-g="wheel"] i:first-child{ width:3px; height:8px; margin:-14px 0 0 -1.5px; border-radius:2px; animation:v5wheel 1.4s ease-in-out infinite; }
@keyframes v5tapDot{ 0%,100%{ transform:scale(1); } 18%{ transform:scale(.7); } 34%{ transform:scale(1); } }
@keyframes v5tapRing{ 0%,16%{ transform:scale(.6); opacity:0; } 22%{ opacity:1; } 70%,100%{ transform:scale(2.9); opacity:0; } }
@keyframes v5dragX{ 0%,100%{ transform:translateX(-12px); } 50%{ transform:translateX(12px); } }
@keyframes v5dragY{ 0%,100%{ transform:translateY(10px); } 50%{ transform:translateY(-10px); } }
@keyframes v5pinchA{ 0%,100%{ transform:translate(-3px,3px); } 50%{ transform:translate(-12px,12px); } }
@keyframes v5pinchB{ 0%,100%{ transform:translate(3px,-3px); } 50%{ transform:translate(12px,-12px); } }
@keyframes v5twoA{ 0%,100%{ transform:translate(-7px,9px); } 50%{ transform:translate(-7px,-9px); } }
@keyframes v5twoB{ 0%,100%{ transform:translate(7px,9px); } 50%{ transform:translate(7px,-9px); } }
@keyframes v5wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(8px); opacity:0; } 71%,100%{ transform:translateY(0); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .gw-gest i{ animation:none !important; } }

/* ── RECENTRE: under HOME, top right — the bottom left is the credit's, and on a phone the tour's Back is there too ── */
body.gw-visitor #dg-controls{ left:auto; right:24px; bottom:auto; top:calc(22px + 56px + 14px + env(safe-area-inset-top, 0px)); }
body.gw-visitor #dg-controls .dg-ctrl{ width:56px; height:56px; }
body.gw-landing-on:not(.gw-orbit-explore) #dg-controls{ opacity:0; visibility:hidden; pointer-events:none; }

/* ── CONTACT: the form keeps its dark backing (a form over a moving picture cannot be read or filled in), but it speaks
      the cover's language: the fine capital name, the gold kicker, and SEND as a cover line, not a slab ── */
body.gw-visitor #dg-dossier .dg-dos-eyebrow{ font:400 10.5px/1 var(--v5-sans); letter-spacing:.36em; text-transform:uppercase; color:var(--v5-gold); }
body.gw-visitor #dg-dossier .dg-dos-name{ font:200 clamp(28px, 3vw, 42px)/1.05 var(--v5-sans); letter-spacing:.14em; text-transform:uppercase; color:#fff; }
body.gw-visitor #dg-dossier .dg-dos-addr{ font:300 14px/1.5 var(--v5-sans); letter-spacing:.03em; color:rgba(255,255,255,.86); }
body.gw-visitor #dg-dossier .dg-ct-h{ font:300 clamp(13px, 1.15vw, 15px)/1.3 var(--v5-sans); letter-spacing:.22em; text-transform:uppercase; color:#fff; }
body.gw-visitor #dg-dossier .dg-dos-btn.primary{ background:none; border:0; border-top:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5);
  border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; min-height:60px;
  font:300 clamp(14px, 1.25vw, 17px)/1 var(--v5-sans); letter-spacing:.28em; text-transform:uppercase; color:#fff; }
body.gw-visitor #dg-dossier .dg-dos-btn.primary:hover{ background:none; color:var(--v5-gold); border-color:var(--v5-gold); }
body.dg-dos-open #dg-controls{ opacity:0; visibility:hidden; pointer-events:none; }

/* ── PHONES: last word, as the ordering note asks ──────────────────────── */
@media (max-width:820px){
  #gw-landing .gwl-inner{ padding:max(3.4vh, 18px) 6vw calc(max(2.6vh, 14px) + env(safe-area-inset-bottom, 0px)); }
  #gw-landing .gwl-title{ font-size:clamp(36px, 13vw, 68px); letter-spacing:.12em; }
  #gw-landing .gwl-title .gwl-tw2{ letter-spacing:.12em; }
  #gw-landing .gwl-sf{ font-size:14.5px; max-width:30ch; }
  #gw-landing .gwl-addr{ font-size:9.5px; letter-spacing:.3em; }
  #gw-landing .gwl-btns{ width:100%; padding-top:14px; }
  #gw-landing .gwl-btn{ min-height:58px; font-size:15px; letter-spacing:.22em; }
  #gw-landing .gwl-btn.primary{ min-height:68px; font-size:18px; letter-spacing:.2em; }
  #gw-landing .gwl-btn .gwl-arr{ opacity:.8; }
  /* the credit runs small along the foot of the cover */
  body.gw-landing-on:not(.gw-mode-on) #gw-wm{ right:auto; left:6vw; top:auto; bottom:calc(6px + env(safe-area-inset-bottom, 0px));
    display:flex; align-items:center; gap:6px; flex-direction:row-reverse; justify-content:flex-end; }
  body.gw-landing-on:not(.gw-mode-on) #gw-wm img{ height:34px; margin:0; }
  body.gw-landing-on:not(.gw-mode-on) .gw-wm-by{ font-size:7.5px; letter-spacing:.24em; margin:0; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-inner{ padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); }
  body.gw-mode-on #gw-landing .gwl-inner{ padding:max(12px, 1.6vh) 16px 0; }
  body.gw-mode-on #gw-landing .gwl-title{ font-size:14px; letter-spacing:.2em; }
  body.gw-mode-on #gw-landing .gwl-title .gwl-tw2{ letter-spacing:.2em; }
  body.gw-visitor #dg-tour-hud .dg-tbtn{ min-height:54px; font-size:13px; letter-spacing:.2em; padding:8px 2px; }
  body.gw-visitor #dg-tour-hud .dg-tbtn .lb{ letter-spacing:.2em; }
  body.gw-visitor #dg-tour-hud .dg-tbtn svg{ width:20px; height:20px; }
  body.gw-visitor #dg-tour-chip{ min-width:0; }
  body.gw-visitor #dg-tour-chip .t{ font-size:11px; letter-spacing:.18em; }
  #gw-cycle .gwc-lb{ font-size:13px; letter-spacing:.2em; }
  body.gw-visitor .dg-hs-head .num{ font-size:30px; }
  body.gw-visitor .dg-hs.gz-on .dg-hs-head .num{ font-size:42px; }
  body.gw-visitor .dg-hs.gz-on .dg-hs-specs{ gap:20px; }
  body.gw-visitor .dg-hs.gz-on .dg-hs-specs .ms b{ font-size:26px; }
  .gw-help-row span:not(.gw-gest){ font-size:17px; }
  body.gw-visitor #dg-controls{ right:14px; top:calc(12px + 48px + 10px + env(safe-area-inset-top, 0px)); }
  body.gw-visitor #dg-controls .dg-ctrl{ width:48px; height:48px; }
  /* the tour's Back owns the bottom left on a phone: the credit steps aside while it is up */
  body.gw-visitor.gw-tour-on #gw-wm{ opacity:0; visibility:hidden; }
  /* the hints: the words go under their gesture's name, so a long one ("Two fingers up / down") never runs off the screen */
  #gw-help{ width:min(88vw, 340px); }
  .gw-help-row{ display:grid; grid-template-columns:46px 1fr; grid-template-rows:auto auto; column-gap:14px; row-gap:6px;
    align-items:center; justify-content:start; text-align:left; white-space:normal; padding:9px 0; }
  .gw-help-row .gw-gest{ grid-row:1 / span 2; }
  .gw-help-row b{ align-self:end; font-size:10.5px; letter-spacing:.22em; }
  .gw-help-row span:not(.gw-gest){ align-self:start; font-size:19px; }
}


/* ═══════════════════ V5 — THE THREE SIZES (15 Oct 2026) ═══════════════════
   The hold, the settings icon and its panel, the offer — the visible part of TURD FX's optimisation process (tiers.js,
   app/quality.js). In the cover's own fine hand; the icon is a ring like Home and Recentre, in the same right-hand column
   (top left is the folio's). Not on the cover: it comes and goes with Home. */
:root{ --sans:'Montserrat', system-ui, sans-serif; }

/* the hold: a phone with WebGPU is tested for about three seconds before the picture opens */
#dg-hold{ position:fixed; inset:0; z-index:3000; background:#050403; display:flex; flex-direction:column; justify-content:center;
  padding:0 5.2vw; font-family:var(--v5-sans); color:#fff; transition:opacity .8s ease, visibility .8s; }
#dg-hold.gone{ opacity:0; visibility:hidden; pointer-events:none; }
#dg-hold .k{ font:400 clamp(10px,.95vw,13px)/1.2 var(--v5-sans); letter-spacing:.38em; text-transform:uppercase; color:rgba(255,255,255,.8); }
#dg-hold .n{ margin-top:18px; font:200 clamp(36px,13vw,120px)/1.04 var(--v5-sans); letter-spacing:.14em; text-transform:uppercase; }
#dg-hold .l{ margin-top:34px; width:min(260px,60vw); height:1px; background:rgba(255,255,255,.2); overflow:hidden; }
#dg-hold .l i{ display:block; width:40%; height:100%; background:#fff; animation:dgHold 1.6s ease-in-out infinite; }
@keyframes dgHold{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(260%); } }

/* the settings icon: a ring under Recentre; not on the cover, not over the contact page */
.q-gear{ left:auto !important; right:24px; width:56px; height:56px;
  top:calc(22px + 56px + 14px + 56px + 14px + env(safe-area-inset-top, 0px)) !important;
  border:1px solid rgba(255,255,255,.9) !important; border-radius:50%; background:rgba(0,0,0,.06) !important;
  box-shadow:0 2px 14px rgba(0,0,0,.4), inset 0 0 12px rgba(0,0,0,.15); z-index:1210 !important; }
.q-gear svg{ width:24px; height:24px; opacity:.95; }
.q-gear:hover{ border-color:var(--v5-gold) !important; }
.q-gear:hover svg{ fill:var(--v5-gold); }
body:not(.gw-mode-on) .q-gear, body.dg-dos-open .q-gear, body.dg-detail-open .q-gear{ opacity:0 !important; pointer-events:none !important; }
/* its panel and the offer: dark enough to read over a picture, fine type, no glass */
.q-panel, .q-toast{ font-family:var(--v5-sans) !important; background:rgba(10,9,7,.86) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.28) !important; border-radius:2px !important; z-index:1220 !important; }
.q-panel{ left:auto !important; right:24px;
  top:calc(22px + 56px + 14px + 56px + 14px + 56px + 10px + env(safe-area-inset-top, 0px)) !important; width:min(330px, calc(100vw - 28px)) !important; }
.q-title{ font:400 10px/1 var(--v5-sans) !important; letter-spacing:.34em !important; color:var(--v5-gold); opacity:1 !important; }
.q-opt{ border-radius:2px !important; }
.q-opt b{ font:300 15px/1 var(--v5-sans) !important; letter-spacing:.24em !important; }
.q-opt span{ font:300 12.5px/1.35 var(--v5-sans) !important; letter-spacing:.04em; opacity:.85 !important; }
.q-note{ font:300 11.5px/1.45 var(--v5-sans) !important; letter-spacing:.03em; }
.q-toast p{ font:300 14px/1.5 var(--v5-sans) !important; letter-spacing:.03em; }
.q-toast button{ border-radius:2px !important; font:300 12px/1 var(--v5-sans) !important; letter-spacing:.2em; text-transform:uppercase; }
@media (max-width:820px){
  .q-gear{ right:14px; width:48px; height:48px; top:calc(12px + 48px + 10px + 48px + 10px + env(safe-area-inset-top, 0px)) !important; }
  .q-gear svg{ width:21px; height:21px; }
  .q-panel{ right:14px; top:calc(12px + 48px + 10px + 48px + 10px + 48px + 8px + env(safe-area-inset-top, 0px)) !important; }
}


/* ═══════════════════ V5.2 — THE SECOND ROUND (15 Oct 2026) ═══════════════════
   His notes on the live V5: "the circles underneath each unit name … can go. You keep this stem and the orb … increase the size
   of G spatial and make it be seen just a bit more … make explore and fly a pill button that you press to switch. We don't need
   the now viewing and a refresh button … get rid of the recenter icon … remove the circle off the home icon and the settings cog
   … the settings cog could just be a symbol HD, SD, etc. … in the bottom centre, just next and back. We don't need one out of
   four, the entry. It makes it all a bit too cluttered." Appended last, so it wins. */

/* the stem and its orb stay; the oval ring under each name goes */
body.gw-visitor .dg-hs-top::before{ display:none !important; }
body.gw-visitor .dg-hs-top::after{ width:7px; height:7px; margin-left:-3.5px; bottom:-3.5px;
  box-shadow:0 0 0 1.5px var(--v5-gold), 0 0 12px rgba(233,207,156,.9), 0 1px 4px rgba(0,0,0,.6); }

/* Recentre is gone: Home does it */
body.gw-visitor #dg-controls{ display:none !important; }

/* Home and Back-to-group: the symbol alone, no ring */
body.gw-visitor #gw-slot .gw-round, body.gw-visitor .gw-round{
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.gw-visitor .gw-round svg{ width:32px; height:32px; stroke-width:1.1; filter:var(--v5-drop); }
body.gw-visitor #gw-slot .gw-round:hover, body.gw-visitor .gw-round:hover{ background:none !important; border:0 !important; color:var(--v5-gold); }

/* the size: the letters themselves (HD, SD, LD), no ring, under Home */
.q-gear{ top:calc(22px + 56px + 6px + env(safe-area-inset-top, 0px)) !important; width:56px; height:44px;
  border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
.q-gear .q-tier{ font:300 15px/1 var(--v5-sans); letter-spacing:.22em; padding-left:.22em; color:#fff; text-shadow:var(--v5-shadow); }
.q-gear:hover .q-tier, .q-gear[aria-expanded="true"] .q-tier{ color:var(--v5-gold); }
.q-panel{ top:calc(22px + 56px + 6px + 44px + 8px + env(safe-area-inset-top, 0px)) !important; }

/* the corner: EXPLORE | FLY, one pill, the one you are in filled */
#gw-cycle{ flex-direction:row; align-items:stretch; gap:0; min-height:0; padding:3px;
  border:1px solid rgba(255,255,255,.9); border-radius:999px; background:rgba(0,0,0,.18);
  box-shadow:0 2px 14px rgba(0,0,0,.4); }
#gw-cycle .gwc-seg{ appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer; color:#fff;
  padding:12px 22px; border-radius:999px; font:300 clamp(12px, 1.05vw, 14px)/1 var(--v5-sans); letter-spacing:.24em; padding-left:calc(22px + .24em);
  text-transform:uppercase; text-shadow:var(--v5-shadow); transition:background .25s ease, color .25s ease; -webkit-tap-highlight-color:transparent; }
#gw-cycle .gwc-seg.on{ background:rgba(255,255,255,.94); color:#14110d; text-shadow:none; }
body.gw-visitor #gw-cycle .gwc-seg:not(.on):hover{ color:var(--v5-gold); }
body.gw-visitor #gw-cycle:hover{ background:rgba(0,0,0,.18); }

/* the centre of the foot: Back and Next, set apart, nothing between */
body.gw-visitor.gw-tour-on #dg-tour-hud{ gap:clamp(40px, 9vw, 110px); }
body #dg-tour-chip{ display:none !important; }

/* the credit: bigger, and seen */
body.gw-mode-on #gw-wm img{ height:150px; opacity:1; filter:brightness(1.7) contrast(1.05) drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 3px 16px rgba(0,0,0,.65)); }
body.gw-landing-on:not(.gw-mode-on) #gw-wm img{ height:150px; opacity:1; filter:brightness(1.7) contrast(1.05) drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 3px 16px rgba(0,0,0,.65)); }
body.gw-mode-on #gw-wm{ left:12px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }

@media (max-width:820px){
  body.gw-visitor .gw-round svg{ width:28px; height:28px; }
  .q-gear{ top:calc(12px + 48px + 4px + env(safe-area-inset-top, 0px)) !important; width:48px; height:40px; }
  .q-gear .q-tier{ font-size:13px; }
  .q-panel{ top:calc(12px + 48px + 4px + 40px + 8px + env(safe-area-inset-top, 0px)) !important; }
  #gw-cycle .gwc-seg{ padding:11px 16px; padding-left:calc(16px + .2em); font-size:12px; letter-spacing:.2em; }
  body.gw-mode-on #gw-wm img{ height:104px; }
  body.gw-landing-on:not(.gw-mode-on) #gw-wm img{ height:56px; }
  body.gw-mode-on #gw-wm{ left:6px; }
  body.gw-visitor.gw-tour-on #dg-tour-hud{ gap:clamp(30px, 14vw, 70px); }
}

/* the credit sits on a soft shadow, so it reads over a bright road as well as over trees */
#gw-wm::before{ content:""; position:absolute; left:-18%; right:-18%; top:-8%; bottom:-6%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%); }


/* ═══════════════════ V5.3 — THE COVER, LESS (15 Oct 2026) ═══════════════════
   His third round, "Picture one": no numbers, no arrows — each option is its words and a line under it. "Fortuna Village is the
   heading with no subheading above it": the address sits under the name; the line about the village heads the list. */

/* the address: under the name, in the place the standfirst held */
#gw-landing .gwl-addr{ order:2; margin:clamp(14px,2.2vh,26px) 0 0; font:400 clamp(11px, 1vw, 14px)/1.3 var(--v5-sans);
  letter-spacing:.36em; color:rgba(255,255,255,.92); }

/* the list: a heading over it, then plain words with a line under each (no line above the first, no numbers, no arrows) */
#gw-landing .gwl-btns{ border-top:0 !important; padding-top:0; width:min(560px, 90vw); }
#gw-landing .gwl-btns .gwl-sf{ order:0; margin:0 0 clamp(14px,2vh,22px); max-width:34ch;
  font:300 clamp(14.5px, 1.2vw, 18px)/1.6 var(--v5-sans); letter-spacing:.03em; color:rgba(255,255,255,.95); text-shadow:var(--v5-shadow); }
#gw-landing .gwl-btn .gwl-n, #gw-landing .gwl-btn .gwl-arr{ display:none !important; }
#gw-landing .gwl-btn{ min-height:clamp(54px, 6.4vh, 66px); padding:10px 2px; }
#gw-landing .gwl-btn.primary{ min-height:clamp(62px, 7.6vh, 78px); }

/* in a mode, the folio at the corner is the name with the address under it (the other way round from V5's) */
body.gw-mode-on #gw-landing .gwl-title{ order:0; }
body.gw-mode-on #gw-landing .gwl-addr{ order:1; margin:7px 0 0; font-size:8.5px; letter-spacing:.32em; }

@media (max-width:820px){
  #gw-landing .gwl-addr{ margin-top:12px; font-size:10px; letter-spacing:.3em; }
  #gw-landing .gwl-btns .gwl-sf{ font-size:14px; max-width:30ch; }
  #gw-landing .gwl-btn{ min-height:54px; }
  #gw-landing .gwl-btn.primary{ min-height:62px; }
}
@media (max-width:820px){
  /* the credit is larger now (V5.2): the list keeps clear of it */
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-inner{ padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
}
/* the line that heads the list: a firmer shadow, it can sit over bright roofs */
#gw-landing .gwl-btns .gwl-sf{ text-shadow:0 1px 2px rgba(0,0,0,.95), 0 2px 12px rgba(0,0,0,.8), 0 0 32px rgba(0,0,0,.6); }


/* ═══════════════════ V5.4 — THE FOURTH ROUND (15 Oct 2026) ═══════════════════
   His fourth round: the corner pills, the cover list, the address and village line swapped. Appended last, so it wins. */

/* ── the cover: the village line under the name, the address heading the list ── */
#gw-landing .gwl-inner > .gwl-sf{ order:2; margin:clamp(14px,2.2vh,26px) 0 0; max-width:36ch;
  font:300 clamp(14.5px, 1.2vw, 18px)/1.6 var(--v5-sans); letter-spacing:.03em; color:rgba(255,255,255,.95); text-shadow:var(--v5-shadow); }
#gw-landing .gwl-addr-head{ order:0; margin:0 0 clamp(10px,1.6vh,16px); font:400 clamp(11px, 1vw, 14px)/1.3 var(--v5-sans);
  letter-spacing:.36em; text-transform:uppercase; color:rgba(255,255,255,.92); text-shadow:var(--v5-shadow); }
#gw-landing .gwl-addr-folio{ display:none; }                         /* the corner folio's own, shown only in a mode */
body.gw-mode-on #gw-landing .gwl-addr-folio{ display:block; }
body.gw-mode-on #gw-landing .gwl-addr-head{ display:none; }

/* ── the corner pill has one height, so the credit can stand level with it ── */
#gw-cycle{ height:46px; box-sizing:border-box; align-items:stretch; }
#gw-cycle .gwc-seg{ display:flex; align-items:center; padding-top:0; padding-bottom:0; }

/* ── HOME (and Back-to-group) and the size: pills, the same as EXPLORE | FLY ── */
body.gw-visitor #gw-slot, body.gw-orbit-explore #gw-slot{
  top:calc(22px + env(safe-area-inset-top, 0px)) !important; right:24px !important; left:auto !important; bottom:auto !important;
  width:60px !important; height:46px !important; box-sizing:border-box;
  border:1px solid rgba(255,255,255,.9); border-radius:999px; background:rgba(0,0,0,.18); box-shadow:0 2px 14px rgba(0,0,0,.4); }
body.gw-visitor #gw-slot .gw-round{ width:100% !important; height:100% !important; display:flex; align-items:center; justify-content:center; }
body.gw-visitor .gw-round svg{ width:23px; height:23px; stroke-width:1.15; }
body.gw-visitor #gw-slot:hover{ border-color:var(--v5-gold); }
.q-gear{ top:calc(22px + env(safe-area-inset-top, 0px)) !important; right:calc(24px + 60px + 10px) !important; left:auto !important;
  width:66px !important; height:46px !important; box-sizing:border-box;
  border:1px solid rgba(255,255,255,.9) !important; border-radius:999px !important; background:rgba(0,0,0,.18) !important;
  box-shadow:0 2px 14px rgba(0,0,0,.4) !important; }
.q-gear:hover{ border-color:var(--v5-gold) !important; }
.q-gear .q-tier{ font-size:13px; letter-spacing:.2em; padding-left:.2em; }
.q-panel{ top:calc(22px + 46px + 8px + env(safe-area-inset-top, 0px)) !important; right:24px; }

/* ── the credit: its centre on the pill's centre (pill: 22 px up, 46 high; mark 150 px, its picture centred in the square) ── */
body.gw-mode-on #gw-wm{ bottom:calc(22px + 23px - 75px + env(safe-area-inset-bottom, 0px)); left:10px; }

@media (max-width:820px){
  #gw-landing .gwl-addr-head{ margin-bottom:10px; font-size:10px; letter-spacing:.3em; }
  #gw-landing .gwl-inner > .gwl-sf{ font-size:14px; max-width:30ch; margin-top:14px; }
  body.gw-visitor #gw-slot, body.gw-orbit-explore #gw-slot{
    top:calc(12px + env(safe-area-inset-top, 0px)) !important; right:14px !important; width:54px !important; height:42px !important; }
  body.gw-visitor .gw-round svg{ width:21px; height:21px; }
  .q-gear{ top:calc(12px + env(safe-area-inset-top, 0px)) !important; right:calc(14px + 54px + 8px) !important; width:58px !important; height:42px !important; }
  .q-gear .q-tier{ font-size:12px; }
  .q-panel{ right:14px; top:calc(12px + 42px + 8px + env(safe-area-inset-top, 0px)) !important; }
  #gw-cycle{ height:42px; }
  body.gw-mode-on #gw-wm{ bottom:calc(12px + 21px - 52px + env(safe-area-inset-bottom, 0px)); left:4px; }
}
@media (max-width:820px){
  /* (the cover's corner element on a phone — hidden by V5.6) */
  body.gw-landing-on:not(.gw-mode-on) #gw-wm{ flex-direction:row; justify-content:flex-start; gap:2px; }
  body.gw-landing-on:not(.gw-mode-on) #gw-wm img{ height:76px; margin:-18px 0 -18px 0; }
  body.gw-landing-on:not(.gw-mode-on) #gw-wm .gw-wm-by{ font-size:8px; letter-spacing:.26em; color:rgba(255,255,255,.9); }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-inner{ padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:820px){
  /* the corner folio keeps clear of the two pills at the top right */
  body.gw-mode-on #gw-landing .gwl-addr-folio{ font-size:7.5px; letter-spacing:.2em; max-width:calc(100vw - 14px - 54px - 8px - 58px - 8px - 22px); }
}


/* ═══════════════════ V5.5 — THE FIFTH ROUND (15 Oct 2026) ═══════════════════
   His notes: "Logo is not level with the pills. We don't need a warning like this [the slow-device offer — gone in tiers.js]
   … get rid of 22 Chum Street, Golden Square, so we can make Fortuna Village a bit bigger in the corner." Appended last. */

/* ── the credit: its G level with the pill ──
   The mark's picture (measured from the file): the G runs 24.5 % – 65.2 % of the square (its centre 44.9 %), the word SPATIAL
   71.1 % – 75.4 %. The pill is 46 px high and 26 px up, so its centre is 49 px up; at 130 px the G is 53 px tall — the pill's own
   height, near enough — with its centre on that line, and SPATIAL still 9 px above the edge of the screen. */
#gw-cycle{ bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
body.gw-mode-on #gw-wm{ bottom:calc(49px - 71.7px + env(safe-area-inset-bottom, 0px)); left:10px; }
body.gw-mode-on #gw-wm img, body.gw-landing-on.gw-mode-on #gw-wm img{ height:130px; }

/* the filled word: firmer, so it reads on the white (300 at 13 px went grey) */
#gw-cycle .gwc-seg.on{ color:#000; font-weight:500; }

/* ── the corner: the name alone, bigger, on the pills' line ── */
body.gw-mode-on #gw-landing .gwl-addr-folio{ display:none; }
body.gw-mode-on #gw-landing .gwl-inner{ padding:calc(22px + env(safe-area-inset-top, 0px)) 22px 0; }
body.gw-mode-on #gw-landing .gwl-title{ font-size:clamp(20px, 1.9vw, 26px); line-height:46px; letter-spacing:.2em; font-weight:300; }

@media (max-width:820px){
  #gw-cycle{ bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.gw-mode-on #gw-wm{ bottom:calc(37px - 52.9px + env(safe-area-inset-bottom, 0px)); left:4px; }
  body.gw-mode-on #gw-wm img, body.gw-landing-on.gw-mode-on #gw-wm img{ height:96px; }
  body.gw-mode-on #gw-landing .gwl-inner{ padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 0; }
  body.gw-mode-on #gw-landing .gwl-title{ font-size:16px; line-height:42px; letter-spacing:.16em; }
}
body.gw-mode-on #gw-landing .gwl-title .gwl-tw2{ font-weight:300; }


/* ═══════════════════ V5.6 — NO CREDIT (15 Oct 2026) ═══════════════════
   Nothing is drawn in the corner element (digler-layer.js leaves #gw-wm empty); this keeps the empty box, its halo and its room off the page. */
#gw-wm, #gw-wm::before{ display:none !important; }
@media (max-width:820px){
  /* the cover's list no longer keeps a space for the credit */
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-inner{ padding-bottom:calc(max(2.6vh, 20px) + env(safe-area-inset-bottom, 0px)); }
}


/* ═══════════════════ V5.7 — THE COVER, CENTRED: THE SACRED HEART TREATMENT (15 Oct 2026) ═══════════════════
   His note on the V5.6 cover: "It's not looking enough like the modern, up-to-date real estate ads we see lately that have that
   magazine type feel. So we will keep the same font, but try and give it the treatment that the Sacred Heart Tour has on its
   landing page … And the exit page too needs the same workout."
   So the cover is laid out as app/show/show.css lays out Sacred Heart's (7–15 Oct): the name centred at the top, its letters
   wide apart and coming in one by one; the place in small tracked capitals under it; the choices along the foot, side by side,
   each with a short line under its words that runs out to full width under the pointer; a soft shade at the top and the foot
   and nothing else over the picture. The hand stays Montserrat — ExtraLight for the name, Light for everything else — Sacred
   Heart's sizes, spacings and timings otherwise. The exit IS this cover: the tour's last Next brings it back the same way
   (digler-layer.js, gwCoverIn). And his studio's address, small, bottom right: "a little tiny www.glass3d.com.au in the
   bottom corner somewhere … only for the landing page". Appended last, so it wins. */

/* the shade: Sacred Heart's, a touch darker at the foot (the roofs there are bright) */
body.gw-landing-on:not(.gw-mode-on) #gw-landing{
  background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 54%, rgba(0,0,0,.32) 72%, rgba(0,0,0,.6) 100%); }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-inner{
  align-items:center; text-align:center;
  padding:max(clamp(14px, 5vh, 64px), calc(env(safe-area-inset-top, 0px) + 10px)) 16px calc(max(30px, 4.2vh) + env(safe-area-inset-bottom, 0px)); }

/* the name: one line, centred, the letters wide apart (the trailing space is given back so the word sits dead centre) */
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title{ order:0; margin:0 -.3em 0 0; font-weight:200;
  font-size:clamp(26px, 4.6vw, 64px); line-height:1.12; letter-spacing:.3em; white-space:nowrap; max-width:none;
  text-shadow:0 0 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6); }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title .gwl-tw2{ display:inline; letter-spacing:inherit; font-weight:inherit; }
#gw-landing .gwl-title .ch{ display:inline-block; }

/* the place: small tracked capitals under the name, coming up after it */
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-addr{ order:1; display:block; margin:.9em -.42em 0 0;
  font:300 clamp(12px, 1.15vw, 15px)/1.3 var(--v5-sans); letter-spacing:.42em; text-transform:uppercase;
  color:rgba(255,255,255,.82); white-space:nowrap;
  text-shadow:0 0 22px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.7);
  opacity:0; transition:opacity 1.4s ease .9s; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing.gwl-in .gwl-addr{ opacity:1; }
body.gw-mode-on #gw-landing .gwl-addr{ display:none; }                  /* in a mode the folio is the name alone (V5.5) */

/* the village line: quiet, centred, a step under the place */
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-sf{ order:2; margin:clamp(14px, 2vh, 22px) 0 0; max-width:44ch;
  font:300 clamp(13px, 1.05vw, 16px)/1.6 var(--v5-sans); letter-spacing:.04em; color:rgba(255,255,255,.86);
  text-shadow:0 0 22px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.7);
  opacity:0; visibility:visible; height:auto; transition:opacity 1.4s ease 1.15s; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing.gwl-in .gwl-sf{ opacity:1; }

/* the choices: along the foot, side by side, each its words and a short line under them */
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btns{ order:3; margin:auto 0 0; padding:0; width:auto; max-width:100%;
  border:0; display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap:clamp(40px, 7vw, 150px); transform:none; opacity:1; visibility:visible; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn{ position:relative; display:flex; flex-direction:column; align-items:center;
  width:auto; min-width:120px; min-height:48px; padding:14px 10px 10px; margin:0; border:0; background:none; text-align:center;
  font:300 clamp(14px, 1.5vw, 24px)/1.1 var(--v5-sans); letter-spacing:.4em; text-transform:uppercase; color:rgba(255,255,255,.88);
  text-shadow:0 0 22px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.7);
  opacity:0; transition:opacity 1.2s ease .6s, color .5s ease, letter-spacing .5s ease; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn + .gwl-btn{ transition-delay:.75s, 0s, 0s; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn + .gwl-btn + .gwl-btn{ transition-delay:.9s, 0s, 0s; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing.gwl-in .gwl-btn{ opacity:1; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn.primary{ font-size:clamp(14px, 1.5vw, 24px); font-weight:300; letter-spacing:.4em; min-height:48px; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn .gwl-w{ display:block; flex:none; margin-right:-.4em; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn .gwl-hair{ display:block; width:100%; height:1px; margin-top:11px;
  background:rgba(255,255,255,.85); box-shadow:0 0 6px rgba(0,0,0,.4); transform:scaleX(.25);
  transition:transform .5s cubic-bezier(.2,.7,.2,1); }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:hover,
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:focus-visible{ padding:14px 10px 10px; background:none; color:#fff; letter-spacing:.44em; outline:none; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:hover .gwl-w,
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:focus-visible .gwl-w{ margin-right:-.44em; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:hover .gwl-hair,
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:focus-visible .gwl-hair{ transform:scaleX(1); }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:active{ transform:none; color:#fff; }

/* the studio's address: tiny, bottom right, the last thing to come up; a visitor's tap opens it in a new tab */
#gw-landing .gwl-site{ position:absolute; right:max(14px, 2.2vw); bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:2;
  display:block; pointer-events:auto; text-decoration:none; padding:10px 2px 10px 10px;
  font:300 9px/1 var(--v5-sans); letter-spacing:.22em; color:rgba(255,255,255,.5);
  text-shadow:0 0 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
  opacity:0; transition:opacity 1.2s ease 1.4s, color .4s ease; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing.gwl-in .gwl-site{ opacity:1; }
#gw-landing .gwl-site:hover, #gw-landing .gwl-site:focus-visible{ color:rgba(255,255,255,.95); outline:none; }
body.gw-mode-on #gw-landing .gwl-site, body:not(.gw-landing-on) #gw-landing .gwl-site{ display:none; }

/* a phone: the name on two lines, the choices in a stack at the foot (Sacred Heart's portrait rules) */
@media (max-width:820px){
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-inner{
    padding:max(clamp(14px, 5vh, 64px), calc(env(safe-area-inset-top, 0px) + 10px)) 16px calc(max(44px, 5.6vh) + env(safe-area-inset-bottom, 0px)); }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title{ font-size:clamp(26px, 9.6vw, 54px); letter-spacing:.22em; margin-right:-.22em; white-space:normal; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title .gwl-tw2{ display:block; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-addr{ font-size:11px; letter-spacing:.34em; margin-right:-.34em; white-space:normal; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-sf{ font-size:13.5px; max-width:30ch; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btns{ flex-direction:column; align-items:center; gap:clamp(8px, 1.8vh, 22px); }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn,
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn.primary{ min-height:48px; font-size:15px; }
  #gw-landing .gwl-site{ right:14px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); font-size:8.5px; }
}
/* a phone on its side: the name on one line again, the choices in a row, everything a little closer */
@media (max-width:820px) and (orientation:landscape){
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title{ font-size:clamp(22px, 4.6vw, 36px); letter-spacing:.3em; margin-right:-.3em; white-space:nowrap; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title .gwl-tw2{ display:inline; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-sf{ margin-top:8px; max-width:44ch; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btns{ flex-direction:row; gap:clamp(28px, 6vw, 90px); }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-inner{ padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion:reduce){
  #gw-landing .gwl-title .ch{ filter:none !important; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn .gwl-hair{ transform:scaleX(1); opacity:.25; transition:opacity .4s ease; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:hover .gwl-hair,
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btn:focus-visible .gwl-hair{ opacity:1; }
}


/* ═══════════════════ V5.8 — THE ADDRESS DOWN, THE NAME UP (15 Oct 2026) ═══════════════════
   His note on V5.7: "bring 22 Chum Street down so it's in the bottom part of the presentation, just above the guided tour,
   sky tour and contact us buttons. And then that'll give us a bit more room and freedom to rescale and relay out the Fortuna
   Village and a boutique village of 24 … etc." So the address is the line over the choices, the same small tracked capitals,
   coming up with them; at the top the name grows and the village line sits under it with more air. Appended last. */
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-addr{ order:3; margin:auto -.42em 0 0; font-size:clamp(11px, 1.05vw, 14px); transition-delay:1.05s; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btns{ order:4; margin:clamp(12px, 2vh, 22px) 0 0; }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title{ font-size:clamp(28px, 5.4vw, 80px); }
body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-sf{ margin-top:clamp(18px, 2.8vh, 32px); max-width:40ch;
  font-size:clamp(14px, 1.2vw, 19px); line-height:1.65; color:rgba(255,255,255,.9); transition-delay:.9s; }
@media (max-width:820px){
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title{ font-size:clamp(30px, 11vw, 60px); }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-sf{ margin-top:16px; max-width:30ch; font-size:14px; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-addr{ font-size:10.5px; letter-spacing:.34em; margin-right:-.34em; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btns{ margin-top:clamp(8px, 1.4vh, 16px); }
}
@media (max-width:820px) and (orientation:landscape){
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-title{ font-size:clamp(22px, 5vw, 40px); }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-sf{ margin-top:8px; font-size:13px; max-width:44ch; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-addr{ font-size:10px; }
  body.gw-landing-on:not(.gw-mode-on) #gw-landing .gwl-btns{ margin-top:6px; }
}