/**
 * Join the Team — careers page styles.
 * @package yendigital
 */

.jt-page,
.jt-modal {
	--jt-ink:     var( --yd-heading );
	--jt-body:    var( --yd-body );
	--jt-accent:  var( --yd-primary );
	--jt-line:    var( --yd-line );
	--jt-dark:    #0c0d11;
	--jt-dark-2:  #14161c;
	--jt-soft:    #faf9f8;
	--jt-blush:   #ffeeec;
	--jt-cream:   #faf7f2; 
	--jt-radius:  26px;

	--jt-gap:     clamp( 20px, 2.4vw, 34px );

	--jt-grad-1: #ff3951;
	--jt-grad-2: #d81e35;
	--jt-grad-3: #8b2fc9;
	--jt-grad-4: #4b5fe0;

	--jt-red-bg:     #ffe9ec;  --jt-red-fg:     #ff3951;
	--jt-purple-bg:  #f0eaff;  --jt-purple-fg:  #7c3aed;
	--jt-green-bg:   #e4f7ef;  --jt-green-fg:   #0fa968;
	--jt-amber-bg:   #fff3e0;  --jt-amber-fg:   #ef8f0c;
	--jt-blue-bg:    #e8f0ff;  --jt-blue-fg:    #3f7fe0;

	font-family: var( --yd-font );
}

.jt-page {
	display: block;
	padding: var( --jt-gap ) 0;
	overflow-x: clip;
}

.jt-page > .container {
	display: flex;
	flex-direction: column;
	gap: var( --jt-gap );
}

.jt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.jt-btn--primary {
	border-color: var( --jt-accent );
	background: var( --jt-accent );
	color: #fff;
}

.jt-btn--primary:hover {
	border-color: #000;
	background: #000;
	color: #fff;
}

.jt-btn--dark {
	border-color: rgba( 255, 255, 255, 0.22 );
	background: rgba( 12, 13, 17, 0.72 );
	color: #fff;
	backdrop-filter: blur( 6px );
}

.jt-btn--dark:hover {
	border-color: #fff;
	background: #fff;
	color: var( --jt-ink );
}

.jt-btn--outline {
	padding: 10px 22px;
	border-color: var( --jt-accent );
	color: var( --jt-accent );
}

.jt-btn--outline:hover {
	background: var( --jt-accent );
	color: #fff;
}

.jt-btn--ghost {
	border-color: var( --jt-line );
	color: var( --jt-ink );
}

.jt-btn--ghost:hover {
	border-color: var( --jt-ink );
	background: var( --jt-ink );
	color: #fff;
}

.jt-btn--ghost-light {
	border-color: rgba( 255, 255, 255, 0.28 );
	color: #fff;
}

.jt-btn--ghost-light:hover {
	border-color: #fff;
	background: #fff;
	color: var( --jt-ink );
}

.jt-btn__play {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.jt-btn__play svg {
	width: 12px;
	height: 12px;
	margin-left: 1px;
}

.jt-btn__arrow {
	font-size: 15px;
	line-height: 1;
}

.jt-btn:focus-visible,
.jt-role__apply:focus-visible {
	outline: 2px solid var( --jt-accent );
	outline-offset: 3px;
}

.jt-btn--dark:focus-visible,
.jt-btn--ghost-light:focus-visible {
	outline-color: #fff;
}

.jt-tile {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 15px;
}

.jt-tile svg {
	width: 26px;
	height: 26px;
}

.jt-tile--sm {
	width: 42px;
	height: 42px;
	border-radius: 12px;
}

.jt-tile--sm svg {
	width: 21px;
	height: 21px;
}

.jt-tile--lg {
	width: 62px;
	height: 62px;
	border-radius: 18px;
}

.jt-tile--lg svg {
	width: 28px;
	height: 28px;
}

.jt-tile--red    { background: var( --jt-red-bg );    color: var( --jt-red-fg ); }
.jt-tile--purple { background: var( --jt-purple-bg ); color: var( --jt-purple-fg ); }
.jt-tile--green  { background: var( --jt-green-bg );  color: var( --jt-green-fg ); }
.jt-tile--amber  { background: var( --jt-amber-bg );  color: var( --jt-amber-fg ); }
.jt-tile--blue   { background: var( --jt-blue-bg );   color: var( --jt-blue-fg ); }


.jt-panel .jt-tile--red    { background: rgba( 255, 57, 81, 0.16 );  color: #ff6c7f; }
.jt-panel .jt-tile--purple { background: rgba( 124, 58, 237, 0.18 ); color: #a97cf5; }
.jt-panel .jt-tile--green  { background: rgba( 15, 169, 104, 0.16 ); color: #34d399; }
.jt-panel .jt-tile--amber  { background: rgba( 239, 143, 12, 0.16 ); color: #f5b455; }
.jt-panel .jt-tile--blue   { background: rgba( 63, 127, 224, 0.18 ); color: #7fa9f0; }

.jt-section {
	padding: 0;
}

.jt-head {
	max-width: 640px;
	margin: 0 auto clamp( 32px, 3.6vw, 52px );
	text-align: center;
}

.jt-head__title {
	margin: 0;
	color: var( --jt-ink );
	font-size: clamp( 26px, 3vw, 38px );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.jt-head__text {
	margin: 12px 0 0;
	color: var( --jt-body );
	font-size: 15px;
	line-height: 1.65;
}


.jt-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp( 440px, 44vw, 640px );
	padding: clamp( 44px, 5.2vw, 84px );
	border-radius: var( --jt-radius );
	background: var( --jt-dark );
	color: #fff;
}

.jt-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.jt-hero__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.jt-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 96deg, var( --jt-dark ) 8%, rgba( 12, 13, 17, 0.84 ) 32%, rgba( 12, 13, 17, 0.24 ) 62%, transparent 100% );
}

.jt-hero__inner {
	max-width: 620px;
}

.jt-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp( 28px, 4.4vw, 56px );
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.jt-hero__title-accent {
	display: block;
	background-image: linear-gradient(
		92deg,
		var( --jt-grad-1 ) 0%,
		var( --jt-grad-2 ) 22%,
		var( --jt-grad-3 ) 62%,
		var( --jt-grad-4 ) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

@supports not ( ( background-clip: text ) or ( -webkit-background-clip: text ) ) {
	.jt-hero__title-accent {
		background-image: none;
		-webkit-text-fill-color: currentColor;
		color: var( --jt-accent );
	}
}

.jt-hero__rule {
	display: block;
	width: 96px;
	height: 3px;
	margin: 22px 0 24px;
	border-radius: 3px;
	background: var( --jt-accent );
}

.jt-hero__lead {
	margin: 0;
	max-width: 46ch;
	color: rgba( 255, 255, 255, 0.82 );
	font-size: clamp( 15px, 1.15vw, 18px );
	line-height: 1.75;
}

.jt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 34px;
}

.jt-hero__actions .jt-btn {
	padding: 15px 30px;
	font-size: 15px;
}

.jt-values {
	padding: clamp( 40px, 5vw, 78px ) clamp( 24px, 3.4vw, 60px );
	border-radius: var( --jt-radius );
	background:#ffedec;
}

.jt-values__layout {
	display: grid;
	grid-template-columns: minmax( 0, 0.86fr ) minmax( 0, 1.6fr );
	gap: clamp( 34px, 4.4vw, 78px );
	align-items: start;
}

/* --- Left: the statement --- */
.jt-values__aside {
	position: relative;
	isolation: isolate;
	min-width: 0;
	padding-top: clamp( 0px, 1.4vw, 20px );
}

.jt-values__decor {
	position: absolute;
	top: -34px;
	left: -30px;
	z-index: -1;
	width: 260px;
	height: 260px;
	pointer-events: none;
	background-image:
		radial-gradient( rgba( 20, 20, 43, 0.22 ) 1px, transparent 1.4px ),
		radial-gradient( circle at 30% 30%, rgba( 255, 57, 81, 0.13 ), transparent 62% );
	background-size: 17px 17px, 100% 100%;
	-webkit-mask-image: radial-gradient( circle at 30% 30%, #000 8%, transparent 68% );
	        mask-image: radial-gradient( circle at 30% 30%, #000 8%, transparent 68% );
	opacity: 0.85;
}

.jt-values__title {
	margin: 0;
	max-width: 13ch;
	color: var( --jt-ink );
	font-size: clamp( 30px, 3.5vw, 52px );
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.jt-values__title span {
	display: block;
	color: var( --jt-accent );
}

.jt-values__text {
	margin: 22px 0 0;
	max-width: 34ch;
	color: var( --jt-body );
	font-size: 15.5px;
	line-height: 1.75;
}

.jt-values__grid {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 14px;
	counter-reset: jt-vcard;
	min-width: 0;
}

.jt-vcard {
	position: relative;
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	min-width: 0;
	min-height: 208px;
	padding: 26px 24px;
	counter-increment: jt-vcard;
	border: 1px solid var( --jt-line );
	border-radius: 18px;
	background: #fff;
	transition:
		transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ),
		border-color 0.3s ease,
		box-shadow 0.35s ease,
		background 0.3s ease;
}

.jt-vcard:hover {
	transform: translateY( -5px );
	border-color: var( --v-fg, var( --jt-accent ) );
	box-shadow: 0 18px 40px rgba( 20, 20, 43, 0.07 );
}

.jt-vcard--wide {
	grid-column: span 4;
	min-height: 248px;
	padding: 32px 30px;
}

.jt-vcard--compact {
	min-height: 184px;
	padding: 24px 22px;
}

.jt-values__grid > .jt-vcard:last-child {
	grid-column-end: -1;
}

.jt-vcard__num {
	color: var( --v-fg );
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
}

.jt-vcard__num::before {
	content: counter( jt-vcard, decimal-leading-zero );
}

.jt-vcard__icon {
	display: flex;
	margin: 22px 0 auto;
	width: 26px;
	height: 26px;
	color: var( --v-fg );
	transition: transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.jt-vcard:hover .jt-vcard__icon {
	transform: translateY( -2px ) scale( 1.06 );
}

.jt-vcard__icon svg {
	width: 100%;
	height: 100%;
}

.jt-vcard__title {
	margin: 24px 0 8px;
	color: var( --jt-ink );
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.jt-vcard--wide .jt-vcard__title {
	font-size: 24px;
}

.jt-vcard__text {
	margin: 0;
	max-width: 40ch;
	color: var( --jt-body );
	font-size: 14px;
	line-height: 1.7;
}

.jt-vcard--wide .jt-vcard__text {
	font-size: 15px;
}

.jt-vcard__mark {
	position: absolute;
	top: 22px;
	right: 22px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var( --jt-line );
	border-radius: 50%;
	color: var( --jt-body );
	opacity: 0.55;
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ), border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.jt-vcard__mark svg {
	width: 14px;
	height: 14px;
}

.jt-vcard:hover .jt-vcard__mark {
	opacity: 1;
	transform: translate( 2px, -2px );
	border-color: var( --v-fg );
	background: var( --v-fg );
	color: #fff;
}

.jt-vcard--accent .jt-vcard__mark {
	border-color: rgba( 20, 20, 43, 0.14 );
}

.jt-vcard--red    { --v-bg: var( --jt-red-bg );    --v-fg: var( --jt-red-fg ); }
.jt-vcard--purple { --v-bg: var( --jt-purple-bg ); --v-fg: var( --jt-purple-fg ); }
.jt-vcard--green  { --v-bg: var( --jt-green-bg );  --v-fg: var( --jt-green-fg ); }
.jt-vcard--amber  { --v-bg: var( --jt-amber-bg );  --v-fg: var( --jt-amber-fg ); }
.jt-vcard--blue   { --v-bg: var( --jt-blue-bg );   --v-fg: var( --jt-blue-fg ); }


/*--------------------------------------------------------------
# 7. Dark panels
--------------------------------------------------------------*/
.jt-panel {
	padding: clamp( 34px, 4vw, 56px );
	border-radius: var( --jt-radius );
	background: var( --jt-dark );
	color: #fff;
}

.jt-panel__title {
	margin: 0;
	color: #fff;
	font-size: clamp( 24px, 2.6vw, 34px );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.jt-panel__rule {
	display: block;
	width: 72px;
	height: 3px;
	margin: 16px 0 18px;
	border-radius: 3px;
	background: var( --jt-accent );
}

.jt-panel__text {
	margin: 0;
	max-width: 42ch;
	color: rgba( 255, 255, 255, 0.72 );
	font-size: 14px;
	line-height: 1.7;
}

/* --- Why you'll love working here --- */
.jt-perks__grid {
	display: grid;
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 2fr );
	gap: clamp( 30px, 4vw, 60px );
	align-items: center;
}

.jt-perks__intro {
	min-width: 0;
}

.jt-perks__cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 14px;
	min-width: 0;
}

.jt-perk {
	min-width: 0;
	padding: 22px 20px;
	border: 1px solid rgba( 255, 255, 255, 0.07 );
	border-radius: 16px;
	background: var( --jt-dark-2 );
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.jt-perk:hover {
	border-color: rgba( 255, 255, 255, 0.18 );
	transform: translateY( -3px );
}

.jt-perk .jt-tile {
	margin-bottom: 16px;
}

.jt-perk__title {
	margin: 0 0 7px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.jt-perk__text {
	margin: 0;
	color: rgba( 255, 255, 255, 0.62 );
	font-size: 13px;
	line-height: 1.6;
}


/*--------------------------------------------------------------
# 8. Open Roles
--------------------------------------------------------------*/
.jt-roles__list {
	display: grid;
	gap: 12px;
}

.jt-role {
	display: grid;
	grid-template-columns:
		auto
		minmax( 0, 1.55fr )
		minmax( 0, 0.9fr )
		minmax( 0, 0.72fr )
		minmax( 0, 0.62fr )
		auto;
	gap: 18px;
	align-items: center;
	min-width: 0;
	padding: 18px 22px;
	border: 1px solid var( --jt-line );
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.jt-role:hover {
	border-color: transparent;
	box-shadow: 0 14px 34px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

.jt-role.is-hidden {
	display: none;
}

.jt-role.is-clipped {
	display: none;
}
img.jt-role__icon-image {
    height: 24px;
    width: 24px;
}

/* Newly revealed rows ease in rather than snapping into place. */
.jt-role.is-revealed {
	animation: jt-role-in 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

@keyframes jt-role-in {
	from { opacity: 0; transform: translateY( 12px ); }
}

.jt-role__id {
	min-width: 0;
}

.jt-role__title {
	margin: 0 0 3px;
	color: var( --jt-ink );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.jt-role__dept {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}

/* One modifier per tone in the roles array — keep these in step. */
.jt-role__dept--red    { color: var( --jt-red-fg ); }
.jt-role__dept--purple { color: var( --jt-purple-fg ); }
.jt-role__dept--green  { color: var( --jt-green-fg ); }
.jt-role__dept--amber  { color: var( --jt-amber-fg ); }
.jt-role__dept--blue   { color: var( --jt-blue-fg ); }

.jt-role__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	min-width: 0;
	color: var( --jt-body );
	font-size: 13.5px;
	line-height: 1.4;
}

.jt-role__icon {
	display: flex;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var( --jt-body );
}

.jt-role__icon svg {
	width: 100%;
	height: 100%;
}

.jt-role__apply {
	justify-self: end;
}

.jt-roles__more {
	margin-top: 26px;
	text-align: center;
}


/*--------------------------------------------------------------
# 9. Life collage
--------------------------------------------------------------*/
.jt-life__grid {
	display: grid;
	grid-template-columns: minmax( 0, 0.8fr ) minmax( 0, 1.6fr );
	gap: clamp( 30px, 4vw, 56px );
	align-items: center;
}

.jt-life__intro {
	min-width: 0;
}

.jt-life__intro .jt-panel__text {
	margin: 16px 0 24px;
}

/* Two rows: a tall image spanning both on the left, two squares top-right and
   one wide image beneath them. */
.jt-life__collage {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr ) minmax( 0, 1fr );
	grid-template-rows: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
	min-width: 0;
	height: clamp( 300px, 26vw, 380px );
}

.jt-life__cell {
	position: relative;
	overflow: hidden;
	margin: 0;
	min-width: 0;
	border-radius: 14px;
	background: var( --jt-dark-2 );
}

.jt-life__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.jt-life__cell:hover img {
	transform: scale( 1.05 );
}

.jt-life__cell--tall { grid-row: span 2; }
.jt-life__cell--wide { grid-column: span 2; }

/* The red badge straddling the collage seam. */
.jt-life__badge {
	position: absolute;
	top: 50%;
	left: calc( 1.15 / 3.15 * 100% );
	z-index: 2;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var( --jt-accent );
	color: #fff;
	transform: translate( -50%, -50% );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.28 );
}

.jt-life__badge svg {
	width: 24px;
	height: 24px;
}


/*--------------------------------------------------------------
# 10. CTA banner
--------------------------------------------------------------*/
.jt-cta {
	display: block;
}

.jt-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	padding: clamp( 24px, 2.8vw, 36px ) clamp( 24px, 3vw, 44px );
	border-radius: var( --jt-radius );
	background: var( --jt-blush );
}

.jt-cta__inner .jt-tile--red {
	background: #ffd9dc;
}

.jt-cta__copy {
	flex: 1 1 320px;
	min-width: 0;
}

.jt-cta__title {
	margin: 0 0 6px;
	color: var( --jt-ink );
	font-size: clamp( 18px, 1.9vw, 24px );
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.jt-cta__text {
	margin: 0;
	color: var( --jt-body );
	font-size: 14px;
	line-height: 1.6;
}

.jt-cta__btn {
	flex: 0 0 auto;
	padding: 14px 30px;
}


/*--------------------------------------------------------------
# 11. Application dialog
--------------------------------------------------------------*/
.jt-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.jt-modal[hidden] {
	display: none;
}

.jt-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 8, 9, 12, 0.66 );
	backdrop-filter: blur( 3px );
	animation: jt-fade 0.2s ease;
}

.jt-modal__dialog {
	position: relative;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;

	width: min( 740px, 100% );
	max-height: 94vh;
	padding: clamp( 22px, 2.4vw, 30px );
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.3 );
	animation: jt-rise 0.24s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.jt-modal__dialog::-webkit-scrollbar {
	display: none;
}

@keyframes jt-fade {
	from { opacity: 0; }
}

@keyframes jt-rise {
	from { opacity: 0; transform: translateY( 16px ); }
}

.jt-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var( --jt-line );
	border-radius: 50%;
	background: #fff;
	color: var( --jt-ink );
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.jt-modal__close:hover {
	border-color: var( --jt-accent );
	background: var( --jt-accent );
	color: #fff;
}

.jt-modal__close svg {
	width: 16px;
	height: 16px;
}

.jt-modal__close:focus-visible {
	outline: 2px solid var( --jt-accent );
	outline-offset: 2px;
}

.jt-modal__head {
	margin-bottom: 18px;
	padding-right: 44px;
}

.jt-modal__title {
	margin: 0 0 6px;
	color: var( --jt-ink );
	font-size: clamp( 20px, 2vw, 25px );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.jt-modal__sub {
	margin: 0;
	color: var( --jt-body );
	font-size: 13.5px;
	line-height: 1.55;
}

/* Populated with the role title when Apply is pressed on a specific job. */
.jt-modal__sub [data-jt-modal-role]:not( :empty ) {
	display: block;
	margin-bottom: 3px;
	color: var( --jt-accent );
	font-weight: 700;
	font-size: 14.5px;
}

.jt-form__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-items: stretch;
	gap: 13px;
}

.jt-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* CV and Message share a row, so both controls fill it to the same height. */
.jt-field > .jt-upload,
.jt-field > .jt-field__input--area {
	flex: 1 1 auto;
}

.jt-field__label {
	margin-bottom: 5px;
	color: var( --jt-ink );
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
}

.jt-field__req {
	color: var( --jt-accent );
}

.jt-field__input {
	width: 100%;
	padding: 10px 13px;
	border: 1px solid var( --jt-line );
	border-radius: 9px;
	background: #fff;
	color: var( --jt-ink );
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jt-field__input::placeholder {
	color: #a9abb6;
}

.jt-field__input:focus {
	border-color: var( --jt-accent );
	box-shadow: 0 0 0 3px rgba( 255, 57, 81, 0.14 );
	outline: none;
}

.jt-field__input--area {
	resize: vertical;
	min-height: 74px;
}

/* Invalid state is border + icon-free text, never colour alone. */
.jt-field.has-error .jt-field__input,
.jt-field.has-error .jt-upload {
	border-color: var( --jt-accent );
}

.jt-field__error {
	margin: 7px 0 0;
	color: var( --jt-accent );
	font-size: 12.5px;
	line-height: 1.4;
}

.jt-field__error[hidden] {
	display: none;
}

/* --- File upload: one compact row, icon + text + Browse --- */
.jt-upload {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 74px;   /* matches the textarea beside it */
	padding: 10px 12px;
	border: 1px dashed var( --jt-line );
	border-radius: 9px;
	background: var( --jt-soft );
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.jt-upload:hover,
.jt-upload.is-drop {
	border-color: var( --jt-accent );
	background: var( --jt-blush );
}

.jt-upload__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var( --jt-red-bg );
	color: var( --jt-accent );
}

.jt-upload__icon svg {
	width: 16px;
	height: 16px;
}

.jt-upload__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1 1 auto;
	min-width: 0;
}

.jt-upload__text {
	color: var( --jt-ink );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;

	/* A long filename must not stretch the dialog. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jt-upload__hint {
	color: var( --jt-body );
	font-size: 11.5px;
	line-height: 1.35;
}

.jt-upload__action {
	flex: 0 0 auto;
	padding: 7px 15px;
	border: 1px solid var( --jt-line );
	border-radius: 999px;
	background: #fff;
	color: var( --jt-ink );
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
}

.jt-upload:hover .jt-upload__action {
	border-color: var( --jt-accent );
	color: var( --jt-accent );
}

/* Visually hidden but still focusable and clickable via the label. */
.jt-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.jt-upload__input:focus-visible + .jt-upload__text,
.jt-upload:focus-within {
	outline: 2px solid var( --jt-accent );
	outline-offset: 3px;
}

.jt-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.jt-form__submit {
	padding: 13px 28px;
}

.jt-form__status {
	margin: 12px 0 0;
	color: var( --jt-accent );
	font-size: 13px;
	line-height: 1.5;
}

.jt-form__status:empty {
	display: none;
}

/* --- Success panel --- */
.jt-modal__done {
	padding: 20px 0 8px;
	text-align: center;
}

.jt-modal__done[hidden] {
	display: none;
}

.jt-modal__done-icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var( --jt-green-bg );
	color: var( --jt-green-fg );
}

.jt-modal__done-icon svg {
	width: 28px;
	height: 28px;
}

.jt-modal__done-title {
	margin: 0 0 8px;
	color: var( --jt-ink );
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}

.jt-modal__done-text {
	margin: 0 auto 22px;
	max-width: 44ch;
	color: var( --jt-body );
	font-size: 14px;
	line-height: 1.65;
}

/* Set on <body> while the dialog is open. */
.jt-modal-open {
	overflow: hidden;
}


/*--------------------------------------------------------------
# 12. Reveal states
--------------------------------------------------------------*/
/* Default is fully visible. js/join-team.js adds .is-anim only when it can
   actually animate, so no-JS and reduced-motion users lose nothing. */
.jt-vcard.is-anim,
.jt-perk.is-anim,
.jt-role.is-anim,
.jt-life__cell.is-anim,
.jt-values__aside > .is-anim {
	opacity: 0;
	transform: translateY( 22px );
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.jt-vcard.is-anim.is-visible,
.jt-perk.is-anim.is-visible,
.jt-role.is-anim.is-visible,
.jt-life__cell.is-anim.is-visible,
.jt-values__aside > .is-anim.is-visible {
	opacity: 1;
	transform: none;
}

/* The number and icon settle a beat after their card, so the reveal reads as
   one considered motion rather than everything arriving at once. */
.jt-vcard.is-anim .jt-vcard__num,
.jt-vcard.is-anim .jt-vcard__icon {
	opacity: 0;
	transform: scale( 0.85 );
	transition:
		opacity 0.45s ease 0.14s,
		transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.14s;
}

.jt-vcard.is-anim.is-visible .jt-vcard__num,
.jt-vcard.is-anim.is-visible .jt-vcard__icon {
	opacity: 1;
	transform: none;
}


/*--------------------------------------------------------------
# 13. Responsive
--------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	.jt-values__layout {
		grid-template-columns: minmax( 0, 1fr );
		gap: 34px;
	}

	.jt-values__title,
	.jt-values__text {
		max-width: 26ch;
	}

	.jt-values__text {
		max-width: 52ch;
	}

	.jt-values__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.jt-vcard {
		grid-column: span 2;
	}

	.jt-vcard--wide {
		grid-column: span 4;
		min-height: 200px;
	}

	.jt-perks__grid,
	.jt-life__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 30px;
	}

	.jt-panel__text {
		max-width: none;
	}

	.jt-role {
		grid-template-columns: auto minmax( 0, 1.4fr ) minmax( 0, 0.9fr ) minmax( 0, 0.7fr ) auto;
	}
	.jt-role__meta:last-of-type {
		display: none;
	}
}

@media ( max-width: 900px ) {

	.jt-hero {
		min-height: clamp( 380px, 56vw, 480px );
		padding: 40px 30px;
	}

	.jt-hero__media-img {
		object-position: 72% center;
	}

	.jt-hero__media::after {
		background: linear-gradient( 180deg, rgba( 12, 13, 17, 0.92 ) 30%, rgba( 12, 13, 17, 0.78 ) 100% );
	}

	.jt-hero__inner {
		max-width: none;
	}

	.jt-perks__cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.jt-life__collage {
		height: clamp( 260px, 44vw, 340px );
	}
}

@media ( max-width: 700px ) {

	/* Single column, heading first, cards stacked beneath. */
	.jt-values__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 12px;
	}

	.jt-vcard,
	.jt-vcard--wide {
		grid-column: span 1;
		min-height: 0;
		padding: 24px 22px;
	}

	.jt-vcard--wide .jt-vcard__title {
		font-size: 20px;
	}

	.jt-values__decor {
		width: 190px;
		height: 190px;
	}

	/* The row collapses to a stacked card: icon + title, then meta, then CTA. */
	.jt-role {
		grid-template-columns: auto minmax( 0, 1fr );
		gap: 8px 14px;
		padding: 20px;
	}

	.jt-role__id {
		align-self: center;
	}

	.jt-role__meta {
		grid-column: 2;
	}

	.jt-role__meta:last-of-type {
		display: flex;
	}

	.jt-role__apply {
		grid-column: 2;
		justify-self: start;
		margin-top: 6px;
	}

	.jt-form__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.jt-form__actions .jt-btn {
		flex: 1 1 auto;
	}
}

@media ( max-width: 560px ) {

	.jt-values__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.jt-perks__cards {
		grid-template-columns: minmax( 0, 1fr );
	}

	.jt-hero__actions .jt-btn {
		flex: 1 1 100%;
	}

	/* Two stacked rows read better than a cramped three-column collage. */
	.jt-life__collage {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		height: auto;
	}

	.jt-life__cell {
		aspect-ratio: 1 / 1;
	}

	.jt-life__cell--tall {
		grid-row: span 1;
		grid-column: span 2;
		aspect-ratio: 16 / 10;
	}

	.jt-life__cell--wide {
		aspect-ratio: 16 / 10;
	}

	.jt-life__badge {
		display: none;
	}

	.jt-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.jt-cta__btn {
		width: 100%;
	}

	.jt-modal {
		padding: 0;
	}

	.jt-modal__dialog {
		width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}
}


/*------------------# 14. Reduced motion + print---*/
@media ( prefers-reduced-motion: reduce ) {

	.jt-btn,
	.jt-perk,
	.jt-role,
	.jt-life__cell img,
	.jt-field__input,
	.jt-upload {
		transition: none;
	}

	.jt-perk:hover,
	.jt-role:hover {
		transform: none;
	}

	.jt-life__cell:hover img {
		transform: none;
	}

	.jt-modal__backdrop,
	.jt-modal__dialog {
		animation: none;
	}

	.jt-vcard,
	.jt-vcard__icon,
	.jt-vcard__mark {
		transition: none;
	}

	.jt-vcard:hover {
		transform: none;
	}

	.jt-vcard:hover .jt-vcard__icon,
	.jt-vcard:hover .jt-vcard__mark {
		transform: none;
	}

	/* Belt and braces: the script already bails, but if .is-anim were ever
	   applied the content must still be readable. */
	.jt-vcard.is-anim,
	.jt-perk.is-anim,
	.jt-role.is-anim,
	.jt-life__cell.is-anim,
	.jt-values__aside > .is-anim,
	.jt-vcard.is-anim .jt-vcard__num,
	.jt-vcard.is-anim .jt-vcard__icon {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media print {

	.jt-modal,
	.jt-cta,
	.jt-hero__media {
		display: none;
	}

	.jt-hero,
	.jt-panel {
		background: none;
		color: var( --jt-ink );
	}

	.jt-hero__title,
	.jt-hero__lead,
	.jt-panel__title,
	.jt-panel__text {
		color: var( --jt-ink );
	}

	.jt-section,
	.jt-panel {
		break-inside: avoid;
	}
}