/* style.css — modern, mobile-first styles for 5M Home Improvements */

/* Variables & base */
:root{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --muted: #6b7280;
  --accent: #b9141a; /* keep your red for brand */
  --accent-dark: #9e1214;
  --dark: #08243f;
  --radius: 12px;
  --container: 1100px;
  --gap: 20px;
  --shadow: 0 10px 30px rgba(2,12,30,0.06);
  --fw-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --fw-serif: 'Source Serif 4', Georgia, serif;
}

* { box-sizing: border-box; }
html,body { height: 100%; }
body{
  margin:0;
  font-family: var(--fw-sans);
  color: var(--dark);
  background: linear-gradient(180deg, #fbfdff 0%, var(--bg) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* Utility */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

/* Accessibility */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position: absolute; left: 12px; top: 12px; background:#000; color:#fff; padding:8px 12px; border-radius:6px; z-index:100;
}
.skip-link:focus{ left:12px; top:80px; }

/* Header */
.site-header{
  background: #fff;
  border-bottom: 1px solid rgba(2,12,30,0.04);
  position: sticky;
  top: 0;
  z-index: 60;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px;
  max-width: var(--container);
  margin:0 auto;
}
.brand img{ display:block; height:auto; max-width: 100px; }

/* phone + hamburger */
.header-cta{ display:flex; align-items:center; gap:12px; }
.phone{
  display:inline-block;
  background: linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(185,0,6,0.08);
}
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:8px;
  cursor:pointer;
}
.hamburger{
  width:22px; height:2px; background:var(--dark); display:block; position:relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0; right:0; height:2px; background:var(--dark);
}
.hamburger::before{ top:-7px; }
.hamburger::after{ top:7px; }

/* Nav */
.main-nav{
  display:none;
  background: #fff;
  border-top: 1px solid rgba(2,12,30,0.04);
}
.main-nav.open{ display:block; }
.main-nav ul{ margin:0; padding:12px 18px; list-style:none; display:flex; flex-direction:column; gap:8px; }
.main-nav a{ color:var(--dark); text-decoration:none; font-weight:600; padding:8px 10px; display:inline-block; border-radius:8px; }
.main-nav a:hover{ background: rgba(11, 35, 64, 0.04); }

/* Hero */
.hero{
  padding: 64px 0;
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
}
.hero::after{
  content:"";
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,36,63,0.45), rgba(11,35,64,0.55));
}
.hero-inner{
  position:relative; z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding: 48px 18px;
  text-align:center;
}
.hero-title{
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  line-height:1.05;
  margin:0 0 14px;
  font-weight:800;
  font-family: var(--fw-sans);
}
.hero-sub{ margin:0 0 20px; opacity:0.95; font-weight:500; max-width:800px; margin-left:auto;margin-right:auto; }
.hero-actions{ display:flex; gap:12px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
.btn{ padding:12px 18px; border-radius:10px; text-decoration:none; display:inline-block; font-weight:700; }
.btn-primary{ background: #fff; color: var(--accent); }
.btn-ghost{ background: transparent; color:#fff; border: 1px solid rgba(255,255,255,0.18); }

/* trust-row */
.trust-row{ display:flex; gap:20px; justify-content:center; margin-top:18px; list-style:none; padding:0; color:rgba(255,255,255,0.9); font-weight:600; }

/* Sections */
.section{ padding: 56px 0; }
.section .section-title{ font-size:1.4rem; margin:0 0 8px; font-weight:700; color:var(--dark); }
.lead{ color:var(--muted); margin:0 0 20px; }

/* Services cards */
.cards-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px; }
.card{
  background:var(--surface);
  padding:18px;
  border-radius:10px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(2,12,30,0.04);
  position: relative;
  height: 300px;
}
.card h3{ margin:0 0 8px; font-size:1.05rem; }
.card p{ margin:0; color:var(--muted); }

.card img {  transition: transform 2s linear; max-width: 200px; position: absolute; bottom: 0px; }

.card img:not(#button_ball):hover { transform: scale(1.3); } 

.card #button_ball { max-width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Features grid */
.features-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; }
.feature{ background:var(--surface); padding:18px; border-radius:10px; box-shadow: var(--shadow); border:1px solid rgba(2,12,30,0.04); }
.feature h3{ margin:0 0 8px; font-size:1.05rem; }
.feature p{ margin:0; color:var(--muted); }

/* Testimonials */
.testimonial{ background:linear-gradient(180deg,#fff,#fcfcff); padding:20px; border-radius:10px; box-shadow:var(--shadow); margin-bottom:14px; border:1px solid rgba(2,12,30,0.04); }
.testimonial p{ margin:0 0 12px; font-style:italic; }
.testimonial footer{ font-weight:700; color:var(--dark); }
.testimonial-grid{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.mini{ background:#fff; padding:10px 12px; border-radius:8px; border:1px solid rgba(2,12,30,0.04); color:var(--muted); }

/* CTA band */
.cta-band{ background: linear-gradient(90deg,var(--accent),var(--accent-dark)); color:#fff; padding:26px 0; }
.cta-inner{ display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cta-inner h3{ margin:0; font-size:1.1rem; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.contact-card{ background:var(--surface); padding:18px; border-radius:10px; box-shadow:var(--shadow); border:1px solid rgba(2,12,30,0.04); }
.contact-form label{ display:block; margin-bottom:12px; font-weight:600; color:var(--dark); }
.contact-form input, .contact-form textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(2,12,30,0.08); margin-top:6px;
}
.form-actions{ display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap; }

/* Footer */
.site-footer{ padding:18px 0; background:#fff; border-top:1px solid rgba(2,12,30,0.04); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--container); margin:0 auto; padding:0 18px; color:var(--muted); }
.footer-nav a{ margin-left:12px; color:var(--muted); text-decoration:none; font-weight:600; }

/* Responsive larger screens */
@media(min-width:800px){
  .main-nav{ display:block; background:transparent; border-top:0; }
  .main-nav ul{ flex-direction:row; gap:24px; padding:0; align-items:center; }
  .main-nav a{ padding:6px 8px; }
  .nav-toggle{ display:none; }

  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .features-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns: 1fr 320px; }
  .hero-inner{ text-align:left; padding: 80px 18px; }
  .trust-row{ justify-content:flex-start; gap:40px; }
  .cta-inner{ padding:0 18px; }
}

/* Desktop wide */
@media(min-width:1200px){
  .cards-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* small tweaks */
a{ color:inherit; }
label .label{ display:block; font-weight:700; margin-bottom:6px; color:var(--dark); }
.muted{ color:var(--muted); }