/* ============================================================
   EYEBROW on the homepage and the other non-career pages.
   Same style as the career pages (see eyebrow.css): a short line on
   the left, then capitals in JetBrains Mono, in the SkillParkho red.
   No pill, box or background.
   ============================================================ */
html .spkfaq-eyebrow,
html .eyebrow,
html .reels-eyebrow,
html .g-eyebrow,
html .r-eyebrow,
html .ec-eyebrow,
html .fq-eyebrow,
html .about-hero__eyebrow,
html .story__eyebrow,
html .mv__eyebrow,
html .diff__eyebrow,
html .values__eyebrow,
html .cta__eyebrow{
  display:inline-flex !important;
  align-items:center;
  gap:8px !important;
  max-width:100%;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#EF4444 !important;
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.4;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
  white-space:normal !important;
}
html .spkfaq-eyebrow::before,
html .eyebrow::before,
html .reels-eyebrow::before,
html .g-eyebrow::before,
html .r-eyebrow::before,
html .ec-eyebrow::before,
html .fq-eyebrow::before,
html .about-hero__eyebrow::before,
html .story__eyebrow::before,
html .mv__eyebrow::before,
html .diff__eyebrow::before,
html .values__eyebrow::before,
html .cta__eyebrow::before{
  content:"" !important;
  display:block !important;
  position:static !important;
  flex-shrink:0;
  width:24px !important;
  height:2px !important;
  margin:0 !important;
  border-radius:3px;
  background:#EF4444 !important;
  box-shadow:none !important;
  opacity:1 !important;
  animation:none !important;
  transform:none !important;
}
html .spkfaq-eyebrow::after,
html .eyebrow::after,
html .reels-eyebrow::after,
html .g-eyebrow::after,
html .r-eyebrow::after,
html .ec-eyebrow::after,
html .fq-eyebrow::after,
html .about-hero__eyebrow::after,
html .story__eyebrow::after,
html .mv__eyebrow::after,
html .diff__eyebrow::after,
html .values__eyebrow::after,
html .cta__eyebrow::after{
  display:none !important;
}
/* Hero eyebrows that sit under a status pill need their own line above the heading */
html .hero-content > .eyebrow,
html .hero-copy > .eyebrow{
  display:flex !important;
  width:fit-content;
}
/* Success Stories and Placed Students centre their hero on smaller screens */
@media (max-width:860px){
  html .hero-copy > .eyebrow{ margin-inline:auto; }
}
@media (max-width:639px){
  html .spkfaq-eyebrow,
  html .eyebrow,
  html .reels-eyebrow,
  html .g-eyebrow,
  html .r-eyebrow,
  html .ec-eyebrow,
  html .fq-eyebrow,
  html .about-hero__eyebrow,
  html .story__eyebrow,
  html .mv__eyebrow,
  html .diff__eyebrow,
  html .values__eyebrow,
  html .cta__eyebrow{ font-size:11px !important; }
  html .spkfaq-eyebrow::before,
  html .eyebrow::before,
  html .reels-eyebrow::before,
  html .g-eyebrow::before,
  html .r-eyebrow::before,
  html .ec-eyebrow::before,
  html .fq-eyebrow::before,
  html .about-hero__eyebrow::before,
  html .story__eyebrow::before,
  html .mv__eyebrow::before,
  html .diff__eyebrow::before,
  html .values__eyebrow::before,
  html .cta__eyebrow::before{ width:16px !important; }
}
