/* Surrey Roofing Surveys — Plain CSS (emerald + amber palette) */
:root{
  --emerald-900:#064e3b; --emerald-800:#065f46; --emerald-700:#047857; --emerald-600:#059669; --emerald-100:#d1fae5;
  --amber-500:#f59e0b;
  --slate-900:#0f172a; --slate-700:#334155; --slate-600:#475569; --slate-500:#64748b; --slate-300:#cbd5e1; --slate-200:#e2e8f0; --slate-100:#f1f5f9;
  --white:#fff;
  --shadow:0 8px 24px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--slate-900);}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg,var(--slate-100),#fff)}
.center{text-align:center}
.row{display:flex;align-items:center}
.space-between{justify-content:space-between}
.gap{gap:12px}
.gap-xl{gap:28px}

.grid2{display:grid;grid-template-columns:1fr;gap:28px}
.grid3{display:grid;grid-template-columns:1fr;gap:20px}
.grid4{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:800px){.grid2{grid-template-columns:1.1fr .9fr} .grid3{grid-template-columns:repeat(3,1fr);} .grid4{grid-template-columns:repeat(4,1fr);}}

.topbar{background:var(--emerald-700);color:#fff;font-size:14px}
.topbar .container{padding:8px 20px}
.toplink{opacity:.95} .toplink:hover{opacity:.85}
.toparea{opacity:.9}

.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--slate-200)}
.brand{font-weight:600}
.logo{width:36px;height:36px;border-radius:12px;background:var(--emerald-700)}
.logo.small{width:28px;height:28px;border-radius:10px;background:var(--emerald-700)}
.nav{display:none;gap:22px}
.nav a{color:var(--slate-700);font-weight:500}
.nav a:hover{color:var(--slate-900)}
.hamburger{border:0;background:#fff;font-size:22px;padding:8px;border-radius:10px;display:inline-block}
@media(min-width:900px){.nav{display:flex}.hamburger{display:none}}
.mobile-nav{display:none;flex-direction:column;gap:10px;padding:12px 20px;border-top:1px solid var(--slate-200);background:#fff}
.mobile-nav a{padding:10px;border-radius:10px}
.mobile-nav a:hover{background:var(--slate-100)}

.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:12px;padding:12px 16px;border:2px solid transparent;box-shadow:none;transition:.15s all}
.btn-primary{background:var(--emerald-700);color:#fff;border-color:var(--emerald-700)}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{border-color:var(--emerald-700);color:var(--emerald-800);background:transparent}
.btn-outline:hover{background:var(--emerald-100)}
.btn.full{width:100%}
.mt{margin-top:16px}

.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--emerald-100);color:var(--emerald-800);padding:6px 10px;border-radius:999px}
.lead{font-size:18px;color:var(--slate-600)}
.gradient{background:linear-gradient(90deg,var(--emerald-800),var(--emerald-500));-webkit-background-clip:text;background-clip:text;color:transparent}

.card{background:#fff;border:1px solid var(--slate-200);border-radius:18px;box-shadow:var(--shadow);padding:20px}
.card-body{margin-top:8px}
.cards .card{height:100%}
.card.plan .price{font-weight:800;font-size:24px}
.card.plan.highlight{border-color:var(--emerald-700);box-shadow:0 0 0 2px var(--emerald-700, #047857)}

.preview{padding:0;overflow:hidden}
.preview .preview-image{height:220px;background:linear-gradient(120deg,#ecfeff 0%, #d1fae5 100%)}
.preview .card-body{padding:16px 20px}

.icon{opacity:.9}
.icon-lg{font-size:28px}
.tick{color:var(--emerald-700);margin-right:8px}

.trust{margin-top:18px;color:var(--slate-600)}
.avatars{display:flex;gap:0}
.avatars::before{content:"";width:36px;height:36px;border-radius:999px;background:var(--emerald-200);box-shadow:0 0 0 2px #fff}
.avatars::after{content:"";width:36px;height:36px;border-radius:999px;background:var(--emerald-100);margin-left:-10px;box-shadow:0 0 0 2px #fff}

.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.small{font-size:14px}
.tiny{font-size:12px}
.muted{color:var(--slate-600)}

.form .field{display:block;font-size:14px}
.form input,.form textarea{width:100%;margin-top:6px;padding:12px 12px;border-radius:12px;border:1px solid var(--slate-300);font:inherit}
.form textarea{min-height:120px;resize:vertical}

.footer{border-top:1px solid var(--slate-200);padding:28px 0;background:rgba(255,255,255,.7)}
.stars{color:#fbbf24;font-size:18px;margin-bottom:8px}
.link{color:var(--emerald-800);font-weight:600}
.link:hover{text-decoration:underline}