/* Reference careers structure, scoped to the Kimono careers listing. */
.kimono-cms-content #careers { padding: 80px 0; background: #0b0b0b; }
#careers, #careers * { box-sizing: border-box; }
.kimono-cms-content #careers > .container { width: 100%; max-width: 1140px; padding: 0 12px; margin-inline: auto; }
.kimono-cms-content #careers .sec-heading { display: block; width: 100%; max-width: none; height: auto; padding: 0; margin: 0 0 48px; text-align: left; }
#careers .sec-heading .content-area { width: 100%; max-width: none; padding: 0; margin: 0; }
#careers .pre-title { display: block; margin-bottom: 10px; color: #51c4e1; font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.kimono-cms-content #careers .sec-heading .title { margin: 0 0 16px; font-size: clamp(28px, 3.7vw, 48px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; text-transform: none; text-wrap: balance; }
#careers .subtitle { max-width: 850px; margin: 0; color: #bac3c9; font-size: 16px; line-height: 1.7; letter-spacing: normal; text-transform: none; }
#careers .subtitle > :last-child { margin-bottom: 0; }
#careers .services-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin: 0 0 32px; }
#careers .services-row > div { display: flex; flex: 0 0 calc((100% - 48px) / 3); min-width: 0; max-width: none; width: auto; padding: 0; margin: 0 !important; }
.kimono-cms-content #careers .service-box { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 330px; height: auto; padding: 32px; margin: 0; overflow: hidden; background: #141617; border: 1px solid #294550; border-radius: 8px; box-shadow: none; transition: border-color .2s ease, background .2s ease; }
#careers .service-box::before, #careers .service-box::after { display: none; }
#careers .service-box:hover { border-color: #51c4e1; background: #172126; }
#careers .service-icon { position: relative; margin: 0 0 20px; color: #51c4e1; font-size: 46px; line-height: 1; }
#careers .service-icon i { font-size: inherit; }
#careers .service-num { position: absolute; top: 22px; right: 24px; margin: 0; font-size: 72px; line-height: 1; font-weight: 700; color: transparent; -webkit-text-stroke: 1px rgb(81 196 225 / 22%); pointer-events: none; }
#careers .service-content { position: relative; flex: 1; min-width: 0; }
#careers .service-title { margin: 0 0 14px; font-size: 24px; line-height: 1.3; color: #f2f3f5; text-transform: none; overflow-wrap: anywhere; }
#careers .service-text { margin: 0 0 12px; color: #bac3c9; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
#careers .service-text > :last-child { margin-bottom: 0; }
#careers .read-more { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; margin-top: 18px; padding: 6px 0; color: #51c4e1; font-size: 16px; font-weight: 600; }
#careers .read-more:focus-visible, #careers .projects-page-btn:focus-visible { outline: 2px solid #51c4e1; outline-offset: 4px; }
#careers .careers-page-pagination-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #30383d; }
#careers .projects-page-pagination-info { color: #bac3c9; font-size: 14px; }
#careers .careers-page-pagination { display: flex; gap: 8px; }
#careers .projects-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #30383d; border-radius: 6px; color: #bac3c9; background: #141617; }
#careers .projects-page-btn.is-active { background: #087e9c; color: #fff; border-color: #087e9c; }
#careers .projects-page-btn.is-disabled:not(.is-active) { opacity: .5; }
@media (min-width: 1400px) { .kimono-cms-content #careers > .container { max-width: 1320px; } }
@media (max-width: 991px) {
  .kimono-cms-content #careers > .container { max-width: 720px; padding-inline: 24px; }
  #careers .services-row > div { flex-basis: calc((100% - 24px) / 2); }
  .kimono-cms-content #careers .service-box { padding: 24px; }
}
@media (max-width: 575px) {
  .kimono-cms-content #careers { padding: 40px 0 48px; }
  .kimono-cms-content #careers > .container { padding-inline: 16px; }
  .kimono-cms-content #careers .sec-heading { margin-bottom: 32px; }
  #careers .services-row > div { flex-basis: 100%; }
  #careers .careers-page-pagination-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { #careers .service-box { transition: none; } }
