/* ==================================================================
 * RHOMBUS PRODUCT EXPERIENCE
 * ================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg-deep: #041418;
  --bg-teal: #0a2b32;
  --glow-teal: #123f49;
  --panel: rgba(9, 26, 32, 0.66);
  --panel-solid: #08181e;

  --cyan: #2fe6f7;
  --cyan-strong: #12c7dd;
  --blue-1: #3f8bff;
  --blue-2: #006f94; /* icon glyph colour (chips, hotspots, modal, notes, badge) */

  --text: #eaf6f8;
  --muted: #9db3ba;
  --faint: #63808a;
  --line: rgba(168, 205, 214, 0.34);
  --line-soft: rgba(168, 205, 214, 0.16);

  --r-pill: 999px;
  --r-lg: 28px;
  --r-md: 18px;

  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --pad: clamp(20px, 3.2vw, 52px);
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--text);
  background:
    radial-gradient(
      1100px 720px at 8% -6%,
      var(--glow-teal) 0%,
      transparent 55%
    ),
    radial-gradient(1000px 900px at 100% 108%, #0b3038 0%, transparent 58%),
    var(--bg-deep);
  min-height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.wordmark,
.btn,
.nav-pill,
.loc-btn {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==================================================================
 * App shell + view switching
 * ================================================================== */
#app {
  position: fixed;
  inset: 0;
}

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.992);
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease),
    visibility 0s linear 0.5s;
}
.view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.6s var(--ease);
}

/* ==================================================================
 * Top bar (logo / property pill / burger / website)
 * ================================================================== */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: clamp(18px, 2.4vw, 34px) var(--pad);
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0; /* allow the brand to shrink so the burger is never cut off */
}
.brand-home {
  display: flex;
  align-items: center;
  flex: none; /* logo keeps its size while pills shrink */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.2s var(--ease);
}
.brand-home:hover {
  opacity: 0.82;
}
.brand-home:active {
  transform: scale(0.97);
}
.brand-logo {
  height: clamp(30px, 3vw, 40px);
  width: auto;
  margin-right: 1rem;
}

.nav-pill {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  color: #05222b;
  background: linear-gradient(180deg, #7ff0fb, var(--cyan));
  box-shadow: 0 6px 20px rgba(47, 230, 247, 0.28);
  white-space: nowrap;
}
.nav-pill--ghost {
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}
.nav-pill--ghost:hover {
  border-color: var(--cyan);
}

.nav-pill--ghost-ex {
  color: var(--cyan);
  background: transparent;
  border: 0px solid var(--line);
  box-shadow: none;
}

/* Property name: plain text link in light blue (no pill chrome) */
.property-pill {
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--cyan);
  font-weight: 700;
  font-size: 1.35rem;
  margin-top: 0.3rem;
}

/* Integrations button: floats at the bottom-right of the property view.
   z-index sits below the menu/modal scrims (50/25) so it's naturally
   covered when either opens, and above the scene + footer otherwise. */
.prop-link {
  position: fixed;
  right: var(--pad);
  bottom: clamp(60px, 9vh, 88px);
  z-index:;
}

/* Full-screen toggle: mirrors the integrations button on the opposite
   (bottom-left) corner. Hidden everywhere by default — only revealed on the
   property view at mobile sizes (see the mobile block below). z-index sits
   above the scene/footer but below the menu (50) and modal (90) scrims, so it
   is naturally covered while either is open. */
.fs-btn {
  position: fixed;
  left: var(--pad);
  bottom: clamp(60px, 9vh, 88px);
  z-index: 15;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(9, 26, 32, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.2s var(--ease),
    background 0.2s,
    opacity 0.3s var(--ease);
}
.fs-btn:active {
  transform: scale(0.94);
}
.fs-btn svg {
  width: 22px;
  height: 22px;
}
/* Removed on browsers without the Fullscreen API (set in JS). */
.fs-btn.fs-unsupported {
  display: none !important;
}

.topbar-spacer {
  flex: 1;
}

/* Burger */
.burger {
  width: 46px;
  height: 40px;
  flex: none; /* always keep its full size — never cut off */
  position: relative;
  z-index: 3; /* always above the other header buttons */
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 0 4px;
}
.burger span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--cyan);
  transition:
    transform 0.35s var(--ease),
    opacity 0.25s;
}
.burger:hover span {
  background: #7ff0fb;
}
body.menu-open .burger span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
body.menu-open .burger span:nth-child(2) {
  opacity: 0;
}
body.menu-open .burger span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ==================================================================
 * INTRO
 * ================================================================== */
.intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

.intro-art {
  position: relative;
  overflow: hidden;
}
.intro-art .stage {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Homescreen artwork (SVG/PNG via <img id="home-art">).
   Anchored bottom-left at ~50% of the screen width. The intro image and its
   chips share .home-art-wrap, so chip positions are relative to the image
   (they track it as it scales), not the full column. */
.home-art {
  display: block;
  width: 100%;
  height: auto;
}
.home-art-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50vw;
}
.home-art-wrap .home-art {
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}

.intro-chips {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 12px;
  border-radius: var(--r-pill);
  background: rgba(6, 22, 28, 0.55);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  font-size: 0.98rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.chip.show {
  opacity: 1;
  transform: none;
}
.chip .chip-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-2);
}
.chip .chip-ico svg {
  width: 20px;
  height: 20px;
}
.chip--done .chip-ico {
  color: var(--cyan-strong);
}

.intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 26px;
  padding: var(--pad) clamp(28px, 6vw, 96px);
}
.intro-copy h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.intro-copy p {
  max-width: 30ch;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height: 1.5;
  color: #d7e7ea;
  font-weight: 300;
  text-wrap: pretty;
}

.btn {
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.2px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    filter 0.25s;
}
.btn--primary {
  margin-top: 6px;
  padding: 18px 46px;
  font-size: 1.15rem;
  color: #05222b;
  background: linear-gradient(180deg, #7ff0fb, var(--cyan));
  box-shadow: 0 10px 30px rgba(47, 230, 247, 0.32);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(47, 230, 247, 0.42);
}
.btn--primary:active {
  transform: translateY(0);
}

/* Footer / copyright line — identical text and position (bottom-right) on
   every view. Non-interactive so it never blocks buttons or hotspots, and it
   sits below the modal scrim so it's covered while a modal is open. */
.app-footer {
  position: absolute;
  bottom: clamp(16px, 3vh, 22px);
  right: var(--pad);
  z-index: 8;
  max-width: min(58%, 720px);
  text-align: right;
  color: var(--faint);
  font-size: 0.9rem;
  line-height: 1.4;
  pointer-events: none;
}
/* The footer is non-interactive, but links inside it are clickable. */
.app-footer a {
  pointer-events: auto;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.app-footer a:hover,
.app-footer a:focus-visible {
  border-bottom-color: currentColor;
}

/* ==================================================================
 * SELECT AREA
 * ================================================================== */
.select {
  padding: clamp(88px, 11vh, 130px) var(--pad) 70px;
}
.select-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.select-bg .home-art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50vw;
  filter: blur(8px);
  opacity: 0.4;
}
.select h1,
.select .loc-grid {
  position: relative;
  z-index: 1;
}
.select h1 {
  text-align: center;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  margin-bottom: clamp(28px, 4vh, 52px);
}
.loc-grid {
  flex: 1;
  align-content: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 26px) clamp(18px, 2vw, 34px);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.loc-btn {
  position: relative;
  padding: clamp(16px, 1.7vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(7, 22, 28, 0.4);
  color: var(--text);
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-weight: 600;
  text-align: center;
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.25s var(--ease),
    color 0.3s;
}
.loc-btn.available:hover {
  border-color: var(--cyan);
  background: rgba(47, 230, 247, 0.08);
  transform: translateY(-2px);
}
.loc-btn.available::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(47, 230, 247, 0.25),
    0 8px 26px rgba(47, 230, 247, 0.12);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.loc-btn.available:hover::after {
  opacity: 1;
}
.loc-btn.soon {
  color: var(--faint);
  cursor: default;
  border-color: var(--line-soft);
}
.loc-btn.soon:hover {
  border-color: var(--line);
}

/* Widow: a lone tile left on the last row of the 3-col grid (item count
   n where n % 3 === 1). Drop it into the middle column so it centres while
   keeping the exact width of a normal tile. */
.loc-grid > .loc-btn:last-child:nth-child(3n + 1) {
  grid-column: 2;
}

/* ==================================================================
 * PROPERTY VIEW
 * ================================================================== */
.property {
  overflow: hidden;
}
/* Soft conic glow behind the model (canvas is transparent, so it shows through) */
.property::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  background: conic-gradient(
    from 200deg at 50% 46%,
    #0e3a44 0deg,
    #0a2f6b 90deg,
    #0c3038 170deg,
    #123f49 250deg,
    #17707d 320deg,
    #0e3a44 360deg
  );
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
}

#scene-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
  touch-action: none;
}

/* ---- Flat-art (PNG) scene ----
   Shown instead of the WebGL canvas when a property defines `art:`.
   The stage is a plane in a perspective container that JS sways/tilts;
   hotspots live inside it, so they stay pinned as it moves. */
.art-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-items: center;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 44%;
  touch-action: none;
}
body.art-mode .art-viewport {
  display: grid;
}
body.art-mode #scene-canvas {
  display: none;
}

.art-stage {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  /* baked soft shadow so the plane reads as a floating object */
  filter: drop-shadow(0 42px 60px rgba(0, 0, 0, 0.55));
}
.art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /* Held hidden until fully loaded, then faded in (see artscene.js). */
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.art-img.is-loaded {
  opacity: 1;
}
/* Hotspot layer rides the plane; pucks re-enable their own pointer events */
.art-hotspots {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.art-hotspots.hs-ready {
  opacity: 1;
}
body.modal-open .art-hotspots {
  opacity: 0.35;
  pointer-events: none;
}

.scene-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-items: center;
  text-align: center;
  color: var(--muted);
  padding: 40px;
}
.scene-fallback.show {
  display: grid;
}
.scene-fallback .diamond-badge {
  margin: 0 auto 18px;
}

/* Hotspots layer */
#hotspots {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
#hotspots.hs-ready {
  opacity: 1;
}
#hotspots:not(.hs-ready) .hotspot {
  pointer-events: none;
}
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  will-change: left, top, opacity;
  --hs: 46px;
}
.hotspot-btn {
  position: relative;
  z-index: 2;
  width: var(--hs);
  height: var(--hs);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-2);
  /* Slightly see-through so the scene shows through the puck */
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(233, 246, 251, 0.76) 70%,
    rgba(212, 237, 245, 0.72) 100%
  );
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.hotspot:hover .hotspot-btn {
  background: radial-gradient(
    circle at 50% 40%,
    #ffffff 0%,
    #e9f6fb 70%,
    #d4edf5 100%
  );
}
.hotspot-btn svg {
  width: calc(var(--hs) * 0.47);
  height: calc(var(--hs) * 0.47);
}
.hotspot-btn::before {
  content: "";
  position: absolute;
  inset: calc(var(--hs) * -0.14);
  border-radius: 50%;
  border: 2px solid rgba(63, 139, 255, 0.55);
  opacity: 0.9;
}
.hotspot-btn::after {
  content: "";
  position: absolute;
  inset: calc(var(--hs) * -0.14);
  border-radius: 50%;
  border: 2px solid rgba(47, 230, 247, 0.7);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.hotspot:hover .hotspot-btn {
  transform: scale(1.08);
}

/* Tooltip attached to the side of the puck (puck sits on top of it) */
.hotspot-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(50% + (var(--hs) / 2) - 6px);
  transform: translateY(-50%);
  padding: 7.2px 12.6px 7.2px 19.8px; /* extra left so text clears the puck */
  white-space: nowrap;
  border-radius: 11px;
  background: #06171d;
  color: #fff;
  font-weight: 600;
  /* Fluid size: full 0.77rem only on very wide screens (~1900px+), shrinking
     to a 0.567rem floor (~1100px) as the viewport narrows, so the nowrap labels
     don't collide on mid-width desktops. Below ~760px the mobile query wins. */
  font-size: clamp(0.567rem, 0.2916rem + 0.405vw, 0.7695rem);
  line-height: 1.15;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
/* Flip to the left side when the puck is near the right edge */
.hotspot.flip .hotspot-label {
  left: auto;
  right: calc(50% + (var(--hs) / 2) - 6px);
  padding: 7.2px 19.8px 7.2px 12.6px; /* extra right when flipped */
}
.hotspot:hover .hotspot-label,
.hotspot:focus-within .hotspot-label {
  opacity: 1;
}
/* Desktop (mouse): labels pinned on at all times, but faded back so they
   don't compete with the scene — full strength while hovered or focused. */
@media (hover: hover) and (pointer: fine) {
  .hotspot-label {
    opacity: 0.8;
  }
  .hotspot:hover .hotspot-label,
  .hotspot:focus-within .hotspot-label {
    opacity: 1;
  }
  .hotspot:hover {
    z-index: 5;
  }
}
/* (Removed: the laptop-size rule that hid labels until hover. Client review
   asked for hotspot names to be visible at 100% browser zoom on laptops.) */

/* "Click a hotspot" hint */
.hint {
  position: absolute;
  left: var(--pad);
  bottom: clamp(24px, 4vh, 48px);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1rem);
  line-height: 1.25;
  transition: opacity 0.4s;
}
.diamond-badge {
  position: relative;
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-2);
  background: radial-gradient(
    circle at 50% 40%,
    #ffffff 0%,
    #e9f6fb 70%,
    #d4edf5 100%
  );
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.diamond-badge svg {
  width: 27px;
  height: 27px;
}
.diamond-badge::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(63, 139, 255, 0.55);
}
.diamond-badge::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(47, 230, 247, 0.7);
  animation: pulse 2.4s var(--ease) infinite;
}

/* ==================================================================
 * MODAL (hotspot detail)
 * ================================================================== */
.modal-scrim {
  position: absolute;
  inset: 0;
  /* Must sit above every other layer — topbar (60), menu (50/52) and the
     rotate-hint (80) — so the modal is never punched through by the topbar
     chrome. This matters most on mobile, where the modal grows to nearly
     full height and its top edge would otherwise slide under the topbar.
     Kept below the transient toast (100). Positioning + this z-index also
     make the scrim its own stacking context, so the modal rides along. */
  z-index: 90;
  background: rgba(3, 12, 15, 0.55);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--ease),
    visibility 0s linear 0.4s;
}
.modal-scrim.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease);
}
body.modal-open .hint,
body.modal-open #hotspots {
  opacity: 0.35;
}
body.modal-open #hotspots {
  pointer-events: none;
}

.modal {
  --modal-mv: clamp(24px, 6vh, 88px); /* vertical breathing room */
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 1600px;
  width: calc(100% - 2 * var(--pad));
  height: auto; /* determined by content */
  max-height: calc(100% - 2 * var(--modal-mv));

  z-index: 26;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  border: 1px solid rgba(47, 230, 247, 0.6);
  border-radius: var(--r-lg);
  background: linear-gradient(
    180deg,
    rgba(9, 27, 33, 0.72),
    rgba(6, 20, 25, 0.82)
  );
  backdrop-filter: blur(6px);
  box-shadow:
    var(--shadow),
    0 0 40px rgba(47, 230, 247, 0.08) inset;
  overflow: hidden;
  transform: translate(-50%, calc(-50% + 14px)) scale(0.99);
  opacity: 0;
  transition:
    opacity 0.45s var(--ease),
    transform 0.5s var(--ease);
}
.modal-scrim.show .modal {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modal-body {
  padding: clamp(24px, 3.4vw, 52px);
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-content {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(1rem, -0.25rem + 3.333vw, 2.75rem);
}
.modal-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.modal-icon {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-2);
  background: radial-gradient(
    circle at 50% 40%,
    #ffffff 0%,
    #e9f6fb 70%,
    #d4edf5 100%
  );
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.modal-icon svg {
  width: 29px;
  height: 29px;
}
.modal-icon::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(63, 139, 255, 0.55);
}
.modal-icon::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(47, 230, 247, 0.7);
  display: none; /* no pulse in the modal view */
}
.modal h2 {
  color: var(--cyan);
  font-size: clamp(1.7rem, 2.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
  margin-bottom: 18px;
}
.modal .subtitle {
  font-size: clamp(1.3rem, 1.9vw, 1.9rem);
  font-weight: 400;
  line-height: 1.28;
  margin-bottom: 22px;
}
.modal .desc {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.62;
  color: #cfe0e4;
  font-weight: 300;
  text-wrap: pretty;
}

.modal-visual {
  position: relative;
  overflow: hidden;
  display: grid; /* NEW */
}
.modal-stage {
  position: relative;
  inset: 0;
  display: grid;
  place-items: center;
  align-self: end;
}
.modal-stage img {
  max-width: 82%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Product photos fade in once loaded (lazy-load style, see app.js). */
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.modal-stage img.is-loaded {
  opacity: 1;
}

/* On-brand "device on a platform" placeholder shown when no image file.
   A rounded blue tile floating over an isometric shadow. */
.product-card {
  position: relative;
  width: min(56%, 320px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.product-card .pc-tile {
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  background: linear-gradient(150deg, #6f88ee 0%, #3550c8 55%, #2b43ad 100%);
  box-shadow:
    0 30px 60px rgba(11, 57, 201, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  transform: rotate(-2deg);
}
.product-card .pc-tile svg {
  width: 52%;
  height: 52%;
  color: #fff;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}
.product-card .pc-base {
  position: absolute;
  bottom: 8%;
  width: 64%;
  height: 14%;
  background: radial-gradient(
    ellipse at center,
    rgba(47, 208, 217, 0.28),
    transparent 70%
  );
  filter: blur(4px);
}

.modal-close {
  position: absolute;
  top: clamp(20px, 2vw, 30px);
  right: clamp(20px, 2vw, 30px);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #05222b;
  background: linear-gradient(180deg, #7ff0fb, var(--cyan));
  box-shadow: 0 6px 18px rgba(47, 230, 247, 0.3);
  transition: transform 0.25s var(--ease);
}
.modal-close:hover {
  transform: rotate(90deg);
}
.modal-close svg {
  width: 22px;
  height: 22px;
}

/* ---- Animated notification chips over the hero ---- */
.modal-notes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.note-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 10px;
  border-radius: var(--r-pill);
  background: rgba(6, 22, 28, 0.72);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 500;
  font-size: 0.98rem;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.note-chip.show {
  opacity: 1;
  transform: none;
}
.note-ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-2);
}
.note-ico svg {
  width: 20px;
  height: 20px;
}

/* ---- Featured-products submenu ---- */
.modal-explore {
  margin-top: auto;
  padding-top: clamp(24px, 5vh, 52px);
}
.explore-label {
  color: var(--cyan);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}
.explore-products {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.product-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #0e2a32;
  cursor: pointer;
  transition:
    border-color 0.25s,
    transform 0.25s var(--ease);
}
.product-thumb:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}
.product-thumb .pt-img {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9fd6e6;
}
.product-thumb .pt-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-thumb .pt-img.pt-fallback svg {
  width: 42%;
  height: 42%;
}
.product-thumb .pt-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 4px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(3, 12, 15, 0.9));
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.2s,
    transform 0.2s var(--ease);
}
.product-thumb:hover .pt-name,
.product-thumb:focus-visible .pt-name {
  opacity: 1;
  transform: none;
}

/* Fade the submenu up once the overlay is open */
@keyframes modalFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-scrim.show .modal-explore {
  animation: modalFadeUp 0.5s 0.28s both;
}

/* Explore call-to-action button (single standard button, links out) */
.explore-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 14px 34px;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}

/* ==================================================================
 * INTEGRATIONS MODAL (title + subtitle + logo grid)
 * ================================================================== */
/* Single-column variant of the shared .modal shell */
.modal--panel {
  grid-template-columns: 1fr;
}
.integrations-content {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
}
.integrations-content h2 {
  color: var(--cyan);
  font-size: clamp(1.7rem, 2.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.05;
  margin-bottom: 16px;
}
.integrations-content .subtitle {
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  color: #dcebef;
  margin-bottom: clamp(22px, 3vh, 38px);
  max-width: 62ch;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.logo-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 3;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: #ffffff;
  color: #0e2a32;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  font-size: 0.98rem;
  transition:
    border-color 0.25s,
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
/* Only the linked cells react to hover */
a.logo-cell:hover,
a.logo-cell:focus-visible {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(3, 12, 15, 0.35);
}
.logo-cell .logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.logo-cell.logo-text {
  color: #0e2a32;
}
/* "See all 60+ Integrations" tile (the logo entry linking to the
   integrations index) — styled as a call-to-action square. */
a.logo-cell[href="https://www.rhombus.com/integrations/"] {
  color: #05222b;
  background: linear-gradient(180deg, #7ff0fb, var(--cyan));
  border-color: transparent;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 10px 26px rgba(47, 230, 247, 0.28);
}
a.logo-cell[href="https://www.rhombus.com/integrations/"]:hover,
a.logo-cell[href="https://www.rhombus.com/integrations/"]:focus-visible {
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(47, 230, 247, 0.42);
}

@media (max-width: 640px) {
  .logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }
  .integrations-content .subtitle {
    font-size: clamp(1rem, 3.6vw, 1.25rem);
  }
}

/* ==================================================================
 * SLIDE-IN MENU (all properties)
 * ================================================================== */
.menu-scrim {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(3, 12, 15, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--ease),
    visibility 0s linear 0.4s;
}
body.menu-open .menu-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease);
}

.menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 52;
  height: 100%;
  width: min(420px, 88vw);
  padding: clamp(90px, 12vh, 120px) clamp(28px, 3vw, 44px) 40px;
  background: linear-gradient(180deg, #0a232a, #061217);
  border-left: 1px solid var(--line-soft);
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  overflow-y: auto;
}
body.menu-open .menu {
  transform: none;
}

/* When the menu overlay is open, hide the two top-bar ghost buttons
   ("Integration for schools" and "rhombus.com") so they don't sit on top
   of the menu. Applies on desktop; on mobile these are already handled
   (rhombus.com is display:none and .prop-link is hidden in the mobile
   media query below). */
body.menu-open .prop-link,
body.menu-open .topbar-website {
  opacity: 0;
  pointer-events: none;
}
.menu h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 22px;
  color: var(--muted);
}
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-align: left;
  width: 100%;
  transition:
    border-color 0.25s,
    background 0.25s,
    color 0.25s;
}
.menu-item.available:hover {
  border-color: var(--cyan);
  background: rgba(47, 230, 247, 0.08);
}
.menu-item.available.current {
  border-color: var(--cyan);
  color: var(--cyan);
}
.menu-item.soon {
  color: var(--faint);
  cursor: default;
}
.menu-item .tag {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.menu-item.available .tag {
  color: var(--cyan);
  border: 1px solid rgba(47, 230, 247, 0.4);
}
.menu-item.soon .tag {
  color: var(--faint);
  border: 1px solid var(--line-soft);
}

/* ==================================================================
 * Toast
 * ================================================================== */
.toast {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 80;
  transform: translate(-50%, 20px);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  background: #06171d;
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==================================================================
 * Rotate-to-landscape nudge
 * Shown only on the property view, only in portrait on small screens.
 * ================================================================== */
.rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  text-align: center;
  padding: 40px;
  background:
    radial-gradient(
      700px 500px at 50% 30%,
      var(--glow-teal) 0%,
      transparent 60%
    ),
    var(--bg-deep);
}
.rotate-inner {
  max-width: 320px;
}
.rotate-ico {
  width: 92px;
  height: 92px;
  color: var(--cyan);
  margin-bottom: 26px;
}
.rotate-ico .rp {
  transform-origin: 32px 26px; /* the phone's own centre, so it turns in place */
  animation: tilt 2.4s var(--ease) infinite;
}
@keyframes tilt {
  0%,
  30% {
    transform: rotate(0deg);
  }
  55%,
  75% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
.rotate-hint p {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.rotate-hint span {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
@media (orientation: portrait) and (max-width: 900px) {
  body.view-property .rotate-hint {
    display: grid;
  }
}
.scene-loading {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  transition: opacity 0.5s;
}
.scene-loading.hide {
  opacity: 0;
}
.scene-progress {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(47, 230, 247, 0.2);
  border-top-color: var(--cyan);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================================================================
 * Responsive
 * ================================================================== */
@media (max-width: 900px) {
  .intro {
    grid-template-columns: 1fr;
  }
  .intro-art {
    display: none;
  }
  .intro-copy {
    padding-top: 120px;
  }
  .loc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Now 2 columns: the 3-col widow rule no longer applies — reset it, then
     centre a lone tile (n % 2 === 1) by spanning both columns and holding it
     to a single tile's width. */
  .loc-grid > .loc-btn:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
  .loc-grid > .loc-btn:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(18px, 2vw, 34px) / 2);
  }
  .modal {
    grid-template-columns: 1fr;
  }
  .modal-visual {
    display: none;
  }
  .app-footer {
    font-size: 0.8rem;
    max-width: 62%;
  }

  .modal h2 {
    font-size: clamp(1.35rem, 5vw, 1.7rem);
    margin-bottom: 14px;
  }
  .modal .subtitle {
    font-size: clamp(1.05rem, 3.6vw, 1.3rem);
    margin-bottom: 14px;
  }
  .modal .desc {
    font-size: clamp(0.9rem, 3vw, 1rem);
    line-height: 1.55;
  }
  .modal-content {
    gap: 14px;
  }
  .modal-icon {
    width: 52px;
    height: 52px;
  }
  .modal-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* Short viewports (e.g. landscape phone): reclaim vertical space */
@media (max-height: 620px) {
  .modal {
    --modal-mv: 12px; /* tighter top/bottom margins, still content-height */
  }
  .modal-body {
    padding: 20px 24px;
  }
  .modal h2 {
    font-size: clamp(1.25rem, 4.5vh, 1.6rem);
    margin-bottom: 12px;
  }
  .modal .subtitle {
    font-size: clamp(1rem, 3.4vh, 1.2rem);
    margin-bottom: 10px;
  }
  .modal .desc {
    font-size: clamp(0.88rem, 2.8vh, 0.98rem);
    line-height: 1.5;
  }
}
@media (max-width: 560px) {
  .loc-grid {
    grid-template-columns: 1fr;
  }
  /* Single column: no widows are possible, so clear any centering. */
  .loc-grid > .loc-btn:last-child:nth-child(2n + 1),
  .loc-grid > .loc-btn:last-child:nth-child(3n + 1) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
  .nav-pill {
    padding: 0 16px;
    font-size: 0.85rem;
  }
}

/* Shrink hotspots on narrow or short (e.g. landscape phone) screens */
@media (max-width: 760px), (max-height: 620px) {
  .hotspot {
    --hs: 40px;
  }
  .hotspot-label {
    font-size: 0.6885rem;
    padding: 5.4px 9.9px 5.4px 16.2px;
  }
  .hotspot.flip .hotspot-label {
    padding: 5.4px 16.2px 5.4px 9.9px;
  }
}
@media (max-height: 460px) {
  .hotspot {
    --hs: 34px;
  }
}

/* ==================================================================
 * MOBILE TOP-BAR / HINT / FOOTER FIXES
 * Fires for phones in BOTH orientations: narrow (portrait) OR short
 * (landscape — which is how the property view is actually used, since
 * we nudge users to rotate). Placed last so it wins over earlier blocks.
 * ================================================================== */
@media (max-width: 640px), (max-height: 600px) {
  /* Shrink all text ~15% on mobile. Type is 100% rem-based while spacing is
     px/vw, so this scales text (and nothing structural) cleanly. */
  :root {
    font-size: 85%;
  }

  /* Tighter row so everything fits and the burger always stays on-screen */
  .topbar {
    gap: 12px;
  }
  .brand {
    gap: 12px;
  }

  /* Hide the rhombus.com link on small screens */
  .topbar-website {
    display: none;
  }

  /* Smaller top buttons (box shrunk ~15%; text shrinks via the root above) */
  .nav-pill {
    height: 29px;
    padding: 0 12px;
    font-size: 0.8rem;
  }

  /* Property name stays a compact text link; truncate only if a long
     property name is ever added. (The integrations button is now a
     standalone bottom-right CTA, so it isn't truncated.) */
  .property-pill {
    display: inline-block;
    min-width: 0;
    max-width: 46vw;
    line-height: 29px; /* vertically centre single-line text */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .property-pill {
    max-width: 34vw;
    padding: 0; /* stay a flush text link, not a padded pill */
    height: auto;
  }

  /* Hide the whole hint on mobile */
  .hint {
    display: none;
  }

  /* Footer: centered, full width */
  .app-footer {
    left: var(--pad);
    right: var(--pad);
    max-width: none;
    text-align: center;
    font-size: 0.8rem;
  }

  /* When the menu is open it covers most of the screen on mobile, so the
     property pills must not float on top of it (the burger still does). */
  body.menu-open .property-pill,
  body.menu-open .prop-link {
    opacity: 0;
    pointer-events: none;
  }

  /* Full-screen toggle is a mobile-only affordance, shown on the property
     view in the bottom-left corner. */
  body.view-property .fs-btn {
    display: grid;
  }
  /* Get it out of the way while an overlay is open, matching .prop-link. */
  body.menu-open .fs-btn,
  body.modal-open .fs-btn,
  body.integrations-open .fs-btn {
    opacity: 0;
    pointer-events: none;
  }
}

/* ==================================================================
 * INTRO — mobile (narrow portrait OR short landscape)
 * Views don't scroll by default, so on small screens we drop the
 * two-column art layout, let the copy flow/scroll, and size type down.
 * ================================================================== */
@media (max-width: 640px), (max-height: 600px) {
  .intro {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .intro-art {
    display: none;
  } /* focus on copy + CTA on phones */

  .intro-copy {
    flex: 1 0 auto;
    min-height: 100%; /* centre when it fits, scroll when it doesn't */
    justify-content: center;
    gap: clamp(14px, 3vh, 24px);
    padding: clamp(80px, 15vh, 118px) clamp(22px, 7vw, 48px)
      clamp(40px, 8vh, 72px);
  }
  .intro-copy h1 {
    font-size: clamp(1.7rem, 6vw, 2.6rem);
  }
  .intro-copy p {
    font-size: clamp(1rem, 3.4vw, 1.25rem);
    max-width: 34ch;
  }
  .btn--primary {
    padding: 15px 39px; /* ~15% smaller box; text shrinks via root */
  }
}

/* Extra squeeze for very short landscape phones */
@media (max-height: 430px) {
  .intro-copy {
    padding-top: 64px;
    padding-bottom: 32px;
    gap: 12px;
  }
  .intro-copy h1 {
    font-size: clamp(1.4rem, 7vh, 1.9rem);
  }
  .intro-copy p {
    font-size: clamp(0.95rem, 4.6vh, 1.1rem);
  }
  .btn--primary {
    padding: 12px 33px;
    margin-top: 2px;
  }
}

/* ==================================================================
 * SELECT AREA — mobile (narrow portrait OR short landscape)
 * ================================================================== */
@media (max-width: 640px), (max-height: 600px) {
  .select {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: clamp(76px, 13vh, 104px);
    padding-bottom: clamp(16px, 3vh, 22px); /* footer now supplies the gap */
  }

  /* Pin the background to the viewport so it stays behind the content
     while the view scrolls (absolute would scroll away with the first
     screen-height). */
  .select-bg {
    position: fixed;
  }

  /* Footer flows after the tiles instead of floating over them; it still
     hugs the bottom when the content is short enough to fit. */
  .select .app-footer {
    position: relative;
    inset: auto;
    z-index: 1;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 24px;
  }
  .select h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    margin-bottom: clamp(20px, 3vh, 34px);
  }
  /* Let the grid take its natural height so the view can scroll rather
     than clip tiles. */
  .loc-grid {
    flex: none;
    align-content: start;
  }
  .loc-btn {
    padding: clamp(12px, 3.2vw, 18px);
  } /* ~15% smaller box */
}

/* Short + wide (landscape phone): keep the tiles in one tidy row */
@media (orientation: landscape) and (max-height: 600px) {
  .loc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Back to 3 columns here: clear the 2-col centering and restore the
     middle-column widow placement. */
  .loc-grid > .loc-btn:last-child:nth-child(2n + 1) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
  .loc-grid > .loc-btn:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* ==================================================================
 * MODAL — mobile
 * ================================================================== */
@media (max-width: 640px), (max-height: 600px) {
  /* Hide the decorative icon on phones */
  .modal-icon {
    display: none;
  }

  /* Smaller close button */
  .modal-close {
    width: 36px;
    height: 36px;
    top: 14px;
    right: 14px;
  }
  .modal-close svg {
    width: 18px;
    height: 18px;
  }
  /* Reserve room on the title so it never runs under the close button */
  .modal h2 {
    padding-right: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.14s !important;
  }
  .hotspot-btn::after {
    display: none;
  }
}