/* Use only the right-side dashboard region from each selected slide reference. */
@media (min-width: 1025px) {
  /* Prevent browser zoom from turning 100vh into an oversized, empty hero. */
  #home { height: clamp(640px, 100vh, 900px) !important; }

  .home-hero-slide::before,
  .home-hero-slide::after { content: none; }

  /* Restore the original artwork on the two mechanism slides. */
  .seo-demand-slide::before,
  .local-global-slide::before { display: none; }

  .seo-demand-slide::after,
  .local-global-slide::after { display: none; }

  .home-hero-slide .home-hero-background { display: block !important; z-index:1; }

  /* Match each original artwork's navy canvas across the entire slide. */
  .seo-demand-slide { background:#031229; }
  .local-global-slide { background:#00163d; }

  /* Each carousel slide follows the location-page pattern: one continuous hero image, layered under live copy. */
  .home-hero-slide:nth-child(1)::before,
  .home-hero-slide:nth-child(2)::before,
  .home-hero-slide:nth-child(3)::before,
  .home-hero-slide:nth-child(4)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
    background:
      linear-gradient(90deg, #06152e 0%, rgba(6, 21, 46, 0.98) 38%, rgba(6, 21, 46, 0.48) 54%, rgba(6, 21, 46, 0.08) 72%, rgba(6, 21, 46, 0.12) 100%),
      var(--hero-slide-art) right bottom / auto 100% no-repeat;
    filter: saturate(0.9) brightness(0.94);
  }

  .home-hero-slide:nth-child(1) {
    --hero-slide-art: url("../img/home-hero-sdm-growth-engine.webp");
  }

  /* Keep the first-slide promise as three purposeful desktop lines. */
  .home-hero-slide:nth-child(1) .home-hero-copy { max-width: 780px; }
  .home-hero-slide:nth-child(1) .home-hero-copy h1 { white-space: nowrap; }

  /* Start the first-slide artwork below the fixed navigation, leaving its top unobstructed. */
  .home-hero-slide:nth-child(1)::before {
    background-color: #020b1a;
    background-image:
      linear-gradient(90deg, #020b1a 0%, rgba(2, 11, 26, .98) 28%, rgba(2, 11, 26, .12) 38%, rgba(2, 11, 26, .06) 57%, rgba(2, 11, 26, .06) 74%, rgba(2, 11, 26, .08) 100%),
      var(--hero-slide-art);
    background-size: 100% 100%, auto calc(100% - 74px);
    /* Keep the empty matching-navy area behind the copy, never beside the artwork. */
    background-position: center, right bottom;
  }
  /* Fade the artwork's built-in navy into the menu background, avoiding a visible colour seam. */
  .home-hero-slide:nth-child(1)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, #030a17 0 74px, rgba(3, 10, 23, .62) 96px, rgba(3, 10, 23, .16) 116px, transparent 142px);
  }
  .home-hero-slide:nth-child(2) { --hero-slide-art: url("../img/home-hero-sdm-growth-command.webp"); }

  /* Preserve the supplied growth-command artwork without cropping or stretching it. */
  .home-hero-slide:nth-child(2)::before {
    background-color: #020b1a;
    background-size: 100% 100%, auto calc(100% - 74px);
    background-position: center, right bottom;
  }
  .home-hero-slide:nth-child(3) { --hero-slide-art: url("../img/home-hero-seo-authority-clean.webp"); }
  .home-hero-slide:nth-child(4) { --hero-slide-art: url("../img/home-hero-local-global-clean.webp"); }

  /* Reference artwork for these slides includes baked-in left copy. Keep its figures while masking that copy under the live content. */
  .home-hero-slide:nth-child(2)::before,
  .home-hero-slide:nth-child(3)::before,
  .home-hero-slide:nth-child(4)::before {
    background-image:
      linear-gradient(90deg, #06152e 0%, #06152e 60%, rgba(6, 21, 46, 0.96) 66%, rgba(6, 21, 46, 0.38) 76%, rgba(6, 21, 46, 0.08) 100%),
      var(--hero-slide-art);
  }

  /* The growth-system visual stays crisp and proportional, like the location-page banner photos. */
  .home-hero-slide:nth-child(2)::before {
    background-image:
      linear-gradient(90deg, #06152e 0%, #06152e 44%, rgba(6, 21, 46, 0.86) 50%, rgba(6, 21, 46, 0.28) 58%, rgba(6, 21, 46, 0) 66%),
      var(--hero-slide-art);
    filter: none;
  }

  .home-hero-slide:nth-child(3)::before,
  .home-hero-slide:nth-child(4)::before {
    background-image:
      linear-gradient(90deg, #06152e 0%, #06152e 44%, rgba(6, 21, 46, 0.86) 50%, rgba(6, 21, 46, 0.28) 58%, rgba(6, 21, 46, 0) 66%),
      var(--hero-slide-art);
    filter: none;
  }
  .home-hero-slide:nth-child(2)::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, #030a17 0 74px, rgba(3, 10, 23, .62) 96px, rgba(3, 10, 23, .16) 116px, transparent 142px);
  }
  /* Slides two and three use image elements, so reserve the same clear space below the navigation. */
  .home-hero-slide:nth-child(2) .home-hero-background,
  .home-hero-slide:nth-child(3) .home-hero-background {
    top: calc(50% + 37px);
    width: auto;
    height: calc(100% - 74px);
  }
  .home-hero-slide:nth-child(3)::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, #030a17 0 74px, rgba(3, 10, 23, .62) 96px, rgba(3, 10, 23, .16) 116px, transparent 142px);
  }
  .home-hero-slide:nth-child(2) .home-hero-copy,
  .home-hero-slide:nth-child(3) .home-hero-copy { z-index: 3; }

  .home-hero-slide .home-hero-visual { display: none; }

  .home-hero-visual {
    position: absolute;
    inset: 0 0 0 44%;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 0;
  }

  .home-hero-visual > * { display: none; }

  .home-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
        /* The dashboard sits behind the header, with a fade only where it meets the live copy. */
        background: linear-gradient(90deg, #06152e 0%, rgba(6, 21, 46, 0.7) 16%, transparent 42%);
    pointer-events: none;
  }

  .home-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
        background-position: right bottom;
    background-repeat: no-repeat;
        /* Keep the source artwork proportional and visually contained, never stretched to fill the hero. */
        background-size: auto 94%;
        filter: saturate(0.9) brightness(0.91);
  }

  .home-hero-slide:nth-child(1) .home-hero-visual::after { background-image: url("../img/home-hero-sdm-growth-engine.webp"); }
  .home-hero-slide:nth-child(2) .home-hero-visual::after { background-image: url("../img/home-hero-sdm-growth-command.webp"); }
  .home-hero-slide:nth-child(3) .home-hero-visual::after { background-image: url("../img/home-hero-seo-authority.webp"); }
  .home-hero-slide:nth-child(4) .home-hero-visual::after { background-image: url("../img/home-hero-local-global.webp"); }
}

/* Performance: skip rendering homepage sections until they approach the viewport.
   contain-intrinsic-size keeps the scrollbar stable before a section renders. */
main > section:not(#home){content-visibility:auto;contain-intrinsic-size:auto 900px}
/* In-page jumps (#how, #services…) render every section first so the jump lands on target. */
html.cv-all main > section:not(#home){content-visibility:visible}