/* Soffit & Fascia — page additions on top of site.css (Arch & Pane) */

/* Saved headings use <span> for the highlighted words; style them like <em>. */
h2 > span:not([class]) { font-style: italic; font-weight: 400; color: var(--arch); }
.storm h2 > span:not([class]) { color: #8FAAFF; }

/* Soffit vs. fascia cards */
.sf-explainer .card .eyebrow { margin-bottom: 14px; }
.sf-explainer .check-list { margin: 22px 0 0; }
.sf-explainer .check-list li { padding-left: 0; font-size: 15.5px; }
.sf-explainer .check-list li::before { display: none; }

/* Signs you need new soffit & fascia (dark storm section) */
.sf-signs .stat h3 { margin-top: 18px; font-size: 18px; }
.sf-compliance { margin-top: clamp(28px, 4vw, 44px); }
.sf-compliance h3 { color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.3; margin-bottom: 10px; }
.sf-compliance p { margin: 0; }
.sf-compliance .icon-box { width: 72px; height: 72px; border-radius: 36px 36px 14px 14px; background: rgba(255,255,255,.16); color: #fff; }
.sf-compliance .icon-box svg { width: 32px; height: 32px; }

/* Three-photo gallery */
.sf-masonry { columns: 3 240px; }

@media (max-width: 767px) {
  .sf-compliance .icon-box { display: none; }
  .sf-masonry { columns: 1; }
}
@media (max-width: 560px) {
  .sf-signs { grid-template-columns: 1fr; }
}