/* =============================================================================
   TES AGENCY LANDING — V1 STYLES
   The Execution Studio · B2B Narrative Landing Page
   =============================================================================

   TABLE OF CONTENTS
   1.  Custom Properties (Design Tokens)
   2.  Blank-Page Body Reset
   3.  Landing Wrapper
   4.  Scroll Container
   5.  Slides — Base
   6.  Slide Themes / Backgrounds
   7.  Copy Column
   8.  Visual Column + Image Plates
   9.  Typography — Labels
   10. Typography — Headlines
   11. Typography — Supporting Copy
   12. Scroll Prompt
   13. Badge (Delivery Risk)
   14. Scene 1A — Overlay Labels
   15. Scene 1B — Output Labels
   16. Scene 2B — Execution Steps
   17. Scene 3B — Role Labels
   18. TES Mark
   19. Progress Indicator
   20. Floating CTA
   21. Content Animation States
   22. CTA Overlay
   23. CTA Buttons
   24. CTA Overlay Dismiss
   25. Reduced-Motion Fallback
   26. Responsive — Tablet (768–1024)
   27. Responsive — Mobile (≤767)
   28. Responsive — Small Mobile (≤380)
   ============================================================================= */


/* =============================================================================
   1. CUSTOM PROPERTIES
   ============================================================================= */

:root {
	--tes-charcoal:   #111317;
	--tes-slate:      #4B5563;
	--tes-stone:      #A1A7AE;
	--tes-bone:       #F2EFEA;
	--tes-warm-bone:  #f6ebe1;
	--tes-vermilion:  #FF3B1F;
	--tes-white:      #FFFFFF;

	--tes-font-sans:  Inter, Arial, Helvetica, sans-serif;
	--tes-font-mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

	--tes-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
	--tes-dur-reveal: 0.6s;
	--tes-dur-overlay: 0.72s;
}


/* =============================================================================
   2. BLANK-PAGE BODY RESET
   Only applies when the blank page template is active.
   ============================================================================= */

.tes-blank-page,
.tes-blank-page body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background: var(--tes-warm-bone);
}


/* =============================================================================
   3. LANDING WRAPPER
   Takes over the full viewport. Works whether inside blank template or theme.
   ============================================================================= */

.tes-landing {
	position: fixed;
	inset: 0;
	z-index: 1000;
	font-family: var(--tes-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}


/* =============================================================================
   4. SCROLL CONTAINER
   Owns vertical scrolling. Scroll-snap keeps one scene visible at a time.
   ============================================================================= */

.tes-scroll-container {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tes-scroll-container::-webkit-scrollbar {
	display: none;
}

/* Terminal snap zone — user scrolls here to trigger the CTA overlay */
.tes-cta-trigger-zone {
	height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	flex-shrink: 0;
	pointer-events: none;
}


/* =============================================================================
   5. SLIDES — BASE
   ============================================================================= */

.tes-slide {
	position: relative;
	min-height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

/* Default grid: copy (left) | visual (right) */
.tes-slide__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	min-height: 100vh;
	align-items: center;
}

/* Scene 2B: full-width, two rows (copy top / steps bottom) */
.tes-slide__inner--2b {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	padding: clamp(64px, 8vh, 100px) clamp(40px, 6vw, 88px) clamp(40px, 6vh, 72px);
	gap: clamp(32px, 5vh, 56px);
	align-content: center;
}


/* =============================================================================
   6. SLIDE THEMES / BACKGROUNDS
   ============================================================================= */

.tes-slide[data-theme="warm"] { background-color: var(--tes-warm-bone); }
.tes-slide[data-theme="light"] { background-color: var(--tes-bone); }
.tes-slide[data-theme="slate"] { background-color: #EAEBEC; }


/* =============================================================================
   7. COPY COLUMN
   ============================================================================= */

.tes-slide__copy {
	padding: clamp(48px, 7vh, 88px) clamp(160px, 4vw, 64px);
	padding-right: clamp(24px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(16px, 2.5vh, 24px);
}

/* Scene 2B copy sits above the steps, no separate visual column */
.tes-slide__copy--2b {
	padding: 0;
	max-width: 720px;
}


/* =============================================================================
   8. VISUAL COLUMN + IMAGE PLATES
   ============================================================================= */

.tes-slide__visual {
	position: relative;
	height: 100%;
	min-height: 100vh;
	overflow: hidden;
}

/* Per-scene placeholder backgrounds — visible before images load */
.tes-slide__visual--1a { background-color: #f6ebe1; }
.tes-slide__visual--1b { background-color: #f6ebe1; }
.tes-slide__visual--2a { background-color: #D8DCE1; }
.tes-slide__visual--3a { background-color: #CDD0D4; }
.tes-slide__visual--3b { background-color: #C5C9CE; }

.tes-image-plate {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

.tes-image-plate__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	/* Subtle scale-in when slide activates */
	transform: scale(1.04);
	transition: transform 1.4s var(--tes-ease-out);
}

.tes-slide.is-active .tes-image-plate__img {
	transform: scale(1);
}


/* =============================================================================
   9. TYPOGRAPHY — LABELS
   ============================================================================= */

.tes-label {
	font-family: var(--tes-font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tes-stone);
	margin: 0;
	line-height: 1.5;
}

.tes-label--light { color: rgba(255, 255, 255, 0.55); }


/* =============================================================================
   10. TYPOGRAPHY — HEADLINES
   ============================================================================= */

.tes-headline {
	font-family: var(--tes-font-sans);
	font-size: clamp(36px, 4.4vw, 62px);
	font-weight: 700;
	line-height: 1.07;
	letter-spacing: -0.022em;
	color: var(--tes-charcoal);
	margin: 0;
}

.tes-headline--md {
	font-size: clamp(28px, 3.4vw, 50px);
}

/* Vermilion accent dot — used on final period of each headline */
.tes-dot {
	color: var(--tes-vermilion);
}

.tes-dot--white {
	color: var(--tes-white);
}


/* =============================================================================
   11. TYPOGRAPHY — SUPPORTING COPY
   ============================================================================= */

.tes-supporting {
	font-family: var(--tes-font-sans);
	font-size: clamp(15px, 1.35vw, 18px);
	font-weight: 400;
	line-height: 1.65;
	color: var(--tes-slate);
	margin: 0;
	max-width: 420px;
}

/* Scene 2B "Clarify. Build. Stabilize. Ship." */
.tes-supporting--strong {
	font-size: clamp(16px, 1.55vw, 20px);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tes-charcoal);
	max-width: none;
}


/* =============================================================================
   12. SCROLL PROMPT
   ============================================================================= */

.tes-scroll-prompt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tes-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tes-stone);
	margin: 4px 0 0;
}


/* =============================================================================
   13. BADGE (DELIVERY RISK)
   ============================================================================= */

.tes-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tes-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tes-charcoal);
	background: rgba(255, 59, 31, 0.07);
	border: 1px solid rgba(255, 59, 31, 0.22);
	border-radius: 2px;
	padding: 7px 12px;
	width: fit-content;
}

.tes-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tes-vermilion);
	flex-shrink: 0;
	animation: tes-pulse 2.2s ease-in-out infinite;
}

@keyframes tes-pulse {
	0%, 100% { opacity: 1;   transform: scale(1);    }
	50%       { opacity: 0.5; transform: scale(0.8); }
}


/* =============================================================================
   14. SCENE 1A — OVERLAY LABELS (CREATIVE APPROVAL / THE GAP / DELIVERED PRODUCT)
   ============================================================================= */

.tes-overlay-labels--1a {
	position: absolute;
	bottom: clamp(20px, 4vh, 44px);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0 20px;
	pointer-events: none;
}

.tes-overlay-label {
	font-family: var(--tes-font-mono);
	font-size: 8.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tes-charcoal);
	background: rgba(247, 244, 239, 0.88);
	border: 1px solid rgba(17, 19, 23, 0.14);
	padding: 6px 9px;
	text-align: center;
	line-height: 1.5;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 2px;
	white-space: nowrap;
}

/* "THE GAP" gets vermilion treatment */
.tes-overlay-label--gap {
	color: var(--tes-vermilion);
	border-color: rgba(255, 59, 31, 0.28);
	background: rgba(255, 59, 31, 0.05);
}

.tes-overlay-arrow {
	flex-shrink: 0;
	opacity: 0.35;
}


/* =============================================================================
   15. SCENE 1B — OUTPUT LABELS (CLARITY / STRUCTURE / EXECUTION / DELIVERY)
   ============================================================================= */

.tes-output-labels {
	position: absolute;
	top: 50%;
	right: clamp(16px, 2.5vw, 36px);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}

.tes-output-label {
	font-family: var(--tes-font-mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tes-warm-bone);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(247, 244, 239, 0.2);
	padding: 5px 10px;
	border-radius: 2px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	white-space: nowrap;
}


/* =============================================================================
   16. SCENE 2B — EXECUTION STEPS
   ============================================================================= */

.tes-execution-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2.5vw, 28px);
}

.tes-step {
	border-top: 1.5px solid var(--tes-charcoal);
	padding-top: clamp(16px, 2.5vh, 24px);
	/* Content reveal — each step staggers in */
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity   0.55s var(--tes-ease-out),
		transform 0.55s var(--tes-ease-out);
}

.tes-step[data-step="1"] { transition-delay: 0.08s; }
.tes-step[data-step="2"] { transition-delay: 0.22s; }
.tes-step[data-step="3"] { transition-delay: 0.36s; }
.tes-step[data-step="4"] { transition-delay: 0.50s; }

.tes-slide--2b.is-active .tes-step {
	opacity: 1;
	transform: translateY(0);
}

.tes-step__number {
	font-family: var(--tes-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--tes-vermilion);
	display: block;
	margin-bottom: 10px;
}

.tes-step__title {
	font-family: var(--tes-font-sans);
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 700;
	color: var(--tes-charcoal);
	letter-spacing: -0.015em;
	margin: 0 0 8px;
}

.tes-step__desc {
	font-family: var(--tes-font-sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--tes-slate);
	margin: 0;
}


/* =============================================================================
   17. SCENE 3B — ROLE LABELS
   ============================================================================= */

.tes-role-labels {
	position: absolute;
	bottom: clamp(20px, 4vh, 44px);
	left: clamp(16px, 2.5vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 7px;
	pointer-events: none;
	margin: 0;
}

.tes-role-label {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.tes-role-label dt,
.tes-role-label dd {
	font-family: var(--tes-font-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
	line-height: 1.6;
}

.tes-role-label dt {
	color: rgba(255, 255, 255, 0.45);
	min-width: 110px;
	flex-shrink: 0;
}

.tes-role-label dd {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 500;
}


/* =============================================================================
   18. TES MARK  (top-left, persistent)
   ============================================================================= */

.tes-mark {
	position: fixed;
	top: clamp(18px, 3vh, 28px);
	left: clamp(18px, 2.5vw, 36px);
	z-index: 200;
	pointer-events: none;
}

.tes-mark__text {
	font-family: var(--tes-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--tes-charcoal);
	opacity: 0.5;
}


/* =============================================================================
   19. PROGRESS INDICATOR  (left side, centered)
   ============================================================================= */

.tes-progress {
	position: fixed;
	left: clamp(18px, 2.5vw, 36px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 200;
}

.tes-progress__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.tes-progress__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--tes-stone);
	cursor: pointer;
	padding: 0;
	transition:
		background-color 0.25s ease,
		border-color     0.25s ease,
		transform        0.25s ease;
}

.tes-progress__dot:hover,
.tes-progress__dot:focus-visible {
	border-color: var(--tes-charcoal);
	transform: scale(1.4);
	outline: none;
}

.tes-progress__dot.is-active {
	background: var(--tes-charcoal);
	border-color: var(--tes-charcoal);
	transform: scale(1.25);
}


/* =============================================================================
   20. FLOATING CTA  (appears after Scene 1B)
   ============================================================================= */

.tes-floating-cta {
	position: fixed;
	bottom: clamp(20px, 4vh, 36px);
	right: clamp(20px, 3vw, 44px);
	z-index: 200;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition:
		opacity   0.4s ease,
		transform 0.4s ease;
}

.tes-floating-cta.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.tes-floating-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tes-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tes-charcoal);
	text-decoration: none;
	background: var(--tes-white);
	border: 1.5px solid var(--tes-charcoal);
	padding: 11px 18px;
	border-radius: 2px;
	box-shadow: 0 4px 18px rgba(17, 19, 23, 0.11);
	transition:
		background-color 0.22s ease,
		color            0.22s ease,
		transform        0.22s ease,
		box-shadow       0.22s ease;
}

.tes-floating-cta__btn:hover,
.tes-floating-cta__btn:focus-visible {
	background: var(--tes-charcoal);
	color: var(--tes-white);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(17, 19, 23, 0.2);
	outline: none;
}


/* =============================================================================
   21. CONTENT ANIMATION STATES
   Slide copy children reveal on .is-active. Previously seen slides
   keep .was-active so content doesn't re-hide when scrolling back.
   ============================================================================= */

.tes-slide__copy > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity   var(--tes-dur-reveal) var(--tes-ease-out),
		transform var(--tes-dur-reveal) var(--tes-ease-out);
}

.tes-slide__copy > *:nth-child(1) { transition-delay: 0.04s; }
.tes-slide__copy > *:nth-child(2) { transition-delay: 0.14s; }
.tes-slide__copy > *:nth-child(3) { transition-delay: 0.24s; }
.tes-slide__copy > *:nth-child(4) { transition-delay: 0.34s; }
.tes-slide__copy > *:nth-child(5) { transition-delay: 0.44s; }

.tes-slide.is-active .tes-slide__copy > *,
.tes-slide.was-active .tes-slide__copy > * {
	opacity: 1;
	transform: translateY(0);
}


/* =============================================================================
   21B. DIRECTIONAL ENTRANCE ANIMATIONS
   Applied programmatically to .tes-slide__inner before the scroll repositions.
   Within-scene (A → B or B → A): horizontal slide.
   Scene change (e.g. 1B → 2A): vertical slide, bottom-up for forward.
   Durations are intentionally visible — they are part of the experience.
   ============================================================================= */

@keyframes tes-enter-right {
	from { opacity: 0; transform: translateX(88px); }
	to   { opacity: 1; transform: translateX(0);    }
}

@keyframes tes-enter-left {
	from { opacity: 0; transform: translateX(-88px); }
	to   { opacity: 1; transform: translateX(0);     }
}

@keyframes tes-enter-bottom {
	from { opacity: 0; transform: translateY(72px); }
	to   { opacity: 1; transform: translateY(0);    }
}

@keyframes tes-enter-top {
	from { opacity: 0; transform: translateY(-72px); }
	to   { opacity: 1; transform: translateY(0);     }
}

/* Within-scene: 700 ms — quick horizontal snap between A and B slides */
.tes-slide__inner.tes-entering-right {
	animation: tes-enter-right 0.7s var(--tes-ease-out) both;
}

.tes-slide__inner.tes-entering-left {
	animation: tes-enter-left 0.7s var(--tes-ease-out) both;
}

/* Scene change: 850 ms — longer vertical move to mark a bigger transition */
.tes-slide__inner.tes-entering-bottom {
	animation: tes-enter-bottom 0.85s var(--tes-ease-out) both;
}

.tes-slide__inner.tes-entering-top {
	animation: tes-enter-top 0.85s var(--tes-ease-out) both;
}


/* =============================================================================
   22. CTA OVERLAY  (slides up over Scene 3B)
   ============================================================================= */

.tes-cta-overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 82vh;
	background: var(--tes-vermilion);
	z-index: 300;
	transform: translateY(100%);
	transition: transform var(--tes-dur-overlay) var(--tes-ease-out);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -12px 60px rgba(255, 59, 31, 0.28);
}

.tes-cta-overlay.is-visible {
	transform: translateY(0);
}

.tes-cta-overlay__inner {
	width: 100%;
	max-width: 820px;
	padding: clamp(44px, 6vh, 80px) clamp(32px, 5vw, 72px);
}

.tes-cta-overlay__content {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 3vh, 28px);
}

/* Staggered reveal of overlay content as it slides in */
.tes-cta-overlay__content > * {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity   0.5s var(--tes-ease-out),
		transform 0.5s var(--tes-ease-out);
}

.tes-cta-overlay.is-visible .tes-cta-overlay__content > *:nth-child(1) { transition-delay: 0.28s; }
.tes-cta-overlay.is-visible .tes-cta-overlay__content > *:nth-child(2) { transition-delay: 0.38s; }
.tes-cta-overlay.is-visible .tes-cta-overlay__content > *:nth-child(3) { transition-delay: 0.48s; }
.tes-cta-overlay.is-visible .tes-cta-overlay__content > *:nth-child(4) { transition-delay: 0.58s; }
.tes-cta-overlay.is-visible .tes-cta-overlay__content > *:nth-child(5) { transition-delay: 0.66s; }

.tes-cta-overlay.is-visible .tes-cta-overlay__content > * {
	opacity: 1;
	transform: translateY(0);
}

.tes-cta-overlay__headline {
	font-family: var(--tes-font-sans);
	font-size: clamp(36px, 5vw, 68px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--tes-white);
	margin: 0;
}

.tes-cta-overlay__body {
	font-family: var(--tes-font-sans);
	font-size: clamp(16px, 1.55vw, 20px);
	line-height: 1.58;
	color: rgba(255, 255, 255, 0.84);
	margin: 0;
	max-width: 520px;
}

.tes-cta-overlay__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 4px;
}

.tes-cta-overlay__footnote {
	font-family: var(--tes-font-mono);
	font-size: 10px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.44);
	margin: 0;
}


/* =============================================================================
   23. CTA BUTTONS
   ============================================================================= */

.tes-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tes-font-sans);
	font-size: clamp(14px, 1.05vw, 16px);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	padding: 15px 28px;
	border-radius: 3px;
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		background-color 0.22s ease,
		border-color     0.22s ease,
		color            0.22s ease,
		transform        0.22s ease,
		box-shadow       0.22s ease;
}

.tes-btn--primary {
	background: var(--tes-charcoal);
	color: var(--tes-white);
	border-color: var(--tes-charcoal);
}

.tes-btn--primary:hover,
.tes-btn--primary:focus-visible {
	background: #1e2430;
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(17, 19, 23, 0.28);
	outline: none;
}

.tes-btn--secondary {
	background: transparent;
	color: var(--tes-white);
	border-color: rgba(255, 255, 255, 0.45);
}

.tes-btn--secondary:hover,
.tes-btn--secondary:focus-visible {
	border-color: var(--tes-white);
	background: rgba(255, 255, 255, 0.1);
	outline: none;
}


/* =============================================================================
   24. CTA OVERLAY DISMISS BUTTON
   ============================================================================= */

.tes-cta-overlay__dismiss {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--tes-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.tes-cta-overlay__dismiss:hover,
.tes-cta-overlay__dismiss:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	outline: none;
}


/* =============================================================================
   25. REDUCED-MOTION FALLBACK
   When prefers-reduced-motion is set: disable scroll-snap, instant reveals.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.tes-scroll-container {
		scroll-snap-type: none;
	}

	.tes-slide__copy > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tes-step {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tes-image-plate__img {
		transform: none;
		transition: none;
	}

	.tes-cta-overlay,
	.tes-floating-cta {
		transition: none;
	}

	.tes-cta-overlay__content > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tes-badge__dot {
		animation: none;
	}

	/* Disable directional entrance animations */
	.tes-slide__inner.tes-entering-right,
	.tes-slide__inner.tes-entering-left,
	.tes-slide__inner.tes-entering-bottom,
	.tes-slide__inner.tes-entering-top {
		animation: none;
	}
}


/* =============================================================================
   26. RESPONSIVE — TABLET  (768–1024px)
   ============================================================================= */

@media (max-width: 1024px) and (min-width: 768px) {
	.tes-slide__inner {
		grid-template-columns: 1fr 1fr;
	}

	.tes-slide__copy {
		padding: 48px 24px 48px 40px;
	}

	.tes-execution-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.tes-slide__inner--2b {
		padding: 56px 40px 48px;
		gap: 32px;
	}
}


/* =============================================================================
   27. RESPONSIVE — MOBILE  (≤767px)
   ============================================================================= */

@media (max-width: 767px) {

	/* Slide layout: stack vertically */
	.tes-slide__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		align-items: start;
		min-height: 100vh;
	}

	.tes-slide__copy {
		padding: 72px 24px 20px;
		gap: 14px;
		order: 1;
	}

	.tes-slide__visual {
		order: 2;
		min-height: 42vw;
		height: 42vw;
	}

	/* Scene 2B */
	.tes-slide__inner--2b {
		padding: 72px 24px 32px;
		gap: 24px;
	}

	.tes-slide__copy--2b {
		max-width: 100%;
	}

	.tes-execution-steps {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	/* Progress — move to bottom row, horizontal */
	.tes-progress {
		left: auto;
		right: 12px;
		top: auto;
		bottom: 72px;
		transform: none;
	}

	.tes-progress__list {
		flex-direction: row;
		gap: 10px;
	}

	/* Floating CTA — bottom-center on mobile */
	.tes-floating-cta {
		right: 50%;
		bottom: 18px;
		transform: translateX(50%);
	}

	.tes-floating-cta.is-visible {
		transform: translateX(50%);
		opacity: 1;
	}

	/* CTA overlay — near full-screen */
	.tes-cta-overlay {
		height: 94vh;
		border-radius: 10px 10px 0 0;
	}

	.tes-cta-overlay__inner {
		padding: 48px 24px 36px;
	}

	.tes-cta-overlay__actions {
		flex-direction: column;
	}

	/* Overlay labels — wrap on small visual */
	.tes-overlay-labels--1a {
		flex-wrap: wrap;
		gap: 6px;
		justify-content: center;
	}

	.tes-overlay-arrow {
		display: none;
	}

	/* Output labels — inline, wrapping row */
	.tes-output-labels {
		position: static;
		transform: none;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10px;
		gap: 6px;
	}

	/* Role labels — static, inside visual zone */
	.tes-role-labels {
		position: static;
		padding: 12px;
		gap: 6px;
	}

	.tes-mark {
		top: 14px;
		left: 14px;
	}
}


/* =============================================================================
   28. RESPONSIVE — SMALL MOBILE  (≤380px)
   ============================================================================= */

@media (max-width: 380px) {
	.tes-execution-steps {
		grid-template-columns: 1fr;
	}

	.tes-headline {
		font-size: 32px;
	}
}