/* HUM Staffing & HR Solutions — shared stylesheet */

:root{
  --navy-950:#091a33;
  --navy-900:#0e2a52;
  --navy-800:#163863;
  --navy-700:#1f4a82;
  --navy-500:#3f6aa0;
  --navy-300:#9fb8d9;
  --navy-100:#eaf0f8;
  --paper:#ffffff;
  --white:#ffffff;
  --amber-700:var(--navy-700);
  --amber-600:var(--navy-900);
  --amber-500:var(--navy-500);
  --amber-100:var(--navy-100);
  --ink:#1a2233;
  --muted:#5c6672;
  --line:#e6e2d8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Zilla Slab',serif;}
a{text-decoration:none;color:var(--navy-700);}
a:hover{color:var(--amber-600);}
img{max-width:100%;}
button{font-family:'Inter',sans-serif;}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  font-family:'Inter',sans-serif;
}
.site-nav-inner{
  max-width:1320px;margin:0 auto;padding:12px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-logo{display:flex;align-items:center;flex-shrink:0;}
.nav-logo img{height:40px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.nav-links > a, .nav-drop > .nav-drop-trigger{
  font:600 14.5px 'Inter';padding:10px 12px;display:inline-block;color:var(--navy-900);
}
.nav-links > a.active, .nav-drop.active > .nav-drop-trigger{
  font-weight:700;color:var(--amber-700);
}
.nav-cta{
  background:var(--amber-600);color:#fff;font:700 14px 'Inter';
  padding:11px 22px;border-radius:8px;white-space:nowrap;flex-shrink:0;
}
.nav-cta:hover{background:var(--amber-500);color:#fff;}
.nav-drop{position:relative;}
.nav-drop-panel-wrap{
  position:absolute;top:100%;left:0;padding-top:6px;
  display:none;
}
.nav-drop:hover .nav-drop-panel-wrap,
.nav-drop.open .nav-drop-panel-wrap{display:block;}
.nav-drop-panel{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(14,42,82,.16);padding:10px;min-width:250px;
  display:flex;flex-direction:column;
}
.nav-drop-panel a{
  padding:10px 12px;border-radius:8px;font:500 14px 'Inter';color:var(--ink);
}
.nav-drop-panel a:hover{background:var(--navy-100);color:var(--ink);}
.nav-drop-panel a.drop-cta{
  margin-top:4px;border-top:1px solid var(--line);padding-top:14px;
  font:700 13.5px 'Inter';color:var(--amber-700);
}
.nav-drop-panel a.drop-cta:hover{background:none;color:var(--amber-500);}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy-900);margin:5px 0;transition:.2s;}

@media (max-width:960px){
  .nav-links{
    display:none;position:fixed;top:65px;left:0;right:0;bottom:0;
    background:var(--white);flex-direction:column;align-items:stretch;gap:0;
    padding:12px 20px 40px;overflow-y:auto;
  }
  .nav-links.open{display:flex;}
  .nav-links > a, .nav-drop > .nav-drop-trigger{
    padding:16px 4px;border-bottom:1px solid var(--line);font-size:16px;
  }
  .nav-drop-panel-wrap{position:static;padding-top:0;}
  .nav-drop-panel{box-shadow:none;border:none;padding:0 0 0 14px;min-width:0;background:var(--navy-100);border-radius:8px;margin:6px 0;}
  .nav-drop-panel a{padding:12px;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav-links .nav-cta-mobile{
    display:inline-block;margin-top:16px;background:var(--amber-600);color:#fff;
    text-align:center;padding:14px;border-radius:8px;font:700 15px 'Inter';
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font:700 15px 'Inter';padding:16px 30px;border-radius:10px;
  border:none;cursor:pointer;
}
.btn-primary{background:var(--amber-600);color:#fff;}
.btn-primary:hover{background:var(--amber-500);color:#fff;}
.btn-secondary{background:var(--white);color:var(--navy-900);border:1px solid var(--line);}
.btn-secondary:hover{border-color:var(--navy-500);color:var(--navy-900);}
.btn-dark{background:var(--navy-900);color:#fff;}
.btn-dark:hover{background:var(--navy-800);color:#fff;}

/* ---------- Layout helpers ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 32px;}
.container-narrow{max-width:840px;margin:0 auto;padding:0 32px;}
.eyebrow{font:700 13px 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--amber-700);margin-bottom:16px;}
.section{padding:90px 32px;}
.section-tight{padding:70px 32px 30px;}
.section-bordered{border-top:1px solid var(--line);}
.section-white{background:var(--white);}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;}

/* Process timeline (numbered steps with connecting line) */
.timeline{position:relative;}
.timeline::before{
  content:"";position:absolute;top:22px;left:4%;right:4%;height:2px;background:var(--line);
}
.timeline-steps{position:relative;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.timeline-step{flex:1;min-width:180px;display:flex;flex-direction:column;gap:12px;}
.timeline-num{
  width:44px;height:44px;border-radius:50%;background:var(--navy-900);color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 15px 'Inter';
}

/* ---------- Tabs (Payroll model comparison) ---------- */
.tab-btn{
  padding:12px 20px;border-radius:10px;font:600 14px 'Inter';cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--navy-900);
}
.tab-btn.active{border-color:var(--navy-900);background:var(--navy-900);color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--line);padding:22px 0;}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;background:none;border:none;width:100%;text-align:left;padding:0;}
.faq-q-text{font:600 17px 'Zilla Slab';color:var(--navy-900);}
.faq-glyph{font:700 20px 'Inter';color:var(--amber-600);flex-shrink:0;}
.faq-a{margin-top:14px;font:400 15px/1.65 'Inter';color:var(--muted);display:none;}
.faq-item.open .faq-a{display:block;}

/* ---------- Contact form ---------- */
.toggle-btn{padding:12px 24px;border-radius:999px;font:700 14px 'Inter';cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--navy-900);}
.toggle-btn.active{border-color:var(--amber-600);background:var(--amber-600);color:#fff;}
.need-btn{padding:10px 20px;border-radius:999px;font:600 13.5px 'Inter';cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--navy-900);}
.need-btn.active{border-color:var(--navy-900);background:var(--navy-900);color:#fff;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font:600 13px 'Inter';color:var(--navy-900);}
.form-field input, .form-field textarea{
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;font:400 14.5px 'Inter';width:100%;
}
.form-honeypot{position:absolute;left:-9999px;opacity:0;}
.form-status{font:600 14px 'Inter';margin-top:14px;}
.form-status.error{color:#b3261e;}
.form-status.success{color:var(--navy-700);}

/* ---------- Footer ---------- */
.site-footer{
  font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);
  border-top:1px solid var(--line);padding:72px 32px 32px;
}
.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:44px;border-bottom:1px solid var(--line);
}
.footer-top img{height:46px;width:auto;display:block;}
.footer-tagline{font:italic 500 15px 'Zilla Slab',serif;color:var(--navy-700);margin-top:14px;}
.footer-desc{font:400 13.5px/1.6 'Inter';color:var(--muted);margin-top:10px;max-width:260px;}
.footer-col-title{font:700 13px 'Inter';margin-bottom:16px;color:var(--navy-900);}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font:400 13.5px 'Inter';color:var(--navy-700);}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-top:24px;align-items:center;
}
.footer-copy{font:400 13px 'Inter';color:var(--muted);}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;}
.footer-links a{font:400 13px 'Inter';color:var(--navy-700);}
.footer-social{display:flex;gap:12px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;background:var(--navy-100);
  display:flex;align-items:center;justify-content:center;color:var(--navy-900);flex-shrink:0;
}
.footer-social a:hover{background:var(--navy-900);color:#fff;}
.footer-social svg{width:18px;height:18px;fill:currentColor;}

@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed;bottom:24px;right:24px;z-index:200;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.whatsapp-float svg{width:30px;height:30px;fill:#fff;}
.whatsapp-float:hover{background:#1ebe57;}

/* ---------- Misc shared ---------- */
.chip{display:flex;align-items:center;gap:8px;background:var(--navy-100);border:1px solid var(--line);padding:10px 16px;border-radius:999px;font:600 13.5px 'Inter';}
.chip-dot{width:7px;height:7px;border-radius:50%;background:var(--amber-500);display:inline-block;}
.pill{background:var(--navy-100);color:var(--navy-700);padding:6px 14px;border-radius:999px;font:700 12px 'Inter';}

@media (max-width:640px){
  h1{font-size:32px !important;}
  h2{font-size:28px !important;}
  .section, .section-tight{padding-left:20px;padding-right:20px;}
  .container, .container-narrow{padding-left:20px;padding-right:20px;}
}