const galleryFiles = [

  "roof1.jpg",

  "roof2.jpg",

  "metal1.jpg",

  "tearoff1.mp4",

  "walkaround2.mp4// ---- Update this list with your gallery files ----

// Put your files in /gallery/ folder.

const galleryFiles = [

  // Examples:

  // "roof1.jpg",

  // "roof2.jpg",

  // "before-after1.jpg",

  // "jobwalk1.mp4",

];

 

function isVideo(file) {

  return /\.(mp4|webm|ogg)$/i.test(file);

}

 

function buildGallery() {

  const grid = document.getElementById("galleryGrid");

  if (!grid) return;

 

  galleryFiles.forEach((file) => {

    const href = `gallery/${file}`;

    const:root{

  --text:#222;

  --muted:#6f6f6f;

  --bg:#ffffff;

  --soft:#f7f7f7;

  --border:#e7e7e7;

  --shadow: 0 10px 30px rgba(0,0,0,.06);

  --accent:#d87c1f;

}

 

*{box-sizing:border-box}

html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}

a{color:inherit;text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

.dot{opacity:.5;margin:0 8px}

 

.topbar{

  background:#fff;

  border-bottom:1px solid var(--border);

  position:sticky;top:0;z-index:50;

}

.topbar-inner{display:flex;justify-content:space-between;align-items:center;pa<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>Versatile Roofing LLC | Free Estimates</title>

  <meta name="description" content="Versatile Roofing LLC provides roof replacement, repairs, metal roofing, and storm damage services. Free estimates and 10% military discount. Call 912-346-1213." />

  <link rel="stylesheet" href="styles.css" />

</head>

<body>

 

  <!-- Top Bar -->

  <div class="topbar">

    <div class="container topbar-inner">

      <div class="topbar-left">

        <a class="topbar-link" href="tel:9123461213">📞 912-346-1213</a>

        <span class="dot">•</span>

        <a class="topbar-link" href="mailto:versatileroofing2025@gmail.com">✉️ versatileroofing2025@gmail.com</a>

      </div>

      <div class="topbar-right">

        🎖 10% Military Discount

      </div>

    </div>

  </div>

 

  <!-- Header -->

  <header class="header">

    <div class="container header-inner">

      <!-- Logo: replace src with your logo file name -->

      <div class="brand">

        <img class="logo" src="logo.png" alt="Versatile Roofing LLC logo" />

      </div>

 

      <nav class="nav">

        <a href="#services">Services</a>

        <a href="#gallery">Gallery</a>

        <a href="#discount">Discount</a>

        <a href="#contact">Contact</a>

      </nav>

 

      <div class="header-cta">

        <a class="btn btn-solid" href="tel:9123461213">Call Now</a>

      </div>

    </div>

  </header>

 

  <!-- Hero -->

  <section class="hero">

    <div class="container hero-inner">

      <div class="hero-copy">

        <h1>Premium Roofing. Built to Last.</h1>

        <p>

          Roof Replacement • Roof Repairs • Metal Roofing • Storm Damage • Insurance Claims Help

        </p>

 

        <div class="badges">

          <span class="badge">Free Estimates</span>

          <span class="badge">🎖 10% Military Discount</span>

          <span class="badge">2-Year Workmanship Warranty</span>

        </div>

 

        <div class="hero-buttons">

          <a class="btn btn-solid" href="tel:9123461213">Call 912-346-1213</a>

          <a class="btn btn-outline" href="#contact">Request an Estimate</a>

        </div>

 

        <div class="hero-mini">

          <strong>Serving Southeast Georgia</strong> — fast response, clean work, honest pricing.

        </div>

      </div>

 

      <div class="hero-card">

        <h3>Request a Free Estimate</h3>

        <p class="muted">dding:10px 0;gap:10px a = document.create",

];