:root{
  --gold:#E8A317;
  --red:#E25050;
  --ink:#1a1a1a;
  --grey:#7A7A7A;
  --border:#E5E5E5;
  --slate:#6c757d;
  --font:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);line-height:1.6;background:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1050px;margin:0 auto;padding:0 20px}

/* ---- Hero ---- */
.hero{
  background:linear-gradient(rgba(92,94,86,.55),rgba(92,94,86,.55)),
    url("../assets/road-marking.jpg");
  background-size:cover;background-position:center;
  text-align:center;color:#fff;padding:60px 20px 80px;
}
.hero .logo{width:500px;height:500px;max-width:60%;margin:0 auto 34px;object-fit:contain}
.hero .tagline{font-size:39px;font-weight:400;line-height:1.2}
.hero .headline{
  font-family:'Heebo',var(--font);font-size:85px;font-weight:800;letter-spacing:1px;margin-top:6px;
  text-shadow:0 4px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}

/* ---- Now Hiring bar ---- */
.hiring-wrap{padding:0}
.hiring{
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:26px;padding:20px 40px;
}
.hiring .now{color:var(--gold);font-weight:800;text-transform:uppercase;
  font-size:22px;letter-spacing:.5px;white-space:nowrap}
.hiring .msg{font-size:24px}
.hiring .apply{background:var(--red);color:#fff;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:1px;padding:14px 28px;border-radius:3px;
  white-space:nowrap}

/* ---- Intro ---- */
.intro{padding:40px 20px 90px}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  max-width:1050px;margin:0 auto}
.intro-imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.intro-imgs img{width:100%;height:360px;object-fit:cover}
.intro-imgs img:first-child{height:330px}
.intro-imgs img:last-child{height:300px}
.eyebrow{color:var(--gold);font-weight:700;font-size:15px;margin-bottom:14px}
.intro h2{font-size:33px;font-weight:700;margin-bottom:20px}
.intro p{color:var(--grey);font-size:15px;line-height:1.8}

/* ---- Services ---- */
.services{padding:20px 20px 100px;text-align:center}
.services h2{font-size:38px;font-weight:700;margin-bottom:22px}
.services .lead{max-width:640px;margin:0 auto 50px;color:var(--grey);font-size:15px;line-height:1.9}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:900px;margin:0 auto}
.svc{border:1px solid var(--border);padding:52px 20px;display:flex;flex-direction:column;
  align-items:center;gap:26px;transition:box-shadow .2s}
.svc:hover{box-shadow:0 8px 26px rgba(0,0,0,.08)}
.svc svg{width:52px;height:52px;stroke:var(--gold);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.svc .name{font-size:18px;font-weight:600}

/* ---- Get in touch ---- */
.contact{padding:110px 20px;text-align:center;position:relative;overflow:hidden}
.contact .map{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.5;pointer-events:none}
.contact .map svg{width:75%;max-width:820px;height:auto;fill:#d8d8d8}
.contact .inner{position:relative;z-index:1}
.contact h2{font-size:38px;font-weight:700;margin-bottom:16px}
.contact p{color:var(--grey);font-size:15px;margin-bottom:34px}
.contact .email-btn{background:var(--slate);color:#fff;font-size:15px;
  padding:14px 26px;border-radius:3px;display:inline-block}
.contact .email-btn:hover{background:#5a6169}

/* ---- Footer ---- */
footer{background:var(--ink);color:#9a9a9a;text-align:center;padding:24px 20px;font-size:13px}

/* ---- Page Hero (inner pages) ---- */
.page-hero{padding:160px 0 60px;background:var(--ink);text-align:center}
.page-hero h1{font-size:48px;color:#fff;font-weight:700}

/* ---- Careers ---- */
.careers-content{padding:60px 20px 100px;min-height:400px}
.paycor-embed{max-width:900px;margin:0 auto}

/* ---- Responsive ---- */
@media(max-width:820px){
  .hero .headline{font-size:48px}
  .hero .tagline{font-size:24px}
  .hero .logo{width:300px;height:300px}
  .intro-grid{grid-template-columns:1fr;gap:36px}
  .hiring{flex-direction:column;text-align:center;gap:14px;padding:20px}
  .hiring .now{font-size:18px}
  .hiring .msg{font-size:20px}
  .svc-grid{grid-template-columns:1fr}
  .page-hero{padding:120px 0 40px}
  .page-hero h1{font-size:36px}
}