/* Double Eleven Modules – front end + editor canvas.
   Typography inherits from the theme; tweak the variables below to match. */

.de-module {
	--de-max: 1200px;
	--de-gutter: clamp(16px, 4vw, 48px);
	--de-space: clamp(48px, 8vw, 112px);
	--de-fg: inherit;
	--de-muted: rgba(0, 0, 0, 0.6);
	--de-cta-bg: #000;
	--de-cta-fg: #fff;
	box-sizing: border-box;
	color: var(--de-fg);
}
.de-module *,
.de-module *::before,
.de-module *::after { box-sizing: inherit; }

.de-module.de-has-bg { background: var(--de-bg); }
.de-module.de-is-dark,
.de-hero {
	--de-fg: #fff;
	--de-muted: rgba(255, 255, 255, 0.75);
	--de-cta-bg: #fff;
	--de-cta-fg: #000;
}

.de-container {
	max-width: var(--de-max);
	margin: 0 auto;
	padding: 0 var(--de-gutter);
}

/* Full-width page template: modules stack edge to edge */
.de-modules-main > .de-module { margin: 0; }
.de-modules-main > .de-image { margin: clamp(24px, 4vw, 56px) auto; }

/* Text fragment ------------------------------------------------------------- */
.de-text { max-width: 720px; }
.de-align-center .de-text,
.de-hero--center .de-text { margin-left: auto; margin-right: auto; text-align: center; }

.de-text__subtitle {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--de-muted);
}
.de-text__title {
	margin: 0 0 20px;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.15;
	font-weight: 600;
	color: inherit;
}
.de-text__body { margin: 0 0 28px; font-size: 1.0625rem; line-height: 1.7; }
.de-text__body > :last-child { margin-bottom: 0; }
.de-text > :last-child { margin-bottom: 0; }

.de-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: var(--de-cta-bg);
	color: var(--de-cta-fg) !important;
	text-decoration: none !important;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--de-cta-bg);
	transition: background 0.2s, color 0.2s;
}
.de-cta::after { content: "→"; transition: transform 0.2s; }
.de-cta:hover,
.de-cta:focus-visible { background: transparent; color: var(--de-cta-bg) !important; }
.de-cta:hover::after { transform: translateX(4px); }

/* Service tags: the hero CTA style at a smaller size */
.de-tags-wrap { margin: 0 0 28px; }
.de-tags__title { margin: 0 0 12px; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--de-muted); }
.de-tags-wrap .de-tags {
	/* Several tags per row; !important guards against theme list styles */
	display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px;
	list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.de-tags-wrap .de-tags > li {
	display: block !important; flex: 0 0 auto; width: auto !important; float: none !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important; background: none;
}
.de-tags-wrap .de-tags > li::before, .de-tags-wrap .de-tags > li::after { content: none !important; display: none !important; }
.de-tags-wrap .de-cta--sm { white-space: nowrap; }
.de-cta--sm { gap: 6px; padding: 8px 14px; font-size: 0.6875rem; letter-spacing: 0.08em; }
.de-cta--sm::after { font-size: 0.875em; }
.de-cta--static::after { content: none; }
.de-cta--static:hover { background: var(--de-cta-bg); color: var(--de-cta-fg) !important; }
.de-align-center .de-tags-wrap .de-tags { justify-content: center; }

/* Image + width options -------------------------------------------------- */
.de-img { display: block; width: 100%; height: auto; }
.de-media { margin: 0 auto; }
.de-w-100 { width: 100%; }
.de-w-75 { width: 75%; }
.de-w-50 { width: 50%; }
.de-w-25 { width: 25%; }

/* 2) Image module */
.de-image { margin: var(--de-space) auto; padding: 0 var(--de-gutter); max-width: calc(var(--de-max) + 2 * var(--de-gutter)); }
.de-image.de-w-100.alignfull { max-width: none; padding: 0; }
.de-image > img, .de-image > a { display: block; }
.de-image.de-w-75 > *, .de-image.de-w-50 > *, .de-image.de-w-25 > * { width: 100%; }
.de-image.de-w-75, .de-image.de-w-50, .de-image.de-w-25 { width: auto; }
.de-image.de-w-75 > img, .de-image.de-w-75 > a { width: 75%; }
.de-image.de-w-50 > img, .de-image.de-w-50 > a { width: 50%; }
.de-image.de-w-25 > img, .de-image.de-w-25 > a { width: 25%; }
.de-image.de-pos-center > img, .de-image.de-pos-center > a { margin-left: auto; margin-right: auto; }
.de-image.de-pos-right > img, .de-image.de-pos-right > a { margin-left: auto; }
.de-image__caption { margin-top: 12px; font-size: 0.875rem; color: var(--de-muted); }
.de-pos-center .de-image__caption { text-align: center; }
.de-pos-right .de-image__caption { text-align: right; }

/* 3) Text module */
.de-textblock { padding: var(--de-space) 0; }

/* 1) Hero slider --------------------------------------------------------- */
.de-hero {
	position: relative;
	overflow: hidden;
	background: #111;
	color: #fff;
}
.de-hero--full { height: 100vh; height: 100svh; }
.de-hero--large { height: clamp(460px, 75vh, 860px); }
.de-hero--medium { height: clamp(360px, 55vh, 620px); }
.de-hero__track { position: relative; height: 100%; }
.de-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s;
}
.de-hero__slide.is-active { opacity: 1; visibility: visible; }
.de-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.de-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, calc(var(--de-overlay, 0.3) + 0.25)), rgba(0, 0, 0, var(--de-overlay, 0.3)) 60%);
}
.de-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--de-max);
	margin: 0 auto;
	padding: 0 var(--de-gutter) clamp(72px, 10vh, 120px);
}
.de-hero--center .de-hero__slide { align-items: center; }
.de-hero .de-text__title { font-size: clamp(2.25rem, 5.5vw, 4.5rem); line-height: 1.05; }

.de-hero__arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
}
.de-hero__arrow:hover { background: rgba(255, 255, 255, 0.15); }
.de-hero__prev { left: var(--de-gutter); }
.de-hero__next { right: var(--de-gutter); }
.de-hero__prev::before { content: "←"; }
.de-hero__next::before { content: "→"; }
.de-hero__dots {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 32px;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.de-hero__dot {
	width: 28px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}
.de-hero__dot.is-active { background: #fff; }

/* 4) Two columns --------------------------------------------------------- */
.de-two-cols { padding: var(--de-space) 0; }
.de-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 96px);
}
.de-ratio-60-40 .de-cols { grid-template-columns: 3fr 2fr; }
.de-ratio-40-60 .de-cols { grid-template-columns: 2fr 3fr; }
.de-valign-top .de-cols { align-items: start; }
.de-valign-center .de-cols { align-items: center; }
.de-valign-bottom .de-cols { align-items: end; }

/* 5) Checkerboard -------------------------------------------------------- */
.de-checker__row { display: grid; grid-template-columns: 1fr 1fr; }
.de-checker .de-cell { min-height: clamp(320px, 42vw, 620px); display: flex; align-items: center; justify-content: center; }
.de-checker .de-cell--text { padding: clamp(40px, 7vw, 112px) var(--de-gutter); }
.de-checker .de-cell--text .de-text { width: 100%; max-width: 520px; }
.de-checker .de-cell--image { overflow: hidden; }
.de-checker .de-cell--image .de-w-100 { align-self: stretch; }
.de-checker .de-cell--image .de-w-100 .de-img { height: 100%; object-fit: cover; }
.de-checker .de-cell--image .de-media:not(.de-w-100) { padding: 40px 0; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 782px) {
	.de-cols,
	.de-ratio-60-40 .de-cols,
	.de-ratio-40-60 .de-cols,
	.de-checker__row { grid-template-columns: 1fr; }
	/* Image first on mobile so each checkerboard pair reads image → text */
	.de-checker .de-cell--image { order: -1; }
	.de-checker .de-cell { min-height: 0; }
	.de-checker .de-cell--image .de-w-100 .de-img { height: auto; aspect-ratio: 4 / 3; }
	.de-w-75, .de-w-50 { width: 100%; }
	.de-w-25 { width: 50%; }
	.de-image.de-w-75 > img, .de-image.de-w-75 > a,
	.de-image.de-w-50 > img, .de-image.de-w-50 > a { width: 100%; }
	.de-image.de-w-25 > img, .de-image.de-w-25 > a { width: 50%; }
	.de-hero__arrow { display: none; }
}


/* Service-page blocks ---------------------------------------------------- */
.de-features, .de-steps, .de-services { padding: var(--de-space) 0; }
.de-section-head { margin-bottom: clamp(32px, 5vw, 64px); }

/* 6) Feature grid */
.de-features__grid,
.de-steps__list,
.de-services__list { list-style: none; margin: 0; padding: 0; }
.de-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
}
.de-cols-2 .de-features__grid { grid-template-columns: repeat(2, 1fr); }
.de-cols-4 .de-features__grid { grid-template-columns: repeat(4, 1fr); }
.de-feature { position: relative; padding-top: 20px; border-top: 1px solid currentColor; border-top-color: rgba(128, 128, 128, 0.35); }
.de-feature__media { margin-bottom: 20px; }
.de-feature__num { display: block; margin-bottom: 8px; font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--de-muted); }
.de-feature__title { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.3; font-weight: 600; color: inherit; }
.de-feature__body { font-size: 1rem; line-height: 1.65; }
.de-feature__body p, .de-step__body p { margin: 0 0 0.8em; }
.de-feature__body > :last-child, .de-step__body > :last-child { margin-bottom: 0; }

/* 7) Process steps */
.de-steps__list {
	display: grid;
	grid-template-columns: repeat(var(--de-steps, 4), 1fr);
	gap: clamp(24px, 3vw, 40px);
	counter-reset: none;
}
.de-step { position: relative; padding-top: 28px; }
.de-step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: calc(-1 * clamp(24px, 3vw, 40px));
	height: 2px;
	background: currentColor;
	opacity: 0.2;
}
.de-step:last-child::before { right: 0; }
.de-step::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: currentColor;
}
.de-step__num { display: block; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; font-weight: 300; margin-bottom: 16px; }
.de-step__title { margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; color: inherit; }
.de-step__body { font-size: 1rem; line-height: 1.65; color: var(--de-muted); }

/* 8) Services list */
.de-service__link { display: flex; align-items: baseline; gap: 24px; color: inherit !important; text-decoration: none !important; }
.de-services--list .de-service { border-top: 1px solid rgba(128, 128, 128, 0.35); }
.de-services--list .de-service:last-child { border-bottom: 1px solid rgba(128, 128, 128, 0.35); }
.de-services--list .de-service__link { flex-wrap: wrap; padding: clamp(20px, 3vw, 32px) 0; transition: padding 0.25s; }
.de-services--list .de-service__link:hover { padding-left: 12px; }
.de-services--list .de-service__media { display: none; }
.de-service__num { flex: 0 0 40px; font-size: 0.875rem; letter-spacing: 0.12em; color: var(--de-muted); }
.de-service__title { flex: 1; font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.2; }
.de-services--list .de-service__title::after { content: " →"; opacity: 0; transition: opacity 0.2s; }
.de-services--list .de-service__link:hover .de-service__title::after { opacity: 1; }
.de-service__excerpt { flex-basis: 100%; margin: 0; padding-left: 64px; color: var(--de-muted); }
.de-services--grid .de-services__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.de-services--grid .de-service__link { flex-wrap: wrap; gap: 8px 16px; }
.de-services--grid .de-service__media { flex-basis: 100%; overflow: hidden; margin-bottom: 12px; }
.de-services--grid .de-service__media .de-img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s; }
.de-services--grid .de-service__link:hover .de-img { transform: scale(1.03); }
.de-services--grid .de-service__title { font-size: 1.25rem; }
.de-services--grid .de-service__excerpt { padding-left: 0; }

@media (max-width: 960px) {
	.de-cols-3 .de-features__grid, .de-cols-4 .de-features__grid, .de-services--grid .de-services__list { grid-template-columns: repeat(2, 1fr); }
	.de-steps__list { grid-template-columns: repeat(2, 1fr); }
	.de-step::before { right: 0; }
}
@media (max-width: 600px) {
	.de-features__grid, .de-cols-2 .de-features__grid, .de-cols-3 .de-features__grid, .de-cols-4 .de-features__grid,
	.de-steps__list, .de-services--grid .de-services__list { grid-template-columns: 1fr; }
	.de-service__excerpt { padding-left: 0; }
}

/* 9) Related projects */
.de-projects { padding: var(--de-space) 0; }
.de-projects__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.de-projects.de-cols-3 .de-projects__grid { grid-template-columns: repeat(3, 1fr); }
.de-projects.de-cols-2 .de-projects__grid { grid-template-columns: repeat(2, 1fr); }
.de-project__link { display: grid; gap: 6px; color: inherit !important; text-decoration: none !important; }
.de-project__media { display: block; overflow: hidden; margin-bottom: 8px; aspect-ratio: 4 / 3; background: rgba(128, 128, 128, 0.15); }
.de-project__media .de-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.de-project__link:hover .de-img { transform: scale(1.04); }
.de-project__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.de-project__label { font-size: 0.8125rem; color: var(--de-muted); }
.de-projects__more { margin-top: clamp(32px, 4vw, 56px); text-align: center; }
@media (max-width: 960px) { .de-projects .de-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .de-projects .de-projects__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.de-hero__slide, .de-cta, .de-cta::after, .de-service__link, .de-service .de-img, .de-project .de-img { transition: none; }
}