#spaces { border-bottom: 0; }
#spaces, #contact { padding-block: 44px; }
.spaces-heading, .contact-section-heading { font-size: clamp(2.2rem, 5vw, 4rem); }
.spaces-heading { margin-bottom: 24px; }

.framed #spaces > .wrap { background: #e8f1f6; padding: clamp(18px, 4vw, 42px); border: 1px solid #162b4c; border-radius: 18px; box-shadow: 0 16px 45px #0006; }
.framed .spaces-heading { border-bottom: 3px solid var(--red); border-radius: 0; padding-bottom: 8px; }
.framed #contact { background: #0b1d38; border-top: 1px solid #000; }
.framed .contact-section-heading { background: transparent; color: #e8f1f6; }

.marble #spaces { background: #07193080; }
.marble .spaces-heading, .marble .contact-section-heading { background: #0b203de8; color: #e8f1f6; border: 1px solid #e8f1f678; padding: 8px 20px; }
.marble .space-card { align-items: start; border: 0; box-shadow: 0 10px 24px #0006; }
.marble .space-card span {
  display: block;
  min-height: 0;
  padding: 12px 14px;
  background: transparent;
  color: #000;
  -webkit-text-stroke: 2px #c0c0c0;
  paint-order: stroke fill;
}
.marble .space-card:focus-visible { outline-color: #c0c0c0; }
.marble #contact { background: linear-gradient(transparent, #071930a8); }
.marble #contact::before { content: ''; display: block; margin: 0 auto 30px; width: min(300px, 65%); height: 2px; background: #e8f1f699; }
.marble .service-contact-form { border: 1px solid #e8f1f699; }

.band #spaces { background: #0c203be8; }
.band .spaces-heading { background: transparent; color: #e8f1f6; }
.band .space-card { border-color: #e8f1f666; }
.band #contact { background: #e8f1f6; border-top: 4px solid #000; }
.band .contact-section-heading { background: transparent; }
.band .service-contact-form { box-shadow: 0 14px 30px #101e3733; }

@media (max-width: 760px) {
  #spaces, #contact { padding-block: 28px; }
  .spaces-heading { margin-bottom: 16px; }
}

.marble .home-hero {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 80%), rgb(0 0 0 / 53%) 43%, transparent 77%),
    url('assets/images/eagle-armor-garage-floors-eac-047-4c9e17b0.webp') center 64% / cover;
}


.marble #spaces, .marble #contact { background: transparent; }
.marble .site-footer { background: #111114; }

main > .section.flake-break { background: #e8f1f6; text-align: center; padding-block: clamp(18px, 3vw, 32px); }
.flake-break h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.flake-break img { mix-blend-mode: multiply; width: min(100%, 740px); height: auto; margin: 12px auto 8px; }
