/* ==========================================================================
   /industries/hrms-for-security-agencies/ — the open layouts.

   Asked for on 2026-10-21 as "should not look boxy", so nothing here is a
   card: text sits on the section ground, held apart by hairlines, rules and
   space. Loaded by the page itself, not by style.css.
   ========================================================================== */

#hsf-why {
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
}


/* ---- Easier: a dark band, a ruled row of four, two columns ---- */

#hsf-easier .hsf-easier__head { max-width: 860px; }

.hsf-chores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .hsf-chores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hsf-chores__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px;
  text-align: center;
}

.hsf-chores__item + .hsf-chores__item { border-left: 1px solid rgba(255, 255, 255, 0.12); }

@media (max-width: 899px) {
  .hsf-chores__item:nth-child(3) { border-left: 0; }
  .hsf-chores__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

.hsf-chores__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #1552C7);
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.14), 0 14px 30px -14px rgba(59, 130, 246, 0.8);
  color: #FFFFFF;
}

.hsf-chores__icon svg { width: 24px; height: 24px; }

.hsf-chores__n {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #7FAEFF;
}

.hsf-chores__label {
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: #FFFFFF;
}

.hsf-easier__body {
  display: grid;
  gap: 18px 56px;
  max-width: 1080px;
  margin: 48px auto 0;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 900px) {
  .hsf-easier__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hsf-easier__body p {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 619px) {
  .hsf-chores__label { font-size: 16px; }
  .hsf-easier__body p { font-size: 16px; }
}

/* ---- Why: centred head, a ruled two-column list ---- */

.hsf-why__head { max-width: 760px; }

.hsf-why__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 64px;
  max-width: 1000px;
  margin: 44px auto 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 800px) {
  .hsf-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hsf-why__item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid #DFE7F4;
}

.hsf-why__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 50%;
  background: #1D6BF3;
  color: #FFFFFF;
}

.hsf-why__tick svg { width: 16px; height: 16px; stroke-width: 2.4; }

.hsf-why__name {
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: #14161D;
}

.hsf-why__text {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.6;
  color: #4A5568;
}

.hsf-why__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---- Built for: columns split by rules ---- */

.hsf-for {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

.hsf-for__item {
  padding: 28px 4px;
  border-top: 1px solid #DFE7F4;
}

.hsf-for__item:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 700px) {
  .hsf-for { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hsf-for__item { padding: 28px 32px; border-top: 0; }
  .hsf-for__item:first-child { padding-top: 28px; }
  .hsf-for__item:nth-child(2n) { border-left: 1px solid #DFE7F4; }
  .hsf-for__item:nth-child(n+3) { border-top: 1px solid #DFE7F4; }
}

@media (min-width: 1100px) {
  .hsf-for { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hsf-for__item { padding: 8px 30px; }
  .hsf-for__item:first-child { padding: 8px 30px 8px 0; }
  .hsf-for__item:last-child { padding-right: 0; }
  .hsf-for__item:nth-child(n+3) { border-top: 0; }
  .hsf-for__item + .hsf-for__item { border-left: 1px solid #DFE7F4; }
}

.hsf-for__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3B82F6, #1552C7);
  color: #FFFFFF;
  box-shadow: 0 10px 22px -12px rgba(21, 82, 199, 0.7);
}

.hsf-for__icon svg { width: 24px; height: 24px; }

.hsf-for__name {
  margin-top: 20px;
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: #14161D;
}

.hsf-for__text {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4A5568;
}

/* ---- Steps: a timeline ---- */

.hsf-line {
  --node: 44px;
  position: relative;
  display: grid;
  gap: 36px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.hsf-line__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}

.hsf-line__img {
  grid-column: 2;
  width: 96px;
  height: auto;
}

.hsf-line__node {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  background: #14161D;
  box-shadow: 0 0 0 2px #DDE1EC;
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  z-index: 1;
}

.hsf-line__body { grid-column: 2; margin-top: 12px; }

/* The dashed line, down the left on narrow screens. */
.hsf-line::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: calc(var(--node) / 2 - 1px);
  border-left: 2px dashed #A9C7F7;
}

@media (min-width: 900px) {
  .hsf-line {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 40px;
  }

  .hsf-line__step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .hsf-line__img { grid-column: 1; width: 120px; }

  .hsf-line__node { grid-column: 1; grid-row: auto; margin-top: 22px; }

  .hsf-line__body { grid-column: 1; margin-top: 18px; }

  /* Across the row at the nodes' height: image 96 + 22 gap + half a node. */
  .hsf-line::before {
    top: calc(96px + 22px + var(--node) / 2 - 1px);
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    border-left: 0;
    border-top: 2px dashed #A9C7F7;
  }
}

.hsf-line__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1D6BF3;
}

.hsf-line__name {
  margin-top: 6px;
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: #14161D;
}

.hsf-line__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #4A5568;
}

@media (min-width: 900px) {
  .hsf-line__text { max-width: 260px; margin-left: auto; margin-right: auto; }
}

/* ---- Closing CTA: the brief's question above the button ---- */

.hsf-cta__ask {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
  color: #14161D;
}

/* No heading ends on a lone word ("Simplify Your Everyday HR / Operations"). */
[id^="hsf-"] .hs-head__title,
[id^="hsf-"] .hs-cta__title,
#hsf-features .hs-feat__title { text-wrap: balance; }

/* Feature slider: card content starts at the top, so every card's heading
   sits on the same line instead of floating with its description length. */
#hsf-features .hs-feat__card {
  justify-content: flex-start;
  padding-top: 30px;
}

/* Why list: no rule under the last row (both columns at 800px+, one below). */
.hsf-why__item:last-child { border-bottom: 0; }

@media (min-width: 800px) {
  .hsf-why__item:nth-last-child(2) { border-bottom: 0; }
}

/* Why list with an odd count: the last point sits centred under the two
   columns instead of leaving a hole on the right. */
@media (min-width: 800px) {
  .hsf-why__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 32px);
  }

  .hsf-why__item:nth-last-child(2):nth-child(even) { border-bottom: 1px solid #DFE7F4; }
}

.hsf-why__head .hs-head__lead + .hs-head__lead { margin-top: 12px; }

/* Built for, three audiences: three columns, rules between. */
@media (min-width: 900px) {
  .hsf-for--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hsf-for--3 .hsf-for__item { padding: 8px 32px; border-top: 0; border-left: 0; }
  .hsf-for--3 .hsf-for__item:first-child { padding-left: 0; }
  .hsf-for--3 .hsf-for__item:last-child { padding-right: 0; }
  .hsf-for--3 .hsf-for__item + .hsf-for__item { border-left: 1px solid #DFE7F4; }
}

/* Hero H1 ("One HRMS for Your Entire Deployed Workforce"): even lines, no
   lone word. Safe unscoped, as only this page loads hsf.css. */
.hs-hero__title { text-wrap: balance; }

/* ---- Related pages: two link boxes (sections/hsf/related.php) ---- */

.hsf-related {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 44px auto 0;
}

@media (min-width: 800px) {
  .hsf-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hsf-related__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #F4F8FF 0%, #FFFFFF 100%);
  box-shadow: inset 0 0 0 1px #DCE7FA, 0 14px 30px -24px rgba(21, 82, 199, 0.6);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hsf-related__card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px #A9C7F7, 0 20px 36px -24px rgba(21, 82, 199, 0.7);
}

.hsf-related__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3B82F6, #1552C7);
  color: #FFFFFF;
}

.hsf-related__icon svg { width: 24px; height: 24px; }

.hsf-related__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hsf-related__title {
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #14161D;
}

.hsf-related__text {
  font-size: 15px;
  line-height: 1.55;
  color: #4A5568;
}

.hsf-related__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* arrow_icon() is a dark <img>, so the disc is light. */
  background-color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #CFE0FB;
  transition: transform 0.25s ease;
}

.hsf-related__go img { width: 14px; height: 10px; }

.hsf-related__card:hover .hsf-related__go { transform: translateX(3px); }

/* Icon on top (arrow across from it), then the title, then the line. */
.hsf-related__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hsf-related__card .hsf-related__body { gap: 8px; }
.hsf-related__card .hsf-related__title { font-size: 20px; }