/* Careers / Company page — layout only. Tokens, fonts, header & footer come from styles.css.
   Inspired by editorial recruiting pages, but built on our own signatures:
   no bracket-rule, no mono ID codes, no boxed stat grid, no big section numbers. */

body.cr-page { background: var(--bg); }

.cr-page .navlinks a.active { color: var(--text); }

.cr-main { padding-top: 74px; }
.cr-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* ---------- Hero ---------- */
.cr-hero { padding: 84px 0 68px; }
/* Careers hero fills the first screen; the facts strip anchors to the bottom.
   :not(.cr-hero-live) leaves the company page's graph hero untouched. */
/* Full-screen hero + bottom-anchored facts, but only when there is room to do it well.
   On narrow (stacked split) or short viewports we fall back to natural flow, so the facts
   never collapse against the beats or overflow. */
@media (min-width: 861px) and (min-height: 860px) {
  .cr-hero:not(.cr-hero-live) {
    display: flex;
    box-sizing: border-box;
    min-height: calc(100vh - 74px);
    /* dvh, not svh — svh stops at Safari's toolbar, leaving a background gap behind
       the translucent chrome; dvh extends fully behind it and tracks its collapse. */
    min-height: calc(100dvh - 74px);
    padding-bottom: 16px;
  }
  .cr-hero:not(.cr-hero-live) > .cr-wrap { width: 100%; display: flex; flex-direction: column; }
  .cr-hero:not(.cr-hero-live) .cr-facts { margin-top: auto; margin-bottom: auto; }
}
.cr-hero .eyebrow { margin-bottom: 22px; }
.cr-hero-h {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: 400;
  margin: 0 0 8px;
}
.cr-hero-h .l1 { display: block; color: var(--text); }
.cr-hero-h .l2 { display: block; color: var(--text-2); }

/* Split: title + CTA on the left, the story on the right */
.cr-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 76px;
  align-items: start;
}
.cr-culture { display: flex; flex-direction: column; max-width: 600px; }
.cr-beat + .cr-beat { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 26px; }
.cr-stmt {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.16;
  color: var(--text);
  margin-bottom: 12px;
}
.cr-prose {
  font-family: "Inter", sans-serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-2);
  margin: 0;
}
.cr-hero-cta { display: inline-flex; margin-top: 30px; }
@media (max-width: 860px) {
  .cr-hero-split { grid-template-columns: 1fr; gap: 30px; }
  .cr-hero-cta { margin-top: 24px; }
}

/* Hero living identity-graph (company page only) */
.cr-hero-live { position: relative; isolation: isolate; }
.cr-hero-graph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.cr-hero-live > .cr-wrap { position: relative; z-index: 2; }
.cr-hero-live::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,11,12,0) 24%, var(--bg) 97%),
    linear-gradient(100deg, var(--bg) 13%, rgba(11,11,12,0.55) 46%, rgba(11,11,12,0.10) 100%);
}
@media (max-width: 760px) { .cr-hero-graph { display: none; } }

/* ---------- Facts (borderless) ---------- */
.cr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 80px;
  margin-top: 68px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}
.cr-fact { display: flex; flex-direction: column; gap: 9px; }
.cr-fact-k { font-family: "Inter", sans-serif; font-size: 12.5px; letter-spacing: .09em; font-variant-caps: all-small-caps; font-feature-settings: "smcp" 1, "c2sc" 1; color: var(--text-3); }
.cr-fact-v { font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 25px); color: var(--text); line-height: 1; font-feature-settings: "lnum" 1, "tnum" 1; }

/* ---------- Sections ---------- */
.cr-sec { padding: 104px 0; }
/* "Who we need" reads as its own chapter: a contrasting full-bleed band in the
   lifted base tone, the same cue the company page uses for #principles. */
#roles { background: var(--base); }
.cr-sec-head { margin-bottom: 36px; }
.cr-sec-head .eyebrow { margin-bottom: 16px; }
.cr-sec-title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; letter-spacing: -.012em; }

/* ---------- Roles list ---------- */
.cr-roles { border-top: 1px solid var(--border); }
.cr-role { border-bottom: 1px solid var(--border); }
.cr-role-sum {
  display: flex; align-items: baseline; gap: 28px;
  padding: 36px 4px; cursor: pointer; list-style: none;
}
.cr-role-sum::-webkit-details-marker { display: none; }
.cr-role-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 33px); font-weight: 400; line-height: 1.1;
  color: var(--text); flex: 1;
  transition: opacity .2s ease;
}
.cr-role:hover .cr-role-title { opacity: .62; }
.cr-role[open] .cr-role-title { opacity: 1; }
.cr-role-meta { font-family: "Inter", sans-serif; font-size: 13px; color: var(--text-3); white-space: nowrap; letter-spacing: .01em; }
.cr-role-arr {
  font-size: 19px; color: var(--text-3); flex: none; line-height: 1;
  transform: rotate(0deg); transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s ease;
}
.cr-role:hover .cr-role-arr { color: var(--text); }
.cr-role[open] .cr-role-arr { transform: rotate(90deg); color: var(--text); }
.cr-role-body { padding: 0 4px 44px; position: relative; }
.cr-role-body p { font-family: "Inter", sans-serif; color: var(--text-2); line-height: 1.65; margin: 0 0 18px; }
.cr-role-meta-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: "Inter", sans-serif; font-size: 13px; color: var(--text-3); margin: 4px 0 22px; letter-spacing: .01em; }
.cr-role-meta-line .dot { color: var(--text-3); opacity: .55; }
.cr-role-body h4 { font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin: 30px 0 14px; }
.cr-role-body ul { font-family: "Inter", sans-serif; color: var(--text-2); line-height: 1.65; padding: 0; margin: 0 0 18px; list-style: none; }
.cr-role-body li { padding-left: 22px; position: relative; margin: 0 0 9px; }
.cr-role-body li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.cr-role-comp { margin-top: 30px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 10px; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: baseline; }
.cr-role-comp-label { grid-column: 1; font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: .09em; color: var(--text-3); font-feature-settings: "smcp" 1, "c2sc" 1; font-variant-caps: all-small-caps; }
.cr-role-comp-range { grid-column: 2; font-family: var(--font-display); font-size: 19px; color: var(--text); line-height: 1.1; font-feature-settings: "lnum" 1, "tnum" 1; }
.cr-role-comp-note { grid-column: 1 / -1; font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-top: 4px; }
/* Apply CTA pinned to the top-right of the role detail (option A) */
.cr-role-foot { position: absolute; top: 0; right: 0; }
.cr-role-apply { display: inline-flex; }
.cr-role-body > p { max-width: 700px; }

/* Job detail: label-rail sections with lead + detail items (replaces flat bullets) */
.cr-role-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--border); }
.cr-role-sec h4 { margin: 0; color: var(--text-3); }
.cr-role-sec ul { margin: 0; }
.cr-role-sec li { margin: 0 0 13px; line-height: 1.6; }
.cr-role-sec li:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .cr-role-sec { grid-template-columns: 1fr; gap: 12px; } .cr-role-foot { position: static; margin-top: 28px; } .cr-role-body > p { max-width: none; } }
.cr-role-apply { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; background: var(--text); color: var(--primary-fg); border-radius: 999px; font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 14px; text-decoration: none; transition: background .25s var(--ease); }
.cr-role-apply:hover { background: var(--primary-hover); }
.cr-role-apply .arr { transition: transform .25s var(--ease); }
.cr-role-apply:hover .arr { transform: translateX(3px); }

/* ---------- Values + team: top-hairline blocks in a grid (the page signature) ---------- */
.cr-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 38px 72px; }
.cr-value { border-top: 1px solid var(--border); padding-top: 24px; }
.cr-value-name { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 27px); font-weight: 400; letter-spacing: -.01em; color: var(--text); margin-bottom: 13px; }
.cr-value-desc { font-family: "Inter", sans-serif; font-size: 15.5px; color: var(--text-2); line-height: 1.6; }
.cr-subhead { font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: .08em; font-variant-caps: all-small-caps; font-feature-settings: "smcp" 1, "c2sc" 1; color: var(--text-3); margin-bottom: 20px; }

/* ---------- Team ---------- */
.cr-team-intro { max-width: 760px; margin-bottom: 60px; }
.cr-team-lead { font-family: var(--font-display); font-size: clamp(23px, 2.3vw, 32px); font-weight: 400; line-height: 1.2; color: var(--text); }
.cr-team-body { font-family: "Inter", sans-serif; font-size: 16px; color: var(--text-2); line-height: 1.7; }
.cr-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 48px; margin-bottom: 60px; }
.cr-leader { border-top: 1px solid var(--border); padding-top: 24px; }
.cr-leader-name { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; color: var(--text); margin-bottom: 8px; }
.cr-leader-role { display: block; font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--text-3); }
.cr-orgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 72px; }
.cr-org { border-top: 1px solid var(--border); padding-top: 22px; }
.cr-org-name { display: block; font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -.005em; color: var(--text); margin-bottom: 9px; }
.cr-org-leads { font-family: "Inter", sans-serif; font-size: 15px; color: var(--text-2); }

/* ---------- Photo carousel (Life at TruU) ---------- */
.cr-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cr-gallery-head .eyebrow { margin-bottom: 14px; }
.cr-gallery-nav { display: flex; gap: 10px; flex: none; }
.cr-gal-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cr-gal-btn:hover { background: var(--surface); color: var(--text); border-color: #3a3a3a; }
.cr-gal-btn:active { transform: translateY(1px); }
.cr-carousel { margin-top: 34px; }
.cr-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 max(40px, calc(50vw - 550px)); scroll-padding-left: max(40px, calc(50vw - 550px)); scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.cr-track::-webkit-scrollbar { display: none; }
.cr-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.cr-slide { flex: 0 0 auto; width: clamp(280px, 36vw, 440px); margin: 0; scroll-snap-align: start; }
.cr-slide img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface); -webkit-user-drag: none; user-select: none; }

/* ---------- Closing CTA ---------- */
.cr-cta { padding: 120px 0; border-top: 1px solid var(--border); text-align: center; }
.cr-cta-h { font-size: clamp(32px, 4vw, 56px); font-weight: 400; letter-spacing: -.012em; margin-bottom: 18px; }
.cr-cta-sub { font-family: "Inter", sans-serif; font-size: 17px; color: var(--text-2); line-height: 1.6; max-width: 520px; margin: 0 auto 72px; }
.cr-cta-link { font-family: "Inter", sans-serif; font-size: 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--text-3); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.cr-cta-link:hover { color: var(--text-2); border-color: var(--text-2); }

/* Footer uses the shared .site-footer styling in styles.css. */

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .cr-track { padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }
  .cr-gallery-head { align-items: flex-start; }
  .cr-wrap { padding: 0 22px; }
  .cr-hero { padding: 64px 0 48px; }
  .cr-hero-cols { grid-template-columns: 1fr; gap: 28px; }
  .cr-hero-aside { max-width: 560px; }
  .cr-facts { gap: 22px 56px; }
  .cr-sec { padding: 64px 0; }
  .cr-values, .cr-leaders, .cr-orgs { grid-template-columns: 1fr; gap: 28px; }
  .cr-team-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .cr-hero-manifesto { margin-top: 32px; }
  .cr-cta { padding: 76px 0; text-align: left; }
  .cr-cta-sub { margin: 0 0 56px; max-width: none; }
}
@media (max-width: 760px) {
  /* Facts: 2-col grid stacks predictably at narrow widths */
  .cr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  /* Gallery buttons: ≥44px hit targets */
  .cr-gal-btn { width: 44px; height: 44px; }
  /* Role summary: bigger tap surface, full-width arrow alignment */
  .cr-role-sum { padding: 26px 4px; min-height: 44px; }
  .cr-hero-h { font-size: clamp(34px, 9vw, 42px); line-height: 1.06; }
  .cr-stmt { font-size: clamp(20px, 5.5vw, 24px); line-height: 1.15; }
  .cr-prose { font-size: 15px; line-height: 1.55; }
  .cr-culture { max-width: none; }
  .cr-sec-title { font-size: clamp(26px, 7vw, 32px); line-height: 1.08; }
  .cr-cta-h { font-size: clamp(28px, 7.6vw, 34px); line-height: 1.08; }
  .cr-cta-sub { font-size: 15.5px; line-height: 1.55; }
  .cr-team-lead { font-size: clamp(20px, 5.5vw, 24px); line-height: 1.2; }
  .cr-team-body { font-size: 15px; line-height: 1.55; }
}
@media (max-width: 560px) {
  .cr-role-sum { flex-wrap: wrap; gap: 8px 16px; padding: 26px 4px; }
  .cr-role-title { flex-basis: 100%; order: 1; }
  .cr-role-meta { order: 2; }
  .cr-role-arr { order: 3; margin-left: auto; }
}
@media (max-width: 420px) {
  .cr-facts { grid-template-columns: 1fr; gap: 18px; }
}