/*
Theme Name: Autopro Paint & Panel
Theme URI: https://autopropaintandpanel.example
Author: Autopro Paint & Panel
Author URI: https://autopropaintandpanel.example
Description: Custom one-page WordPress theme for Autopro Paint & Panel Woodridge. Self-contained CSS — no external CSS frameworks required.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autopro
*/

/* ============ DESIGN TOKENS ============ */
:root{
  --brand-red:#E11D2A;
  --brand-red-10:rgba(225,29,42,0.10);
  --brand-black:#0A0A0A;
  --brand-white:#FFFFFF;
  --brand-gray:#F4F4F4;
  --brand-gray-60:rgba(10,10,10,0.6);
  --brand-gray-70:rgba(10,10,10,0.7);
  --brand-gray-50:rgba(10,10,10,0.5);
  --brand-gray-40:rgba(10,10,10,0.4);
  --brand-gray-10:rgba(10,10,10,0.10);
  --brand-gray-5:rgba(10,10,10,0.05);
  --font-display:"Archivo Black","Arial Black",sans-serif;
  --font-sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--brand-black);
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:1.05}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media (min-width:768px){.container{padding:0 48px}}

.text-red{color:var(--brand-red)}
.bg-black{background:var(--brand-black)}
.bg-gray{background:var(--brand-gray)}
.bg-white{background:#fff}
.uppercase{text-transform:uppercase}
.tracking-wider{letter-spacing:.08em}
.tracking-widest{letter-spacing:.2em}

/* ============ NAVIGATION ============ */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px;border-bottom:1px solid var(--brand-gray-5);
}
@media(min-width:768px){.site-nav{padding:32px 48px}}
.site-nav .logo{
  font-family:var(--font-display);font-weight:700;font-size:16px;
  text-transform:uppercase;letter-spacing:-.01em;
}
@media(min-width:768px){.site-nav .logo{font-size:24px}}
.site-nav .logo .accent{color:var(--brand-red)}
.nav-links{display:none;align-items:center;gap:32px;
  font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.08em;}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links a:hover{color:var(--brand-red)}
.nav-cta{background:var(--brand-black);color:#fff;padding:12px 24px;transition:background .25s ease}
.nav-cta:hover{background:var(--brand-red);color:#fff}
.nav-mobile-call{display:inline-block;background:var(--brand-black);color:#fff;
  padding:8px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
@media(min-width:1024px){.nav-mobile-call{display:none}}

/* ============ HERO ============ */
.hero{position:relative;padding:48px 24px 80px;overflow:hidden}
@media(min-width:768px){.hero{padding:80px 48px 128px}}
.hero-inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:48px;align-items:center}
@media(min-width:1024px){.hero-inner{flex-direction:row;gap:64px}}
.hero-text{position:relative;z-index:2}
@media(min-width:1024px){.hero-text{width:50%}}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--brand-red-10);color:var(--brand-red);
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  margin-bottom:24px;
}
.ping{position:relative;display:inline-flex;width:8px;height:8px}
.ping::before{
  content:"";position:absolute;inset:0;border-radius:9999px;background:var(--brand-red);
  opacity:.75;animation:ping 1.4s cubic-bezier(0,0,.2,1) infinite;
}
.ping::after{
  content:"";position:relative;display:inline-flex;width:8px;height:8px;
  border-radius:9999px;background:var(--brand-red);
}
@keyframes ping{75%,100%{transform:scale(2.2);opacity:0}}
.hero h1{
  font-size:48px;line-height:.9;margin-bottom:32px;
}
@media(min-width:768px){.hero h1{font-size:72px}}
.hero h1 .accent{color:var(--brand-red)}
.hero .lead{font-size:18px;color:var(--brand-gray-70);max-width:512px;margin-bottom:40px;line-height:1.65}
@media(min-width:768px){.hero .lead{font-size:20px}}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.hero-rating{display:flex;flex-direction:column}
.hero-rating .num{font-family:var(--font-display);font-size:30px;font-weight:700}
.hero-rating .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--brand-gray-50);font-weight:600;margin-top:2px}
.vbar{width:1px;height:48px;background:var(--brand-gray-10)}
.hero-phone{display:flex;align-items:center;gap:12px}
.hero-phone .icon{
  width:48px;height:48px;border-radius:9999px;border:1px solid var(--brand-gray-10);
  display:grid;place-items:center;transition:all .2s ease;
}
.hero-phone .icon span{width:16px;height:16px;background:var(--brand-black);transition:background .2s ease}
.hero-phone:hover .icon{background:var(--brand-red);border-color:var(--brand-red)}
.hero-phone:hover .icon span{background:#fff}
.hero-phone .num{font-family:var(--font-display);font-weight:700;font-size:18px}

.hero-image-wrap{position:relative;width:100%}
@media(min-width:1024px){.hero-image-wrap{width:50%}}
.hero-image-wrap img{width:100%;aspect-ratio:4/5;object-fit:cover;position:relative;z-index:1}
.hero-callout{
  display:none;position:absolute;bottom:-32px;left:-32px;z-index:2;
  background:var(--brand-black);color:#fff;padding:40px;
}
@media(min-width:1280px){.hero-callout{display:block}}
.hero-callout .big{font-family:var(--font-display);font-size:36px;font-weight:700;line-height:1;margin-bottom:4px}
.hero-callout .small{font-size:11px;text-transform:uppercase;letter-spacing:.2em;opacity:.5}

/* ============ TRUST BAR ============ */
.trust{background:var(--brand-black);padding:48px 0}
.trust-inner{padding:0 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;opacity:.4}
@media(min-width:768px){.trust-inner{padding:0 48px}}
.trust-inner span{font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;text-transform:uppercase}
@media(min-width:768px){.trust-inner span{font-size:24px}}

/* ============ SECTION (services) ============ */
.section{padding:80px 24px}
@media(min-width:768px){.section{padding:128px 48px}}
.section-inner{max-width:1280px;margin:0 auto}
.section-head{
  display:flex;flex-direction:column;gap:32px;
  align-items:flex-start;justify-content:space-between;margin-bottom:64px;
}
@media(min-width:1024px){.section-head{flex-direction:row;align-items:flex-end;margin-bottom:80px}}
.section-head .text{max-width:560px}
.section-head h2{font-size:36px;margin-bottom:24px}
@media(min-width:768px){.section-head h2{font-size:48px}}
.section-head p{color:var(--brand-gray-60);line-height:1.65}
.section-cta{
  font-family:var(--font-display);font-weight:700;color:var(--brand-red);
  display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;
}
.section-cta:hover{gap:16px;color:var(--brand-red)}
.section-cta .arrow{font-size:22px}

.services-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.service-card{
  background:#fff;padding:40px;border:1px solid var(--brand-gray-5);
  transition:border-color .25s ease;
}
@media(min-width:768px){.service-card{padding:48px}}
.service-card:hover{border-color:var(--brand-red)}
.service-num{
  width:48px;height:48px;background:var(--brand-red-10);color:var(--brand-red);
  font-family:var(--font-display);font-weight:700;font-size:20px;
  display:grid;place-items:center;margin-bottom:32px;
}
.service-card h3{font-size:22px;margin-bottom:16px}
.service-card p{color:var(--brand-gray-60);margin-bottom:32px}
.service-card img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ============ GALLERY ============ */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.gallery-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .5s ease}
.gallery-grid img:hover{transform:scale(1.02)}

/* ============ TESTIMONIALS ============ */
.testimonials{padding:80px 24px;max-width:960px;margin:0 auto;text-align:center}
@media(min-width:768px){.testimonials{padding:128px 48px}}
.stars{display:flex;justify-content:center;gap:4px;margin-bottom:40px}
.stars span{width:20px;height:20px;background:var(--brand-red);display:inline-block}
.testimonials blockquote{
  font-family:var(--font-display);font-size:24px;line-height:1.15;
  font-style:italic;text-transform:uppercase;margin:0 0 40px;
}
@media(min-width:768px){.testimonials blockquote{font-size:36px}}
.testimonials cite{
  font-family:var(--font-sans);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:13px;
}
.mini-quotes{display:grid;gap:32px;text-align:left;margin-top:80px}
@media(min-width:768px){.mini-quotes{grid-template-columns:repeat(2,1fr)}}
.mini-quote{border-left:2px solid var(--brand-red);padding-left:24px}
.mini-quote p{color:rgba(10,10,10,.8);font-style:italic;margin-bottom:16px}
.mini-quote .meta{font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  font-weight:600;color:var(--brand-gray-50)}

/* ============ QUOTE FORM ============ */
.quote-section{background:var(--brand-gray);padding:80px 24px}
@media(min-width:768px){.quote-section{padding:128px 48px}}
.quote-inner{max-width:1024px;margin:0 auto;display:grid;gap:48px}
@media(min-width:1024px){.quote-inner{grid-template-columns:1fr 1fr;gap:80px}}
.quote-info h2{font-size:36px;margin-bottom:32px}
@media(min-width:768px){.quote-info h2{font-size:48px}}
.quote-info p{color:var(--brand-gray-70);margin-bottom:32px;line-height:1.65}
.quote-detail{display:flex;align-items:flex-start;gap:12px;font-size:14px;margin-bottom:16px}
.quote-detail .lbl{font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;color:var(--brand-gray-50);width:64px;padding-top:4px}
.quote-detail.phone .val{font-family:var(--font-display);font-size:18px;font-weight:700}
.quote-detail.phone:hover{color:var(--brand-red)}

.quote-form{background:#fff;padding:32px;border:1px solid var(--brand-gray-5)}
@media(min-width:768px){.quote-form{padding:40px}}
.field{margin-bottom:20px}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;margin-bottom:8px}
.field input,.field textarea{
  width:100%;border:1px solid var(--brand-gray-10);padding:12px 16px;
  font-family:inherit;font-size:16px;background:#fff;transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand-red)}
.field textarea{resize:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.submit-btn{
  width:100%;background:var(--brand-black);color:#fff;padding:16px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;transition:background .25s ease;
}
.submit-btn:hover{background:var(--brand-red)}
.form-message{margin-bottom:16px;padding:12px 16px;font-size:14px}
.form-message.success{background:#e8f5e8;color:#1a5c1a;border-left:3px solid #1a5c1a}
.form-message.error{background:#fde8e8;color:#8a1a1a;border-left:3px solid #8a1a1a}

/* ============ FOOTER ============ */
.site-footer{background:var(--brand-black);color:#fff;padding:80px 24px 48px}
@media(min-width:768px){.site-footer{padding:96px 48px 48px}}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:64px}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(4,1fr);gap:64px;margin-bottom:96px}}
.footer-brand{grid-column:span 1}
@media(min-width:768px){.footer-brand{grid-column:span 2}}
.footer-brand h2{font-size:28px;margin-bottom:32px}
@media(min-width:768px){.footer-brand h2{font-size:36px}}
.footer-brand h2 .accent{color:var(--brand-red)}
.footer-brand .info{display:flex;flex-direction:column;gap:8px;
  color:rgba(244,244,244,.6);font-size:14px}
.footer-brand .info a:hover{color:#fff}
.footer-brand .hours{padding-top:16px;font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:rgba(244,244,244,.4)}
.footer-col h4{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:13px;margin-bottom:24px;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px;
  font-size:14px;color:rgba(244,244,244,.6);text-transform:uppercase;letter-spacing:.08em}
.footer-col ul a:hover{color:#fff}
.footer-bottom{padding-top:48px;border-top:1px solid rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:space-between}
@media(min-width:768px){.footer-bottom{flex-direction:row}}
.footer-bottom p{font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(244,244,244,.4)}
.footer-bottom p .accent{color:var(--brand-red)}