/* ============================================================
   SWISS CLUSTER CORNER MARKERS — small "+" registration marks
   placed at section corners.

   Each cross is anchored fully INSIDE the section (no overflow
   needed) and sits flush against the section's corner so it
   visually touches the dashed/solid border at that corner.

   Design rule:
     • Every section gets crosses at its TOP-LEFT and TOP-RIGHT
       (via ::before).
     • The LAST section additionally gets crosses at its BOTTOM
       corners (via ::after).
     • Result: ONE pair of crosses at each section seam (the
       lower section's top), plus one at the very top of the page
       and one at the very bottom.
   ============================================================ */

.section {
  --sc-corner-size: 20px;
  --sc-corner-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L12 24 M0 12 L24 12' stroke='%232a2a2a' stroke-width='4' fill='none'/></svg>");
}

/* TOP corners — every section, flush with the top corners (no inset) */
.section::before {
  /* shift up + out so the cross's centre sits ON each top corner
     (intersection of section edge and rail line) */
  content: "";
  position: absolute;
  top: calc(var(--sc-corner-size) * -0.5);
  left: calc(var(--sc-corner-size) * -0.5);
  right: calc(var(--sc-corner-size) * -0.5);
  height: var(--sc-corner-size);
  pointer-events: none;
  z-index: 3;
  background-image: var(--sc-corner-svg), var(--sc-corner-svg);
  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--sc-corner-size) var(--sc-corner-size),
    var(--sc-corner-size) var(--sc-corner-size);
  background-position:
    left top,
    /* top-left corner */ right top; /* top-right corner */
}

/* BOTTOM corners — only on the LAST section */
.page__sections > .section:last-child::after {
  content: "";
  position: absolute;
  bottom: calc(var(--sc-corner-size) * -0.5);
  left: calc(var(--sc-corner-size) * -0.5);
  right: calc(var(--sc-corner-size) * -0.5);
  height: var(--sc-corner-size);
  pointer-events: none;
  z-index: 3;
  background-image: var(--sc-corner-svg), var(--sc-corner-svg);
  background-repeat: no-repeat, no-repeat;
  background-size:
    var(--sc-corner-size) var(--sc-corner-size),
    var(--sc-corner-size) var(--sc-corner-size);
  background-position:
    left bottom,
    right bottom;
}

/* Allow the corner crosses to extend past the section's edges
   (they straddle each top/bottom border line). The base .section
   rule sets overflow:hidden — override it here. Sections that
   genuinely need to clip bleeding decorations should re-apply
   overflow:hidden in their own scope (e.g. .section--services
   below). */
.section {
  overflow: visible;
}

/* services section keeps overflow:hidden because its wafers
   frame is intentionally pulled past the right edge using
   negative offsets and relies on the section clipping the
   overhang. */
.section--services {
  overflow: hidden;
}