/* =========================================================================
   Speedfarm — global styles
   Design tokens + shared nav/footer/CTA + responsive shell
   ========================================================================= */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --w:#f7f6f3;
  --c:#efeee9;
  --k:#181816;
  --km:#585850;
  --kl:#a4a39c;
  --r:#db391d;
  --rule:rgba(24,24,22,0.09);
  --rule-k:rgba(255,255,255,0.07);
  --sans:'Helvetica Neue',Arial,sans-serif;
  --serif:'Georgia','Times New Roman',serif;
}

html{font-size:16px}
body{background:var(--w);color:var(--k);font-family:var(--sans);overflow-x:hidden}

/* ─── NAV ─── */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;height:56px;background:var(--w);
  border-bottom:0.5px solid var(--rule);
  position:sticky;top:0;z-index:100
}
.nav-logo{
  font-family:Arial,sans-serif;font-size:20.88px;letter-spacing:0.02em;
  text-transform:uppercase;color:var(--k);font-weight:700;
  text-decoration:none
}
.nav-links{display:flex;gap:0}
.nav-links a{
  font-family:var(--sans);font-size:12px;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--kl);text-decoration:none;
  padding:0 18px;border-left:0.5px solid var(--rule);
  line-height:56px
}
.nav-links a:last-child{border-right:0.5px solid var(--rule)}
.nav-links a:hover{color:var(--k)}
.nav-links a.active{color:var(--k)}

/* hamburger (hidden on desktop) */
.nav-menu-btn{
  display:none;background:none;border:none;cursor:pointer;
  padding:8px;margin-right:-8px;
  flex-direction:column;gap:5px
}
.nav-menu-btn span{
  display:block;width:20px;height:1px;background:var(--k);
  transition:all 0.25s ease
}
.nav-menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-menu-btn.open span:nth-child(2){opacity:0}
.nav-menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer (hidden on desktop) */
.nav-drawer{
  display:none;
  position:fixed;top:56px;left:0;right:0;bottom:0;
  background:var(--w);z-index:99;
  transform:translateX(100%);transition:transform 0.3s ease;
  border-top:0.5px solid var(--rule);
  overflow-y:auto
}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer a{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:0.5px solid var(--rule);
  font-family:var(--sans);font-size:13px;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--k);text-decoration:none;
  min-height:48px
}
.nav-drawer a.active{color:var(--r)}
.nav-drawer-arrow{
  width:16px;height:1px;background:var(--kl);
  position:relative;flex-shrink:0
}
.nav-drawer-arrow::after{
  content:'';position:absolute;right:0;top:-3px;
  width:6px;height:6px;
  border-right:1px solid var(--kl);border-top:1px solid var(--kl);
  transform:rotate(45deg)
}

/* ─── CTA ─── */
.cta{
  font-family:var(--sans);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--k);text-decoration:none;
  display:inline-flex;align-items:center;gap:16px
}
.cta-line{
  display:inline-block;width:20px;height:1px;
  background:var(--k);flex-shrink:0;
  transition:background 0.2s ease
}
.cta:hover .cta-line{background:var(--r)}

.cta-light{
  font-family:var(--sans);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:#d8d7cf;text-decoration:none;
  display:inline-flex;align-items:center;gap:16px
}
.cta-light-line{
  display:inline-block;width:20px;height:1px;
  background:var(--r);flex-shrink:0;
  transition:background 0.2s ease
}
.cta-light:hover .cta-light-line{background:#fff}

/* ─── SECTION SHELLS ─── */
.s{padding:72px 52px;border-top:0.5px solid var(--rule)}
.s-c{padding:72px 52px;border-top:0.5px solid var(--rule);background:var(--c)}
.s-k{padding:60px 52px;background:var(--k)}

.lbl{
  font-family:var(--sans);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--kl);margin-bottom:48px
}
.lbl-k{
  font-family:var(--sans);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:#484840;margin-bottom:40px
}

.hero-rule{width:20px;height:1px;background:var(--r);margin-bottom:14px}

/* ─── TRACTOR ─── */
.tractor{
  position:absolute;right:0;height:60px;
  opacity:0.8;pointer-events:none;line-height:0;
  z-index:1
}
.tractor img{height:60px;width:auto;display:block}
.s > .tractor, .s-c > .tractor, .contact-panel > .tractor{right:52px}

/* ─── FOOTER ─── */
footer{
  padding:32px 52px;border-top:0.5px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
  position:relative
}
.f-logo{
  font-family:Arial,sans-serif;font-size:12px;letter-spacing:0.02em;
  text-transform:uppercase;color:var(--kl);font-weight:700;
  text-decoration:none
}
.f-links{display:flex;gap:24px}
.f-links a{
  font-family:var(--sans);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--kl);text-decoration:none
}
.f-links a:hover{color:var(--k)}
.f-copy{font-family:var(--sans);font-size:11px;color:#c0bfb8}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width:1024px){
  .nav{padding:0 32px}
  .s,.s-c{padding:56px 32px}
  .s-k{padding:48px 32px}
  footer{padding:28px 32px}
  .s > .tractor, .s-c > .tractor, .contact-panel > .tractor{right:32px}
}

@media (max-width:768px){
  .nav{padding:0 24px;height:52px}
  .nav-logo{font-size:19.68px}
  .nav-links{display:none}
  .nav-menu-btn{display:flex}
  .nav-drawer{display:block;top:52px}

  .s,.s-c{padding:48px 24px}
  .s-k{padding:40px 24px}
  footer{
    padding:28px 24px;flex-direction:column;align-items:flex-start;gap:20px
  }
  .f-links{flex-wrap:wrap;gap:16px 24px}

  .lbl,.lbl-k{margin-bottom:32px}

  .tractor{
    position:relative;right:auto !important;bottom:auto !important;
    height:auto;padding:32px 0;display:block
  }
  .tractor img{margin:0 auto}

  /* ensure CTA targets are 44px+ */
  .cta,.cta-light{min-height:44px;align-items:center}
}