/* =============================================================
 * Kavin Studios — Case Studies — frontend stylesheet
 *
 * Replaces the styles that used to live in hub-child/style.css.
 * Ship-defaults match the kavinstudios.com look. To use different
 * colours, override the CSS variables at the top in your own CSS:
 *
 *   :root {
 *     --kcs-brand: #FC4100;          // accent for tabs + active filters
 *     --kcs-sitemap-fg: currentColor; // sitemap text colour
 *     --kcs-sitemap-border: rgba(246, 244, 238, 0.2);
 *   }
 * ============================================================= */

:root {
	--kcs-brand: #FC4100;
	--kcs-sitemap-fg: currentColor;
	--kcs-sitemap-border: rgba(246, 244, 238, 0.2);
}

/* ---- SUPPRESS MOUSE-CLICK FOCUS RINGS ---------------------- *
 * Suppresses the rectangular browser outline that appears after
 * clicking a link or button with the mouse. Keyboard focus rings
 * (Tab key navigation) are preserved via :focus-visible so the
 * site stays accessible.
 * ----------------------------------------------------------- */

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* ---- DUAL FILTER UI ---------------------------------------- */

/* Hide the theme's "FILTER" label if it ever leaks through. */
.liquid-filter-items-label {
	display: none !important;
}

/* Wrapper — stacks tabs above the filter list, centered. */
.kcs-filter-items {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: 100%;
	margin: 0 auto 2.5rem;
}

/* Tab nav row */
.kcs-tabs {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}

/* Individual tab buttons */
.kcs-tab-btn {
	background: transparent;
	border: 1px solid var(--kcs-brand);
	border-radius: 6px;
	padding: 8px 20px;
	margin: 0;
	cursor: pointer;
	color: var(--kcs-brand);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	font-family: inherit;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.kcs-tab-btn:hover {
	background: var(--kcs-brand);
	color: #FFFFFF;
}
.kcs-tab-btn.kcs-tab-active {
	background: var(--kcs-brand);
	color: #FFFFFF;
}

/* Filter lists container — only one list visible at a time. */
.kcs-lists {
	width: 100%;
}
.kcs-list {
	display: none;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.kcs-list.kcs-list-active {
	display: flex;
}
.kcs-list li {
	color: #000000;
	cursor: pointer;
	list-style: none;
	padding: 4px 0;
	transition: color 0.2s ease-in-out;
}
.kcs-list li:not(.kcs-item-active):hover {
	color: var(--kcs-brand);
}
.kcs-list li.kcs-item-active {
	color: var(--kcs-brand);
	text-decoration: underline;
	font-weight: 500;
}

/* Used by the JS fallback to hide non-matching cards when isotope
   isn't available. The primary filter path goes through isotope
   itself so this is rarely needed, but it must out-rank inline styles. */
.kcs-hidden { display: none !important; }

/* ---- PORTFOLIO CARD CATEGORY LINKS ------------------------- */

.lqd-pf-cat.inline-nav {
	display: block;
	line-height: 1.6em;
}
.lqd-pf-cat.inline-nav li {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.lqd-pf-cat li:not(:last-child):after {
	content: ",";
	margin-right: 4px;
	color: inherit;
}
.lqd-pf-cat li a:hover {
	color: var(--kcs-brand);
}

/* ---- KAVIN SITEMAP SHORTCODE ------------------------------- */

.kavin-sitemap-list,
.elementor-widget-shortcode .kavin-sitemap-list {
	list-style: none !important;
	padding: 0;
	margin: 0;
	width: 100%;
	color: var(--kcs-sitemap-fg);
	column-count: 3;
	column-gap: 40px;
}
.kavin-sitemap-list li,
.elementor-widget-shortcode .kavin-sitemap-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--kcs-sitemap-border);
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.kavin-sitemap-list li a,
.elementor-widget-shortcode .kavin-sitemap-list li a {
	color: inherit;
	text-decoration: none;
	font-size: 1em;
	font-weight: 200;
	line-height: 1.3;
	transition: color 0.2s ease;
}
.kavin-sitemap-list li a::after,
.elementor-widget-shortcode .kavin-sitemap-list li a::after {
	content: " \2192";
	opacity: 0;
	transition: opacity 0.2s ease;
}
.kavin-sitemap-list li:hover a,
.elementor-widget-shortcode .kavin-sitemap-list li:hover a {
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 500;
}
.kavin-sitemap-list li:hover a::after,
.elementor-widget-shortcode .kavin-sitemap-list li:hover a::after {
	opacity: 1;
}
.kavin-sitemap-list li span,
.elementor-widget-shortcode .kavin-sitemap-list li span {
	color: inherit;
	opacity: 0.7;
	font-size: 1.1em;
	white-space: nowrap;
	padding-left: 20px;
}
.kavin-sitemap-list li:hover,
.elementor-widget-shortcode .kavin-sitemap-list li:hover {
	transform: scale(1.08);
}

@media (max-width: 767px) {
	.kavin-sitemap-list,
	.elementor-widget-shortcode .kavin-sitemap-list {
		column-count: 1;
	}
}

/* ---- ELEMENTOR SITEMAP WIDGET ENHANCEMENTS ----------------- */

.elementor-widget-sitemap h2.elementor-sitemap-title {
	display: none;
}
.elementor-widget-sitemap ul.elementor-sitemap-list {
	list-style: none !important;
	padding: 0;
	margin: 0;
	width: 100%;
	color: var(--kcs-sitemap-fg);
	column-count: 3;
	column-gap: 40px;
}
.elementor-widget-sitemap ul ul.children {
	margin-left: 20px;
	column-count: 1;
	margin-bottom: 10px;
	border-top: 1px solid var(--kcs-sitemap-border);
}
.elementor-widget-sitemap li.elementor-sitemap-item {
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--kcs-sitemap-border);
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.elementor-widget-sitemap li.page_item_has_children {
	border-bottom: none;
	padding-bottom: 10px;
}
.elementor-widget-sitemap li.elementor-sitemap-item a {
	color: inherit;
	text-decoration: none;
	font-size: 1em;
	font-weight: 200;
	line-height: 1.3;
	transition: color 0.2s ease, font-size 0.2s ease, font-weight 0.2s ease;
}
.elementor-widget-sitemap li.elementor-sitemap-item a::after {
	content: " \2192";
	opacity: 0;
	transition: opacity 0.2s ease;
}
.elementor-widget-sitemap li.elementor-sitemap-item.is-hovered {
	transform: scale(1.03);
}
.elementor-widget-sitemap li.elementor-sitemap-item.is-hovered > a {
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 500;
}
.elementor-widget-sitemap li.elementor-sitemap-item.is-hovered > a::after {
	opacity: 1;
}

@media (max-width: 767px) {
	.elementor-widget-sitemap ul.elementor-sitemap-list {
		column-count: 1;
	}
}


/* =============================================================
 * Kavin Case Studies Grid Elementor widget (.kcs-grid-widget)
 *
 * Adapted from the Kavin Studios homepage prototype:
 *   - 1 big card on top + 2-column grid below (default)
 *   - 2-column grid only
 *   - 3-column grid
 * Uses CSS variables so tabs/pills inherit your --kcs-brand colour.
 * ============================================================= */

.kcs-grid-widget {
	--kcs-grid-ink: #0E0E0E;
	--kcs-grid-ink-2: #2A2A2A;
	--kcs-grid-muted: #6B6B6B;
	--kcs-grid-line: rgba(14,14,14,0.12);
	--kcs-grid-line-strong: rgba(14,14,14,0.22);
	--kcs-grid-bg: #FAF7F2;
	color: var(--kcs-grid-ink);
}
.kcs-grid-widget * { box-sizing: border-box; }

/* ---- Section header ---- */
.kcs-grid-head { margin-bottom: 36px; }
.kcs-grid-eyebrow {
	display: flex; align-items: center; gap: 16px;
	margin-bottom: 28px;
	font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--kcs-grid-ink);
}
.kcs-grid-eyebrow-rule { width: 64px; height: 1px; background: currentColor; }
.kcs-grid-eyebrow-text { font-weight: 500; }
.kcs-grid-eyebrow-num  { margin-left: auto; font-weight: 500; opacity: .8; }

.kcs-grid-title-row {
	display: grid; grid-template-columns: 1fr auto;
	gap: 40px; align-items: end; margin-bottom: 20px;
}
.kcs-grid-title {
	font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
	font-size: clamp(28px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}
.kcs-grid-title em {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic; font-weight: 400; letter-spacing: -0.01em;
}

/* ---- Filter / segmented control ---- */
/* When the eyebrow + heading are both off, the filter would sit flush against
   the top; give it (and the grid) breathing room. */
.kcs-grid-widget.kcs-no-header { padding-top: 8px; }
.kcs-grid-widget.kcs-no-header .kcs-grid-head { margin-bottom: 0; }
.kcs-grid-widget.kcs-no-header .kcs-grid-controls { margin-bottom: 40px; }

/* White-pill filter styling — matches the dual-nav look (active tab/term is a
   white pill with a soft shadow, inactive is muted text). Reuses the same
   --kcs-tab-* variables so colours stay consistent across the plugin. The
   !important beats the theme's global button rules that paint buttons black. */
.kcs-grid-controls {
	display: flex; flex-direction: column; gap: 16px; align-items: center;
	margin-bottom: 28px;
}
.kcs-grid-widget .kcs-grid-seg {
	display: inline-flex; gap: 10px;
	border: 0; padding: 0; background: transparent !important;
}
.kcs-grid-widget .kcs-grid-seg-btn {
	padding: 10px 22px !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	border-radius: 12px !important;
	color: var(--kcs-tab-color, #6B6B6B) !important;
	background: var(--kcs-tab-bg, transparent) !important;
	border: 0 !important;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	box-shadow: none;
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.kcs-grid-widget .kcs-grid-seg-btn:hover {
	color: var(--kcs-tab-color, #141414) !important;
}
.kcs-grid-widget .kcs-grid-seg-btn.is-on {
	background: var(--kcs-tab-active-bg, #ffffff) !important;
	color: var(--kcs-tab-active-color, #141414) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.kcs-grid-widget .kcs-grid-pill-wrap { position: relative; }
.kcs-grid-widget .kcs-grid-pills {
	display: none; flex-wrap: wrap; gap: 6px;
	justify-content: center; max-width: none;
}
.kcs-grid-widget .kcs-grid-pills.is-on { display: flex; }
.kcs-grid-widget .kcs-grid-pill {
	padding: 8px 18px !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	border-radius: 12px !important;
	color: var(--kcs-tab-color, #6B6B6B) !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.kcs-grid-widget .kcs-grid-pill:hover {
	color: var(--kcs-tab-active-color, #141414) !important;
}
.kcs-grid-widget .kcs-grid-pill.is-on {
	background: var(--kcs-tab-active-bg, #ffffff) !important;
	color: var(--kcs-tab-active-color, #141414) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* ---- Grid layouts ---- */
.kcs-grid {
	display: grid;
	gap: 32px 24px;
}
.kcs-layout-big-then-grid .kcs-grid {
	grid-template-columns: repeat(6, 1fr);
}
.kcs-layout-grid-2 .kcs-grid {
	grid-template-columns: repeat(2, 1fr);
}
.kcs-layout-grid-3 .kcs-grid {
	grid-template-columns: repeat(3, 1fr);
}
.kcs-layout-grid-4 .kcs-grid {
	grid-template-columns: repeat(4, 1fr);
}

/* ---- Manual mixed sizes ---------------------------------------------------
   The grid columns (repeat(12,1fr)) and each card's span are set inline from
   render() based on the per-post "Grid card size". Dense packing fills gaps so
   big cards sit nicely among small ones (Pentagram/Instrument masonry feel).
   Clean/Editorial cards use aspect-ratio, so a wider card is also taller. */
.kcs-layout-manual-mixed .kcs-grid {
	align-items: start;
	gap: 40px 28px;
}
/* Height per size (width comes from the inline grid-column span):
   wide  = wider, normal height (banner)
   tall  = normal width, portrait/taller image
   large = wider AND taller */
.kcs-layout-manual-mixed .kcs-card[data-kcs-size="tall"] .kcs-clean-img,
.kcs-layout-manual-mixed .kcs-card[data-kcs-size="tall"] .kcs-card-frame { aspect-ratio: 3 / 4; }
.kcs-layout-manual-mixed .kcs-card[data-kcs-size="large"] .kcs-clean-img,
.kcs-layout-manual-mixed .kcs-card[data-kcs-size="large"] .kcs-card-frame { aspect-ratio: 4 / 3; }
/* "Fill the space beside big cards": render() gives non-normal cards an inline
   grid-row:span 2, so the next card drops into the free cell alongside the big
   one. Rows stay content-sized — no fixed heights to keep in sync. */
@media (max-width: 767px) {
	/* One card per row on phones, so the two-row spans must be dropped too. */
	.kcs-layout-manual-mixed .kcs-card { grid-column: 1 / -1 !important; grid-row: auto !important; }
	.kcs-layout-manual-mixed .kcs-card[data-kcs-size="tall"] .kcs-clean-img,
	.kcs-layout-manual-mixed .kcs-card[data-kcs-size="tall"] .kcs-card-frame,
	.kcs-layout-manual-mixed .kcs-card[data-kcs-size="large"] .kcs-clean-img,
	.kcs-layout-manual-mixed .kcs-card[data-kcs-size="large"] .kcs-card-frame { aspect-ratio: 16 / 10; }
}

/* ---- Pixfort card design mode -------------------------------------------
   Cards are the theme's own .card markup; the .kcs-card wrapper is just a
   grid cell. Make cells equal-height and let the theme style the rest. */
.kcs-card-design-pixfort .kcs-grid { gap: 24px; }
.kcs-card-design-pixfort .kcs-card { height: 100%; transition: none; }
.kcs-card-design-pixfort .kcs-card > .card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.kcs-card-design-pixfort .kcs-card > .card > .pix-p-20 {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/* Responsive collapse for the Pixfort-card grids. */
@media (max-width: 991px) {
	.kcs-card-design-pixfort.kcs-layout-grid-3 .kcs-grid,
	.kcs-card-design-pixfort.kcs-layout-grid-4 .kcs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 575px) {
	.kcs-card-design-pixfort .kcs-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Clean (Instrument-style) card design --------------------------------
   Rounded image with the title underneath — no box, shadow or likes. */
.kcs-card-design-clean .kcs-grid { gap: 40px 28px; }
.kcs-card-design-clean .kcs-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: none;
}
.kcs-clean-link { display: block; }
.kcs-clean-img {
	display: block;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 16 / 10;
	background: transparent;
}
.kcs-clean-img img {
	width: 100% !important;
	height: 100% !important; /* beat the theme's img{height:auto} so the image fills the box (no bar below) */
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.kcs-clean-link:hover .kcs-clean-img img { transform: scale(1.04); }
.kcs-clean-meta { display: flex; flex-direction: column; gap: 4px; }
.kcs-clean-title { font-size: 20px; line-height: 1.25; margin: 0; font-weight: 600; }
.kcs-clean-title a { color: var(--kcs-grid-ink, #0E0E0E); text-decoration: none; }
.kcs-clean-title a:hover { opacity: .7; }
.kcs-clean-sub { margin: 0; color: var(--kcs-grid-muted, #6B6B6B); font-size: 15px; line-height: 1.5; }
.kcs-clean-cat { color: var(--kcs-grid-muted, #6B6B6B); font-size: 14px; }

/* ---- Featured pairs layout: 1 big + 1 small, alternating sides -----------
   12-col grid. The [big, small, small, big] pattern is done with :nth-child so
   it works everywhere (including the Elementor editor, no JS needed): the big
   card alternates left/right down the page. The .kcs-fa-* classes (added by
   filter-ui.js) re-assert the same pattern among only the VISIBLE cards after
   a filter, and are listed AFTER the nth-child rules so they win. */
.kcs-layout-featured-alt .kcs-grid {
	grid-template-columns: repeat(12, 1fr);
	gap: 48px 32px;
	align-items: start;
}

/* default pattern (no JS) — big cards on positions 1 & 4 of each 4-card cycle */
.kcs-layout-featured-alt .kcs-card:nth-child(4n+1),
.kcs-layout-featured-alt .kcs-card:nth-child(4n)   { grid-column: span 8; }
.kcs-layout-featured-alt .kcs-card:nth-child(4n+2),
.kcs-layout-featured-alt .kcs-card:nth-child(4n+3) { grid-column: span 4; }
.kcs-layout-featured-alt .kcs-card:nth-child(4n+1) .kcs-clean-img,
.kcs-layout-featured-alt .kcs-card:nth-child(4n)   .kcs-clean-img { aspect-ratio: auto; height: 540px; }
.kcs-layout-featured-alt .kcs-card:nth-child(4n+2) .kcs-clean-img,
.kcs-layout-featured-alt .kcs-card:nth-child(4n+3) .kcs-clean-img { aspect-ratio: auto; height: 360px; }

/* JS-corrected pattern for the filtered state (wins via source order) */
.kcs-layout-featured-alt .kcs-card.kcs-fa-big   { grid-column: span 8; }
.kcs-layout-featured-alt .kcs-card.kcs-fa-small { grid-column: span 4; }
.kcs-layout-featured-alt .kcs-card.kcs-fa-big   .kcs-clean-img { aspect-ratio: auto; height: 540px; }
.kcs-layout-featured-alt .kcs-card.kcs-fa-small .kcs-clean-img { aspect-ratio: auto; height: 360px; }

@media (max-width: 991px) {
	.kcs-layout-featured-alt .kcs-card:nth-child(4n+1) .kcs-clean-img,
	.kcs-layout-featured-alt .kcs-card:nth-child(4n)   .kcs-clean-img,
	.kcs-layout-featured-alt .kcs-card.kcs-fa-big      .kcs-clean-img { height: 400px; }
	.kcs-layout-featured-alt .kcs-card:nth-child(4n+2) .kcs-clean-img,
	.kcs-layout-featured-alt .kcs-card:nth-child(4n+3) .kcs-clean-img,
	.kcs-layout-featured-alt .kcs-card.kcs-fa-small    .kcs-clean-img { height: 300px; }
}
@media (max-width: 767px) {
	.kcs-layout-featured-alt .kcs-card,
	.kcs-layout-featured-alt .kcs-card:nth-child(4n+1),
	.kcs-layout-featured-alt .kcs-card:nth-child(4n+2),
	.kcs-layout-featured-alt .kcs-card:nth-child(4n+3),
	.kcs-layout-featured-alt .kcs-card:nth-child(4n),
	.kcs-layout-featured-alt .kcs-card.kcs-fa-big,
	.kcs-layout-featured-alt .kcs-card.kcs-fa-small { grid-column: span 12; }
	.kcs-layout-featured-alt .kcs-clean-img { height: 280px !important; }
	.kcs-card-design-clean .kcs-grid { gap: 28px; }
}

/* The card itself is no longer an anchor — it's an <article> that hosts
   one link for the image / title and individual links for each tag pill.
   This avoids invalid nested <a> tags and lets every pill open its own
   service / category page. */
.kcs-card {
	display: block; color: inherit;
	transition: transform .35s ease;
	-webkit-tap-highlight-color: transparent;
}
.kcs-layout-big-then-grid .kcs-card { grid-column: span 3; }
.kcs-layout-big-then-grid .kcs-card.kcs-card-big { grid-column: span 6; }

/* When JS hides a card via data-filter, drop it out of the grid flow. */
.kcs-card.is-filtered-out { display: none; }

/* The image+frame link */
.kcs-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* ---- Card frame (image + overlay) ---- *
 * Image is positioned absolutely inside the frame so object-fit: cover
 * actually fills the frame end-to-end. 16:10 frame matches typical
 * laptop / mockup screenshots so cards stay short and the image fills.
 */
.kcs-card-frame {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	overflow: hidden;
	background: transparent;
}
.kcs-layout-big-then-grid .kcs-card-big .kcs-card-frame {
	aspect-ratio: 21 / 9;
}
.kcs-card-image {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; /* fill the frame — no dark bar below the image */
	object-fit: cover; display: block;
	transition: transform .6s ease;
}
.kcs-card-link:hover .kcs-card-image { transform: scale(1.03); }

.kcs-card-meta-overlay {
	position: absolute; top: 16px; left: 16px;
	display: flex; gap: 8px; align-items: center;
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: rgba(255,255,255,0.92);
	background: rgba(0,0,0,0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	padding: 5px 10px; border-radius: 999px;
	z-index: 2;
}
.kcs-card-dot {
	width: 3px; height: 3px;
	background: currentColor; border-radius: 50%;
}

.kcs-card-hover {
	position: absolute; inset: 0;
	background: radial-gradient(circle at center, rgba(0,0,0,0.0), rgba(0,0,0,0.22));
	opacity: 0; transition: opacity .35s;
	display: flex; align-items: center; justify-content: center;
	z-index: 1;
}
.kcs-card-link:hover .kcs-card-hover { opacity: 1; }
.kcs-card-hover-arrow {
	width: 56px; height: 56px;
	background: var(--kcs-grid-bg); color: var(--kcs-grid-ink);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	transform: scale(0.8);
	transition: transform .3s;
}
.kcs-card-link:hover .kcs-card-hover-arrow { transform: scale(1); }

/* ---- Card text below frame ---- */
.kcs-card-info { margin-top: 18px; }
.kcs-card-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.kcs-card-client {
	font-size: 18px; font-weight: 600; margin: 0;
	letter-spacing: -0.01em;
	color: var(--kcs-grid-ink);
}
.kcs-card-client a {
	color: inherit; text-decoration: none;
	transition: color .2s;
}
.kcs-card-client a:hover {
	color: var(--kcs-brand);
}
.kcs-card-label {
	font-size: 12px; color: var(--kcs-grid-muted);
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.kcs-card-title {
	font-size: 15px; color: var(--kcs-grid-ink-2);
	margin: 6px 0 12px;
	line-height: 1.4;
}
.kcs-card-tags {
	display: flex; flex-wrap: wrap; gap: 4px 14px;
}
/* Category tags are plain text links (no pill/box) that route to the term's
   linked page. */
.kcs-card-tag {
	display: inline-block;
	font-size: 13px; letter-spacing: 0.01em;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--kcs-grid-muted);
	text-decoration: none;
	transition: color .2s;
}
.kcs-card-tag:hover {
	color: var(--kcs-tab-active-color, var(--kcs-grid-ink));
	background: transparent;
}
/* Back-compat: any <span> still rendered inside .kcs-card-tags. */
.kcs-card-tags span:not(.kcs-card-tag) {
	font-size: 13px; color: var(--kcs-grid-muted);
}

/* ---- Footer link ---- */
.kcs-grid-foot { margin-top: 56px; text-align: center; }
.kcs-grid-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--kcs-grid-ink); text-decoration: none;
	font-size: 16px; font-weight: 500;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--kcs-grid-line-strong);
	transition: color .2s, border-color .2s;
}
.kcs-grid-link:hover {
	color: var(--kcs-brand);
	border-color: var(--kcs-brand);
}
.kcs-grid-link-arrow { transition: transform .2s; }
.kcs-grid-link:hover .kcs-grid-link-arrow { transform: translateX(4px); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.kcs-grid-title-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.kcs-grid-controls { align-items: flex-start; }
	.kcs-grid-pills { justify-content: flex-start; }
}
@media (max-width: 720px) {
	.kcs-layout-big-then-grid .kcs-grid,
	.kcs-layout-grid-2 .kcs-grid,
	.kcs-layout-grid-3 .kcs-grid {
		grid-template-columns: 1fr;
	}
	.kcs-layout-big-then-grid .kcs-card,
	.kcs-layout-big-then-grid .kcs-card.kcs-card-big {
		grid-column: span 1;
	}
	/* On phones the big card collapses to the same shape as the rest so
	   the layout stays calm — 21:9 would be a tiny letterboxed strip. */
	.kcs-layout-big-then-grid .kcs-card-big .kcs-card-frame {
		aspect-ratio: 16 / 10;
	}
}


/* =============================================================
 * Kavin Services Grid Elementor widget (.kcs-services-widget)
 *
 * Adapted from the Kavin Studios homepage prototype services
 * section. Two colour schemes (light / dark) and 2/3/4 column
 * layouts. Cards share interior borders so the grid reads as a
 * connected matrix. Hover background change on each card.
 * ============================================================= */

.kcs-services-widget {
	--kcs-svc-bg:        #FAF7F2;
	--kcs-svc-bg-hover:  #F2EEE6;
	--kcs-svc-ink:       #0E0E0E;
	--kcs-svc-ink-2:     #2A2A2A;
	--kcs-svc-muted:     #6B6B6B;
	--kcs-svc-line:      rgba(14,14,14,0.12);
	--kcs-svc-accent:    #FE5000;
	color: var(--kcs-svc-ink);
}
.kcs-services-widget * { box-sizing: border-box; }

.kcs-services-widget.kcs-svc-scheme-dark {
	--kcs-svc-bg:        #0E0E0E;
	--kcs-svc-bg-hover:  rgba(255,255,255,0.04);
	--kcs-svc-ink:       #FAF7F2;
	--kcs-svc-ink-2:     rgba(255,255,255,0.85);
	--kcs-svc-muted:     rgba(255,255,255,0.6);
	--kcs-svc-line:      rgba(255,255,255,0.12);
	background: var(--kcs-svc-bg);
}

/* ---- Eyebrow ---- */
.kcs-services-widget .kcs-svc-eyebrow {
	display: flex; align-items: center; gap: 16px;
	margin-bottom: 28px;
	font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--kcs-svc-ink);
}
.kcs-services-widget .kcs-svc-eyebrow-rule { width: 64px; height: 1px; background: currentColor; }
.kcs-services-widget .kcs-svc-eyebrow-text { font-weight: 500; }
.kcs-services-widget .kcs-svc-eyebrow-num  { margin-left: auto; font-weight: 500; opacity: .8; }

/* ---- Header (heading + intro) ---- */
.kcs-services-widget .kcs-svc-head {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 64px;
}
.kcs-services-widget .kcs-svc-heading {
	font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
	font-size: clamp(28px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--kcs-svc-ink);
}
.kcs-services-widget .kcs-svc-heading em {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.kcs-services-widget .kcs-svc-intro {
	font-size: 17px;
	color: var(--kcs-svc-ink-2);
	line-height: 1.55;
	margin: 0;
}

/* ---- Grid (matrix with shared borders) ---- */
.kcs-services-widget .kcs-svc-grid {
	display: grid;
	border-top: 1px solid var(--kcs-svc-line);
	border-left: 1px solid var(--kcs-svc-line);
}
.kcs-services-widget.kcs-svc-cols-2 .kcs-svc-grid { grid-template-columns: repeat(2, 1fr); }
.kcs-services-widget.kcs-svc-cols-3 .kcs-svc-grid { grid-template-columns: repeat(3, 1fr); }
.kcs-services-widget.kcs-svc-cols-4 .kcs-svc-grid { grid-template-columns: repeat(4, 1fr); }

.kcs-services-widget .kcs-svc-card {
	display: flex; flex-direction: column;
	padding: 36px 32px 32px;
	border-right: 1px solid var(--kcs-svc-line);
	border-bottom: 1px solid var(--kcs-svc-line);
	background: transparent;
	color: inherit;
	text-decoration: none;
	min-height: 280px;
	transition: background-color .25s;
}
.kcs-services-widget .kcs-svc-card:hover { background: var(--kcs-svc-bg-hover); }

.kcs-services-widget .kcs-svc-top {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 36px;
}
.kcs-services-widget .kcs-svc-num {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-size: 22px;
	color: var(--kcs-svc-accent);
	line-height: 1;
}
.kcs-services-widget .kcs-svc-arrow {
	font-size: 18px;
	color: var(--kcs-svc-muted);
	transition: transform .25s, color .25s;
}
.kcs-services-widget .kcs-svc-card:hover .kcs-svc-arrow {
	transform: translate(4px, -4px);
	color: var(--kcs-svc-ink);
}

.kcs-services-widget .kcs-svc-title {
	font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
	font-size: 22px; font-weight: 500;
	letter-spacing: -0.015em; line-height: 1.15;
	margin: 0 0 14px;
	color: var(--kcs-svc-ink);
}
.kcs-services-widget .kcs-svc-body {
	font-size: 14.5px;
	color: var(--kcs-svc-muted);
	line-height: 1.55;
	margin: 0 0 auto;
}
.kcs-services-widget .kcs-svc-tags {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-top: 24px;
}
.kcs-services-widget .kcs-svc-tags span {
	font-size: 11px; letter-spacing: 0.05em;
	padding: 4px 10px;
	border: 1px solid var(--kcs-svc-line);
	border-radius: 999px;
	color: var(--kcs-svc-muted);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.kcs-services-widget .kcs-svc-head {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.kcs-services-widget.kcs-svc-cols-3 .kcs-svc-grid,
	.kcs-services-widget.kcs-svc-cols-4 .kcs-svc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.kcs-services-widget.kcs-svc-cols-2 .kcs-svc-grid,
	.kcs-services-widget.kcs-svc-cols-3 .kcs-svc-grid,
	.kcs-services-widget.kcs-svc-cols-4 .kcs-svc-grid {
		grid-template-columns: 1fr;
	}
	.kcs-services-widget .kcs-svc-card { min-height: 0; }
}


/* =============================================================
 * [kavin_cta_band] shortcode — black "Let's talk" CTA section.
 *
 * Adapted from the Kavin Studios homepage prototype CTABand
 * component. Background SVG monogram is rendered in PHP so the
 * shortcode is self-contained.
 * ============================================================= */

.kcs-cta-band {
	--kcs-cta-bg:     #0E0E0E;
	--kcs-cta-fg:     #FAF7F2;
	--kcs-cta-muted:  rgba(255,255,255,0.7);
	--kcs-cta-faint:  rgba(255,255,255,0.55);
	--kcs-cta-line:   rgba(255,255,255,0.3);
	--kcs-cta-accent: #FE5000;

	position: relative;
	overflow: hidden;
	background: var(--kcs-cta-bg);
	color: var(--kcs-cta-fg);
	padding: 140px 24px;
	text-align: center;
}
.kcs-cta-band * { box-sizing: border-box; }

.kcs-cta-band-bg {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.kcs-cta-mono {
	width: 70%;
	max-width: 700px;
	height: auto;
	opacity: 0.45;
	position: absolute;
}
.kcs-cta-bg-image {
	display: block;
	width: 70%;
	max-width: 700px;
	height: auto;
	object-fit: contain;
	position: absolute;
}

.kcs-cta-band-inner {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}

.kcs-cta-band-eyebrow {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	color: var(--kcs-cta-accent);
	font-size: 18px;
	margin-bottom: 24px;
}

.kcs-cta-band-h {
	font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
	font-size: clamp(40px, 6vw, 88px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin: 0 0 24px;
	color: var(--kcs-cta-fg);
}
.kcs-cta-band-h em {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.kcs-cta-band-p {
	font-size: 18px;
	color: var(--kcs-cta-muted);
	margin: 0 auto 40px;
	max-width: 640px;
	line-height: 1.55;
}

.kcs-cta-band-btns {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.kcs-cta-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 14px; font-weight: 500;
	border: 1px solid transparent;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
	font-family: inherit;
}
.kcs-cta-btn-cream {
	background: var(--kcs-cta-fg);
	color: var(--kcs-cta-bg);
}
.kcs-cta-btn-cream:hover {
	background: var(--kcs-cta-accent);
	color: var(--kcs-cta-fg);
}
.kcs-cta-btn-outline-cream {
	color: var(--kcs-cta-fg);
	border-color: var(--kcs-cta-line);
	background: transparent;
}
.kcs-cta-btn-outline-cream:hover {
	border-color: var(--kcs-cta-fg);
}
.kcs-cta-btn-arrow {
	display: inline-block;
	transition: transform .2s;
}
.kcs-cta-btn-outline-cream:hover .kcs-cta-btn-arrow {
	transform: translate(2px, -2px);
}

.kcs-cta-band-foot {
	margin-top: 56px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: center;
	font-size: 13px;
	color: var(--kcs-cta-faint);
	letter-spacing: 0.05em;
}
.kcs-cta-band-foot strong {
	color: var(--kcs-cta-fg);
	font-weight: 500;
	margin-right: 6px;
}

@media (max-width: 600px) {
	.kcs-cta-band { padding: 90px 20px; }
	.kcs-cta-band-foot { font-size: 12px; gap: 12px 20px; }
}


/* =============================================================
 * Hero Banner Elementor widget (.kcs-hero)
 *
 * Adapted from the Kavin Studios homepage prototype hero. All
 * colours and sizes can be overridden via the widget's Style tab.
 * ============================================================= */

.kcs-hero {
	--kcs-hero-bg:     #FAF7F2;
	--kcs-hero-ink:    #0E0E0E;
	--kcs-hero-ink-2:  #2A2A2A;
	--kcs-hero-muted:  #6B6B6B;
	--kcs-hero-line:   rgba(14,14,14,0.12);
	--kcs-hero-line-strong: rgba(14,14,14,0.22);
	--kcs-hero-accent: #FE5000;

	position: relative;
	background: var(--kcs-hero-bg);
	color: var(--kcs-hero-ink);
	padding: 100px 24px;
	overflow: hidden;
}
.kcs-hero * { box-sizing: border-box; }

.kcs-hero-grain {
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(14,14,14,0.04) 1px, transparent 1px);
	background-size: 4px 4px;
	pointer-events: none;
	opacity: 0.6;
}

.kcs-hero > *:not(.kcs-hero-grain) { position: relative; z-index: 1; }

/* Inner wrapper centres the content and constrains its max-width
   (set per-widget in the Style tab — defaults to 1250px). */
.kcs-hero-inner {
	max-width: 1250px;
	margin: 0 auto;
	position: relative;
}

.kcs-hero-eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 13px;
	color: var(--kcs-hero-ink-2);
	border: 1px solid var(--kcs-hero-line);
	background: rgba(255,255,255,0.5);
	padding: 8px 14px;
	border-radius: 999px;
	margin-bottom: 56px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	white-space: nowrap;
}
.kcs-hero-eyebrow > span { white-space: nowrap; }
.kcs-hero-dot {
	width: 8px; height: 8px;
	background: #2BB673; border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(43,182,115,0.18);
	animation: kcs-pulse 2.4s infinite ease-in-out;
}
@keyframes kcs-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
.kcs-hero-eyebrow-divider { color: var(--kcs-hero-line-strong); }

.kcs-hero-h1 {
	font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(48px, 8.6vw, 132px);
	line-height: 0.96;
	letter-spacing: -0.035em;
	margin: 0;
	max-width: 1100px;
	color: var(--kcs-hero-ink);
}
.kcs-hero-h1 em {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	display: inline-block;
	transform: translateY(0.06em);
	margin-right: 0.05em;
}
.kcs-hero-h1 .kcs-mark {
	position: relative;
	display: inline-block;
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	color: var(--kcs-hero-accent);
	padding: 0 0.06em;
}
.kcs-hero-h1 .kcs-mark::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0.06em;
	height: 0.08em;
	background: var(--kcs-hero-accent);
	opacity: 0.18;
}

.kcs-hero-meta {
	margin-top: 56px;
	display: flex;
	align-items: stretch;
	gap: 32px;
	max-width: 760px;
	flex-wrap: wrap;
}
.kcs-hero-meta-item {
	display: flex; flex-direction: column; gap: 8px;
}
.kcs-hero-meta-num {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 56px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--kcs-hero-ink);
	display: inline-flex;
	align-items: flex-start;
}
.kcs-hero-meta-num span {
	font-size: 22px;
	color: var(--kcs-hero-accent);
	margin-left: 4px;
	transform: translateY(8px);
	font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
	font-style: normal;
}
.kcs-hero-meta-label {
	font-size: 13px;
	color: var(--kcs-hero-muted);
	line-height: 1.4;
}
.kcs-hero-meta-divider {
	width: 1px;
	background: var(--kcs-hero-line);
}

.kcs-hero-bottom {
	margin-top: 64px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: end;
	max-width: 1100px;
}
.kcs-hero-tagline {
	font-size: 19px;
	line-height: 1.5;
	color: var(--kcs-hero-ink-2);
	max-width: 620px;
	margin: 0;
}
.kcs-hero-tagline em {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
}
.kcs-hero-ctas { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

.kcs-hero-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.kcs-hero-btn-primary {
	background: var(--kcs-hero-ink);
	color: var(--kcs-hero-bg);
}
.kcs-hero-btn-primary:hover {
	background: var(--kcs-hero-accent);
	color: #fff;
}
.kcs-hero-btn-ghost {
	color: var(--kcs-hero-ink);
	border-color: var(--kcs-hero-line-strong);
	background: transparent;
}
.kcs-hero-btn-ghost:hover {
	border-color: var(--kcs-hero-ink);
}
.kcs-hero-btn-arrow {
	display: inline-block;
	transition: transform .2s;
}
.kcs-hero-btn-ghost:hover .kcs-hero-btn-arrow {
	transform: translate(2px, 2px);
}

.kcs-hero-scroll-cue {
	margin-top: 80px;
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--kcs-hero-muted);
}
.kcs-hero-scroll-line {
	width: 60px; height: 1px;
	background: var(--kcs-hero-line);
	position: relative;
	overflow: hidden;
}
.kcs-hero-scroll-line-inner {
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 30%;
	background: var(--kcs-hero-ink);
	animation: kcs-scroll-cue 2.2s infinite ease-in-out;
}
@keyframes kcs-scroll-cue {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(360%); }
}

/* ---- Hero floating images (artifacts) ---- *
 * Each artifact is positioned absolutely inside .kcs-hero-inner using
 * top% / right% / rotate / width supplied per-image in the editor.
 * Captions are italic serif and sit relative to the image via
 * .kcs-hero-artifact-cap-{position} variants.
 */
.kcs-hero-artifacts {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 2;
}
.kcs-hero-artifact {
	--kcs-art-rot: 0deg;
	--kcs-art-amp: 14px;
	--kcs-art-dur: 6s;

	position: absolute;
	box-shadow:
		0 30px 60px -20px rgba(0,0,0,0.18),
		0 8px 20px -6px rgba(0,0,0,0.08);
	border-radius: 6px;
	overflow: visible;
	transform: rotate(var(--kcs-art-rot));
	will-change: transform;
}

/* Floating motion — only applied when the parent .kcs-hero-artifacts
   has the .is-animated modifier. Each item gets a negative animation-delay
   set inline so the cycle is already in progress at first paint. */
.kcs-hero-artifacts.is-animated .kcs-hero-artifact {
	animation: kcs-art-float var(--kcs-art-dur) ease-in-out infinite;
}
@keyframes kcs-art-float {
	0%, 100% {
		transform: rotate(var(--kcs-art-rot)) translateY(0);
	}
	50% {
		transform: rotate(var(--kcs-art-rot)) translateY(calc(var(--kcs-art-amp) * -1));
	}
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
	.kcs-hero-artifacts.is-animated .kcs-hero-artifact {
		animation: none;
	}
}
.kcs-hero-artifact-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.kcs-hero-artifact-caption {
	position: absolute;
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-size: 13px;
	color: var(--kcs-hero-muted);
	white-space: nowrap;
}
.kcs-hero-artifact-cap-top    .kcs-hero-artifact-caption { top: -22px;    left: 50%; transform: translateX(-50%); }
.kcs-hero-artifact-cap-bottom .kcs-hero-artifact-caption { bottom: -22px; left: 50%; transform: translateX(-50%); }
.kcs-hero-artifact-cap-right  .kcs-hero-artifact-caption { right: -10px;  top: 50%;  transform: translate(100%, -50%); padding-left: 18px; }
.kcs-hero-artifact-cap-left   .kcs-hero-artifact-caption { left: -10px;   top: 50%;  transform: translate(-100%, -50%); padding-right: 18px; }

@media (max-width: 720px) {
	.kcs-hero { padding: 60px 20px; }
	.kcs-hero-eyebrow { margin-bottom: 32px; }
	.kcs-hero-meta {
		gap: 24px;
		margin-top: 36px;
	}
	.kcs-hero-meta-divider { display: none; }
	.kcs-hero-meta-num { font-size: 42px; }
	.kcs-hero-bottom {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 40px;
	}
	.kcs-hero-scroll-cue { margin-top: 48px; }
	/* Hide floating images on phones — they overlap the heading. */
	.kcs-hero-artifacts { display: none; }
}


/* =============================================================
 * Locations Map Elementor widget (.kcs-loc)
 *
 * Two-column layout — Leaflet map on the left, region/cities list
 * on the right. Markers are HTML divIcons so they pick up CSS vars.
 * ============================================================= */

.kcs-loc {
	--kcs-loc-bg:     #FAF7F2;
	--kcs-loc-bg-2:   #F2EEE6;
	--kcs-loc-ink:    #0E0E0E;
	--kcs-loc-ink-2:  #2A2A2A;
	--kcs-loc-muted:  #6B6B6B;
	--kcs-loc-line:   rgba(14,14,14,0.12);
	--kcs-loc-accent: #FE5000;

	color: var(--kcs-loc-ink);
}
.kcs-loc * { box-sizing: border-box; }

.kcs-loc-eyebrow {
	display: flex; align-items: center; gap: 16px;
	margin-bottom: 28px;
	font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--kcs-loc-ink);
}
.kcs-loc-eyebrow-rule { width: 64px; height: 1px; background: currentColor; }
.kcs-loc-eyebrow-text { font-weight: 500; }
.kcs-loc-eyebrow-num  { margin-left: auto; font-weight: 500; opacity: .8; }

.kcs-loc-head {
	margin-bottom: 56px;
	max-width: 800px;
}
.kcs-loc-h {
	font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(36px, 4.4vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0;
}
.kcs-loc-h em {
	font-family: 'Instrument Serif', 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	color: var(--kcs-loc-accent);
}
.kcs-loc-intro {
	font-size: 17px;
	color: var(--kcs-loc-ink-2);
	margin: 20px 0 0;
	line-height: 1.55;
}

.kcs-loc-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
	align-items: start;
}

.kcs-loc-map {
	position: relative;
	aspect-ratio: var(--kcs-loc-map-w, 16) / var(--kcs-loc-map-h, 10);
	background: var(--kcs-loc-bg-2);
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--kcs-loc-line);
}
/* Leaflet's default zoom controls — make them match the design */
.kcs-loc-map .leaflet-control-zoom a {
	background: rgba(255,255,255,0.95);
	color: var(--kcs-loc-ink);
	border: 1px solid var(--kcs-loc-line);
}
.kcs-loc-map .leaflet-control-attribution {
	background: rgba(255,255,255,0.85);
	font-size: 10px;
}

/* Marker styling — these are Leaflet divIcons rendered with our HTML */
.kcs-loc-marker {
	pointer-events: none;
}
.kcs-loc-marker .kcs-loc-marker-pin {
	display: block;
	width: 12px; height: 12px;
	background: var(--kcs-loc-ink);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(14,14,14,0.08);
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
}
.kcs-loc-marker.kcs-loc-marker-primary .kcs-loc-marker-pin {
	background: var(--kcs-loc-accent);
	box-shadow:
		0 0 0 6px rgba(254,80,0,0.18),
		0 0 0 14px rgba(254,80,0,0.08);
	animation: kcs-pulse 2s infinite;
}
.kcs-loc-marker .kcs-loc-marker-label {
	position: absolute;
	left: 18px;
	top: -6px;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--kcs-loc-ink);
	font-weight: 500;
	background: rgba(255,255,255,0.9);
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
	border: 1px solid var(--kcs-loc-line);
}

.kcs-loc-list {
	display: flex;
	flex-direction: column;
}
.kcs-loc-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--kcs-loc-line);
}
.kcs-loc-row:last-child {
	border-bottom: 1px solid var(--kcs-loc-line);
}
.kcs-loc-row-region {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.kcs-loc-row-cities {
	font-size: 14px;
	color: var(--kcs-loc-muted);
	line-height: 1.5;
}

@media (max-width: 960px) {
	.kcs-loc-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.kcs-loc-row {
		grid-template-columns: 130px 1fr;
		gap: 16px;
	}
}
@media (max-width: 600px) {
	.kcs-loc-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* =========================================================================
 * Pixfort Portfolio widget — dual "By Type / By Industry" tab bar
 * (rendered by includes/elementor-portfolio-source.php). The term buttons
 * themselves are Pixfort .portfolio_filter controls, styled by the theme;
 * these rules only cover the tab switcher + group visibility.
 * ========================================================================= */
.kcs-dual-nav { margin-bottom: 28px; }
.kcs-dual-tabs { display: inline-flex; gap: 10px; margin-bottom: 20px; }
.kcs-dual-tab {
	border: 0;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	/* Default look mirrors Pixfort's own portfolio filter: inactive tabs are
	   plain muted text, the active tab is a white pill with a soft shadow.
	   No brand colour is forced — set the per-widget colour controls to
	   override any of these via the CSS vars. */
	background: var(--kcs-tab-bg, transparent);
	color: var(--kcs-tab-color, #6B6B6B);
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.kcs-dual-tab:hover { color: var(--kcs-tab-color, #141414); }
.kcs-dual-tab.is-on {
	background: var(--kcs-tab-active-bg, #ffffff);
	color: var(--kcs-tab-active-color, #141414);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.kcs-dual-group { display: none; flex-wrap: wrap; gap: 4px 6px; }
.kcs-dual-group.is-on { display: flex; }
.kcs-dual-nav.text-center .kcs-dual-group { justify-content: center; }
.kcs-dual-nav.text-right  .kcs-dual-group { justify-content: flex-end; }
.kcs-dual-nav.text-left   .kcs-dual-group,
.kcs-dual-nav.text-start  .kcs-dual-group { justify-content: flex-start; }

/* Give the active term button the same white-pill look as the active tab.
   Scoped to .kcs-dual-nav so other portfolio grids are untouched. Reuses the
   same --kcs-tab-active-* vars so the tab + active term stay consistent and
   both respond to the widget's colour pickers. */
.kcs-dual-nav .kcs-dual-group .portfolio_filter {
	border-radius: 12px;
	padding: 8px 18px;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.kcs-dual-nav .kcs-dual-group .portfolio_filter.is-checked {
	background: var(--kcs-tab-active-bg, #ffffff);
	color: var(--kcs-tab-active-color, #141414);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.kcs-dual-nav .kcs-dual-group .portfolio_filter.is-checked strong { color: inherit; }

/* =========================================================================
 * [kavin_case_study_nav] — Previous / All / Next on single case studies
 * ========================================================================= */
.kcs-cs-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: 1200px;
	margin: 56px auto;
	padding: 28px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.kcs-cs-nav-item {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 0;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	transition: opacity .2s ease;
}
.kcs-cs-nav-prev { justify-content: flex-start; }
.kcs-cs-nav-next { justify-content: flex-end; text-align: right; }
.kcs-cs-nav-item:hover { opacity: .6; }
.kcs-cs-nav-empty { pointer-events: none; }
.kcs-cs-nav-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kcs-cs-nav-label {
	font-size: 13px;
	color: #8a8a8a;
	letter-spacing: .01em;
}
.kcs-cs-nav-title {
	font-size: 18px;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kcs-cs-nav-arrow {
	font-size: 26px;
	line-height: 1;
	color: #8a8a8a;
	flex: 0 0 auto;
}
.kcs-cs-nav-all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	text-decoration: none;
	transition: opacity .2s ease;
}
.kcs-cs-nav-all:hover { opacity: .55; }
@media (max-width: 600px) {
	.kcs-cs-nav { gap: 14px; padding: 20px 0; margin: 36px auto; }
	.kcs-cs-nav-title { font-size: 15px; }
	.kcs-cs-nav-arrow { font-size: 22px; }
}


/* =============================================================
 * Sitemap Index Elementor widget (.kcs-sitemap)
 *
 * The Instrument-style index: oversized display headings, each
 * followed by an optional dense multi-column link list.
 *
 * Sizes are clamp() by default so they scale with the viewport
 * with no configuration; the widget's four "size" sliders emit
 * a plain font-size that overrides the clamp when set.
 *
 * Lists use CSS multi-column, so an alphabetical list reads down
 * column one before wrapping to column two — matching the
 * reference layout (a grid would read across instead).
 * ============================================================= */

.kcs-sitemap {
	--kcs-sm-gap: 96px;
	--kcs-sm-list-top: 40px;
	--kcs-sm-list-max: 1100px;
	--kcs-sm-colgap: 48px;
	--kcs-sm-row-pad: 18px;
	--kcs-sm-label-opacity: 0.7;
}

.kcs-sm-block + .kcs-sm-block {
	margin-top: var(--kcs-sm-gap);
}

/* ---- Heading ---- */
.kcs-sm-head {
	display: inline-flex;
	align-items: center;
	gap: 0.1em;
	color: var(--kcs-sm-head-color, currentColor);
	text-decoration: none;
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.02em;
	transition: opacity 0.25s ease;
}
a.kcs-sm-head:hover { opacity: 0.75; text-decoration: none; }

.kcs-sm-arrow {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
a.kcs-sm-head:hover .kcs-sm-arrow { transform: translateX(0.12em); }

/* Default sizes — overridden by the widget's size sliders when set. */
.kcs-sm-size-sm .kcs-sm-head { font-size: clamp(26px, 4vw,  52px); }
.kcs-sm-size-md .kcs-sm-head { font-size: clamp(32px, 6vw,  78px); }
.kcs-sm-size-lg .kcs-sm-head { font-size: clamp(38px, 8vw, 104px); }
.kcs-sm-size-xl .kcs-sm-head { font-size: clamp(44px, 10vw,132px); }

.kcs-sm-align-left   { text-align: left; }
.kcs-sm-align-center { text-align: center; }
.kcs-sm-align-right  { text-align: right; }

/* ---- List ---- */
.kcs-sm-list {
	list-style: none !important;
	padding: 0;
	margin: var(--kcs-sm-list-top) 0 0;
	max-width: var(--kcs-sm-list-max);
	text-align: left;          /* never inherit the heading's alignment */
	color: var(--kcs-sitemap-fg);
	column-gap: var(--kcs-sm-colgap);
}
.kcs-sm-list-center .kcs-sm-list { margin-left: auto;  margin-right: auto; }
.kcs-sm-list-right  .kcs-sm-list { margin-left: auto;  margin-right: 0; }
.kcs-sm-list-left   .kcs-sm-list { margin-left: 0;     margin-right: auto; }

.kcs-sm-cols-1 { column-count: 1; }
.kcs-sm-cols-2 { column-count: 2; }
.kcs-sm-cols-3 { column-count: 3; }
.kcs-sm-cols-4 { column-count: 4; }

.kcs-sm-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: var(--kcs-sm-row-pad) 0;
	border-bottom: 1px solid var(--kcs-sitemap-border);
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	transition: transform 0.2s ease;
}
.kcs-sm-list li a,
.kcs-sm-list li .kcs-sm-plain {
	color: inherit;
	text-decoration: none;
	line-height: 1.3;
}
.kcs-sm-list li a::after {
	content: " \2192";
	opacity: 0;
	transition: opacity 0.2s ease;
}
.kcs-sm-label {
	opacity: var(--kcs-sm-label-opacity);
	white-space: nowrap;
	padding-left: 20px;
}

/* ---- Hover behaviour (set per widget) ---- */
.kcs-sitemap[data-kcs-hover="arrow"] .kcs-sm-list li:hover a::after,
.kcs-sitemap[data-kcs-hover="both"]  .kcs-sm-list li:hover a::after { opacity: 1; }

.kcs-sitemap[data-kcs-hover="scale"] .kcs-sm-list li:hover,
.kcs-sitemap[data-kcs-hover="both"]  .kcs-sm-list li:hover { transform: scale(1.04); }

/* ---- Responsive ---- */
@media (max-width: 991px) {
	.kcs-sm-cols-3,
	.kcs-sm-cols-4 { column-count: 2; }
}
@media (max-width: 767px) {
	.kcs-sitemap { --kcs-sm-gap: 56px; --kcs-sm-list-top: 24px; }
	.kcs-sm-list { column-count: 1 !important; }
	/* Long headings shouldn't push the page sideways on a phone. */
	.kcs-sm-head { max-width: 100%; flex-wrap: wrap; }
}