/* ----------------------------------------------------------------------------------------
* Ventum Software - Education page layer
* Loaded after custom.css, ventum.css and ventum-services.css. Reuses their tokens and
* components (capability cards, sidebar, AI stack) and only adds what this page needs.
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Hero + solution areas
02. Projects
03. Project modal
04. Experience
05. Capabilities
06. Perspective
07. AI
08. Responsive
09. Reduced motion
-------------------------------------------------------------------------------------- */

/************************************/
/***  01. Hero + solution areas   ***/
/************************************/

.vt-ed-hero .section-title h1.vt-hero-title{
	font-size: 60px;
}

.vt-ed-crumbs ol{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-color);
}

.vt-ed-crumbs li + li::before{
	content: '/';
	margin-right: 8px;
	color: var(--divider-color);
}

.vt-ed-crumbs a{
	color: var(--text-color);
	transition: color 0.3s;
}

.vt-ed-crumbs a:hover,
.vt-ed-crumbs [aria-current]{
	color: var(--accent-color);
}

.vt-ed-scene{
	position: relative;
	width: 100%;
	max-width: 600px;
	margin-left: auto;
	padding: 30px 0;
}

.vt-ed-scene-glow{
	position: absolute;
	inset: 0 6%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(18, 131, 255, 0.22), rgba(18, 131, 255, 0));
	filter: blur(10px);
}

.vt-ed-screen{
	position: relative;
	border-radius: 24px;
	background: var(--white-color);
	border: 1px solid rgba(225, 228, 235, 0.8);
	box-shadow: 0 40px 70px -40px rgba(21, 22, 27, 0.35);
	overflow: hidden;
}

.vt-ed-screen-bar{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--divider-color);
	font-size: 12px;
	font-weight: 700;
	color: var(--text-color);
}

.vt-ed-screen-bar i{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--divider-color);
}

.vt-ed-screen-bar span{
	margin-left: 8px;
}

.vt-ed-app{
	display: grid;
	grid-template-columns: 200px 1fr;
}

/* Solution areas: the active one carries a small timer bar while the list cycles */
.vt-ed-areas{
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 14px 10px;
	border-right: 1px solid var(--divider-color);
	background: var(--secondary-color);
}

.vt-ed-areas li{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-color);
	cursor: pointer;
	overflow: hidden;
	transition: background-color 0.4s, color 0.4s;
}

.vt-ed-areas li i{
	flex: 0 0 16px;
	text-align: center;
	font-size: 13px;
}

.vt-ed-areas li.is-active{
	background: var(--white-color);
	color: var(--accent-color);
	box-shadow: 0 8px 18px -12px rgba(0, 98, 221, 0.45);
}

.vt-ed-areas li::after{
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 3px;
	height: 2px;
	border-radius: 1px;
	background: var(--accent-color);
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
}

.vt-ed-scene.is-cycling .vt-ed-areas li.is-active::after{
	opacity: 0.35;
	animation: vt-ed-timer var(--vt-ed-interval, 3200ms) linear forwards;
}

@keyframes vt-ed-timer{
	to{ transform: scaleX(1); }
}

/* Panels share one grid cell, so the screen keeps the height of the tallest one */
.vt-ed-panels{
	display: grid;
	align-content: start;
	padding: 18px;
	min-width: 0;
}

.vt-ed-panel{
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s;
	font-size: 12px;
	color: var(--primary-color);
}

.vt-ed-panel.is-active{
	opacity: 1;
	visibility: visible;
	transform: none;
}

.vt-ed-panel-head{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.vt-ed-panel-head b{
	font-size: 14px;
	line-height: 1.25;
}

.vt-ed-panel-head em{
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 10px;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--accent-color);
	background: var(--accent-soft);
}

/* Chat (AI panel) */
.vt-ed-msg{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.vt-ed-msg p{
	margin: 0;
	padding: 10px 12px;
	border-radius: 14px 4px 14px 14px;
	background: var(--accent-color);
	font-size: 12px;
	line-height: 1.4;
	color: var(--white-color);
}

.vt-ed-msg-reply{
	justify-content: flex-end;
}

.vt-ed-avatar{
	display: grid;
	place-items: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 12px;
	color: var(--white-color);
	background: var(--dark-surface);
}

.vt-ed-ai-answer{
	flex: 1;
	padding: 12px;
	border-radius: 4px 14px 14px 14px;
	background: var(--secondary-color);
}

.vt-ed-ai-answer span,
.vt-ed-doc span{
	display: block;
	width: var(--w);
	height: 7px;
	margin-bottom: 8px;
	border-radius: 4px;
	background: var(--divider-color);
	transform-origin: left;
	transition: transform 0.7s var(--ease-out);
}

.vt-ed-ai-answer span:last-child,
.vt-ed-doc span:last-child{
	margin-bottom: 0;
}

.vt-ed-ai-answer span:nth-child(2){ transition-delay: 0.15s; }
.vt-ed-ai-answer span:nth-child(3){ transition-delay: 0.3s; }

.vt-ed-panel:not(.is-active) .vt-ed-ai-answer span,
.vt-ed-panel:not(.is-active) .vt-ed-doc span{
	transform: scaleX(0);
}

.vt-ed-hint{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--accent-soft);
	font-size: 12px;
	line-height: 1.35;
	color: var(--primary-color);
}

.vt-ed-hint i{
	color: var(--accent-color);
}

/* Rows (curriculum, documents, LMS) */
.vt-ed-rows{
	list-style: none;
	margin: 0;
	padding: 0;
}

.vt-ed-rows li{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: 12px;
	border: 1px solid var(--divider-color);
}

.vt-ed-rows li:last-child{
	margin-bottom: 0;
}

.vt-ed-rows li > i{
	font-size: 14px;
	color: var(--accent-color);
}

.vt-ed-rows li span{
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vt-ed-rows li em{
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-color);
}

.vt-ed-rows li.is-pending > i{
	color: var(--text-color);
}

.vt-ed-sync li > i{
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1FB26B;
	animation: vt-sync 1.8s ease-out infinite;
}

.vt-ed-sync li em{
	color: #1E8A4C;
}

/* Document being generated: lines draw in, a soft highlight sweeps across */
.vt-ed-doc{
	position: relative;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid var(--divider-color);
	overflow: hidden;
}

.vt-ed-doc .vt-ed-doc-title{
	width: 55%;
	height: 12px;
	margin-bottom: 14px;
	background: var(--accent-soft);
}

.vt-ed-doc span:nth-child(3){ transition-delay: 0.1s; }
.vt-ed-doc span:nth-child(4){ transition-delay: 0.2s; }
.vt-ed-doc span:nth-child(5){ transition-delay: 0.3s; }

.vt-ed-doc::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(18, 131, 255, 0.12) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: vt-ed-sweep 2.4s ease-in-out infinite;
}

@keyframes vt-ed-sweep{
	to{ transform: translateX(100%); }
}

/* Observation rubric */
.vt-ed-rubric{
	list-style: none;
	margin: 0;
	padding: 0;
}

.vt-ed-rubric li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--divider-color);
}

.vt-ed-rubric li:last-child{
	border-bottom: 0;
}

.vt-ed-rubric b{
	display: flex;
	gap: 4px;
}

.vt-ed-rubric b i{
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: var(--secondary-color);
	transition: background-color 0.4s;
}

.vt-ed-panel.is-active .vt-ed-rubric b[data-r="2"] i:nth-child(-n+2),
.vt-ed-panel.is-active .vt-ed-rubric b[data-r="3"] i:nth-child(-n+3),
.vt-ed-panel.is-active .vt-ed-rubric b[data-r="4"] i:nth-child(-n+4){
	background: var(--accent-color);
}

/* Analytics */
.vt-ed-bars{
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 76px;
	margin-bottom: 14px;
}

.vt-ed-bars span{
	flex: 1;
	height: var(--h);
	border-radius: 6px;
	background: var(--accent-soft);
	transform-origin: bottom;
	transition: transform 0.8s var(--ease-out) 0.1s;
}

.vt-ed-bars span:last-child{
	background: var(--accent-color);
}

.vt-ed-panel:not(.is-active) .vt-ed-bars span{
	transform: scaleY(0.2);
}

.vt-ed-kpis{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.vt-ed-kpis span{
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--secondary-color);
	font-size: 11px;
	color: var(--text-color);
}

.vt-ed-kpis b{
	display: block;
	font-size: 16px;
	color: var(--primary-color);
}

/************************************/
/***          02. Projects        ***/
/************************************/

.vt-ed-projects{
	padding: 120px 0;
}

.vt-ed-note{
	margin: 0;
	font-size: 18px;
}

/* Two groups: client case studies (three across), then product use cases (two across) */
.vt-ed-project-group + .vt-ed-project-group{
	margin-top: 80px;
}

.vt-ed-group-title{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 30px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-color);
}

/* Rule running from the label to the edge of the container */
.vt-ed-group-title::after{
	content: "";
	flex: 1;
	height: 1px;
	background: var(--divider-color);
}

.vt-ed-project-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.vt-ed-project-grid-3{
	grid-template-columns: repeat(3, 1fr);
}

.vt-ed-project-grid-3 .vt-ed-project-head strong{
	font-size: 24px;
}

.vt-ed-project-grid-3 .vt-ed-project-desc{
	font-size: 16px;
}

/* A single card on its own row: preview on the left, text on the right (desktop only) */
.vt-ed-project-grid-1{
	grid-template-columns: 1fr;
}

@media only screen and (min-width: 992px){
	.vt-ed-project.vt-ed-project-wide{
		display: grid;
		grid-template-columns: 7fr 5fr;
		align-items: center;
	}

	.vt-ed-project-wide .vt-ed-project-info{
		padding: 30px 40px;
	}
}

.vt-ed-project{
	display: flex;
	flex-direction: column;
	padding: 14px;
	border-radius: 34px;
	background: var(--secondary-color);
	color: var(--primary-color);
	transition: background-color 0.4s, box-shadow 0.5s;
}

.vt-ed-project:hover{
	color: var(--primary-color);
	box-shadow: 0 30px 60px -40px rgba(0, 98, 221, 0.45);
}

.vt-ed-project:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 4px;
}

/* Preview: a product window rising out of a coloured stage (Framer-style site preview) */
.vt-ed-preview{
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 24px;
	overflow: hidden;
}

.vt-ed-preview-window{
	position: absolute;
	top: 14%;
	left: 10%;
	right: 10%;
	height: 100%;
	display: block;
	border-radius: 16px 16px 0 0;
	background: var(--white-color);
	box-shadow: 0 30px 50px -30px rgba(21, 22, 27, 0.5);
	transition: transform 0.7s var(--ease-out);
}

.vt-ed-project:hover .vt-ed-preview-window{
	transform: translateY(-6%) scale(1.02);
}

/* Every client screenshot rises out of the same blue stage */
.vt-ed-preview{
	background: linear-gradient(150deg, #2F5E9E, #1A3A6B);
}

/* Client screenshot inside the window: fills the width, shows the top of the screen */
.vt-ed-preview-window{
	overflow: hidden;
}

.vt-ed-pv-shot{
	display: block;
	width: 100%;
	height: auto;
}

.vt-ed-pv-bar{
	display: flex;
	gap: 5px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--divider-color);
}

.vt-ed-pv-bar i{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--divider-color);
}

.vt-ed-project-info{
	display: block;
	padding: 24px 18px 14px;
}

.vt-ed-project-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.vt-ed-project-head strong{
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.vt-ed-project-arrow{
	display: grid;
	place-items: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	color: var(--accent-color);
	background: var(--white-color);
	transition: background-color 0.4s, color 0.4s, transform 0.5s var(--ease-out);
}

.vt-ed-project:hover .vt-ed-project-arrow{
	color: var(--white-color);
	background: var(--accent-color);
	transform: rotate(-45deg);
}

.vt-ed-project-desc{
	display: block;
	margin-bottom: 16px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--text-color);
}

.vt-ed-project-client{
	display: inline-block;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--white-color);
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color);
}

.vt-ed-projects-btn{
	margin-top: 50px;
	text-align: center;
}

/************************************/
/***       03. Project modal      ***/
/************************************/

.vt-ed-modal{
	width: min(1320px, calc(100vw - 48px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: 30px;
	background: var(--white-color);
	color: var(--text-color);
	overflow: auto;
}

.vt-ed-modal::backdrop{
	background: rgba(21, 22, 27, 0.6);
	backdrop-filter: blur(4px);
}

/* Wide and horizontal: the image takes the larger column */
.vt-ed-modal[open]{
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	overflow: hidden;
	animation: vt-ed-modal-in 0.5s var(--ease-out);
}

@keyframes vt-ed-modal-in{
	from{ opacity: 0; transform: translateY(20px) scale(0.98); }
}

.vt-ed-modal-close{
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	font-size: 16px;
	color: var(--primary-color);
	background: var(--secondary-color);
	transition: background-color 0.3s, color 0.3s;
}

.vt-ed-modal-close:hover,
.vt-ed-modal-close:focus-visible{
	color: var(--white-color);
	background: var(--accent-color);
}

.vt-ed-modal-media{
	padding: 14px;
}

/* The window wraps the whole screenshot and sits centred on the stage, instead of
   rising out of the bottom edge as on the cards */
.vt-ed-modal-media .vt-ed-preview{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 380px;
	padding: 6%;
	aspect-ratio: auto;
}

.vt-ed-modal-media .vt-ed-preview-window{
	position: static;
	width: 100%;
	height: auto;
	border-radius: 16px;
	transform: none;
}

/* Desktop: the image stays put and only the text column scrolls, inside the rounded box */
.vt-ed-modal-body{
	align-self: center;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 30px 56px 24px 30px;
}

/* Thin scrollbar kept clear of the rounded corners */
.vt-ed-modal,
.vt-ed-modal-body{
	scrollbar-width: thin;
	scrollbar-color: var(--divider-color) transparent;
}

.vt-ed-modal::-webkit-scrollbar,
.vt-ed-modal-body::-webkit-scrollbar{
	width: 6px;
}

.vt-ed-modal::-webkit-scrollbar-track,
.vt-ed-modal-body::-webkit-scrollbar-track{
	margin: 28px 0;
	background: transparent;
}

.vt-ed-modal::-webkit-scrollbar-thumb,
.vt-ed-modal-body::-webkit-scrollbar-thumb{
	border-radius: 3px;
	background: var(--divider-color);
}

.vt-ed-modal-client{
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--accent-soft);
	font-size: 13px;
	font-weight: 700;
	color: var(--accent-color);
}

.vt-ed-modal-client[hidden]{
	display: none;
}

.vt-ed-modal-body h2{
	font-size: 34px;
	letter-spacing: -0.03em;
	margin-bottom: 10px;
	padding-right: 40px;
}

.vt-ed-modal-desc{
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 18px;
}

.vt-ed-modal-link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--accent-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vt-ed-modal-link:hover,
.vt-ed-modal-link:focus-visible{
	text-decoration-thickness: 2px;
}

.vt-ed-modal-link[hidden]{
	display: none;
}

.vt-ed-modal-link i{
	font-size: 12px;
}

.vt-ed-modal-story h3{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-color);
	margin-bottom: 12px;
}

.vt-ed-modal-story ol{
	counter-reset: vt-ed-step;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.vt-ed-modal-story li{
	counter-increment: vt-ed-step;
	position: relative;
	padding: 0 0 10px 42px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--primary-color);
}

.vt-ed-modal-story li strong{
	display: block;
	margin-bottom: 4px;
}

.vt-ed-modal-story li::before{
	content: counter(vt-ed-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -2px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: var(--white-color);
	background: var(--accent-color);
}

/************************************/
/***         04. Experience       ***/
/************************************/

/* Education: a compact grid of six tiles (no long cards + sidebar like services) */
.vt-ed-exp{
	padding: 120px 0;
	background: var(--secondary-color);
}

.vt-ed-exp-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vt-ed-exp-item{
	padding: 32px;
	border-radius: 28px;
	border: 1px solid transparent;
	background: var(--white-color);
	transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}

.vt-ed-exp-item:hover{
	transform: translateY(-6px);
	border-color: rgba(0, 98, 221, 0.25);
	box-shadow: 0 24px 50px -30px rgba(0, 98, 221, 0.35);
}

.vt-ed-exp-icon{
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 24px;
	border-radius: 14px;
	font-size: 20px;
	color: var(--accent-color);
	background: var(--accent-soft);
	transition: transform 0.5s var(--ease-out);
}

.vt-ed-exp-item:hover .vt-ed-exp-icon{
	transform: rotate(-10deg);
}

.vt-ed-exp-item h3{
	font-size: 21px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}

.vt-ed-exp-item p{
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

/* AI runs through everything else: the dark tile, as on the rest of the site */
.vt-ed-exp-item.is-featured{
	background: var(--dark-surface);
	color: rgba(255, 255, 255, 0.65);
}

.vt-ed-exp-item.is-featured h3{
	color: var(--white-color);
}

.vt-ed-exp-item.is-featured .vt-ed-exp-icon{
	color: var(--white-color);
	background: var(--accent-color);
}

/************************************/
/***        05. Capabilities      ***/
/************************************/

.vt-ed-feats-section{
	padding: 120px 0;
}

.vt-ed-feats{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vt-ed-feats li{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px;
	border-radius: 18px;
	border: 1px solid transparent;
	background: var(--secondary-color);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--primary-color);
	transition: opacity 0.5s, border-color 0.5s, background-color 0.5s, transform 0.5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 50ms);
}

.vt-ed-feats li:hover{
	border-color: rgba(0, 98, 221, 0.25);
	background: var(--white-color);
	transition-delay: 0s;
}

.vt-ed-feats i{
	display: grid;
	place-items: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 11px;
	color: var(--white-color);
	background: var(--accent-color);
	transition: background-color 0.5s;
	transition-delay: inherit;
}

/* With JS, the list "switches on" item by item when it scrolls into view */
.vt-js .vt-ed-feats li{
	opacity: 0.4;
	transform: translateY(6px);
}

.vt-js .vt-ed-feats i{
	background: var(--divider-color);
}

.vt-js .vt-ed-feats.is-inview li{
	opacity: 1;
	transform: none;
}

.vt-js .vt-ed-feats.is-inview i{
	background: var(--accent-color);
}

/************************************/
/***        06. Perspective       ***/
/************************************/

.vt-ed-perspective{
	padding: 120px 0;
	background: var(--secondary-color);
}

.vt-ed-perspective .vt-sticky{
	margin-left: 24px;
}

.vt-ed-perspective .section-title h2{
	font-size: 52px;
}

/* Photo column on the left, matching the height of the title and copy on the right */
.vt-ed-perspective-media{
	height: 100%;
	margin: 0;
	border-radius: 30px;
	overflow: hidden;
	background: var(--accent-soft);
}

.vt-ed-perspective-media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transition: transform 0.8s var(--ease-out);
}

.vt-ed-perspective-media:hover img{
	transform: scale(1.04);
}

.vt-ed-perspective-body{
	padding-left: 40px;
}

.vt-ed-perspective-body .section-title{
	margin-bottom: 30px;
}

.vt-ed-perspective-body .vt-ed-perspective-copy p.vt-lead{
	font-size: 24px;
}

.vt-ed-perspective-copy p{
	font-size: 18px;
	margin-bottom: 22px;
}

.vt-ed-perspective-copy p:last-child{
	margin-bottom: 0;
}

.vt-ed-perspective-copy p.vt-lead{
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	margin-bottom: 30px;
}

.vt-ed-perspective-close{
	margin-top: 90px;
	padding-top: 60px;
	border-top: 1px solid var(--divider-color);
	text-align: center;
}

.vt-ed-perspective-close p{
	max-width: 900px;
	margin: 0 auto;
	font-size: 24px;
	line-height: 1.3;
	color: var(--text-color);
}

.vt-ed-perspective-close strong{
	display: inline-block;
	margin-top: 12px;
	font-size: 38px;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--primary-color);
}

.vt-ed-perspective-close strong span{
	color: var(--accent-color);
}

/************************************/
/***             07. AI           ***/
/************************************/

.vt-ed-ai .section-title h2{
	font-size: 52px;
}

.vt-ed-ai .vt-layer{
	padding: 26px;
}

/************************************/
/***        08. Responsive        ***/
/************************************/

@media only screen and (max-width: 1199px){
	.vt-ed-project-grid-3 .vt-ed-project-head strong{
		font-size: 21px;
	}

	.vt-ed-hero .section-title h1.vt-hero-title{
		font-size: 52px;
	}

	.vt-ed-app{
		grid-template-columns: 170px 1fr;
	}

	.vt-ed-feats{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 991px){
	.vt-ed-project-grid.vt-ed-project-grid-3{
		grid-template-columns: 1fr;
	}

	.vt-ed-project-group + .vt-ed-project-group{
		margin-top: 50px;
	}

	.vt-ed-group-title{
		margin-bottom: 20px;
	}

	.vt-ed-hero .section-title h1.vt-hero-title{
		font-size: 48px;
	}

	.vt-ed-scene{
		max-width: 560px;
		margin: 30px auto 0;
	}

	.vt-ed-projects,
	.vt-ed-exp,
	.vt-ed-feats-section,
	.vt-ed-perspective{
		padding: 60px 0;
	}

	.vt-ed-exp-grid{
		grid-template-columns: repeat(2, 1fr);
	}

	.vt-ed-note{
		margin-top: 20px;
	}

	.vt-ed-project-grid{
		gap: 20px;
	}

	.vt-ed-project-head strong{
		font-size: 23px;
	}

	.vt-ed-modal[open]{
		grid-template-columns: 1fr;
		overflow-y: auto;
	}

	.vt-ed-modal-body{
		max-height: none;
		overflow: visible;
	}

	.vt-ed-modal-media .vt-ed-preview{
		height: auto;
		min-height: 0;
		padding: 6%;
	}

	.vt-ed-modal-media .vt-ed-preview-photo{
		aspect-ratio: 16 / 9;
	}

	.vt-ed-modal-body{
		padding: 20px 30px 34px;
	}

	.vt-ed-feats{
		grid-template-columns: repeat(2, 1fr);
	}

	.vt-ed-perspective .section-title h2,
	.vt-ed-ai .section-title h2{
		font-size: 42px;
	}

	.vt-ed-perspective-media{
		height: auto;
		margin-bottom: 40px;
		border-radius: 22px;
		aspect-ratio: 16 / 10;
	}

	.vt-ed-perspective-body{
		padding-left: 0;
	}

	.vt-ed-perspective-close{
		margin-top: 50px;
		padding-top: 40px;
	}

	.vt-ed-perspective-close p{
		font-size: 20px;
	}

	.vt-ed-perspective-close strong{
		font-size: 30px;
	}
}

@media only screen and (max-width: 767px){
	.vt-ed-hero .section-title h1.vt-hero-title{
		font-size: 38px;
	}

	.vt-ed-exp-grid{
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.vt-ed-exp-item{
		padding: 24px;
		border-radius: 22px;
	}

	.vt-ed-exp-icon{
		width: 44px;
		height: 44px;
		margin-bottom: 18px;
	}

	/* Unlike the home hero, keep the description: it says what this page is about */
	.vt-ed-hero .hero-body{
		display: block;
		width: auto;
		margin-left: 14px;
	}

	.vt-ed-hero .hero-body p{
		font-size: 17px;
	}

	.vt-ed-crumbs{
		margin-left: 14px;
	}

	/* The area list turns into an icon rail */
	.vt-ed-app{
		grid-template-columns: 52px 1fr;
	}

	.vt-ed-areas{
		padding: 12px 6px;
	}

	.vt-ed-areas li{
		justify-content: center;
		padding: 10px 0;
	}

	.vt-ed-areas li span{
		display: none;
	}

	.vt-ed-areas li::after{
		left: 8px;
		right: 8px;
	}

	.vt-ed-panels{
		padding: 14px;
	}

	.vt-ed-note,
	.vt-ed-projects-btn{
		text-align: center;
	}

	.vt-ed-project-grid{
		grid-template-columns: 1fr;
	}

	.vt-ed-project{
		border-radius: 28px;
	}

	.vt-ed-preview{
		border-radius: 20px;
	}

	.vt-ed-project-info{
		padding: 20px 10px 10px;
	}

	.vt-ed-project-desc{
		font-size: 16px;
	}

	.vt-ed-modal{
		border-radius: 24px;
	}

	.vt-ed-modal-body{
		padding: 16px 22px 28px;
	}

	.vt-ed-modal-body h2{
		font-size: 30px;
	}

	.vt-ed-modal-desc{
		font-size: 16px;
	}

	.vt-ed-feats{
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.vt-ed-feats li{
		padding: 14px 16px;
		font-size: 15px;
	}

	.vt-ed-perspective .vt-sticky{
		margin-left: 14px;
	}

	.vt-ed-perspective .section-title h2,
	.vt-ed-ai .section-title h2{
		font-size: 34px;
	}

	.vt-ed-perspective-copy{
		margin-top: 10px;
	}

	.vt-ed-perspective-media{
		margin-bottom: 30px;
		aspect-ratio: 4 / 3;
	}

	.vt-ed-perspective-copy p.vt-lead,
	.vt-ed-perspective-body .vt-ed-perspective-copy p.vt-lead{
		font-size: 21px;
	}

	.vt-ed-perspective-copy p{
		font-size: 16px;
	}

	.vt-ed-perspective-close strong{
		font-size: 24px;
	}

	.vt-ed-ai .vt-layer{
		padding: 20px 50px 20px 18px;
	}
}

/************************************/
/***      09. Reduced motion      ***/
/************************************/

@media (prefers-reduced-motion: reduce){
	.vt-ed-perspective-media img{
		transition: none;
	}

	.vt-ed-doc::after,
	.vt-ed-sync li > i,
	.vt-ed-modal[open]{
		animation: none;
	}

	.vt-ed-panel,
	.vt-ed-ai-answer span,
	.vt-ed-doc span,
	.vt-ed-bars span,
	.vt-ed-preview-window{
		transition: none;
	}

	.vt-js .vt-ed-feats li{
		opacity: 1;
		transform: none;
	}

	.vt-js .vt-ed-feats i{
		background: var(--accent-color);
	}
}

/* The close button receives focus when the dialog opens; only show a ring for keyboard users */
.vt-ed-modal-close:focus:not(:focus-visible){
	outline: none;
}