/* ================================================================
   MOD: ABOUT — layered photo-pair stack
   Requires: core.css tokens. No JS dependency.
   Used on BOTH roofing.html and remodeling.html — the CSS is
   identical; only the photos, copy, and stat numbers differ per page.

   HTML needed: <section class="about" id="about">
     <div class="container"><div class="about-inner">
       <div class="about-media reveal">
         <img class="about-img-back" src="..." alt="..." loading="lazy" />
         <img class="about-img-front" src="..." alt="..." loading="lazy" />
         <div class="about-badge">Licensed &amp; Insured</div>
       </div>
       <div class="about-content reveal">
         ...eyebrow, section-heading, accent-bar, .about-body paragraphs...
         <div class="about-stats">
           <div class="stat"><div class="stat-number">...</div><div class="stat-label">...</div></div>
         </div>
       </div>
     </div></div>
   </section>
================================================================ */

.about { background: var(--color-bg); padding: var(--section-pad); scroll-margin-top: 32px; }
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

.about-content .section-heading { color: var(--text-color); }
.about-body { font-size: 0.95rem; color: rgba(var(--fg-rgb), 0.6); line-height: 1.85; margin-bottom: 20px; }

.about-stats { display: flex; gap: 32px; margin-top: 36px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-number { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--accent1); line-height: 1; text-shadow: 0 0 24px var(--accent1-glow); }
.stat-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--fg-rgb), 0.6); }

/* Two overlapping images for a 3D layered depth effect */
.about-media { position: relative; width: 100%; aspect-ratio: 5/4; }
.about-img-back {
  position: absolute; bottom: 0; right: 0; width: 80%; height: 80%;
  border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-card); filter: brightness(0.9);
}
.about-img-front {
  position: absolute; top: 0; left: 0; width: 65%; height: 65%;
  border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-hover);
  border: 4px solid var(--paper);
}
.about-badge {
  position: absolute; bottom: 28px; left: 24px; background: var(--accent1); color: var(--paper);
  border-radius: var(--radius-sm); padding: 10px 18px; font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 4px 20px var(--accent1-glow); z-index: 2;
}

@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
}