:root{
  --cool: #0e87a8;   /* teal-ish accent */
  --warm: #ff6a3d;   /* secondary accent */
  --ink: #0f172a;
  --muted: #475569;
  --bg: #ffffff;
  --panel: #ffffff;
  --border: #e2e8f0;
  --navy: #0f2e45;   /* dark hover bg */
  --card-shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  padding-bottom: env(safe-area-inset-bottom); /* notch safe */
  /* HARD GUARD: never allow sideways scroll */
  overflow-x:hidden;
}

.container{max-width:1080px;margin:0 auto;padding:0 16px}

.header{
  position:sticky;top:0;z-index:10;background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  /* Allow wrapping on narrow screens to prevent overflow */
  flex-wrap:wrap;
  /* Safety: clip any fractional overflow from focus outlines/gaps */
  overflow-x:clip;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--cool),var(--warm))}
.nav{
  display:flex;gap:18px;align-items:center;
  /* Let nav shrink and wrap instead of forcing horizontal scroll */
  flex:1 1 auto;min-width:0;flex-wrap:wrap;
}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;padding:8px 4px;display:inline-flex;align-items:center}
.nav .btn{padding:8px 12px;border-radius:10px;background:var(--cool);color:#fff}
.nav .phone{font-weight:600}

.hero{
  display:grid;gap:24px;grid-template-columns:1.2fr 1fr;align-items:start;padding:40px 16px
}
.hero{background:linear-gradient(180deg,#f0f7ff,transparent)}
.hero h1{font-size:40px;line-height:1.1;margin:0}
.hero p{color:var(--muted);max-width:60ch}
.cta-row{display:flex;gap:12px;margin:16px 0}
.btn{display:inline-block;background:var(--cool);color:#fff;padding:12px 16px;border-radius:12px;text-decoration:none;border:0;cursor:pointer;min-height:44px}
.btn-outline{display:inline-block;border:1px solid var(--cool);color:var(--cool);padding:12px 16px;border-radius:12px;text-decoration:none;min-height:44px}
.w-full{width:100%}
.status{margin-top:8px;font-size:14px;color:#166534}

.checks{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.checks li::before{content:"✔ ";color:var(--warm);font-weight:700}

.lead-form{
  border:1px solid var(--border);border-radius:16px;background:var(--panel);
  padding:16px;display:grid;gap:12px;box-shadow:0 4px 14px rgba(0,0,0,.04)
}
.lead-form h2{margin:0 0 4px 0}
.muted{color:var(--muted);font-size:14px;margin:0 0 6px 0}
.lead-form input,.lead-form textarea,.lead-form select{
  width:100%;border:1px solid var(--border);border-radius:10px;padding:10px;font-size:14px;background:#fff;min-height:44px
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Quick buttons row */
.quick-buttons{padding:10px 16px 8px}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
.quick-card{
  appearance:none;
  background:#fff;
  border:0;
  text-align:left;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background-color .15s ease, color .15s ease;
  min-height:44px;
}
.quick-card:focus-visible{outline:3px solid #0ea5e9;outline-offset:3px}
.quick-card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.12);background:var(--navy)}
.quick-card:hover .quick-title{color:#fff}
.quick-card:hover .quick-icon{color:#fff}
.quick-topbar{
  height:10px;
  background:var(--cool);
  width:100%;
}
.quick-body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:26px 10px 30px;
}
.quick-icon{
  width:68px;height:68px;color:var(--cool);
}
.quick-title{
  font-family:Georgia, "Times New Roman", serif;
  font-weight:800;
  letter-spacing:.3px;
  text-align:center;
  color:var(--ink);
}

/* Services grid */
.services{padding:24px 16px 16px}
.services h2{margin:0 0 12px 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{border:1px solid var(--border);border-radius:14px;padding:16px;text-decoration:none;color:inherit;transition:box-shadow .15s ease, transform .05s ease;min-height:44px}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px)}

/* Reviews section */
.reviews{padding:24px 16px 48px}
.reviews h2{margin:12px 0 16px 0}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.review-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.stars{
  letter-spacing:2px;
  font-size:18px;
  line-height:1;
  color:#f59e0b; /* star color */
}
.review-text{color:var(--ink)}
.review-name{color:var(--muted);font-size:14px}

.footer{border-top:1px solid var(--border);padding:24px 0;background:#fafafa}

/* --- Mobile polish --- */

/* 1) Prevent iOS input zoom (ensure >=16px on phones) */
@media (max-width: 768px){
  .lead-form input,
  .lead-form select,
  .lead-form textarea { font-size:16px; }
}

/* 2) Don't depend on hover on touch devices */
@media (hover: none) {
  .quick-card:hover { background:#fff; box-shadow: var(--card-shadow); transform:none; }
  .quick-card:hover .quick-icon,
  .quick-card:hover .quick-title { color: inherit; }
}

/* 3) Visible focus styles for keyboard users */
:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 3px; }

/* 4) Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Responsive layout refinements */
@media (max-width:1200px){
  .quick-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
}
@media (max-width:1024px){
  .hero{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr 1fr}
}

/* Header/nav: make it wrap cleanly on phones and remove overflow pressure */
@media (max-width: 700px){
  .header{
    height:auto;           /* allow the header to grow when nav wraps */
    padding-top:10px;
    padding-bottom:10px;
    gap:8px;
  }
  .nav{
    width:100%;
    gap:8px 12px;          /* tighter gaps on small screens */
    justify-content:flex-start;
  }
  .nav a{ font-size:15px; line-height:1.2 }
  .nav .btn{ padding:8px 10px }
  .nav .phone{ font-weight:600 }
}

/* Stack more tightly on very small phones */
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:480px){
  .quick-grid { grid-template-columns:1fr; }
}