/* ==========================================================================
   /careers — hero card, open roles, perks, hiring steps, closing band. Prefix: cr-
   ========================================================================== */

/* keyword headline is three longer lines: sized to fit 320px */
.cr-hero .ph__h { font-size: clamp(2.1rem, 9vw, 4.6rem); }
@media (min-width: 1100px) { .cr-hero .ph__h { font-size: min(5.2vw, 5rem); } }

/* links inside running copy */
.cr-ln { color: var(--fg); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; transition: color .2s; }
.cr-ln:hover { color: var(--pink); }

/* ---------- hero card: the open roles at a glance ---------- */
.cr-card { gap: 14px; }
.cr-card__top { display: flex; justify-content: space-between; gap: 10px; color: var(--mut); }
.cr-card__top span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #111; }
.cr-card__ls { display: grid; gap: 6px; }
.cr-card__ls a { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px 10px 16px; border-radius: 16px; background: #f4f4f6; transition: background .3s, color .3s; }
.cr-card__ls a:hover { color: #fff; background: #111; }
.cr-card__t { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.cr-card__x { color: #66666f; }
.cr-card__ls a:hover .cr-card__x { color: #b4b4bd; }
.cr-card__ls .icon { width: 16px; height: 16px; transition: translate .35s var(--ease); }
.cr-card__ls a:hover .icon { translate: 3px 0; }
.cr-card__foot { display: flex; align-items: center; gap: 8px; color: var(--mut); }
.motion .cr-card__ls li { animation: hero-in .8s var(--ease) both; animation-delay: calc(.5s + var(--i) * 70ms); }

/* ---------- open roles ---------- */
.cr-count { display: inline-flex; align-items: baseline; gap: 10px; font-size: 11px; color: var(--mut); }
.cr-count b { font-family: var(--font); font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--fg); }
.cr-list { border-top: 1px solid var(--line); }
.cr-role { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) auto; align-items: start; gap: 20px clamp(28px, 4vw, 64px); padding: 34px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.cr-role__tag { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 10.5px; color: var(--mut); }
.cr-role__tag span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 10px; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line2); }
.cr-role__h { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; }
.cr-role__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cr-role__meta li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 10.5px; box-shadow: inset 0 0 0 1px var(--line2); }
.cr-role__meta .icon { width: 13px; height: 13px; }
.cr-role__body { display: grid; gap: 8px; }
.cr-role__lbl { font-size: 10.5px; color: var(--mut); }
.cr-role__lbl + * { margin-bottom: 10px; }
.cr-role__body > p { max-width: 58ch; font-size: 15.5px; }
.cr-role__sk { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-role__sk li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13.5px; background: var(--card); }
.cr-role__sk .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #111; background: var(--grad-warm); }
.cr-role__btn { align-self: center; }
.cr-role:target { background: linear-gradient(90deg, rgba(255, 122, 0, .06), transparent 60%); }
.cr-open { margin-top: 32px; font-size: 15.5px; color: var(--mut); }

/* ---------- why work here ---------- */
.cr-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cr-perk { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 26px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: translate .45s var(--ease), box-shadow .3s; }
.cr-perk:hover { translate: 0 -3px; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -30px rgba(17, 17, 17, .45); }
.cr-perk__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 14px; color: #fff; background: #111; transition: background .3s, color .3s; }
.cr-perk:hover .cr-perk__ic { color: #111; background: var(--grad-warm); }
.cr-perk__ic .icon { width: 20px; height: 20px; }
.cr-perk h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.cr-perk p { font-size: 15px; color: var(--mut); }

/* ---------- how we hire ---------- */
.cr-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cr-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 24px; background: var(--card); }
.cr-step::before { content: ""; position: absolute; inset: 0 24px auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-io); }
.cr-step:hover::before { transform: none; }
.cr-step__n { margin-bottom: 18px; font-size: clamp(3rem, 4.6vw, 4.2rem); font-weight: 600; line-height: .9; letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-step h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.cr-step p { font-size: 15px; color: var(--mut); overflow-wrap: anywhere; }
.cr-email { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px 40px; margin-top: 16px; padding: 26px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line2); }
.cr-email__lbl { font-size: 10.5px; color: var(--mut); }
.cr-email__ls { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cr-email__ls li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.cr-email__ls .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #111; background: var(--grad-warm); }

/* ---------- closing band ---------- */
.cr-cta { overflow: clip; isolation: isolate; padding-block: var(--sy-cta-t) var(--sy-cta-b); text-align: center; }
.cr-cta__glow { position: absolute; z-index: -1; left: 50%; top: 10%; width: 80vw; max-width: 1000px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 61, 129, .24), rgba(123, 77, 255, .12) 45%, transparent 70%); }
.cr-cta__in { display: grid; justify-items: center; }
.cr-cta .lead { margin-top: 24px; max-width: 54ch; overflow-wrap: anywhere; }
.cr-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.cr-cta__addr { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 10.5px; color: var(--mut); }

/* ---------- smaller screens ---------- */
@media (max-width: 1099px) {
  .cr-role { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .cr-role__btn { grid-column: 2; justify-self: start; }
  .cr-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .cr-roles .head, .cr-why .head, .cr-hire .head { grid-template-columns: minmax(0, 1fr); }
  .cr-roles .head__side, .cr-why .head__side, .cr-hire .head__side { justify-self: start; }
  .cr-role { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
  .cr-role__btn { grid-column: auto; }
  .cr-perks, .cr-steps { grid-template-columns: minmax(0, 1fr); }
  .cr-email { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .cr-email__ls { display: grid; }
  .cr-email__ls li { align-items: flex-start; }
}
@media (max-width: 380px) {
  .cr-card__ls a { grid-template-columns: minmax(0, 1fr) 16px; }
  .cr-card__x { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-perk, .cr-perk__ic, .cr-step::before, .cr-card__ls .icon { transition: none; }
}