/*
Theme Name: SSP Theme
Theme URI: https://muse-sprayfoam.hirebetternerds.co
Author: Seattle Spray Foam Pros
Description: Custom theme for Seattle Spray Foam Pros. Mobile-first, no page builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: ssp
*/

:root{
  --evergreen:#1E4D3B;
  --ink:#14201C;
  --orange:#E8772E;
  --paper:#FAF6EF;
  --slate:#57645C;
  --card-border:#E5DED2;
  --white:#FFFFFF;
  --radius:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{font-size:2.1rem;margin-bottom:.6rem}
h2{font-size:1.6rem;margin-bottom:.6rem}
h3{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
p{margin-bottom:1rem}
a{color:var(--evergreen)}
img{max-width:100%;height:auto}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.eyebrow{
  color:var(--evergreen);
  font-weight:700;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.6rem;
}
.muted{color:var(--slate)}
section{padding:3.2rem 0}

/* Header */
.site-header{
  background:var(--ink);
  position:sticky;top:0;z-index:50;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 20px;max-width:1100px;margin:0 auto;gap:12px;
}
.brand{color:#fff;text-decoration:none;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;line-height:1.2}
.brand small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.7rem;color:#D9D2C4;letter-spacing:.08em}
.header-call{
  background:var(--orange);color:var(--ink)!important;
  font-weight:700;text-decoration:none;
  padding:.65rem 1rem;border-radius:6px;font-size:.95rem;white-space:nowrap;
}

/* Buttons */
.btn{
  display:inline-block;font-weight:700;font-size:1.05rem;
  padding:.95rem 1.7rem;border-radius:6px;text-decoration:none;
  text-align:center;line-height:1.3;
}
.btn-primary{background:var(--orange);color:var(--ink)}
.btn-primary:hover{background:#f0863f}
.btn-ghost{border:2px solid var(--evergreen);color:var(--evergreen)}
.btn-ghost-light{border:2px solid #fff;color:#fff;background:transparent}
.btn-row{display:flex;flex-direction:column;gap:.8rem;margin-top:1.4rem}
.btn-row .btn{width:100%}

/* Hero */
.hero{background:var(--ink);color:#fff;padding:3.4rem 0 3rem}
.hero .eyebrow{color:var(--orange)}
.hero h1{color:#fff;font-size:2.35rem}
.hero p.lead{color:#D9D2C4;font-size:1.12rem;max-width:34rem}
.hero .trust{margin-top:1.2rem;font-size:.92rem;color:#D9D2C4}
.hero .trust strong{color:#fff}

/* Fear section */
.fear{background:var(--paper)}
.fear-list{list-style:none;margin-top:1.2rem}
.fear-list li{
  padding:.9rem 0 .9rem 2rem;position:relative;
  border-bottom:1px solid var(--card-border);
}
.fear-list li:before{
  content:"!";position:absolute;left:0;top:.95rem;
  width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--evergreen);color:#fff;
  font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
.fear-list li strong{display:block;font-size:1.05rem}
.fear-list li span{color:var(--slate)}

/* Cards */
.card-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
.card{
  background:#fff;border:1px solid var(--card-border);
  border-radius:var(--radius);padding:1.5rem;
  box-shadow:0 4px 18px rgba(20,32,28,.05);
}
.card h3{margin:.5rem 0 .4rem}
.card p{color:var(--slate);font-size:.98rem;margin-bottom:.6rem}
.card .card-link{font-weight:700;font-size:.95rem;text-decoration:none}
.card.flagship{border:2px solid var(--evergreen)}

/* Process */
.process{background:var(--ink);color:#fff}
.process .eyebrow{color:var(--orange)}
.process h2{color:#fff}
.steps{list-style:none;margin-top:1.4rem;counter-reset:step}
.steps li{
  counter-increment:step;
  padding:1.1rem 0 1.1rem 3.6rem;position:relative;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.steps li:before{
  content:counter(step);
  position:absolute;left:0;top:1.05rem;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--orange);color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.steps li strong{display:block;font-size:1.08rem;margin-bottom:.2rem}
.steps li p{color:#D9D2C4;margin-bottom:0;font-size:.98rem}

/* Why us */
.why-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
.why{background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);padding:1.5rem}
.why .big{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.9rem;color:var(--evergreen)}
.why p{color:var(--slate);margin-bottom:0;font-size:.98rem}

/* Service area */
.area{background:var(--evergreen);color:#fff}
.area h2{color:#fff}
.area p{color:#EDE8DC}
.area-list{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.area-list li{
  background:rgba(255,255,255,.12);
  padding:.5rem 1rem;border-radius:999px;font-weight:600;font-size:.95rem;
}

/* FAQ */
.faq details{
  background:#fff;border:1px solid var(--card-border);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin-bottom:.8rem;
}
.faq summary{font-weight:700;cursor:pointer;font-size:1.02rem}
.faq details p{color:var(--slate);margin:.7rem 0 0;font-size:.98rem}

/* Final CTA */
.final-cta{background:var(--ink);color:#fff;text-align:center}
.final-cta h2{color:#fff;font-size:1.9rem}
.final-cta p{color:#D9D2C4;max-width:32rem;margin:0 auto 1.4rem}
.final-cta .phone-big{
  display:inline-block;background:var(--orange);color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.5rem;
  padding:1rem 2rem;border-radius:6px;text-decoration:none;margin-bottom:1rem;
}

/* Footer */
.site-footer{background:#0E1714;color:#B9B2A2;padding:2.4rem 0;font-size:.92rem}
.site-footer a{color:#EDE8DC}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:.5rem;font-family:'Inter',sans-serif;font-weight:700}
.site-footer p{margin-bottom:.3rem}
.copyright{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem}

/* Sticky mobile call bar */
.sticky-call{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--ink);padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  display:block;
}
.sticky-call a{
  display:block;background:var(--orange);color:var(--ink);
  text-align:center;font-weight:800;font-size:1.1rem;
  padding:.85rem;border-radius:6px;text-decoration:none;
}
body{padding-bottom:76px}

/* Tablet and up */
@media(min-width:700px){
  h1{font-size:2.6rem}
  .hero h1{font-size:3rem}
  .btn-row{flex-direction:row}
  .btn-row .btn{width:auto}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .sticky-call{display:none}
  body{padding-bottom:0}
}
@media(min-width:1000px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
}