/* www.staffingoscorp.com, rebuilt from the old Astra 4.13 + Elementor 4.3 home page.
   Values come from the live page's computed styles (tests/dump.js, 26 widths 320-1920 + iPhone,
   2026-10-26), and its own CSS: Elementor post-1464 / kit 1399, Astra's customizer output, WPForms
   "base" styles. Breakpoints are the old ones:
     <= 1024  Elementor tablet: hero stacks, section paddings shrink, contact column full width
     <= 768   Astra tablet: html font-size 91.2%, h1 40 / h2 35 / h3 24px, footer paddings
     <= 767   Elementor mobile: hero centred, cards one per row, section paddings
     <= 600   WPForms: fields full width
     <= 544   Astra mobile: h1 28 / h2 24 / h3 20px, h4 1.125rem
   Colours (Astra globals): green #54B435, dark green #379237, ink #0F172A, text #2F3B40,
   mint #EDFBE2, night #0C1406. Fonts: Inter 400 and Work Sans 600 only, as on the old site
   (bold is synthesised from them, as it was there). */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; background: #fff; color: #2F3B40;
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.6em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: 'Work Sans', sans-serif; font-weight: 600; color: #0F172A; margin: 0; }
h1 { font-size: 3rem; line-height: 1.4em; }
h2 { font-size: 2.625rem; line-height: 1.3em; }
h3 { font-size: 1.75rem; line-height: 1.3em; }
h4 { font-size: 1.25rem; line-height: 1.2em; }
p { margin: 0 0 1.6em; }
img { max-width: 100%; height: auto; display: block; }
a { color: #54B435; }

.skip-link { position: absolute; left: 6px; top: 7px; z-index: 100000; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden;
  background: #f1f1f1; color: #21759b; font-size: 14px; font-weight: 700; line-height: normal; padding: 15px 23px 14px; text-decoration: none; }
.skip-link:focus { clip: auto; width: auto; height: auto; }

/* ---- Header: logo only, over the hero (Astra's transparent header) ---------------------- */
.site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; padding: 1em 0; }
.site-head__logo { display: block; line-height: 1; color: #379237; }
.site-head__logo img { width: 250px; aspect-ratio: 3 / 2; height: auto; }

/* ---- Hero ----------------------------------------------------------------------------- */
.hero {
  position: relative; display: flex; min-height: 100vh; padding: 10px;
  background: url(img/hero-bg.jpg) center center / cover no-repeat;
  animation: op-fade-in 1.25s both;
}
.hero::before { content: ""; position: absolute; inset: 0; background: #0C1406; opacity: .8; }
.hero__inner { position: relative; display: flex; width: 100%; max-width: 1200px; margin: 0 auto; }
.hero__text { width: 45%; margin-top: 50px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.hero__side { width: 55%; padding: 10px; }
.hero h1, .hero__sub { color: #fff; text-align: start; }
.hero h1 { animation: op-fade-in-up 1.25s both; }

/* ---- Who We Are ----------------------------------------------------------------------- */
.who { background: #EDFBE2; padding: 100px 0; display: flex; justify-content: center; }
.who__box { width: 540px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; text-align: center; }
.who__text h4 { margin-bottom: 20px; }

/* ---- Why Businesses Choose Us --------------------------------------------------------- */
.why { background: #fff; padding: 100px 0 41px; }
.why__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.why h2 { width: 684px; max-width: 100%; text-align: center; }
.why__row { display: flex; width: 100%; padding: 10px; }
.why__row--1 { gap: 10px; margin-top: 50px; }
.why__row--2 { gap: 20px; }
.card { flex: 1 1 0; min-width: 0; background: #fff; text-align: center; transition: box-shadow .3s; }
.why__row--1 .card { padding: 30px; }
.why__row--2 .card { padding: 20px; }
.card:hover { box-shadow: 0 10px 30px 0 rgba(208, 216, 234, .3); }
.card__icon { display: block; width: 42px; height: 42px; line-height: 42px; margin: 0 auto 16px; }
.card__icon svg { display: block; width: 42px; height: 42px; fill: none; stroke: #54B435; stroke-width: 6.4; stroke-linecap: round; stroke-linejoin: round; }
.card h4 { margin-bottom: 20px; }

/* ---- Service and Commitment ----------------------------------------------------------- */
.svc { background: #EDFBE2; padding: 100px 0; }
.svc__inner { max-width: 750px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; text-align: center; }

/* ---- Contact -------------------------------------------------------------------------- */
.contact { background: #fff; padding: 20px 0; }
.contact__box { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; padding: 30px 0; }
.contact__col { width: 70%; display: flex; flex-direction: column; gap: 20px; }
.contact h3 { color: #54B435; }
.contact__form { margin-bottom: 26px; }

/* The form, as WPForms "base" styling with Astra's inputs and button. */
.cf__field { padding: 10px 0; position: relative; }
.cf__label { display: block; font-weight: 700; }
.cf__label .req { color: red; font-weight: normal; }
.cf__input {
  display: block; width: 100%; margin: 0; padding: .75em; border: 1px solid #ddd; border-radius: 2px;
  background: #fafafa; color: #666; font: inherit; line-height: inherit; box-shadow: none;
}
.cf__input:focus { outline: none; border-color: #54B435; }
.cf__input--medium { max-width: 60%; }
.cf__textarea { height: 120px; resize: vertical; }
.cf__input.is-invalid { border-color: #c00; }
.cf__error { display: block; color: #900; font-size: .9em; cursor: default; }
.cf__submit { padding-top: 40px; }   /* WPForms: 10px, plus the 30px Turnstile box above it */
.cf__submit button {
  font-family: inherit; font-size: .9375rem; font-weight: 400; line-height: 1; letter-spacing: 1px; text-transform: uppercase;
  color: #000; background: #54B435; border: 0 solid #54B435; border-radius: 6px; padding: 17px 35px; cursor: pointer;
}
.cf__submit button:hover, .cf__submit button:focus { color: #fff; background: #379237; }
.cf__submit button:disabled { opacity: .6; cursor: wait; }
/* WPForms shows only the per-field messages for a form with mistakes, and an error line in dark red
   when sending fails. After sending, the form is replaced by the confirmation, unstyled. */
.cf__status { color: #900; font-weight: 700; padding: 10px 0 8px; }
.cf__status--invalid { display: none; }
.cf__status--sent { color: inherit; font-weight: 400; padding: 0; }

/* ---- Footer --------------------------------------------------------------------------- */
.site-foot { background: #0F172A; }
.site-foot__top p, .site-foot__bottom p { color: #fff; }
.site-foot__top { background: #0C1406; border-top: 1px solid rgba(230, 230, 230, .57); padding: 80px 0; }
.site-foot__inner { max-width: 1200px; margin: 0 auto; }
.site-foot h2 { font-size: 1.375rem; font-weight: 400; line-height: 1.5; color: #fff; margin-bottom: 1em; text-align: left; }
.site-foot__top p { margin-bottom: 1.75em; }
.site-foot__bottom { background: #0C1406; border-top: 1px solid rgba(81, 86, 129, .72); padding: 20px 0; }
.site-foot__bottom .site-foot__inner { min-height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; }
.site-foot__bottom p { margin: 0; width: 100%; }

/* ---- Entrance animations (Elementor fadeIn on the hero, fadeInUp on its headline) -------- */
@keyframes op-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes op-fade-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero, .hero h1 { animation: none; } }

/* ---- Breakpoints ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero { flex-direction: column; justify-content: center; padding: 50px; }
  .hero__inner { flex-direction: column; justify-content: center; flex: 0 0 auto; }
  .hero__text { width: 65%; justify-content: flex-start; }
  .hero__side { width: 35%; }
  .who { padding: 50px 0; }
  .why { padding: 50px 30px; }
  .why__row .card { padding: 22px; }
  .svc { padding: 50px; }
  .contact { padding: 0 50px 50px; }
  .contact__box { padding: 20px 0 0; }
  .contact__col { width: 100%; }
}
@media (max-width: 768px) {
  html { font-size: 91.2%; }
  h1 { font-size: 40px; }
  h2 { font-size: 35px; }
  h3 { font-size: 24px; }
  .site-foot__top { padding: 50px 30px 20px; }
  .site-foot__top .site-foot__inner { padding-bottom: 10px; }   /* Astra: footer section margin 10px (no collapse there) */
  .site-foot__bottom p { margin-bottom: 10px; }                  /* the same margin, inside the centred 80px row */
}
@media (max-width: 767px) {
  .hero { padding: 38px 30px 30px; }
  .hero__text { width: 100%; margin-top: 0; }
  .hero__side { width: 100%; }
  .hero h1, .hero__sub { text-align: center; }
  .who { padding: 20px 0 40px; }
  .who__box { width: 100%; padding: 35px 25px 20px; }
  .why { padding: 60px 30px 30px; }
  .why h2 { width: 100%; }
  .why__row { flex-direction: column; gap: 0; }
  .why__row--1 { margin-top: 0; padding: 15px 15px 0; }
  .why__row--2 { padding: 0 15px 15px; }
  .why__row .card { flex: none; margin: 10px; padding: 25px; }
  .svc { padding: 60px 30px; }
  .svc__inner { max-width: 1200px; }
  .contact { padding: 10px 30px 30px; }
  .contact__box { padding: 15px 0; }
}
@media (max-width: 600px) {
  .cf__field { padding-left: 1px; padding-right: 1px; }
  .cf__input--medium { max-width: 100%; }
}
@media (max-width: 544px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  h4 { font-size: 1.125rem; }
  .site-foot h2 { font-size: 1.375rem; }
  .site-foot__bottom { padding: 20px 30px; }
}