:root {
	--freelanso-bg: #0f1115;
	--freelanso-bg-alt: #171a21;
	--freelanso-card: #1d212b;
	--freelanso-border: #2a3040;
	--freelanso-accent: #c8a96b;
	--freelanso-accent-hover: #d8b97a;
	--freelanso-text: #ffffff;
	--freelanso-text-soft: #b6bcc8;
	--freelanso-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
	--freelanso-radius: 22px;
	--freelanso-radius-sm: 16px;
	--freelanso-transition: 260ms ease;
}

.freelanso-shell {
	width: min(1280px, calc(100% - 32px));
	margin: 0 auto;
}

.freelanso-careers-block,
.freelanso-single-job-page {
	background: var(--freelanso-bg);
	color: var(--freelanso-text);
	font-family: "Inter", "Segoe UI", sans-serif;
}

.freelanso-careers-block {
	padding: 32px 0;
}

.freelanso-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #1a1e27;
	border: 1px solid var(--freelanso-border);
	color: var(--freelanso-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.freelanso-section-heading,
.freelanso-hero-copy,
.freelanso-job-card,
.freelanso-search-card,
.freelanso-resume-card,
.freelanso-filter-panel,
.freelanso-panel,
.freelanso-apply-form-wrap,
.freelanso-empty-state {
	background: var(--freelanso-card);
	border: 1px solid var(--freelanso-border);
	box-shadow: var(--freelanso-shadow);
}

.freelanso-hero-copy,
.freelanso-search-card,
.freelanso-resume-card,
.freelanso-panel,
.freelanso-filter-panel,
.freelanso-job-card,
.freelanso-apply-form-wrap,
.freelanso-empty-state {
	border-radius: var(--freelanso-radius);
}

.freelanso-hero-copy {
	padding: 36px;
	margin-bottom: 22px;
}

.freelanso-hero-copy h1,
.freelanso-section-heading h2,
.freelanso-single-hero h1,
.freelanso-panel h2,
.freelanso-apply-form-wrap h3 {
	font-family: "Poppins", "Segoe UI", sans-serif;
	margin: 0;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.freelanso-hero-copy h1,
.freelanso-single-hero h1 {
	font-size: clamp(2.6rem, 7vw, 5rem);
	margin-top: 18px;
}

.freelanso-hero-copy p,
.freelanso-single-hero p,
.freelanso-job-card p,
.freelanso-resume-card p,
.freelanso-prose,
.freelanso-field label,
.freelanso-empty-state {
	color: var(--freelanso-text-soft);
}

.freelanso-hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
	gap: 22px;
	align-items: stretch;
}

.freelanso-search-card,
.freelanso-resume-card,
.freelanso-filter-panel,
.freelanso-panel,
.freelanso-apply-form-wrap,
.freelanso-job-card {
	padding: 26px;
}

.freelanso-search-form,
.freelanso-filter-panel,
.freelanso-form-grid,
.freelanso-job-meta,
.freelanso-detail-list,
.freelanso-tag-list,
.freelanso-job-card-actions,
.freelanso-slider-nav,
.freelanso-section-heading,
.freelanso-form-actions {
	display: flex;
}

.freelanso-search-form {
	flex-wrap: wrap;
	gap: 16px;
	align-items: end;
}

.freelanso-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 180px;
}

.freelanso-field input,
.freelanso-field select,
.freelanso-field textarea {
	width: 100%;
	min-height: 54px;
	padding: 0 16px;
	border-radius: 14px;
	border: 1px solid #323949;
	background: #151922;
	color: var(--freelanso-text);
	font-size: 15px;
	transition: border-color var(--freelanso-transition), transform var(--freelanso-transition);
}

.freelanso-field textarea {
	min-height: 140px;
	padding: 14px 16px;
	resize: vertical;
}

.freelanso-field input:focus,
.freelanso-field select:focus,
.freelanso-field textarea:focus {
	outline: none;
	border-color: var(--freelanso-accent);
	transform: translateY(-1px);
}

.freelanso-button,
.freelanso-text-link,
.freelanso-mobile-filter-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	padding: 0 24px;
	border: 1px solid var(--freelanso-accent);
	border-radius: 14px;
	background: var(--freelanso-accent);
	color: #14161c;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--freelanso-transition), transform var(--freelanso-transition), box-shadow var(--freelanso-transition);
}

.freelanso-button:hover,
.freelanso-text-link:hover,
.freelanso-mobile-filter-toggle:hover {
	background: var(--freelanso-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(200, 169, 107, 0.2);
}

.freelanso-button-secondary {
	background: #181c24;
	color: var(--freelanso-text);
}

.freelanso-resume-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
}

.freelanso-resume-card h3 {
	margin: 18px 0 12px;
	font-size: 1.7rem;
	font-family: "Poppins", "Segoe UI", sans-serif;
}

.freelanso-text-link {
	align-self: flex-start;
}

.freelanso-section-heading {
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 24px 28px;
	border-radius: var(--freelanso-radius);
}

.freelanso-results-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--freelanso-text-soft);
}

.freelanso-mobile-filter-toggle {
	display: none;
	background: #171c25;
	color: var(--freelanso-text);
}

.freelanso-filter-panel {
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	transition: transform var(--freelanso-transition), opacity var(--freelanso-transition);
}

.freelanso-filter-actions {
	display: flex;
	gap: 12px;
	align-items: end;
}

.freelanso-job-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.freelanso-job-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 100%;
	position: relative;
	overflow: hidden;
	transition: transform var(--freelanso-transition), border-color var(--freelanso-transition);
}

.freelanso-job-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid #394154;
	opacity: 0;
	transition: opacity var(--freelanso-transition);
}

.freelanso-job-card:hover {
	transform: translateY(-4px);
	border-color: #3b4355;
}

.freelanso-job-card:hover::before {
	opacity: 1;
}

.freelanso-job-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.freelanso-company {
	font-size: 13px;
	font-weight: 700;
	color: var(--freelanso-accent);
}

.freelanso-chip {
	display: inline-flex;
	padding: 7px 12px;
	background: #151922;
	border: 1px solid var(--freelanso-border);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--freelanso-text-soft);
}

.freelanso-job-card h3 {
	margin: 0;
	font-size: 1.5rem;
}

.freelanso-job-card h3 a {
	color: var(--freelanso-text);
	text-decoration: none;
}

.freelanso-job-meta,
.freelanso-detail-list {
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 10px;
	flex-wrap: wrap;
}

.freelanso-job-meta li,
.freelanso-detail-list li {
	padding: 8px 12px;
	border-radius: 999px;
	background: #171b23;
	border: 1px solid var(--freelanso-border);
	color: var(--freelanso-text-soft);
	font-size: 13px;
}

.freelanso-job-card-actions {
	margin-top: auto;
}

.freelanso-empty-state {
	padding: 28px;
	text-align: center;
	margin-top: 20px;
}

.freelanso-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.freelanso-slider-section {
	overflow: hidden;
}

/* Outer wrapper: full width, horizontal padding gives space for gap to show */
.freelanso-slider-outer {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px 0 16px;
	box-sizing: border-box;
	overflow: hidden;
}

.freelanso-swiper {
	position: relative;
	padding-bottom: 70px;
	overflow: visible;
	/* Allow slides to be clipped by the outer container, not the swiper itself */
}

.freelanso-swiper .swiper-wrapper {
	display: flex;
	align-items: stretch;
	box-sizing: content-box;
}

.swiper-slide {
	height: auto;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Card fills full slide height */
.freelanso-swiper .swiper-slide .freelanso-job-card {
	height: 100%;
	margin: 0;
	box-sizing: border-box;
}

.freelanso-slider-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: flex-end;
	gap: 12px;
}

.freelanso-slider-button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--freelanso-border);
	background: #171b23;
	cursor: pointer;
	position: relative;
}

.freelanso-slider-button::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--freelanso-accent);
	border-right: 2px solid var(--freelanso-accent);
	transform: rotate(45deg);
}

.freelanso-slider-button.prev::before {
	transform: rotate(-135deg);
}

.freelanso-single-hero {
	padding: 50px 0 24px;
	background: #101319;
	border-bottom: 1px solid var(--freelanso-border);
}

.freelanso-single-content {
	padding: 32px 0 60px;
	background: var(--freelanso-bg);
}

.freelanso-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
	gap: 24px;
	align-items: start;
}

.freelanso-single-main,
.freelanso-single-sidebar {
	display: grid;
	gap: 22px;
}

.freelanso-prose {
	line-height: 1.75;
}

.freelanso-detail-list {
	flex-direction: column;
}

.freelanso-detail-list.compact li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	border-radius: 14px;
}

.freelanso-tag-list {
	flex-wrap: wrap;
	gap: 12px;
}

.freelanso-tag-list span {
	display: inline-flex;
	padding: 10px 14px;
	border-radius: 999px;
	background: #151922;
	border: 1px solid var(--freelanso-border);
	color: var(--freelanso-text-soft);
}

.freelanso-sticky-sidebar {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 22px;
}

.freelanso-form-grid {
	flex-wrap: wrap;
	gap: 16px;
}

.freelanso-field-full {
	flex-basis: 100%;
}

.freelanso-form-actions {
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
}

.freelanso-form-message {
	color: var(--freelanso-text-soft);
	font-size: 14px;
}

.freelanso-form-message.is-error {
	color: #ff9381;
}

.freelanso-form-message.is-success {
	color: #c8d6a2;
}

@media (max-width: 1024px) {
	.freelanso-hero-layout,
	.freelanso-single-layout,
	.freelanso-job-grid {
		grid-template-columns: 1fr 1fr;
	}

	.freelanso-single-layout {
		grid-template-columns: 1fr;
	}

	.freelanso-sticky-sidebar {
		position: static;
	}
}

@media (max-width: 767px) {
	.freelanso-careers-block {
		padding: 22px 0;
	}

	.freelanso-shell {
		width: min(100% - 20px, 1280px);
	}

	.freelanso-hero-layout,
	.freelanso-job-grid,
	.freelanso-section-heading,
	.freelanso-form-actions {
		grid-template-columns: 1fr;
		flex-direction: column;
		align-items: stretch;
	}

	.freelanso-job-grid {
		display: grid;
	}

	.freelanso-mobile-filter-toggle {
		display: inline-flex;
	}

	.freelanso-filter-panel {
		display: none;
	}

	.freelanso-filter-panel.is-open {
		display: flex;
	}
}

@media (max-width: 520px) {
	.freelanso-search-card,
	.freelanso-resume-card,
	.freelanso-job-card,
	.freelanso-filter-panel,
	.freelanso-panel,
	.freelanso-apply-form-wrap {
		padding: 20px;
	}

	.freelanso-hero-copy {
		padding: 24px;
	}

	.freelanso-field input,
	.freelanso-field select,
	.freelanso-button,
	.freelanso-mobile-filter-toggle {
		min-height: 50px;
	}
}

/* Resume upload wrap */
.freelanso-resume-upload-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.freelanso-resume-upload-message {
	font-size: 13px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(255,255,255,0.05);
	color: var(--freelanso-text-soft);
}

.freelanso-resume-upload-message.is-success {
	background: rgba(72, 199, 142, 0.12);
	color: #48c78e;
}

.freelanso-resume-upload-message.is-error {
	background: rgba(241, 70, 104, 0.12);
	color: #f14668;
}

/* Apply trigger button — reset anchor-like appearance carried from old a tag */
.freelanso-apply-trigger {
	border: none;
	width: 100%;
	text-align: center;
}