/**
 * Legendary Services — pixel-faithful port of legendary_service_ui_concept.jsx
 * (Tailwind CSS v3 default theme: colors, font-sans, text-*, spacing, rounded-*, breakpoints).
 */

/* --- Tailwind v3 default palette (neutral) + semantic tokens --- */
:root {
	/* tailwind default neutral */
	--tw-n950: #0a0a0a;
	--tw-n900: #171717;
	--tw-n400: #a3a3a3;
	--tw-n300: #d4d4d4;
	/* white opacity */
	--tw-white-10: rgb(255 255 255 / 0.1);
	--tw-white-7: rgb(255 255 255 / 0.07);
	--tw-white-2: rgb(255 255 255 / 0.02);
	/* bg-neutral-900/70 */
	--tw-n900-70: rgb(23 23 23 / 0.7);
	/* layout */
	--tw-max-w-7xl: 80rem; /* max-w-7xl */
	--tw-max-w-3xl: 48rem; /* max-w-3xl */
	/* rounded-2xl */
	--tw-r2xl: 1rem;
	/* rounded-[2rem] */
	--tw-r32: 2rem;
	/* font-sans (Tailwind v3 default theme) */
	--tw-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol", "Noto Color Emoji";
}

/* --- Page shell: min-h-screen bg-neutral-950 text-white font-sans antialiased --- */
body.legendary-services-page {
	background-color: var(--tw-n950) !important;
	color: #fff !important;
	font-family: var(--tw-font-sans) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.legendary-services-page #wrapper,
body.legendary-services-page #inner-wrap,
body.legendary-services-page .site,
body.legendary-services-page .content-bg {
	background-color: var(--tw-n950) !important;
}

body.legendary-services-page .entry-hero,
body.legendary-services-page .kadence-entry-hero,
body.legendary-services-page .entry-header,
body.legendary-services-page .kadence-breadcrumbs,
body.legendary-services-page .kadence-breadcrumbs-container,
body.legendary-services-page .page-title,
body.legendary-services-page h1.entry-title,
body.legendary-services-page .hero-section {
	display: none !important;
}

body.legendary-services-page .site-main,
body.legendary-services-page .entry-content,
body.legendary-services-page .entry-content-wrap {
	color: #fff !important;
	font-family: var(--tw-font-sans) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	padding-top: 0 !important;
}

/* Canvas: JSX root <div className="min-h-screen bg-neutral-950 text-white"> */
.legendary-services-canvas {
	box-sizing: border-box;
	min-height: 100vh;
	background-color: var(--tw-n950);
	color: #fff;
	font-family: var(--tw-font-sans);
	font-size: 1rem; /* text-base */
	line-height: 1.5; /* leading-normal */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.legendary-services-canvas *,
.legendary-services-canvas *::before,
.legendary-services-canvas *::after {
	box-sizing: border-box;
}

/* Preflight-style: JSX relies on Tailwind reset */
.legendary-services-canvas h1,
.legendary-services-canvas h2,
.legendary-services-canvas h3 {
	margin: 0;
}

.legendary-services-canvas p {
	margin: 0;
}

.ls-border-b {
	border-bottom: 1px solid var(--tw-white-10);
}

.ls-border-t {
	border-top: 1px solid var(--tw-white-10);
}

/* mx-auto max-w-7xl px-6 py-16 lg:px-8 */
.ls-container {
	max-width: var(--tw-max-w-7xl);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem; /* px-6 */
	padding-right: 1.5rem;
}

@media (min-width: 1024px) {
	.ls-container {
		padding-left: 2rem; /* lg:px-8 */
		padding-right: 2rem;
	}
}

.ls-container--py16 {
	padding-top: 4rem; /* py-16 */
	padding-bottom: 4rem;
}

/* footer: mx-auto max-w-7xl px-6 py-10 lg:px-8 flex justify-between items-center */
.ls-container--footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2.5rem; /* py-10 */
	padding-bottom: 2.5rem;
}

/* max-w-3xl */
.ls-intro-copy {
	max-width: var(--tw-max-w-3xl);
}

/* h1: text-4xl font-semibold sm:text-5xl lg:text-6xl (Tailwind v3 exact sizes) */
.ls-h1 {
	margin: 0 !important;
	font-family: var(--tw-font-sans) !important;
	font-weight: 600 !important; /* font-semibold */
	color: #fff !important;
	font-size: 2.25rem !important; /* text-4xl */
	line-height: 2.5rem !important;
	letter-spacing: 0 !important;
}

@media (min-width: 640px) {
	.ls-h1 {
		font-size: 3rem !important; /* sm:text-5xl */
		line-height: 1 !important;
	}
}

@media (min-width: 1024px) {
	.ls-h1 {
		font-size: 3.75rem !important; /* lg:text-6xl */
		line-height: 1 !important;
	}
}

/* p: mt-5 text-neutral-300 */
.ls-intro-lead {
	margin: 1.25rem 0 0 !important; /* mt-5 */
	font-family: var(--tw-font-sans) !important;
	font-size: 1rem !important; /* text-base */
	line-height: 1.5 !important; /* leading-normal */
	font-weight: 400 !important;
	color: var(--tw-n300) !important; /* text-neutral-300 */
}

/* h2 shared: text-3xl font-semibold */
.ls-h2 {
	margin: 0 !important;
	font-family: var(--tw-font-sans) !important;
	font-size: 1.875rem !important; /* text-3xl */
	line-height: 2.25rem !important;
	font-weight: 600 !important; /* font-semibold */
	color: #fff !important;
}

/* grid gap-8 md:grid-cols-2 xl:grid-cols-4 */
.ls-grid-cards {
	display: grid;
	gap: 2rem; /* gap-8 */
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.ls-grid-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.ls-grid-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* card: rounded-[2rem] border border-white/10 bg-neutral-900/70 */
.ls-card {
	overflow: hidden;
	border-radius: var(--tw-r32);
	border: 1px solid var(--tw-white-10);
	background-color: var(--tw-n900-70);
}

.ls-card-media {
	overflow: hidden;
}

/* img: h-64 w-full object-cover transition group-hover:scale-105 */
.ls-card-img {
	display: block;
	height: 16rem; /* h-64 */
	width: 100%;
	object-fit: cover;
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); /* Tailwind default transition */
}

.ls-card:hover .ls-card-img {
	transform: scale(1.05);
}

/* p-6 */
.ls-card-body {
	padding: 1.5rem;
}

/* h3: text-xl font-semibold */
.ls-card-title {
	margin: 0 !important;
	font-family: var(--tw-font-sans) !important;
	font-size: 1.25rem !important; /* text-xl */
	line-height: 1.75rem !important;
	font-weight: 600 !important; /* font-semibold */
	color: #fff !important;
}

/* p: mt-3 text-sm text-neutral-400 */
.ls-card-desc {
	margin: 0.75rem 0 0 !important; /* mt-3 */
	font-family: var(--tw-font-sans) !important;
	font-size: 0.875rem !important; /* text-sm */
	line-height: 1.25rem !important;
	font-weight: 400 !important;
	color: var(--tw-n400) !important; /* text-neutral-400 */
}

/* button: mt-5 w-full rounded-2xl bg-white px-4 py-3 text-sm font-medium text-neutral-950 */
.ls-btn--primary {
	margin-top: 1.25rem !important; /* mt-5 */
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: var(--tw-r2xl);
	border: 1px solid #fff;
	padding: 0.75rem 1rem !important; /* py-3 px-4 */
	font-family: var(--tw-font-sans) !important;
	font-size: 0.875rem !important; /* text-sm */
	line-height: 1.25rem !important;
	font-weight: 500 !important; /* font-medium */
	color: var(--tw-n950) !important; /* text-neutral-950 */
	background-color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ls-btn--primary:hover {
	background-color: #f5f5f5 !important;
	border-color: #f5f5f5 !important;
	color: var(--tw-n950) !important;
}

/* w-full on card CTAs */
.ls-btn--block {
	width: 100%;
}

/* panel: rounded-[2rem] border border-white/10 bg-gradient-to-br from-white/[0.07] to-white/[0.02] p-10 */
.ls-why-panel {
	border-radius: var(--tw-r32);
	border: 1px solid var(--tw-white-10);
	background-image: linear-gradient(to bottom right, var(--tw-white-7), var(--tw-white-2));
	padding: 2.5rem; /* p-10 */
}

/* inner grid gap-6 lg:grid-cols-3 */
.ls-why-grid {
	display: grid;
	gap: 1.5rem; /* gap-6 */
}

@media (min-width: 1024px) {
	.ls-why-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* rounded-2xl border border-white/10 p-6 */
.ls-why-cell {
	border-radius: var(--tw-r2xl);
	border: 1px solid var(--tw-white-10);
	padding: 1.5rem;
}

/* div: font-medium */
.ls-why-label {
	font-family: var(--tw-font-sans) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	font-weight: 500 !important; /* font-medium */
	color: #fff !important;
}

/* p: mt-3 text-sm text-neutral-400 */
.ls-why-text {
	margin: 0.75rem 0 0 !important;
	font-family: var(--tw-font-sans) !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	font-weight: 400 !important;
	color: var(--tw-n400) !important;
}

/* CTA block: text-center */
.ls-section--cta .ls-container {
	text-align: center;
}

/* p: mt-4 text-neutral-400 (text-base) */
.ls-cta-sub {
	margin: 1rem 0 0 !important; /* mt-4 */
	font-family: var(--tw-font-sans) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	color: var(--tw-n400) !important;
}

/* button: mt-6 rounded-2xl bg-white px-6 py-3 text-neutral-950 font-medium (no text-* → text-base) */
.ls-btn--cta {
	margin-top: 1.5rem !important; /* mt-6 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: var(--tw-r2xl);
	border: 1px solid #fff;
	padding: 0.75rem 1.5rem !important; /* py-3 px-6 */
	font-family: var(--tw-font-sans) !important;
	font-size: 1rem !important; /* text-base */
	line-height: 1.5 !important;
	font-weight: 500 !important; /* font-medium */
	color: var(--tw-n950) !important;
	background-color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ls-btn--cta:hover {
	background-color: #f5f5f5 !important;
	border-color: #f5f5f5 !important;
	color: var(--tw-n950) !important;
}

/* footer text: text-sm text-neutral-400 */
.ls-footer-muted {
	font-family: var(--tw-font-sans) !important;
	font-size: 0.875rem !important; /* text-sm */
	line-height: 1.25rem !important;
	font-weight: 400 !important;
	color: var(--tw-n400) !important;
}

/* button: rounded-2xl border border-white/10 px-4 py-2 text-sm */
.ls-btn--outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: var(--tw-r2xl);
	border: 1px solid var(--tw-white-10);
	padding: 0.5rem 1rem !important; /* py-2 px-4 */
	font-family: var(--tw-font-sans) !important;
	font-size: 0.875rem !important; /* text-sm */
	line-height: 1.25rem !important;
	font-weight: 400 !important;
	color: #fff !important;
	background-color: transparent !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ls-btn--outline:hover {
	background-color: rgb(255 255 255 / 0.06) !important;
	color: #fff !important;
}