/* Champa Auto Repair — restored static styles (Karla, white/orange theme) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Karla','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:#2b2b2b;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:#e8801f;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:700;line-height:1.2;color:#1a1a1a;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.1rem)}
h3{font-size:1.2rem}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:#ffffff;border-bottom:1px solid #ececec;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1080px;margin:0 auto;padding:14px 22px;gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:54px;width:auto}
.brand .brand-name{font-weight:700;font-size:1.05rem;color:#1a1a1a;line-height:1.1}
.brand .brand-name span{display:block;font-size:.72rem;font-weight:400;color:#777;letter-spacing:.04em}
.main-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.main-nav a{
  display:inline-block;padding:10px 14px;color:#333;font-weight:700;
  font-size:.95rem;border-radius:4px;min-height:44px;line-height:24px;
}
.main-nav a:hover{background:#f6f1ea;color:#e8801f;text-decoration:none}
.main-nav a.active{color:#e8801f}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;min-height:44px;min-width:44px}
.nav-toggle span{display:block;width:26px;height:3px;background:#1a1a1a;margin:5px 0;border-radius:2px}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;text-align:center;
  background:#1a1a1a center/cover no-repeat;
  padding:96px 22px;
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(20,20,20,.55)}
.hero .hero-content{position:relative;max-width:860px;margin:0 auto}
.hero h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5);margin-bottom:.4em}
.hero .tagline{font-size:clamp(1.05rem,2.4vw,1.4rem);font-weight:700;letter-spacing:.02em}
.hero .tagline em{font-style:normal;color:#f6a04d}
.btn{
  display:inline-block;background:#e8801f;color:#fff;font-weight:700;
  padding:14px 30px;border-radius:5px;margin-top:26px;font-size:1rem;
  min-height:44px;border:0;cursor:pointer;
}
.btn:hover{background:#cf6d11;text-decoration:none;color:#fff}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff}
.btn.ghost:hover{background:#fff;color:#1a1a1a}

/* ---------- Sections ---------- */
section{padding:60px 0}
section.alt{background:#f7f4ef}
.section-head{text-align:center;max-width:760px;margin:0 auto 40px}
.section-head p{color:#555;font-size:1.05rem}
.lead{font-size:1.15rem;color:#444}

/* Service slider/grid */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.svc-card{position:relative;overflow:hidden;border-radius:6px;min-height:180px;display:flex;align-items:center;justify-content:center;color:#fff}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.svc-card .label{position:relative;font-weight:700;font-size:1.4rem;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* Three-column services detail */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;margin-top:20px}
.col h3{color:#e8801f;border-bottom:2px solid #f0e3d4;padding-bottom:8px}
.col ul{list-style:none;padding:0;margin:0}
.col ul li{padding:6px 0;border-bottom:1px solid #f1f1f1;color:#444}
.col ul li::before{content:"›";color:#e8801f;font-weight:700;margin-right:10px}

/* feature row */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.feature img{border-radius:6px;width:100%}
@media(max-width:760px){.feature{grid-template-columns:1fr}}

/* testimonial */
.quote{max-width:760px;margin:0 auto;text-align:center;font-size:1.25rem;font-style:italic;color:#333}
.quote .who{display:block;font-style:normal;font-weight:700;color:#e8801f;margin-top:16px;font-size:1rem}

/* Contact / info cards */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.info-card{background:#fff;border:1px solid #ececec;border-radius:8px;padding:26px}
.info-card h3{margin-top:0;color:#e8801f}
.info-card p{margin:.3em 0;color:#444}
.hours-table{width:100%;border-collapse:collapse;margin-top:8px}
.hours-table td{padding:5px 0;border-bottom:1px solid #f1f1f1;font-size:.97rem}
.hours-table td:last-child{text-align:right;color:#666}

/* Stub contact form */
.stub-form{max-width:560px;margin:30px auto 0;background:#fff;border:1px solid #ececec;border-radius:8px;padding:28px}
.stub-form label{display:block;font-weight:700;margin:14px 0 6px;font-size:.9rem;color:#333}
.stub-form input,.stub-form textarea,.stub-form select{
  width:100%;padding:12px;border:1px solid #d6d6d6;border-radius:5px;font-size:1rem;font-family:inherit;min-height:44px;
}
.stub-note{font-size:.85rem;color:#888;margin-top:8px}

/* Blog */
.post-list{display:grid;gap:30px;max-width:780px;margin:0 auto}
.post-card{border:1px solid #ececec;border-radius:8px;overflow:hidden;background:#fff}
.post-card .body{padding:24px}
.post-card h2{margin-top:0;font-size:1.5rem}
.post-card h2 a{color:#1a1a1a}
.post-card h2 a:hover{color:#e8801f;text-decoration:none}
.post-meta{font-size:.85rem;color:#999;margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em}
.post-body{max-width:760px;margin:0 auto}
.post-body h2{margin-top:1.4em;font-size:1.35rem}
.post-body ul{padding-left:22px}
.post-body li{margin:6px 0}
.tag{display:inline-block;background:#f6f1ea;color:#cf6d11;font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:20px;margin-right:6px}

/* ---------- Footer ---------- */
.site-footer{background:#1a1a1a;color:#cfcfcf;padding:50px 0 30px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
.site-footer h4{color:#fff;margin-bottom:14px;font-size:1rem;letter-spacing:.04em}
.site-footer a{color:#e8a45f}
.site-footer p{margin:.3em 0}
.footer-logo img{height:64px;margin-bottom:14px}
.social a{display:inline-block;margin-right:14px;font-weight:700;color:#e8a45f}
.footer-bottom{border-top:1px solid #333;margin-top:34px;padding-top:20px;text-align:center;color:#888;font-size:.85rem}

@media(max-width:820px){
  .nav-toggle{display:block}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;background:#fff;
    border-bottom:1px solid #ececec;box-shadow:0 8px 16px rgba(0,0,0,.08);padding:8px 14px;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 12px;border-bottom:1px solid #f3f3f3}
  .header-inner{position:relative}
}
@media(max-width:480px){
  .brand .brand-name{display:none}
  .feature{grid-template-columns:1fr}
}