/* ================================
   SA Property Care — styles.css
   Clean, Safari-safe, SEO-friendly
   ================================ */

/* Theme */
:root{
  --purple:#522761;
  --green:#62B236;
  --charcoal:#1B1221;
  --muted:#737373;
  --white:#fff;
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--charcoal); background:var(--white);
  line-height:1.5;
}
a{color:inherit; text-decoration:none}
.container{max-width:1150px; margin:0 auto; padding:0 20px}

/* Focus (keyboard a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(98,178,54,.45);
  outline-offset:2px;
  border-radius:6px;
}

/* Topbar / Nav */
.topbar{background:var(--purple); color:#fff; position:sticky; top:0; z-index:1000}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; gap:10px; align-items:center}
.brand img{height:32px; width:32px; border-radius:6px}
.brand .name{font-weight:800; font-size:18px}
.topbar .call{font-weight:800}
.hamburger{width:26px; height:20px; display:inline-grid; gap:4px; cursor:pointer; background:none; border:none}
.hamburger span{display:block; height:3px; background:#fff; border-radius:2px}

/* Drawer */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); -webkit-backdrop-filter:saturate(1.1); backdrop-filter:saturate(1.1); opacity:0; pointer-events:none; transition:.25s; z-index:140}
.drawer{position:fixed; top:0; right:0; height:100dvh; width:84%; max-width:360px; background:#fff; box-shadow:-4px 0 26px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .28s ease; z-index:150; display:flex; flex-direction:column}
.drawer-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee}
.drawer-header .brand{gap:10px}
.drawer-close{background:none; border:none; font-size:28px; line-height:1; cursor:pointer}
.drawer-nav{padding:10px 16px; display:grid; gap:8px}
.drawer-nav a{padding:12px 10px; border-radius:10px; font-weight:700; border:1px solid #eee}
.drawer .cta{margin:10px 16px 16px; background:var(--green); color:#fff; text-align:center; padding:12px; border-radius:10px; font-weight:800}
.drawer .muted{color:#555; font-size:13px; margin:0 16px 16px}
.menu-open .overlay{opacity:1; pointer-events:auto}
.menu-open .drawer{transform:translateX(0)}

/* Hero (Safari-safe) */
.hero{position:relative; background:#000; overflow:hidden; min-height:380px}
.hero img{position:absolute; inset:0; width:100%; height:58vh; min-height:420px; object-fit:cover; opacity:.9; filter:saturate(1.05)}
@supports (height:1svh){ .hero img{ height:60svh; } }
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.35)); z-index:1}
.hero-content{position:relative; z-index:2; padding:24px 0; display:flex; align-items:center; height:100%}
.hero-copy{color:#fff; max-width:720px}
.hero h1{font-size:44px; line-height:1.1; margin:0 0 8px}
.hero p{margin:0 0 16px; font-size:18px}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:8px; font-weight:800}
.btn-green{background:var(--green); color:#fff}
.btn:hover{filter:brightness(1.05)}

/* Services + Quote */
.row{background:#fff; position:relative}
.row-inner{display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start}
.services{padding:40px 0}
.section-title{font-size:28px; margin:0 0 16px}
.service-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.service-card{border:2px solid var(--green); border-radius:12px; padding:16px; text-align:center; transition:transform .12s ease, box-shadow .12s ease}
.service-card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08)}
.service-card .icon{font-size:34px; line-height:1.1; margin-bottom:8px}
.service-card h3{margin:0 0 6px}
.service-card p{margin:0; color:#333; font-size:14px}

/* Quote form */
.quote-card{background:#fff; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.15); padding:20px; border:1px solid #eee; transform:translateY(-70px)}
.quote-card h3{margin:0 0 10px}
.form{display:grid; gap:10px}
.input, textarea{width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:8px; font-size:16px}
.input:focus, textarea:focus{border-color:#cfe8c1; outline:none; box-shadow:0 0 0 3px rgba(98,178,54,.18)}
textarea{min-height:110px; resize:vertical}
.submit{background:var(--green); color:#fff; border:none; padding:12px 16px; border-radius:8px; font-weight:800; cursor:pointer}
.note{font-size:13px; color:#555}

/* Footer */
.footer{background:#0f0d13; color:#e9e9f1; margin-top:10px; padding:26px 0}
.footer .cols{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px}
.footer a{color:#e9e9f1; opacity:.9}
.muted{color:#bdbdc7; font-size:13px}

/* Footer trust + payments */
.footer .trust-badges{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px}
.footer .trust-badges .bbb img{height:24px; width:auto; display:block}
.footer .trust-badges .bbb-rating{font-weight:700; font-size:12px; color:#0b4a2f; line-height:1.1}
.footer .payments{display:flex; gap:8px; align-items:center; margin-top:8px}
.footer .payments img{height:24px; width:auto}

/* Responsive */
@media (max-width:960px){
  .row-inner{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr 1fr}
  .quote-card{transform:none; margin-top:12px}
}
@media (max-width:640px){
  .hero h1{font-size:32px}
  .service-grid{grid-template-columns:1fr}
  .topbar .call{display:none}
}
/* Fix: keep the quote card above the hero overlay */
.hero { position: relative; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; }
.hero-content { position: relative; z-index: 2; }

/* Next section sits above the hero */
.row { position: relative; z-index: 3; }

/* Quote card itself above everything from the hero */
.quote-card { position: relative; z-index: 4; }

/* Optional: on mobile we don't pull it up, so no overlap anyway */
@media (max-width: 960px){
  .quote-card { z-index: 4; } /* keep for safety */
}