/* 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; }

/* iOS Safari: `vh` resolves to the tallest (address-bar-hidden) viewport, so full-height hero
   sections make the page taller than what's actually visible — you can then scroll past the
   footer into empty background. `dvh` tracks the currently-visible viewport and removes that
   phantom space. Scoped to @supports so only browsers that understand dvh (all modern) apply it. */
@supports (min-height: 100dvh) {
  [style*="min-height: 100vh"] { min-height: 100dvh !important; }
  [style*="min-height: 82vh"]  { min-height: 82dvh !important; }
  [style*="min-height: 74vh"]  { min-height: 74dvh !important; }
}

/* 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('/assets/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('/assets/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('/assets/velvet-bg.png') center center / cover no-repeat !important; filter: none !important; }
[from*="magic-scene"] { opacity: 1 !important; filter: brightness(0.90) !important; }

/* ============ Readability over the floating-card scene ============
   NOTE: the runtime re-serializes inline styles WITH a space after the colon,
   so [style*=...] selectors below must include that space to match the DOM. */
/* Body copy: full white + shadow so it never loses contrast against a bright card.
   (The CSSOM normalizes hex to rgb() in the style attribute, so match on rgb.) */
p[style*="color: rgb(195, 180, 152)"], p[style*="color: rgb(200, 184, 156)"],
p[style*="color: rgb(228, 218, 196)"], p[style*="color: rgb(202, 191, 166)"],
p[style*="color: rgb(212, 199, 171)"], p[style*="color: rgb(232, 220, 192)"] {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 4px 16px rgba(0,0,0,0.5) !important;
}
/* Solid-fill headings get the same shadow (gold/gradient headings already use drop-shadow) */
h1[style*="color: rgb(244, 236, 221)"], h2[style*="color: rgb(244, 236, 221)"], h3[style*="color: rgb(244, 236, 221)"] {
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 4px 16px rgba(0,0,0,0.5) !important;
}
/* Eyebrow labels ("LET THE MAGIC BEGIN"): brighter gold + shadow so they hold up over a card */
[style*="color: rgb(232, 200, 119)"][style*="text-transform: uppercase"] {
  color: #f6d98a !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.6) !important;
}
/* Scrim: a guaranteed-dark radial surface behind the hero + CTA text groups */
section[style*="text-align: center"] > div[style*="max-width: 720px"],
section[style*="text-align: center"] > div[style*="max-width: 760px"],
section[style*="text-align: center"] > div[style*="max-width: 820px"],
section[style*="text-align: center"] > div[style*="max-width: 860px"] {
  background: radial-gradient(ellipse at center, rgba(10,5,20,0.55), transparent 70%) !important;
}
[style*="animation: wmRise"] {
  background: radial-gradient(ellipse 78% 70% at 34% 44%, rgba(10,5,20,0.5), transparent 72%) !important;
}
/* Outline "ghost" buttons (See Chris Perform, See the Reactions, etc.): dark translucent
   backing so floating cards never show through the text. Site-wide for a consistent UI.
   No !important — each button's own style-hover background still wins on hover. */
a[style*="border: 1px solid rgba(240, 217, 140, 0.5"] {
  background: rgba(6, 4, 10, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* 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; }
}

/* ===== CRM enquiry form =====================================================
   The forms are now inline on the page (they used to be cross-domain Mago
   iframes styled by mago-form-custom-css.css, which is NOT loaded here). These
   rules port that same theme onto the site so the form keeps the transparent
   card, gold uppercase labels and gold gradient button it had before. */
.wm-form-wrap { text-align: left; }
.wm-crm-form .form-group { margin-bottom: 18px; }

.wm-crm-form .control-label {
  display: block;
  color: #cbb98f;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wm-crm-form .wm-help {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  color: #9a8d70;
  margin: -2px 0 6px;
}
.wm-crm-form .form-control {
  width: 100%;
  box-sizing: border-box;
  background: rgba(8, 6, 11, 0.7);
  border: 1px solid rgba(200, 162, 76, 0.45);
  border-radius: 3px;
  padding: 14px 16px;
  color: #f4ecdd;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: none;
}
.wm-crm-form .form-control:focus {
  border-color: #e8c877;
  outline: none;
  box-shadow: 0 0 0 2px rgba(200, 162, 76, 0.25);
}
.wm-crm-form textarea.form-control { min-height: 120px; resize: vertical; display: block; }
/* date/number controls: keep the dark field readable in Safari + Chrome */
.wm-crm-form input[type="date"] { color-scheme: dark; }

.wm-crm-form .btn.btn-primary {
  width: 100%;
  display: block;
  background: linear-gradient(100deg, #e8c877, #c8a24c);
  border: none;
  color: #1a1206;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 18px;
  border-radius: 3px;
  box-shadow: 0 14px 40px rgba(200, 162, 76, 0.3);
  cursor: pointer;
  margin-top: 6px;
}
.wm-crm-form .btn.btn-primary:hover { filter: brightness(1.06); }
.wm-crm-form .btn.btn-primary:disabled { opacity: 0.75; cursor: wait; }

.wm-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2px solid rgba(26, 18, 6, 0.35);
  border-top-color: #1a1206;
  border-radius: 50%;
  animation: wm-spin 0.6s linear infinite;
}
@keyframes wm-spin { to { transform: rotate(360deg); } }
.wm-crm-form .wm-form-status {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
  min-height: 1em;
}

/* ===== Gold "glare" sweep across photos (shine.js tags .wm-shine) =====
   Desktop sweeps on :hover; touch devices sweep on tap via .wm-shine-go. */
.wm-shine { position: relative; overflow: hidden; isolation: isolate; }
.wm-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 244, 214, 0.14) 40%,
    rgba(240, 217, 140, 0.50) 50%,
    rgba(255, 244, 214, 0.14) 60%,
    transparent 100%);
  transform: skewX(-22deg);
  transition: left 0.75s cubic-bezier(0.25, 0.6, 0.3, 1);
  pointer-events: none;
  z-index: 3;
}
@media (hover: hover) {
  .wm-shine:hover::after { left: 130%; }
}
.wm-shine.wm-shine-go::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .wm-shine::after { transition: none; }
}