/*
 * Visual language derived from the CQR landscape painting.
 * The artwork stays decorative: a dark veil preserves product and form contrast.
 */
:root {
  --bg: #07100f;
  --bg-2: #0b1514;
  --panel: #101b1a;
  --panel-2: #172523;
  --border: rgba(180, 202, 193, .14);
  --border-strong: rgba(191, 211, 203, .25);
  --text: #f4f0e8;
  --muted: #aab1aa;
  --faint: #7f8982;
  --accent: #ed7b50;
  --accent-2: #f2a165;
  --teal: #5b9990;
  --teal-deep: #376f72;
  --shadow-lg: 0 34px 96px rgba(0, 0, 0, .44);
}

html { background: #07100f; }

body {
  position: relative;
  isolation: isolate;
  background: #07100f !important;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  z-index: -2;
  background-image:
    linear-gradient(180deg, rgba(4, 11, 12, .67) 0%, rgba(5, 12, 13, .76) 45%, rgba(5, 11, 12, .88) 100%),
    url("cqr-painting-background.jpg");
  background-image:
    linear-gradient(180deg, rgba(4, 11, 12, .67) 0%, rgba(5, 12, 13, .76) 45%, rgba(5, 11, 12, .88) 100%),
    image-set(
      url("cqr-painting-background.webp") type("image/webp"),
      url("cqr-painting-background.jpg") type("image/jpeg")
    );
  background-position: center, center 44%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(.72) contrast(1.02) brightness(.82);
  transform: scale(1.012);
}

body::after {
  z-index: -1;
  background:
    radial-gradient(70% 52% at 14% 5%, rgba(91, 153, 144, .12), transparent 72%),
    radial-gradient(58% 44% at 88% 10%, rgba(237, 123, 80, .08), transparent 74%),
    linear-gradient(90deg, rgba(4, 10, 11, .2), transparent 35%, rgba(4, 10, 11, .18));
}

::selection { background: rgba(237, 123, 80, .34); }

/* Let the canvas texture breathe through the interface without reducing legibility. */
.term,
.shot,
.arch,
.bespoke-panel,
.contact-card,
.panel,
.booking-card,
.host-card {
  background: linear-gradient(148deg, rgba(16, 28, 28, .91), rgba(5, 12, 13, .95)) !important;
  border-color: rgba(191, 211, 203, .21) !important;
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, .028) !important;
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
}

.card,
.feat,
.eng,
.model {
  background: linear-gradient(145deg, rgba(17, 29, 29, .79), rgba(7, 14, 15, .89)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stats,
.workflow { background: rgba(7, 15, 16, .72) !important; }

.cta-band {
  background: linear-gradient(135deg, rgba(21, 37, 36, .84), rgba(7, 14, 15, .93)) !important;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

footer { background: rgba(4, 10, 11, .82) !important; }

.hero-grid-bg,
.grid-bg,
.booking-shell::before,
.portal-shell::before { opacity: .42 !important; }

.hero-glow,
.page-hero .glow,
main > .glow,
.booking-shell::after,
.portal-shell::after {
  background: radial-gradient(ellipse, rgba(237, 123, 80, .1), rgba(55, 111, 114, .055) 45%, transparent 70%) !important;
}

.intro-playing .site-intro {
  background:
    linear-gradient(180deg, rgba(4, 10, 11, .82), rgba(4, 10, 11, .92)),
    url("cqr-painting-background.jpg") center 44% / cover no-repeat;
  background:
    linear-gradient(180deg, rgba(4, 10, 11, .82), rgba(4, 10, 11, .92)),
    image-set(
      url("cqr-painting-background.webp") type("image/webp"),
      url("cqr-painting-background.jpg") type("image/jpeg")
    ) center 44% / cover no-repeat;
}

.intro-playing .site-intro::before { opacity: .2; }

@media (max-width: 620px) {
  body::before {
    background-position: center, 52% center;
    filter: saturate(.65) contrast(1.02) brightness(.76);
  }
}

@media (prefers-contrast: more) {
  body::before {
    background-image:
      linear-gradient(180deg, rgba(3, 9, 10, .82), rgba(3, 9, 10, .93)),
      url("cqr-painting-background.jpg");
  }
}