/* Careers page. Loads after base.css, pages.css, service.css and forms.css. */

.hiring-sticker { background: var(--sun); color: var(--teal); box-shadow: 4px 4px 0 var(--orange); }
.hiring-sticker b { font-size: 1.6rem; }

/* ---------- Perks ---------- */
.perks { position: relative; padding: 90px 0 60px; }
.perks__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.perks__grid li {
  padding: 24px 22px; background: var(--white); border: 2px solid var(--teal); border-radius: 14px; box-shadow: var(--shadow);
}
.perks__grid li:nth-child(2) { background: var(--sun); }
.perks__grid li:nth-child(4) { background: var(--sea); }
.perks__grid b { font-family: var(--display); font-weight: 900; font-size: 2.2rem; color: var(--orange); font-variation-settings: "SOFT" 100; }
.perks__grid h3 { font-size: 1.5rem; margin: .5rem 0 .5rem; }
.perks__grid p { margin: 0; }

/* ---------- Roles ---------- */
.roles { padding: 60px 0 110px; }
.roles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.role {
  --tone: var(--sun);
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 28px 28px; overflow: hidden;
  background: var(--white); border: 2px solid var(--teal); border-radius: 16px; box-shadow: var(--shadow);
}
.role--sea { --tone: var(--sea); }
.role--teal { --tone: var(--teal); }
.role--orange { --tone: #f6a08f; }
.role__head {
  display: flex; align-items: center; gap: 18px; align-self: stretch;
  margin: 0 -28px 22px; padding: 22px 28px;
  background:
    radial-gradient(circle, rgba(0, 71, 80, .14) 1.6px, transparent 2px) 0 0 / 13px 13px,
    var(--tone);
  border-bottom: 2px solid var(--teal);
}
.role--teal .role__head { color: var(--paper); background: radial-gradient(circle, rgba(152, 213, 212, .18) 1.6px, transparent 2px) 0 0 / 13px 13px, var(--teal); }
.role__num {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--paper); color: var(--teal); border: 2px solid var(--teal); border-radius: 50%; box-shadow: 3px 3px 0 var(--teal);
  font-family: var(--display); font-weight: 900; font-size: 1.4rem;
}
.role h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.role__hook { margin: .3rem 0 0; font-weight: 900; font-size: .95rem; }
.role--teal .role__hook { color: var(--sun); }
.role__intro { margin: 0 0 1.2rem; font-size: 1.05rem; }
.role h4 { margin: 0 0 .5rem; font-weight: 900; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.role__duties { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.role__duties li { position: relative; padding: .4em 0 .4em 28px; border-top: 1.5px dashed rgba(0, 71, 80, .3); }
.role__duties li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 15px; height: 15px;
  background: url("../assets/brand/a-paw.svg") center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(31%) sepia(91%) saturate(2970%) hue-rotate(352deg) brightness(97%) contrast(93%);
}
.role__love { margin: 0 0 1.4rem; padding: 14px 16px; background: var(--paper); border-radius: 12px; }
.role__love b { font-weight: 900; }
.role .btn { margin-top: auto; }

/* ---------- Apply ---------- */
.apply { position: relative; padding: 100px 0 110px; background: var(--sea); }
.apply .tear--top {
  background:
    linear-gradient(135deg, transparent 49%, var(--sea) 50%) 0 0 / 24px 24px repeat-x,
    linear-gradient(225deg, transparent 49%, var(--sea) 50%) 12px 0 / 24px 24px repeat-x;
}
.apply em { color: var(--orange); }
.apply__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.apply__side { position: sticky; top: calc(var(--nav-h) + 40px); }
.apply__steps { list-style: none; counter-reset: step; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 16px; }
.apply__steps li { position: relative; padding-left: 58px; min-height: 44px; }
.apply__steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -3px; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--teal); border-radius: 50%; box-shadow: 3px 3px 0 var(--teal);
  font-family: var(--display); font-weight: 900; font-size: 1.15rem;
}
.apply__note { font-weight: 700; }
.apply__note a { text-underline-offset: 3px; }
.field__label { font-weight: 900; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 1080px) {
  .perks__grid { grid-template-columns: repeat(2, 1fr); }
  .roles__grid { grid-template-columns: 1fr; max-width: 720px; }
  .apply__grid { grid-template-columns: 1fr; gap: 36px; }
  .apply__side { position: static; }
}

@media (max-width: 760px) {
  .perks { padding: 64px 0 40px; }
  .perks__grid { grid-template-columns: 1fr; }
  .roles { padding: 40px 0 80px; }
  .role { padding: 0 20px 22px; }
  .role__head { margin: 0 -20px 18px; padding: 18px 20px; gap: 14px; }
  .role__num { width: 46px; height: 46px; font-size: 1.15rem; }
  .apply { padding: 70px 0 80px; }
}