/* Global: every element includes its padding/border in width:100% (prevents the
   hero containers — width:100% + 28px padding — from computing to 431px and
   pushing the page wider than the phone, which read as "desktop on mobile"). */
*, *::before, *::after { box-sizing: border-box; }

/* Global: lock the page against horizontal swipe/overflow on every screen */
html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }

/* Brighter velvet background site-wide (matches the homepage): lighter veil + 30% brightness so the lounge scene shows through on every page. */
[style*="velvet-bg.png"] { background: linear-gradient(180deg, rgba(8,6,11,0.42), rgba(8,6,11,0.55)), url('/velvet-bg.png') center center / cover no-repeat !important; filter: brightness(1.3) !important; }
.home-scene { background: linear-gradient(180deg, rgba(8,6,11,0.42), rgba(8,6,11,0.55)), url('/velvet-bg.png') center center / cover no-repeat !important; filter: brightness(1.3) !important; }
/* Thank-you pages stay dark (must come after the rules above to win the cascade) */
.dark-scene { background: linear-gradient(180deg, rgba(8,6,11,0.82), rgba(8,6,11,0.88)), url('/velvet-bg.png') center center / cover no-repeat !important; filter: none !important; }
[from*="magic-scene"] { opacity: 0.55 !important; }

/* Workman Magic — mobile responsiveness.
   IMPORTANT: the runtime (React via support.js) re-serializes inline styles as
   "property: value" WITH a space after the colon, so every [style*=...] selector
   below MUST include that space to match the rendered DOM. */

/* Tablet / small laptop: collapse two-column layouts (photo stacks above text) */
@media (max-width: 880px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* stacked two-column sections: tighten the vertical gap */
  [style*="display: grid"][style*="gap: 64px"] { gap: 32px !important; }
  /* footer: 4 columns -> 2 */
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 34px !important;
  }
  /* reviews masonry: 3 -> 2 columns */
  [style*="columns: 3"] { columns: 2 !important; }
}

/* Phones */
@media (max-width: 560px) {
  [style*="columns: 3"] { columns: 1 !important; }
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
  }
  /* tighten large vertical section padding */
  [style*="padding: 120px 28px"] { padding: 74px 20px !important; }
  [style*="padding: 118px 28px"] { padding: 74px 20px !important; }
  [style*="padding: 110px 28px"] { padding: 66px 20px !important; }
  [style*="padding: 104px 28px"] { padding: 62px 20px !important; }
  [style*="padding: 100px 28px"] { padding: 60px 20px !important; }
  [style*="padding: 96px 28px"]  { padding: 58px 20px !important; }
  [style*="padding: 90px 28px"]  { padding: 54px 20px !important; }
  [style*="padding: 84px 28px"]  { padding: 54px 20px !important; }
  [style*="padding: 80px 28px"]  { padding: 52px 20px !important; }
  /* contact form inner padding */
  [style*="padding: 40px"] { padding: 26px !important; }
  /* video modal breathing room */
  [style*="z-index: 200"] { padding: 14px !important; }
}

/* Testimonials: stack one per row on phones (masonry + grids) */
@media (max-width: 640px) {
  [style*="column-count: 3"], [style*="columns: 3"] { column-count: 1 !important; columns: 1 !important; }
  [style*="minmax(300px, 1fr)"] { grid-template-columns: 1fr !important; }
}