/* ==========================================================
   SINGLE SERVICE PAGE — single-service.php only
   matches residential_interior_design.pdf
   Reuses existing tokens/components (.services-hero, .project-grid,
   .testi-card, .faq-item, .about-cta, .eyebrow) already defined in
   the base style.css, so it stays visually consistent with the rest
   of the site.
   NOTE: .eyebrow-center and .ssv-section-head intentionally stay in
   base style.css — single-news.php's "More From Houzeome" block
   reuses both, so moving them here would leave that unstyled.
   ========================================================== */


/* ── ABOUT THE SERVICE ── */
.ssv-about{
  padding:100px var(--gutter);background:var(--cream);
  display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:stretch;
}
.ssv-about-img img{width:100%;height:100%;min-height:360px;object-fit:cover;border-radius:6px;display:block;}
.ssv-about-heading{
  font-size:34px;font-weight:600;color:#262626;line-height:1.3;
  margin-bottom:18px;font-family:'Cormorant Garamond';
}
.ssv-about-content .service-single-inner{max-width:560px;margin:0;}
.ssv-about-content .service-single-inner p{margin-bottom:18px;}
.ssv-about-content .service-single-inner p:last-child{margin-bottom:0;}

/* ── SECTION HEAD (shared caption style for tags/projects/included/testi/explore) ── */

/* ── WHAT WE DESIGN ── */
.ssv-tags-section{padding:0 var(--gutter) 90px;}
.ssv-tags{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.ssv-tag{
  background:var(--light);border:1px solid #E4E4E4;padding:28px 14px;
  text-align:center;transition:background .2s, border-color .2s;
}
.ssv-tag:hover{background:#fff;border-color:var(--orange);}
.ssv-tag svg{width:28px;height:28px;color:var(--orange);margin:0 auto 14px;display:block;}
.ssv-tag img{width:28px;height:28px;object-fit:contain;margin:0 auto 14px;display:block;}
.ssv-tag span{
  font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--dark);
  font-family:'Avenir Next Heading';text-transform:uppercase;display:block;
}

/* ── FEATURED PROJECTS ── */
.ssv-projects{padding:var(--gutter);background:#FAFAFA;}

/* ── WHAT'S INCLUDED ── */
.ssv-included{
  padding:90px var(--gutter);background:var(--cream);
  display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:strech;
}
.ssv-included-img img{width:100%;height:100%; min-height:350px;object-fit:cover;border-radius:6px;display:block;}
.ssv-included-lists{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.ssv-list-col{padding:0 24px;border-right:1px solid #E4E4E4;}
.ssv-list-col:last-child{border-right:none;}
.ssv-list-col h4{
  color:var(--orange);font-size:14px;font-weight:700;letter-spacing:1px;
  margin-bottom:22px;font-family:'Avenir Next Heading';text-transform:uppercase;
}
.ssv-list-item{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.ssv-list-item:last-child{margin-bottom:0;}
.ssv-list-item svg{width:20px;height:20px;color:var(--orange);flex-shrink:0;}
.ssv-list-item span{font-size:15px;color:var(--dark);font-family:'Avenir Next Subheading2';}

/* ── CLIENT TESTIMONIALS ── */
.ssv-testi{padding:90px var(--gutter);}
.ssv-testi-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:40px;
  align-items:stretch;max-width:1100px;margin:0 auto;
}
.ssv-testi-img img{width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:6px;display:block;}
.ssv-testi .testi-card{box-shadow:0 4px 18px rgba(48,48,48,.1);}

/* ── FAQ ── */
.ssv-faq{padding:0 var(--gutter) 100px;}
.ssv-faq-head{text-align:center;margin-bottom:40px;}
.ssv-faq-head .eyebrow{margin-bottom:0;}
.ssv-faq-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:stretch;}
.ssv-faq-list{height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.ssv-faq-list .faq-item{margin-bottom:0;}
.ssv-faq .testi-cta{height:100%;justify-content:center;gap:28px;}

/* ── EXPLORE MORE SERVICES ── */
.ssv-explore{padding:0 var(--gutter) 100px;}
.ssv-explore-head{text-align:center;margin-bottom:36px;}
.ssv-explore-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.ssv-explore-card{display:block;text-decoration:none;color:inherit;}
.ssv-explore-img{height:140px;overflow:hidden;border-radius:4px;margin-bottom:12px;}
.ssv-explore-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.ssv-explore-card:hover .ssv-explore-img img{transform:scale(1.06);}
.ssv-explore-card h4{
  font-size:14px;font-weight:700;color:var(--dark);
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Avenir Next Subheading';
}
.ssv-explore-card h4 span{color:var(--orange);}

/* ==========================================================
   SINGLE SERVICE PAGE — MOBILE RESPONSIVE ≤ 768px
   ========================================================== */
@media (max-width: 768px) {

  .ssv-about{
    grid-template-columns:1fr;padding:48px 24px;gap:28px;
  }
  .ssv-about-img img{height:220px;}
  .ssv-about-heading{font-size:24px;}
  .ssv-about-content .service-single-inner{max-width:100%;}
  .ssv-about-content .service-single-inner p{font-size:15px;}

  .ssv-tags-section{padding:0 24px 48px;}
  .ssv-tags{grid-template-columns:repeat(2,1fr);gap:12px;}
  .ssv-tag{padding:20px 10px;}

  .ssv-projects{padding:48px 24px;}

  .ssv-included{
    grid-template-columns:1fr;padding:48px 24px;gap:28px;
  }
  .ssv-included-img img{height:200px;}
  .ssv-included-lists{grid-template-columns:1fr;gap:28px 0;}
  .ssv-list-col{border-right:none;padding:0;}

  .ssv-testi{padding:48px 24px;}
  .ssv-testi-grid{grid-template-columns:1fr;gap:20px;}
  .ssv-testi-img img{height:220px;min-height:unset;}

  .ssv-faq{padding:0 24px 60px;}
  .ssv-faq-head h2{font-size:24px;}
  .ssv-faq-grid{grid-template-columns:1fr;}

  .ssv-explore{padding:0 24px 60px;}
  .ssv-explore-grid{grid-template-columns:repeat(2,1fr);gap:16px;}

  }
.ssv-faq .faq-q{font-size:18px;font-family: 'Avenir Next Subheading'}
.ssv-faq .faq-a{font-size:16px;font-family: 'Avenir Next Subheading2'}

/* Logo-image swap and dark hamburger for these pages now live in the
   single consolidated "DARK-TEXT NAV PAGES" block earlier in this file. */
.logo-img-full {
  height: 68px;
}

@media (max-width: 768px) {
  .logo-img-full {
    height: 52px;
  }
}

.footer-logo-img{
  height: 140px;
  width: auto;
  aspect-ratio: auto !important;
  object-fit: contain;
  display: block;
}

.footer-about .footer-logo-img {
  height: 140px;
  width: auto;
  aspect-ratio: auto !important;
  object-fit: contain;
}

@media (max-width: 768px) {
  .footer-about .footer-logo-img {
    height: 100px;
    width: auto;
    aspect-ratio: auto !important;
  }
}