:root{
  --bg:#f7f7f8; --panel:#ffffff; --text:#1f2937; --muted:#6b7280;
  --brand:#0b9154;     /* green */
  --accent:#f97316;    /* orange */
  --ring: rgba(11,145,84,.25);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
     color:var(--text); background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border-radius:12px}
.container{max-width:1100px;margin:auto;padding:0 20px}
.muted{color:var(--muted)} .center{text-align:center}
.prose p{max-width:70ch}
.prose ul{padding-left:1.2rem}

.site-header{position:sticky;top:0;background:var(--panel);border-bottom:1px solid #e5e7eb; z-index:10}
.nav{display:flex;gap:16px;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700}
.menu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.menu a.active{color:var(--brand);font-weight:600}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:999px;border:1px solid #d1d5db}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-ghost{background:transparent}
.badge{padding:.35rem .6rem;border-radius:999px;font-weight:600}
.badge-hiring{background:var(--accent);color:#fff}

.hero{position:relative;overflow:hidden}
.hero img{width:100%;height:360px;object-fit:cover;filter:brightness(.85)}
.hero-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;gap:.6rem;padding-top:2.4rem}
.eyebrow{letter-spacing:.1em;color:#fff;opacity:.9;font-weight:700}
.hero-card h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);max-width:26ch}
.hero-card .sub{color:#f1f5f9}
.hero-cta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

.section{padding:48px 0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--panel);padding:14px;border-radius:16px;border:1px solid #eef;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.card h3{margin:.7rem 0 .25rem}
.bullets{margin-top:10px;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:.35rem .6rem}

.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
.site-footer{background:#fff;border-top:1px solid #e5e7eb;margin-top:24px}

.form{display:grid;gap:12px;max-width:560px}
.form input,.form select,.form textarea{
  width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid #d1d5db;outline:0
}
.form input:focus,.form textarea:focus,.form select:focus{
  border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)
}

/* Before/After grid */
.ba-grid{display:grid;gap:18px}
.ba-grid figure{background:var(--panel);padding:14px;border-radius:16px;border:1px solid #eef}
.ba-grid img{height:220px;object-fit:cover;margin-bottom:8px}

/* Blog grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.blog-grid article{background:var(--panel);padding:14px;border:1px solid #eef;border-radius:12px}
.blog-grid h2{margin:.5rem 0}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero img{height:300px}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .hero img{height:260px}
  .menu{gap:10px}
}

/* Thumbnail gallery under service cards */
.thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.thumbs img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* Thumbnails look & feel */
.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.thumbs img:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.hero img {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

.about.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  line-height: 1.6;
}
.about-photo {
  width: 100%;
  max-width: 800px;
  display: block;
  margin: 30px auto;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.testimonial-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}
.blog-post img,
.blog-article img,
.blog-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 20px 0;
}
/* === Blog Page Styling === */
.blog.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.blog.container h1 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
  color: #0f4c63; /* your Norwood navy */
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.blog-post {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.blog-post:hover {
  transform: translateY(-6px);
}

.blog-post img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.blog-post .content {
  padding: 16px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-post h2 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: #0f4c63;
}

.blog-post p {
  flex-grow: 1;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 16px;
}

.blog-post a {
  align-self: flex-start;
  padding: 8px 14px;
  background: #0f4c63;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.blog-post a:hover {
  background: #12889e; /* aqua accent */
}
/* === Blog Thumbnails on Blog Index === */
.blog-grid .blog-post img {
  max-height: 200px;
  object-fit: cover;
  width: 100%;
}

/* === Full Blog Article Images === */
.blog-article img,
.blog-post .blog-img,
main.blog-single img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain; /* ensures full image shows */
  display: block;
  margin: 16px 0;
  border-radius: 10px;
}
/* ---- Blog index cards ---- */
.blog.container { max-width: 1100px; margin: 0 auto; padding: 32px 16px; }
.blog.container h1 { font-size: 2.2rem; margin: 0 0 20px; color: #1e2a38; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.blog-post {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e6e9ee; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  overflow: hidden;
}

.blog-photo { width: 100%; height: 200px; object-fit: cover; display: block; }

.blog-post .content { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.blog-post h2 { font-size: 1.15rem; line-height: 1.35; margin: 0; color: #1f3657; }
.blog-post p { margin: 0; color: #475569; }
.blog-post a { margin-top: auto; font-weight: 600; text-decoration: none; color: #0b7; }
.blog-post a:hover { text-decoration: underline; }
.btn {
  display:inline-block;
  background:#1ca89e;   /* aqua-teal like your brand */
  color:#fff;
  padding:0.5rem 1rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:background 0.3s ease;
}
.btn:hover {
  background:#0b3d3d;  /* dark coastal green */
}
<footer class="site-footer">
  <div class="footer-container">
    <div class="footer-section">
      <h4>Norwood Restoration Group, Inc</h4>
      <p>Serving South Florida — Lee • Charlotte • Sarasota • Bradenton • Miami • Fort Lauderdale • West Palm Beach</p>
    </div>

    <div class="footer-section">
      <h4>Contact</h4>
      <p>📞 Call/Text: <a href="tel:19412983637">941-298-3637</a></p>
      <p>💬 WhatsApp: <a href="https://wa.me/19412983637" target="_blank">Message us</a></p>
      <p>📧 Email: <a href="mailto:norwoodrestoration1@gmail.com">Norwoodrestoration1@gmail.com</a></p>
    </div>

    <div class="footer-section">
      <h4>Quick Links</h4>
      <ul>
        <li><a href="services.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Request a Quote</a></li>
      </ul>
    </div>

    <div class="footer-section">
      <h4>Service Area</h4>
      <p>Lee • Charlotte • Sarasota • Bradenton • Miami • Fort Lauderdale • West Palm Beach</p>
    </div>
  </div>

  <div class="footer-bottom">
    <p>© 2025 Norwood Restoration Group, Inc — All rights reserved.</p>
  </div>
</footer>
/* ========================= */
/*   JOB LISTINGS (Now Hiring) */
/* ========================= */

.job-listings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.job {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.job h3 {
  margin-top: 0;
  color: #004466; /* matches your site’s brand tone */
}

/* ========================= */
/*   JOB LISTINGS (Now Hiring) */
/* ========================= */

.job-listings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0;
}

.job {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  text-align: center;
}

.job h3 {
  margin-top: 0;
  color: #007c91; /* Aqua/Coastal brand tone */
}

.job p {
  margin: 10px 0 15px;
  font-size: 0.95rem;
}

.job .btn {
  background: #007c91;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.job .btn:hover {
  background: #005f6b;
/* --- NOW HIRING BADGE --- */
.now-hiring {
  background: #e63946;   /* red badge to stand out */
  color: #fff !important;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background 0.3s ease;
}

.now-hiring:hover {
  background: #c1121f;
  text-decoration: none;
}
/* Blog posts without images */
.blog-post.no-image {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.blog-post.no-image h2 {
  margin-top: 0;
  font-size: 1.2rem;
  color: #004466;
}

.blog-post.no-image p {
  font-size: 0.95rem;
  color: #555;
}

.blog-post.no-image {
  border: 1px solid #ddd;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  background: #fafafa;
}

.blog-post.no-image h2 {
  margin-top: 0;
}

.blog-post .blog-full {
  display: none; /* stays hidden until Read More is clicked */
  margin-top: 1rem;
}
/* Highlight Now Hiring link */
.now-hiring {
  background-color: #28a745;   /* green button */
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.now-hiring:hover {
  background-color: #218838;  /* darker green on hover */
  color: #fff !important;
}
/* Contact Form Styling */
.contact-form {
  max-width: 600px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.contact-form button {
  width: fit-content;
  padding: 10px 20px;
}
/* Header CTA buttons */
.menu .nav-cta {
  margin-left: .75rem;
  border-radius: 9999px;
  padding: .5rem .9rem;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}

.btn-orange { background: #f37321; color: #fff; }
.btn-orange:hover { background: #d85f14; color:#fff; }

.btn-green { background: #35a854; color:#fff; }
.btn-green:hover { background:#2e8f47; color:#fff; }

/* Make sure header layout has room for buttons */
.site-header .nav,
.site-header .container.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.site-header .menu {
  display:flex;
  align-items:center;
  gap: 1rem;           /* space between links and buttons */
}

/* Mobile: stack/space nicely */
@media (max-width: 720px) {
  .site-header .menu {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .menu .nav-cta { padding: .45rem .8rem; }
}
/* Orange button for Request Quote */
.btn-orange {
  background-color: #ff6600; /* bright orange */
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
  display: inline-block;
}

.btn-orange:hover {
  background-color: #e65c00; /* darker orange on hover */
}
/* Request Quote = orange (override anything green) */
a.btn.btn-orange,
a.nav-cta.btn-orange {
  background-color: #ff6600 !important;
  border-color: #ff6600 !important;
  color: #fff !important;
}
a.btn.btn-orange:hover,
a.nav-cta.btn-orange:hover {
  background-color: #e65c00 !important;
  border-color: #e65c00 !important;
  color: #fff !important;
}
.btn.btn-orange{background:#f26a21;border-color:#f26a21}
.btn.btn-orange:hover{filter:brightness(0.95)}
/* --- Nav CTA colors --- */
.site-header .nav .btn.nav-cta.btn-orange,
.site-header .btn.nav-cta.btn-orange {
  background: #e86f2b !important;
  border-color: #d4611f !important;
  color: #fff !important;
}
.site-header .btn.nav-cta.btn-orange:hover {
  background: #d4611f !important;
  border-color: #c25518 !important;
}
.hero-image {
  position: relative;
  width: 100%;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-call {
  position: absolute;
  top: 20px;       /* adjust vertical placement */
  right: 30px;     /* adjust horizontal placement */
  background: #004080;
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.hero-call a {
  color: #fff;
  text-decoration: none;
}

.hero-call a:hover {
  text-decoration: underline;
}
.hero-image {
  position: relative;
  width: 100%;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-call {
  position: absolute;
  top: 20px;       /* adjust vertical placement */
  right: 30px;     /* adjust horizontal placement */
  background: #004080;
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.hero-call a {
  color: #fff;
  text-decoration: none;
}

.hero-call a:hover {
  text-decoration: underline;
}
.hero { position: relative; }

.hero-call {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5;
}
.hero {
  position: relative;
}

.hide-old-call {
  position: absolute;
  top: 20px;       /* adjust this to align with blue box */
  right: 20px;     /* adjust this to align */
  width: 220px;    /* adjust until it covers the full blue area */
  height: 60px;    /* adjust height */
  background: white;  /* replace with #f5f5f5 or site bg color if needed */
  z-index: 3;
  border-radius: 8px; /* optional – makes it blend if the box had rounded edges */
}
.post-hero {
  background-image: url('assets/blog-training-workers.webp');
  background-size: cover;
  background-position: center;
}