/* ============================================================
   MAIN.CSS — Mobile Windscreen Replacement UK
   ============================================================ */
:root {
  --red:      #E8000A;
  --red-dk:   #b80007;
  --white:    #ffffff;
  --offwhite: #F7F7F5;
  --dark:     #111827;
  --mid:      #4B5563;
  --light:    #E5E7EB;
  --radius:   6px;
  --shadow:   0 4px 24px rgba(0,0,0,.11);
  --fh:       'Barlow Condensed', sans-serif;
  --fb:       'Lato', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--dark);background:var(--white);line-height:1.65}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* --- Typography --- */
h1,h2,h3,h4{font-family:var(--fh);text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.5vw,2.8rem);font-weight:800}
h3{font-size:1.35rem;font-weight:700}
.eyebrow{font-family:var(--fh);font-size:.75rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mid);margin-bottom:8px}

/* --- Sticky Header --- */
.site-header{position:sticky;top:0;z-index:1000;background:var(--red);box-shadow:0 2px 16px rgba(0,0,0,.25)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:10px 20px;gap:12px}
.logo{font-family:var(--fh);font-weight:900;font-size:1.1rem;text-transform:uppercase;
  color:#fff;letter-spacing:.06em;white-space:nowrap}
.logo span{opacity:.75}
.js-sitelinks{display:flex;gap:5px;flex-wrap:wrap}
.js-sitelinks a{color:rgba(255,255,255,.9);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;padding:4px 9px;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);transition:background .2s}
.js-sitelinks a:hover{background:rgba(255,255,255,.2)}
.header-cta{display:flex;align-items:center;gap:6px;background:#fff;color:var(--red);
  padding:8px 14px;border-radius:var(--radius);font-family:var(--fh);font-weight:900;
  font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  transition:transform .15s,box-shadow .15s}
.header-cta:hover{transform:scale(1.04);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.header-cta .mi{font-size:1.1rem}

/* --- Call Button --- */
.btn-call{display:inline-flex;align-items:center;gap:10px;background:var(--red);
  color:#fff;padding:12px 20px;border-radius:var(--radius);cursor:pointer;
  transition:background .2s,transform .15s,box-shadow .15s}
.btn-call:hover{background:var(--red-dk);transform:scale(1.04);
  box-shadow:0 6px 20px rgba(232,0,10,.35)}
.btn-call .mi{font-size:1.35rem}
.btn-call strong{display:block;font-family:var(--fh);font-size:1.1rem;font-weight:900;
  letter-spacing:.05em;text-transform:uppercase}
.btn-call small{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.btn-call--white{background:#fff;color:var(--red)}
.btn-call--white:hover{background:#f0f0f0}
.btn-call--white strong,.btn-call--white small{color:var(--red)}

/* --- Hero --- */
.hero{display:flex;flex-wrap:wrap;min-height:560px;background:#fff}
.hero-content{flex:1 1 400px;padding:56px 40px;display:flex;flex-direction:column;
  justify-content:center;gap:18px}
.hero-eyebrow{font-family:var(--fh);font-size:.78rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.hero-content h1{color:var(--red)}
.hero-bullets{list-style:none;display:flex;flex-direction:column;gap:8px}
.hero-bullets li{font-size:.97rem;color:var(--mid)}
.hero-bullets strong{color:var(--dark)}
.hero-img{flex:1 1 360px;min-height:360px;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* --- Section --- */
.section{padding:72px 24px}
.section--grey{background:var(--offwhite)}

/* --- About --- */
.about-wrap{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.about-img-wrap{flex:1 1 360px;position:relative}
.about-img-wrap::before{content:'';position:absolute;top:-14px;left:-14px;right:14px;bottom:14px;
  border:9px solid var(--red);z-index:0}
.about-img-wrap img{position:relative;z-index:1;border-radius:var(--radius);box-shadow:var(--shadow)}
.about-text{flex:1 1 340px;display:flex;flex-direction:column;gap:14px}
.about-text h2 span{color:var(--red)}
.about-text p{color:var(--mid)}

/* --- Steps --- */
.section-hdr{text-align:center;max-width:680px;margin:0 auto 44px}
.section-hdr p{color:var(--mid);margin-top:10px}
.section-hdr h2 span{color:var(--red)}
.steps-grid{max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.step-card{background:#fff;padding:32px 26px;border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:14px;border-top:4px solid var(--red)}
.step-card .mi{font-size:3.2rem;color:var(--red)}
.step-card p{color:var(--mid);flex-grow:1}

/* --- Quote --- */
.quote-section{background:var(--red);padding:72px 24px}
.quote-inner{max-width:680px;margin:0 auto;text-align:center}
.quote-inner .eyebrow{color:rgba(255,255,255,.8)}
.quote-inner h2{color:#fff;margin-bottom:28px}
.form-wrap{background:#fff;padding:36px 32px;border-radius:var(--radius);
  box-shadow:0 12px 48px rgba(0,0,0,.22);text-align:left}
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}
.form-group label{font-weight:700;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dark)}
.form-group input,.form-group textarea{width:100%;padding:11px 13px;
  border:2px solid var(--light);border-radius:var(--radius);
  font-family:var(--fb);font-size:.93rem;color:var(--dark);
  transition:border-color .2s;background:#fff}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--red)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.btn-submit{width:100%;padding:15px;background:var(--dark);color:#fff;
  font-family:var(--fh);font-size:1.1rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;border:none;border-radius:var(--radius);cursor:pointer;
  transition:background .2s,transform .15s}
.btn-submit:hover{background:#0f172a;transform:scale(1.02)}
.req{color:var(--red)}
.form-err{background:#fff3f3;border:2px solid #fca5a5;color:#991b1b;
  padding:10px 14px;border-radius:var(--radius);margin-bottom:16px;font-size:.88rem}

/* --- Testimonials --- */
.testi-grid{max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.testi-card{background:var(--offwhite);padding:26px;border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start}
.testi-card img{width:68px;height:68px;border-radius:8px;object-fit:cover;flex-shrink:0}
.testi-card p{color:var(--mid);font-style:italic;margin-bottom:8px;font-size:.93rem}
.testi-card h4{color:var(--red);font-family:var(--fh);font-size:.95rem;font-weight:800;text-transform:uppercase}
.stars{color:#F59E0B;font-size:1rem;letter-spacing:.04em}

/* --- Banner CTA --- */
.banner-cta{position:relative;height:400px;display:flex;align-items:center;
  justify-content:flex-end;overflow:hidden}
.banner-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner-overlay{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.banner-content{position:relative;z-index:1;background:var(--red);color:#fff;
  padding:44px 36px;max-width:500px;width:88%;margin-right:5%;
  border-radius:var(--radius);display:flex;flex-direction:column;gap:22px}
.banner-content h2{font-size:clamp(1.4rem,2.3vw,2rem)}

/* --- Footer --- */
.site-footer{background:var(--red);color:#fff;padding:44px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.footer-phone{display:flex;align-items:center;gap:12px}
.footer-phone .mi{font-size:2.2rem}
.footer-phone a{display:block;font-family:var(--fh);font-size:1.8rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em;color:#fff}
.footer-phone small{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.footer-nav{display:flex;gap:22px}
.footer-nav a{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  opacity:.85;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.footer-nav a:hover{opacity:1}
.footer-copy{font-size:.73rem;opacity:.6}

/* --- Sticky Call --- */
.sticky-call{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:999;
  display:flex;align-items:center;gap:9px;background:var(--red);color:#fff;
  padding:13px 26px;border-radius:50px;box-shadow:0 8px 32px rgba(232,0,10,.45);
  font-family:var(--fh);font-weight:900;font-size:1rem;text-transform:uppercase;
  letter-spacing:.05em;animation:pulse 2.4s infinite;white-space:nowrap}
.sticky-call .mi{font-size:1.25rem}
.sticky-call:hover{background:var(--red-dk);animation:none}
@keyframes pulse{
  0%,100%{box-shadow:0 8px 32px rgba(232,0,10,.45)}
  50%{box-shadow:0 8px 44px rgba(232,0,10,.7),0 0 0 8px rgba(232,0,10,.12)}
}

/* --- Static pages --- */
.static-wrap{max-width:840px;margin:0 auto;padding:72px 24px}
.static-wrap h1{margin-bottom:20px}
.static-wrap p,.static-wrap li{color:var(--mid);margin-bottom:13px;line-height:1.75}
.static-wrap h2{margin:32px 0 12px;font-size:1.55rem}

/* --- Thank you --- */
.ty-wrap{min-height:78vh;display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;padding:56px 24px;gap:18px}
.ty-wrap .mi-lg{font-size:3.8rem;color:var(--red)}
.ty-wrap h1{color:var(--red)}
.ty-wrap p{color:var(--mid);max-width:480px;font-size:1rem}

/* --- Responsive --- */
@media(max-width:768px){
  .js-sitelinks{display:none}
  .about-img-wrap::before{display:none}
  .form-row{grid-template-columns:1fr}
  .testi-card{flex-direction:column}
  .banner-content{margin:0 auto}
  .sticky-call{width:calc(100% - 32px);justify-content:center}
}
@media(max-width:420px){
  .header-cta span:not(.mi){display:none}
}