/**
 * Page-scoped styles for the industry page, lifted from the two inline <style>
 * blocks at the top of sleektap-theme/single-industry.php (lines 37-239).
 *
 * WHY THIS IS NOT IN sleektap-cascade.css. These selectors are deliberately
 * NOT global, because WordPress only emitted them on this template and several
 * of the names are generic enough to collide elsewhere — `.head`, `.benefits`,
 * `.products`, `.cta`, and notably `.image-radius`, which the archives also use
 * but which has NO rule anywhere in the theme's stylesheets. On the live site
 * archive thumbnails therefore have square corners and industry ones are
 * rounded. Loading this globally would silently round the archives too, so the
 * industry page links it itself.
 *
 * ONE CORRECTION: the source has a stray extra `}` after `.promise-icon-wrap`
 * (single-industry.php:105). It is dropped here — a duplicate closing brace
 * ends the rule early and would swallow whatever followed it.
 *
 * The rules are otherwise verbatim, including ones this template's markup never
 * uses (`.promise-card`, `.products`, `.product`, `.cta*`, `.hero-slide*`,
 * `.glyph`). They are kept because unused CSS changes nothing, while guessing
 * which ones are dead risks removing something a CMS-authored block relies on.
 */

/* ---- from the first <style> block (single-industry.php:37-107) ---- */
.owl-theme .owl-nav {
	display: flex !important;
	justify-content: center;
	gap: .75rem;
	margin-top: 1.25rem !important;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
	background: #5C3694 !important;
	color: #fff !important;
	width: 45px !important;
	height: 45px;
	line-height: 20px !important;
	border-radius: 50px;
}
.owl-carousel .owl-nav .owl-prev {
	position: absolute;
	bottom: 50%;
	left: -5%;
}
.owl-carousel .owl-nav .owl-next {
	position: absolute;
	bottom: 50%;
	right: -5%;
}
.image-radius {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
.owl-carousel .owl-nav .owl-prev i,
.owl-carousel .owl-nav .owl-next i {
	font-size: 28px;
}
.owl-carousel .owl-nav .disabled {
	opacity: .45 !important;
	cursor: not-allowed;
}
@media (max-width: 600px) {
	.owl-theme .owl-nav {
		width: 38px;
		height: 38px;
		font-size: 1rem;
	}
}
.owl-carousel .item { height: 100%; }
.owl-carousel.col-match .owl-stage { display: flex; }
.owl-carousel.col-match .owl-item { display: flex; }
.owl-carousel.col-match .owl-item > .item { display: flex; width: 100%; }
.owl-carousel.col-match .owl-item > .item > * { width: 100%; display: flex; flex-direction: column; }

/* Image-content rows */
.image-content-row + .image-content-row { margin-top: 2rem; }

/* Promise section unique style */
.promise-card {
	position: relative;
	transition: transform .3s ease, box-shadow .3s ease;
	overflow: hidden;
}
.promise-icon-wrap {
	position: relative;
	background: #5C3694;
}

/* ---- from the second <style> block (single-industry.php:109-239) ---- */

/* ============ HEADLINE ROW ============ */
.head {
	padding-bottom: 64px;
	border-bottom: 1px solid rgba(26, 32, 44, .12);
}

/* ============ BENEFIT GRID ============ */
.benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 64px;
	margin-top: 88px;
}
.benefit {
	display: flex;
	flex-direction: column;
}

/* tiny diagram per benefit */
.glyph {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border: 1px solid var(--rule-strong);
	border-radius: 8px;
	background: var(--bg-card);
	margin-bottom: 4px;
}
.glyph svg { display: block; }

/* ============ PRODUCTS STRIP ============ */
.products {
	margin-top: 120px;
	padding-top: 40px;
	border-top: 1px solid rgba(26, 32, 44, .12);
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 48px;
	align-items: start;
}
.products .label {
	font-family: var(--f-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding-top: 8px;
}
.product-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.product {
	background: var(--bg-card);
	border: 1px solid #5C3694;
	border-radius: 14px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform .25s ease, border-color .25s ease;
}
.product:hover {
	transform: translateY(-2px);
	border-color: #5C3694;
}

/* ============ CTA ============ */
.cta-row {
	margin-top: 88px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.cta {
	appearance: none;
	border: none;
	cursor: pointer;
	background: var(--ink);
	color: var(--bg);
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.01em;
	padding: 22px 36px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	transition: background .2s ease, transform .2s ease;
}
.cta:hover {
	background: var(--accent);
	color: var(--accent-ink);
	transform: translateY(-1px);
}
.cta .arrow {
	width: 20px; height: 20px;
	display: grid; place-items: center;
	transition: transform .2s ease;
}
.cta:hover .arrow { transform: translateX(4px); }
.cta-aside {
	font-size: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #000;
}
.cta-aside b { color: var(--ink); font-weight: 500; }

@media (max-width: 1100px) {
	.head { grid-template-columns: 1fr; gap: 40px; }
	.benefits { grid-template-columns: 1fr; gap: 56px; }
	.products { grid-template-columns: 1fr; gap: 24px; }
	.product-row { grid-template-columns: 1fr; }
}

/* ---- from the third <style> block (single-industry.php:320-344) ---- */
.hero-slider-wrapper {
	width: 100%;
	height: 650px;
	position: relative;
}
.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}
.hero-slide.active {
	opacity: 1;
	z-index: 1;
}