/* Hotfix: Big Four city/office look on homepage — CSS-only, content unchanged.
   Mirrors Tracker masthead treatment without requiring a React rebuild. */

.marketing-site .hero,
.marketing-site #problem,
.marketing-site #platform,
.marketing-site #assessments,
.marketing-site #architecture,
.marketing-site #subscriptions,
.marketing-site #about,
.marketing-site #request.cta {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
}

.marketing-site .hero > .container,
.marketing-site .hero > .hero-grid-layout,
.marketing-site #problem > .container,
.marketing-site #platform > .container,
.marketing-site #assessments > .container,
.marketing-site #architecture > .container,
.marketing-site #subscriptions > .container,
.marketing-site #about > .container,
.marketing-site #request.cta > .container {
  position: relative;
  z-index: 1;
}

.marketing-site .hero::before,
.marketing-site #problem::before,
.marketing-site #platform::before,
.marketing-site #assessments::before,
.marketing-site #architecture::before,
.marketing-site #subscriptions::before,
.marketing-site #about::before,
.marketing-site #request.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

.marketing-site .hero::after,
.marketing-site #problem::after,
.marketing-site #platform::after,
.marketing-site #assessments::after,
.marketing-site #architecture::after,
.marketing-site #subscriptions::after,
.marketing-site #about::after,
.marketing-site #request.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 78% 35%, rgba(91, 57, 252, 0.26), transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(48, 213, 236, 0.14), transparent 65%);
}

/* Foundation strip — no photo overlay (short band; slide art stretches badly) */
.marketing-site .mkt-foundation::before,
.marketing-site .mkt-foundation::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.marketing-site .mkt-foundation .editorial-backdrop {
  display: none !important;
}

/* Hero — corporate HQ / glass towers (Tracker masthead twin) */
.marketing-site .hero {
  background: #04111f !important;
}
.marketing-site .hero::before {
  background-image:
    linear-gradient(115deg, rgba(4, 17, 31, 0.94) 0%, rgba(4, 17, 31, 0.72) 48%, rgba(11, 18, 32, 0.5) 100%),
    url("/tracker-assets/editorial/hero-corporate-hq.jpg");
  background-position: center top;
}
.marketing-site .hero .hero-orb {
  opacity: 0.28 !important;
}

/* Problem — architecture skyline, faint wash */
.marketing-site #problem::before {
  opacity: 0.9;
  background-image:
    linear-gradient(180deg, rgba(7, 9, 26, 0.92) 0%, rgba(7, 9, 26, 0.88) 50%, rgba(7, 9, 26, 0.94) 100%),
    url("/tracker-assets/editorial/hero-architecture.jpg");
  background-position: center 30%;
}

/* Platform — SOC / office ops, edge fade */
.marketing-site #platform::before {
  background-image:
    linear-gradient(90deg, rgba(7, 9, 26, 0.96) 0%, rgba(7, 9, 26, 0.82) 48%, rgba(7, 9, 26, 0.55) 100%),
    url("/tracker-assets/editorial/soc-operations.jpg");
  background-position: right center;
}

/* Assessments — report/office cover */
.marketing-site #assessments::before {
  background-image:
    linear-gradient(180deg, rgba(7, 9, 26, 0.92) 0%, rgba(7, 9, 26, 0.88) 50%, rgba(7, 9, 26, 0.94) 100%),
    url("/tracker-assets/editorial/report-cover.jpg");
  background-position: left center;
  opacity: 0.95;
}

/* Architecture — skyscraper edge */
.marketing-site #architecture::before {
  background-image:
    linear-gradient(90deg, rgba(7, 9, 26, 0.96) 0%, rgba(7, 9, 26, 0.82) 48%, rgba(7, 9, 26, 0.55) 100%),
    url("/tracker-assets/editorial/hero-architecture.jpg");
  background-position: right 20%;
}

/* Subscriptions — real skyline (not slide mock art) */
.marketing-site #subscriptions::before {
  background-image:
    linear-gradient(180deg, rgba(7, 9, 26, 0.92) 0%, rgba(7, 9, 26, 0.88) 50%, rgba(7, 9, 26, 0.94) 100%),
    url("/tracker-assets/editorial/hero-architecture.jpg");
  background-position: center bottom;
}

/* About — closing corporate */
.marketing-site #about::before {
  background-image:
    linear-gradient(115deg, rgba(4, 17, 31, 0.9) 0%, rgba(4, 17, 31, 0.84) 55%, rgba(7, 9, 26, 0.78) 100%),
    url("/tracker-assets/editorial/closing-corporate.jpg");
  background-position: center top;
}

/* CTA / request — closing corporate */
.marketing-site #request.cta {
  background: #04111f !important;
}
.marketing-site #request.cta::before {
  background-image:
    linear-gradient(115deg, rgba(4, 17, 31, 0.94) 0%, rgba(4, 17, 31, 0.78) 48%, rgba(7, 9, 26, 0.62) 100%),
    url("/tracker-assets/editorial/closing-corporate.jpg");
  background-position: center 40%;
}
.marketing-site #request.cta .cta-orb {
  opacity: 0.28 !important;
}

@media (max-width: 900px) {
  .marketing-site .hero::before,
  .marketing-site #problem::before,
  .marketing-site #platform::before,
  .marketing-site #assessments::before,
  .marketing-site #architecture::before,
  .marketing-site #subscriptions::before,
  .marketing-site #about::before,
  .marketing-site #request.cta::before {
    background-position: center center;
  }
}
