/* =========================================================
   Site-wide UI corrections
   Menu sizing, infographic rows and the homepage market cards. Previously
   inlined on all 28 pages; now served once and cached.
   ========================================================= */
/* ---------------------------------------------------------
   Menu typography — THE single source of truth for the nav.
   Measured baseline before 2026-09-14: desktop 12px/500/+0.01em,
   overlay clamp(1.45rem, 5.8vw, 2.35rem)/600/-0.015em.
   Requested change: +2px at BOTH breakpoints.
     desktop : 12px -> 14px
     overlay : the 5.8vw clamp, plus 2px at every width
   styles.css used to carry a competing 11px !important block; it is gone.
   Nothing else in the cascade may size .site-nav — keep it that way.
   --------------------------------------------------------- */
@media (min-width: 981px) {
  .site-nav {
    gap: clamp(9px, 1.05vw, 16px) !important;
  }
  .site-nav > a,
  .site-nav > a:not(.nav-cta),
  .site-nav .nav-cta {
    font-size: 14px !important;
    letter-spacing: .01em !important;
  }
  .site-nav > a:not(.nav-cta) {
    font-weight: 500 !important;
  }
  .site-nav .nav-cta {
    font-weight: 600 !important;
    padding-inline: 14px !important;
    margin-left: clamp(12px, 1.4vw, 22px) !important;
  }
}
@media (max-width: 980px) {
  .site-nav {
    gap: 10px !important;
  }
  .site-nav > a:not(.nav-cta) {
    font-size: calc(clamp(1.45rem, 5.8vw, 2.35rem) + 2px) !important;
    font-weight: 600 !important;
    letter-spacing: -.015em !important;
  }
  .site-nav .nav-cta {
    font-weight: 650 !important;
  }
}

/* Every infographic/diagram gets its own full-width row. */
.infographic-stack,
.infographic-stack.video-proof-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
.infographic-stack .video-proof-copy {
  width: 100% !important;
  max-width: 980px !important;
}
.campaign-path-figure {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}
.campaign-path-figure img {
  width: 100% !important;
  height: auto !important;
}

/* Homepage market/location cards: iconic crimson city art becomes the card background. */
.home-page .locations-grid .location-card.has-image {
  position: relative !important;
  isolation: isolate;
  min-height: 390px;
  overflow: hidden;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch;
}
.home-page .locations-grid .location-card.has-image .location-card-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border: 0 !important;
  transform: scale(1.015);
}
.home-page .locations-grid .location-card.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,3,4,.18) 0%, rgba(3,3,4,.58) 48%, rgba(3,3,4,.96) 100%);
}
.home-page .locations-grid .location-card.has-image .location-card-body {
  position: relative !important;
  z-index: 2 !important;
  width: 100%;
  min-height: 390px;
  padding: 28px 26px 30px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px !important;
}
.home-page .locations-grid .location-card.has-image .location-card-body a {
  margin-top: 6px !important;
}
@media (max-width: 720px) {
  .home-page .locations-grid .location-card.has-image,
  .home-page .locations-grid .location-card.has-image .location-card-body {
    min-height: 330px;
  }
}

/* vr-shader-accent */
/* =========================================================
   Section shader accent — see assets/js/shader-accent.js

   .packages-section and .typeform-section have OPAQUE backgrounds, so a
   canvas painted behind the section is invisible. The canvas therefore lives
   INSIDE the section: above the section's own background, below its content.

   The host class goes on the SECTION and the layer class on the CANVAS. Getting
   these the wrong way round gives the section position:absolute and leaves the
   canvas with no CSS box at all — it then silently falls back to 2x2 and
   renders nothing, with no error.
   ========================================================= */
.shader-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Full-section field — pricing. */
canvas.shader-accent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
/* Band, not a full-section field. The brief form's panel is
   rgba(255,255,255,0.045) — effectively transparent — so a full-bleed field
   shows straight through the form and reddens every label and input. */
canvas.shader-accent--form {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: clamp(260px, 30vw, 460px);
  display: block;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}
/* Everything else in the host section paints above the canvas. */
.shader-host > *:not(canvas.shader-accent):not(canvas.shader-accent--form) {
  position: relative;
  z-index: 1;
}

/* Footer credit — agency attribution. Inherits the muted footer tone, lifts to
   near-white on hover so it reads as a link without shouting in the footer. */
.footer-credit {
  text-align: center;
}
.footer-credit a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-decoration-color: rgba(239, 35, 48, 0.55);
  text-underline-offset: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: #fff;
  text-decoration-color: var(--vr-red, #ef2330);
}