:root { --mono: "JetBrains Mono", ui-monospace, monospace; }

/* === REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.pos-d1 { transition-delay: 0.1s; }
.pos-d2 { transition-delay: 0.2s; }
.pos-d3 { transition-delay: 0.3s; }

/* =====================
   HERO — COMPACT
   ===================== */
.pos-hero {
  background: #161719;
  padding: 160px 48px 100px;
  position: relative;
  overflow: hidden;
}

.pos-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(0,189,255,0.05) 0%, transparent 65%);
  pointer-events: none;
}


.pos-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.pos-hero__h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.9;
  color: #F4F4F4;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  opacity: 0;
  animation: posFadeUp 0.9s ease 0.35s forwards;
}

.pos-hero__h1 em {
  color: #00BDFF;
  font-style: normal;
  display: block;
}

.pos-hero__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #B0B2B5;
  max-width: 520px;
  opacity: 0;
  animation: posFadeUp 0.9s ease 0.5s forwards;
}

@keyframes posFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* =====================
   FILTER BAR
   ===================== */
.pos-filter {
  background: #0d1012;
  border-bottom: 1px solid rgba(244,244,244,0.07);
  position: sticky;
  top: 0;
  z-index: 50;
}

.pos-filter__wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 22px 48px;
  display: flex;
  justify-content: center;
}

/* Segmented control — the team selector */
.pos-seg {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  background: #161719;
  border: 1px solid rgba(244,244,244,0.1);
  border-radius: 999px;
  padding: 5px;
  max-width: 100%;
}

.pos-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F4F4F4;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.pos-seg__btn:hover { color: #F4F4F4; }

.pos-seg__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #F4F4F4;
  background: rgba(244,244,244,0.09);
  border-radius: 999px;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
  transition: color 0.2s, background 0.2s;
}

.pos-seg__btn.is-active {
  color: #0d1012;
  background: #00BDFF;
}

.pos-seg__btn.is-active .pos-seg__count {
  color: #00BDFF;
  background: #0d1012;
}

/* =====================
   GRID SECTION
   ===================== */
/* Matches the careers grid: cards are #161719, so the section behind them has
   to be darker or they dissolve into the page and only the 2px grid gaps read
   as edges. */
.pos-main {
  background: #0d1012;
  padding: 80px 0 120px;
}

.pos-main__wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
}

.pos-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F4F4F4;
  padding: 0 0 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pos-section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(0,189,255,0.3);
  flex-shrink: 0;
}

.pos-section-label[data-location-group] {
  margin-top: 56px;
}

.pos-section-label[data-location-group]:first-of-type {
  margin-top: 0;
}

/* Set by positions.js on the first VISIBLE label whenever the filter or the
   ATS data hides groups — :first-of-type above only covers the pre-filter
   state, a display:none label is still first-of-type. */
.pos-section-label.is-first-visible {
  margin-top: 0;
}

.pos-section-label--external::before {
  background: rgba(255,181,71,0.3);
}

/* Role cards — same as careers.html */
.pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0;
}

.car-role {
  background: #161719;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
  display: flex;
  flex-direction: column;
}

.car-role:hover { background: rgba(0,189,255,0.03); }

.car-role__dept {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #00BDFF;
  margin-bottom: 14px;
  display: block;
}

.car-role__title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.car-role__desc {
  font-family: 'Libre Franklin', sans-serif;
  line-height: 1.7;
  color: #B0B2B5;
  margin-bottom: 24px;
  flex: 1;
}

.car-role__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.car-role__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F4F4F4;
  border: 1px solid rgba(0,189,255,0.18);
  padding: 4px 12px;
}

.car-role__tag--location {
  color: rgba(0,189,255,0.65);
  border-color: rgba(0,189,255,0.28);
}

.car-role__tag--external {
  color: rgba(255,181,71,0.75);
  border-color: rgba(255,181,71,0.28);
}

.car-role__apply {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F4F4F4;
  background: rgba(244,244,244,0.06);
  border: 1.5px solid rgba(244,244,244,0.45);
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  border-radius: 0 24px 24px 24px;
  align-self: flex-start;
}

.car-role__apply:hover {
  background: #00BDFF;
  border-color: #00BDFF;
  color: #161719;
  transform: translateY(-2px);
}

/* About + Apply share a row; About is the quieter twin (dimmer border, no
   fill) — same modal, it just starts at the job post instead of the form. */
.car-role__ctas {
  display: flex;
  gap: 10px;
  align-self: flex-start;
}
.car-role__ctas .car-role__apply { align-self: auto; }
.car-role__about {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,244,244,0.75);
  background: transparent;
  border: 1.5px solid rgba(244,244,244,0.22);
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  border-radius: 0 24px 24px 24px;
}
.car-role__about:hover {
  border-color: rgba(0,189,255,0.6);
  color: #F4F4F4;
  transform: translateY(-2px);
}

/* Hidden when filtered out */
.car-role.is-hidden {
  display: none;
}

/* =====================
   FOOTER NOTE
   ===================== */
.pos-note {
  margin-top: 56px;
  font-family: 'Libre Franklin', sans-serif;
  line-height: 1.7;
  color: #B0B2B5;
  text-align: center;
}

.pos-note a {
  color: #00BDFF;
  text-decoration: none;
}

.pos-note a:hover { text-decoration: underline; }

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 960px) {
  .pos-hero { padding: 140px 32px 80px; }
  .pos-filter__wrap { padding: 18px 32px; }
  .pos-main__wrap { padding: 0 32px; }
  .pos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pos-hero { padding: 120px 24px 64px; }
  .pos-filter__wrap { padding: 16px; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pos-filter__wrap::-webkit-scrollbar { display: none; }
  .pos-seg { margin: 0 auto; }
  .pos-seg__btn { padding: 12px 16px; font-size: 11px; }
  .pos-main__wrap { padding: 0 24px; }
  .pos-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LIVE ROLES (Greenhouse) — see css/careers.css for the card rationale.
   ============================================================ */
.car-role--live .car-role__tags { margin-top: auto; }

.pos-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 32px;
}

.pos-status--error { color: #FF6B6B; text-transform: none; letter-spacing: 0.02em; }

/* Segment buttons are display:flex, which beats the plain [hidden] attribute —
   an empty segment must actually disappear, not sit there filtering to nothing. */
.pos-seg__btn[hidden] { display: none !important; }

/* Location reads as a subheader under the role title rather than competing in
   the tag row — it answers "where", while the tags answer "what kind of role". */
.car-role--live .car-role__title { margin-bottom: 8px; }

.car-role__loc {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(244,244,244,0.55);
  margin-bottom: 20px;
}

/* Internal = a role on the Jahnel Group team. External = a placement at a
   client or partner, already amber; internal takes the cyan house accent. */
.car-role__tag--internal {
  color: rgba(0,189,255,0.75);
  border-color: rgba(0,189,255,0.32);
}

/* Separator lines are drawn per-card rather than by a tint behind the grid gaps.
   The old approach painted the whole grid area, so any row that didn't fill
   completely (8 internal roles across 3 columns) left a visibly tinted empty
   cell once the section behind it went dark. A 1px ring on each card yields the
   same 2px lines between neighbours and nothing where there is no card — and it
   holds up at every breakpoint, unlike filler elements sized for 3 columns. */
/* Cards are tiles, not a lattice.
   While they sat flush with a 2px gap, every interior line was two cards'
   outlines meeting — reading double the weight of the perimeter, and thinner
   again beside an empty slot. Separating them lets each card own a complete
   border on all four sides, so nothing is shared and nothing can double. Holds
   at every breakpoint and with any number of ragged rows. */
.car-roles__grid,
.pos-grid {
  background: transparent;
  gap: 20px;
}

.car-role--live {
  box-shadow: 0 0 0 2px rgba(0,189,255,0.28);
  transition: background 0.3s, box-shadow 0.3s ease, transform 0.3s ease;
}

.car-role--live:hover {
  box-shadow: 0 0 0 2px rgba(0,189,255,0.6);
  transform: translateY(-3px);
}