/* ==========================================================================
   VE Agency Site — about.css
   Section 02: About Us. A white "sheet" that slides up over the hero, an
   editorial statement, and an overlapping media collage beside the copy.
   Everything is scoped to .ve-about.

   Leave Elementor padding / gap controls on these containers at their
   defaults; spacing comes from this file.
   ========================================================================== */

/* ---------- Section sheet ---------- */
.ve-page .e-con.ve-about {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 2rem + 4vw, 6.5rem);
	width: 100%;
	max-width: none;
	margin: calc(-1 * clamp(1.5rem, 1rem + 2vw, 3rem)) 0 0;
	padding: var(--ve-section-y) max(var(--ve-gutter), calc((100% - var(--ve-max)) / 2));
	background-color: var(--ve-surface);
	border-radius: clamp(24px, 1rem + 2.5vw, 56px) clamp(24px, 1rem + 2.5vw, 56px) 0 0;
	box-shadow: 0 -1px 0 var(--ve-line), 0 -24px 60px -40px rgba(28, 27, 31, 0.25);
	overflow-x: clip;
}

/* ---------- Intro: label + statement ---------- */
.ve-page .e-con.ve-about__intro {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	row-gap: var(--ve-space-5);
	align-items: start;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}
.ve-page .ve-about__intro > .elementor-element {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
}
.ve-page .ve-about__eyebrow {
	grid-column: 1 / span 3;
	padding-top: 0.9em;
}
.ve-page .ve-about__eyebrow p::before,
.ve-page .ve-about__eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1.5px;
	margin-right: 0.75em;
	vertical-align: middle;
	background: var(--ve-ink);
}
.ve-page .ve-about__statement {
	grid-column: 4 / -1;
}
.ve-page .ve-about__statement .elementor-heading-title {
	font-size: var(--ve-fs-h2);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: pretty;
}
.ve-page .ve-scrub-words.is-scrub-ready .ve-word { display: inline; }
.ve-page .ve-scrub-words.is-scrub-ready .ve-word__inner { display: inline; }

/* ---------- Body: media collage + content ---------- */
.ve-page .e-con.ve-about__body {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	row-gap: var(--ve-space-8);
	align-items: center;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}
.ve-page .ve-about__body > .elementor-element {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
}

/* Media collage */
.ve-page .e-con.ve-about__media {
	grid-column: 1 / span 6;
	position: relative;
	display: block;
	width: 100%;
	padding: 0 0 14% 0;   /* room for the overlapping accent image */
	margin: 0;
}
.ve-page .ve-about__img {
	margin: 0;
}
.ve-page .ve-about__img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--ve-radius-l);
	box-shadow: var(--ve-shadow-2);
}
.ve-page .ve-about__img--main {
	width: 80%;
}
.ve-page .ve-about__img--main img {
	aspect-ratio: 4 / 5;
}
.ve-page .ve-about__img--accent {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46%;
	z-index: 2;
}
.ve-page .ve-about__img--accent img {
	aspect-ratio: 1 / 1;
	border: clamp(6px, 0.8vw, 10px) solid var(--ve-surface);
	box-shadow: var(--ve-shadow-3);
}

/* Floating label on the collage */
.ve-page .ve-about__chip {
	position: absolute;
	top: 8%;
	right: 6%;
	z-index: 3;
	margin: 0;
	width: auto;
}
.ve-page .ve-about__chip p {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	padding: 0.6em 1em;
	border-radius: var(--ve-radius-pill);
	background: var(--ve-surface);
	box-shadow: var(--ve-shadow-2);
	font-size: var(--ve-fs-small);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ve-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ve-page .ve-about__chip p::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ve-accent);
	flex: none;
}

/* Soft colour blob behind the collage */
.ve-page .e-con.ve-about__media::before {
	content: "";
	position: absolute;
	left: -8%;
	top: 12%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--ve-lavender), transparent);
	opacity: 0.8;
	z-index: -1;
	pointer-events: none;
}

/* Content column */
.ve-page .e-con.ve-about__content {
	grid-column: 8 / -1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ve-space-7);
	width: 100%;
	padding: 0;
	margin: 0;
}
.ve-page .ve-about__content > .elementor-element {
	width: 100%;
	max-width: none;
	margin: 0;
}
.ve-page .ve-about__copy p {
	font-size: var(--ve-fs-lede);
	line-height: 1.65;
	color: var(--ve-ink-soft);
	margin: 0 0 1em;
	max-width: 46ch;
}
.ve-page .ve-about__copy p:last-child { margin-bottom: 0; }
.ve-page .ve-about__copy strong { color: var(--ve-ink); font-weight: 700; }

/* Numbered principles */
.ve-page .e-con.ve-about__points {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	padding: 0;
	margin: 0;
	counter-reset: ve-about-point;
}
.ve-page .e-con.ve-about__point {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	column-gap: var(--ve-space-4);
	row-gap: var(--ve-space-1);
	width: 100%;
	padding: var(--ve-space-5) 0;
	margin: 0;
	border-top: 1px solid var(--ve-line);
	counter-increment: ve-about-point;
}
.ve-page .e-con.ve-about__point:last-child { border-bottom: 1px solid var(--ve-line); }
.ve-page .ve-about__point > .elementor-element {
	grid-column: 2;
	width: auto;
	max-width: none;
	margin: 0;
}
.ve-page .e-con.ve-about__point::after {
	content: counter(ve-about-point, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 2;
	padding-top: 0.2em;
	font-family: var(--ve-font-body);
	font-size: var(--ve-fs-small);
	font-weight: 700;
	color: var(--ve-accent-text);
	font-variant-numeric: tabular-nums;
}
.ve-page .ve-about__point-title .elementor-heading-title {
	font-size: var(--ve-fs-h3);
	line-height: 1.15;
	margin: 0;
}
.ve-page .ve-about__point-text p {
	margin: 0;
	font-size: var(--ve-fs-body);
	line-height: 1.6;
	color: var(--ve-ink-soft);
}
@media (hover: hover) {
	.ve-page .ve-about__point-title .elementor-heading-title {
		transition: transform var(--ve-dur) var(--ve-ease);
	}
	.ve-page .e-con.ve-about__point:hover .ve-about__point-title .elementor-heading-title {
		transform: translateX(6px);
	}
}

/* ---------- Responsive ---------- */

/* Tablet landscape / small laptop */
@media (max-width: 1024px) {
	.ve-page .ve-about__eyebrow { grid-column: 1 / -1; padding-top: 0; }
	.ve-page .ve-about__statement { grid-column: 1 / -1; }
	.ve-page .e-con.ve-about__media { grid-column: 1 / span 7; }
	.ve-page .e-con.ve-about__content { grid-column: 8 / -1; gap: var(--ve-space-6); }
	.ve-page .ve-about__copy p { font-size: var(--ve-fs-body); }
}

/* Tablet portrait and below: one column */
@media (max-width: 900px) {
	.ve-page .e-con.ve-about__body { row-gap: var(--ve-space-7); }
	.ve-page .e-con.ve-about__media {
		grid-column: 1 / -1;
		max-width: 560px;
		width: 100%;
		justify-self: center;
	}
	.ve-page .e-con.ve-about__content { grid-column: 1 / -1; }
	.ve-page .ve-about__copy p { font-size: var(--ve-fs-lede); max-width: none; }
}

/* Phones */
@media (max-width: 480px) {
	.ve-page .ve-about__img--main { width: 84%; }
	.ve-page .ve-about__img--accent { width: 50%; }
	.ve-page .ve-about__chip { top: 5%; right: 2%; }
	.ve-page .e-con.ve-about__point { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ve-page .e-con.ve-about__point:hover .ve-about__point-title .elementor-heading-title { transform: none; }
}