/* ==========================================================================
   Cyprus Jobs - homepage

   DIRECTION
   A deep Mediterranean night for the hero - navy water, a teal aurora, real
   vacancies floating at different depths - opening onto a bright, quiet list.
   The drama is spent once, at the top, where it sells the site; the list below
   stays calm because that is where people read.

   MOTION RULES
   Only transform and opacity ever animate, so nothing here causes layout.
   Tilt and parallax are for a mouse; a phone gets the reveals and nothing that
   needs a pointer. Everything stops under prefers-reduced-motion.

   NO JAVASCRIPT
   The page is complete without it. Elements are only hidden-until-revealed
   under `.js`, which the head adds before first paint.
   ========================================================================== */

/* NAMING
   WordPress writes its own classes onto <body>: `search` on a results page,
   `tag` on a tag archive, `page`, `home`, `archive`, `single`. A component
   here called .search turned the whole results page into a four-column grid,
   because <body class="search"> matched it. Nothing in this file may share a
   name with a body class - hence .searchbar and .kicker.

   Plugins that draw inside our pages bring their own class names too. See
   the note above `.tool .btn`, and run tool/check_collisions.py.           */

:root {
	--ink: #071a2f;
	--ink-2: #0d2742;
	--ink-3: #16385c;
	--teal: #00a896;
	--teal-d: #00877a;
	--teal-l: #2dd4bf;
	--cyan: #38bdf8;
	--sun: #ffb454;

	--bg: #f3f6fa;
	--surface: #ffffff;
	--soft: #eef4f8;
	--line: #e1e8f0;
	--text: #0f1f33;
	--muted: #5a6b82;
	--faint: #8a99ad;

	--r-sm: 10px;
	--r: 18px;
	--r-lg: 26px;

	--sh-1: 0 1px 2px rgba(7, 26, 47, 0.05), 0 2px 10px rgba(7, 26, 47, 0.04);
	--sh-2: 0 6px 16px rgba(7, 26, 47, 0.07), 0 22px 48px rgba(7, 26, 47, 0.1);
	--sh-3: 0 18px 40px rgba(2, 12, 27, 0.28), 0 40px 90px rgba(2, 12, 27, 0.32);

	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--header-h: 72px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img {
	max-width: 100%;
	display: block;
}

/* An emoji is an image that has to behave like a letter.

   WordPress swaps each emoji for <img class="emoji"> and ships a stylesheet
   that sizes it to the text. That stylesheet is on the allowlist now - but
   this rule does not depend on it. `img { display: block }` just above is
   ours, and it is what turned every emoji into a full-width block; the same
   file that causes it should be the one that undoes it, whatever WordPress
   or a future allowlist does. These are core's own declarations. */
img.emoji,
img.wp-smiley {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	max-width: none;
	margin: 0 0.07em !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	vertical-align: -0.1em !important;
}

a {
	color: inherit;
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
	margin: 0;
}

ul {
	padding: 0;
	list-style: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--teal-l);
	outline-offset: 3px;
	border-radius: 6px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 200;
	background: var(--ink);
	color: #fff;
	padding: 10px 16px;
	border-radius: 10px;
	text-decoration: none;
	transition: top 0.2s;
}

.skip-link:focus {
	top: 12px;
}

/* ------------------------------------------------------------------ reveal */

.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
}

.js [data-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

/* The hero is the first thing anyone sees, so it does not wait for a script
   to download before it appears: its entrance is plain CSS. Everything below
   the fold is revealed by the observer as it scrolls into view. */
.js .hero [data-reveal] {
	opacity: 1;
	transform: none;
	animation: rise 0.9s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0);
	}
}

.scene {
	animation: scene-in 1.4s var(--ease) 0.25s both;
}

@keyframes scene-in {
	from {
		opacity: 0;
		transform: translate3d(40px, 0, 0) scale(0.94);
	}
}

/* Belt and braces: if the observer never fires - an old browser, a blocked
   script, a tab restored from sleep - nothing is left invisible. */
.reveal-all [data-reveal] {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-weight: 700;
	font-size: 0.925rem;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}

.btn:active {
	transform: scale(0.97);
}

.btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--teal) 0%, #009ec2 100%);
	box-shadow: 0 6px 18px rgba(0, 168, 150, 0.32);
}

/* A sweep of light across the button: one cheap pseudo-element. */
.btn-primary::after,
.search-go::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--ease);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 168, 150, 0.4);
}

.btn-primary:hover::after,
.search-go:hover::after {
	transform: translateX(120%);
}

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

.btn-ghost:hover {
	background: var(--soft);
}

.btn-outline {
	border-color: var(--line);
	background: #fff;
	color: var(--ink);
}

.btn-outline:hover {
	border-color: var(--teal);
	color: var(--teal-d);
}

.btn-light {
	background: #fff;
	color: var(--ink);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.btn-light:hover {
	transform: translateY(-2px);
}

.btn-block {
	width: 100%;
}

.link-quiet {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--teal-d);
	text-decoration: none;
}

.link-quiet:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------- staging banner */

.staging-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 7px 16px;
	background: #1a1305;
	color: #f6d79b;
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
}

.staging-badge {
	background: var(--sun);
	color: #2b1d00;
	padding: 2px 8px;
	border-radius: 6px;
	font-weight: 800;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid rgba(225, 232, 240, 0.7);
	transition: box-shadow 0.3s, background 0.3s;
}

.site-header.scrolled {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 30px rgba(7, 26, 47, 0.09);
}

.header-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 24px;
	transition: height 0.3s var(--ease);
}

.scrolled .header-inner {
	height: 60px;
}

.brand img {
	height: 46px;
	width: auto;
	transition: height 0.3s var(--ease);
}

.scrolled .brand img {
	height: 38px;
}

.main-nav {
	margin-right: auto;
}

.main-nav > ul {
	display: flex;
	align-items: center;
	gap: 2px;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	border: 0;
	background: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.925rem;
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.nav-link:hover,
.has-menu:focus-within > .nav-link {
	background: var(--soft);
	color: var(--teal-d);
}

.nav-link .fa-chevron-down {
	font-size: 0.62rem;
	transition: transform 0.3s var(--ease);
}

.has-menu {
	position: relative;
}

.has-menu:hover .fa-chevron-down,
.has-menu:focus-within .fa-chevron-down {
	transform: rotate(180deg);
}

.nav-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 230px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--sh-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.97);
	transform-origin: top left;
	transition: opacity 0.22s, transform 0.28s var(--ease), visibility 0.22s;
}

/* An invisible bridge, so the menu does not close in the gap on the way down. */
.nav-menu::before {
	content: "";
	position: absolute;
	inset: -10px 0 auto;
	height: 10px;
}

.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu,
.has-menu.open .nav-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav-menu a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

.nav-menu a i {
	width: 18px;
	color: var(--teal);
	text-align: center;
}

.nav-menu a:hover {
	background: var(--soft);
	color: var(--teal-d);
	transform: translateX(3px);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	position: relative;
}

.nav-toggle span {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--ink);
	transition: transform 0.3s var(--ease), opacity 0.2s;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }

/* ------------------------------------------------------------------ drawer */

.drawer-scrim {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(7, 26, 47, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.3s;
}

.drawer-scrim.open {
	opacity: 1;
}

.drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	width: min(88vw, 350px);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -20px 0 60px rgba(7, 26, 47, 0.25);
	transform: translateX(105%);
	visibility: hidden;
	transition: transform 0.42s var(--ease), visibility 0.42s;
}

/* While the menu is open, the two floating buttons - the job assistant and
   the cookie settings - are put away. They sit above everything by design
   (z-index 999998 and 1049), which put them on top of the menu's own
   "Register" button. */
.drawer-open #cjg-bot,
.drawer-open #hu-revoke {
	display: none !important;
}

.drawer.open {
	transform: none;
	visibility: visible;
}

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
}

.drawer-head img {
	height: 38px;
	width: auto;
}

.drawer-close {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: var(--soft);
	font-size: 1.1rem;
	cursor: pointer;
}

.drawer-nav {
	flex: 1;
	overflow-y: auto;
	padding: 10px 14px 18px;
}

.drawer-label {
	margin: 16px 8px 6px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
}

.drawer-nav a {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 48px;
	padding: 0 12px;
	border-radius: 12px;
	font-weight: 600;
	text-decoration: none;
}

.drawer-nav a i {
	width: 20px;
	text-align: center;
	color: var(--teal);
}

.drawer-nav a:active {
	background: var(--soft);
}

/* Links slide in one after another once the drawer is open. */
.drawer.open .drawer-nav > * {
	animation: drawer-in 0.5s var(--ease) both;
}

.drawer.open .drawer-nav > *:nth-child(1) { animation-delay: 0.06s; }
.drawer.open .drawer-nav > *:nth-child(2) { animation-delay: 0.09s; }
.drawer.open .drawer-nav > *:nth-child(3) { animation-delay: 0.12s; }
.drawer.open .drawer-nav > *:nth-child(4) { animation-delay: 0.15s; }
.drawer.open .drawer-nav > *:nth-child(5) { animation-delay: 0.18s; }
.drawer.open .drawer-nav > *:nth-child(6) { animation-delay: 0.21s; }
.drawer.open .drawer-nav > *:nth-child(7) { animation-delay: 0.24s; }
.drawer.open .drawer-nav > *:nth-child(8) { animation-delay: 0.27s; }
.drawer.open .drawer-nav > *:nth-child(n + 9) { animation-delay: 0.3s; }

@keyframes drawer-in {
	from { opacity: 0; transform: translateX(22px); }
	to { opacity: 1; transform: none; }
}

.drawer-foot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------------- hero */

.hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: linear-gradient(140deg, #04101f 0%, var(--ink) 38%, #0a2f4a 72%, #0a4650 100%);
	padding: clamp(40px, 6vw, 84px) 0 clamp(96px, 10vw, 150px);
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

/* The aurora: three soft lights drifting on long, mismatched loops, so the
   pattern never visibly repeats. */
.aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	will-change: transform;
}

.aurora-1 {
	width: 46vw;
	height: 46vw;
	min-width: 360px;
	min-height: 360px;
	left: -10vw;
	top: -16vw;
	background: radial-gradient(circle, #00c2a8 0%, transparent 68%);
	animation: drift-1 22s ease-in-out infinite alternate;
}

.aurora-2 {
	width: 40vw;
	height: 40vw;
	min-width: 320px;
	min-height: 320px;
	right: -8vw;
	top: 4vw;
	background: radial-gradient(circle, #1f8fff 0%, transparent 66%);
	opacity: 0.4;
	animation: drift-2 27s ease-in-out infinite alternate;
}

.aurora-3 {
	width: 26vw;
	height: 26vw;
	min-width: 220px;
	min-height: 220px;
	left: 42%;
	bottom: -10vw;
	background: radial-gradient(circle, var(--sun) 0%, transparent 68%);
	opacity: 0.2;
	animation: drift-3 19s ease-in-out infinite alternate;
}

@keyframes drift-1 {
	to { transform: translate3d(9vw, 7vw, 0) scale(1.18); }
}

@keyframes drift-2 {
	to { transform: translate3d(-10vw, 9vw, 0) scale(0.86); }
}

@keyframes drift-3 {
	to { transform: translate3d(-12vw, -6vw, 0) scale(1.3); }
}

.hero-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 78%);
	mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 78%);
}

.hero-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px 7px 12px;
	border: 1px solid rgba(94, 234, 212, 0.32);
	border-radius: 999px;
	background: rgba(13, 148, 136, 0.16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #9af1e2;
	font-size: 0.8125rem;
	font-weight: 700;
}

.pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--teal-l);
	flex-shrink: 0;
}

.pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--teal-l);
	animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
	to { transform: scale(3.4); opacity: 0; }
}

.hero-title {
	margin-top: 22px;
	font-size: clamp(2.1rem, 4.7vw, 3.75rem);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.grad {
	background: linear-gradient(100deg, #5eead4 0%, #38bdf8 35%, #a5f3fc 55%, #5eead4 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
	to { background-position: -220% 0; }
}

.hero-sub {
	margin-top: 18px;
	max-width: 56ch;
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	color: #b8c8dc;
}

/* The search bar: the one solid white object in the dark, so the eye lands on
   it without being told to. */
.searchbar {
	margin-top: 30px;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
	align-items: stretch;
	padding: 8px;
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--sh-3), 0 0 0 1px rgba(255, 255, 255, 0.1);
	color: var(--text);
	transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.searchbar:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--sh-3), 0 0 0 4px rgba(45, 212, 191, 0.35);
}

.search-field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	min-width: 0;
	border-right: 1px solid var(--line);
	cursor: text;
}

.search-field:nth-of-type(3) {
	border-right: 0;
}

.search-field > i {
	color: var(--teal);
	font-size: 1rem;
	flex-shrink: 0;
}

.search-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.search-label {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
}

.searchbar input,
.searchbar select {
	width: 100%;
	min-width: 0;
	padding: 2px 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-weight: 600;
	font-size: 0.95rem;
	text-overflow: ellipsis;
}

.searchbar select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235a6b82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 2px center;
	padding-right: 20px;
}

.searchbar input::placeholder {
	color: var(--faint);
	font-weight: 500;
}

.search-go {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 56px;
	padding: 0 22px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--teal) 0%, #0096c7 100%);
	color: #fff;
	font-weight: 800;
	font-size: 0.975rem;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 168, 150, 0.4);
	transition: transform 0.25s var(--ease), box-shadow 0.25s;
}

.search-go:hover {
	transform: scale(1.03);
	box-shadow: 0 12px 28px rgba(0, 168, 150, 0.5);
}

.hero-tags {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.hero-tags-label {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #7f93ad;
	margin-right: 2px;
}

.hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	color: #dbe7f5;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.25s var(--ease), background 0.2s, border-color 0.2s;
}

.hero-tag b {
	color: var(--teal-l);
	font-weight: 800;
}

.hero-tag:hover {
	transform: translateY(-2px);
	background: rgba(45, 212, 191, 0.18);
	border-color: rgba(45, 212, 191, 0.5);
}

.hero-stats {
	margin-top: 34px;
	display: flex;
	gap: clamp(20px, 3.4vw, 44px);
}

.hero-stats > div + div {
	padding-left: clamp(20px, 3.4vw, 44px);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-stats dt {
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.hero-stats dd {
	margin-top: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #91a5bf;
}

.hero-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: clamp(40px, 6vw, 90px);
	display: block;
}

.hero-wave path {
	fill: var(--bg);
}

/* -------------------------------------------------------------- the scene

   A real 3D stage: the parent sets the perspective, the stage keeps its
   children in 3D, and each card sits at its own depth. Script leans the whole
   stage toward the pointer; the cards bob on their own regardless.          */

.scene {
	position: relative;
	height: 540px;
	perspective: 1300px;
	perspective-origin: 50% 40%;
}

.scene-stage {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(var(--srx, 7deg)) rotateY(var(--sry, -15deg));
	transition: transform 0.6s var(--ease);
	will-change: transform;
}

.scene-orb {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 330px;
	height: 330px;
	margin: -165px 0 0 -165px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #7ff5e3 0%, #10b6a2 34%, #0b5d7a 68%, transparent 72%);
	opacity: 0.55;
	filter: blur(6px);
	transform: translateZ(-120px);
	animation: orb 9s ease-in-out infinite alternate;
}

@keyframes orb {
	to { transform: translateZ(-120px) scale(1.09); opacity: 0.7; }
}

.scene-ring {
	position: absolute;
	left: 50%;
	top: 46%;
	border: 1px solid rgba(94, 234, 212, 0.34);
	border-radius: 50%;
	transform-style: preserve-3d;
}

.scene-ring::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: var(--teal-l);
	box-shadow: 0 0 16px 4px rgba(45, 212, 191, 0.75);
}

.scene-ring-1 {
	width: 470px;
	height: 470px;
	margin: -235px 0 0 -235px;
	animation: orbit-1 26s linear infinite;
}

.scene-ring-2 {
	width: 600px;
	height: 600px;
	margin: -300px 0 0 -300px;
	border-color: rgba(56, 189, 248, 0.22);
	animation: orbit-2 38s linear infinite;
}

.scene-ring-2::after {
	background: var(--sun);
	box-shadow: 0 0 16px 4px rgba(255, 180, 84, 0.7);
}

@keyframes orbit-1 {
	from { transform: rotateX(74deg) rotateZ(0deg); }
	to { transform: rotateX(74deg) rotateZ(360deg); }
}

@keyframes orbit-2 {
	from { transform: rotateX(74deg) rotateY(14deg) rotateZ(360deg); }
	to { transform: rotateX(74deg) rotateY(14deg) rotateZ(0deg); }
}

.float-card {
	position: absolute;
	width: min(318px, 78%);
	text-decoration: none;
	color: var(--text);
	transform-style: preserve-3d;
}

.float-card-1 { top: 3%; left: 2%; transform: translateZ(70px); }
.float-card-2 { top: 36%; right: 0; transform: translateZ(170px); }
.float-card-3 { top: 70%; left: 9%; transform: translateZ(20px); }

.float-card-inner {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 15px 16px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 18px;
	background: linear-gradient(160deg, #ffffff 0%, #f2fbfa 100%);
	box-shadow: 0 30px 60px rgba(1, 10, 24, 0.5), 0 8px 18px rgba(1, 10, 24, 0.3);
	animation: bob 7s ease-in-out infinite alternate;
	will-change: transform;
}

.float-card-2 .float-card-inner { animation-duration: 8.5s; animation-delay: -3s; }
.float-card-3 .float-card-inner { animation-duration: 6.2s; animation-delay: -1.5s; }

@keyframes bob {
	from { transform: translate3d(0, -9px, 0) rotateZ(-0.6deg); }
	to { transform: translate3d(0, 11px, 0) rotateZ(0.7deg); }
}

.float-logo {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
}

.float-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.float-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.float-title {
	font-weight: 800;
	font-size: 0.92rem;
	line-height: 1.25;
}

.float-company {
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--muted);
}

.float-meta {
	margin-top: 5px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.float-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--soft);
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--ink-3);
}

.float-meta i {
	color: var(--teal);
}

.float-chip {
	position: absolute;
}

.float-chip-1 { top: 22%; right: 6%; transform: translateZ(230px); }
.float-chip-2 { top: 59%; left: -2%; transform: translateZ(150px); }
.float-chip-3 { top: 90%; right: 16%; transform: translateZ(110px); }

.float-chip-inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(7, 26, 47, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 16px 34px rgba(1, 10, 24, 0.45);
	color: #e6f0fb;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
	animation: bob 5.5s ease-in-out infinite alternate;
}

.float-chip-2 .float-chip-inner { animation-duration: 7.4s; animation-delay: -2s; }
.float-chip-3 .float-chip-inner { animation-duration: 6.4s; animation-delay: -4s; }

.float-chip i {
	color: var(--teal-l);
}

.float-chip b {
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--teal);
	color: #fff;
	font-size: 0.72rem;
}

/* ------------------------------------------------------------------ layout */

.layout {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 24px 88px;
	display: grid;
	grid-template-columns: 272px minmax(0, 1fr) 324px;
	gap: 28px;
	align-items: start;
}

.col-filters,
.col-side {
	position: sticky;
	top: calc(var(--header-h) + 8px);
}

/* Grid items refuse to shrink below their content by default. One long
   employer name was enough to push the whole column off the screen. */
.col-filters,
.col-jobs,
.col-side {
	min-width: 0;
}

.col-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.col-side > * {
	min-width: 0;
}

.cj-card,
.filters-body {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-1);
}

/* ----------------------------------------------------------------- filters */

.filterbox > summary {
	list-style: none;
}

.filterbox > summary::-webkit-details-marker {
	display: none;
}

/* On a wide screen the filters are simply there; the toggle is for phones. */
.filters-summary {
	display: none;
}

.filters-body {
	padding: 20px 18px;
	max-height: calc(100vh - var(--header-h) - 28px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color 0.3s;
}

.filters-body:hover {
	scrollbar-color: #c5d0dd transparent;
}

.filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.filters-head h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1.02rem;
	font-weight: 800;
}

.filters-head h2 i {
	color: var(--teal);
}

.fchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.fchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 0.76rem;
	font-weight: 700;
	text-decoration: none;
	animation: pop 0.4s var(--ease) both;
	transition: background 0.2s;
}

.fchip:hover {
	background: #b4233c;
}

.fchip i {
	font-size: 0.68rem;
	opacity: 0.75;
}

@keyframes pop {
	from { transform: scale(0.7); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.filter-group + .filter-group {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.filter-group h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
}

.filter-group h3 .link-quiet {
	text-transform: none;
	letter-spacing: 0;
}

.filter-row {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 38px;
	padding: 4px 8px;
	margin: 0 -8px;
	border-radius: 10px;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink-2);
	transition: background 0.2s, color 0.2s;
}

.filter-row:hover {
	background: var(--soft);
}

.filter-box {
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 2px solid #c5d0dd;
	border-radius: 6px;
	background: #fff;
	transition: background 0.2s, border-color 0.2s, transform 0.3s var(--ease);
}

.filter-row:hover .filter-box {
	border-color: var(--teal);
	transform: scale(1.1);
}

.filter-box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.3s var(--ease);
}

.filter-row.is-active {
	color: var(--teal-d);
}

.filter-row.is-active .filter-box {
	background: var(--teal);
	border-color: var(--teal);
}

.filter-row.is-active .filter-box::after {
	transform: rotate(45deg) scale(1);
}

.filter-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filter-count {
	min-width: 26px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--soft);
	font-size: 0.72rem;
	font-weight: 800;
	text-align: center;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.filter-row.is-active .filter-count {
	background: rgba(0, 168, 150, 0.14);
	color: var(--teal-d);
}

.type-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.type-btn {
	display: grid;
	place-items: center;
	min-height: 42px;
	padding: 0 8px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ink-2);
	text-decoration: none;
	transition: transform 0.25s var(--ease), border-color 0.2s, background 0.2s, color 0.2s;
}

.type-btn:hover {
	transform: translateY(-2px);
	border-color: var(--teal);
	color: var(--teal-d);
}

.type-btn.is-active {
	border-color: var(--teal);
	background: var(--teal);
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 168, 150, 0.3);
}

/* -------------------------------------------------------------- job stream */

.stream-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.stream-title {
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.stream-sub {
	margin-top: 4px;
	font-size: 0.875rem;
	color: var(--muted);
}

.sort select {
	min-height: 44px;
	padding: 0 38px 0 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235a6b82' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.sort select:hover {
	border-color: var(--teal);
}

.job-list {
	display: grid;
	gap: 14px;
	/* The cards tilt in 3D; the list supplies the camera. */
	perspective: 1400px;
}

/* ---------------------------------------------------------------- job card

   Tilt is driven by four custom properties the script sets on pointer move.
   With no script, or on a phone, they keep their defaults and the card simply
   lifts on hover.                                                            */

.tilt {
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0);
	transition: transform 0.5s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}

/* The reveal owns `transform` until it has finished; after that the tilt
   does, without the reveal's stagger delaying every mouse move. */
.js .tilt[data-reveal].settled {
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0);
	transition: transform 0.22s ease-out, box-shadow 0.4s var(--ease), border-color 0.3s;
	transition-delay: 0s;
}

.tilt-glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 191, 0.2), transparent 55%);
	transition: opacity 0.35s;
}

.tilt:hover .tilt-glare {
	opacity: 1;
}

.job-card {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	gap: 18px;
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh-1);
}

/* A teal edge that grows down the left as the card is picked up. */
.job-card::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 18px;
	bottom: 18px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, var(--teal-l), #0096c7);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.45s var(--ease);
}

.job-card:hover {
	--lift: -4px;
	border-color: rgba(0, 168, 150, 0.4);
	box-shadow: var(--sh-2);
}

.job-card:hover::before {
	transform: scaleY(1);
}

.job-logo {
	width: 60px;
	height: 60px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 12px rgba(7, 26, 47, 0.06);
	transition: transform 0.5s var(--ease), box-shadow 0.4s;
}

/* Depth inside the card: the logo and the title sit nearer the viewer than
   the surface, so they slide against it as the card tilts. */
.job-card:hover .job-logo {
	transform: translateZ(34px) scale(1.05);
	box-shadow: 0 14px 26px rgba(7, 26, 47, 0.16);
}

.job-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.logo-initials {
	font-weight: 800;
	font-size: 1rem;
	color: var(--teal-d);
}

.job-body {
	min-width: 0;
	transform-style: preserve-3d;
}

.job-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 9px;
}

.job-company {
	position: relative;
	z-index: 2;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ink-3);
	text-decoration: none;
}

a.job-company:hover {
	color: var(--teal-d);
	text-decoration: underline;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	white-space: nowrap;
}

.badge-approved {
	background: #e3f8f3;
	color: #05766a;
}

.badge-closed {
	background: #fde8ea;
	color: #b4233c;
}

.badge-featured {
	background: linear-gradient(135deg, #fff1cf, #ffd98a);
	color: #7a4a00;
}

.job-time {
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--faint);
	white-space: nowrap;
}

.job-title {
	margin-top: 7px;
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
	transition: transform 0.5s var(--ease);
}

.job-card:hover .job-title {
	transform: translateZ(22px);
}

.job-title a {
	text-decoration: none;
	transition: color 0.2s;
}

.job-card:hover .job-title a {
	color: var(--teal-d);
}

/* The title's link, stretched over the whole card. */
.stretched::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--r);
}

.job-snippet {
	margin-top: 6px;
	font-size: 0.9rem;
	color: var(--muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.job-foot {
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.job-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--soft);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-3);
}

.pill i {
	color: var(--teal);
	font-size: 0.74rem;
}

.pill-soft {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--muted);
}

.job-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	font-size: 0.84rem;
	font-weight: 800;
	color: var(--teal-d);
}

.job-cta i {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 168, 150, 0.12);
	font-size: 0.74rem;
	transition: transform 0.4s var(--ease), background 0.3s, color 0.3s;
}

.job-card:hover .job-cta i {
	transform: translateX(5px);
	background: var(--teal);
	color: #fff;
}

/* A closed listing: quieter, never crossed out. It is information, not an
   error, and a struck-through title is harder to read than a grey one. */
.job-card.is-closed {
	background: #f8fafc;
	box-shadow: none;
}

.job-card.is-closed .job-logo {
	filter: grayscale(1);
	opacity: 0.6;
}

.job-card.is-closed .job-title,
.job-card.is-closed .job-snippet {
	color: var(--faint);
}

.job-card.is-closed .job-cta {
	color: var(--muted);
}

.job-card.is-closed::before {
	background: #c5d0dd;
}

.job-card.is-featured {
	border-color: transparent;
	background: linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, var(--sun), var(--teal-l), var(--cyan)) border-box;
	border: 1.5px solid transparent;
}

.empty {
	padding: 54px 28px;
	text-align: center;
	background: var(--surface);
	border: 1px dashed #c5d0dd;
	border-radius: var(--r);
}

.empty-icon {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	border-radius: 20px;
	background: var(--soft);
	color: var(--teal);
	font-size: 1.6rem;
	animation: spin-slow 14s linear infinite;
}

@keyframes spin-slow {
	to { transform: rotate(360deg); }
}

.empty h3 {
	font-size: 1.2rem;
	font-weight: 800;
}

.empty p {
	margin: 6px auto 20px;
	max-width: 44ch;
	color: var(--muted);
}

/* ------------------------------------------------------------------- pager */

.pager {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	font-weight: 800;
	font-size: 0.9rem;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: transform 0.25s var(--ease), border-color 0.2s, color 0.2s, box-shadow 0.25s;
}

.pager a.page-numbers:hover {
	transform: translateY(-3px);
	border-color: var(--teal);
	color: var(--teal-d);
	box-shadow: var(--sh-2);
}

.pager .current {
	border-color: transparent;
	background: linear-gradient(135deg, var(--teal), #0096c7);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 168, 150, 0.36);
}

.pager .dots {
	border-color: transparent;
	background: transparent;
	color: var(--faint);
}

/* ----------------------------------------------------------------- widgets */

.cj-card {
	padding: 22px;
}

.cj-card h2 {
	font-size: 1.06rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.cj-card p {
	margin-top: 6px;
	font-size: 0.9rem;
	color: var(--muted);
}

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

.card-head h2 {
	display: flex;
	align-items: center;
	gap: 9px;
}

.card-head h2 i {
	color: var(--teal);
}

/* CV check: the one dark card in a white column, so it reads as the offer. */
.card-cv {
	border: 0;
	color: #fff;
	background: linear-gradient(150deg, var(--ink) 0%, #0b3a55 60%, #0b6f73 100%);
	box-shadow: 0 18px 40px rgba(7, 26, 47, 0.26);
	overflow: hidden;
}

.card-cv::before {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	right: -70px;
	top: -80px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(45, 212, 191, 0.55), transparent 68%);
	animation: orb-2 8s ease-in-out infinite alternate;
}

@keyframes orb-2 {
	to { transform: translate3d(-26px, 22px, 0) scale(1.2); }
}

.card-cv > * {
	position: relative;
}

.card-cv h2 {
	margin-top: 16px;
	font-size: 1.2rem;
}

.card-cv p {
	color: #b8cde0;
	margin-bottom: 18px;
}

.card-cv:hover {
	--lift: -4px;
}

.card-cv .tilt-glare {
	position: absolute;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 60%);
}

.cv-ring {
	position: relative;
	width: 68px;
	height: 68px;
	display: grid;
	place-items: center;
}

.cv-ring svg {
	position: absolute;
	inset: 0;
	transform: rotate(-90deg);
}

.cv-ring circle {
	fill: none;
	stroke-width: 8;
	stroke-linecap: round;
}

.cv-ring-track {
	stroke: rgba(255, 255, 255, 0.14);
}

/* 2 * pi * 52 = 327. The ring draws itself once the card scrolls into view. */
.cv-ring-bar {
	stroke: var(--teal-l);
	stroke-dasharray: 327;
	stroke-dashoffset: 327;
}

.in .cv-ring-bar,
html:not(.js) .cv-ring-bar {
	animation: ring 1.8s var(--ease) 0.35s forwards;
}

@keyframes ring {
	to { stroke-dashoffset: 0; }
}

.cv-ring i {
	font-size: 1.25rem;
	color: var(--teal-l);
}

.employers li + li {
	border-top: 1px solid var(--line);
}

.employers a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 6px;
	margin: 0 -6px;
	border-radius: 12px;
	text-decoration: none;
	transition: background 0.2s, transform 0.3s var(--ease);
}

.employers a:hover {
	background: var(--soft);
	transform: translateX(4px);
}

.employer-logo {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.employer-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.employer-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.employer-text strong {
	font-size: 0.88rem;
	font-weight: 800;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.employer-text span {
	font-size: 0.76rem;
	color: var(--muted);
}

.employer-n {
	min-width: 34px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(0, 168, 150, 0.12);
	color: var(--teal-d);
	font-size: 0.8rem;
	font-weight: 800;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.card-employer {
	background: linear-gradient(160deg, #ffffff 0%, #e9f8f5 100%);
}

.kicker {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.card-employer p {
	margin-bottom: 16px;
}

.card-app {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* A phone, built from CSS and held at an angle: genuine perspective, no image. */
.phone {
	flex-shrink: 0;
	perspective: 520px;
}

.phone-body {
	position: relative;
	width: 84px;
	height: 158px;
	padding: 20px 10px 10px;
	border: 3px solid #1d3d60;
	border-radius: 20px;
	background: linear-gradient(170deg, var(--ink-2), var(--ink));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transform: rotateY(-24deg) rotateX(9deg);
	box-shadow: 18px 22px 34px rgba(7, 26, 47, 0.3);
	animation: phone 6.5s ease-in-out infinite alternate;
}

@keyframes phone {
	to { transform: rotateY(-12deg) rotateX(3deg) translate3d(0, -5px, 0); }
}

.phone-notch {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 26px;
	height: 5px;
	margin-left: -13px;
	border-radius: 4px;
	background: #1d3d60;
}

.phone-body img {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.phone-line {
	width: 100%;
	height: 7px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.14);
}

.phone-line.short {
	width: 62%;
	align-self: flex-start;
	background: rgba(45, 212, 191, 0.5);
}

.app-text {
	min-width: 0;
}

.stores {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.stores a {
	transition: transform 0.25s var(--ease);
}

.stores a:hover {
	transform: translateY(-2px);
}

.stores img {
	height: 38px;
	width: auto;
	border-radius: 7px;
}

.store-soon {
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--faint);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
	background: var(--ink);
	color: #a9bad0;
}

.footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 60px 24px 40px;
	display: grid;
	grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
	gap: 36px;
}

.footer-brand > img {
	height: 44px;
	width: auto;
	padding: 6px 10px;
	border-radius: 12px;
	background: #fff;
}

.footer-tagline {
	margin-top: 16px;
	font-size: 1.06rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
}

.footer-about {
	margin-top: 8px;
	max-width: 36ch;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #a9bad0;
}

.site-footer h3 {
	margin-bottom: 12px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
}

.site-footer nav a {
	display: block;
	padding: 6px 0;
	font-size: 0.9rem;
	text-decoration: none;
	transition: color 0.2s, transform 0.25s var(--ease);
}

.site-footer nav a:hover {
	color: var(--teal-l);
	transform: translateX(4px);
}

.footer-bottom {
	max-width: 1320px;
	margin: 0 auto;
	padding: 20px 24px calc(22px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 0.82rem;
}

.to-top {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.to-top:hover {
	color: var(--teal-l);
}

/* --------------------------------------------------------------- page head

   The hero's smaller sibling, for every page that is not the front door. The
   same water and the same light, so the site reads as one place - but a third
   of the height, because somebody who has just searched wants the results.  */

.hero.page-head {
	padding: clamp(26px, 3.6vw, 46px) 0 clamp(78px, 8vw, 118px);
}

.page-head .hero-inner {
	grid-template-columns: minmax(0, 1fr);
}

.page-head .hero-copy {
	max-width: 980px;
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #8ea3be;
}

.crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.crumbs a:hover {
	color: #fff;
}

.crumbs i {
	font-size: 0.6rem;
	opacity: 0.6;
}

.crumbs [aria-current] {
	color: #d7e3f1;
}

.page-title {
	margin-top: 12px;
	font-size: clamp(1.75rem, 3.7vw, 2.9rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.page-sub {
	margin-top: 9px;
	font-size: clamp(0.95rem, 1.2vw, 1.075rem);
	color: #b8c8dc;
}

.page-sub strong {
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.page-head .searchbar {
	margin-top: 24px;
}

/* ------------------------------------------------------------- a vacancy

   Two columns instead of three: the role itself, and a quiet side column that
   answers "where, what, until when, who" without making anybody scroll.     */

.layout.layout-job {
	grid-template-columns: minmax(0, 1fr) 340px;
}

.job-article {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.btn-lg {
	min-height: 54px;
	padding: 0 28px;
	border-radius: 14px;
	font-size: 1rem;
}

.job-head-row {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.job-head-logo {
	width: 76px;
	height: 76px;
	flex-shrink: 0;
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
	display: grid;
	place-items: center;
	box-shadow: 0 18px 40px rgba(1, 10, 24, 0.45);
}

.job-head-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.job-head-text {
	min-width: 0;
}

.job-head .page-title {
	margin-top: 0;
}

.job-head-company {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: #cfe0f2;
}

.job-head-company a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transition: color 0.2s, border-color 0.2s;
}

.job-head-company a:hover {
	color: #fff;
	border-color: var(--teal-l);
}

.job-facts {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.job-facts li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	font-size: 0.84rem;
	font-weight: 600;
	color: #dbe7f5;
}

.job-facts i {
	color: var(--teal-l);
}

.job-head-cta {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.job-deadline {
	font-size: 0.875rem;
	font-weight: 600;
	color: #91a5bf;
}

.job-closed-note {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	font-weight: 600;
	color: #e6f0fb;
}

.card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	font-size: 1.1rem;
	font-weight: 800;
}

.card-title i {
	color: var(--teal);
}

.prose-card {
	padding: 28px clamp(20px, 3vw, 34px);
}

/* The employer's own words, pasted from Word, an email, another job board.
   They arrive with their own fonts, sizes and colours; this takes those back
   so that every vacancy reads in the same voice. */
.prose {
	font-size: 1rem;
	line-height: 1.75;
	color: #24364f;
	overflow-wrap: anywhere;
}

/* Icons are fonts too. Resetting the family on everything turned every
   Font Awesome glyph inside a page into an empty box. */
.prose *:not(.fa):not([class*="fa-"]) {
	font-family: inherit !important;
}

.prose * {
	max-width: 100%;
}

.prose p,
.prose li,
.prose span,
.prose div {
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	background: none !important;
}

.prose > * + * {
	margin-top: 1em;
}

.prose p {
	margin: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
	margin: 1.6em 0 0.5em;
	font-size: 1.12rem !important;
	font-weight: 800;
	line-height: 1.3;
	color: var(--text) !important;
}

.prose ul,
.prose ol {
	margin: 0;
	padding-left: 1.35em;
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li + li {
	margin-top: 0.4em;
}

.prose li::marker {
	color: var(--teal);
}

.prose a {
	color: var(--teal-d);
	font-weight: 600;
}

.prose strong,
.prose b {
	font-weight: 800;
	color: var(--text) !important;
}

.prose img {
	height: auto;
	border-radius: 12px;
}

.prose table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
}

.prose td,
.prose th {
	padding: 8px 12px;
	border: 1px solid var(--line);
}

.job-address {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 10px;
	font-weight: 600;
	color: var(--muted);
}

.job-address i {
	color: var(--teal);
	margin-top: 4px;
}

.apply-card {
	background: linear-gradient(160deg, #ffffff 0%, #eaf8f5 100%);
}

.apply-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.apply-gate {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.apply-row h2 {
	font-size: 1.2rem;
}

.apply-why a {
	color: var(--teal-d);
	font-weight: 700;
}

.share {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(7, 26, 47, 0.08);
	display: flex;
	align-items: center;
	gap: 8px;
}

.share > span {
	margin-right: 4px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--faint);
}

.share a,
.share button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	color: var(--ink-3);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}

.share a:hover,
.share button:hover {
	transform: translateY(-3px);
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}

.share button.copied {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.similar {
	margin-top: 14px;
}

/* The page for an address that leads nowhere: four ways back. */
.lost-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

.summary > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.9rem;
}

.summary > div:last-child {
	border-bottom: 0;
}

.summary dt {
	color: var(--muted);
	font-weight: 600;
}

.summary dd {
	font-weight: 800;
	text-align: right;
}

.card-summary .btn {
	margin-top: 14px;
}

.card-summary h2,
.card-company h2 {
	margin-bottom: 6px;
}

.company-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	text-decoration: none;
}

.company-top .employer-logo {
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

.company-top:hover strong {
	color: var(--teal-d);
}

/* What the application handler says after it redirects back here. */
.notices .noo-messages {
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid;
	font-weight: 600;
	animation: pop 0.5s var(--ease) both;
}

.notices .noo-messages + .noo-messages {
	margin-top: 10px;
}

.notices .noo-message-success {
	background: #e3f8f3;
	border-color: #9fe3d5;
	color: #05665b;
}

.notices .noo-message-error {
	background: #fde8ea;
	border-color: #f5b5bf;
	color: #9c1c33;
}

.notices .noo-message-notice {
	background: #fff6e0;
	border-color: #f5d990;
	color: #6f4a00;
}

/* ------------------------------------------------------- the apply dialog

   The markup is the theme's Bootstrap modal, included untouched so that its
   fields, its nonce and its hooks stay exactly what the server expects.
   Bootstrap's stylesheet and script are not loaded; this is the whole of the
   presentation, and homepage.js is the whole of the behaviour.              */

.modal {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	background: rgba(7, 26, 47, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.modal.is-open {
	display: flex;
	animation: fade 0.25s ease both;
}

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

.modal-dialog {
	width: min(100%, 620px);
	margin: auto;
}

.modal.is-open .modal-dialog {
	animation: dialog 0.45s var(--ease) both;
}

@keyframes dialog {
	from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.96); }
}

.modal-content {
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--sh-3);
	overflow: hidden;
}

.modal-header {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	background: linear-gradient(135deg, var(--ink) 0%, #0b3a55 100%);
	color: #fff;
}

.modal-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
}

.modal .close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, transform 0.3s var(--ease);
}

.modal .close:hover {
	background: rgba(255, 255, 255, 0.24);
	transform: rotate(90deg);
}

.modal-body {
	padding: 24px;
}

.modal .form-group {
	margin-bottom: 16px;
}

.modal .control-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink-2);
}

.modal .required-field > .control-label::after {
	content: " *";
	color: #d6334f;
}

.modal .form-control,
.modal select,
.modal textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: #fff;
	font-size: 0.95rem;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.modal textarea {
	min-height: 120px;
	resize: vertical;
}

.modal .form-control:focus,
.modal select:focus,
.modal textarea:focus {
	outline: 0;
	border-color: var(--teal);
	box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.25);
}

.modal .row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.modal .form-control-file {
	position: relative;
	display: flex;
	align-items: stretch;
	border: 1.5px dashed #b9c6d6;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.modal .form-control-file:hover {
	border-color: var(--teal);
	background: #f3fbf9;
}

.modal .form-control-file-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	background: var(--ink);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

.modal .form-control-file .form-control {
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.modal .form-control-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.modal .help-block {
	margin: 6px 0 0;
	font-size: 0.76rem;
	color: var(--faint);
}

.modal-actions {
	margin-top: 8px;
}

.modal-actions .btn {
	width: 100%;
	min-height: 52px;
	font-size: 1rem;
}

.modal .noo-ajax-result {
	padding: 12px 14px;
	border-radius: 12px;
	background: #fde8ea;
	color: #9c1c33;
	font-weight: 600;
}

body.modal-open {
	overflow: hidden;
}

@media (max-width: 1100px) {
	.layout.layout-job {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.job-head-row {
		align-items: flex-start;
	}

	.job-head-logo {
		width: 58px;
		height: 58px;
		border-radius: 16px;
	}

	.apply-row {
		flex-direction: column;
		align-items: stretch;
	}

	.job-head-cta .btn,
	.apply-row .btn {
		width: 100%;
	}

	/* On a phone the dialog is a sheet that rises from the bottom edge. */
	.modal {
		padding: 0;
		align-items: flex-end;
	}

	.modal-dialog {
		width: 100%;
		margin: 0;
	}

	.modal-content {
		border-radius: 24px 24px 0 0;
		max-height: 92vh;
		overflow-y: auto;
	}

	.modal.is-open .modal-dialog {
		animation-name: sheet-up;
	}

	@keyframes sheet-up {
		from { transform: translate3d(0, 100%, 0); }
	}
}

/* The side column stays beside the role until there is no room for both. The
   list pages drop theirs earlier, because they have three columns to fit. */
.layout-job .col-side {
	grid-column: auto;
	grid-template-columns: minmax(0, 1fr);
	position: sticky;
}

@media (max-width: 1100px) {
	.layout-job .col-side {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.layout-job .col-side {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------- employers */

/* One column of content, for pages with no side column. */
.layout.layout-wide {
	grid-template-columns: minmax(0, 1fr);
}

.searchbar.searchbar-single {
	grid-template-columns: minmax(0, 1fr) auto;
	max-width: 640px;
}

.searchbar-single .search-field {
	border-right: 0;
}

.btn-glass {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.btn-glass:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

/* A two-way switch, built from two links. */
.toggle {
	display: inline-flex;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	flex-shrink: 0;
}

.toggle-btn {
	padding: 9px 16px;
	border-radius: 10px;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s, color 0.25s;
}

.toggle-btn:hover {
	color: var(--teal-d);
}

.toggle-btn.is-active {
	background: var(--ink);
	color: #fff;
}

.company-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	perspective: 1400px;
}

.company-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	box-shadow: var(--sh-1);
	text-decoration: none;
	min-width: 0;
}

.company-card:hover {
	--lift: -5px;
	border-color: rgba(0, 168, 150, 0.4);
	box-shadow: var(--sh-2);
}

.company-logo {
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	display: grid;
	place-items: center;
	transition: transform 0.5s var(--ease), box-shadow 0.4s;
}

.company-card:hover .company-logo {
	transform: translateZ(30px) scale(1.06);
	box-shadow: 0 14px 26px rgba(7, 26, 47, 0.16);
}

.company-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.company-name {
	max-width: 100%;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
	transition: color 0.2s;
}

.company-card:hover .company-name {
	color: var(--teal-d);
}

.company-jobs {
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--faint);
}

.company-card.is-hiring .company-jobs {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 168, 150, 0.12);
	color: var(--teal-d);
}

.company-jobs b {
	font-weight: 800;
}

.cta-band {
	margin-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 28px;
}

.cta-band p {
	margin-bottom: 0;
}

.share-plain {
	margin-top: 12px;
}

.summary dd a {
	color: var(--teal-d);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.summary dd a:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.company-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.company-card {
		padding: 16px;
	}

	.company-logo {
		width: 50px;
		height: 50px;
		border-radius: 14px;
	}

	.cta-band {
		flex-direction: column;
		align-items: stretch;
	}

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

/* ----------------------------------------------------------- content pages */

/* Less header for a page whose title is the whole of what there is to say. */
.hero.page-head.page-head-slim {
	padding-bottom: clamp(70px, 7vw, 100px);
}

/* A reading column. Seventy-odd characters a line is where prose is easiest
   to read; a policy stretched across a 1300px screen is not read at all. */
.layout.layout-read {
	max-width: 900px;
}

.layout.layout-tool {
	max-width: 1180px;
}

.tool {
	min-width: 0;
}

/* WPBakery wraps every paragraph in six nested divs. They carry no layout
   here - its stylesheet is not loaded - so they are simply made to stack. */
.prose .vc_row,
.prose .wpb_column,
.prose .vc_column-inner,
.prose .wpb_wrapper,
.prose .wpb_content_element {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

.prose .wpb_content_element + .wpb_content_element,
.prose .vc_row + .vc_row {
	margin-top: 1em;
}

.prose .vc_empty_space {
	height: 12px !important;
}

/* The FAQ. WPBakery's toggle is a title and a body; its script and styles are
   gone, so this is the accordion: closed under `.js`, open without it. */
.prose .vc_toggle {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff !important;
	overflow: hidden;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.prose .vc_toggle + .vc_toggle {
	margin-top: 10px;
}

.prose .vc_toggle:hover,
.prose .vc_toggle.is-open {
	border-color: rgba(0, 168, 150, 0.45);
	box-shadow: var(--sh-1);
}

.prose .vc_toggle_title {
	position: relative;
	padding: 16px 52px 16px 18px;
	cursor: pointer;
	user-select: none;
}

.prose .vc_toggle_title h4 {
	margin: 0;
	font-size: 1rem !important;
	font-weight: 700;
}

.prose .vc_toggle_title::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border: solid var(--teal);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	transition: transform 0.35s var(--ease), margin 0.35s var(--ease);
}

.prose .vc_toggle.is-open .vc_toggle_title::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.prose .vc_toggle_icon {
	display: none;
}

.prose .vc_toggle_content {
	padding: 0 18px 18px;
}

.js .prose .vc_toggle:not(.is-open) .vc_toggle_content {
	display: none;
}

.prose .vc_toggle.is-open .vc_toggle_content {
	animation: sheet 0.35s var(--ease);
}

/* Contact Form 7, in the site's own clothes. */

/* The form's hidden inputs live in a fieldset, which has a border by default
   and so appears as an empty box above the first field. */
.prose .wpcf7 .hidden-fields-container {
	display: none;
}

/* The old theme hung an icon on each field by wrapping the input in a
   <span class="fa fa-user">. The input then inherits the ICON font, so what
   somebody types is drawn in Font Awesome. The wrapper is made an ordinary
   span again; the placeholder already says what the field is for. */
.prose .wpcf7 .fa {
	display: block;
	font-family: inherit !important;
	font-weight: inherit;
	line-height: inherit;
}

.prose .wpcf7 .fa::before {
	display: none;
}

/* Its two-column row, without Bootstrap. */
.prose .wpcf7 .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.prose .wpcf7 .col-md-12 {
	grid-column: 1 / -1;
}

.prose .wpcf7 .text-center {
	text-align: left;
}

@media (max-width: 560px) {
	.prose .wpcf7 .row {
		grid-template-columns: minmax(0, 1fr);
	}

	.prose .wpcf7 input[type="submit"] {
		width: 100%;
	}
}

.prose .wpcf7 form p {
	margin: 0 0 16px;
}

.prose .wpcf7 label {
	display: block;
	font-size: 0.84rem !important;
	font-weight: 700;
	color: var(--ink-2) !important;
}

.prose .wpcf7 input[type="text"],
.prose .wpcf7 input[type="email"],
.prose .wpcf7 input[type="tel"],
.prose .wpcf7 input[type="url"],
.prose .wpcf7 select,
.prose .wpcf7 textarea {
	display: block;
	width: 100%;
	min-height: 50px;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: #fff !important;
	font-size: 0.95rem !important;
	font-weight: 500;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.prose .wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}

.prose .wpcf7 input:focus,
.prose .wpcf7 select:focus,
.prose .wpcf7 textarea:focus {
	outline: 0;
	border-color: var(--teal);
	box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.25);
}

.prose .wpcf7 input[type="submit"] {
	min-height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--teal) 0%, #009ec2 100%) !important;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 168, 150, 0.35);
	transition: transform 0.25s var(--ease), box-shadow 0.25s;
}

.prose .wpcf7 input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 168, 150, 0.45);
}

.prose .wpcf7-not-valid-tip {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem !important;
	font-weight: 600;
	color: #b4233c !important;
}

.prose .wpcf7 .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 13px 16px;
	border: 1px solid #f5d990;
	border-radius: 12px;
	background: #fff6e0 !important;
	color: #6f4a00 !important;
	font-weight: 600;
}

.prose .wpcf7 form.sent .wpcf7-response-output {
	border-color: #9fe3d5;
	background: #e3f8f3 !important;
	color: #05665b !important;
}

.prose .wpcf7 form.init .wpcf7-response-output,
.prose .wpcf7 .screen-reader-response {
	display: none;
}

.prose .wpcf7-spinner {
	display: none;
}

/* ------------------------------------------------ somebody else's markup

   A `.tool` is a plugin's own interface - Guardian's CV check, CV library -
   printed with its own markup and its own stylesheet. Nothing of ours should
   reach into it.

   Four of our names used to: `.chip`, `.chips`, `.card` and `.filters` were
   also the plugin's, and its skill tags came out white on white. Those are
   renamed here (.fchip, .fchips, .cj-card, .filterbox). `.btn` cannot be -
   the theme's apply form and Contact Form 7 are restyled through it - so what
   it would leak into a plugin's own buttons is taken back instead.

   tool/check_collisions.py finds the next one before a visitor does.       */

.tool .btn {
	display: inline-block;
	min-height: 0;
	gap: 0;
	white-space: normal;
	position: static;
	overflow: visible;
	text-decoration: none;
	transition: none;
}

.tool .btn:active {
	transform: none;
}

/* ---------------------------------------------------------- inside WordPress

   The page now runs through wp_head(), so two things arrive that a standalone
   document never had: the admin toolbar, and whatever a kept plugin prints. */

/* The toolbar is fixed at the top; a sticky header at top:0 hides under it. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* The toolbar scrolls away on a phone, so the header returns to the top. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* ==========================================================================
   Responsive

   Written from the widest layout down. Each step answers one question: what
   stops fitting here, and where does it go.
   ========================================================================== */

/* Three columns stop fitting: the widgets drop under the list, two abreast. */
@media (max-width: 1240px) {
	.layout {
		grid-template-columns: 260px minmax(0, 1fr);
	}

	.col-side {
		grid-column: 1 / -1;
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.hide-md {
		display: none;
	}
}

/* The 3D scene needs room it no longer has; the copy takes the full width. */
@media (max-width: 1080px) {
	.hero-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.scene {
		display: none;
	}

	.hero-copy {
		max-width: 760px;
	}
}

/* The nav becomes a drawer, and the filters become a toggle above the list. */
@media (max-width: 1023px) {
	:root {
		--header-h: 64px;
	}

	.main-nav {
		display: none;
	}

	.header-actions {
		margin-left: auto;
	}

	.nav-toggle {
		display: block;
	}

	.layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.col-filters {
		position: static;
	}

	.filters-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		padding: 0 18px;
		border: 1px solid var(--line);
		border-radius: 14px;
		background: #fff;
		box-shadow: var(--sh-1);
		font-weight: 800;
		cursor: pointer;
		user-select: none;
	}

	.filters-summary i:first-child {
		color: var(--teal);
		margin-right: 8px;
	}

	.filters-n {
		display: inline-grid;
		place-items: center;
		min-width: 22px;
		height: 22px;
		margin-left: 6px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--teal);
		color: #fff;
		font-size: 0.72rem;
	}

	.filters-caret {
		color: var(--muted);
		font-size: 0.8rem;
		transition: transform 0.35s var(--ease);
	}

	.filterbox[open] .filters-caret {
		transform: rotate(180deg);
	}

	.filterbox[open] .filters-body {
		margin-top: 10px;
		animation: sheet 0.4s var(--ease);
	}

	@keyframes sheet {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: none; }
	}

	.filters-body {
		max-height: none;
	}

	.filters-head h2 {
		display: none;
	}

	.filters-head {
		justify-content: flex-end;
		margin-bottom: 6px;
	}

	.filters-head:empty {
		display: none;
	}

	/* Three filter groups side by side on a tablet beats one long column. */
	.filters-body {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 24px;
	}

	.filters-head,
	.fchips {
		grid-column: 1 / -1;
	}

	.filter-group + .filter-group {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

@media (max-width: 760px) {
	.header-inner,
	.hero-inner,
	.layout,
	.footer-inner,
	.footer-bottom {
		padding-left: 16px;
		padding-right: 16px;
	}

	.brand img {
		height: 38px;
	}

	/* The search stacks; each field becomes a full-width row. */
	.searchbar {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 18px;
	}

	.search-field {
		min-height: 58px;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.search-field:nth-of-type(3) {
		border-bottom: 0;
	}

	.search-go {
		margin-top: 8px;
	}

	.hero-stats {
		gap: 0;
		justify-content: space-between;
	}

	.hero-stats > div {
		flex: 1;
	}

	.hero-stats > div + div {
		padding-left: 14px;
	}

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

	.filter-group + .filter-group {
		margin-top: 18px;
		padding-top: 16px;
		border-top: 1px solid var(--line);
	}

	.filter-row {
		min-height: 44px;
	}

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

	.stream-head {
		align-items: center;
	}

	.footer-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 20px;
		padding-top: 44px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.hide-sm {
		display: none;
	}

	.staging-banner span:last-child {
		font-size: 0.7rem;
	}

	.btn {
		padding: 0 14px;
	}

	.hero {
		padding-top: 30px;
	}

	.eyebrow {
		font-size: 0.74rem;
	}

	/* The card tightens: a smaller logo, the date on its own line, and no
	   "View job" label - the whole card is already the link. */
	.job-card {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 13px;
		padding: 16px;
	}

	.job-logo {
		width: 46px;
		height: 46px;
		border-radius: 13px;
	}

	.job-time {
		margin-left: 0;
		flex-basis: 100%;
		order: 5;
	}

	.job-cta {
		font-size: 0;
		gap: 0;
	}

	.pill-soft {
		display: none;
	}

	.pager .page-numbers {
		min-width: 42px;
		height: 42px;
		padding: 0 8px;
	}

	.card-app {
		flex-direction: row;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 380px) {
	.btn-primary span {
		display: none;
	}

	.hero-stats dd {
		font-size: 0.72rem;
	}
}

/* A phone on its side: very little height, so the hero gives some back. */
@media (max-height: 520px) and (orientation: landscape) {
	.hero {
		padding-top: 24px;
		padding-bottom: 70px;
	}

	.hero-stats {
		display: none;
	}
}

/* No hover means no pointer to tilt toward, and a lift that sticks after a
   tap. Touch gets a press instead. */
@media (hover: none) {
	.job-card:hover {
		--lift: 0px;
		box-shadow: var(--sh-1);
		border-color: var(--line);
	}

	.job-card:hover .job-logo,
	.job-card:hover .job-title {
		transform: none;
	}

	.job-card:active {
		transform: scale(0.985);
	}

	.tilt-glare {
		display: none;
	}
}

/* Some people get motion sick, and some are on a battery. Everything stops. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.cv-ring-bar {
		stroke-dashoffset: 0;
	}
}

@media print {
	.site-header,
	.staging-banner,
	.hero-bg,
	.scene,
	.col-filters,
	.col-side,
	.site-footer,
	.pager {
		display: none !important;
	}

	.hero {
		background: none;
		color: #000;
		padding: 0;
	}

	.layout {
		display: block;
	}
}