@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== Design tokens — red + white brand theme ===== */
:root{
  --font-sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --green-dark:#b52126;
  --green-darker:#7a1519;
  --green-mid:#a83236;
  --green-bg:#fbeaea;
  --orange:#b52126;
  --orange-dark:#8f191d;
  --cream:#ffffff;
  --white:#ffffff;
  --text:#1a1a1a;
  --text-muted:#4d4d4d;
  --border:#e6dcdc;
  --shadow:0 1px 2px rgba(20,10,10,0.06);
  --shadow-card:0 1px 3px rgba(20,10,10,0.07),0 1px 2px rgba(20,10,10,0.04);
  --radius:8px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:var(--font-sans);
  font-weight:700;
  color:var(--green-darker);
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em;}
a{color:var(--green-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ===== Icons (single-color inline SVG, inherits currentColor) ===== */
.icon{flex-shrink:0;vertical-align:-4px;}
.icon-inline{width:16px;height:16px;vertical-align:-3px;margin:0 2px;}

/* ===== Topbar ===== */
.topbar{background:var(--green-darker);color:#e9f2ec;font-size:.82rem;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;}
.topbar a{color:#fff;font-weight:600;}
.topbar a:hover{text-decoration:none;opacity:.85;}

/* ===== Header ===== */
.site-header{background:var(--cream);border-bottom:1px solid var(--border);}
.site-header nav.main{display:flex;align-items:center;gap:20px;padding:14px 24px;position:relative;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--green-darker);flex-shrink:0;}
.brand-logo{height:36px;width:auto;display:block;}
.footer-logo-box{display:inline-block;background:#fff;border-radius:8px;padding:8px 14px;line-height:0;}
.footer-logo-box .brand-logo{height:32px;}
.brand:hover{text-decoration:none;}

.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;font-weight:600;font-size:.95rem;position:relative;z-index:70;}
.nav-links > li{position:relative;}
.nav-links > li > a{color:var(--text);padding:6px 0;display:inline-block;}
.nav-links > li > a:hover{color:var(--green-dark);text-decoration:none;}
.dropdown{
  display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);
  border-radius:8px;box-shadow:var(--shadow);min-width:220px;padding:8px 0;z-index:40;
}
.dropdown a{display:block;padding:9px 16px;color:var(--text);font-weight:500;}
.dropdown a:hover{background:var(--green-bg);text-decoration:none;}
@media (hover:hover) and (pointer:fine){
  .nav-links > li:hover > .dropdown{display:block;}
}

.nav-call{
  background:var(--orange);color:#fff !important;padding:10px 18px;border-radius:8px;font-weight:700;
  white-space:nowrap;
}
.nav-call:hover{background:var(--orange-dark);text-decoration:none;}

.menu-toggle{display:none;background:none;border:none;color:var(--green-darker);cursor:pointer;margin-left:auto;padding:4px;}

/* ===== Hero ===== */
.hero{background:linear-gradient(180deg,#fdf1f1,var(--cream));padding:56px 0;}
.hero-money{
  position:relative;background-size:cover;background-position:center 30%;text-align:center;
  background-image:linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),url('images/hero-gutter-cleaning-winston-salem.webp');
  display:flex;align-items:stretch;box-sizing:border-box;
  height:calc(100vh - 115px);
}
.hero-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}
.hero-text{
  max-width:760px;height:100%;padding:36px 0;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.pre-h1{
  display:inline-flex;align-items:center;gap:6px;color:var(--green-dark);font-weight:700;
  font-size:12px;letter-spacing:.04em;line-height:1.45;padding:0 0 6px;border-bottom:2px solid var(--green-dark);
  margin-bottom:120px;
}
.hero-headline{display:flex;flex-direction:column;align-items:center;gap:40px;margin-bottom:44px;}
.hero h1{font-size:58px;font-weight:700;line-height:1.15;margin:0;letter-spacing:-.01em;}
.hero .intro{font-size:18px;line-height:1.6;color:var(--text-muted);max-width:54ch;margin:0 auto;}
.hero-simple .wrap{max-width:900px;}
.hero-simple h1{font-size:1.9rem;font-weight:700;}
.hero-simple .intro{margin:14px 0 0;max-width:68ch;text-align:left;}

.badges{display:block;text-align:center;line-height:1.7;margin:0 auto 44px;}
.badge{font-weight:600;font-size:.78rem;color:var(--text-muted);}
.badge:not(:first-child){margin-left:8px;}
.badge:not(:first-child)::before{content:"\00b7";margin-right:8px;color:var(--text-muted);font-weight:700;}
.badge .icon{margin-top:0;width:14px;height:14px;vertical-align:-2px;margin-right:3px;}

.cta-btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff !important;font-weight:700;
  padding:15px 32px;border-radius:9px;font-size:1.05rem;
}
.cta-btn:hover{background:var(--orange-dark);text-decoration:none;}
.cta-btn-lg{font-size:1.08rem;padding:16px 30px;white-space:nowrap;}

/* ===== Generic section rhythm ===== */
.section{padding:56px 0;}
.section h2{font-size:1.7rem;margin-bottom:10px;}
.section > .wrap > p:first-of-type{margin-top:0;}

/* ===== Problem section ===== */
.problem-section{background:var(--cream);}
.problem-wrap{display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap;}
.problem-text{flex:1 1 55%;min-width:280px;}
.problem-text h3{font-size:1.15rem;margin-top:22px;}
.problem-visual{flex:1 1 38%;min-width:260px;display:flex;flex-direction:column;gap:16px;}
.visual-card{
  display:flex;align-items:center;gap:14px;padding:20px;border-radius:var(--radius);font-weight:700;
  box-shadow:var(--shadow);
}
.visual-bad{background:var(--green-bg);color:var(--green-dark);}
.visual-good{background:#e6f4ea;color:#1e7a34;}
.visual-icon .icon{width:26px;height:26px;}

/* ===== Process ===== */
.process-section{background:var(--green-bg);}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:20px;}
.step-num{display:block;font-size:2.2rem;font-weight:800;color:#e7bcbd;}
.step h3{font-size:1.08rem;margin:6px 0 6px;}
.step p{color:var(--text-muted);font-size:.94rem;margin:0;}

/* ===== Objections ===== */
.objections-section{background:var(--cream);}
.objections-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px;}
.objection-card{
  background:#fff;border-left:4px solid var(--green-dark);border-radius:6px;padding:22px 24px;box-shadow:var(--shadow);
}
.objection-card h3{font-size:1.02rem;margin-bottom:8px;}
.objection-card p{color:var(--text-muted);font-size:.93rem;margin:0;}

/* ===== Weather band ===== */
.weather-band{
  background:linear-gradient(120deg,var(--green-darker),#4a0f11);color:#eef4ef;
}
.weather-band h2{color:#fff;}
.weather-wrap{display:flex;gap:40px;align-items:center;flex-wrap:wrap;}
.weather-text{flex:1 1 50%;min-width:260px;}
.weather-text p{color:#f2d6d6;}
.weather-stats{flex:1 1 40%;min-width:260px;display:flex;flex-direction:column;gap:14px;}
.wstat{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);padding:14px 18px;border-radius:8px;}
.wicon{color:#f0c7c8;}
.wicon .icon{width:24px;height:24px;}
.wstat strong{display:block;font-size:.95rem;color:#fff;}
.wstat span:last-child{font-size:.85rem;color:#e6bcbd;}

/* ===== Services / related grid ===== */
.services-section{background:var(--cream);}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px;}
.service-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow);
}
.service-icon{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--green-bg);color:var(--green-dark);margin-bottom:12px;
}
.service-card h3{font-size:1.02rem;margin-bottom:6px;}
.service-card p{color:var(--text-muted);font-size:.9rem;margin-bottom:10px;}
.learn-more{font-weight:700;font-size:.88rem;color:var(--green-dark);}

/* ===== Service area ===== */
.service-area{background:var(--green-bg);}
.area-wrap{display:flex;gap:40px;align-items:center;flex-wrap:wrap;}
.area-text{flex:1 1 55%;min-width:260px;}
.area-pin{color:var(--orange);}
.zip-list{font-size:.92rem;color:var(--text-muted);}
.area-map{flex:1 1 35%;min-width:220px;display:flex;justify-content:center;}
.map-blob{
  position:relative;width:220px;height:160px;background:#f5d8d8;border-radius:45% 55% 50% 50%/55% 45% 55% 45%;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);color:var(--orange);
}
.map-blob .icon{width:32px;height:32px;}
.map-label{position:absolute;bottom:14px;font-size:.78rem;font-weight:700;color:var(--green-darker);background:#fff;padding:3px 9px;border-radius:12px;}

/* ===== CTA band ===== */
.cta-band{background:var(--green-dark);color:#fff;}
.cta-band h2{color:#fff;margin-bottom:6px;}
.cta-band p{color:#f6dcdc;margin:0;}
.cta-wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}

/* ===== FAQ ===== */
.faq-section{background:var(--cream);}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:16px;}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0;cursor:pointer;}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;}
.faq-toggle{color:var(--orange);font-size:1.2rem;font-weight:800;flex-shrink:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{color:var(--text-muted);font-size:.94rem;margin:10px 0 0;}
.faq-item.open .faq-a{max-height:400px;}
.faq-item.open .faq-toggle{transform:rotate(45deg);}

/* ===== Generic / article content ===== */
.generic-section{background:var(--cream);}
.article-wrap{max-width:820px;}
.article-section h2{font-size:1.4rem;margin-top:1.2em;}
.article-section h3{font-size:1.15rem;}
.article-section ul,.article-section ol{margin:0 0 1em 1.4em;list-style:revert;}
.article-section table{width:100%;border-collapse:collapse;margin:1em 0;}
.article-section th,.article-section td{border:1px solid var(--border);padding:8px 10px;text-align:left;font-size:.92rem;}

/* ===== Blog search + grid ===== */
.blog-search-wrap{position:relative;margin:0 0 28px;}
.blog-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.blog-search-icon .icon{width:18px;height:18px;}
.blog-search-input{
  width:100%;padding:12px 16px 12px 44px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:.95rem;font-family:inherit;background:#fff;box-shadow:var(--shadow);
}
.blog-search-input:focus{outline:2px solid var(--green-dark);outline-offset:1px;}
.blog-no-results{color:var(--text-muted);font-size:.94rem;margin:0 0 20px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px;}
.blog-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow);
}
.blog-card h3{font-size:1.05rem;margin-bottom:8px;}
.blog-card p{color:var(--text-muted);font-size:.9rem;margin-bottom:12px;}
.blog-card.is-hidden{display:none;}
@media (max-width:820px){.blog-grid{grid-template-columns:1fr;}}

/* ===== Footer ===== */
.site-footer{background:var(--green-darker);color:#dbe7de;padding:48px 0 0;}
.footer-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px;}
.footer-cols h4{color:#fff;font-size:1rem;margin-bottom:12px;}
.footer-cols a{color:#c7d9cd;}
.footer-cols li{margin-bottom:8px;}
.footer-brand .brand-text{color:#fff;}
.footer-brand .brand-text span{color:#e7bcbd;}
.footer-brand p{margin:12px 0 4px;font-size:.9rem;}
.footer-tag{
  background:rgba(255,255,255,.06);border-radius:8px;padding:16px;font-size:.88rem;align-self:start;
}
.tagline-bar{border-top:1px solid rgba(255,255,255,.12);padding:16px 24px;font-size:.8rem;color:#d9b3b4;text-align:center;}

/* ===== Sticky call bar ===== */
.call-bar{
  position:fixed;left:0;right:0;bottom:0;background:var(--orange);text-align:center;padding:14px;
  transform:translateY(100%);transition:transform .25s ease;z-index:60;
}
.call-bar.show{transform:translateY(0);}
.call-bar a{color:#fff;font-weight:800;font-size:1.05rem;}
.call-bar a:hover{text-decoration:none;}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .footer-cols{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:900px){
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .objections-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .menu-toggle{display:block;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;
    padding:12px 24px;border-top:1px solid var(--border);gap:4px;box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex;}
  .nav-links > li{width:100%;}
  .dropdown{position:static;display:none;box-shadow:none;border:none;padding-left:12px;}
  .nav-links > li.open .dropdown{display:block;}
  .nav-call{display:none;}
  .weather-wrap,.area-wrap,.problem-wrap{flex-direction:column;}
}
@media (max-width:640px){
  .process-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr;}
  .cta-wrap{flex-direction:column;align-items:flex-start;}
  .hero h1{font-size:34px;}
  .hero .intro{font-size:16px;}
  .pre-h1{margin-bottom:80px;}
  .hero-headline{gap:28px;margin-bottom:40px;}
  .badges{margin-bottom:44px;}
  .badge{font-size:11px;}
  .badge:not(:first-child){margin-left:6px;}
  .badge:not(:first-child)::before{margin-right:6px;}
  .badge .icon{width:12px;height:12px;}
  .hero-money{height:calc(100svh - 132px);background-position:center 20%;}
  .topbar .wrap{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;}
}