/* === careers =======================================================
   Career Opportunities (resource 66, template "Career Container").
   Translated from the inline styles in design/careers/ — every value in
   design/careers/README.md is carried over, nothing trimmed.

   Two theme collisions are restated deliberately, not inherited:
   - the ICA theme sets h1/h2 colour directly, which beats the design's
     inherited colour on dark sections (home-page headings rendered at
     1.14:1). Colour is restated scoped to every dark band below.
   - navy is --bs-tertiary-hex (#1e2d3b), NOT --bs-heading-color-hex
     (#212124). The literal is used here so a token change cannot
     silently repaint the hero ink-black.

   Two JS flags, deliberately separate. .crr-js means careers.js ran:
   until it lands the team panels stack, every job panel is open and the
   filter chips are hidden, so nothing is a dead control. .crr-anim means
   the reveal animation is in use and is the only thing gating the
   opacity:0 rules — no JS, a script error or reduced motion all leave
   the page simply visible. The FAQ is native details/summary and needs
   neither flag; careers.js only adds single-open.
   =================================================================== */

.crr {
  max-width: 100%;
  overflow-x: hidden;
}

/* Stated rather than inherited from the theme's reset. Without it the
   full-width mobile buttons compute width:100% on the content box and
   run 34px past their container. */
.crr *,
.crr *::before,
.crr *::after {
  box-sizing: border-box;
}

/* --- tokens ------------------------------------------------------- */

.crr {
  --crr-navy: #1e2d3b;
  --crr-blue: #0072bc;
  --crr-blue-hover: #0086dd;
  --crr-blue-light: #80b7e3;
  --crr-blue-pale: #d8ecf9;
  --crr-blue-grey: #9fb3c2;
  --crr-tint: #f2f8fc;
  --crr-border-tint: #cfe2f1;
  --crr-border: #e7e7e7;
  --crr-hairline: #eef2f5;
  --crr-rule: #dce3e8;
  --crr-body: #495356;
  --crr-ink: #212124;
  --crr-muted: #8e9598;
  --crr-green: #4f9c2e;
  --crr-green-dark: #9fd086;
  --crr-yellow: #ffd240;
  --crr-yellow-hover: #f5c51e;
  --crr-head: 'Catamaran', sans-serif;
  --crr-ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- shared structure --------------------------------------------- */

.crr .crr-sec {
  border-bottom: 1px solid var(--crr-border);
}

.crr .crr-sec--tint { background: var(--crr-tint); }
.crr .crr-sec--white { background: #fff; }

.crr .crr-sec--dark {
  background: var(--crr-navy);
  color: #fff;
}

.crr .crr-sec--blue {
  background: var(--crr-blue);
  color: #fff;
  border-bottom: 0;
}

.crr .crr-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 68px 24px;
}

.crr .crr-wrap--narrow { max-width: 860px; }
.crr .crr-wrap--flush { padding: 24px; }

.crr .crr-eyebrow {
  font-family: var(--crr-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crr-blue);
  margin-bottom: 10px;
}

.crr .crr-sec--dark .crr-eyebrow { color: var(--crr-blue-light); }

.crr h2.crr-h2 {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--crr-ink);
}

.crr .crr-sec--dark h2.crr-h2 { color: #fff; }

.crr .crr-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--crr-body);
  margin: 0;
  max-width: 62ch;
}

.crr .crr-sec--dark .crr-lede { color: var(--crr-blue-pale); }

.crr .crr-balance {
  max-width: 20ch;
  text-wrap: balance;
}

/* --- buttons ------------------------------------------------------ */

.crr a,
.crr button {
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.crr .crr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--crr-head);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 26px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.crr .crr-btn--primary {
  background: var(--crr-blue);
  color: #fff;
}

.crr .crr-btn--primary:hover,
.crr .crr-btn--primary:focus-visible {
  background: var(--crr-blue-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 114, 188, .35);
}

.crr .crr-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}

.crr .crr-btn--ghost:hover,
.crr .crr-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, .10);
  border-color: var(--crr-blue-light);
  color: #fff;
}

.crr .crr-btn--accent {
  background: var(--crr-yellow);
  color: var(--crr-ink);
  font-size: 16px;
  flex: none;
}

.crr .crr-btn--accent:hover,
.crr .crr-btn--accent:focus-visible {
  background: var(--crr-yellow-hover);
  color: var(--crr-ink);
  transform: translateY(-2px);
}

/* --- 1. hero ------------------------------------------------------- */

.crr .crr-hero {
  position: relative;
  overflow: hidden;
  background: var(--crr-navy);
  color: #fff;
  border-bottom: 0;
}

.crr .crr-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  animation: crrDrift 26s ease-in-out infinite alternate;
}

.crr .crr-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1e2d3b 22%, rgba(30, 45, 59, .82) 72%, rgba(30, 45, 59, .55) 100%);
}

.crr .crr-hero__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 60px;
}

.crr .crr-hero__inner > * {
  animation: crrHeroIn .7s var(--crr-ease) both;
}

.crr .crr-hero__inner > *:nth-child(1) { animation-duration: .6s; animation-delay: 0s; }
.crr .crr-hero__inner > *:nth-child(2) { animation-delay: .08s; }
.crr .crr-hero__inner > *:nth-child(3) { animation-delay: .16s; }
.crr .crr-hero__inner > *:nth-child(4) { animation-delay: .24s; }

.crr .crr-hero .crr-eyebrow {
  color: var(--crr-blue-light);
  margin-bottom: 14px;
}

.crr h1.crr-hero__title {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 21ch;
  text-wrap: balance;
  color: #fff;
}

.crr .crr-hero__lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--crr-tint);
  max-width: 64ch;
  margin: 0 0 28px;
}

.crr .crr-hero__lede p { margin: 0 0 12px; }
.crr .crr-hero__lede p:last-child { margin-bottom: 0; }

.crr .crr-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

@keyframes crrDrift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}

@keyframes crrHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes crrPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 2. value strip ------------------------------------------------ */

.crr .crr-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.crr .crr-strip__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.crr .crr-strip__num {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--crr-blue-light);
  line-height: 1;
  flex: none;
}

.crr .crr-strip__title {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.crr .crr-strip__text {
  font-size: 15px;
  color: var(--crr-blue-pale);
  line-height: 1.4;
}

/* --- 3. open positions --------------------------------------------- */

.crr .crr-openings__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.crr .crr-openings__head .crr-lede { font-size: 18px; margin: 0; }

.crr .crr-count {
  background: var(--crr-tint);
  border: 1px solid var(--crr-border-tint);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--crr-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--crr-ink);
  white-space: nowrap;
}

/* No-JS: the chip row would be four dead buttons, so it stays hidden
   until .crr-js lands. */
.crr:not(.crr-js) .crr-chips { display: none; }

.crr .crr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.crr .crr-chip {
  font-family: var(--crr-head);
  font-weight: 700;
  font-size: 15.5px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--crr-border-tint);
  background: #fff;
  color: var(--crr-navy);
  cursor: pointer;
}

.crr .crr-chip:hover,
.crr .crr-chip:focus-visible {
  border-color: var(--crr-blue);
  color: var(--crr-blue);
}

.crr .crr-chip[aria-pressed="true"] {
  background: var(--crr-navy);
  border-color: var(--crr-navy);
  color: #fff;
}

.crr .crr-jobs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.crr .crr-job {
  border: 1px solid var(--crr-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.crr .crr-job:hover {
  box-shadow: 0 12px 28px rgba(30, 45, 59, .10);
  border-color: var(--crr-border-tint);
}

.crr .crr-job__summary {
  padding: 26px 28px;
  border-left: 4px solid var(--crr-blue);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.crr .crr-job__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.crr .crr-tag {
  background: var(--crr-tint);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crr-body);
}

.crr .crr-tag--dept { color: var(--crr-blue); }

.crr .crr-job__title {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--crr-ink);
}

.crr .crr-job__title a {
  color: inherit;
  text-decoration: none;
}

.crr .crr-job__title a:hover { color: var(--crr-blue); }

.crr .crr-job__meta {
  font-size: 16.5px;
  color: var(--crr-body);
  margin: 0;
}

.crr .crr-job__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.crr .crr-btn--outline {
  background: #fff;
  border-color: var(--crr-border-tint);
  color: var(--crr-navy);
  font-size: 16px;
  padding: 13px 22px;
}

.crr .crr-btn--outline:hover,
.crr .crr-btn--outline:focus-visible {
  border-color: var(--crr-blue);
  color: var(--crr-blue);
}

.crr .crr-btn--apply {
  background: var(--crr-blue);
  color: #fff;
  font-size: 16px;
  padding: 13px 22px;
}

.crr .crr-btn--apply:hover,
.crr .crr-btn--apply:focus-visible {
  background: var(--crr-blue-hover);
  color: #fff;
}

.crr .crr-job__panel {
  border-top: 1px solid var(--crr-hairline);
  padding: 4px 28px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  animation: crrPanelIn .28s var(--crr-ease) both;
}

.crr .crr-job__panel > div { padding-top: 24px; }

/* A posting that carries no duties or requirements must not render a
   heading over an empty bullet. The lists are a pipe-split of one
   textarea, so an empty TV yields <ul><li></li></ul> rather than an
   empty ul — hence the :only-child:empty test as well. :has() removes
   the whole column; where it is unsupported the heading is left alone,
   which is untidy but not broken. A conditional in the row tpl is not an
   option — a snippet call inside a :then branch never executes. */
.crr .crr-job__panel li:empty,
.crr .crr-job__panel ul:empty,
.crr .crr-job__summary-text:empty { display: none; }
.crr .crr-job__panel > div:has(> ul:empty),
.crr .crr-job__panel > div:has(> ul > li:only-child:empty) { display: none; }

.crr .crr-job__more {
  font-family: var(--crr-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--crr-blue);
  text-decoration: none;
}

.crr .crr-job__more:hover { color: var(--crr-blue-hover); text-decoration: underline; }

.crr .crr-job__summary-text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--crr-body);
  max-width: 58ch;
  margin: 0;
}

.crr .crr-col-title {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: 17px;
  color: var(--crr-ink);
  margin: 0 0 12px;
}

.crr .crr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.crr .crr-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--crr-body);
}

.crr .crr-list li::before {
  flex: none;
  font-weight: 700;
}

.crr .crr-list--check li::before {
  content: "\2713";
  color: var(--crr-green);
}

.crr .crr-list--dash li::before {
  content: "\2014";
  color: var(--crr-muted);
}

.crr .crr-empty {
  border: 1px dashed var(--crr-border-tint);
  border-radius: 10px;
  background: var(--crr-tint);
  padding: 32px 28px;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--crr-body);
  margin-bottom: 24px;
}

.crr .crr-open-app {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  background: var(--crr-navy);
  color: #fff;
  border-radius: 10px;
  padding: 30px 28px;
}

.crr .crr-open-app__text { max-width: 58ch; }

.crr .crr-open-app .crr-eyebrow {
  color: var(--crr-blue-light);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.crr .crr-open-app__title {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: #fff;
}

.crr .crr-open-app__body {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--crr-blue-pale);
  margin: 0;
}

/* --- 4. working here ------------------------------------------------ */

.crr .crr-working {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px;
  align-items: center;
}

.crr .crr-working__text p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--crr-body);
  margin: 0 0 14px;
  max-width: 58ch;
}

.crr .crr-working__text p:last-child { margin-bottom: 0; }

.crr .crr-working__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.crr .crr-working__grid img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.crr .crr-working__grid img:first-child {
  grid-column: 1 / -1;
  height: 260px;
}

.crr .crr-working__grid img + img { height: 170px; }

/* --- 5. benefits ----------------------------------------------------- */

.crr .crr-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.crr .crr-bcard {
  background: var(--crr-tint);
  border: 1px solid var(--crr-border);
  border-radius: 10px;
  padding: 26px;
}

.crr .crr-bcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(30, 45, 59, .10);
  border-color: var(--crr-border-tint);
}

.crr .crr-bcard__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crr-blue);
  margin-bottom: 8px;
}

.crr .crr-bcard__title {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.2;
  color: var(--crr-ink);
  margin: 0 0 8px;
}

.crr .crr-bcard__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--crr-body);
  margin: 0;
}

/* --- 6. teams -------------------------------------------------------- */

.crr .crr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 22px;
}

.crr .crr-tab {
  font-family: var(--crr-head);
  font-weight: 700;
  font-size: 15.5px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.crr .crr-tab:hover,
.crr .crr-tab:focus-visible {
  border-color: var(--crr-blue-light);
  color: var(--crr-blue-light);
}

.crr .crr-tab[aria-selected="true"] {
  background: var(--crr-blue-light);
  border-color: var(--crr-blue-light);
  color: #12202c;
}

.crr .crr-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  overflow: hidden;
}

.crr .crr-panel + .crr-panel { margin-top: 14px; }

.crr .crr-panel__main {
  padding: 32px 30px;
  border-left: 4px solid var(--crr-blue);
}

.crr .crr-panel__title {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  margin: 0 0 8px;
  color: #fff;
}

.crr .crr-panel__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--crr-blue-pale);
  margin: 0 0 20px;
  max-width: 46ch;
}

.crr .crr-panel__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--crr-blue-grey);
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 14px;
  max-width: 44ch;
}

.crr .crr-panel__roles {
  background: rgba(0, 0, 0, .12);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crr .crr-panel__roles .crr-eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--crr-blue-light);
  margin-bottom: 2px;
}

.crr .crr-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crr .crr-roles li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  padding-bottom: 9px;
}

.crr .crr-roles li::before {
  content: "\2713";
  flex: none;
  color: var(--crr-green-dark);
  font-weight: 800;
}

/* --- 7. hiring process ------------------------------------------------ */

.crr .crr-hiring {
  position: relative;
  overflow: hidden;
}

.crr .crr-mark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(56vw, 620px);
  opacity: .05;
  pointer-events: none;
  /* the only mark on the install is ica-mark-white.svg, which is
     invisible on this #f2f8fc band — tint it to the navy the design
     shows rather than adding a second asset. */
  filter: brightness(0) saturate(100%) invert(13%) sepia(18%) saturate(1197%) hue-rotate(169deg) brightness(95%) contrast(90%);
}

.crr .crr-steps {
  position: relative;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 28px;
}

.crr .crr-step {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.crr .crr-step::after {
  content: "";
  position: absolute;
  top: 52px;
  bottom: -32px;
  left: 21px;
  width: 2px;
  background: var(--crr-rule);
}

.crr .crr-step:last-child::after { display: none; }

.crr .crr-step__num {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--crr-navy);
  color: #fff;
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.crr .crr-step__when {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crr-blue);
  margin-bottom: 4px;
}

.crr .crr-step__title {
  font-family: var(--crr-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--crr-ink);
  margin: 0 0 6px;
}

.crr .crr-step__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--crr-body);
  max-width: 62ch;
  margin: 0;
}

/* --- 8. FAQ ------------------------------------------------------------ */

.crr .crr-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.crr .crr-faq__item {
  border: 1px solid var(--crr-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.crr .crr-faq__q {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 20px 22px;
  background: #fff;
  cursor: pointer;
  font-family: var(--crr-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--crr-ink);
  list-style: none;
}

/* Kill both native disclosure markers; the styled circle replaces them. */
.crr .crr-faq__q::-webkit-details-marker { display: none; }
.crr .crr-faq__q::marker { content: ""; }

.crr .crr-faq__q:hover { background: var(--crr-tint); }

.crr .crr-faq__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--crr-tint);
  color: var(--crr-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: transform .18s, background-color .18s, color .18s;
}

.crr .crr-faq__item[open] .crr-faq__icon {
  background: var(--crr-blue);
  color: #fff;
  transform: rotate(45deg);
}

.crr .crr-faq__a {
  padding: 0 22px 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--crr-body);
  animation: crrPanelIn .28s var(--crr-ease) both;
}

.crr .crr-faq__a p { margin: 0 0 12px; }
.crr .crr-faq__a p:last-child { margin-bottom: 0; }

/* --- EEO fine print (empty until legal supplies wording) -------------- */

.crr .crr-eeo {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 48px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--crr-muted);
}

/* --- scroll reveal — gated on .crr-anim so no-JS fails open ----------- */

.crr.crr-anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s var(--crr-ease), transform .62s var(--crr-ease);
}

.crr.crr-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- no-JS: everything open, nothing dead ----------------------------- */

/* An element given display: by a rule above outranks the UA's
   [hidden]{display:none}, so every element this page toggles with the
   hidden attribute needs it restated. Missing it on .crr-panel rendered
   all four team panels stacked instead of tabbed. */
.crr.crr-js [hidden] { display: none !important; }

/* Until careers.js adds .crr-js the reader gets all four team panels
   stacked and every job panel open, rather than a row of dead tabs.
   Same pattern as .ehp:not(.ehp-js) on Employee Health. */
.crr:not(.crr-js) .crr-panel[hidden] { display: grid; }
.crr:not(.crr-js) .crr-tabs { display: none; }
.crr:not(.crr-js) .crr-job__panel[hidden] { display: grid; }
.crr:not(.crr-js) .crr-job__toggle { display: none; }
.crr:not(.crr-js) .crr-empty { display: none; }

@media print {
  .crr [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .crr .crr-hero__bg,
  .crr .crr-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crr *,
  .crr *::before,
  .crr *::after {
    animation: none !important;
    transition: none !important;
  }
  .crr.crr-anim [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --- small screens ----------------------------------------------------- */

@media (max-width: 575.98px) {
  .crr .crr-wrap { padding: 44px 20px; }
  .crr .crr-hero__inner { padding: 44px 20px 40px; }
  .crr .crr-job__summary { padding: 22px 20px; }
  .crr .crr-job__panel { padding: 4px 20px 22px; }
  .crr .crr-open-app { padding: 24px 20px; }
  .crr .crr-btn { width: 100%; justify-content: center; }
  .crr .crr-job__actions { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Benefits grid — hidden while it has no rows.                     2026-10-05

   job-benefits-migx shipped live as six rows reading "Lorem Ipsum", directly
   under a lede promising candidates "the exact numbers". docs/pages/
   career-opportunities.md open question 1 holds the real terms until HR
   confirms them in writing — medical/dental/vision, retirement match, PTO
   accrual and CE support are contractual — and offered two outcomes: hold the
   values, or keep the section out of this pass. Shipping the placeholders was
   neither, so the grid is emptied in the manifest and hidden here.

   The heading and the lede stay, so the section still says something true.
   Restoring it is a manifest edit alone: add rows to job-benefits-migx and the
   grid reappears, no CSS or template change.

   :not(:has(li)) rather than :empty — getImageList leaves whitespace inside
   the <ul>, which defeats :empty. Gated on the element, not the page, so a
   partially-filled grid still shows.
   --------------------------------------------------------------------------- */
.crr .crr-benefits:not(:has(li)) { display: none; }