/* The careers pages (spec docs/specs/2026-11-12-careers-pages.md; Rafael approved the mockup on
   2026-11-12: Telemyr Ads folder, Website sections/Careers, css/careers.css), on the site's own styles
   (styles.css; a role's page also loads the contact page's rows, contact/contact.css and
   case-studies/dots/case.css). Type stays in the shared roles; this file only places, sizes and
   colours. White page, black words, the one thin grey rule. No filled grey boxes ("we dont use those
   grey squares"), no shadows. */
.careers-page { background: var(--color-white); color: var(--page-ink); }
.careers { display: block; }

/* The careers page: staying small, told in big numbers. Each number block (.cn) works as the 404
   page's: one canvas under the words, the words in difference (black on white, white where a grain
   passes under them), the number plain type until it is pointed at, then grains (assets/not-found.js,
   the 404's own script, started for each block by page.js). */
.cn-sec { --svc-muted: color-mix(in srgb, var(--color-black) 63.92157%, var(--color-white)); padding: 0 var(--page-gutter) clamp(3rem, 6vw, 6rem); color: var(--page-ink); }
.cn-sec.partner-services { padding-top: 0; }
.cn { position: relative; isolation: isolate; overflow: hidden; margin-inline: calc(var(--page-gutter) * -1); background: var(--color-white); color: var(--color-black); touch-action: pan-y pinch-zoom; }
.cn-top { margin-inline: 0; height: 100vh; height: 100svh; min-height: 540px; }
.cn-ink { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cn-frame { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(5rem, 11vw, 10rem) var(--page-gutter) clamp(1.5rem, 3vw, 2.5rem); mix-blend-mode: difference; color: var(--color-white); pointer-events: none; }
.cn-top .cn-line { max-width: 44ch; }
.cn-top .cn-frame { height: 100%; justify-content: center; padding-block: calc(var(--nav-top-space, 0px) + 1.5rem) max(3rem, var(--nav-dock-clearance)); }
.cn-frame a { pointer-events: auto; }
.cn-tag { margin: 0 0 clamp(1rem, 3svh, 2rem); font-family: var(--font-section-heading); font-weight: var(--weight-section-heading); font-synthesis: weight; font-size: calc(13.77px * var(--type-phone-scale)); line-height: 1.4; letter-spacing: -0.005em; }
.cn-num { display: flex; align-items: baseline; justify-content: center; margin: 0 0 clamp(1.25rem, 3vw, 2.5rem); font-family: var(--font-primary); font-weight: 400; font-size: clamp(7rem, 19vw, 17rem); line-height: .78; letter-spacing: -0.045em; }
.cn-num.is-big { margin-bottom: clamp(1.25rem, 4svh, 2.75rem); font-size: clamp(8rem, min(31vw, 42svh), 28rem); }
.cn-d { display: inline-block; }
.cn-title { margin: 0; max-width: 18ch; text-wrap: balance; font-family: var(--font-section-heading); font-weight: var(--weight-section-heading); font-synthesis: weight; }
.cn-frame .cn-line { margin: var(--space-heading-subtitle) 0 0; max-width: 44ch; text-wrap: balance; }
.cn-frame .cn-go { margin: clamp(1.5rem, 3.5svh, 2.5rem) 0 0; }
.cn-pill { display: inline-flex; align-items: center; gap: .6em; height: 3rem; padding: 0 1.3rem 0 1.45rem; border-radius: 999px; background: var(--color-white); color: var(--color-black); font-size: var(--type-body-size); line-height: 1; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cn-pill svg { display: block; width: 1em; height: 1em; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.cn-pill:hover svg, .cn-pill:focus-visible svg { transform: translateX(3px); }
.cn-pill:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cn-pill svg { transition: none; } }

/* three things side by side, each under its own big number (Rafael, 2026-11-12: "our top 3 thing we
   look for. Make the numbers nice like the numbers page of careers") */
.cn-trio { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); width: min(100%, 88rem); margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; }
.cn-trio li { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cn-trio .cn-num { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); font-size: clamp(6rem, 13vw, 12rem); }
/* each of the three is two lines, always (Rafael, 2026-11-12: "make these all two lines"): the breaks
   are set by hand and the words sized so the longest line fits its column */
.cn-trio h3 { margin: 0; white-space: nowrap; font-size: min(var(--type-body-lead-size), 1.58vw); }
.cn-three .cn-frame { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 1000px) {
  .cn-trio { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .cn-trio .cn-num { font-size: clamp(7rem, 34vw, 12rem); }
  .cn-trio h3 { font-size: var(--type-body-lead-size); }
}

/* the two founders: their cut-outs as on the home page, bigger, a name and a line under each */
.cn-people { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 20rem)); justify-content: center; gap: clamp(2rem, 6vw, 6rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; text-align: center; }
/* Both at the same scale. Fermin's picture (12 Nov 2026, arms crossed like Rafael's) is framed as
   Rafael's is: measured, their heads and shoulders are the same size at the same height, so the two
   are simply set as tall as each other and stand on one line. Each line of words under them is two
   lines, so the pair is even. */
.cn-people { --ph: clamp(10.5rem, 18vw, 15.5rem); }
.cn-people li { display: grid; grid-template-rows: var(--ph) auto auto; justify-items: center; }
.cn-people img { display: block; align-self: end; width: auto; height: var(--ph); margin: 0; filter: grayscale(1); }
.cn-people h3 { margin-top: 1.25rem; }
.cn-people h3 { font-family: var(--font-section-heading); font-weight: var(--weight-section-heading); font-synthesis: weight; }
.cn-people p { max-width: 17em; margin: .4rem 0 0; color: var(--svc-muted); text-wrap: balance; }
.capabilities.cn-from { padding: clamp(3rem, 6vw, 5rem) 0 0; }

/* Steps in order, as a timeline (Rafael, 2026-11-12: "the 1,2,3,4 could be big and black (not as big
   as the chapter numbers) but nicer, or try a nice timeline"): a big black number over each step, and
   under the numbers one thin black line that runs from dot to dot. The dots come up one after the
   other and the line runs between them the first time the steps are seen (page.js). Phones: the
   line runs down the side. */
.cn-steps { --dot: .8rem; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 72rem; margin: clamp(2rem, 4vw, 3.5rem) auto 0; padding: 0; }
.cn-steps.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cn-steps li { min-width: 0; }
.cn-steps-n { margin: 0; font-size: clamp(3.75rem, 7vw, 6.5rem); line-height: .85; letter-spacing: -0.045em; }
.cn-steps-line { position: relative; display: block; height: var(--dot); margin: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1rem, 2vw, 1.5rem); }
.cn-steps-line::before { content: ""; position: absolute; left: 0; top: 0; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--color-black); }
.cn-steps-line::after { content: ""; position: absolute; left: calc(var(--dot) / 2); right: calc(var(--dot) / -2); top: calc(50% - .5px); height: 1px; background: var(--color-black); transform-origin: left center; }
.cn-steps li:last-child .cn-steps-line::after { display: none; }
.cn-steps h3, .cn-steps li > p.text-large { margin: 0; padding-right: clamp(1rem, 2.5vw, 2.5rem); }
.cn-steps li > p.text-large { margin-top: .5em; color: var(--svc-muted); text-wrap: pretty; }
.cn-steps li:nth-child(2) { --d: .45s; }
.cn-steps li:nth-child(3) { --d: .9s; }
.cn-steps li:nth-child(4) { --d: 1.35s; }
.cn-steps.is-ready .cn-steps-line::before { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s); }
.cn-steps.is-ready .cn-steps-line::after { transition: transform .45s ease-out calc(var(--d, 0s) + .15s); }
.cn-steps.is-ready:not(.is-seen) .cn-steps-line::before { transform: scale(0); }
.cn-steps.is-ready:not(.is-seen) .cn-steps-line::after { transform: scaleX(0); }
@media (max-width: 700px) {
  .cn-steps, .cn-steps.is-three { grid-template-columns: minmax(0, 1fr); }
  .cn-steps li { position: relative; padding: 0 0 2.25rem 2.5rem; }
  .cn-steps li:last-child { padding-bottom: 0; }
  .cn-steps-n { font-size: 3.75rem; }
  .cn-steps-line { position: absolute; left: 0; top: .9rem; bottom: -.9rem; width: var(--dot); height: auto; margin: 0; }
  .cn-steps-line::after { left: calc(50% - .5px); right: auto; top: calc(var(--dot) / 2); bottom: 0; width: 1px; height: auto; transform-origin: center top; }
  .cn-steps h3 { margin-top: .9rem; }
  .cn-steps h3, .cn-steps li > p.text-large { padding-right: 0; }
  .cn-steps.is-ready:not(.is-seen) .cn-steps-line::after { transform: scaleY(0); }
}
@media (max-width: 560px) {
  .cn-people { grid-template-columns: minmax(0, 1fr); }
  .cn-num { font-size: 36vw; }
  .cn-num.is-big { font-size: min(44vw, 40svh); }
}

/* a role's own dots in its row, as the contact page's rows have (page.js) */
.careers-dot { position: relative; display: block; width: 5.5rem; height: 3.8rem; color: var(--color-black); touch-action: pan-y pinch-zoom; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.careers-dot canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: filter .2s ease; }

/* open roles: the services' rows, each with its dots */
.careers-index a { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.5fr) 2rem; align-items: center; }
.careers-index a:focus-visible .careers-dot canvas { filter: invert(1); }
.careers-index a:focus-visible .careers-dot { transform: translateX(var(--svc-row-inset)); }
@media (hover: hover) {
  .careers-index a:hover .careers-dot canvas { filter: invert(1); }
  .careers-index a:hover .careers-dot { transform: translateX(var(--svc-row-inset)); }
}

/* the cards under one rule, as each service's: here they are the words themselves, so phones keep them */
.careers-cards { max-width: 72rem; margin-inline: auto; }
.careers-cards.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partner-services .careers-cards li:hover h3 { background: transparent; }

/* a role's page: one long service, its parts under centred titles */
.careers-back { margin: 0; text-align: center; color: var(--color-text-grey); }
.careers-back a { color: inherit; text-decoration: none; }
.careers-back a:hover { text-decoration: underline; text-underline-offset: .2em; }
.careers-back a:focus-visible { outline: 2px solid var(--color-black); outline-offset: 4px; }
.careers-job > .cn:first-child .cn-frame { padding-top: clamp(2.5rem, 6vw, 5rem); }
/* why the job exists: a short passage, its turn set big */
.careers-why { max-width: 56rem; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; text-align: center; }
.careers-why p { margin: 0; text-wrap: pretty; }
.careers-why .text-large { max-width: 46rem; margin-inline: auto; }
.careers-why p + p { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
/* its two strong lines: big, in the regular weight, as the founders' sentence on the home page
   (Rafael, 2026-11-12: "these need to be far stronger") */
.careers-why .careers-why-big { max-width: 17ch; margin: clamp(3rem, 6vw, 5.5rem) auto; font-size: var(--type-h1-size); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); text-wrap: balance; }
.careers-why .careers-why-big:last-child { max-width: 20ch; margin-bottom: clamp(1rem, 2vw, 2rem); }
.careers-why .careers-why-big + .text-large { margin-top: calc(clamp(3rem, 6vw, 5.5rem) * -.55); }
.careers-job .careers-rare { margin-top: clamp(2.5rem, 5vw, 4rem); }
.careers-job .cn-steps { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.careers-post .svc-sub, .careers-job .cn { scroll-margin-top: calc(var(--nav-top-space, 0px) + 1rem); }
/* one size for every heading and big line of the post (Rafael, 2026-11-12: "not sure i like the
   difference in size of fonts"): the section headings are as big as the numbered ones and the big lines */
.careers-post .svc-sub h3 { max-width: 20ch; text-wrap: balance; font-family: var(--font-section-heading); font-weight: var(--weight-section-heading); font-synthesis: weight; font-size: var(--type-h1-size); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); }

/* a name on the left, its words on the right, between the rules: the services' row, not a link */
.careers-rows { max-width: 60rem; margin: clamp(2.5rem, 5vw, 4.5rem) auto 0; padding: 0; border-bottom: var(--rule); }
.careers-rows div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: .35rem clamp(1rem, 3vw, 3rem); align-items: baseline; padding: clamp(1rem, 2vw, 1.5rem) 0; border-top: var(--rule); }
.careers-rows dt { margin: 0; }
.careers-rows dd { margin: 0; color: var(--svc-muted); text-wrap: pretty; }
/* what we work with: what we believe and expect in black, the tools small and grey under it */
.careers-rows.is-stack dd { color: var(--color-black); }
.careers-tools { display: block; margin-top: .7em; color: var(--color-text-grey); line-height: 1.7; }

/* apply: the contact page's rows (contact/contact.css), sent by assets/apply-form.js; then the thank-you */
.careers-apply { max-width: 60rem; margin: clamp(2.5rem, 5vw, 4.5rem) auto 0; }
/* more than one link: each in its own box, one under the other, and a quiet "Add another link" */
.careers-links { display: grid; }
.careers-add { display: inline-block; margin: .2em 0 0; padding: .2em 0; border: 0; background: none; color: var(--color-text-grey); font: inherit; font-size: var(--type-body-small-size); line-height: 1.4; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.careers-add[hidden] { display: none; }
.careers-add:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ct-row:focus-within .careers-add { color: color-mix(in srgb, var(--color-white) 70%, transparent); }
/* the CV: the browser's own file box, unseen, over the whole row's box; its file's name shows in its place */
.careers-file .ct-box { position: relative; }
.careers-file-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.careers-file-pick { display: block; padding: .3em 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-grey); }
.careers-file-pick.has-file { color: inherit; }
.careers-file-hint { display: block; color: var(--color-text-grey); }
.ct-row:focus-within .careers-file-pick:not(.has-file), .ct-row:focus-within .careers-file-hint { color: color-mix(in srgb, var(--color-white) 55%, transparent); }
/* the human check: one box to tick, filled when ticked */
.careers-check { position: relative; display: inline-flex; align-items: center; gap: .6em; padding: .3em 0; cursor: pointer; }
.careers-check input { position: absolute; left: 0; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0; opacity: 0; cursor: pointer; }
.careers-check-box { flex: none; width: .85em; height: .85em; border: 1px solid currentColor; border-radius: .15em; transition: background-color .15s ease; }
.careers-check input:checked + .careers-check-box { background: currentColor; }
.careers-check input:focus-visible + .careers-check-box { outline: 2px solid currentColor; outline-offset: 3px; }
.careers-apply .ct-row:hover:not(:focus-within) { background: transparent; }
.careers-done { max-width: 56rem; margin: clamp(2.5rem, 5vw, 4.5rem) auto 0; text-align: center; outline: none; }
.careers-done[hidden], .careers-apply[hidden] { display: none; }
.careers-done .careers-why-big { max-width: 17ch; margin: 0 auto clamp(1.25rem, 2.5vw, 2rem); font-size: var(--type-h1-size); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); text-wrap: balance; }
.careers-done p { margin: 0; }

@media (max-width: 1000px) {
  .careers-cards.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .svc-features.careers-cards { display: grid; }
  .careers-index a { grid-template-columns: 4.25rem minmax(0, 1fr) 1.5rem; }
  .careers-index .careers-dot { grid-row: span 2; width: 4.25rem; height: 2.8rem; }
  .careers-index .svc-index-name { grid-column: 2; grid-row: 1; }
  .careers-index .svc-index-line { grid-column: 2; grid-row: 2; }
  .careers-index .svc-index-arrow { grid-column: 3; grid-row: 1; }
  .careers-rows div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .careers-cards.is-four { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .careers-dot { transition: none; } }
/* a short window: the big number gives way and the line runs wider, so the words and the button stay
   clear of the menu */
@media (max-height: 780px) and (min-width: 601px) {
  .cn-top .cn-num.is-big { margin-bottom: 1rem; font-size: clamp(6rem, min(31vw, 25svh), 28rem); }
  .cn-top .cn-tag { margin-bottom: .75rem; }
  .cn-top .cn-line { max-width: 56ch; margin-top: 1rem; }
  .cn-top .cn-go { margin-top: 1.25rem; }
}