/* Upward strokes sit above the section color and below its content.
   Clip only this decorative layer so photos and GSAP pins keep their layout. */
.sdl-hero-preview #top-main > .sdl-decorated {
  position: relative;
  isolation: isolate;
}

.sdl-hero-preview #top-main > .sdl-decorated::after {
  z-index: -2;
}

.case-site-page .sdl-subpage-canvas {
  position: relative;
  isolation: isolate;
  /* Leave at least 24px between the strokes and the widest desktop content.
     At narrow widths, show only the outer 12px of the decorative layer. */
  --sdl-decor-gutter: max(12px, calc((100% - 1170px) / 2 - 24px));
}

.case-site-page .sdl-subpage-canvas > main {
  background-color: transparent;
}

.case-site-page .sdl-subpage-canvas > .sdl-diagonals {
  mask-image: linear-gradient(to right,
    #000 0, #000 var(--sdl-decor-gutter),
    transparent var(--sdl-decor-gutter),
    transparent calc(100% - var(--sdl-decor-gutter)),
    #000 calc(100% - var(--sdl-decor-gutter)), #000 100%);
}

:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

/* Keep the moving case-study items above the strokes and opaque inside. */
.sdl-hero-preview .case-studies .case-studies-scroll-wrapper {
  z-index: 1;
}

.sdl-hero-preview .case-studies .case-studies-item {
  background-color: #fff;
}

:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke {
  position: absolute;
  left: var(--stroke-x);
  top: var(--stroke-y);
  width: clamp(110px, var(--stroke-length), 340px);
  height: 2px;
  background: none;
  transform: translateX(-50%) rotate(var(--stroke-angle));
  transform-origin: center;
}

:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke::before,
:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke::after {
  content: "";
  position: absolute;
  border-radius: 2px;
}

:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke::before {
  left: 30%;
  top: 15px;
  width: 42%;
  height: 3px;
  background: rgb(217 54 62 / 23%);
}

:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke::after {
  left: 64%;
  top: -13px;
  width: 16%;
  height: 1px;
  background: rgb(217 54 62 / 30%);
}

:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke:nth-child(even)::before {
  left: 48%;
  width: 42%;
  top: 12px;
}

:is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke:nth-child(even)::after {
  left: 57%;
  width: 18%;
  top: -12px;
}

@media (max-width: 800px) {
  :is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke {
    width: 140px;
    left: 98%;
    top: 32px;
    opacity: .8;
  }

  :is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke:nth-child(2) {
    width: 110px;
    left: 4%;
    top: calc(100% - 34px);
  }

  :is(.sdl-hero-preview, .case-site-page) .sdl-diagonals__stroke:nth-child(n + 3) {
    display: none;
  }

  .sdl-hero-preview .sdl-scene > .sdl-diagonals .sdl-diagonals__stroke:first-child {
    top: 104px;
  }

  .sdl-hero-preview .sdl-scene > .sdl-diagonals .sdl-diagonals__stroke:nth-child(2) {
    top: 62%;
  }

  .case-site-page .sdl-subpage-canvas > .sdl-diagonals .sdl-diagonals__stroke:first-child {
    top: 150px;
  }

  .case-site-page .sdl-subpage-canvas > .sdl-diagonals .sdl-diagonals__stroke:nth-child(2) {
    top: max(520px, 62%);
  }
}

@media print {
  :is(.sdl-hero-preview, .case-site-page) .sdl-diagonals {
    display: none;
  }
}