/* =====================================================================
   Careers (2026-09-08). One screen: the word, one open role as a row,
   and the application under it when the row is opened. Nothing else.
   ===================================================================== */
.cr{
  --pad:clamp(1rem, 3vw, 2.5rem);
  --l1:color-mix(in srgb, var(--paper) 22%, transparent);
  --l2:color-mix(in srgb, var(--paper) 38%, transparent);
  --t2:color-mix(in srgb, var(--paper) 62%, transparent);
  --t3:color-mix(in srgb, var(--paper) 45%, transparent);
  --warn:#E0A16A;
  display:block; background:var(--ink); color:var(--paper); overflow-x:clip; min-height:100svh;
}
.cr p{margin:0}
.cr a{color:inherit}
.cr .mono{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase}
[dir="rtl"] .cr .mono{letter-spacing:0; font-size:.74rem}
.cr-hero{padding:max(14rem, 26vh) var(--pad) clamp(4rem, 10vh, 8rem)}
.cr-h{font-family:var(--display); font-weight:400; font-size:clamp(2.9rem, 7.2vw, 7rem); line-height:1.02; letter-spacing:.005em; margin:0 0 clamp(2.4rem, 5vh, 4rem)}
[dir="rtl"] .cr-h{letter-spacing:0; line-height:1.3}
.cr-k{display:block; color:var(--t2); margin-bottom:1.2rem}
.cr-k2{margin-top:clamp(3rem, 7vh, 5rem)}
.cr-role{border-top:1px solid var(--l2); border-bottom:1px solid var(--l1)}
.cr-open{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.5rem 2rem; align-items:center; width:100%; padding:1.4rem 0; background:none; border:0; color:inherit; font:inherit; text-align:start; cursor:pointer}
.cr-open b{display:block; font-weight:500; font-size:clamp(1.25rem, 1.8vw, 1.6rem); line-height:1.25}
.cr-open span{display:block; color:var(--t2); margin-top:.35rem}
.cr-open i{font-style:normal; font-family:var(--sans); font-weight:500; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.8rem}
.cr-open i::before{content:"\2192"; font-size:1.5rem; line-height:1; transition:transform .35s var(--e-out)}
[dir="rtl"] .cr-open i::before{transform:scaleX(-1)}
.cr-open:hover i::before{transform:translateX(6px)}
[dir="rtl"] .cr-open:hover i::before{transform:scaleX(-1) translateX(6px)}
.cr-open[aria-expanded="true"] i::before{transform:rotate(90deg)}
[dir="rtl"] .cr-open[aria-expanded="true"] i::before{transform:scaleX(-1) rotate(90deg)}
.cr-role-d{color:var(--t2); line-height:1.6; max-width:64ch; padding:0 0 1.5rem; font-size:1.02rem}
.cr-apply{padding:1.6rem 0 2rem; border-top:1px solid var(--l1); max-width:44rem}
.cr-apply[hidden]{display:none}
.cr-fields{display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem}
.cr-field{position:relative; display:block; padding:1rem 0 .55rem; border-bottom:1px solid var(--l1); transition:border-color .3s}
.cr-field.is-wide{grid-column:1 / -1}
.cr-field:focus-within{border-bottom-color:var(--paper)}
.cr-field.has-error{border-bottom-color:var(--warn)}
.cr-lab{display:block; color:var(--t2); margin-bottom:.3rem}
.cr-in{width:100%; background:none; border:0; outline:0; color:var(--paper); font:inherit; font-size:1.05rem; line-height:1.4; padding:.15rem 0; border-radius:0; -webkit-appearance:none}
textarea.cr-in{resize:vertical; min-height:6rem}
.cr-err{position:absolute; inset-inline-end:0; bottom:.65rem; color:var(--warn)}
.cr-nav{display:flex; justify-content:flex-end; margin-top:2rem}
.cr-send{display:inline-flex; align-items:center; gap:.9rem; background:none; border:0; padding:.4rem 0; cursor:pointer; color:var(--paper); font-family:var(--sans); font-weight:500; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; line-height:1}
.cr-send:disabled{opacity:.45; cursor:default}
.cr-arr{display:inline-block; font-size:1.5rem; line-height:1; transition:transform .35s var(--e-out)}
[dir="rtl"] .cr-arr{transform:scaleX(-1)}
.cr-send:hover .cr-arr{transform:translateX(6px)}
[dir="rtl"] .cr-send:hover .cr-arr{transform:scaleX(-1) translateX(6px)}
.cr-done, .cr-fail{margin-top:1.4rem; line-height:1.55}
.cr-fail{color:var(--warn)}
.cr-fail a{color:var(--paper); text-underline-offset:4px}
.cr-hp{position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; clip-path:inset(50%)}
.cr-send:focus-visible, .cr-open:focus-visible{outline:2px solid var(--paper); outline-offset:4px}
@media (max-width:720px){
  .cr-hero{padding-top:7.5rem}
  .cr-h{font-size:clamp(2.5rem, 12vw, 3.6rem)}
  .cr-open{grid-template-columns:1fr}
  .cr-fields{grid-template-columns:1fr}
}