/* =========================================================
   AVANSEN — ABOUT PAGE
   01. BASE + HERO
========================================================= */


/* =========================================================
   BASE
========================================================= */

html,
body {
	background: #000;
}


body.page-about,
.av-about-page {
	background: #000;
	color: #F3F0ED;
}


.av-about-page {
	width: 100%;
	min-height: 100vh;

	overflow-x: hidden;
}



/* =========================================================
   HERO
========================================================= */

.av-about-hero {
	position: relative;

	width: 100%;
	height: 720px;

	background: #000;

	overflow: hidden;
}



/* =========================================================
   HERO — VISUAL
========================================================= */

.av-about-hero__visual {
	position: absolute;
	inset: 0;

	z-index: 0;

	overflow: hidden;
}


.av-about-hero__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;

	transform: scale(1.02);

	filter:
		brightness(0.82)
		contrast(1.05)
		saturate(0.96);

	will-change:
		transform,
		filter;

	transition:
		transform 900ms cubic-bezier(.22, 1, .36, 1),
		filter 600ms ease;

	animation:
		av-about-hero-breathe
		6s
		ease-in-out
		infinite;
}



/* =========================================================
   HERO — TOP / BOTTOM FADE
========================================================= */

.av-about-hero__visual::after {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			#000 0%,
			rgba(0, 0, 0, 0.34) 9%,
			rgba(0, 0, 0, 0.04) 25%,
			rgba(0, 0, 0, 0.02) 70%,
			rgba(0, 0, 0, 0.52) 89%,
			#000 100%
		);
}



/* =========================================================
   HERO — AMBIENT LIGHT
========================================================= */

.av-about-hero__ambient {
	position: absolute;

	left: 50%;
	top: 46%;

	width: 560px;
	height: 560px;

	transform:
		translate(-50%, -50%);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(255, 90, 0, 0.13) 0%,
			rgba(127, 47, 16, 0.07) 42%,
			rgba(0, 0, 0, 0) 73%
		);

	filter: blur(38px);

	pointer-events: none;
}



/* =========================================================
   HERO — FILM GRAIN
========================================================= */

.av-about-hero__grain {
	position: absolute;
	inset: 0;

	pointer-events: none;

	opacity: 0.045;

	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

	mix-blend-mode: soft-light;
}



/* =========================================================
   HERO — CONTENT
========================================================= */

.av-about-hero__container {
	position: relative;

	z-index: 2;

	width: 100%;
	height: 100%;

	margin: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: none;
}


.av-about-hero__content {
	width: 100%;
	max-width: 680px;

	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;

	direction: rtl;
	text-align: center;

	transform:
		translateY(-80px);

	will-change: transform;

	transition:
		transform 700ms cubic-bezier(.22, 1, .36, 1);
}



/* =========================================================
   HERO — TITLE
========================================================= */

.av-about-hero__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 50px;
	font-weight: 800;
	line-height: 1.18;

	color: #F3F0ED;

	text-align: center;

	text-shadow:
		0 2px 18px rgba(0, 0, 0, 0.45);
}


.av-about-hero__title span {
	color: #FF5A00;
}



/* Marker / description در Hero استفاده نمی‌شوند */

.av-about-hero__marker,
.av-about-hero__description {
	display: none !important;
}



/* =========================================================
   HERO — SCROLL CUE
========================================================= */

.av-about-hero__scroll {
	position: absolute;

	left: 50%;
	bottom: 24px;

	z-index: 3;

	width: 26px;
	height: 40px;

	transform:
		translateX(-50%);

	display: flex;
	align-items: flex-start;
	justify-content: center;

	text-decoration: none;
}


.av-about-hero__scroll::before {
	content: "";

	width: 1px;
	height: 22px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.52),
			rgba(255, 90, 0, 0.92)
		);
}


.av-about-hero__scroll::after {
	content: "";

	position: absolute;

	bottom: 0;

	width: 7px;
	height: 7px;

	border-right:
		1px solid #FF5A00;

	border-bottom:
		1px solid #FF5A00;

	transform:
		rotate(45deg);
}



/* =========================================================
   HERO — BREATHING LIGHT
========================================================= */

@keyframes av-about-hero-breathe {

	0%,
	100% {
		filter:
			brightness(0.82)
			contrast(1.05)
			saturate(0.96);
	}

	50% {
		filter:
			brightness(0.90)
			contrast(1.06)
			saturate(1.02);
	}

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-about-hero {
		height: 680px;
	}


	.av-about-hero__content {
		max-width: 600px;

		transform:
			translateY(-65px);
	}


	.av-about-hero__title {
		font-size: 46px;
	}

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-about-hero {
		height: 680px;
	}


	.av-about-hero__image {
		object-position: center center;

		filter:
			brightness(0.74)
			contrast(1.05);
	}


	.av-about-hero__content {
		width: calc(100% - 40px);
		max-width: 100%;

		transform:
			translateY(-48px);
	}


	.av-about-hero__title {
		font-size: 30px;
		line-height: 1.22;
	}


	.av-about-hero__scroll {
		bottom: 20px;
	}

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.av-about-hero__image,
	.av-about-hero__content {
		animation: none;
		transition: none;
	}

}


/* =========================================================
   AVANSEN — ABOUT PAGE
   02. STORY
========================================================= */


/* =========================================================
   STORY — SECTION
========================================================= */

.av-about-story {
	position: relative;

	width: 100%;

	padding:
		56px
		0;

	background: #000;
}



/* =========================================================
   STORY — MARKER
========================================================= */

.av-about-story__marker {
	position: relative;

	margin:
		0
		0
		32px;

	top: auto;
	right: auto;
	left: auto;
}



/* =========================================================
   STORY — CONTAINER
========================================================= */

.av-about-story__container {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 520px);

	column-gap: 110px;

	align-items: start;

	direction: ltr;
}



/* =========================================================
   STORY — HEADING
========================================================= */

.av-about-story__heading {
	grid-column: 2;
	grid-row: 1;

	align-self: start;

	margin: 0;
	padding: 0;

	direction: rtl;
	text-align: right;
}



/* =========================================================
   STORY — TITLE
========================================================= */

.av-about-story__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.3;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;
}


.av-about-story__title span {
	color: #FF5A00;
}



/* =========================================================
   STORY — COPY
========================================================= */

.av-about-story__copy {
	grid-column: 1;
	grid-row: 1;

	align-self: start;
	justify-self: start;

	width: 100%;
	max-width: 680px;

	margin: 0;
	padding: 0;

	direction: rtl;
	text-align: right;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 2;

	color: #FFFFFF;
}


.av-about-story__copy p {
	margin:
		0
		0
		28px;
}


.av-about-story__copy p:last-child {
	margin-bottom: 0;
}



/* =========================================================
   STORY — LIQUID LIGHT
========================================================= */

.av-about-story__light {
	position: relative;

	width: 100%;
	max-width: 430px;

	margin:
		42px
		0
		0
		auto;

	overflow: hidden;

	pointer-events: none;

	animation:
		av-story-light-breathe
		6s
		ease-in-out
		infinite;
}


.av-about-story__light img {
	display: block;

	width: 100%;
	height: auto;

	opacity: 0.72;

	mix-blend-mode: screen;

	transform:
		scale(1.05);

	transform-origin:
		right center;
}



/* =========================================================
   STORY — LIGHT MOTION
========================================================= */

@keyframes av-story-light-breathe {

	0%,
	100% {
		opacity: 0.68;

		transform:
			translateY(0);
	}

	50% {
		opacity: 0.92;

		transform:
			translateY(-3px);
	}

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-about-story {
		padding:
			52px
			0;
	}


	.av-about-story__container {
		width: calc(100% - 64px);

		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 460px);

		column-gap: 70px;
	}


	.av-about-story__title {
		font-size: 46px;
	}


	.av-about-story__copy {
		font-size: 21px;
	}


	.av-about-story__light {
		max-width: 360px;
	}

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-about-story {
		padding:
			48px
			0;
	}


	.av-about-story__marker {
		margin-bottom: 24px;
	}


	.av-about-story__container {
		width: calc(100% - 40px);

		display: flex;
		flex-direction: column;

		gap: 36px;

		direction: rtl;
	}


	.av-about-story__heading {
		width: 100%;

		order: 1;
	}


	.av-about-story__copy {
		width: 100%;
		max-width: 100%;

		order: 2;

		font-size: 18px;
		line-height: 1.9;
	}


	.av-about-story__title {
		font-size: 38px;
	}


	.av-about-story__light {
		max-width: 300px;

		margin-top: 30px;
	}

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.av-about-story__light {
		animation: none;
	}

}


/* =========================================================
   AVANSEN — ABOUT PAGE
   03. APPROACH
========================================================= */


/* =========================================================
   APPROACH — SECTION
========================================================= */

.av-about-approach {
	position: relative;

	width: 100%;

	padding:
		56px
		0;

	background: #000;
}



/* =========================================================
   APPROACH — MARKER
========================================================= */

.av-about-approach__marker {
	position: relative;

	margin:
		0
		0
		32px;

	top: auto;
	right: auto;
	left: auto;
}



/* =========================================================
   APPROACH — CONTAINER
========================================================= */

.av-about-approach__container {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 520px);

	column-gap: 110px;

	align-items: start;

	direction: ltr;
}



/* =========================================================
   APPROACH — HEADING
========================================================= */

.av-about-approach__heading {
	grid-column: 2;
	grid-row: 1;

	align-self: start;

	margin: 0;
	padding: 0;

	direction: rtl;
	text-align: right;
}



/* =========================================================
   APPROACH — TITLE
========================================================= */

.av-about-approach__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.3;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;
}


.av-about-approach__title span {
	color: #FF5A00;
}



/* =========================================================
   APPROACH — COPY
========================================================= */

.av-about-approach__copy {
	grid-column: 1;
	grid-row: 1;

	align-self: start;
	justify-self: start;

	width: 100%;
	max-width: 680px;

	margin: 0;
	padding: 0;

	direction: rtl;
	text-align: right;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 2;

	color: #FFFFFF;
}


.av-about-approach__copy p {
	margin:
		0
		0
		28px;
}


.av-about-approach__copy p:last-child {
	margin-bottom: 0;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-about-approach {
		padding:
			52px
			0;
	}


	.av-about-approach__container {
		width: calc(100% - 64px);

		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 460px);

		column-gap: 70px;
	}


	.av-about-approach__title {
		font-size: 46px;
	}


	.av-about-approach__copy {
		font-size: 21px;
	}

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-about-approach {
		padding:
			48px
			0;
	}


	.av-about-approach__marker {
		margin-bottom: 24px;
	}


	.av-about-approach__container {
		width: calc(100% - 40px);

		display: flex;
		flex-direction: column;

		gap: 36px;

		direction: rtl;
	}


	.av-about-approach__heading {
		width: 100%;

		order: 1;
	}


	.av-about-approach__copy {
		width: 100%;
		max-width: 100%;

		order: 2;

		font-size: 18px;
		line-height: 1.9;
	}


	.av-about-approach__title {
		font-size: 38px;
	}

}



/* =========================================================
   AVANSEN — ABOUT PAGE
   04. FOUNDERS
========================================================= */


/* =========================================================
   FOUNDERS — SECTION
========================================================= */

.av-about-founders {
	position: relative;

	width: 100%;

	min-height: 100vh;

	padding:
		56px
		0;

	background: #000;

	box-sizing: border-box;
}



/* =========================================================
   FOUNDERS — MARKER
========================================================= */

.av-about-founders__marker {
	position: relative;

	margin:
		0
		0
		32px;

	top: auto;
	right: auto;
	left: auto;
}



/* =========================================================
   FOUNDERS — CONTAINER
========================================================= */

.av-about-founders__container {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;
}



/* =========================================================
   FOUNDERS — HEADING
========================================================= */

.av-about-founders__heading {
	width: 100%;

	margin:
		0
		0
		34px;

	direction: rtl;
	text-align: right;
}


.av-about-founders__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.25;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;
}


.av-about-founders__title span {
	color: #FF5A00;
}



/* =========================================================
   FOUNDERS — GRID
========================================================= */

.av-about-founders__grid {
	width: 100%;
	max-width: 940px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 24px;

	align-items: start;
}



/* =========================================================
   FOUNDERS — CARD
========================================================= */

.av-about-founder-card {
	width: 100%;
	min-width: 0;
}



/* =========================================================
   FOUNDERS — IMAGE
========================================================= */

.av-about-founder-card__image {
	position: relative;

	width: 100%;
	height: 420px;

	overflow: hidden;

	background: #111;
}


.av-about-founder-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position:
		center 22%;

	transform:
		scale(1);

	transition:
		transform 700ms cubic-bezier(.22, 1, .36, 1),
		filter 400ms ease;
}


.av-about-founder-card:hover
.av-about-founder-card__image img {
	transform:
		scale(1.018);

	filter:
		brightness(1.04)
		contrast(1.02);
}



/* =========================================================
   FOUNDERS — META
========================================================= */

.av-about-founder-card__meta {
	display: grid;

	grid-template-columns:
		42px
		minmax(0, 1fr);

	column-gap: 16px;

	align-items: start;

	margin-top: 16px;

	direction: ltr;
}



/* =========================================================
   FOUNDERS — NUMBER
========================================================= */

.av-about-founder-card__number {
	padding-top: 4px;

	font-family: "Michroma", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;

	color: #7F2F10;
}



/* =========================================================
   FOUNDERS — TEXT
========================================================= */

.av-about-founder-card__content {
	direction: rtl;
	text-align: right;
}


.av-about-founder-card__content h3 {
	margin: 0;

	font-family: "Kalameh", sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4;

	color: #F3F0ED;
}


.av-about-founder-card__content p {
	margin:
		6px
		0
		0;

	font-family: "Michroma", sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.6;

	color:
		rgba(243, 240, 237, 0.48);

	direction: ltr;
	text-align: right;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-about-founders {
		min-height: auto;

		padding:
			52px
			0;
	}


	.av-about-founders__container {
		width: calc(100% - 64px);
	}


	.av-about-founders__title {
		font-size: 46px;
	}


	.av-about-founders__grid {
		max-width: 820px;

		gap: 22px;
	}


	.av-about-founder-card__image {
		height: 390px;
	}

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-about-founders {
		min-height: auto;

		padding:
			48px
			0;
	}


	.av-about-founders__marker {
		margin-bottom: 24px;
	}


	.av-about-founders__container {
		width: calc(100% - 40px);
	}


	.av-about-founders__heading {
		margin-bottom: 30px;
	}


	.av-about-founders__title {
		font-size: 38px;
	}


	.av-about-founders__grid {
		grid-template-columns: 1fr;

		max-width: 100%;

		gap: 48px;
	}


	.av-about-founder-card__image {
		height: auto;

		aspect-ratio: 4 / 5;
	}


	.av-about-founder-card__content h3 {
		font-size: 21px;
	}


	.av-about-founder-card__content p {
		font-size: 9px;
	}

}


/* =========================================================
   AVANSEN — ABOUT PAGE
   05. FINAL CTA
========================================================= */


/* =========================================================
   CTA — SECTION
========================================================= */

.av-about-cta {
	position: relative;

	width: 100%;

	padding:
		64px
		0;

	background: #000;

	overflow: hidden;
}


/* =========================================================
   CTA — AMBIENT LIGHT
========================================================= */

.av-about-cta::before {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -110px;

	width: 700px;
	height: 260px;

	transform:
		translateX(-50%);

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 90, 0, 0.20) 0%,
			rgba(127, 47, 16, 0.10) 34%,
			rgba(0, 0, 0, 0) 72%
		);

	filter: blur(32px);

	pointer-events: none;
}


/* =========================================================
   CTA — INNER
========================================================= */

.av-about-cta__inner {
	position: relative;

	z-index: 2;

	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	text-align: center;
}


/* =========================================================
   CTA — TITLE
========================================================= */

.av-about-cta__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.5;

	color: #F3F0ED;

	text-align: center;
}


.av-about-cta__title span {
	color: #FF5A00;
}


/* =========================================================
   CTA — BUTTON
========================================================= */

.av-about-cta__button {
	position: relative;

	min-width: 200px;
	height: 58px;

	margin-top: 48px;

	padding:
		0
		24px;

	display: flex;
	align-items: center;
	justify-content: center;

	gap: 18px;

	border:
		1px solid #FF5A00;

	border-radius: 32px;

	background:
		rgba(255, 90, 0, 0.035);

	color: #F3F0ED;

	font-family: "Kalameh", sans-serif;
	font-size: 18px;
	font-weight: 500;

	text-decoration: none;

	box-shadow:
		0 0 8px rgba(255, 90, 0, 0.14),
		0 0 20px rgba(255, 90, 0, 0.07);

	transition:
		transform 240ms ease,
		background 240ms ease,
		box-shadow 240ms ease;

	animation:
		av-about-cta-pulse
		3.4s
		ease-in-out
		infinite;
}


/* =========================================================
   CTA — BUTTON GLOW
========================================================= */

.av-about-cta__button::before {
	content: "";

	position: absolute;

	inset: -18px;

	z-index: -1;

	border-radius: 44px;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 90, 0, 0.20) 0%,
			rgba(127, 47, 16, 0.10) 38%,
			transparent 72%
		);

	filter: blur(14px);

	opacity: 0.65;

	pointer-events: none;
}


/* =========================================================
   CTA — HOVER
========================================================= */

.av-about-cta__button:hover {
	transform:
		translateY(-2px)
		scale(1.02);

	background:
		rgba(255, 90, 0, 0.07);

	box-shadow:
		0 0 12px rgba(255, 90, 0, 0.28),
		0 0 30px rgba(255, 90, 0, 0.14);
}


/* =========================================================
   CTA — ARROW
========================================================= */

.av-about-cta__arrow {
	font-size: 18px;

	transition:
		transform 240ms ease;
}


.av-about-cta__button:hover
.av-about-cta__arrow {
	transform:
		translateX(-4px);
}


/* =========================================================
   CTA — PULSE
========================================================= */

@keyframes av-about-cta-pulse {

	0%,
	100% {
		box-shadow:
			0 0 8px rgba(255, 90, 0, 0.14),
			0 0 20px rgba(255, 90, 0, 0.07);
	}

	50% {
		box-shadow:
			0 0 16px rgba(255, 90, 0, 0.30),
			0 0 36px rgba(255, 90, 0, 0.14);
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-about-cta {
		padding:
			56px
			0;
	}


	.av-about-cta__inner {
		width: calc(100% - 64px);
	}


	.av-about-cta__title {
		font-size: 44px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-about-cta {
		padding:
			48px
			0
			64px;
	}


	.av-about-cta__inner {
		width: calc(100% - 40px);
	}


	.av-about-cta__title {
		font-size: 36px;
	}


	.av-about-cta__button {
		min-width: 180px;
		height: 54px;

		margin-top: 32px;

		font-size: 17px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.av-about-cta__button {
		animation: none;
		transition: none;
	}

}


/* =========================================================
   AVANSEN — ABOUT PAGE
   06. GLOBAL MARKER + SPACING + CLEANUP
========================================================= */


/* =========================================================
   SECTION WIDTH SYSTEM
========================================================= */

.av-about-story__container,
.av-about-approach__container,
.av-about-founders__container,
.av-about-cta__inner {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin-left: auto;
	margin-right: auto;
}


/* =========================================================
   TYPOGRAPHY CONSISTENCY
========================================================= */

.av-about-story__title,
.av-about-approach__title,
.av-about-founders__title,
.av-about-cta__title {
	font-family: "Gofteh", sans-serif;
}


.av-about-story__copy,
.av-about-approach__copy {
	font-family: "Kalameh", sans-serif;
}


/* =========================================================
   DESKTOP VERTICAL RHYTHM
========================================================= */

.av-about-story,
.av-about-approach,
.av-about-founders,
.av-about-cta {
	box-sizing: border-box;
}


/* Story */

.av-about-story {
	padding-top: 56px;
	padding-bottom: 56px;
}


/* Approach */

.av-about-approach {
	padding-top: 56px;
	padding-bottom: 56px;
}


/* Founders */

.av-about-founders {
	padding-top: 56px;
	padding-bottom: 56px;
}


/* CTA */

.av-about-cta {
	padding-top: 64px;
	padding-bottom: 64px;
}


/* =========================================================
   PREVENT RANDOM SPACING
========================================================= */

.av-about-story__heading,
.av-about-story__copy,
.av-about-approach__heading,
.av-about-approach__copy,
.av-about-founders__heading {
	margin-top: 0;
	padding-top: 0;
}


/* =========================================================
   STORY + APPROACH ALIGNMENT
========================================================= */

.av-about-story__heading,
.av-about-story__copy,
.av-about-approach__heading,
.av-about-approach__copy {
	grid-row: 1;

	align-self: start;
}


.av-about-story__heading,
.av-about-approach__heading {
	grid-column: 2;
}


.av-about-story__copy,
.av-about-approach__copy {
	grid-column: 1;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-about-page .av-section-marker {
		margin-bottom: 28px;
	}


	.av-about-page .av-section-marker__inner span {
		font-size: 21px;
	}


	.av-about-story__container,
	.av-about-approach__container,
	.av-about-founders__container,
	.av-about-cta__inner {
		width: calc(100% - 64px);
	}


	.av-about-story,
	.av-about-approach,
	.av-about-founders {
		padding-top: 52px;
		padding-bottom: 52px;
	}


	.av-about-cta {
		padding-top: 56px;
		padding-bottom: 56px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-about-page .av-section-marker {
		margin-bottom: 24px;
	}


	.av-about-page .av-section-marker__inner span {
		font-size: 18px;
	}


	.av-about-page .av-section-marker__inner::before {
		height: 1px;
	}


	.av-about-story__container,
	.av-about-approach__container,
	.av-about-founders__container,
	.av-about-cta__inner {
		width: calc(100% - 40px);
	}


	.av-about-story,
	.av-about-approach,
	.av-about-founders {
		padding-top: 48px;
		padding-bottom: 48px;
	}


	.av-about-cta {
		padding-top: 48px;
		padding-bottom: 64px;
	}

}


/* =========================================================
   ABOUT — MARKER POSITIONING ONLY
========================================================= */

.av-about-story__marker,
.av-about-approach__marker,
.av-about-founders__marker {
	margin-bottom: 32px;
}


/* MOBILE */

@media (max-width: 768px) {

	.av-about-story__marker,
	.av-about-approach__marker,
	.av-about-founders__marker {
		margin-bottom: 24px;
	}

}



/* =========================================================
   ABOUT — MOBILE FINAL
   01. HERO
========================================================= */

@media (max-width: 768px) {

	/* =========================
	   HERO
	========================= */

	.av-about-hero {
		position: relative;

		width: 100%;

		/* Mobile viewport */
		height: 100svh;
		min-height: 620px;
		max-height: 760px;

		background: #000;

		overflow: hidden;
	}


	/* =========================
	   HERO IMAGE
	========================= */

	.av-about-hero__visual {
		position: absolute;
		inset: 0;

		width: 100%;
		height: 100%;
	}


	.av-about-hero__image {
		width: 100%;
		height: 100%;

		object-fit: cover;

		/*
		 * کمی تصویر را جابه‌جا می‌کنیم
		 * تا سوژه در موبایل بهتر دیده شود.
		 */
		object-position: center center;

		transform: scale(1.02);

		filter:
			brightness(0.72)
			contrast(1.05)
			saturate(0.96);
	}


	/* =========================
	   MOBILE GRADIENT
	========================= */

	.av-about-hero__visual::after {
		background:
			linear-gradient(
				to bottom,

				#000 0%,

				rgba(0, 0, 0, 0.42) 10%,

				rgba(0, 0, 0, 0.06) 28%,

				rgba(0, 0, 0, 0.04) 62%,

				rgba(0, 0, 0, 0.55) 84%,

				#000 100%
			);
	}


	/* =========================
	   AMBIENT LIGHT
	========================= */

	.av-about-hero__ambient {
		left: 50%;
		top: 48%;

		width: 360px;
		height: 360px;

		transform: translate(-50%, -50%);

		filter: blur(30px);
	}


	/* =========================
	   CONTENT
	========================= */

	.av-about-hero__container {
		width: 100%;
		height: 100%;

		display: flex;
		align-items: center;
		justify-content: center;

		padding: 0 20px;

		box-sizing: border-box;
	}


	.av-about-hero__content {
		width: 100%;
		max-width: 420px;

		margin: 0;

		display: flex;
		align-items: center;
		justify-content: center;

		direction: rtl;
		text-align: center;

		/*
		 * عنوان کمی بالاتر از مرکز بصری
		 */
		transform: translateY(-30px);
	}


	/* =========================
	   TITLE
	========================= */

	.av-about-hero__title {
		width: 100%;

		margin: 0;

		font-family: "Gofteh", sans-serif;

		font-size: clamp(30px, 9.5vw, 42px);
		font-weight: 800;

		line-height: 1.3;

		color: #F3F0ED;

		direction: rtl;
		text-align: center;
	}


	.av-about-hero__title span {
		color: #FF5A00;
	}


	/* =========================
	   SCROLL CUE
	========================= */

	.av-about-hero__scroll {
		left: 50%;
		bottom: 22px;

		transform: translateX(-50%);
	}

}
@media (max-width: 768px) {

	.av-about-story__light {
		display: none;
	}

}


@media (max-width: 768px) {

    /* Section titles */
    .av-about-story__title,
    .av-about-approach__title,
    .av-about-founders__title,
    .av-about-cta__title {
        font-size: 30px;
    }

    /* Section body text */
    .av-about-story__copy,
    .av-about-approach__copy {
        font-size: 18px;
    }
}