/* ==========================================================================
   Hiring — v3 "Bold narrative" (dark hero, asymmetric culture, editorial)
   Extends css/site.css (the shared Salla Developers chrome + component set).
   ========================================================================== */

/* ---------- bold dark hero -------------------------------------------------- */
.hi-bold {
  background: linear-gradient(160deg, hsl(191 78% 14%), hsl(191 60% 9%));
  color: hsl(0 0% 90%);
  padding-block: clamp(4.5rem, 11vw, 8rem);
}
.hi-bold__inner { max-width: 46rem; }
.hi-bold .eyebrow--on-dark { margin-bottom: 1.1rem; }
.hi-bold__h1 {
  color: #fff; font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.06; margin: 0;
}
.hi-bold__lead { margin-top: 1.5rem; font-size: 1.15rem; color: hsl(0 0% 100% / .78); max-width: 34rem; }

/* ---------- timeline --------------------------------------------------------- */
.timeline { list-style: none; max-width: 44rem; }
.timeline__row {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem;
  padding-block: 1.5rem; border-top: 1px solid var(--border-soft);
}
.timeline__row:first-child { border-top: 0; padding-top: 0; }
.timeline__time { font: 700 .95rem/1 var(--s-font-mono); color: hsl(var(--primary-400)); padding-top: .2rem; }
.timeline__row h3 { font-size: 1.1rem; }
.timeline__row p { margin-top: .5rem; font-size: .95rem; color: var(--text-muted); }

/* ---------- asymmetric culture cards ------------------------------------------ */
.asym { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.15rem; align-items: stretch; }
.asym__big { display: flex; flex-direction: column; justify-content: center; }
.asym__big h3 { font-size: 1.45rem; margin-top: .2rem; }
.asym__big p { margin-top: .85rem; font-size: 1.02rem; }
.asym__stack { display: grid; gap: 1.15rem; }
@media (max-width: 880px) { .asym { grid-template-columns: 1fr; } }

/* ---------- quotes ------------------------------------------------------------- */
.quote {
  margin: 0; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-xl);
  padding: 1.6rem; box-shadow: var(--shadow-xs);
}
.quote p { font-size: 1.02rem; color: var(--heading); line-height: 1.5; }
.quote p::before { content: "\201C"; } .quote p::after { content: "\201D"; }
.quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .85rem; color: var(--text-muted); font-weight: 600; }

/* ---------- perk strip ---------------------------------------------------------- */
.perk-strip { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.perk {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-full);
  padding: .7rem 1.25rem; font-weight: 600; font-size: .92rem; color: var(--heading);
}
.perk .hgi { color: hsl(var(--primary-400)); font-size: 1.2rem; }
.dark .perk .hgi { color: var(--accent); }

/* ---------- roles (shared list styling) ---------------------------------------- */
.role-list { display: grid; gap: .7rem; }
.role {
  position: relative; display: grid; grid-template-columns: 1fr auto 1.4rem; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg);
  padding: 1.1rem 1.3rem;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.role:hover { transform: translateX(3px); border-color: hsl(var(--primary-300)); box-shadow: var(--shadow-xs); text-decoration: none; }
.role__title { font-weight: 700; color: var(--heading); }
.role__meta { font-size: .84rem; color: var(--text-muted); white-space: nowrap; }
.role__go { color: hsl(var(--primary-400)); font: 700 1.05rem/1 var(--s-font-mono); text-align: right; }
.role__go::after { content: "\2192"; }
@media (max-width: 640px) {
  .role { grid-template-columns: 1fr; gap: .3rem; }
  .role__go { display: none; }
}