/* Highlights near the top (Matt, 2026-10-22: most ad visitors scroll about a third of the page). Quick-jump row under the
   hero and a sky deck teaser after the numbers. Brand: navy, copper, Grogan Display. */
.jumps { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 26px var(--gutter) 4px; background: var(--night); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.jumps::-webkit-scrollbar { display: none; }
.jumps a { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 30px; color: #fff; text-decoration: none; font: 600 13.5px/1 var(--sans); letter-spacing: .03em; background: rgba(255, 255, 255, .04); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.jumps a:hover { border-color: #e7c9a6; background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.jumps svg { width: 16px; height: 16px; fill: none; stroke: #e7c9a6; stroke-width: 1.7; }
@media (max-width: 700px) { .jumps { justify-content: flex-start; padding-top: 20px; } .jumps a { padding: 10px 15px; font-size: 13px; } .jumps::after { content: ''; flex: 0 0 calc(var(--gutter) - 10px); } }

.skytease { max-width: 1320px; margin: clamp(10px, 2vw, 24px) auto 0; padding: 0 var(--gutter); }
.skytease a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 32px); padding: clamp(22px, 3vw, 34px) clamp(22px, 3.2vw, 44px); border-radius: 8px; overflow: hidden; color: #fff; text-decoration: none; background: radial-gradient(120% 140% at 85% 0%, #1b3560 0%, #0a1322 55%, #050a14 100%); box-shadow: 0 20px 50px rgba(5, 10, 20, .25); }
.skytease__stars { position: absolute; inset: 0; pointer-events: none; opacity: .9; }
.skytease__moon { position: relative; width: clamp(54px, 6vw, 74px); height: clamp(54px, 6vw, 74px); }
.skytease__copy { position: relative; min-width: 0; }
.skytease__copy .eyebrow { margin-bottom: 8px; }
.skytease__title { display: block; font: 400 clamp(26px, 3.2vw, 42px)/1.08 var(--display); color: #fff; }
.skytease__facts { display: block; margin-top: 10px; font: 500 13.5px/1.5 var(--sans); color: rgba(255, 255, 255, .72); letter-spacing: .02em; }
.skytease__facts b { color: #e7c9a6; font-weight: 600; }
.skytease__go { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 30px; background: #fff; color: var(--navy); font: 600 14px/1 var(--sans); white-space: nowrap; transition: transform .25s var(--ease); }
.skytease a:hover .skytease__go { transform: translateX(3px); }
@media (max-width: 700px) {
  .skytease a { grid-template-columns: auto 1fr; }
  .skytease__go { grid-column: 1 / -1; justify-self: start; }
}

/* Phone first screen (Matt, 2026-10-22: print-ad visitors land on phones). Up to 600 px: a full-screen look at the house
   (portrait loop of the pool and porch at dusk, media/v/hero-phone-pool.mp4), with only the eyebrow, the address, the
   price and "Watch the film" at the bottom. Listen moves into the jump row; 3D is there already; VR stays in the 3D
   section. The shade sits only behind the text and a thin band under the logos. Desktop unchanged. */
.jumps__phone { display: none !important; }
@media (max-width: 600px) {
  .hero { min-height: 100vh; min-height: 100svh; height: 100vh; height: 100svh; }
  .hero__video { object-position: 50% 42%; }
  .hero__shade { background: linear-gradient(180deg, rgba(10, 19, 34, .42) 0, rgba(10, 19, 34, 0) 13%, rgba(10, 19, 34, 0) 56%, rgba(10, 19, 34, .55) 74%, rgba(10, 19, 34, .9) 100%) !important; }
  .hero__inner { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }
  .hero__sub, .hero .vrlink, .hero__credit, .hero__actions .btn:not([data-film]) { display: none !important; }
  .hero__title { font-size: 34px; margin-bottom: 8px; }
  .hero__price { margin: 10px 0 18px; }
  .hero__actions .btn[data-film] { flex: 0 0 auto; padding-left: 26px; padding-right: 26px; }
  .jumps__phone { display: inline-flex !important; }
  .jumps button { cursor: pointer; }
}
.jumps button { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 30px; color: #fff; font: 600 13px/1 var(--sans); letter-spacing: .03em; background: rgba(255, 255, 255, .04); }