/* /roofing/ additions on top of assets/css/styles.css */

/* ---------- Service swatches ---------- */
.svc__swatch--leak {
  background:
    radial-gradient(circle at 70% 58%, rgba(111, 168, 220, .9) 0 9px, transparent 10px),
    radial-gradient(ellipse at 70% 75%, rgba(111, 168, 220, .35) 0 30px, transparent 31px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Crect width='60' height='30' fill='%237E8084'/%3E%3Crect x='1' y='1' width='28' height='13' rx='1' fill='%238C8E92'/%3E%3Crect x='31' y='1' width='28' height='13' rx='1' fill='%23979A9E'/%3E%3Crect x='-14' y='16' width='28' height='13' rx='1' fill='%2386888C'/%3E%3Crect x='16' y='16' width='28' height='13' rx='1' fill='%238C8E92'/%3E%3Crect x='46' y='16' width='28' height='13' rx='1' fill='%23979A9E'/%3E%3C/svg%3E");
}
.svc__swatch--shingle {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Crect width='60' height='30' fill='%2325262B'/%3E%3Crect x='1' y='1' width='28' height='13' rx='1' fill='%233A3C42'/%3E%3Crect x='31' y='1' width='28' height='13' rx='1' fill='%2344464D'/%3E%3Crect x='-14' y='16' width='28' height='13' rx='1' fill='%234B4D54'/%3E%3Crect x='16' y='16' width='28' height='13' rx='1' fill='%23404249'/%3E%3Crect x='46' y='16' width='28' height='13' rx='1' fill='%233A3C42'/%3E%3C/svg%3E");
}
.svc__swatch--fascia {
  background:
    linear-gradient(#34353C 0 10px, #F1EBDF 10px 46px, #D9D1C2 46px 50px, transparent 50px),
    repeating-linear-gradient(90deg, #C9A46F 0 60px, #AE8A57 60px 62px);
}
.svc__swatch--inspect {
  background:
    radial-gradient(circle at 62% 50%, transparent 0 26px, #F5C431 27px 33px, transparent 34px),
    linear-gradient(135deg, transparent 0 calc(62% + 20px), transparent 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Crect width='60' height='30' fill='%233E4048'/%3E%3Cpath d='M0 15h60M0 29h60' stroke='%2355575F' stroke-width='2'/%3E%3C/svg%3E");
}
@media (min-width: 1100px) { .services .svc-list { grid-template-columns: repeat(2, 1fr); } }