/* Careers, in the round-five system (the homepage chain, imported below):
   the same header, grounds, type reveals and footer arch, plus role rows and
   the application form in the lock page's field style. */
@import url('../homepage-r5-src/site.css');

/* Hero, set like the system's r4-answer: centered in the viewport so the
   CTA clears the fold, with the CTA gap tighter than the sub gap. */
.cr-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(120px,17vh,190px) clamp(40px,7vh,80px)}
.cr-hero .cr-title{grid-column:1/span 10}
.cr-hero .cr-sub{grid-column:1/span 5;margin-top:clamp(32px,5vh,56px)}
.cr-hero .pill{grid-column:1/span 5;justify-self:start;margin-top:clamp(24px,3vh,36px)}
@media(max-width:760px){.cr-hero .cr-title,.cr-hero .cr-sub,.cr-hero .pill{grid-column:1/-1}}

/* What we value: one row of three, over the gradient. */
.cr-values{padding-block:var(--section)}
.cr-values .cr-title{grid-column:1/span 9}
.cr-value-list{grid-column:1/-1;margin-top:clamp(64px,8vw,128px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(40px,5vw,72px)}
.cr-value-list li{display:flex;flex-direction:column;gap:14px}
.cr-value-list li::before{content:"";height:3px;margin-bottom:12px;background:radial-gradient(circle,var(--rule) 0 .9px,transparent 1.3px) 0 50%/7px 3px repeat-x}
.cr-value-list p{max-width:32ch}
@media(max-width:760px){.cr-value-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cr-value-list{grid-template-columns:1fr}}

/* Open positions: rows like the homepage's segments, on oat. */
.cr-roles{padding-block:var(--section)}
.cr-roles .cr-title{grid-column:1/span 9}
.cr-roles .r5-segments{margin-top:clamp(48px,6vw,96px)}

/* The application form, set like the lock page on night. */
.cr-apply{padding-block:var(--section)}
.cr-apply .cr-title{grid-column:1/span 6}
.cr-apply-intro{grid-column:1/span 5;margin-top:24px}
.cr-form{grid-column:1/span 6;margin-top:clamp(32px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vw,28px)}
.cr-form .r5-lock-field{width:100%;margin-top:0}
.cr-form .pill{margin-top:12px}
.cr-form[hidden]{display:none}
.cr-form-done{grid-column:1/span 6;margin-top:clamp(32px,4vw,56px)}
.cr-form-done[hidden]{display:none}
.cr-form-done .t-body{margin-top:16px;max-width:36ch}
.cr-form-status{color:var(--orange)}
.cr-apply select,.cr-apply textarea{font:inherit;font-size:var(--t-big);letter-spacing:.06em;color:var(--oat);caret-color:var(--oat);background:transparent;border:0;border-bottom:1px solid rgba(215,212,204,.45);border-radius:0;padding:4px 0 12px;width:100%;outline:none;resize:vertical}
.cr-apply select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23d7d4cc' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:28px}
.cr-apply select option{color:var(--ink);background:#fff}
.cr-apply :is(select,textarea):focus-visible{border-bottom-color:var(--oat);box-shadow:0 1px 0 var(--oat)}
@media(max-width:760px){.cr-apply .cr-title,.cr-apply-intro,.cr-form,.cr-form-done{grid-column:1/-1}}