/* =========================================================================
   INQUIRY POPUP — the "Get a Call back" lead form. The old Elementor site
   ran this as a popup template (id 974); this theme doesn't run Elementor,
   so it's a single modal injected once by site.js (inquiryModal()) and
   opened by any [data-open-inquiry] button, rather than markup repeated on
   every page. Numbers-only CTAs (tel: links, "Book a Consultation Call")
   stay plain dialling links and are not wired to this.
   ========================================================================= */

.inquiry-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: var(--sp-3);
  background: rgba(var(--void-rgb), 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.inquiry-overlay[data-open] { display: flex; }
body[data-inquiry-open] { overflow: hidden; }

.inquiry-panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: auto;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: var(--hair) solid var(--rule);
  background: var(--surface-raised);
  box-shadow: 0 40px 80px -30px rgba(var(--void-rgb), 0.9);
  animation: inquiry-in var(--t-1) var(--ease);
}
@keyframes inquiry-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .inquiry-panel { animation: none; }
}

.inquiry-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-mid);
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.inquiry-close:hover,
.inquiry-close:focus-visible { background: rgba(var(--white-rgb), 0.08); color: var(--ink); }
.inquiry-close svg { width: 1.1rem; height: 1.1rem; }

.inquiry-h {
  margin: 0 0 0.35rem;
  padding-right: 2rem;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}
.inquiry-sub { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-mid); }

.inquiry-form { display: flex; flex-direction: column; gap: 0.85rem; }

.inquiry-field { display: flex; flex-direction: column; gap: 0.35rem; }
.inquiry-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-belt);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.inquiry-field input,
.inquiry-field select {
  width: 100%;
  padding: 0.8em 1em;
  border: var(--hair) solid rgba(var(--white-rgb), 0.16);
  border-radius: var(--r-sm);
  background: rgba(var(--void-rgb), 0.55);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  transition: border-color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.inquiry-field select { appearance: none; -webkit-appearance: none; }
.inquiry-field input::placeholder { color: var(--ink-mid); opacity: 0.7; }
.inquiry-field input:focus,
.inquiry-field select:focus { outline: none; border-color: var(--gold); background: rgba(var(--void-rgb), 0.8); }
.inquiry-field select:invalid { color: var(--ink-mid); }

.inquiry-accept {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-mid);
}
.inquiry-accept input { flex: none; margin-top: 0.2em; accent-color: var(--brand-lit); }
.inquiry-accept a { color: var(--ink-mid); text-decoration: underline; }
.inquiry-accept a:hover { color: var(--brand-lit); }

.inquiry-submit { width: 100%; margin-top: 0.15rem; }

.inquiry-note {
  margin: 0.6rem 0 0;
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.inquiry-note[hidden] { display: none; }
.inquiry-note.is-error { color: var(--brand-lit); }

@media (max-width: 480px) {
  .inquiry-panel { padding: var(--sp-3); }
}

/* =========================================================================
   VIDEO LIGHTBOX — one shared on-site YouTube player, built on first use by
   site.js (videoLightbox()) and opened by any link to a YouTube video, so
   testimonials, reels and films play here instead of sending the visitor
   to youtube.com. Landscape videos are 16:9; Shorts are 9:16 and the panel
   narrows to match.
   ========================================================================= */

.vlb {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(var(--void-rgb), 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.vlb[data-open] { display: flex; }
body[data-video-open] { overflow: hidden; }

.vlb-panel {
  width: min(100%, 64rem);
  animation: inquiry-in var(--t-1) var(--ease);
}
/* a Short is 9:16 — size the panel from the height it can have on screen */
.vlb-panel.is-short { width: min(100%, calc(min(76vh, 42rem) * 0.5625)); }

.vlb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 0.6rem;
}
.vlb-yt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-belt);
  text-transform: uppercase;
  color: var(--ink-mid);
  text-decoration: none;
}
.vlb-yt:hover, .vlb-yt:focus-visible { color: var(--ink); text-decoration: underline; }
.vlb-close {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--white-rgb), 0.08);
  color: var(--ink);
  transition: background var(--t-1) var(--ease);
}
.vlb-close:hover, .vlb-close:focus-visible { background: rgba(var(--white-rgb), 0.18); }
.vlb-close svg { width: 1.1rem; height: 1.1rem; }

.vlb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.vlb-stage.is-short { aspect-ratio: 9 / 16; }
.vlb-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .vlb-panel { animation: none; }
}