/* ================================================================
   MOD: SERVICES — bare-icon card grid
   Requires: core.css tokens. No JS dependency.
   Used on BOTH roofing.html and remodeling.html — the CSS is
   identical; only the .service-card content (icon, title, desc)
   differs per page.

   HTML needed: <section class="services" id="services">
     <div class="container">
       <header class="services-header reveal">
         <span class="eyebrow">...</span>
         <h2 class="section-heading" id="services-heading">...</h2>
         <div class="accent-bar"></div>
       </header>
       <div class="services-grid">
         <article class="service-card reveal">
           <span class="service-icon">🏗️</span>
           <h3 class="service-title">...</h3>
           <p class="service-desc">...</p>
         </article>
       </div>
     </div>
   </section>
================================================================ */

.services { background: var(--color-bg); padding: var(--section-pad); scroll-margin-top: 32px; }
.services-header { margin-bottom: 56px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 3vw, 24px); }

.service-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: clamp(24px, 5vw, 36px) clamp(20px, 4vw, 30px);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
  background: radial-gradient(circle, var(--accent1-glow) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(var(--accent1-rgb), 0.3); }
.service-card:hover::before { opacity: 1; }

.service-icon { font-size: 2.2rem; margin-bottom: 20px; display: block; }
.service-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-color); margin-bottom: 12px; }
.service-desc { font-size: 0.9rem; color: rgba(var(--fg-rgb), 0.55); line-height: 1.7; }