/* =========================================================================
   JobsKhabri — premium homepage
   Scoped to .jk-home / .jk-premium-home so no other template is affected.
   ========================================================================= */

.jk-home {
	/* Brand */
	--jk-brand:      #6c1cff;
	--jk-brand-600:  #5a12dd;
	--jk-brand-300:  #9a6bff;
	--jk-accent:     #ff8a34;

	/* Dark surfaces */
	--jk-ink:        #080d1a;
	--jk-ink-2:      #101a30;

	/* Light surfaces */
	--jk-bg:         #f5f6fb;
	--jk-card:       #ffffff;
	--jk-line:       #e6e9f2;
	--jk-line-soft:  #eef0f7;

	/* Text */
	--jk-text:       #0f172a;
	--jk-muted:      #64748b;
	--jk-faint:      #94a3b8;

	/* Shape */
	--jk-r-sm:  10px;
	--jk-r:     16px;
	--jk-r-lg:  22px;

	/* Elevation */
	--jk-sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
	--jk-sh-2: 0 4px 12px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .05);
	--jk-sh-3: 0 18px 45px rgba(15, 23, 42, .12);

	--jk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	background: var(--jk-bg);
	color: var(--jk-text);
	font-family: var(--jk-font);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

/* Every reset below is wrapped in :where() so it contributes no specificity.
   Without it, `.jk-home p { margin: 0 }` outranks a single-class component
   rule like `.jk-hero__sub { margin: 22px auto 0 }` — which silently kills
   auto-centering and every bit of vertical rhythm on the page. */
.jk-home :where(img) { max-width: 100%; height: auto; }

.jk-home :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

.jk-home :where(p) { margin: 0; }

.jk-home :where(a) { text-decoration: none; color: inherit; }

.jk-home :where(h1, h2, h3) {
	margin: 0;
	font-family: var(--jk-font);
	letter-spacing: -.02em;
	line-height: 1.15;
	color: inherit;
	text-transform: none;
}

.jk-i { width: 1em; height: 1em; flex: none; }

/* The theme footer is suppressed on this template; kill its leftover spacing. */
.jk-premium-home #c27-site-wrapper { background: var(--jk-bg); }
.jk-premium-home .page-wrapper,
.jk-premium-home .main-content { padding: 0 !important; margin: 0 !important; }

.jk-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* -------------------------------------------------------------------------
   Shared section furniture
   ---------------------------------------------------------------------- */

.jk-sec { padding: 88px 0; }

.jk-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.jk-kicker {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jk-brand);
}

.jk-kicker--light { color: var(--jk-brand-300); }

.jk-h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 700;
}

.jk-h2--light { color: #fff; }

.jk-lede {
	margin-top: 12px;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--jk-muted);
}

.jk-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding-bottom: 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--jk-brand);
	border-bottom: 1px solid transparent;
	transition: border-color .2s, gap .2s;
}

.jk-link:hover { border-bottom-color: var(--jk-brand); gap: 12px; color: var(--jk-brand); }
.jk-link .jk-i { width: 18px; height: 18px; }

.jk-grid { display: grid; gap: 20px; }
.jk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.jk-grid--4 { grid-template-columns: repeat(4, 1fr); }

.jk-empty {
	padding: 48px;
	text-align: center;
	color: var(--jk-muted);
	background: var(--jk-card);
	border: 1px dashed var(--jk-line);
	border-radius: var(--jk-r);
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.jk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.jk-btn .jk-i { width: 17px; height: 17px; }

.jk-btn--lg { padding: 15px 28px; font-size: 15.5px; }

/* The parent theme ships `a[href*="tel:"] { color: #fff }`, which outranks a
   single class. Scoping the variants with .jk-home puts them back in front. */
.jk-home .jk-btn--primary {
	color: #fff;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%);
	box-shadow: 0 8px 20px rgba(108, 28, 255, .28);
}

.jk-home .jk-btn--primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(108, 28, 255, .36);
}

.jk-home .jk-btn--ghost {
	color: var(--jk-text);
	background: #fff;
	border-color: var(--jk-line);
}

.jk-home .jk-btn--ghost:hover { border-color: var(--jk-brand); color: var(--jk-brand); }

.jk-home .jk-btn--soft {
	color: #43108f;
	background: rgba(108, 28, 255, .1);
	border-color: rgba(108, 28, 255, .16);
	font-variant-numeric: tabular-nums;
}

.jk-home .jk-btn--soft:hover { background: rgba(108, 28, 255, .18); color: #340a72; }

.jk-home .jk-btn--outline {
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .28);
}

.jk-home .jk-btn--outline:hover {
	color: #fff;
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .5);
}

/* =========================================================================
   HERO
   ========================================================================= */

.jk-hero {
	position: relative;
	isolation: isolate;
	padding: 132px 0 92px;
	background: var(--jk-ink);
	color: #fff;
	overflow: hidden;
}

.jk-hero__bg { position: absolute; inset: 0; z-index: -1; }

.jk-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% -20%, #1c2b52 0%, transparent 60%),
		linear-gradient(180deg, #0b1225 0%, #080d1a 100%);
}

.jk-hero__glow {
	position: absolute;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	filter: blur(110px);
	opacity: .5;
}

.jk-hero__glow--a { top: -220px; left: -140px; background: rgba(108, 28, 255, .55); }
.jk-hero__glow--b { top: -160px; right: -160px; background: rgba(255, 138, 52, .28); }

.jk-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 78%);
}

.jk-hero__inner { position: relative; text-align: center; }

.jk-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 12px;
	margin-bottom: 26px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #cbd5e1;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	backdrop-filter: blur(8px);
}

.jk-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

.jk-hero__title {
	font-size: clamp(38px, 6vw, 66px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.05;
}

.jk-hero__title-hl {
	display: block;
	background: linear-gradient(100deg, #b795ff 0%, #ffffff 45%, #ffbe8a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.jk-hero__sub {
	max-width: 62ch;
	margin: 22px auto 0;
	font-size: clamp(15px, 1.4vw, 17.5px);
	line-height: 1.7;
	color: #a9b4c8;
}

/* ---- Search box (skins the theme's own search form) ----------------------
   One bar, not two. The theme ships a Material-style form — white card, float
   labels riding on underlines. On a dark hero that reads as a second, unrelated
   panel dropped inside ours, so the whole skin is replaced: the outer frosted
   frame *is* the bar, the form inside is transparent, and the filters are
   separated by hairlines instead of underlines.

   The markup can't be changed (it comes from [27-search-form]), so the layout
   below works with what the theme renders:
     form > .form-group.cts-term-hierarchy   Location   (Select2)
          > .form-group.cts-term-hierarchy   Category   (Select2)
          > .form-group.wp-search-filter     Keyword    (plain input)
          > .form-group                      Search button
   Every filter is a `.md-group`: an absolutely positioned <label> that sits
   centred at rest and floats up once the field validates. That mechanic is
   kept — only the geometry and colours are restyled. */

.jk-searchbox {
	--jk-f-h:      70px;   /* filter row height                     */
	--jk-f-pad-l:  48px;   /* text inset — leaves room for the icon */
	--jk-f-pad-r:  18px;
	--jk-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");

	max-width: 940px;
	margin: 42px auto 0;
	padding: 7px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .05));
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 24px;
	box-shadow: 0 30px 70px rgba(4, 8, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	text-align: left;
}

/* Single listing type — the tab strip adds nothing, so hide it. */
.jk-searchbox .fs-tabs > .nav-tabs { display: none !important; }

/* Strip every wrapper the theme paints, so only our bar has a surface. */
.jk-searchbox .mylisting-basic-form,
.jk-searchbox .featured-search,
.jk-searchbox .tab-content,
.jk-searchbox .tab-pane,
.jk-searchbox .tab-pane > form {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* The theme's grid is `repeat(auto-fit, minmax(250px, 1fr))`, which only fits
   three columns at this width and wraps the Search button onto its own row.
   Pin it to three filters plus the button, all on one line, gutterless — the
   hairline dividers do the separating. */
.jk-searchbox .featured-search form {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(148px, auto);
	grid-gap: 0;
	align-items: stretch;
}

/* ---- One filter cell ---- */

.jk-searchbox .tab-pane > form > .form-group {
	position: relative;
	height: var(--jk-f-h);
	margin: 0 !important;
	padding: 0 var(--jk-f-pad-r) 0 var(--jk-f-pad-l);
	border: 0 !important;
	border-radius: 16px;
	background: transparent;
	transition: background .18s ease;
}

.jk-searchbox .tab-pane > form > .form-group:not(:last-child):hover { background: rgba(255, 255, 255, .05); }

.jk-searchbox .tab-pane > form > .form-group:not(:last-child):focus-within { background: rgba(255, 255, 255, .08); }

/* Select2 moves focus into a popup appended to <body>, so :focus-within drops
   off the cell the moment the menu opens. Keep the lit state while it's open. */
.jk-searchbox .tab-pane > form > .form-group:not(:last-child):has(.select2-container--open) {
	background: rgba(255, 255, 255, .08);
}

/* Hairline between filters. A pseudo-element rather than a border so it can
   inset from the top and bottom edges and survive the cell's hover fill. */
.jk-searchbox .tab-pane > form > .form-group + .form-group:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	bottom: 17px;
	width: 1px;
	background: rgba(255, 255, 255, .14);
	transition: opacity .18s ease;
}

/* A lit cell has its own rounded edge — the hairlines either side of it would
   otherwise cut across the highlight. */
.jk-searchbox .tab-pane > form > .form-group:not(:last-child):hover::after,
.jk-searchbox .tab-pane > form > .form-group:not(:last-child):focus-within::after,
.jk-searchbox .tab-pane > form > .form-group:not(:last-child):hover + .form-group::after,
.jk-searchbox .tab-pane > form > .form-group:not(:last-child):focus-within + .form-group::after { opacity: 0; }

.jk-searchbox .tab-pane > form > .form-group:has(.select2-container--open)::after,
.jk-searchbox .tab-pane > form > .form-group:has(.select2-container--open) + .form-group::after { opacity: 0; }

/* ---- Leading icon ---- */

.jk-searchbox .tab-pane > form > .form-group:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 19px;
	height: 19px;
	transform: translateY(-50%);
	background: #8996b0;
	-webkit-mask: var(--jk-f-icon) center / 19px 19px no-repeat;
	mask: var(--jk-f-icon) center / 19px 19px no-repeat;
	transition: background .18s ease;
}

.jk-searchbox .tab-pane > form > .form-group:not(:last-child):hover::before,
.jk-searchbox .tab-pane > form > .form-group:not(:last-child):focus-within::before { background: var(--jk-brand-300); }

.jk-searchbox .tab-pane > form > .form-group:nth-child(1) {
	--jk-f-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.4c0 5.6-8 11.6-8 11.6s-8-6-8-11.6a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10.2' r='2.9'/%3E%3C/svg%3E");
}

.jk-searchbox .tab-pane > form > .form-group:nth-child(2) {
	--jk-f-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E");
}

.jk-searchbox .tab-pane > form > .form-group:nth-child(3) {
	--jk-f-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
}

/* ---- Label ---------------------------------------------------------------
   The theme's labels are Material float-labels: centred at rest, sliding to
   the top of the cell once the field validates. That can't be made to line up
   here — the value sits in an absolutely positioned box (see below), so the
   label moves on fill but the text and the Select2 caret don't, and the row
   reads as two misaligned baselines.

   With three filters, each carrying its own icon, the caption is redundant
   the moment a value exists. So the label is demoted to a plain placeholder:
   one baseline, dead centre, and it simply fades out when the field fills. */

.jk-searchbox .tab-pane > form > .form-group label {
	top: 50%;
	bottom: auto;
	left: var(--jk-f-pad-l);
	right: var(--jk-f-pad-r);
	width: auto;
	float: none;
	margin: 0;
	transform: translateY(-50%);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #96a1b8;
	transition: opacity .16s ease, color .18s ease;
}

/* Filled. `:required:valid` covers the keyword input and the hidden input the
   Select2 filters keep in sync; `.cts-term-filled` is the class the theme tags
   the cell with. The selectors also have to out-specify the theme's own raised
   rule, which would otherwise pin the label to `top: 0`. */
.jk-searchbox .tab-pane > form > .form-group input:required:valid ~ label,
.jk-searchbox .tab-pane > form > .form-group.cts-term-filled label {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	font-size: 15px;
	opacity: 0;
	visibility: hidden;
}

.jk-searchbox .form-group label .spin-box { display: none; }

/* ---- Value: keyword input + both Select2 widgets on one baseline ----------
   These span the *whole* cell rather than sitting inside its padding, and the
   icon inset is applied to the text instead. Two reasons: the click target
   then covers the full cell, and Select2 measures its dropdown against this
   element — inset it and the menu opens narrow and shunted to the right of the
   filter it belongs to. */
.jk-searchbox .tab-pane > form > .form-group .select-wrapper.term-select,
.jk-searchbox .tab-pane > form > .form-group.wp-search-filter input[type="text"] {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #fff !important;
}

.jk-searchbox .tab-pane > form > .form-group.wp-search-filter input[type="text"],
.jk-searchbox .select2-selection__rendered {
	padding: 0 var(--jk-f-pad-r) 0 var(--jk-f-pad-l) !important;
}

.jk-searchbox .form-group input::placeholder { color: transparent; }

/* Select2 nests container > .selection > .select2-selection--single, none of
   which carry a height. Without this chain the widget collapses to its text
   height inside the full-height cell, and the absolutely positioned caret —
   which anchors to .select2-container — lands near the top instead of on the
   text baseline. */
.jk-searchbox .form-group .select2-container {
	display: block;
	width: 100% !important;
	height: 100%;
}

.jk-searchbox .form-group .select2-container > .selection {
	display: block;
	height: 100%;
}

.jk-searchbox .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.jk-searchbox .select2-selection__rendered {
	width: 100%;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #fff !important;
	background: transparent !important;
	border: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Opening the menu makes the theme draw a 1.5px accent bar across the bottom
   of the widget — a leftover from its underlined field style. The lit cell
   already signals which filter is open. */
.jk-searchbox .select2-container--open .select2-selection__rendered::after { content: none !important; }

.jk-searchbox .select2-container--open .select2-selection,
.jk-searchbox .select2-container--open .select2-selection--single {
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

/* The theme swaps Select2's caret for a Material Icons glyph pinned to
   `bottom: 17px` — a heavy black triangle sitting below the text on our
   baseline. Blank it and draw a chevron that matches the stroked icons on the
   left of each cell. */
.jk-searchbox .select2-selection__arrow {
	top: 50% !important;
	bottom: auto !important;
	right: var(--jk-f-pad-r) !important;
	width: 11px !important;
	height: 11px !important;
	transform: translateY(-50%);
}

.jk-searchbox .select2-selection__arrow::before { content: none !important; }

.jk-searchbox .select2-selection__arrow b { display: none !important; }

.jk-searchbox .select2-selection__arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #8996b0;
	-webkit-mask: var(--jk-chevron) center / 11px 11px no-repeat;
	mask: var(--jk-chevron) center / 11px 11px no-repeat;
	transition: transform .2s ease, background .18s ease;
}

.jk-searchbox .tab-pane > form > .form-group:hover .select2-selection__arrow::after,
.jk-searchbox .tab-pane > form > .form-group:focus-within .select2-selection__arrow::after { background: #c8d0e0; }

.jk-searchbox .select2-container--open .select2-selection__arrow::after { transform: rotate(180deg); }

/* ---- Submit ---- */

.jk-searchbox .tab-pane > form > .form-group:last-child {
	display: flex;
	align-items: center;
	padding: 0 0 0 10px;
}

.jk-searchbox .form-group .buttons.search,
.jk-searchbox button.search {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 26px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: linear-gradient(135deg, var(--jk-brand) 0%, #8b3cff 100%) !important;
	border: 0 !important;
	border-radius: 17px !important;
	box-shadow: 0 8px 22px rgba(108, 28, 255, .35);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.jk-searchbox .form-group .buttons.search:hover,
.jk-searchbox button.search:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 14px 30px rgba(108, 28, 255, .45);
}

.jk-searchbox button.search i { font-size: 18px; }

/* ---- Select2 menu -------------------------------------------------------
   Select2 appends its dropdown to <body>, outside .jk-home, so this can't be
   scoped to the search box — `.jk-premium-home` is the body class this
   template adds, which keeps it off every other page. The theme's default menu
   is white with hairline-separated rows; against the dark bar that flashed as
   a bright unrelated panel, so it's rebuilt to match. */

.jk-premium-home .select2-dropdown {
	padding: 6px;
	background: #131b2e;
	border: 1px solid rgba(255, 255, 255, .13) !important;
	border-radius: 16px;
	box-shadow: 0 24px 55px rgba(2, 6, 16, .65);
	overflow: hidden;
}

/* Select2 squares off the edge that faces the field it opened from. The menu
   is detached from the bar by a gap here, so it should stay fully rounded. */
.jk-premium-home .select2-container--open .select2-dropdown--below {
	margin-top: 8px;
	border-radius: 16px !important;
	border-top: 1px solid rgba(255, 255, 255, .13) !important;
}

.jk-premium-home .select2-container--open .select2-dropdown--above {
	margin-top: 0;
	margin-bottom: 8px;
	border-radius: 16px !important;
	border-top: 1px solid rgba(255, 255, 255, .13) !important;
}

.jk-premium-home .select2-search--dropdown { padding: 2px 2px 6px; }

.jk-premium-home .select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 9px 12px !important;
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 10px !important;
	font-size: 14px;
	color: #fff !important;
}

.jk-premium-home .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: rgba(154, 107, 255, .55) !important;
	background: rgba(255, 255, 255, .09) !important;
}

.jk-premium-home .select2-results > .select2-results__options { max-height: 292px; }

.jk-premium-home .select2-results__option,
.jk-premium-home .select2-results__options li.loading-results {
	margin: 0 !important;
	padding: 10px 34px 10px 12px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 10px;
	font-size: 14.5px;
	color: #c3cddf !important;
}

.jk-premium-home .select2-container--default .select2-results__option--highlighted[aria-selected] {
	padding-left: 12px !important;
	background: rgba(255, 255, 255, .09) !important;
	color: #fff !important;
}

.jk-premium-home .select2-container--default .select2-results__option[aria-selected="true"],
.jk-premium-home .select2-container--default .select2-results__option[data-selected="true"] {
	background: rgba(108, 28, 255, .3) !important;
	color: #fff !important;
}

/* The theme's "selected" tick is pinned to `right: 0`, which our row padding
   would otherwise push under the scrollbar. */
.jk-premium-home .select2-container--default .select2-results__option[aria-selected="true"]::after {
	right: 12px;
	top: 10px;
	color: var(--jk-brand-300, #9a6bff);
}

.jk-premium-home .select2-results__option[role="list"] { padding: 0 !important; }

.jk-premium-home .select2-results__option[role="list"] .select2-results__group {
	background: rgba(255, 255, 255, .1);
	margin: 4px 12px;
}

.jk-premium-home .select2-results__options { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.jk-premium-home .select2-results__options::-webkit-scrollbar { width: 6px; }
.jk-premium-home .select2-results__options::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }
.jk-premium-home .select2-results__options::-webkit-scrollbar-track { background: transparent; }

/* ---- Popular chips ---- */

.jk-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 26px;
}

.jk-chips__label { font-size: 13.5px; color: #8a94a8; margin-right: 2px; }

.jk-chip {
	padding: 7px 15px;
	font-size: 13.5px;
	font-weight: 500;
	color: #d6dced;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
}

.jk-chip:hover {
	color: #fff;
	background: rgba(108, 28, 255, .35);
	border-color: rgba(154, 107, 255, .6);
	transform: translateY(-1px);
}

/* ---- Stats ---- */

.jk-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	max-width: 900px;
	margin: 56px auto 0;
	padding-top: 34px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.jk-stat { text-align: center; }

.jk-stat__n,
.jk-stat__plus {
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 800;
	letter-spacing: -.03em;
	background: linear-gradient(180deg, #ffffff 0%, #b7c0d4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.jk-stat__plus { margin-left: 1px; }

.jk-stat__l {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #8b96ab;
}

/* =========================================================================
   ADVERTISEMENT
   ========================================================================= */

.jk-ad { padding: 44px 0 8px; }

.jk-ad__label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--jk-faint);
}

.jk-ad__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--jk-line);
}

/* Full-bleed: the slider is authored at viewport width, so anything narrower
   makes Smart Slider crop the advertiser's artwork. */
.jk-ad__slot {
	overflow: hidden;
	background: #fff;
	border-block: 1px solid var(--jk-line);
	line-height: 0;
}

/* Smart Slider renders at its authored width and overflows this container,
   so pin it back to the slot and let it scale down. */
.jk-ad__slot .n2-section-smartslider,
.jk-ad__slot .n2-ss-align,
.jk-ad__slot .n2-ss-slider,
.jk-ad__slot .n2-padding {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.jk-ad__slot .n2-ss-slider { overflow: hidden; }

/* Smart Slider's slides are saved with background mode "Fill", which is
   object-fit: cover — the slide box is 2.4:1 while the advertisers' artwork is
   nearer 2.2:1, so every banner was losing a strip off the top and bottom.
   That is the advertiser's phone number and logo getting cut, so the images are
   fitted whole instead and the slot is sized to the artwork's own ratio, which
   leaves the letterboxing at a couple of pixels rather than a visible band. */
.jk-ad__slot {
	max-width: 1332px;
	margin: 0 auto;
	border-inline: 1px solid var(--jk-line);
}

.jk-ad__slot .n2-ss-slide-background-image img,
.jk-ad__slot .n2-ss-slide-background[data-mode="fill"] img {
	object-fit: contain !important;
	object-position: center !important;
}

.jk-ad__slot .n2-ss-slide-background { background: #fff; }

/* =========================================================================
   SECTORS
   ========================================================================= */

.jk-sector {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: var(--jk-r);
	box-shadow: var(--jk-sh-1);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.jk-sector:hover {
	transform: translateY(-3px);
	border-color: rgba(108, 28, 255, .32);
	box-shadow: var(--jk-sh-2);
}

.jk-sector__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	color: var(--jk-brand);
	background: linear-gradient(140deg, rgba(108, 28, 255, .13), rgba(255, 138, 52, .12));
	transition: color .2s, background .2s;
}

.jk-sector__icon .jk-i { width: 22px; height: 22px; }

.jk-sector:hover .jk-sector__icon {
	color: #fff;
	background: linear-gradient(140deg, var(--jk-brand), #8b3cff);
}

.jk-sector__label {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.jk-sector__go {
	flex: none;
	color: var(--jk-faint);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s, transform .2s;
}

.jk-sector__go .jk-i { width: 18px; height: 18px; }

.jk-sector:hover .jk-sector__go { opacity: 1; transform: translateX(0); color: var(--jk-brand); }

/* =========================================================================
   JOB CARDS
   ========================================================================= */

.jk-jobs { padding-top: 20px; }

.jk-job {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: var(--jk-r);
	box-shadow: var(--jk-sh-1);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.jk-job:hover {
	transform: translateY(-3px);
	border-color: rgba(108, 28, 255, .28);
	box-shadow: var(--jk-sh-2);
}

.jk-job__badge {
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 4px 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #9a4a00;
	background: linear-gradient(135deg, #ffe6c7, #ffd39a);
	border-radius: 999px;
}

.jk-job__top { display: flex; gap: 14px; align-items: flex-start; }

.jk-job__logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	overflow: hidden;
	background: #f2f4f9;
	border: 1px solid var(--jk-line-soft);
	border-radius: 13px;
}

.jk-job__logo img { width: 100%; height: 100%; object-fit: cover; }

.jk-job__initials {
	font-size: 16px;
	font-weight: 700;
	color: var(--jk-brand);
}

/* Leave room for the absolutely-positioned "Featured" badge. */
.jk-job__head { min-width: 0; padding-right: 94px; }

.jk-job__title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
}

.jk-job__title a { transition: color .18s; }
.jk-job__title a:hover { color: var(--jk-brand); }

.jk-job__company {
	margin-top: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jk-brand-600);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jk-job__loc {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	font-size: 13.5px;
	color: var(--jk-muted);
}

.jk-job__loc .jk-i { width: 15px; height: 15px; color: var(--jk-faint); }

.jk-job__meta { display: flex; flex-wrap: wrap; gap: 8px; }

.jk-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--jk-muted);
	background: #f4f5fa;
	border-radius: 999px;
}

.jk-tag .jk-i { width: 14px; height: 14px; }

.jk-tag--type { color: #0f766e; background: #e6f7f3; }

.jk-job__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--jk-line-soft);
}

.jk-job__foot .jk-btn { padding: 9px 16px; font-size: 13.5px; }

/* WhatsApp-alert card that keeps the grid balanced on quiet weeks */
.jk-job--cta {
	justify-content: center;
	text-align: center;
	align-items: center;
	gap: 12px;
	color: #fff;
	background:
		radial-gradient(120% 100% at 20% 0%, rgba(255, 255, 255, .16), transparent 55%),
		linear-gradient(150deg, #16233f 0%, #0d1426 100%);
	border-color: transparent;
}

.jk-job--cta .jk-job__title { color: #fff; }

.jk-job__cta-icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: #34d399;
	background: rgba(52, 211, 153, .14);
}

.jk-job__cta-icon .jk-i { width: 24px; height: 24px; }

.jk-job__cta-text {
	max-width: 30ch;
	font-size: 14px;
	line-height: 1.6;
	color: #a7b2c7;
}

/* =========================================================================
   CITIES
   ========================================================================= */

.jk-cities { padding-top: 0; }

.jk-citygrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

.jk-city {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-size: 14.5px;
	font-weight: 600;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: var(--jk-r-sm);
	transition: border-color .2s, transform .2s, box-shadow .2s;
}

.jk-city:hover {
	transform: translateY(-2px);
	border-color: rgba(108, 28, 255, .32);
	box-shadow: var(--jk-sh-1);
}

.jk-city__pin { display: grid; place-items: center; color: var(--jk-brand); }
.jk-city__pin .jk-i { width: 17px; height: 17px; }
.jk-city__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jk-city__count {
	padding: 2px 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--jk-brand);
	background: rgba(108, 28, 255, .09);
	border-radius: 999px;
}

.jk-city--all {
	justify-content: center;
	color: var(--jk-brand);
	background: rgba(108, 28, 255, .06);
	border-style: dashed;
	border-color: rgba(108, 28, 255, .3);
}

.jk-city--all .jk-i { width: 17px; height: 17px; }

/* =========================================================================
   HOW IT WORKS + WHY US
   ========================================================================= */

.jk-how { background: #fff; border-top: 1px solid var(--jk-line); border-bottom: 1px solid var(--jk-line); }

.jk-how__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.jk-steps { margin: 34px 0 44px; display: grid; gap: 28px; }

.jk-step { display: flex; gap: 18px; }

.jk-step__n {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--jk-brand);
	background: rgba(108, 28, 255, .08);
	border-radius: 13px;
}

.jk-step__t { font-size: 16.5px; font-weight: 700; }

.jk-step__p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--jk-muted); }

.jk-how__right {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.jk-usp {
	padding: 24px;
	background: linear-gradient(180deg, #fbfbfe, #f6f7fc);
	border: 1px solid var(--jk-line);
	border-radius: var(--jk-r);
	transition: transform .2s, box-shadow .2s;
}

.jk-usp:hover { transform: translateY(-3px); box-shadow: var(--jk-sh-2); }

.jk-usp__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	color: #fff;
	background: linear-gradient(140deg, var(--jk-brand), #8b3cff);
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(108, 28, 255, .25);
}

.jk-usp__icon .jk-i { width: 20px; height: 20px; }

.jk-usp__t { font-size: 15.5px; font-weight: 700; }

.jk-usp__p { margin-top: 7px; font-size: 14px; line-height: 1.6; color: var(--jk-muted); }

/* =========================================================================
   EMPLOYER CTA
   ========================================================================= */

.jk-cta {
	position: relative;
	padding: 72px 0;
	background:
		radial-gradient(90% 140% at 12% 0%, rgba(108, 28, 255, .5) 0%, transparent 58%),
		radial-gradient(70% 120% at 92% 100%, rgba(255, 138, 52, .3) 0%, transparent 55%),
		linear-gradient(120deg, #0d1426 0%, #131f3b 100%);
	color: #fff;
	overflow: hidden;
}

.jk-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 44px;
	flex-wrap: wrap;
}

.jk-cta__copy { max-width: 620px; }

.jk-cta__p {
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.7;
	color: #b3bdd1;
}

.jk-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================================================
   BLOG
   ========================================================================= */

.jk-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--jk-card);
	border: 1px solid var(--jk-line);
	border-radius: var(--jk-r);
	box-shadow: var(--jk-sh-1);
	transition: transform .2s, box-shadow .2s;
}

.jk-post:hover { transform: translateY(-3px); box-shadow: var(--jk-sh-2); }

.jk-post__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #eceff6;
}

.jk-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.jk-post:hover .jk-post__media img { transform: scale(1.04); }

.jk-post__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e4e8f2, #f2f4fa);
}

.jk-post__body { padding: 22px; }

.jk-post__date {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--jk-faint);
}

.jk-post__title { margin-top: 9px; font-size: 17px; font-weight: 700; line-height: 1.38; }
.jk-post__title a { transition: color .18s; }
.jk-post__title a:hover { color: var(--jk-brand); }

.jk-post__ex { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--jk-muted); }

/* =========================================================================
   ABOUT + VIDEO
   ========================================================================= */

.jk-about { background: #fff; border-top: 1px solid var(--jk-line); }

.jk-about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.jk-about__p { margin-top: 16px; font-size: 15.5px; line-height: 1.75; color: var(--jk-muted); }

.jk-about__contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.jk-contactcard {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 20px 14px 14px;
	background: #fbfbfe;
	border: 1px solid var(--jk-line);
	border-radius: var(--jk-r-sm);
	transition: border-color .2s, transform .2s, box-shadow .2s;
}

.jk-contactcard:hover { transform: translateY(-2px); border-color: rgba(108, 28, 255, .3); box-shadow: var(--jk-sh-1); }

.jk-contactcard__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--jk-brand);
	background: rgba(108, 28, 255, .09);
	border-radius: 11px;
}

.jk-contactcard__icon--wa { color: #0f9d58; background: rgba(15, 157, 88, .1); }
.jk-contactcard__icon .jk-i { width: 19px; height: 19px; }

.jk-contactcard strong { display: block; font-size: 14.5px; font-weight: 700; }
.jk-contactcard em { display: block; margin-top: 2px; font-size: 13px; font-style: normal; color: var(--jk-muted); }

.jk-video {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--jk-r-lg);
	background:
		radial-gradient(90% 120% at 25% 10%, rgba(108, 28, 255, .55) 0%, transparent 60%),
		linear-gradient(140deg, #131f3b 0%, #0b1223 100%);
	box-shadow: var(--jk-sh-3);
}

.jk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.jk-video__play {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	padding: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, .95);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
	transition: transform .2s ease;
}

.jk-video__play:hover { transform: scale(1.07); }

.jk-video__tri {
	width: 0;
	height: 0;
	margin-left: 5px;
	border-left: 20px solid var(--jk-brand);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}

.jk-video__cap {
	position: absolute;
	left: 24px;
	bottom: 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.jk-footer {
	padding: 72px 0 0;
	background: linear-gradient(180deg, #0b1225 0%, #070b16 100%);
	color: #cbd3e2;
}

.jk-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 56px;
}

/* .jk-home img { max-width: 100% } outranks a lone class, so scope this too. */
.jk-home .jk-footer__logo { max-width: 158px; border-radius: 8px; }

.jk-footer__wordmark { font-size: 22px; font-weight: 800; color: #fff; }

.jk-footer__tag { margin-top: 14px; max-width: 34ch; font-size: 14px; line-height: 1.65; color: #8b96ab; }

.jk-socials { display: flex; gap: 10px; margin-top: 22px; }

.jk-socials a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: #cbd3e2;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 11px;
	transition: background .2s, color .2s, transform .2s;
}

.jk-socials a:hover { color: #fff; background: var(--jk-brand); transform: translateY(-2px); }
.jk-socials .jk-i { width: 18px; height: 18px; }

.jk-footer__col h3 {
	margin-bottom: 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.jk-footer__col li + li { margin-top: 11px; }

.jk-footer__col a {
	font-size: 14.5px;
	color: #93a0b7;
	transition: color .18s;
}

.jk-footer__col a:hover { color: #fff; }

.jk-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 24px;
	padding-bottom: 28px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 13.5px;
	color: #7d879b;
}

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */

.jk-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

.jk-reveal.is-in { opacity: 1; transform: none; }

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

@media (max-width: 1100px) {
	.jk-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.jk-how__inner,
	.jk-about__inner { grid-template-columns: 1fr; gap: 48px; }
	.jk-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
	.jk-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
	.jk-sec { padding: 64px 0; }
	.jk-hero { padding: 112px 0 72px; }
	.jk-grid--3,
	.jk-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.jk-sechead { flex-direction: column; align-items: flex-start; gap: 16px; }
	.jk-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 8px; }

	/* Two filters per row, keyword and the button full width beneath them. */
	.jk-searchbox .featured-search form { grid-template-columns: 1fr 1fr; }

	.jk-searchbox .tab-pane > form > .form-group:nth-child(3),
	.jk-searchbox .tab-pane > form > .form-group:last-child { grid-column: 1 / -1; }

	/* Anything that now starts a row needs its divider laid on its top edge
	   instead of its left one. */
	.jk-searchbox .tab-pane > form > .form-group:nth-child(3)::after {
		left: 14px;
		right: 14px;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.jk-searchbox .tab-pane > form > .form-group:last-child {
		height: 56px;
		padding: 8px 0 0;
	}
}

@media (max-width: 620px) {
	.jk-wrap { padding: 0 18px; }
	.jk-sec { padding: 52px 0; }
	.jk-hero { padding: 96px 0 60px; }
	.jk-grid--3,
	.jk-grid--4,
	.jk-how__right { grid-template-columns: 1fr; }
	.jk-citygrid { grid-template-columns: repeat(2, 1fr); }
	.jk-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
	.jk-cta__actions .jk-btn { flex: 1 1 100%; }
	.jk-chips__label { display: none; }

	/* One filter per row — every divider becomes horizontal. */
	.jk-searchbox { border-radius: 20px; }

	.jk-searchbox .featured-search form { grid-template-columns: 1fr; }

	.jk-searchbox .tab-pane > form > .form-group + .form-group:not(:last-child)::after {
		left: 14px;
		right: 14px;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jk-home *,
	.jk-home *::before,
	.jk-home *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.jk-reveal { opacity: 1; transform: none; }
}

/* The parent theme sets `p { color: #242429 }`, which outranks the colour on
   .jk-footer__bottom and left the copyright line all but invisible on the dark
   footer. */
.jk-footer__bottom p { color: #7d879b; }