/* J & M Repair & Restore LLC — brand: cream #F7F3E8, charcoal-navy #22222E, slate #6E6878 */

:root{--cream:#F7F3E8;--dark:#22222E;--mid:#6E6878;--sec:#8A8490;--light:#B8B5BC;--white:#fff;--line:#E4DDCC}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--cream);color:var(--dark);line-height:1.6}
a{color:var(--dark)}
img{max-width:100%}
header.top{background:var(--dark);color:var(--cream);position:sticky;top:0;z-index:20}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0;flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-weight:800;letter-spacing:.02em}
.nav .brand img{height:44px;width:44px;border-radius:8px}
.nav nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav nav a{color:#D8D3E0;text-decoration:none;padding:8px 10px;border-radius:8px;font-size:15px}
.nav nav a:hover,.nav nav a.active{background:#34344A;color:#fff}
.callbtn{background:var(--cream);color:var(--dark)!important;font-weight:700}
.hero{background:var(--dark);color:var(--cream);padding:56px 0 48px}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.08;margin:0 0 14px}
.hero p.lede{font-size:19px;color:#D8D3E0;max-width:640px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;background:var(--cream);color:var(--dark);font-weight:700;text-decoration:none;padding:13px 22px;border-radius:10px}
.btn.ghost{background:transparent;color:var(--cream);border:2px solid var(--mid)}
.btn.dark{background:var(--dark);color:var(--cream)}
.emerg{background:#FFF3D6;border:2px solid #D9A441;border-radius:12px;padding:16px 18px;margin:22px 0}
.emerg strong{font-size:18px}
section{padding:40px 0}
h2{font-size:28px;margin:0 0 10px}
h3{font-size:20px;margin:0 0 6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:18px}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.pill{display:inline-block;background:#EDE9DC;border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin:3px;font-size:14px}
footer{background:var(--dark);color:#C9C4D2;padding:32px 0;margin-top:20px}
footer a{color:var(--cream)}
form.quote{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:14px;max-width:720px}
label{font-weight:600;font-size:15px;display:grid;gap:5px}
input,select,textarea{font:inherit;padding:11px 12px;border:1px solid var(--sec);border-radius:9px;background:#fff;width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:8px 0}
.faq summary{font-weight:700;cursor:pointer}
.note{font-size:14px;color:var(--mid)}
.hexrow{font-size:26px;letter-spacing:6px;color:var(--mid)}
/* Sticky call bar — mobile only, hidden on desktop */
.mobile-call{display:none}

/* ---- Mobile ---- */
@media(max-width:720px){
  body{padding-bottom:72px}
  .wrap{padding:0 16px}
  /* Header: brand on top, nav as one scrollable row, hide the header call button (sticky bar covers it) */
  .nav{gap:10px;padding:10px 0}
  .nav nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .nav nav a{flex-shrink:0;padding:10px 12px}
  .nav .callbtn{display:none}
  /* Hero: tighter, smaller headline */
  .hero{padding:36px 0 32px}
  .hero h1{font-size:clamp(29px,8vw,40px)}
  .hero p.lede{font-size:17px}
  /* CTAs stack full-width — easy thumb targets */
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%;text-align:center;padding:14px 18px}
  section{padding:28px 0}
  h2{font-size:24px}
  .cards{gap:12px}
  .card{padding:16px}
  .emerg{margin:16px 0;padding:14px 16px}
  /* Forms: 16px inputs so iOS doesn't zoom on focus; single column */
  .grid2{grid-template-columns:1fr}
  form.quote{padding:18px}
  input,select,textarea{font-size:16px;padding:12px}
  /* Sticky bottom call bar */
  .mobile-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--dark);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;box-shadow:0 -2px 12px rgba(0,0,0,.25)}
  .mobile-call .btn{flex:1;text-align:center;padding:13px 10px}
  .mobile-call a.quote-link{color:var(--cream);font-weight:700;white-space:nowrap;text-decoration:none;padding:13px 4px}
}