/* Hire From Us: phones and tablets (up to 960px) */
.hf-mob { display: none; }

/* Form privacy note: no "Privacy Policy" link, always one row, sized to the form */
form:has(> .spk-consent) { container-type: inline-size; }
.spk-consent a { display: none !important; }
.spk-consent { white-space: nowrap !important; overflow: hidden; text-overflow: clip; font-size: min(12px, calc(100cqi / 27)) !important; }

@media (max-width: 960px) {
  .hf-desk { display: none !important; }
  .hf-mob { display: inline; }

  /* Hero: "Hire people who can" / "do the job on day one" - two rows filling the width; sentence in two rows */
  .hero-grid > div:first-child { container-type: inline-size; min-width: 0; }
  .hf-h1 { letter-spacing: -0.02em !important; line-height: 1.12 !important; max-width: none !important; font-size: min(56px, calc(100cqw / 10.2)) !important; }
  .hf-h1 .hf-row { display: block; white-space: nowrap; }
  .hero .lede { max-width: none !important; line-height: 1.5 !important; font-size: min(17px, calc(100cqw / 22.6)) !important; }
  .hero .lede .hf-nb { display: block; white-space: nowrap; }
  .hero .lede .hf-mob { white-space: nowrap; }

  /* Hero buttons: side by side in one row, equal widths, labels on one line */
  .hero-actions { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; }
  .hero-actions .btn { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center; white-space: nowrap; padding-left: 10px !important; padding-right: 10px !important; font-size: min(15px, calc((100cqw - 48px) / 19.2)) !important; }
  .hero-actions .btn svg { flex: none; width: 1em; height: 1em; }

  /* Hero stats: three equal cards, big number on top, one-row label under it */
  .hero-meta { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: calc(20px + (100vw - 320px) * 0.0138) !important; padding: 0 !important; border: 0 !important; }
  .hero-meta .m { container-type: inline-size; min-width: 0; display: flex !important; flex-direction: column; align-items: center; text-align: center; margin: 0 !important; padding: calc(12px + (100vw - 320px) * 0.0138) 6px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
  .hero-meta .m::before, .hero-meta .m::after { display: none !important; }
  .hero-meta .m b { display: block; white-space: nowrap; line-height: 1.05 !important; letter-spacing: -0.02em; font-size: min(30px, calc(100cqi / 3.8)) !important; }
  .hero-meta .m span { display: block; margin-top: 6px !important; white-space: nowrap; line-height: 1.3 !important; font-size: min(13px, calc(100cqi / 6.4)) !important; }
  .hero-meta .m span span { margin: 0 !important; }

  /* Stats band: four equal cards (2 x 2 on phones, one row of 4 on tablets), big number, one-row label */
  .stats-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
  .stats-grid .stat { container-type: inline-size; min-width: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: 0 !important; padding: calc(16px + (100vw - 320px) * 0.0138) 8px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px; background: rgba(255, 255, 255, 0.04); }
  .stats-grid .stat::before, .stats-grid .stat::after { display: none !important; }
  .stats-grid .stat > b { display: block; white-space: nowrap; line-height: 1.05 !important; letter-spacing: -0.02em; font-size: min(40px, calc(100cqi / 3.8)) !important; }
  .stats-grid .stat > span { display: block; margin-top: 8px !important; white-space: nowrap; line-height: 1.3 !important; font-size: min(14px, calc(100cqi / 10)) !important; }

  /* Why SkillParkho sentence: two rows, each on one line */
  .sec-head { container-type: inline-size; }
  .sec-head p.hf-two { max-width: none !important; line-height: 1.5 !important; font-size: min(17px, calc(100cqi / 23.5)) !important; }
  .sec-head p.hf-two .hf-r { display: block; white-space: nowrap; }

  /* Why hire: compact cards in a grid, nothing slides or stacks */
  .why-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  .why-card, .why-card:nth-child(n) { position: relative !important; top: auto !important; margin: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; align-items: flex-start; padding: calc(16px + (100vw - 320px) * 0.0138) calc(14px + (100vw - 320px) * 0.0138) !important; border-radius: 16px !important; background: var(--navy-2) !important; border: 1px solid var(--line) !important; }
  .why-card .ic { width: calc(38px + (100vw - 320px) * 0.0138) !important; height: calc(38px + (100vw - 320px) * 0.0138) !important; border-radius: 11px !important; margin-bottom: calc(12px + (100vw - 320px) * 0.0069) !important; }
  .why-card .ic svg { width: 52% !important; height: 52% !important; }
  .why-card h3 { margin-bottom: 6px !important; line-height: 1.25 !important; text-wrap: balance; font-size: calc(15px + (100vw - 320px) * 0.0086) !important; }
  .why-card p { line-height: 1.45 !important; text-wrap: pretty; font-size: calc(13px + (100vw - 320px) * 0.0052) !important; }

  /* Talent Pool tracks: compact cards - big number and short title on one row, one line, skill tags; nothing slides or stacks */
  .track-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .track, .track:nth-child(n) { position: relative !important; top: auto !important; margin: 0 !important; box-shadow: none !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: start; padding: calc(16px + (100vw - 320px) * 0.0138) !important; border-radius: 16px !important; }
  .track .num { grid-column: 1; grid-row: 1; font-size: calc(22px + (100vw - 320px) * 0.0103) !important; line-height: 1 !important; letter-spacing: 0 !important; }
  .track h3 { grid-column: 2; grid-row: 1; margin: 0 !important; white-space: nowrap; line-height: 1.2 !important; font-size: calc(17px + (100vw - 320px) * 0.0086) !important; }
  .track p { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 12px !important; line-height: 1.45 !important; font-size: calc(14px + (100vw - 320px) * 0.0052) !important; }
  .track .skills { grid-column: 1 / -1; grid-row: 3; gap: 6px !important; }
  .track .tag { padding: 4px 8px !important; font-size: calc(11px + (100vw - 320px) * 0.0026) !important; }
}
@media (max-width: 599px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .track-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
}
/* "Four tracks" / "Ready to hire": same two-row heading as "Trained for the role" / "Not just certified" */
@media (max-width: 720px) {
  #tracks .sec-head h2, #how .sec-head h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem) !important; white-space: normal !important; }
}
@media (max-width: 720px) {
  /* How It Works timeline: the desktop top rule must not run behind each step title */
  #how .step::before { content: none !important; display: none !important; }
}
@media (max-width: 360px) {
  #tracks .sec-head h2, #how .sec-head h2 { font-size: 1.6rem !important; }
}
/* Tablets: Talent Pool sentence on one row */
@media (min-width: 600px) and (max-width: 960px) {
  #tracks .sec-head p { max-width: none !important; white-space: nowrap !important; font-size: min(17px, calc(100cqi / 45)) !important; }
}
@media (max-width: 599px) {
  #why .sec-head h2 .ln, #tracks .sec-head h2 .ln, #how .sec-head h2 .ln { display: block; }
  /* one size for all three, small enough that "From Learning to Earning" stays on one row */
  #why .sec-head h2, #tracks .sec-head h2, #how .sec-head h2 { font-size: min(1.85rem, calc((100vw - 36px) / 11.8)) !important; }
}
@media (max-width: 699px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
}