/* Three guides, matching the established 854px / 670px guide spacing.
   Four curtain columns create exactly three internal boundaries at every
   viewport width. The outer curtains overscan the viewport as in Cvio. */
body.wp-theme-cvio > .container > .lines {
  --brego-guide-span: min(854px, calc(100vw - 60px));
}
body.wp-theme-cvio > .container > .lines > .content {
  width: calc(var(--brego-guide-span) * 2);
  margin-left: 0;
  transform: translateX(-50%);
}
body.wp-theme-cvio > .container > .lines .line-col {
  display: inline-block;
  width: 25%;
}
body.wp-theme-cvio > .container > .lines .line-col:nth-child(5) {
  display: none;
}
body.wp-theme-cvio > .container > .lines .line-col:nth-child(4)::after {
  left: 0;
  right: auto;
  width: 1000%;
}
@media (max-width: 920px) {
  body.wp-theme-cvio > .container > .lines {
    --brego-guide-span: min(670px, calc(100vw - 60px));
  }
}

/* The decorative guides occupy the lowest foreground layer. Opaque content
   surfaces above them hide the guides from the first rendered frame. */
body.wp-theme-cvio > .container > .lines.ready {
  z-index: 0;
}
body.wp-theme-cvio > .container > .wrapper {
  z-index: 12;
}

/* Before ready, Cvio raises this element above the page for its curtains.
   Never draw the background grid in that raised layer: otherwise it flashes
   over the newly exposed hero until the theme's delayed ready class arrives. */
body.wp-theme-cvio > .container > .lines:not(.ready) .line-col::before {
  opacity: 0;
}

/* Three separate animated strokes inside the opaque curtains. Background
   painting clips them to each curtain, so no stroke reaches an exposed hero.
   Reset at ready, then replay on the next navigation. */
body.wp-theme-cvio > .container > .lines .line-col::after {
  box-shadow: none;
}
body.wp-theme-cvio > .container > .lines:not(.ready) .line-col:nth-child(n+2):nth-child(-n+4)::after {
  background-image: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18));
  background-repeat: no-repeat;
  background-position: left top;
  animation: brego-loader-line .65s cubic-bezier(.165, .85, .45, 1) both;
}
body.wp-theme-cvio > .container > .lines:not(.ready) .line-col:nth-child(3)::after {
  background-position: left bottom;
  animation-delay: .1s;
}
body.wp-theme-cvio > .container > .lines:not(.ready) .line-col:nth-child(4)::after {
  animation-delay: .2s;
}
@keyframes brego-loader-line {
  from { background-size: 1px 0%; }
  to { background-size: 1px 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.wp-theme-cvio > .container > .lines:not(.ready) .line-col::after {
    animation-duration: 0s;
    animation-delay: 0s;
  }
}

/* Project layouts previously trapped every child below the global grid.
   Put their base colour below the grid, so lines remain visible in empty
   space while text, media, cards and the opaque hero paint above them. */
body.wp-theme-cvio > .container:has(> .wrapper > #b2p) {
  background-color: #131615;
}
body.wp-theme-cvio > .container > .wrapper > #b2p {
  background-color: transparent;
}

/* A higher stacking level alone does not mask lines through transparent copy.
   Give the project reading surfaces their original opaque base; leave the
   gutters and spacing between sections open to the decorative grid. */
#b2p .b2p-case-content > section,
#b2p .b2p-sidebar,
#b2p .b2p-section-heading,
#b2p .b2p-work-card,
#b2p .b2p-contact {
  background-color: #131615;
}
#b2p .b2p-facts {
  background-color: #151d19;
}