/* The Artifics: Careers. Loaded on the Careers page only, after site.css, whose tokens, frame,
   buttons, chips, cells, faq, statement and field it reuses. Every class here starts with careers-.
   Motion: three moments (the headline rising out of its mask, the product screen switching on, the
   hiring rail drawing from step to step); everything else is the site's 12px rise. Hidden start
   states exist only under html.ata-motion, so without JavaScript or with reduced motion the page is
   complete and still. */

/* Hero --------------------------------------------------------------------- */
.careers-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: clamp(560px, calc(88svh - var(--header-h)), 860px);
}
.careers-hero > .field-canvas {
	position: absolute;
	left: 0;
	top: calc(-1 * var(--header-h));
	z-index: -2;
	width: 100%;
	height: calc(100% + var(--header-h));
	pointer-events: none;
	-webkit-mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent);
	mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent);
}
/* The same veil as the home hero: the claim stays readable wherever a loop swings behind it. */
.careers-hero::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--header-h)) 0 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(18, 17, 16, 0.92) 0%, rgba(18, 17, 16, 0.66) 34%, rgba(18, 17, 16, 0) 56%);
}
.careers-hero-inner {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	padding-block: clamp(24px, 3vw, 48px);
}
.careers-hero-copy { padding-block: 24px; }
.careers-title {
	margin-top: 20px;
	font-size: var(--fs-hero);
	line-height: 1.04;
	letter-spacing: -0.035em;
	font-weight: 500;
}
/* Each line is its own mask; the bottom reserve keeps descenders clear of the clip. */
.careers-title .line {
	display: block;
	overflow: hidden;
	overflow: clip;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}
.careers-title .line-inner { display: block; }
.careers-lede {
	max-width: 32em;
	margin-top: 28px;
	font-size: var(--fs-lead);
	line-height: 1.7;
	color: var(--text-muted);
}
.careers-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.careers-field { width: clamp(300px, min(100%, calc(88svh - var(--header-h) - 120px)), 600px); }

/* What you would build ------------------------------------------------------ */
.careers-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
	margin-top: clamp(40px, 5vw, 64px);
}
.careers-cell { min-width: 0; }
.careers-cell .cell-title { gap: 12px; }
.careers-cell--product {
	grid-column: span 7;
	padding-right: 0;
	padding-bottom: 0;
	min-height: 460px;
}
.careers-cell--product .cell-body { padding-right: clamp(24px, 2.6vw, 36px); }
.careers-guester { width: 30px; height: auto; color: var(--text); flex: none; }
.careers-cell--team { grid-column: span 5; background: var(--bg-inset); }
.careers-cell--agents {
	grid-column: span 5;
	background:
		radial-gradient(70% 60% at 50% 38%, rgba(243, 241, 236, 0.06), transparent 70%),
		var(--bg-raised);
}
.careers-cell--systems { grid-column: span 7; background: var(--bg); border-color: var(--line-strong); }

/* The product screen sits in the bottom right corner and runs off the cell's edges. */
.careers-shot {
	position: relative;
	margin: auto 0 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-top: 1px solid var(--line-strong);
	border-left: 1px solid var(--line-strong);
	border-radius: var(--radius-control) 0 0 0;
	background: var(--bg);
}
.careers-shot img {
	width: 125%;
	max-width: none;
	height: auto;
	transform-origin: 0 0;
}

/* The team: the About page's people, in its order, names under the photos. */
.careers-team {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: auto;
}
.careers-member { display: flex; flex-direction: column; min-width: 0; }
.careers-member-photo {
	display: block;
	aspect-ratio: 4 / 5;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: var(--radius-control);
	background: var(--bg-raised);
}
.careers-member-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 32%;
	filter: grayscale(1);
}
.careers-member-name { font-size: 0.9375rem; line-height: 1.3; font-weight: 500; color: var(--text); }
.careers-member-role { margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); }
.careers-team-link { font-size: var(--fs-small); }

/* Agents around the hub, joined by live dashed spokes. */
.careers-orbit { position: relative; height: 280px; flex: none; }
.careers-spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.careers-spokes path {
	fill: none;
	stroke: var(--line-bright);
	stroke-width: 1;
	stroke-dasharray: 2 6;
	vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
	.careers-cell--agents.is-in .careers-spokes path { animation: ata-flow 1.6s linear infinite; }
}
.careers-orbit-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
}
.careers-agents { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.careers-agent {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transform: translate(-50%, -18px);
}
.careers-agent-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: var(--bg);
	box-shadow: 0 0 0 4px rgba(25, 24, 22, 0.8), 0 0 24px rgba(243, 241, 236, 0.06);
	color: var(--text);
}
.careers-agent-name {
	font-size: 0.75rem;
	line-height: 1.2;
	color: var(--text-soft);
	white-space: nowrap;
	text-shadow: 0 0 8px var(--bg-raised), 0 0 14px var(--bg-raised);
}

/* One layer above the software a business already runs: the mark, a live wire, the systems. */
.careers-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block: auto;
	padding-block: 8px;
}
.careers-stack-wire {
	position: relative;
	width: 1px;
	height: 40px;
	overflow: hidden;
}
.careers-stack-wire::before {
	content: "";
	position: absolute;
	left: 0;
	top: -12px;
	width: 1px;
	height: calc(100% + 12px);
	background: repeating-linear-gradient(var(--line-bright) 0 2px, transparent 2px 6px);
}
@media (prefers-reduced-motion: no-preference) {
	.careers-cell--systems.is-in .careers-stack-wire::before { animation: ata-careers-wire 0.9s linear infinite; }
}
@keyframes ata-careers-wire {
	to { transform: translateY(12px); }
}
.careers-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 34rem;
	margin: 0;
	padding: 16px;
	list-style: none;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-panel);
}

/* Working here ------------------------------------------------------------- */
.careers-working { background: var(--bg-raised); border-block: 1px solid var(--line); }
.careers-working-inner { padding-block: clamp(88px, 10vw, 152px); }
.careers-statement {
	max-width: none;
	font-size: clamp(2.25rem, 4.6vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
}
.careers-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(48px, 6vw, 80px);
	border-top: 1px solid var(--line-strong);
}
.careers-fact { padding: 28px 32px 0 0; }
.careers-fact + .careers-fact { padding-left: 32px; border-left: 1px solid var(--line); }
.careers-fact dt { font-size: 0.9375rem; line-height: 1.4; color: var(--text-muted); }
.careers-fact dd {
	margin: 10px 0 0;
	max-width: 22em;
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--text);
}

/* Open roles --------------------------------------------------------------- */
.careers-roles .section-title { margin-bottom: clamp(32px, 4vw, 48px); }
.careers-role-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 28px;
	gap: 24px;
	min-height: 76px;
}
.careers-role-head .faq-toggle { grid-area: 1 / -2; }
.careers-role-title { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.careers-role-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9375rem; font-weight: 400; color: var(--text-muted); }
.careers-role-body { padding-bottom: 28px; }
/* The open panel keeps a little room past its clip, so the Apply button's focus ring is never cut. */
.careers-role[open]::details-content { overflow-clip-margin: 6px; }
.careers-role-text { max-width: 40em; font-size: 0.9375rem; line-height: 1.7; color: var(--text-muted); }
.careers-role-text p { padding: 0; }
.careers-role-text > * + * { margin-top: 1em; }
.careers-role-text ul, .careers-role-text ol { padding-left: 1.25em; }
.careers-role-body .button { margin-top: 24px; }

/* No listed roles: an open application, framed as its own panel. */
.careers-empty {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 32px 48px;
	padding: clamp(28px, 3.4vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	background:
		radial-gradient(60% 90% at 0% 0%, rgba(243, 241, 236, 0.05), transparent 70%),
		var(--bg-raised);
}
.careers-empty-mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 28px;
}
.careers-empty-mark .field-mark { width: 18px; height: 18px; }
.careers-empty-title { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.careers-empty-body { margin-top: 12px; max-width: 34em; font-size: var(--fs-lead); line-height: 1.65; color: var(--text-muted); }
.careers-empty-actions { display: grid; justify-items: start; gap: 16px; }
.careers-empty-actions .text-link { font-size: var(--fs-small); }

/* How we hire --------------------------------------------------------------- */
.careers-rail {
	--gap: clamp(24px, 4vw, 64px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
	margin: clamp(40px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
}
.careers-step { position: relative; min-width: 0; }
/* One connector per step, from this glyph to the next, with 8px of air at each end. */
.careers-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 52px;
	top: 22px;
	width: calc(100% + var(--gap) - 60px);
	height: 1px;
	background: var(--line-bright);
	transform-origin: 0 50%;
}
.careers-step-glyph {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--bg);
	color: var(--text);
}
.careers-step-glyph::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--text);
	border-radius: 50%;
	box-shadow: 0 0 24px rgba(243, 241, 236, 0.12);
}
.careers-step-copy { margin-top: 24px; }
.careers-step-name { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.careers-step-text { margin-top: 10px; max-width: 26em; font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); }

/* Closing ------------------------------------------------------------------ */
.careers-closing-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 48px;
	border-top: 1px solid var(--line);
	padding-block: clamp(96px, 12vw, 176px);
	overflow: hidden;
}
.careers-closing-title {
	font-size: clamp(2.75rem, 6vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}
.careers-closing-title .line { display: block; }
.careers-closing-body { margin-top: 24px; max-width: 32em; font-size: var(--fs-lead); line-height: 1.65; color: var(--text-soft); }
.careers-closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.careers-closing-actions .text-link { font-size: var(--fs-small); }
.careers-closing-mark { color: var(--line); line-height: 0; }
.careers-closing-glyph { width: clamp(200px, 20vw, 320px); height: auto; }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1023px) {
	.careers-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.careers-cell--product, .careers-cell--systems { grid-column: 1 / -1; }
	.careers-cell--team, .careers-cell--agents { grid-column: auto; }
	.careers-closing-inner { grid-template-columns: 1fr; }
	.careers-closing-mark { display: none; }
}
@media (max-width: 959px) {
	.careers-hero-inner { grid-template-columns: 1fr; gap: 8px; }
	.careers-field { width: min(100%, 380px); margin-inline: auto; }
	.careers-hero::after { background: linear-gradient(180deg, rgba(18, 17, 16, 0.92) 0%, rgba(18, 17, 16, 0.72) 36%, rgba(18, 17, 16, 0) 56%); }
}
@media (max-width: 767px) {
	.careers-bento { grid-template-columns: 1fr; }
	.careers-cell--product, .careers-cell--team, .careers-cell--agents, .careers-cell--systems { grid-column: 1 / -1; }
	.careers-cell--product { min-height: 0; }
	.careers-orbit { height: 260px; }
	.careers-facts { grid-template-columns: 1fr; }
	.careers-fact { padding-right: 0; }
	.careers-fact + .careers-fact { margin-top: 28px; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
	.careers-role-head { grid-template-columns: minmax(0, 1fr) 28px; row-gap: 6px; align-items: start; }
	.careers-role-meta { grid-row: 2; grid-column: 1; }
	.careers-empty { grid-template-columns: 1fr; }
	/* The rail turns vertical: glyphs on the left, the connector runs down between them. */
	.careers-rail { --gap: 36px; grid-template-columns: 1fr; }
	.careers-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; }
	.careers-step-copy { margin-top: 9px; }
	.careers-step:not(:last-child)::before {
		left: 22px;
		top: 52px;
		bottom: calc(-1 * var(--gap) + 8px);
		width: 1px;
		height: auto;
		transform-origin: 50% 0;
	}
}
@media (max-width: 639px) {
	.careers-title { font-size: 2.25rem; }
	.careers-lede { margin-top: 20px; font-size: 1rem; }
	.careers-actions { margin-top: 28px; }
	.careers-team { gap: 10px; }
	.careers-member-name { font-size: 0.8125rem; }
	.careers-member-role { font-size: 0.75rem; }
}

/* Motion ---------------------------------------------------------------------- */
/* A. The hero arrives on load: label, then each headline line out of its mask, then the lede and
   actions. Keyframes, not reveals: site.js settles anything on screen at boot without playing it. */
@media screen and (prefers-reduced-motion: no-preference) {
	.ata-motion .careers-title .line-inner {
		animation: ata-careers-line 700ms var(--ease-out) both;
		animation-delay: calc(80ms + var(--l, 0) * 80ms);
	}
	.ata-motion .careers-enter {
		animation: ata-careers-enter 600ms var(--ease-out) both;
		animation-delay: var(--t, 0ms);
	}
}
@keyframes ata-careers-line {
	from { transform: translateY(105%); }
}
@keyframes ata-careers-enter {
	from { opacity: 0; transform: translateY(12px); }
}

@media screen {
	/* B. The product screen switches on from the top while the image settles from a slight zoom. */
	.ata-motion:not(.ata-reveal-all) .careers-cell--product:not(.is-in) .careers-shot { clip-path: inset(0 0 100% 0); }
	.ata-motion:not(.ata-reveal-all) .careers-cell--product:not(.is-in) .careers-shot img { transform: scale(1.08); }

	/* The people arrive in reading order; agents and systems follow their cell in. */
	.ata-motion:not(.ata-reveal-all) .careers-cell--team:not(.is-in) .careers-member { opacity: 0; transform: translateY(8px); }
	.ata-motion:not(.ata-reveal-all) .careers-cell--agents:not(.is-in) .careers-agent-icon { opacity: 0; scale: 0.9; }
	.ata-motion:not(.ata-reveal-all) .careers-cell--systems:not(.is-in) .careers-chips .chip { opacity: 0; transform: translateY(6px); }

	/* C. Each step lights, then the rail draws to the next one, which lights as the line arrives. */
	.ata-motion:not(.ata-reveal-all) .careers-rail:not(.is-in) .careers-step::before { transform: scaleX(0); }
	.ata-motion:not(.ata-reveal-all) .careers-rail:not(.is-in) .careers-step-glyph::after { opacity: 0; }
	.ata-motion:not(.ata-reveal-all) .careers-rail:not(.is-in) .careers-step-copy { opacity: 0; transform: translateY(8px); }
}
@media screen and (max-width: 767px) {
	.ata-motion:not(.ata-reveal-all) .careers-rail:not(.is-in) .careers-step::before { transform: scaleY(0); }
}
/* site.js settles an on-screen rail with .no-transition, whose * does not reach pseudo-elements. */
@media screen {
	.no-transition .careers-step::before, .no-transition .careers-step-glyph::after { transition: none !important; }
}
/* The resting shape is an inset too: none and inset() cannot interpolate, so the wipe would just pop. */
.ata-motion .careers-shot { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-in-out) 150ms; }
.ata-motion .careers-shot img { transition: transform 1400ms var(--ease-out) 150ms; }
.ata-motion .careers-member {
	transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
	transition-delay: calc(200ms + var(--i, 0) * 80ms);
}
.ata-motion .careers-agent-icon {
	transition: opacity 500ms var(--ease-out), scale 500ms var(--ease-out);
	transition-delay: calc(240ms + var(--i, 0) * 70ms);
}
.ata-motion .careers-chips .chip {
	transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
	transition-delay: calc(200ms + var(--i, 0) * 40ms);
}
.ata-motion .careers-step::before {
	transition: transform 420ms var(--ease-in-out);
	transition-delay: calc(180ms + var(--s, 0) * 450ms);
}
.ata-motion .careers-step-glyph::after {
	transition: opacity 300ms ease;
	transition-delay: calc(150ms + var(--s, 0) * 450ms);
}
.ata-motion .careers-step-copy {
	transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
	transition-delay: calc(150ms + var(--s, 0) * 450ms);
}

@media print {
	.careers-hero { min-height: 0; }
	.careers-hero > .field-canvas, .careers-field, .careers-closing-mark { display: none; }
}