/* Accessibility widget — soft UI + pill switches (no native checkboxes) */
.hired-a11y {
	--a11y-gutter: 22px;
	--a11y-size: 54px;
	position: fixed;
	bottom: var(--a11y-gutter);
	left: var(--a11y-gutter);
	z-index: 9997;
	font-family: inherit;
	color: #111827;
}

.hired-a11y[dir="rtl"] {
	left: auto;
	right: var(--a11y-gutter);
}

.hired-a11y__toggle {
	width: var(--a11y-size);
	height: var(--a11y-size);
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	background: var(--primary, #10B981);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--primary, #10B981) 38%, transparent);
	backdrop-filter: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.hired-a11y__toggle:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--primary, #10B981) 88%, #000);
	box-shadow: 0 16px 34px color-mix(in srgb, var(--primary, #10B981) 46%, transparent);
}

.hired-a11y__toggle:active {
	transform: scale(0.96);
}

.hired-a11y__toggle i,
.hired-a11y__toggle svg {
	font-size: 1.25rem;
	line-height: 1;
}

.hired-a11y__panel {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	width: min(272px, calc(100vw - 28px));
	padding: 14px;
	display: grid;
	gap: 8px;
	border-radius: 1.25rem;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 18px 46px rgba(17, 24, 39, 0.16);
	backdrop-filter: blur(16px);
}

.hired-a11y[dir="rtl"] .hired-a11y__panel {
	left: auto;
	right: 0;
}

.hired-a11y__panel[hidden] {
	display: none !important;
}

.hired-a11y__title {
	margin: 0 2px 4px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: #111827;
}

.hired-a11y__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 14px;
	background: #F3F4F6;
	box-shadow: inset 0 0 0 1px #E5E7EB;
	font-size: 0.84rem;
	line-height: 1.3;
	color: #111827;
	user-select: none;
}

.hired-a11y__option-text {
	flex: 1 1 auto;
	min-width: 0;
}

.hired-a11y__switch {
	position: relative;
	flex: 0 0 auto;
	width: 46px;
	height: 28px;
	min-width: 46px;
	min-height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: transparent;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.hired-a11y__switch-ui {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #F9FAFB;
	box-shadow: var(--inset, inset 3px 3px 8px rgba(102, 116, 138, 0.18), inset -3px -3px 8px rgba(255, 255, 255, 0.75));
	transition: background 0.2s ease, box-shadow 0.2s ease;
	pointer-events: none;
}

.hired-a11y__switch-ui::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(102, 116, 138, 0.28), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
	transition: transform 0.2s ease;
}

.hired-a11y__switch.is-on .hired-a11y__switch-ui,
.hired-a11y__switch[aria-checked="true"] .hired-a11y__switch-ui {
	background: color-mix(in srgb, var(--primary, #10B981) 72%, #fff);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #10B981) 28%, transparent);
}

.hired-a11y__switch.is-on .hired-a11y__switch-ui::after,
.hired-a11y__switch[aria-checked="true"] .hired-a11y__switch-ui::after {
	transform: translateX(18px);
}

.hired-a11y[dir="rtl"] .hired-a11y__switch.is-on .hired-a11y__switch-ui::after,
.hired-a11y[dir="rtl"] .hired-a11y__switch[aria-checked="true"] .hired-a11y__switch-ui::after {
	transform: translateX(-18px);
}

.hired-a11y__switch:focus-visible .hired-a11y__switch-ui {
	outline: 2px solid color-mix(in srgb, var(--primary, #10B981) 55%, transparent);
	outline-offset: 2px;
}

.hired-a11y__link {
	display: inline-block;
	margin: 4px 2px 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--primary, #10B981);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Panel with 13 tiles + 2 steps: scrolls inside itself on short screens */
.hired-a11y .hired-a11y__panel {
	width: min(340px, calc(100vw - 28px));
	max-height: calc(100vh - var(--a11y-size) - 54px);
	max-height: calc(100dvh - var(--a11y-size) - 54px);
	overflow-y: auto;
	overscroll-behavior: contain;
	gap: 10px;
}

.hired-a11y__step {
	display: grid;
	grid-template-columns: 1fr 34px 52px 34px;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 14px;
	background: #F3F4F6;
	box-shadow: inset 0 0 0 1px #E5E7EB;
	font-size: 0.84rem;
	line-height: 1.25;
}

.hired-a11y__step-text {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.hired-a11y__step-text i {
	color: var(--primary, #10B981);
	width: 16px;
	text-align: center;
}

.hired-a11y .hired-a11y__step-btn {
	width: 34px;
	height: 34px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--primary, #10B981) 35%, transparent);
	border-radius: 10px;
	background: #fff;
	color: var(--primary, #10B981);
	font: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	text-transform: none;
	cursor: pointer;
}

.hired-a11y .hired-a11y__step-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.hired-a11y__step-val {
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.hired-a11y__step.is-on .hired-a11y__step-val {
	color: var(--primary, #10B981);
}

.hired-a11y__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.hired-a11y .hired-a11y__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 74px;
	min-width: 0;
	margin: 0;
	padding: 10px 6px;
	border: 2px solid transparent;
	border-radius: 14px;
	background: #F3F4F6;
	box-shadow: inset 0 0 0 1px #E5E7EB;
	color: #111827;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hired-a11y .hired-a11y__tile i {
	font-size: 1.15rem;
	color: var(--primary, #10B981);
}

.hired-a11y .hired-a11y__tile:hover {
	border-color: color-mix(in srgb, var(--primary, #10B981) 35%, transparent);
}

.hired-a11y .hired-a11y__tile[aria-pressed="true"] {
	background: var(--primary, #10B981);
	border-color: var(--primary, #10B981);
	box-shadow: none;
	color: #fff;
}

.hired-a11y .hired-a11y__tile[aria-pressed="true"] i {
	color: #fff;
}

.hired-a11y :is(.hired-a11y__tile, .hired-a11y__step-btn):focus-visible {
	outline: 3px solid var(--primary, #10B981);
	outline-offset: 2px;
}

.hired-a11y__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
}

.hired-a11y__backdrop {
	display: none;
}

/* PC: a wide horizontal panel next to the button — sizes and actions on the left, tiles in rows on the right */
@media (min-width: 1024px) {
	.hired-a11y .hired-a11y__panel {
		bottom: 0;
		left: calc(100% + 12px);
		width: min(1180px, calc(100vw - var(--a11y-gutter) * 2 - var(--a11y-size) - 12px));
		max-height: calc(100vh - var(--a11y-gutter) * 2);
		max-height: calc(100dvh - var(--a11y-gutter) * 2);
		padding: 14px 16px 16px;
		grid-template-columns: 270px minmax(0, 1fr);
		align-content: start;
		gap: 10px 16px;
		opacity: 0;
		transform: translateX(-12px);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.hired-a11y[dir="rtl"] .hired-a11y__panel {
		left: auto;
		right: calc(100% + 12px);
		transform: translateX(12px);
	}

	.hired-a11y.is-open .hired-a11y__panel {
		opacity: 1;
		transform: none;
	}

	.hired-a11y__head {
		grid-column: 1 / -1;
	}

	.hired-a11y__panel > :is(.hired-a11y__step, .hired-a11y__reset, .hired-a11y__links) {
		grid-column: 1;
	}

	.hired-a11y .hired-a11y__grid {
		grid-column: 2;
		grid-row: 2 / span 4;
		grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
		align-content: start;
	}

	.hired-a11y .hired-a11y__reset {
		margin-top: 2px;
	}
}

/* Phone and tablet: a bottom sheet that slides up over a dimmed page */
@media (max-width: 1023px) {
	.hired-a11y__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(10, 14, 24, 0.42);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	html.hired-a11y-sheet-open,
	html.hired-a11y-sheet-open body {
		overflow: hidden;
	}

	.hired-a11y.is-open .hired-a11y__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.hired-a11y .hired-a11y__panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-height: min(84vh, 680px);
		max-height: min(84dvh, 680px);
		padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
		border-radius: 22px 22px 0 0;
		border-bottom: 0;
		box-shadow: 0 -12px 40px rgba(10, 14, 24, 0.22);
		transform: translateY(100%);
		transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.24, 1);
	}

	.hired-a11y[dir="rtl"] .hired-a11y__panel {
		left: 0;
		right: 0;
	}

	.hired-a11y.is-open .hired-a11y__panel {
		transform: translateY(0);
	}

	/* Grab handle */
	.hired-a11y .hired-a11y__panel::before {
		content: "";
		justify-self: center;
		width: 40px;
		height: 4px;
		margin: 2px 0 2px;
		border-radius: 4px;
		background: color-mix(in srgb, #111827 28%, transparent);
	}

	.hired-a11y .hired-a11y__grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}

	.hired-a11y .hired-a11y__tile {
		min-height: 70px;
		padding: 8px 4px;
		font-size: 0.74rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hired-a11y .hired-a11y__panel,
	.hired-a11y__backdrop {
		transition: none;
	}
}

/* Page zoom: the page flow only; fixed popups inside it are zoomed back, so they still fit the screen */
html.hired-a11y-zoomed body > :is(.site-header, main, .site-main, .site-footer, #page, .page-wrap) {
	zoom: var(--a11y-zoom, 1);
}

html.hired-a11y-zoomed body > :is(.site-header, main, .site-main, .site-footer, #page, .page-wrap) :is(.project-modal, .project-zoom, .dmut-calc__bubble) {
	zoom: var(--a11y-unzoom, 1);
}

/* Colour modes: one fixed layer filters everything under it (a filter on wrappers would break position: fixed) */
.hired-a11y-filter {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
}

html.hired-a11y-monochrome .hired-a11y-filter {
	-webkit-backdrop-filter: grayscale(1);
	backdrop-filter: grayscale(1);
}

html.hired-a11y-sepia .hired-a11y-filter {
	-webkit-backdrop-filter: sepia(1);
	backdrop-filter: sepia(1);
}

html.hired-a11y-invert .hired-a11y-filter {
	-webkit-backdrop-filter: invert(1) hue-rotate(180deg);
	backdrop-filter: invert(1) hue-rotate(180deg);
}

html:is(.hired-a11y-monochrome, .hired-a11y-sepia, .hired-a11y-invert) .hired-a11y {
	z-index: 2147483001;
}

/* Black & yellow */
html.hired-a11y-black-yellow {
	--bg: #000;
	--bg-soft: #000;
	--text: #ff0;
	--muted: #ff0;
	--ink: #ff0;
	--accent: #ff0;
	--accent-light: #ff0;
	--surface: #000;
	--surface-strong: #000;
}

/* The panel keeps its own colours, so the switches stay readable */
html.hired-a11y-black-yellow .hired-a11y {
	--bg: #e0e5ec;
	--bg-soft: #edf1f6;
	--text: #35404b;
	--ink: #111;
	--accent: #10B981;
	--surface-strong: rgba(238, 243, 250, 0.98);
	-webkit-text-fill-color: currentColor;
}

html.hired-a11y-black-yellow .hired-a11y * {
	-webkit-text-fill-color: currentColor;
}

html.hired-a11y-black-yellow body,
html.hired-a11y-black-yellow body *:not(.hired-a11y):not(.hired-a11y *):not(img):not(video):not(picture):not(iframe):not(svg):not(svg *):not(.hired-a11y-filter):not(.hired-a11y-tip) {
	background-color: #000 !important;
	color: #ff0 !important;
	-webkit-text-fill-color: #ff0 !important;
	border-color: #ff0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html.hired-a11y-black-yellow body *:not(.hired-a11y *):not([style*="background-image"]):not(img):not(video) {
	background-image: none !important;
}

html.hired-a11y-black-yellow body *:not(.hired-a11y *) :is(svg, svg *) {
	fill: currentColor;
}

html.hired-a11y-black-yellow a:not(.hired-a11y *) {
	text-decoration: underline !important;
}

html.hired-a11y-black-yellow body::before,
html.hired-a11y-black-yellow body::after,
html.hired-a11y-black-yellow :is(.page-bg, .bg-orbs) {
	display: none !important;
}

html.hired-a11y-black-yellow :is(.btn, button, input, textarea, select, .info-card, .price-card, .modal-dialog, .site-header .header-inner):not(.hired-a11y *) {
	border: 2px solid #ff0 !important;
}

/* Highlight headings */
html.hired-a11y-headings :is(h1, h2, h3, h4, h5, h6):not(.hired-a11y *) {
	outline: 2px dashed var(--primary, #10B981) !important;
	outline-offset: 4px;
	border-radius: 4px;
}

/* Keyboard navigation: a strong ring on whatever has focus */
html.hired-a11y-keyboard :focus:not(.hired-a11y-filter) {
	outline: 3px solid #f59e0b !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.35) !important;
}

/* Readable font (icon fonts keep their face) */
html.hired-a11y-readable-font body *:not(i):not([class*="fa-"]):not(.fa):not(svg *) {
	font-family: Arial, "Arial Hebrew", Helvetica, sans-serif !important;
}

/* Cursors */
html.hired-a11y-cursor-big,
html.hired-a11y-cursor-big * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.5-6.4.6 3.9 7.6-2.8 1.4-3.9-7.7L5 20z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}

html.hired-a11y-cursor-black,
html.hired-a11y-cursor-black * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.5-6.4.6 3.9 7.6-2.8 1.4-3.9-7.7L5 20z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}

/* Descriptions hint */
.hired-a11y-tip {
	position: fixed;
	z-index: 2147483647;
	max-width: min(300px, calc(100vw - 16px));
	padding: 8px 12px;
	border-radius: 10px;
	background: #111;
	color: #fff;
	font-size: 14px;
	line-height: 1.35;
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hired-a11y-tip[hidden] {
	display: none;
}

/* High contrast: black text on white, dark accent, visible borders. Colours via variables (no filter on <html>, which breaks fixed elements). */
html.hired-a11y-high-contrast {
	--bg: #fff;
	--bg-soft: #fff;
	--text: #000;
	--muted: #1a222b;
	--accent: #047857;
	--accent-light: #059669;
	--surface: #fff;
	--surface-strong: #fff;
	--shadow-light: transparent;
	--shadow-dark: rgba(0, 0, 0, 0.35);
}

html.hired-a11y-high-contrast body {
	background: #fff !important;
	color: #000;
}

html.hired-a11y-high-contrast body::before,
html.hired-a11y-high-contrast body::after,
html.hired-a11y-high-contrast .page-bg,
html.hired-a11y-high-contrast .bg-orbs {
	display: none !important;
}

html.hired-a11y-high-contrast :is(.job-card, .sticky-box, .modal-content, .site-header, .blog-card, .input-control, .cookie-banner) {
	border: 2px solid #000 !important;
	background: #fff !important;
}

html.hired-a11y-high-contrast :is(input, textarea, select) {
	border: 2px solid #000 !important;
	background: #fff !important;
	color: #000 !important;
}

html.hired-a11y-high-contrast :is(a, button, summary):focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 3px !important;
}

html.hired-a11y-high-contrast a:not(.btn):not(.hired-a11y__toggle) {
	text-decoration: underline;
}

html.hired-a11y-underline-links a:not(.btn):not(.hired-a11y__toggle) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

html.hired-a11y-reduce-motion *:not(.hired-a11y):not(.hired-a11y *),
html.hired-a11y-reduce-motion *:not(.hired-a11y):not(.hired-a11y *)::before,
html.hired-a11y-reduce-motion *:not(.hired-a11y):not(.hired-a11y *)::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

@media (max-width: 760px) {
	.hired-a11y {
		--a11y-gutter: 14px;
		--a11y-size: 48px;
	}

	.hired-a11y__panel {
		width: min(248px, calc(100vw - 24px));
		padding: 12px;
	}
}

html.hired-a11y-high-contrast .btn:not(.btn-primary),
html.hired-a11y-high-contrast .link-button,
html.hired-a11y-high-contrast .site-header {
	border: 2px solid #000;
}


/* Head / close / reset (hired) */
.hired-a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.hired-a11y__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #F3F4F6;
  color: #111827;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hired-a11y__reset {
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--primary, #10B981) 40%, transparent);
  border-radius: 12px;
  background: #fff;
  color: var(--primary, #10B981);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.hired-a11y__close:focus-visible,
.hired-a11y__reset:focus-visible {
  outline: 2px solid var(--primary, #10B981);
  outline-offset: 2px;
}
/* Keep floating chrome above filters */
html:is(.hired-a11y-monochrome, .hired-a11y-sepia, .hired-a11y-invert) .hired-screen,
html:is(.hired-a11y-monochrome, .hired-a11y-sepia, .hired-a11y-invert) .cookie-banner {
  z-index: 2147483002;
}
body:has(.cookie-banner:not([hidden])) .hired-a11y {
  bottom: calc(var(--a11y-gutter, 22px) + 5.5rem);
}