:root{
  --accent:#ff7a00;
  --dark:#111;
  --muted:#6b6b6b;
  --bg:#f5f5f7;
  --card:#ffffff;
  --max-width:1200px;
  --radius:12px;
  --gap:28px;
  --ff-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--ff-sans);
  margin:0;
  color:var(--dark);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.container{max-width:var(--max-width);margin:0 auto;padding:40px 24px;}

.header {
  background:transparent;
  border:none;
}
.header .container.header-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 22px 8px 0 8px;
}
.logo .mark img {
  height: 52px;
  width: 52px;
  display: block;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 110px;
}

/* === Header bar layout: logo - get quote - hamburger === */
.header-bar {
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 6px 24px rgba(44, 58, 76, 0.11);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 4px;    
  width: fit-content;
  min-width: 100px;
  flex: 1;
  justify-content: space-between;
}

.header-bar .cta {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 20px;
  border: none;
  box-shadow: 0 4px 14px rgba(255,122,0,0.07);
  font-size: 1rem;
  transition: background .18s;
  white-space: nowrap;
}
.header-bar .cta:hover,
.header-bar .cta:focus {
  background: #ff9900;
  color: #fff;
}
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: transparent;
  border: none;
  margin-left: 8px;
}
.hamburger span {
  display:block;
  width:26px;height:3px;
  border-radius:3px;
  margin:4px 0;
  background:var(--dark);
  transition:.2s;
}

/* Nav pills (desktop) */
.nav {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav a {
  color: var(--dark);
  text-decoration: none;
  border: none;
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 1rem;
  box-shadow: 0 2px 9px rgba(44,58,76,0.08);
  transition: background 0.18s, color 0.18s;
  outline: none;
  position: relative;
  white-space: nowrap;
}
.nav a:hover,
.nav a:focus {
  background: #f5f5f7;
  color: var(--accent);
}
.nav a.cta { display: none; } /* Only show 'Get Quote' pill in header-bar */

/* Remove native underline everywhere */
a {color:inherit;text-decoration: none;}
a:focus{outline: none;}

/* ---------------------------
     Mobile nav (dropdown)
-----------------------------*/

@media (max-width: 900px) {
  .header .container.header-flex {
    flex-direction: row;
    gap: 10px;
    padding: 7px 2vw 0 2vw;
  }
  .logo .mark img { height:36px; width:36px;}
  .logo {gap:8px;}
  .header-bar {padding:8px 7px;}
}

/* Hide nav on small screens, show hamburger */
@media (max-width:720px){
  .container{padding:15px;}
  .header .container.header-flex{flex-direction:row;gap:11px;align-items:center;padding:7px 1vw 0 1vw;}
  .header-bar {
    width: 100%;
    min-width: 0;
    padding:7px 7px;
    border-radius:18px;
    gap:8px;
    justify-content:space-between;
  }
  .nav {
    display: none;
    position: absolute;
    top:64px;
    right:16px;
    background: #fff;
    border-radius:22px;
    box-shadow: 0 8px 32px rgba(44,58,76,0.15);
    flex-direction: column;
    align-items: flex-start;
    min-width: 160px;
    z-index:1111;
    padding:26px 18px 12px 18px;
    animation: navPop 0.25s;
  }
  .nav.open { display: flex; }
  /* Make pills full-width on mobile */
  .nav a{width:100%;padding:12px 0;text-align:left;margin-bottom:4px;box-shadow: none;}
  .nav a.cta {display:none;}
  .hamburger { display: flex; }
}
@keyframes navPop {
  from {opacity:0; transform:translateY(-12px);}
  to {opacity:1; transform:translateY(0);}
}

/* Menu open hamburger style */
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translateY(8px);}
.hamburger.open span:nth-child(2) {opacity:0;}
.hamburger.open span:nth-child(3) {transform:rotate(-45deg) translateY(-8px);}


/* HERO and below: same as before... */
.hero{
  display:grid;
  grid-template-columns:1fr 500px;
  gap:40px;
  align-items:center;
  padding:48px 0;
}
.hero img {
  width: 100%;
  display: block;
  border-radius: 0; /* Remove rounded corners */
  box-shadow: none; /* Remove shadow */
}

.hero h1{ font-size:46px; margin:0 0 16px; line-height:1.05; font-weight:800;}
.hero p.lead{color:var(--muted);margin:0 0 24px;max-width:640px;}
.kpis{display:flex;gap:15px;margin-top:14px;}
.kpi{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,15,15,0.04);min-width:90px;text-align:center;}
.kpi .num{font-weight:700;font-size:19px;}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:#f0f0f0;color:var(--dark)}

.section{padding:48px 0;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.service-card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 6px 20px rgba(15,15,15,0.04);}
.service-card h4{margin:8px 0 10px;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;}
.partners{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.partner{opacity:0.8;filter:grayscale(1);}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.test{background:var(--bg);padding:24px;border-radius:12px;}
.footer{background:#111;color:#fff;padding:40px 24px;}
.footer .container{display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap;}
.footer a{color:#fff;}
.form-card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 12px rgba(10,10,10,0.04);}
.field{display:flex;flex-direction:column;margin-bottom:12px;}
.field label{font-size:13px;margin-bottom:8px;color:var(--muted)}
.field input,.field textarea,.select{padding:12px;border-radius:8px;border:1px solid #e5e5e5;font-family:inherit}
textarea{min-height:120px;resize:vertical}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:32px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .testimonials{grid-template-columns:repeat(2,1fr);}
  .header .container.header-flex {flex-direction: row;gap:10px;align-items: center;}
  .header-bar {width:100%;margin:0;padding:14px 8px;}
  .logo {justify-content: center;}
  .logo .mark img {height:38px;width:38px;}
}
@media (max-width: 720px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .header .container.header-flex {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 0;
  }
}
 @media (max-width: 720px) {
  /* Make hero stack vertically instead of two columns */
  .hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Scale down and center the crane image */
  .hero img {
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 480px) {
  .hero img {
    max-width: 65%;
  }
}