:root {
	--color-brand: #c45a12;
	--color-secondary: #c45a12;
	--color-primary: #ff7f00;
	--color-primary-dark: #e06800;
	--color-brand-cyan: #c45a12;
	--color-brand-cyan-dark: #8f3f0a;
	--color-brand-cyan-soft: #fff3e6;
	--color-brand-yellow: #ff0;
	--color-brand-yellow-soft: #fff8b3;
	--color-brand-orange: #ff7f00;
	--color-brand-orange-soft: #ffb84c;
	--color-text-primary: #1a1a1a;
	--color-text-muted: #666;
	--color-text-light: #999;
	--color-bg-page: #fff;
	--color-bg-alt: #fffaf3;
	--color-bg-surface: #fff;
	--color-border: #e8e8e8;
	--color-border-grid: #eee;
	--color-number-bg: #f0f0f0;
	--font-family-base: "Poppins", "Noto Sans Myanmar", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-hero: clamp(2rem, 4.2vw, 3.25rem);
	--font-size-section: clamp(1.5rem, 2.8vw, 2.25rem);
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-section: clamp(3rem, 6vw, 5rem);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
	--header-height: 80px;
	--z-header: 100;
}

.l-section {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: min(1200px, 100%);
	min-width: 0;
	padding-inline: clamp(1rem, 4vw, 1.5rem);
	width: 100%;
}

.section-head {
	margin-bottom: var(--space-6);
	text-align: center;
}

.section-head__eyebrow {
	color: var(--color-brand);
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.section-head__title {
	color: var(--color-text-primary);
	font-size: var(--font-size-section);
	font-weight: 700;
	margin-top: var(--space-3);
}

.carousel-dots {
	display: flex;
	gap: var(--space-2);
}

.carousel-dots__dot {
	background: rgba(0, 0, 0, 0.2);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 10px;
	padding: 0;
	width: 10px;
}

.carousel-dots__dot.is-active {
	background: var(--color-primary);
}

.services-carousel {
	background: var(--color-bg-page);
	box-sizing: border-box;
	font-family: var(--font-family-base);
	max-width: 100%;
	overflow-x: clip;
	padding-block: var(--space-section);
}

.services-carousel__inner {
	width: 100%;
}

.services-carousel__stage {
	align-items: center;
	display: grid;
	gap: var(--space-3);
	grid-template-columns: auto minmax(0, 1fr) auto;
	min-width: 0;
	position: relative;
	width: 100%;
}

.services-carousel__track {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	min-width: 0;
	overflow: hidden;
	width: 100%;
}

.services-carousel__card {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	position: relative;
}

.services-carousel__card:not(.is-active) {
	opacity: 1;
}

.services-carousel__media {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.services-carousel__media img {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

.services-carousel__box {
	background: #fff;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	box-sizing: border-box;
	margin: -2.5rem auto 0;
	max-width: 100%;
	min-width: 0;
	padding: var(--space-4) var(--space-5);
	position: relative;
	text-align: center;
	transition: transform 220ms ease, box-shadow 220ms ease;
	width: 85%;
}

.services-carousel__card:hover .services-carousel__box {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.services-carousel__card-title {
	font-size: var(--font-size-md);
	font-weight: 700;
	margin: 0;
}

.services-carousel__link {
	color: var(--color-primary);
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-top: var(--space-2);
	text-decoration: none;
	transition: color 180ms ease;
}

.services-carousel__link:hover {
	text-decoration: underline;
}

.services-carousel .carousel-nav {
	display: flex;
	justify-content: center;
	margin-top: var(--space-5);
}

@media (max-width: 1024px) {
	.services-carousel__track {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-carousel__card:nth-child(n + 3) {
		display: none;
	}

	.services-carousel__card.is-active {
		display: block;
	}
}

@media (max-width: 640px) {
	.services-carousel__track {
		grid-template-columns: 1fr;
	}

	.services-carousel__card:not(:first-child) {
		display: none;
	}

	.services-carousel__nav,
	.services-carousel .carousel-nav {
		display: none;
	}

	.services-carousel__box {
		margin-top: -1.5rem;
		padding: var(--space-3) var(--space-4);
		width: 92%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-carousel__box,
	.services-carousel__link {
		transition: none;
	}

	.services-carousel__card:hover .services-carousel__box {
		transform: none;
	}
}

/* Editor: InnerBlocks layout must keep 3-col grid */
.editor-styles-wrapper .wp-block-twork-image-card-carousel .services-carousel__track,
.editor-styles-wrapper .wp-block-twork-image-card-carousel .services-carousel__track.block-editor-block-list__layout,
.block-editor-block-list__block.wp-block-twork-image-card-carousel .services-carousel__track,
.block-editor-block-list__block.wp-block-twork-image-card-carousel .services-carousel__track.block-editor-block-list__layout {
	display: grid !important;
	gap: var(--space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	min-width: 0;
	overflow: hidden;
	width: 100%;
}

.editor-styles-wrapper .wp-block-twork-image-card-carousel .services-carousel__card,
.block-editor-block-list__block.wp-block-twork-image-card-carousel .wp-block-twork-image-card-slide {
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

.editor-styles-wrapper .wp-block-twork-image-card-carousel .carousel-nav {
	pointer-events: none;
}

@media (max-width: 1024px) {
	.editor-styles-wrapper .wp-block-twork-image-card-carousel .services-carousel__track,
	.editor-styles-wrapper .wp-block-twork-image-card-carousel .services-carousel__track.block-editor-block-list__layout,
	.block-editor-block-list__block.wp-block-twork-image-card-carousel .services-carousel__track,
	.block-editor-block-list__block.wp-block-twork-image-card-carousel .services-carousel__track.block-editor-block-list__layout {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.editor-styles-wrapper .wp-block-twork-image-card-carousel .services-carousel__track,
	.editor-styles-wrapper .wp-block-twork-image-card-carousel .services-carousel__track.block-editor-block-list__layout,
	.block-editor-block-list__block.wp-block-twork-image-card-carousel .services-carousel__track,
	.block-editor-block-list__block.wp-block-twork-image-card-carousel .services-carousel__track.block-editor-block-list__layout {
		grid-template-columns: 1fr;
	}
}
