/* Careers page. Builds on service-page.css and company-pages.css.
   Palette: white, greyish black, hot pink (pink for dots, lines and shapes, never text).
   Photos are grey placeholders (.cr-ph) until the real images arrive. */

.cr-roles,
.cr-perks,
.cr-life {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.cr-head {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

.cr-note {
  margin-top: 2rem;
  color: var(--text-soft);
}

.cr-inline-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* styles.css sets every span to 1rem, so keep the grey question mark at the heading's size */
.cr-mark {
  color: #2e2e2e;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ---- Photos and placeholders -------------------------------------- */

.cr-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #d9d9d9;
}

.cr-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cr-ph-label {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  color: rgba(46, 46, 46, 0.5);
  font-size: 0.8rem;
  line-height: 1.2;
}

/* ---- Hero --------------------------------------------------------- */

.cr-hero {
  position: relative;
  padding: calc(var(--nav-height) + clamp(1.5rem, 4vw, 3.5rem)) 0 clamp(3rem, 6vw, 5rem);
}

.cr-hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.cr-hero-copy {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.cr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

.cr-text-link {
  color: #2e2e2e;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.cr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cr-facts li {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(46, 46, 46, 0.14);
  border-radius: var(--radius-sm);
  background: #fff;
}

.cr-facts strong {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cr-facts span {
  color: var(--text-soft);
  font-size: 0.85rem;
}

.cr-hero-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.9rem;
}

.cr-hero-a {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.cr-hero-b,
.cr-hero-c {
  aspect-ratio: 4 / 5;
}

/* ---- Open roles --------------------------------------------------- */

.cr-row-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.6rem clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(46, 46, 46, 0.14);
  border-radius: var(--radius-md);
  background: #fff;
  color: #2e2e2e;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cr-row:hover,
.cr-row:focus-visible {
  border-color: #2e2e2e;
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.cr-row:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.cr-row-main {
  display: grid;
  gap: 0.4rem;
}

.cr-row-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.cr-row-sum {
  max-width: 34rem;
  color: var(--text-soft);
  font-size: 0.98rem;
}

.cr-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cr-chip {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 0.9rem;
  border: 0.5px solid rgba(46, 46, 46, 0.7);
  border-radius: 999px;
  color: #2e2e2e;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.cr-row-go {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.cr-row-go span {
  color: #fff;
  font-size: 1rem;
}

/* ---- Perks -------------------------------------------------------- */

.cr-perks {
  background: #fff;
}

.cr-perks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-perk {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0 0 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(46, 46, 46, 0.14);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.cr-perk > h3,
.cr-perk > p {
  padding: 0 1.25rem;
}

.cr-perk-photo {
  aspect-ratio: 4 / 3;
  margin-bottom: 0.6rem;
  border-radius: 0;
}

.cr-perk h3 {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cr-perk p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* ---- Banner, why, photos, quotes ----------------------------------- */

.cr-banner {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}

.cr-banner-photo {
  aspect-ratio: 21 / 8;
}

.cr-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  list-style: none;
}

.cr-why li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.5rem 0;
  border-top: 2px solid #2e2e2e;
}

.cr-why h3 {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.cr-why p {
  color: var(--text-soft);
}

.cr-photo-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.cr-photo-row .cr-photo {
  aspect-ratio: 4 / 5;
}

.cr-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-quote {
  display: grid;
  align-content: space-between;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-md);
  background: #2e2e2e;
  color: var(--white);
}

.cr-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #d9d9d9;
}

.cr-quote p {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.cr-quote > span:last-child {
  color: rgba(244, 244, 244, 0.6);
  font-size: 0.85rem;
}

/* ---- Role pop-up -------------------------------------------------- */

.cr-dialog {
  width: min(62rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: #fff;
  color: #2e2e2e;
  overflow: hidden;
}

.cr-dialog[open] {
  display: flex;
  flex-direction: column;
}

.cr-dialog::backdrop {
  background: rgba(46, 46, 46, 0.65);
}

.cr-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 1.25rem;
  border-bottom: 1px solid rgba(46, 46, 46, 0.14);
}

.cr-dialog-head h2 {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.cr-dialog-close {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  cursor: pointer;
}

.cr-dialog-close span::before,
.cr-dialog-close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.cr-dialog-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cr-dialog-close:focus-visible {
  outline: 2px solid #2e2e2e;
  outline-offset: 3px;
}

.cr-dialog-scroll {
  overflow-y: auto;
  padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) 2rem;
}

.cr-dialog-photo {
  aspect-ratio: 21 / 8;
  margin-bottom: 1.75rem;
}

.cr-role-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.cr-role-body h3 {
  margin: 1.75rem 0 0.7rem;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cr-role-col > h3:first-child {
  margin-top: 0;
}

.cr-role-body p {
  margin-bottom: 0.85rem;
  color: var(--text-soft);
}

.cr-role-body ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-role-body li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-soft);
}

.cr-role-body li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--pink);
}

.cr-role-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(46, 46, 46, 0.14);
}

.cr-role-foot p {
  max-width: 38rem;
  margin: 0;
  color: #2e2e2e;
  font-weight: 500;
}

/* ---- Responsive --------------------------------------------------- */

@media (max-width: 1024px) {
  .cr-hero-layout {
    grid-template-columns: 1fr;
  }

  .cr-perks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cr-row-tags {
    grid-column: 1;
    grid-row: 2;
  }

  .cr-row-go {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 768px) {
  .cr-why,
  .cr-quotes {
    grid-template-columns: 1fr;
  }

  .cr-photo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .cr-row {
    grid-template-columns: 1fr;
  }

  .cr-row-tags,
  .cr-row-go {
    grid-column: 1;
    grid-row: auto;
  }

  .cr-row-go {
    justify-self: start;
  }

  .cr-perks-grid {
    grid-template-columns: 1fr;
  }

  .cr-role-body {
    grid-template-columns: 1fr;
  }

  .cr-banner-photo,
  .cr-dialog-photo {
    aspect-ratio: 16 / 9;
  }

  .cr-dialog {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* Let the HR sticker run down behind the footer instead of being clipped at the bottom of <main> (same as the Team page) */
.page-careers main {
  overflow-x: clip;
  overflow-y: visible;
}

/* ---- Brand character: dark roles band, pink shapes --------------------- */

.cr-roles.cr-dark {
  --cr-inset: clamp(0.5rem, 1.5vw, 1rem);
  --shrink-progress: 1;
  position: relative;
  min-height: 100svh;
  background: transparent;
  color: var(--white);
}

/* Full-bleed on arrival, then contracts into the inset rounded box as
   the section scrolls up (progress written by the shared shrink script). */
.cr-roles.cr-dark::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--shrink-progress) * var(--cr-inset));
  border-radius: calc(min(var(--shrink-progress) * 8, 1) * var(--radius-xl));
  background: #2e2e2e;
  pointer-events: none;
}

.cr-roles.cr-dark > .section-shell {
  position: relative;
  z-index: 1;
}

.cr-dark .svp-heading {
  color: var(--white);
}

.cr-dark .cr-row {
  border-color: rgba(244, 244, 244, 0.18);
  background: rgba(244, 244, 244, 0.06);
  color: var(--white);
}

.cr-dark .cr-row:hover,
.cr-dark .cr-row:focus-visible {
  border-color: var(--white);
  background: rgba(244, 244, 244, 0.1);
  box-shadow: none;
}

.cr-dark .cr-row-sum,
.cr-dark .cr-note {
  color: rgba(244, 244, 244, 0.72);
}

.cr-dark .cr-chip {
  border-color: rgba(244, 244, 244, 0.5);
  color: rgba(244, 244, 244, 0.9);
}

.cr-dark .cr-inline-link {
  color: var(--white);
}

/* The hero photos sit on their own, with no discs behind them. */
.cr-hero-photos {
  position: relative;
}

/* The headline fact is a pink tile */
.cr-facts li:first-child {
  border-color: var(--pink);
  background: var(--pink);
}

.cr-facts li:first-child strong,
.cr-facts li:first-child span {
  color: #fff;
}

.cr-why li {
  border-top: 5px solid var(--pink);
}

/* Reviews: the team page's pinned track, with photo cards between the quotes. */
.cr-reviews.cp-reviews {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.cp-review.cp-review-photo {
  position: relative;
  flex-basis: calc(var(--card-w) * 0.62);
  min-height: clamp(18rem, 22vw, 22rem);
  padding: 0;
  overflow: hidden;
  background: #d9d9d9;
}

.cp-review-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The foil bonbon sits between the last quote and the Glassdoor card. */
.cr-reviews .cp-review-bonbon {
  left: calc(5.86 * var(--card-w) + 6.5 * var(--card-gap) - var(--bonbon-w) / 2);
}

/* The dog looks over the gap between the photo card and the third quote. */
.cr-reviews .cp-review-dog {
  left: calc(1.62 * var(--card-w) + 1.5 * var(--card-gap) - var(--dog-w) / 2);
}

@media (max-width: 768px) {
  .cp-review.cp-review-photo {
    min-height: 15rem;
  }

  /* The dog only peeks over the cards here, so it never crosses the title and line above them. */
  .cr-reviews .cp-review-dog {
    top: -3.5rem;
  }
}

/* ---- Perks, take two: big photo tiles, text laid over the photo --------- */
.cr-perks .cr-perks-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.cr-perks .cr-perk {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.4rem;
  background: #2e2e2e;
  isolation: isolate;
}

.cr-perks .cr-perk .cr-perk-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
}

.cr-perks .cr-perk .cr-perk-photo img {
  transition: transform 0.9s var(--ease-settle, ease);
}

.cr-perks .cr-perk:hover .cr-perk-photo img {
  transform: scale(1.05);
}

.cr-perks .cr-perk::before {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.78) 100%);
}

.cr-perks .cr-perk {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.1rem, 1.6vw, 1.5rem);
}

.cr-perks .cr-perk > h3,
.cr-perks .cr-perk > p {
  position: static;
  margin: 0;
  padding: 0;
}

.cr-perks .cr-perk > h3 {
  margin-bottom: 0.5rem;
  color: #f4f4f4;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
}

.cr-perks .cr-perk > p {
  color: rgba(244, 244, 244, 0.86);
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Perks that do not have a photo yet: a quiet row under the tiles. */
.cr-perks-extra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: clamp(0.75rem, 1.4vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.cr-perks-extra li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.15rem 1.4rem;
  border-radius: 1.2rem;
  background: #f4f4f4;
}

.cr-perks-extra li::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--pink);
}

.cr-perks-extra strong {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cr-perks-extra span {
  color: var(--text-soft);
  font-size: 0.95rem;
}

@media (max-width: 1024px) {
  .cr-perks .cr-perks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cr-perks .cr-perks-grid,
  .cr-perks-extra {
    grid-template-columns: minmax(0, 1fr);
  }

  .cr-perks .cr-perk {
    aspect-ratio: 4 / 3;
  }
}

/* Running Club photo card, and Free breakfast as a wide dark tile beside it */
.cr-perk-run .cr-perk-photo img {
  object-position: 50% 60%;
}

.cr-perks .cr-perk.cr-perk-wide {
  grid-column: span 2;
  aspect-ratio: auto;
}

.cr-perks .cr-perk.cr-perk-wide::before {
  display: none;
}

.cr-perks .cr-perk.cr-perk-wide > h3 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -0.04em;
}

.cr-perks .cr-perk.cr-perk-wide > h3::after {
  content: ".";
  color: var(--pink);
}

@media (max-width: 1024px) {
  .cr-perks .cr-perk.cr-perk-wide {
    grid-column: 1 / -1;
    min-height: 10rem;
  }
}

/* ---- Perks, take three: bento grid, each panel shaped like its photo ---- */
@media (min-width: 1025px) {
  .cr-perks .cr-perks-grid {
    --perk-gap: clamp(0.75rem, 1.4vw, 1.25rem);
    container-type: inline-size;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows:
      calc((100cqw - 2 * var(--perk-gap)) * 0.25)
      calc((100cqw - 2 * var(--perk-gap)) * 0.25)
      calc((100cqw - 2 * var(--perk-gap)) * 0.25)
      calc(100cqw * 0.32);
    gap: var(--perk-gap);
  }

  .cr-perks .cr-perk,
  .cr-perks .cr-perk.cr-perk-wide {
    grid-column: auto;
    aspect-ratio: auto;
    min-height: 0;
  }

  .cr-perks .cr-perk:nth-child(2) { grid-area: 1 / 1 / 3 / 9; }
  .cr-perks .cr-perk:nth-child(1) { grid-area: 1 / 9 / 2 / 13; }
  .cr-perks .cr-perk:nth-child(5) { grid-area: 2 / 9 / 3 / 13; }
  .cr-perks .cr-perk:nth-child(4) { grid-area: 3 / 1 / 4 / 5; }
  .cr-perks .cr-perk:nth-child(6) { grid-area: 3 / 5 / 4 / 9; }
  .cr-perks .cr-perk:nth-child(7) { grid-area: 3 / 9 / 4 / 13; }
  .cr-perks .cr-perk:nth-child(3) { grid-area: 4 / 1 / 5 / 8; }
  .cr-perks .cr-perk:nth-child(8) { grid-area: 4 / 8 / 5 / 13; }

  .cr-perks .cr-perk:nth-child(2) > h3 {
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  }
}

@media (max-width: 1024px) {
  .cr-perks .cr-perk:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}

/* Hero facts float over the photo grid instead of sitting under the button */
.cr-hero-photos .cr-facts {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}

.cr-hero-photos .cr-facts li {
  position: absolute;
  box-shadow: 0 14px 34px rgba(46, 46, 46, 0.18);
  animation: cr-float 7s ease-in-out infinite;
}

.cr-hero-photos .cr-facts li:nth-child(1) {
  top: 1.1rem;
  right: 1.1rem;
}

.cr-hero-photos .cr-facts li:nth-child(2) {
  top: 46%;
  left: -2.2rem;
  animation-delay: -2.3s;
}

.cr-hero-photos .cr-facts li:nth-child(3) {
  right: calc(-1.4rem - 100px);
  bottom: 1.1rem;
  animation-delay: -4.6s;
}

@keyframes cr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cr-hero-photos .cr-facts li {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .cr-hero-photos .cr-facts li:nth-child(2) {
    left: 0.9rem;
    top: 48%;
  }
}

@media (max-width: 640px) {
  .cr-hero-photos .cr-facts li {
    padding: 0.6rem 0.8rem;
  }

  .cr-hero-photos .cr-facts strong {
    font-size: 1.05rem;
  }

  .cr-hero-photos .cr-facts span {
    font-size: 0.72rem;
  }
}

/* Open roles: each row slides up in turn, then its tags and button follow. */
@keyframes cr-row-in {
  from {
    opacity: 0;
    transform: translate3d(0, 56px, 0) scale(0.97);
  }
}

@keyframes cr-row-bit {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}

.svp-reveal-ready .cr-row[data-svp-reveal].is-in {
  animation: cr-row-in 1s var(--ease-soft) backwards;
}

.svp-reveal-ready .cr-row[data-svp-reveal].is-in .cr-chip,
.svp-reveal-ready .cr-row[data-svp-reveal].is-in .cr-row-go {
  animation: cr-row-bit 0.8s var(--ease-soft) backwards;
  animation-delay: 0.35s;
}

.svp-reveal-ready .cr-row[data-svp-reveal].is-in .cr-chip + .cr-chip {
  animation-delay: 0.45s;
}

.svp-reveal-ready .cr-row[data-svp-reveal].is-in .cr-row-go {
  animation-delay: 0.55s;
}

.cr-row-list li:nth-child(2) .cr-row.is-in { animation-delay: 0.14s; }
.cr-row-list li:nth-child(3) .cr-row.is-in { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .svp-reveal-ready .cr-row[data-svp-reveal].is-in,
  .svp-reveal-ready .cr-row[data-svp-reveal].is-in .cr-chip,
  .svp-reveal-ready .cr-row[data-svp-reveal].is-in .cr-row-go {
    animation: none;
  }
}

/* Meet the team: a proper button under the day-out photos */
.cr-life-cta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.cr-life-cta .button {
  grid-column: 2;
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px) {
  .cr-life-cta {
    gap: 0.5rem;
  }

  .cr-life-cta .button {
    grid-column: 1 / -1;
  }
}

/* Why join: the longer culture story, one column that fills the width between the page guides */
.cr-culture {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.cr-culture-cols {
  columns: 1;
  max-width: 100%;
}

.cr-culture p {
  margin: 0 0 1.1rem;
  color: var(--text-soft);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.65;
}

.cr-culture .cr-culture-close {
  margin: 0;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .cr-culture-cols {
    columns: 1;
  }
}

@media (max-width: 1024px) {
  .cr-hero-photos .cr-facts li:nth-child(3) {
    right: 0.5rem;
  }
}

.cr-hero {
  overflow-x: clip;
}

/* Perk tiles: every tile the same size, with the photo filling it. The photo's own shape no longer decides the tile's height. */
.cr-perks .cr-perk .cr-perk-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .cr-perks .cr-perk {
    aspect-ratio: auto;
    height: min(78vw, 22rem);
  }
}

/* Careers, phones: the three day-out photos are bigger and pan from right to left as you scroll past.
   Browsers without scroll-driven animation get an ordinary swipeable row. */
@media (max-width: 640px) {
  .cr-photo-row {
    display: flex;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 1.25rem;
    overflow-x: auto;
    overflow-y: clip;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cr-photo-row::-webkit-scrollbar {
    display: none;
  }

  .cr-photo-row .cr-photo {
    flex: 0 0 72vw;
    scroll-snap-align: center;
  }
}

@supports (animation-timeline: view()) {
  @media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .cr-photo-row {
      overflow: clip;
      scroll-snap-type: none;
    }

    .cr-photo-row .cr-photo {
      animation: cr-pan linear both;
      animation-timeline: view();
      animation-range: cover 35% cover 65%;
    }
  }
}

@keyframes cr-pan {
  from { translate: 0 0; }
  to { translate: calc(-1 * (116vw + 4rem)) 0; }
}

/* Phones: the office photo sits under "You'll actually enjoy it." instead of above "Life at Leadly". */
.cr-banner-mobile {
  display: none;
}

@media (max-width: 768px) {
  .cr-banner {
    display: none;
  }

  .cr-banner-mobile {
    display: block;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* Perk tiles on tablets and phones: all the same width and the same height, whatever the photo's shape. */
@media (max-width: 1024px) {
  .cr-perks .cr-perk,
  .cr-perks .cr-perk:nth-child(3),
  .cr-perks .cr-perk.cr-perk-wide {
    grid-column: auto;
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .cr-perks .cr-perk,
  .cr-perks .cr-perk:nth-child(3),
  .cr-perks .cr-perk.cr-perk-wide {
    aspect-ratio: auto;
    height: min(78vw, 22rem);
  }
}

/* Careers "Current positions" on phones: the same box as the other pages' grey panels that grow in on scroll.
   Same side inset, corner radius, top and bottom padding, and the same extra breathing room for the text. */
@media (max-width: 768px) {
  .cr-roles.cr-dark {
    --cr-inset: 0.75rem;
    padding-block: 4.5rem;
  }

  .cr-roles.cr-dark::before {
    border-radius: calc(min(var(--shrink-progress) * 8, 1) * 28px);
  }

  .cr-roles.cr-dark > .section-shell {
    width: calc(var(--boxed-guide-width, calc(100vw - 2.5rem)) - 2rem);
  }
}