/* ── Fonts (self-hosted — Basier Square Regular/SemiBold/Bold, no CDN) ────── */

@font-face { font-family: 'Basier Square'; src: url('fonts/BasierSquare-400.woff2') format('woff2'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Basier Square'; src: url('fonts/BasierSquare-600.woff2') format('woff2'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Basier Square'; src: url('fonts/BasierSquare-700.woff2') format('woff2'); font-weight: 700; font-style: normal; }

/* ── Spencer Block Virtual Tour — Design System ─────────────────────────── */

:root {
  --tw-black:      #000000;  /* brand black — splash base */
  --tw-black-deep: #0d0d0d;  /* barely-lifted black — glass panel base, gives blur/depth over pure black */
  --tw-white:      #FFFFFF;  /* brand white — primary text on dark ground */
  --tw-brick:      #BE4936;  /* brand brick (Pantone 7619 C) — accents, CTAs, active states */
  --tw-brick-hi:   #D4593F;  /* lightened brick — hover state */
  --tw-sans:       'Basier Square', sans-serif;
  --tw-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Symmetric ease-in-out — spreads motion evenly across the full duration
     instead of front-loading it like --tw-ease does, so long exits (splash
     dismiss) read as a gradual dissolve rather than a quick drop. */
  --tw-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Paints the instant the CSS is parsed — before any JS runs, before the
   splash <div> even exists in the DOM (it's only inserted once the 3DVista
   player is ready, see init()). Without this, the raw page background
   (browser default white) shows for a beat on load, then abruptly swaps to
   the splash's black — this makes that gap invisible instead. */
html, body { background: var(--tw-black); }

/* ── SPLASH ──────────────────────────────────────────────────────────────── */

#tw-splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solid brand-black fallback — paints instantly, so there's no flash of
     empty space before the hero image decodes. */
  background: var(--tw-black);
  /* NOT what animates the Explore Now exit fade — that's driven directly by
     JS (see enterTour() in the wrapper JS), which sets `transition: none`
     inline and animates `opacity` itself via requestAnimationFrame. This
     CSS transition was the original approach but confirmed unreliable: it
     could simply never start interpolating (frozen at opacity:1, no
     transitionend ever firing) under real-world conditions this project
     hits, which made the splash appear to vanish instantly instead of
     dissolving. Left declared here only in case some other code path ever
     toggles `.tw-hiding` outside of enterTour()'s own JS-driven fade. */
  transition: opacity 1.6s var(--tw-ease-inout);
  overflow: hidden;
}

/* Building rendering — temporary placeholder splash background until real
   exterior photography exists (building isn't complete yet, see
   spencer-block.md). Still frame pulled from
   Assets/Footage/SpencerBlockRendering2_Upscaled.mp4 (the only render with
   actual "SPENCER BLOCK" signage visible). */
#tw-splash-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1);
  /* Starts invisible over the solid black fallback above, then crossfades
     in once loaded (see the `tw-hero-loaded` toggle in init()) — a plain
     <img> pops in the instant it decodes with no transition of its own,
     which reads as a jarring flash rather than a reveal. */
  opacity: 0;
  transition: opacity 1s var(--tw-ease-inout), transform 1.6s var(--tw-ease-inout);
  user-select: none;
  pointer-events: none;
}

#tw-splash-hero.tw-hero-loaded { opacity: 1; }

.tw-splash-overlay {
  position: absolute;
  inset: 0;
  /* Dark scrim (heavier top/bottom where text and the Devon lockup sit) so
     the wordmark/CTA stay legible over a busy, colorful rendering — plus the
     brand's brick glow for warmth. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0.68) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(190, 73, 54, 0.16), transparent 65%);
  z-index: 1;
  transition: background 1.6s var(--tw-ease-inout);
}

#tw-splash.tw-hiding {
  opacity: 0;
  pointer-events: none;
}

/* Cinematic exit: hero image slowly pushes in — now driven directly by JS
   (see enterTour() in the wrapper JS) alongside the parent's opacity fade,
   not by this CSS transition. Rule kept only in case some other code path
   ever toggles `.tw-hiding` outside of enterTour()'s own JS-driven fade. */
#tw-splash.tw-hiding #tw-splash-hero {
  transform: scale(1.07);
}

/* NOTE: deliberately no `.tw-hiding .tw-splash-overlay` background rule here
   anymore. It used to swap this scrim from its graduated gradient to a flat
   rgba(0,0,0,0.7) on exit ("the scrim seals to black") — but that background
   transition suffered the exact same never-actually-interpolates failure as
   the splash's own opacity transition (confirmed 2026-07-15: a screen
   recording showed ~96% of the viewport's pixels changing tone in a single
   frame, well within the first 1/60s after the click, while the parent's
   own opacity fade was separately confirmed smooth and gradual over the
   full 1.6s). Since the parent's JS-driven opacity fade already dissolves
   this overlay along with everything else inside #tw-splash, the extra
   recolor wasn't required for correctness — only for a now-removed cosmetic
   flourish — so removing it eliminates the instant-snap artifact entirely
   rather than trying to reproduce a gradient-to-flat-color interpolation in
   JS for a purely decorative effect. */

#tw-splash.tw-gone {
  display: none;
}

.tw-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 36px;
  width: 100%;
  max-width: 720px;
  position: relative;
  z-index: 2;
}

.tw-splash-wordmark-img {
  width: clamp(180px, 18vw, 290px);
  height: auto;
  margin-bottom: clamp(14px, 1.4vw, 22px);
  opacity: 0;
  transform: translateY(24px);
  animation: tw-rise 1.5s 0.45s var(--tw-ease) forwards;
  user-select: none;
  pointer-events: none;
}

.tw-splash-rule {
  width: clamp(72px, 7vw, 108px);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--tw-brick), transparent);
  margin: clamp(18px, 1.8vw, 28px) auto;
  opacity: 0;
  animation: tw-fade 1.1s 0.9s var(--tw-ease) forwards;
}

.tw-splash-location {
  font-family: var(--tw-sans);
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 14px;
  opacity: 0;
  animation: tw-fade 1.0s 1.15s var(--tw-ease) forwards;
}

.tw-splash-enter {
  margin-top: clamp(24px, 2.4vw, 42px);
  font-family: var(--tw-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tw-white);
  background: var(--tw-brick);
  border: none;
  border-radius: 0;
  padding: clamp(18px, 1.8vw, 24px) clamp(42px, 4vw, 66px);
  min-height: 72px;
  min-width: 66px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  touch-action: manipulation;
  box-shadow: 0 4px 24px rgba(190, 73, 54, 0.40);
  transition: background 0.22s, box-shadow 0.22s, transform 0.18s var(--tw-ease);
  opacity: 0;
  animation: tw-rise 1.1s 1.4s var(--tw-ease) forwards;
}

.tw-splash-enter:hover {
  background: var(--tw-brick-hi);
  box-shadow: 0 6px 32px rgba(190, 73, 54, 0.55);
  transform: translateY(-1.5px);
}

.tw-splash-enter:focus-visible {
  outline: 2px solid var(--tw-brick);
  outline-offset: 4px;
}

.tw-splash-arrow {
  width: 21px;
  height: 21px;
  transition: transform 0.18s var(--tw-ease);
}

.tw-splash-enter:hover .tw-splash-arrow {
  transform: translateX(4.5px);
}

/* Devon Properties — pinned to bottom of splash, with label */
.tw-splash-devon-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  opacity: 0;
  animation: tw-fade 1.0s 1.65s var(--tw-ease) forwards;
  white-space: nowrap;
}

.tw-splash-devon-label {
  font-family: var(--tw-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.tw-splash-devon-img {
  width: clamp(100px, 8vw, 138px);
  height: auto;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.45));
  user-select: none;
  pointer-events: none;
}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */

@keyframes tw-rise {
  from { opacity: 0; transform: translateY(21px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tw-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── VIGNETTES ───────────────────────────────────────────────────────────── */
/* Raised-cosine alpha ease (alpha(t) = peak * 0.5 * (1 + cos(pi*t))) instead
   of linear steps — a linear ramp snapping to 0 at its last stop has a slope
   discontinuity that reads as a visible seam over a flat bright surface.
   Corner vignettes use `farthest-side` sizing so the ellipse's radius matches
   the box's own width/height (the default `farthest-corner` overshoots along
   the straight edges, leaving a rectangular edge at the box boundary). */
#tw-vignette-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 195px;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.44) 15%, rgba(0, 0, 0, 0.36) 30%,
    rgba(0, 0, 0, 0.26) 45%, rgba(0, 0, 0, 0.16) 60%, rgba(0, 0, 0, 0.07) 75%,
    rgba(0, 0, 0, 0.01) 90%, rgba(0, 0, 0, 0) 100%
  );
  z-index: 98;
  pointer-events: none;
}

#tw-vignette-bottom {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 270px;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.38) 15%, rgba(0, 0, 0, 0.32) 30%,
    rgba(0, 0, 0, 0.23) 45%, rgba(0, 0, 0, 0.14) 60%, rgba(0, 0, 0, 0.06) 75%,
    rgba(0, 0, 0, 0.01) 90%, rgba(0, 0, 0, 0) 100%
  );
  z-index: 98;
  pointer-events: none;
}

#tw-vignette-tl {
  position: fixed;
  top: 0; left: 0;
  width: 480px;
  height: 280px;
  background: radial-gradient(ellipse farthest-side at 0% 0%,
    rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.17) 15%, rgba(0, 0, 0, 0.14) 30%,
    rgba(0, 0, 0, 0.10) 45%, rgba(0, 0, 0, 0.06) 60%, rgba(0, 0, 0, 0.03) 75%,
    rgba(0, 0, 0, 0.005) 90%, rgba(0, 0, 0, 0) 100%
  );
  z-index: 98;
  pointer-events: none;
}

#tw-vignette-toast {
  position: fixed;
  bottom: 0; left: 0;
  width: 850px;
  height: 680px;
  background: radial-gradient(ellipse farthest-side at 0% 100%,
    rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.90) 15%, rgba(0, 0, 0, 0.75) 30%,
    rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.33) 60%, rgba(0, 0, 0, 0.14) 75%,
    rgba(0, 0, 0, 0.02) 90%, rgba(0, 0, 0, 0) 100%
  );
  z-index: 98;
  pointer-events: none;
}

/* ── UI FLOAT VISIBILITY ─────────────────────────────────────────────────── */

.tw-ui-el {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--tw-ease);
}

.tw-ui-el.tw-show {
  opacity: 1;
  pointer-events: all;
}

#tw-devon-logo-float { transition-delay: 0.04s; }
#tw-logo-float       { transition-delay: 0.08s; }
#tw-cta-btn          { transition-delay: 0.12s; }
#tw-menu-bar         { transition-delay: 0.22s; }

/* ── FLOATING LOGOS ──────────────────────────────────────────────────────── */

#tw-devon-logo-float {
  position: fixed;
  top: 30px;
  left: 36px;
  z-index: 100;
}

.tw-devon-logo-img {
  display: block;
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.55));
}

/* Spencer Block — horizontally centred at top. The horizontal lockup is a
   very wide, short bar (icon + widely letter-spaced wordmark, ~14.5:1) — sized
   by width, not height, so it doesn't overshoot the viewport. Swapped for the
   icon-only mark on mobile (see responsive section) since the full bar is too
   wide for a small screen's top row alongside the CTA button. */
#tw-logo-float {
  position: fixed;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.tw-logo-svg {
  display: block;
  height: auto;
  filter: drop-shadow(0 2px 18px rgba(0,0,0,0.55));
}

.tw-logo-full { width: clamp(220px, 22vw, 360px); }
.tw-logo-icon { display: none; height: 46px; width: auto; }

/* ── FLOATING CTA ────────────────────────────────────────────────────────── */

#tw-cta-btn {
  position: fixed;
  top: 27px;
  right: 30px;
  z-index: 100;
  font-family: var(--tw-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tw-white);
  background: var(--tw-brick);
  border-radius: 0;
  padding: 0 33px;
  height: 66px;
  min-width: 66px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: opacity 0.55s var(--tw-ease), filter 0.2s;
  transition-delay: 0.12s, 0s;
}

#tw-cta-btn:hover  { filter: brightness(1.12); }
#tw-cta-btn:focus-visible { outline: 2px solid var(--tw-white); outline-offset: 3px; }

/* ── BOTTOM MENU BAR ─────────────────────────────────────────────────────── */

#tw-menu-bar {
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.tw-menu-pill {
  display: flex;
  align-items: center;
  background: rgba(13, 13, 13, 0.84);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(190, 73, 54, 0.22);
  border-radius: 0;
  padding: 0 9px;
  height: 78px;
  gap: 0;
  box-shadow: 0 12px 54px rgba(0, 0, 0, 0.5), 0 1.5px 0 rgba(190, 73, 54, 0.08) inset;
}

.tw-menu-group { position: relative; }

.tw-menu-btn {
  display: flex;
  align-items: center;
  gap: 10.5px;
  font-family: var(--tw-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.52);
  background: transparent;
  border: none;
  padding: 0 25.5px;
  height: 60px;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color 0.18s, background 0.18s;
}

.tw-menu-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

.tw-menu-btn[aria-expanded="true"] {
  color: var(--tw-white);
  background: rgba(255, 255, 255, 0.07);
}

.tw-menu-btn.tw-active { color: var(--tw-brick-hi); }

.tw-menu-btn:focus-visible {
  outline: 2px solid var(--tw-brick);
  outline-offset: -2px;
  border-radius: 0;
}

.tw-menu-chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: transform 0.22s var(--tw-ease), opacity 0.18s;
}

.tw-menu-btn:hover .tw-menu-chevron { opacity: 0.65; }
.tw-menu-btn.tw-active .tw-menu-chevron { opacity: 0.65; }
.tw-menu-btn[aria-expanded="true"] .tw-menu-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

.tw-menu-sep {
  width: 1.5px;
  height: 27px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  margin: 0 3px;
}

/* ── DROPDOWN CARDS ──────────────────────────────────────────────────────── */

.tw-dropdown {
  position: absolute;
  bottom: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 277.5px;
  max-height: 62vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(190, 73, 54, 0.35) transparent;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(190, 73, 54, 0.24);
  border-radius: 0;
  padding: 9px;
  box-shadow: 0 30px 84px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(190, 73, 54, 0.07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--tw-ease), transform 0.2s var(--tw-ease);
}

#tw-suites-dd { min-width: 290px; }

/* Wider than the base 277.5px — rows pair a label with a "Coming Soon" tag. */
#tw-amenities-dd { min-width: 340px; }

.tw-dropdown.tw-open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.tw-dropdown::-webkit-scrollbar { width: 10px; }
.tw-dropdown::-webkit-scrollbar-track { background: transparent; }
.tw-dropdown::-webkit-scrollbar-thumb {
  background: rgba(190, 73, 54, 0.35);
  border-radius: 0;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.tw-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(190, 73, 54, 0.6);
  background-clip: padding-box;
}

.tw-dropdown-label {
  font-family: var(--tw-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  padding: 9px 21px 12px;
  display: block;
  border-bottom: 1px solid rgba(190, 73, 54, 0.12);
  margin-bottom: 6px;
}

.tw-dropdown-empty {
  display: block;
  font-family: var(--tw-sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  padding: 14px 21px 18px;
  text-align: center;
}

/* Non-interactive "Coming Soon" row — used for amenities not shot yet, and
   for suites without pano coverage in the current 3DVista export. Shares
   the clickable row's column layout (top line, optional meta line below)
   so a suite row looks consistent whether it's clickable or not. */
.tw-dropdown-item-soon {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  font-family: var(--tw-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.32);
  padding: 11px 21px;
  border-radius: 0;
  cursor: default;
  user-select: none;
}

.tw-dd-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.tw-dropdown-soon-tag {
  flex-shrink: 0;
  font-family: var(--tw-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 89, 63, 0.9);
  border: 1px solid rgba(190, 73, 54, 0.4);
  border-radius: 0;
  padding: 3px 9px;
  white-space: nowrap;
}

.tw-dropdown-group-label {
  display: block;
  font-family: var(--tw-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 89, 63, 0.7);
  padding: 14px 21px 5px;
}

.tw-dropdown-group-label:first-child { padding-top: 6px; }

.tw-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  font-family: var(--tw-sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: none;
  padding: 11px 21px 11px 39px;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  transition: color 0.15s, background 0.15s;
  position: relative;
}

.tw-dd-unit-name {
  font-size: 17px;
  font-weight: 400;
  color: inherit;
  letter-spacing: 0.02em;
}

.tw-dd-meta {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: nowrap;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.tw-dropdown-item:hover   .tw-dd-meta { opacity: 0.85; }
.tw-dropdown-item.tw-active .tw-dd-meta { opacity: 0.75; }

.tw-dd-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--tw-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.tw-dropdown-item::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 4.5px;
  height: 4.5px;
  border-radius: 0;
  background: var(--tw-brick);
  opacity: 0;
  transition: opacity 0.15s;
}

.tw-dropdown-item:hover {
  color: var(--tw-white);
  background: rgba(255, 255, 255, 0.05);
}

.tw-dropdown-item.tw-active {
  color: var(--tw-white);
  font-weight: 600;
}

.tw-dropdown-item.tw-active::before { opacity: 1; }

.tw-dropdown-item:focus-visible {
  outline: 2px solid var(--tw-brick);
  outline-offset: -2px;
  border-radius: 0;
}

/* ── ROOM / UNIT NAME TOAST ──────────────────────────────────────────────── */

#tw-toast {
  position: fixed;
  bottom: 52px;
  left: 48px;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease);
  max-width: 500px;
}

#tw-toast.tw-show {
  opacity: 1;
  transform: translateY(0);
}

.tw-toast-label {
  display: block;
  font-family: var(--tw-sans);
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-brick-hi);
  margin-bottom: 12px;
  text-shadow: 0 1.5px 15px rgba(0,0,0,0.6);
}

.tw-toast-room {
  display: block;
  font-family: var(--tw-sans);
  font-size: clamp(48px, 3.8vw, 78px);
  font-weight: 700;
  color: var(--tw-white);
  line-height: 1.05;
  text-shadow: 0 3px 30px rgba(0,0,0,0.55);
  letter-spacing: 0.005em;
}

.tw-toast-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  font-family: var(--tw-sans);
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1.5px 12px rgba(0,0,0,0.6);
}

.tw-toast-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Same backstop as .tw-dd-meta-item: without this the two-word items
     ("2 Bed", "779 Sq.Ft.") break mid-item onto a second line as soon as the
     row runs out of width, which reads as a layout bug rather than a wrap. */
  white-space: nowrap;
}

.tw-toast-meta-icon {
  color: var(--tw-brick-hi);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.tw-toast-meta-icon svg { width: 30px; height: 30px; }

/* ── FLOATING MAP PILL ───────────────────────────────────────────────────── */

#tw-map-card {
  position: fixed;
  bottom: 42px;
  right: 36px;
  z-index: 100;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(190, 73, 54, 0.22);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(190, 73, 54, 0.07) inset;
  background: rgba(13, 13, 13, 0.84);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  transition-delay: 0.3s;
}

.tw-map-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16.5px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s;
}

.tw-map-header:hover { background: rgba(255, 255, 255, 0.04); }
.tw-map-header:focus-visible { outline: 2px solid var(--tw-brick); outline-offset: -2px; }

.tw-map-header-icon {
  color: var(--tw-brick-hi);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tw-map-header-text {
  font-family: var(--tw-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
  white-space: nowrap;
}

/* ── DRONE / AERIAL BUTTON (hidden — CONFIG.aerialIndex is null for now) ─── */

#tw-aerial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  width: 66px;
  height: 60px;
  border-radius: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.52);
  touch-action: manipulation;
  transition: color 0.18s, background 0.18s;
  margin: 0 3px;
}

#tw-aerial:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.05); }
#tw-aerial.tw-active { color: var(--tw-brick-hi); }
#tw-aerial svg { width: 24px; height: 24px; }
#tw-aerial:focus-visible { outline: 2px solid var(--tw-brick); outline-offset: -2px; border-radius: 0; }

/* ── BRANDED LOAD INDICATOR ──────────────────────────────────────────────── */

#tw-loader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--tw-ease);
}

#tw-loader.tw-loader-active { opacity: 1; }
#tw-loader.tw-loader-done   { opacity: 0; transition: opacity 0.3s var(--tw-ease) 0.15s; }

.tw-loader-fill {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(190,73,54,0), var(--tw-brick) 30%, var(--tw-white) 70%, rgba(255,255,255,0));
  box-shadow: 0 0 12px rgba(190, 73, 54, 0.5);
}

/* ── FULLSCREEN MAP MODAL ────────────────────────────────────────────────── */

#tw-map-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s var(--tw-ease);
}

#tw-map-modal.tw-map-modal-hidden { opacity: 0; pointer-events: none; }

.tw-map-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
}

.tw-map-modal-card {
  position: relative;
  width: 92vw;
  height: 88vh;
  max-width: 2100px;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(190, 73, 54, 0.24);
  border-radius: 0;
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(190, 73, 54, 0.07) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(1);
  transition: transform 0.2s var(--tw-ease);
}

#tw-map-modal.tw-map-modal-hidden .tw-map-modal-card { transform: scale(0.96); }

.tw-map-modal-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 21px 27px;
  border-bottom: 1px solid rgba(190, 73, 54, 0.14);
  background: rgba(13, 13, 13, 0.4);
}

.tw-map-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--tw-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.tw-map-modal-title .tw-map-header-icon { color: var(--tw-brick-hi); }

.tw-map-filter {
  display: flex;
  gap: 3px;
  padding: 4.5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(190, 73, 54, 0.12);
  border-radius: 0;
  flex: 1;
  max-width: 630px;
  overflow-x: auto;
}

.tw-map-filter-btn {
  flex: 1;
  padding: 9px 21px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--tw-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.tw-map-filter-btn:hover { color: rgba(255, 255, 255, 0.85); }
.tw-map-filter-btn.tw-active { background: rgba(190, 73, 54, 0.18); color: var(--tw-brick-hi); }

.tw-map-modal-close {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(190, 73, 54, 0.32);
  border-radius: 0;
  cursor: pointer;
  color: var(--tw-brick-hi);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  flex-shrink: 0;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}

.tw-map-modal-close:hover {
  color: var(--tw-white);
  background: rgba(190, 73, 54, 0.14);
  border-color: rgba(190, 73, 54, 0.6);
}

.tw-map-modal-body { position: relative; flex: 1; min-height: 0; }

#tw-map-modal-canvas { position: absolute; inset: 0; background: #0a0a0a; }
#tw-map-modal-canvas .mapboxgl-ctrl-logo { opacity: 0.35; }
#tw-map-modal-canvas .mapboxgl-ctrl-attrib { font-size: 13.5px; opacity: 0.35; }

#tw-map-modal-canvas .mapboxgl-ctrl-top-right > .mapboxgl-ctrl { margin: 8px 8px 0 0 !important; }
#tw-map-modal-canvas .mapboxgl-ctrl-group {
  background: rgba(13, 13, 13, 0.88) !important;
  border: 1px solid rgba(190, 73, 54, 0.3) !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#tw-map-modal-canvas .mapboxgl-ctrl-group button {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(190, 73, 54, 0.2) !important;
}
#tw-map-modal-canvas .mapboxgl-ctrl-group button:last-child { border-bottom: none !important; }
#tw-map-modal-canvas .mapboxgl-ctrl-group button:hover { background: rgba(190, 73, 54, 0.16) !important; }
#tw-map-modal-canvas .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
#tw-map-modal-canvas .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h12' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.tw-map-layer-toggle {
  position: absolute;
  bottom: 27px;
  left: 27px;
  z-index: 5;
  display: flex;
  gap: 3px;
  padding: 4.5px;
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(190, 73, 54, 0.22);
  border-radius: 0;
  box-shadow: 0 9px 36px rgba(0, 0, 0, 0.6);
}

.tw-map-layer-btn {
  padding: 9px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--tw-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s, color 0.18s;
}

.tw-map-layer-btn:hover     { color: rgba(255, 255, 255, 0.85); }
.tw-map-layer-btn.tw-active { background: rgba(190, 73, 54, 0.18); color: var(--tw-brick-hi); }

/* ── POI MARKERS + POPUP ─────────────────────────────────────────────────── */

.tw-map-poi-chip {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(13, 13, 13, 0.92);
  border: 1.5px solid rgba(190, 73, 54, 0.55);
  border-radius: 50%;
  color: var(--tw-white);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(255, 255, 255, 0.10);
  transition: transform 0.15s var(--tw-ease), border-color 0.18s, color 0.18s, background 0.18s;
}

.tw-map-poi-chip:hover {
  transform: scale(1.18);
  border-color: var(--tw-brick-hi);
  background: rgba(13, 13, 13, 0.98);
  color: var(--tw-brick-hi);
}

.tw-map-pin-large {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background: var(--tw-brick);
  border: 3px solid white !important;
  box-shadow: 0 0 0 6px rgba(190, 73, 54, 0.5), 0 0 0 12px rgba(190, 73, 54, 0.18), 0 4px 18px rgba(0, 0, 0, 0.5);
  animation: tw-pin-pulse 2.2s ease-in-out infinite;
  cursor: default;
}

@keyframes tw-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 9px rgba(190, 73, 54, 0.3), 0 6px 24px rgba(0, 0, 0, 0.7); }
  50%      { box-shadow: 0 0 0 21px rgba(190, 73, 54, 0.05), 0 6px 24px rgba(0, 0, 0, 0.7); }
}

.tw-map-popup-wrap .mapboxgl-popup-content {
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(190, 73, 54, 0.28);
  border-radius: 0;
  padding: 15px 21px;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.65);
  color: var(--tw-white);
}

.tw-map-popup-wrap .mapboxgl-popup-tip { display: none; }

.tw-map-poi-popup .tw-map-poi-cat {
  font-family: var(--tw-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tw-brick-hi);
}

.tw-map-poi-popup .tw-map-poi-name {
  font-family: var(--tw-sans);
  font-size: 21px;
  font-weight: 700;
  color: var(--tw-white);
  margin-top: 3px;
  line-height: 1.25;
  max-width: 330px;
}

.tw-map-poi-popup .tw-map-poi-dist {
  font-family: var(--tw-sans);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}

body.tw-modal-open { overflow: hidden; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 1199px) and (min-width: 769px) {
  #tw-devon-logo-float { top: 22px; left: 26px; }
  .tw-devon-logo-img { height: 42px; }
  #tw-logo-float { top: 32px; }
  .tw-logo-full { width: clamp(180px, 26vw, 280px); }
  #tw-cta-btn    { top: 22px; right: 22px; height: 56px; padding: 0 24px; font-size: 13.5px; }

  #tw-menu-bar   { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .tw-menu-pill  { height: 64px; padding: 0 6px; }
  .tw-menu-btn   { padding: 0 18px; height: 50px; font-size: 14px; gap: 8px; }
  .tw-menu-sep   { height: 24px; margin: 0 2px; }
  #tw-aerial     { width: 56px; height: 50px; margin: 0 2px; }

  /* bottom must clear the nav pill's own top edge (22px base + 64px height =
     86px from viewport bottom) plus a gap, or the toast's last line sits
     behind the pill (confirmed 2026-07-14 — the "SF" meta text was rendering
     underneath the pill's opaque background, not actually clipped). */
  #tw-toast      { bottom: calc(100px + env(safe-area-inset-bottom)); left: 24px; max-width: min(42vw, 420px); }
  .tw-toast-label { font-size: clamp(16px, 2vw, 20px); letter-spacing: 0.16em; margin-bottom: 9px; }
  .tw-toast-room  { font-size: clamp(34px, 5vw, 50px); }
  .tw-toast-meta  { gap: 16px; margin-top: 12px; font-size: clamp(13px, 1.4vw, 17px); }

  #tw-map-card   { bottom: calc(52px + env(safe-area-inset-bottom)); right: 22px; }
}

/* Mobile — all phones (portrait & landscape) and small tablets ≤768px. */
@media (max-width: 768px) {
  #tw-devon-logo-float { display: none; }

  /* Spencer Block logo — the wide horizontal bar is too wide for a phone's
     top row next to the CTA, so swap to the standalone icon mark. */
  #tw-logo-float { top: 18px; left: 20px; transform: none; }
  .tw-logo-full { display: none; }
  .tw-logo-icon { display: block; }

  #tw-cta-btn {
    top: 18px;
    right: 20px;
    height: 54px;
    min-width: 0;
    padding: 0 26px;
    font-size: 15px;
    letter-spacing: 0.12em;
  }

  #tw-menu-bar   { bottom: calc(18px + env(safe-area-inset-bottom)); width: calc(100vw - 40px); display: flex; justify-content: center; left: 20px; right: 20px; transform: none; }
  /* backdrop-filter (any non-"none" filter/backdrop-filter/transform/
     perspective value) makes an element a containing block for its
     position:fixed descendants — and .tw-suites-dd/.tw-amenities-dd switch
     to position:fixed at this breakpoint (see .tw-dropdown below) precisely
     so they can span the full viewport width instead of just this pill.
     With the blur left on, "left:20px/right:20px" below resolved against
     the PILL's (narrower, centered) box instead of the viewport — the
     dropdown rendered ~150px too narrow, centered over the pano instead of
     edge-to-edge, and no longer covered the map pin button it's meant to
     sit above. Dropping the blur here (solid fill instead) fixes all three;
     desktop/tablet are untouched since their popups use position:absolute
     anchored via .tw-menu-group's own position:relative, which is closer in
     the ancestor chain and never reaches this rule. */
  .tw-menu-pill  { height: 70px; padding: 0 6px; max-width: 100%; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8, 8, 8, 0.94); }
  .tw-menu-btn   { padding: 0 20px; height: 58px; font-size: 16px; gap: 8px; letter-spacing: 0.04em; }
  .tw-menu-sep   { height: 26px; margin: 0 2px; }
  #tw-aerial     { width: 58px; height: 58px; margin: 0 2px; }
  .tw-menu-chevron { width: 13px; height: 13px; }
  .tw-menu-pill::-webkit-scrollbar { display: none; }

  #tw-toast       { bottom: auto; top: calc(104px + env(safe-area-inset-top)); left: 20px; right: 20px; max-width: none; transform: translateY(-10px); }
  #tw-toast.tw-show { transform: translateY(0); }
  .tw-toast-label { font-size: 16px; letter-spacing: 0.16em; margin-bottom: 10px; }
  .tw-toast-room  { font-size: clamp(36px, 10vw, 52px); line-height: 1.0; }
  /* At 375px the row has 335px to work with, but the widest suite
     ("1 Bed + Den / 1 Bath / 584 Sq.Ft.") needs ~388px. Previously the items
     had no nowrap, so they broke mid-item ("2" / "Bed" stacked) — and pinning
     nowrap alone just traded that for a horizontal overflow. Let the ROW wrap
     between items instead: each item stays intact, and anything that doesn't
     fit drops to a clean second line. */
  .tw-toast-meta  { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 6px; margin-top: 12px; font-size: 15px; letter-spacing: 0.08em; }
  .tw-toast-meta-item { gap: 7px; align-items: center; }
  .tw-toast-meta-icon svg { width: 24px !important; height: 24px !important; }

  #tw-map-card {
    bottom: calc(104px + env(safe-area-inset-bottom));
    right: 20px;
    left: auto;
    width: 68px;
    height: 68px;
    border-radius: 0;
  }
  .tw-map-header { width: 100%; height: 100%; padding: 0; gap: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; }
  .tw-map-header-text { display: none; }
  .tw-map-header-icon { display: flex; align-items: center; justify-content: center; }
  .tw-map-header-icon svg { width: 26px !important; height: 26px !important; stroke-width: 2.2 !important; }

  .tw-splash-inner { padding: 36px 30px; }
  .tw-splash-wordmark-img { width: clamp(200px, 55vw, 305px); margin-bottom: 14px; }
  .tw-splash-location { font-size: 16px; letter-spacing: 0.12em; margin-top: 12px; }
  .tw-splash-enter {
    margin-top: 36px;
    font-size: 17px;
    padding: 20px 34px;
    min-height: 64px;
    gap: 10px;
  }
  .tw-splash-arrow { width: 22px; height: 22px; }
  .tw-splash-rule { margin: 16px auto; }
  .tw-splash-devon-wrap { bottom: 40px; gap: 14px; }
  .tw-splash-devon-img { width: clamp(85px, 23.8vw, 119px); }

  #tw-vignette-top {
    height: 240px;
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.78) 15%, rgba(0, 0, 0, 0.65) 30%,
      rgba(0, 0, 0, 0.47) 45%, rgba(0, 0, 0, 0.28) 60%, rgba(0, 0, 0, 0.12) 75%,
      rgba(0, 0, 0, 0.02) 90%, rgba(0, 0, 0, 0) 100%
    );
  }
  #tw-vignette-bottom {
    height: 200px;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.38) 15%, rgba(0, 0, 0, 0.32) 30%,
      rgba(0, 0, 0, 0.23) 45%, rgba(0, 0, 0, 0.14) 60%, rgba(0, 0, 0, 0.06) 75%,
      rgba(0, 0, 0, 0.01) 90%, rgba(0, 0, 0, 0) 100%
    );
  }
  #tw-vignette-toast { display: none; }

  /* Dropdowns — fixed to viewport so they're always screen-centred and layer
     over the map FAB circle. */
  .tw-dropdown {
    position: fixed !important;
    left: 20px !important;
    right: 20px !important;
    bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
    z-index: 200 !important;
    transform: translateY(12px) !important;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
  }
  .tw-dropdown.tw-open { transform: translateY(0) !important; }
  .tw-dropdown-item { padding: 16px 20px 16px 32px; font-size: 16px; }
  .tw-dropdown-item::before { left: 12px; }
  .tw-dropdown-item-soon { padding: 16px 20px; }
}

@media (max-height: 680px) {
  .tw-splash-wordmark-img { width: clamp(120px, 18vw, 180px); margin-bottom: 16px; }
  .tw-splash-rule  { margin: 18px auto; }
  .tw-splash-enter { margin-top: 24px; font-size: 15px; min-height: 54px; padding: 16px 36px; }
  #tw-menu-bar     { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .tw-menu-pill    { height: 58px; }
  .tw-menu-btn     { height: 46px; font-size: 14px; }
  #tw-vignette-top { height: 180px; }
}

@media (max-width: 768px) {
  .tw-map-modal-card { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; }
  .tw-map-modal-topbar { flex-wrap: wrap; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .tw-map-modal-title { order: 1; flex: 1; font-size: 12px; gap: 8px; min-width: 0; }
  .tw-map-modal-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tw-map-modal-close { order: 2; width: 44px; height: 44px; }
  .tw-map-filter { order: 3; flex-basis: 100%; max-width: none; }
  .tw-map-filter-btn { padding: 9px 14px; font-size: 12.5px; }
  .tw-map-layer-toggle { bottom: calc(18px + env(safe-area-inset-bottom)); left: 18px; padding: 4px; }
  .tw-map-layer-btn { padding: 8px 14px; font-size: 12.5px; }
  .tw-map-popup-wrap .mapboxgl-popup-content { max-width: calc(100vw - 60px); }
  .tw-map-poi-popup .tw-map-poi-name { font-size: 18px; max-width: 240px; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tw-splash-wordmark-img,
  .tw-splash-rule,
  .tw-splash-location,
  .tw-splash-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .tw-ui-el,
  #tw-toast,
  .tw-dropdown,
  .tw-splash-enter,
  .tw-menu-chevron,
  #tw-loader,
  .tw-loader-fill,
  #tw-map-modal,
  .tw-map-modal-card,
  .tw-map-poi-chip,
  .tw-map-pin-large { transition: none; animation: none; }
  .tw-loader-fill { transform: scaleX(1); }
}