:root{
  --brand-orange:#F36A14;
  --brand-green:#25C04E;
  --ink:#0F172A;
  --muted:#64748B;
  --bg:#FFFFFF;
  --soft:#F6F8FB;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--brand-green);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:clamp(16px,2.5vw,28px)}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #EEF2F7;z-index:20}
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:110px;height:auto}
.brand .name{font-weight:800;letter-spacing:.4px}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:var(--ink);font-weight:600}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:2px solid transparent}
.btn.primary{background:var(--brand-green);color:#fff}
.btn.secondary{border-color:var(--brand-green);color:var(--brand-green);background:#fff}
/* Taller hero with real PAT tester photo */
.hero{
  position:relative;
  padding:96px 0 72px;
  color:var(--ink);
  background-image:url('hero-pat-photo.png');
  background-size:cover;
  background-position:center;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
  pointer-events:none;
}
.service-icon-wrap {
  display: flex;
  justify-content: justify;
  margin-bottom: 8px;
}

.service-icon {
  width: 24px;
  height: 24px;
  color: #ff6600; /* match other service icons here */
}

/* optional: if other cards tint icons on hover */
.card.service:hover .service-icon {
  transform: translateY(-2px);
}

.hero .container{position:relative; z-index:1}
.hero h1{font-size:clamp(24px,3.8vw,40px);line-height:1.25;margin:.2em 0}
.kicker{color:var(--brand-green);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.banner{border-radius:16px;background:linear-gradient(90deg,rgba(243,106,20,.10),rgba(37,192,78,.10));padding:14px 16px;border:1px solid #EEF2F7}
.section{padding:56px 0}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid #EEF2F7;border-radius:16px;padding:20px;background:#fff;box-shadow:0 6px 20px rgba(2,8,23,.04)}
.card h3{margin:.3em 0; display:flex; align-items:center}
.list{margin:0;padding-left:1.2rem}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(37,192,78,.12);color:var(--brand-green);font-weight:700;font-size:.9rem}
.pricing{background:var(--soft);}
.pricing .pricing-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.pricing .pricing-header h2{margin:0}
.pricing-card{border:1px solid #E8EEF7;border-radius:18px;padding:22px;background:#fff;box-shadow:0 12px 24px rgba(2,8,23,.05);max-width:720px}
.price-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:6px}
.price{flex:1;min-width:240px;border-left:4px solid var(--brand-orange);padding-left:12px}
.price h3{margin:.2em 0}
.price-note{color:var(--muted);margin-top:4px}
.cta-row{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
.footer{border-top:1px solid #EEF2F7;background:#fff;color:var(--muted);padding:24px 0;margin-top:40px}
.footer .smallline{font-size:.9rem;color:var(--muted)}
label{font-weight:700}
input,textarea{width:100%;padding:12px 14px;border:1px solid #D6DFEA;border-radius:12px;font-size:16px}
form .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.small{font-size:.9rem;color:var(--muted)}
hr.soft{border:0;border-top:1px solid #EEF2F7;margin:24px 0}
@media (max-width:640px){
  .brand img{width:96px;}
  .hero{padding:72px 0 52px; background-position:center;}
}
.instant-quote-btn {
  display: inline-block;
  background: #ff7a00;       /* bright orange */
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 0px;
  transition: background 0.2s ease;
}

.instant-quote-btn:hover {
  background: #e86c00;       /* slightly darker orange on hover */
}