/* Careers: intro, three values, open roles as expandable rows, closing line. */
.careers-head { padding-bottom: var(--fp-space-block); }
.careers-head .lead { max-width: 600px; }

.values { list-style: none; margin: 0; padding: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-top: 1px solid var(--fp-border); }
.values .n { font: 500 12px/1 var(--fp-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fp-text-label); }
.values p { margin: 16px 0 0; font: 400 17px/1.55 var(--fp-font-lead); color: #B8C8D6; }

.careers-roles { padding-top: var(--fp-space-section); }
.roles-title { margin: 0 0 24px; font: 500 clamp(26px, 3vw, 34px)/1.1 var(--fp-font-display); letter-spacing: -0.03em; color: var(--fp-text); }
.roles { border-top: 1px solid var(--fp-border); }
.role { border-bottom: 1px solid var(--fp-border); }
.role summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.role summary::-webkit-details-marker { display: none; }
.role summary:focus-visible { outline: 2px solid var(--fp-focus); outline-offset: 4px; border-radius: 4px; }
.role-title { font: 500 20px/1.3 var(--fp-font-display); color: var(--fp-text); transition: color .15s; }
.role summary:hover .role-title { color: #FFFFFF; }
.role-meta { font-size: 14px; color: var(--fp-text-muted); text-align: right; }
.role-toggle { position: relative; width: 14px; height: 14px; justify-self: end; }
.role-toggle::before, .role-toggle::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--fp-text-muted); transition: transform .2s; }
.role-toggle::after { transform: rotate(90deg); }
.role[open] .role-toggle::after { transform: rotate(0deg); }

.role-body { padding: 0 0 32px; max-width: 920px; }
.role-pitch { margin: 0 0 28px; font: 400 18px/1.55 var(--fp-font-lead); color: #DCE6EE; }
.role-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-bottom: 32px; }
.role-cols h3 { margin: 0 0 12px; font: 500 12px/1 var(--fp-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fp-text-label); }
.role-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.role-cols li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: #B8C8D6; }
.role-cols li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 1px; background: #58758D; }

.careers-apply { padding-block: var(--fp-space-section); }
.apply-line { margin: 0; font: 500 clamp(30px, 4.2vw, 48px)/1.1 var(--fp-font-display); letter-spacing: -0.035em; }
.apply-line span { display: block; color: #F2F5F8; }
.apply-line span + span { color: #6E879C; }
.apply-note { margin: 24px 0 0; font: 400 17px/1.6 var(--fp-font-lead); color: #B8C8D6; }
.apply-note a { color: #F2F5F8; text-decoration: underline; text-decoration-color: #58758D; text-underline-offset: 4px; }
.apply-note a:hover { text-decoration-color: #F2F5F8; }

@media (max-width: 760px) {
  .values { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .role summary { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 16px; }
  .role-meta { grid-column: 1; grid-row: 2; text-align: left; }
  .role-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .role-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}