/*-----------------------------------*\
  #surfaces.css — GOLDEN HOUR VERSION
\*-----------------------------------*/

:root {
  /* 🌅 warm cinematic palette */
  --surface-scrim: rgba(15, 18, 28, 0.18);

  /* replace white glass with amber glow */
  --surface-glass: rgba(246, 231, 193, 0.12);
  --surface-glass-media: rgba(246, 231, 193, 0.22);
  --surface-glass-border: rgba(246, 231, 193, 0.18);

  --surface-blur: 14px;
  --surface-blur-lg: 18px;

  /* input + forms */
  --surface-form: rgba(246, 231, 193, 0.35);
  --surface-input: rgba(255, 244, 220, 0.85);

  /* placeholder no longer white */
  --surface-placeholder: rgba(246, 231, 193, 0.08);
}

/* Page shell */
html {
  background-color: #f6e7c1 !important; /* golden hour base */
}

body {
  background-color: #f6e7c1 !important;
}

/* layout layers */
main,
article,
.section {
  background-color: transparent;
}

/* background video */
#bg-video {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: -1 !important;
}

/* soft warm cinematic overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* golden-hour tint instead of dark scrim */
  background: linear-gradient(
    rgba(246, 231, 193, 0.10),
    rgba(15, 18, 28, 0.10)
  );
}

/* keep content above overlay */
main,
.footer {
  position: relative;
  z-index: 1;
}

/* remove template backgrounds */
.section.service.has-bg-image,
.section.contact.has-bg-image {
  background-image: none !important;
  background-color: transparent !important;
}

/* safety: kill any accidental white cards */
.card,
.surface,
[class*="surface"] {
  background-color: rgba(246, 231, 193, 0.10) !important;
  border-color: rgba(246, 231, 193, 0.18) !important;
}