/* ============================================================================
   site.css — dreamclean.space composition layer.

   The ONLY legal contents of this file are: (a) positioning/sizing of the
   site's own images and video, (b) two animations the kit does not ship
   (marquee scroll, mark spin), (c) one responsive visibility utility for
   the nav. It declares no color, no font-family, no shadow, no radius of
   its own — every value below is a token read from themes/dream.css.

   If you need something here that isn't image/video geometry, it belongs in
   the kit instead: add it to themes/dream.css, re-approve, then use it.
   ========================================================================== */

/* --- mast: the kit styles it, the site pins it ------------------------- */
.mast { position: sticky; top: 0; z-index: 50; }

/* --- the sparkle mark: brand-blue tinted asset, slow spin -------------- */
.mast__mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  animation: mark-spin 14s linear infinite;
}
@keyframes mark-spin { to { transform: rotate(360deg); } }

/* --- hero: one media band, wide but contained, holding the film -------- */
/* Full-bleed was tried and pulled back; the band keeps the kit's radius and
   drop-shadow (from `.hero__band > *`) and runs the wrap's full width —
   cinematic without swallowing the page. */
.hero__band > .hero__film {
  flex: 1 0 100%;
  height: clamp(280px, 52vh, 560px);
  overflow: hidden;
}
.hero__band > .hero__film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- film-frame: a contained band showing the video's FULL frame ------- */
/* Sits inside `.hero__band` to inherit the kit's radius and drop-shadow;
   the aspect-ratio matches the source (16:9) so nothing is cropped away.
   height:auto overrides the kit band's fixed demo height. */
.hero__band > .film-frame {
  flex: 1 0 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero__band > .film-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- media cards: real photos (or video) in the kit's image bed -------- */
/* The kit positions .media__bg absolutely behind the plate; these rules
   only make an <img>/<video> element fill that bed. */
img.media__bg,
video.media__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- marquee: the kit ships the frame, the site ships the motion ------- */
/* Two identical tracks; each scrolls its own full width for a seamless
   loop. Gap must match the kit's `.marquee { gap }` so the seam is even. */
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex: none;
  animation: marquee-scroll 28s linear infinite;
}
.marquee__track > span { display: block; }
@keyframes marquee-scroll {
  to { transform: translateX(calc(-100% - var(--s-5))); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .mast__mark img { animation: none; }
}

/* --- pricing tables: scroll inside their panel on narrow screens ------- */
/* A table's min-content width can exceed a phone viewport; without this the
   panel refuses to shrink and drags the whole page into horizontal
   overflow. Pure overflow geometry — the kit styles the table itself. */
.tblwrap { overflow-x: auto; }
.tblwrap .tbl { min-width: 100%; }

/* --- borough list: display type used as a list, tightened -------------- */
.boro { padding-block: var(--s-4); }

/* --- nav: collapse the link row on small screens ----------------------- */
/* The primary action and the mark survive; anchors and the phone number
   yield. Pure visibility — no styling. Scoped under the theme attribute so
   it outranks the kit's own `[data-theme="dream"] .btn { display }`. */
@media (max-width: 720px) {
  [data-theme="dream"] .nav-desk { display: none; }
}