/* Career page only. Scoped to .career-main; follows the About / Leadership editorial patterns and tokens. */
.career-main { padding: 152px var(--gutter) var(--section); }
.career-main > * { max-width: 1520px; margin-inline: auto; }
.career-main .text-link.is-internal { --arrow-y: 0px; }
.career-title .eyebrow { color: #666; margin-bottom: 24px; }
.career-title h1 { font-size: clamp(48px,6.2vw,96px); line-height: 1.08; }
.career-main .career-lead { margin-top: 24px; font: 700 clamp(22px,2.2vw,32px)/1.3 var(--display) !important; }
.career-title .company-nav { margin-top: 40px; }

.career-section { padding-top: clamp(64px,7vw,112px); }
.career-section-title { font-size: clamp(26px,2.6vw,40px); line-height: 1.16 !important; }
.career-main .career-text { display: grid; gap: 24px; align-content: start; }
/* Body copy fills its column to the container edge (no character cap), so every section shares the same left and right lines. */
.career-main .career-text p { font: var(--text-body)/var(--leading-body) var(--body); max-width: none; }
.career-main .career-text a:not(.text-link) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.career-main figure { margin: 0; }
.career-main figure img { width: 100%; height: auto; background: #e4e4e4; }

/* Working at Tron Future: title / copy columns, then the full-width collage. */
.career-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 32px clamp(32px,8vw,128px); }
.career-intro .career-wide { grid-column: 1 / -1; margin-top: 16px; }

/* CEO quote: a light pull-quote in the page grid (label column / quote column), separated by a hairline. */
.career-quote { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 16px clamp(32px,8vw,128px); margin-top: clamp(64px,7vw,112px); padding-top: 40px; border-top: 1px solid var(--rule); }
.career-main .career-quote-label { font: var(--text-label)/var(--leading-label) var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; color: #666; padding-top: 12px; }
.career-quote blockquote { margin: 0; }
.career-main .career-quote blockquote p { font: 700 clamp(26px,2.8vw,44px)/1.25 var(--display); max-width: none; }
.career-main .career-quote cite { display: block; margin-top: 24px; font: normal var(--text-label)/var(--leading-label) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #666; }

/* Values / Team / Benefit: two-column rows (photo | title and copy), alternating sides. Both columns run to the
   container edges; photos share one 4:3 frame (cropped with object-fit) so rows keep a consistent rhythm. */
.career-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px clamp(32px,6vw,96px); align-items: start; }
.career-split figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.career-split.is-reversed figure { order: 2; }
.career-split .career-text .text-link { justify-self: start; }
.career-main .nowrap { white-space: nowrap; }

/* Open positions */
.career-openings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 24px clamp(32px,8vw,128px); margin-top: clamp(80px,9vw,140px); padding-top: 40px; border-top: 1px solid var(--ink); }
.career-actions { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 8px; }
.career-main .career-actions .text-link { font-weight: 500; }

@media (max-width: 1100px) {
  .career-intro, .career-openings, .career-quote { grid-template-columns: 1fr; }
  .career-main .career-quote-label { padding-top: 0; }
}
@media (max-width: 900px) {
  .career-split { grid-template-columns: 1fr; }
  .career-split.is-reversed figure { order: 0; }
}
@media (max-width: 700px) {
  .career-main { padding-top: 128px; }
  .career-title .company-nav { margin-top: 28px; }
}