/* =========================================================
   SHIVA TOURS & TRAVELS
   ABOUT PAGE — PREMIUM EDITORIAL DESIGN
   ========================================================= */

.shiva-about-page {
	--shiva-green: #08251f;
	--shiva-green-soft: #123b31;
	--shiva-green-deep: #061b16;
	--shiva-cream: #f4f1e8;
	--shiva-cream-dark: #e9e4d8;
	--shiva-gold: #d8b86a;
	--shiva-gold-light: #ead39a;
	--shiva-text: #202c28;
	--shiva-muted: #68716d;

	background: var(--shiva-cream);
	color: var(--shiva-text);
	overflow: hidden;
}


/* =========================================================
   COMMON CONTAINER
   ========================================================= */

.shiva-about-page .about-container {
	width: min(1380px, calc(100% - 120px));
	margin: 0 auto;
}

.shiva-about-page .about-section-label {
	position: relative;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--shiva-gold);
	margin-bottom: 45px;
}

.shiva-about-page .about-section-label::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1px;
	margin: 0 14px 3px 0;
	background: currentColor;
	opacity: 0.8;
}


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

.about-hero {
	position: relative;
	height: min(820px, calc(100vh - 80px));
	min-height: 650px;
	overflow: hidden;
	background: var(--shiva-green);
	color: #fff;
}

.about-hero-image {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.about-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.03);
	animation: aboutHeroZoom 14s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.about-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.76) 0%,
			rgba(0, 0, 0, 0.48) 38%,
			rgba(0, 0, 0, 0.12) 78%,
			rgba(0, 0, 0, 0.20) 100%
		),
		linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.72) 0%,
			rgba(0, 0, 0, 0.08) 60%
		);
}

.about-hero-content {
	position: absolute;
	z-index: 3;
	left: max(60px, calc((100% - 1380px) / 2));
	bottom: 130px;
	max-width: 760px;
	animation: aboutFadeUp 1.1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.about-eyebrow {
	display: flex;
	align-items: center;
	gap: 13px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	margin-bottom: 28px;
	color: var(--shiva-gold-light);
}

.about-eyebrow span {
	display: block;
	width: 40px;
	height: 1px;
	background: var(--shiva-gold);
}

.about-hero h1 {
	margin: 0 0 30px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(58px, 7vw, 104px);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -4px;
}

.about-hero h1 em,
.shiva-about-page em {
	color: var(--shiva-gold);
	font-style: italic;
}

.about-hero p {
	max-width: 610px;
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.80);
}

.about-hero-scroll {
	position: absolute;
	z-index: 4;
	right: 55px;
	bottom: 42px;
	display: flex;
	align-items: center;
	gap: 18px;
	color: rgba(255, 255, 255, 0.72);
	font-family: Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
}

.about-hero-scroll i {
	display: block;
	width: 34px;
	height: 54px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 30px;
	position: relative;
}

.about-hero-scroll i::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--shiva-gold);
	transform: translateX(-50%);
	animation: scrollDot 2s ease-in-out infinite;
}


/* =========================================================
   STORY
   ========================================================= */

.about-story {
	position: relative;
	padding: 150px 0 160px;
	background: var(--shiva-cream);
}

.about-story-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 120px;
	align-items: start;
}

.about-story-heading h2 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(50px, 5vw, 76px);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -2.5px;
}

.about-story-heading h2 strong {
	display: block;
	color: var(--shiva-green);
	font-weight: 400;
}

.about-story-text {
	max-width: 650px;
	padding-top: 8px;
}

.about-story-text p {
	margin: 0 0 27px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	color: #5d6662;
}

.about-story-text .about-lead {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 25px;
	line-height: 1.55;
	color: var(--shiva-text);
}


/* =========================================================
   STATS
   ========================================================= */

.about-stats {
	position: relative;
	padding: 75px 0;
	background: var(--shiva-green);
	color: #fff;
	overflow: hidden;
}

.about-stats::before {
	content: "";
	position: absolute;
	width: 500px;
	height: 500px;
	left: -250px;
	top: -300px;
	border-radius: 50%;
	background: rgba(216, 184, 106, 0.05);
}

.about-stats-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.about-stat {
	padding: 50px 30px;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	transition:
		transform 0.5s ease,
		background 0.5s ease;
}

.about-stat:first-child {
	padding-left: 0;
}

.about-stat:last-child {
	border-right: 0;
}

.about-stat:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.025);
}

.about-stat strong {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 5vw, 75px);
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.about-stat strong span {
	color: var(--shiva-gold);
}

.about-stat p {
	margin: 15px 0 0;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58);
}


/* =========================================================
   NORTH EAST — CINEMATIC SECTION
   ========================================================= */

.about-image-story {
	position: relative;
	padding: 145px 0 155px;
	background:
		radial-gradient(
			circle at 15% 20%,
			rgba(216, 184, 106, 0.06),
			transparent 28%
		),
		#eeeae0;
	overflow: hidden;
}

.about-image-story::after {
	content: "NORTH EAST";
	position: absolute;
	right: -55px;
	bottom: 70px;
	font-family: Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 8px;
	color: rgba(8, 37, 31, 0.10);
	transform: rotate(-90deg);
	transform-origin: center;
}

.about-image-story .about-section-label {
	position: relative;
	z-index: 5;
}


/*
 * The landscape is now the visual canvas.
 * Text sits ON the image instead of appearing
 * as a separate block underneath it.
 */

.about-large-image {
	position: relative;
	width: 100%;
	height: 680px;
	overflow: hidden;
	background: #c9c5ba;
	border-radius: 3px;
	box-shadow:
		0 25px 70px rgba(8, 37, 31, 0.12),
		0 4px 15px rgba(8, 37, 31, 0.08);
}

.about-large-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			90deg,
			rgba(5, 25, 20, 0.78) 0%,
			rgba(5, 25, 20, 0.38) 35%,
			rgba(5, 25, 20, 0.05) 70%,
			rgba(5, 25, 20, 0.20) 100%
		),
		linear-gradient(
			0deg,
			rgba(5, 25, 20, 0.58) 0%,
			transparent 55%
		);
	pointer-events: none;
}

.about-large-image::after {
	content: "";
	position: absolute;
	inset: 22px;
	z-index: 3;
	border: 1px solid rgba(255, 255, 255, 0.20);
	pointer-events: none;
}

.about-large-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.035);
	transition:
		transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1),
		filter 1s ease;
	filter: saturate(0.92);
}

.about-large-image:hover img {
	transform: scale(1.075);
	filter: saturate(1.02);
}


/*
 * IMPORTANT:
 * The existing .about-image-copy is transformed
 * into an overlay panel.
 */

.about-image-copy {
	position: absolute;
	z-index: 4;
	left: max(45px, calc((100vw - 1380px) / 2 + 45px));
	top: 50%;
	width: min(1150px, calc(100% - 100px));
	transform: translateY(-50%);
	display: grid;
	grid-template-columns: 1fr 0.75fr;
	gap: 90px;
	align-items: center;
	pointer-events: none;
}

.about-image-copy h2 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(52px, 5.8vw, 86px);
	font-weight: 400;
	line-height: 0.96;
	letter-spacing: -3px;
	color: #fff;
	text-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}

.about-image-copy h2 em {
	color: var(--shiva-gold-light);
}

.about-image-copy p {
	position: relative;
	margin: 0;
	max-width: 500px;
	padding: 28px 0 28px 35px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.88);
	border-left: 1px solid rgba(216, 184, 106, 0.75);
	text-shadow: 0 4px 18px rgba(0, 0, 0, 0.20);
}

.about-image-caption {
	position: absolute;
	left: 55px;
	bottom: 50px;
	z-index: 5;
	padding: 13px 18px;
	background: rgba(5, 25, 20, 0.70);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(216, 184, 106, 0.25);
	font-family: Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #e8d59c;
}


/* =========================================================
   SERVICES
   ========================================================= */

.about-service {
	position: relative;
	padding: 135px 0;
}

.about-service-light {
	background: var(--shiva-cream);
}

.about-service-dark {
	background: var(--shiva-green);
	color: #fff;
}

.about-service-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 110px;
	align-items: center;
}

.about-service-reverse {
	grid-template-columns: 0.95fr 1.05fr;
}

.about-service-image {
	position: relative;
	height: 590px;
	overflow: hidden;
	background: #d5d1c7;
	border-radius: 3px;
	box-shadow: 0 22px 55px rgba(8, 37, 31, 0.10);
}

.about-service-image::after {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(216, 184, 106, 0.42);
	pointer-events: none;
}

.about-service-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1),
		filter 0.8s ease;
}

.about-service-image:hover img {
	transform: scale(1.055);
	filter: saturate(1.04);
}

.about-service-content {
	max-width: 590px;
}

.about-service-content h2 {
	margin: 0 0 30px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 5vw, 72px);
	font-weight: 400;
	line-height: 1.01;
	letter-spacing: -2.5px;
}

.about-service-content p {
	margin: 0 0 23px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	color: #626b67;
}

.about-service-dark .about-service-content p {
	color: rgba(255, 255, 255, 0.65);
}

.about-text-link {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	margin-top: 18px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: none;
	color: var(--shiva-green);
	transition: gap 0.35s ease;
}

.about-service-dark .about-text-link {
	color: #fff;
}

.about-text-link span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--shiva-gold);
	border-radius: 50%;
	font-size: 16px;
	color: var(--shiva-gold);
	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

.about-text-link:hover {
	gap: 27px;
}

.about-text-link:hover span {
	background: var(--shiva-gold);
	color: var(--shiva-green);
	transform: rotate(-8deg);
}


/* =========================================================
   OWNER
   ========================================================= */

.about-owner {
	position: relative;
	padding: 150px 0;
	background: #e9e5da;
	overflow: hidden;
}

.about-owner::before {
	content: "PR";
	position: absolute;
	right: -30px;
	top: 70px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 260px;
	line-height: 1;
	color: rgba(8, 37, 31, 0.035);
}

.about-owner-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 120px;
	align-items: center;
}

.about-owner-photo {
	position: relative;
	width: 100%;
	max-width: 500px;
	height: 620px;
	overflow: hidden;
	background: #d3cec1;
	box-shadow: 0 25px 60px rgba(8, 37, 31, 0.10);
}

.about-owner-photo::after {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(216, 184, 106, 0.55);
	pointer-events: none;
	z-index: 2;
}

.about-owner-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.about-owner-photo:hover img {
	transform: scale(1.035);
}

.about-owner-content {
	max-width: 650px;
}

.about-owner-small {
	margin-bottom: 20px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #7a817d;
}

.about-owner-content h2 {
	margin: 0 0 35px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(60px, 6vw, 90px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -3px;
}

.about-owner-lead {
	max-width: 600px;
	margin: 0 0 35px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 25px;
	line-height: 1.5;
	color: var(--shiva-green);
}

.about-owner-content > p:not(.about-owner-lead) {
	margin: 0 0 24px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	color: #626b67;
}

.about-owner-signature {
	margin-top: 45px;
	font-family: "Brush Script MT", "Segoe Script", cursive;
	font-size: 38px;
	color: var(--shiva-green);
	transform: rotate(-3deg);
}


/* =========================================================
   WHY SHIVA — PREMIUM BRAND STATEMENT
   ========================================================= */

.about-trust {
	position: relative;
	min-height: 650px;
	display: flex;
	align-items: center;
	padding: 120px 0;
	background:
		radial-gradient(
			circle at 50% 42%,
			rgba(216, 184, 106, 0.12) 0%,
			rgba(216, 184, 106, 0.035) 25%,
			transparent 52%
		),
		linear-gradient(
			135deg,
			#123b31 0%,
			#08251f 48%,
			#061b16 100%
		);
	color: #fff;
	overflow: hidden;
}

.about-trust::before {
	content: "";
	position: absolute;
	width: 650px;
	height: 650px;
	border: 1px solid rgba(216, 184, 106, 0.08);
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation: trustOrbital 18s linear infinite;
}

.about-trust::after {
	content: "";
	position: absolute;
	width: 430px;
	height: 430px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.about-trust-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.about-trust-inner .about-section-label {
	margin-bottom: 35px;
}

.about-trust-inner h2 {
	margin: 0 auto 38px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(55px, 7vw, 100px);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -4px;
}

.about-trust-inner h2 strong {
	display: block;
	color: var(--shiva-gold);
	font-weight: 400;
}

.about-trust-inner p {
	max-width: 650px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.66);
}


/* =========================================================
   WHY SHIVA — DECORATIVE GOLD LINE
   ========================================================= */

.about-trust-inner::before {
	content: "";
	display: block;
	width: 1px;
	height: 65px;
	margin: 0 auto 35px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--shiva-gold)
	);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.about-final-cta {
	position: relative;
	min-height: 610px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			#102e27,
			#061c17
		);
	color: #fff;
	text-align: center;
}

.about-final-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 50% 40%,
			rgba(216, 184, 106, 0.11),
			transparent 42%
		);
}

.about-final-content {
	position: relative;
	z-index: 2;
	padding: 80px 30px;
	animation: aboutFadeUp 1s ease both;
}

.about-final-content .about-section-label {
	margin-bottom: 30px;
}

.about-final-content h2 {
	margin: 0 0 28px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(55px, 7vw, 100px);
	font-weight: 400;
	line-height: 0.96;
	letter-spacing: -4px;
}

.about-final-content p {
	max-width: 550px;
	margin: 0 auto 38px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.68);
}

.about-cta-button {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding: 16px 8px 16px 25px;
	border: 1px solid rgba(216, 184, 106, 0.65);
	color: #fff;
	text-decoration: none;
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	transition:
		background 0.35s ease,
		color 0.35s ease,
		padding 0.35s ease,
		transform 0.35s ease;
}

.about-cta-button span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--shiva-gold);
	color: var(--shiva-green);
	font-size: 17px;
}

.about-cta-button:hover {
	padding-left: 32px;
	background: var(--shiva-gold);
	color: var(--shiva-green);
	transform: translateY(-3px);
}


/* =========================================================
   SCROLL REVEAL SUPPORT
   ========================================================= */

/*
 * Works with common reveal classes if main.js adds
 * is-visible / visible / in-view.
 */

.reveal.is-visible,
.reveal.visible,
.reveal.in-view {
	animation: aboutReveal 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}


/*
 * Modern browsers:
 * animate image sections according to viewport position.
 */

@supports (animation-timeline: view()) {

	.about-large-image {
		animation: aboutImageReveal linear both;
		animation-timeline: view();
		animation-range: entry 5% cover 35%;
	}

	.about-trust-inner {
		animation: aboutTrustReveal linear both;
		animation-timeline: view();
		animation-range: entry 5% cover 35%;
	}
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes aboutFadeUp {

	from {
		opacity: 0;
		transform: translateY(35px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


@keyframes aboutReveal {

	from {
		opacity: 0;
		transform: translateY(45px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


@keyframes aboutHeroZoom {

	from {
		transform: scale(1.03);
	}

	to {
		transform: scale(1.075);
	}
}


@keyframes scrollDot {

	0% {
		transform: translate(-50%, 0);
		opacity: 1;
	}

	70% {
		transform: translate(-50%, 20px);
		opacity: 0;
	}

	100% {
		transform: translate(-50%, 0);
		opacity: 0;
	}
}


@keyframes trustOrbital {

	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}


@keyframes aboutImageReveal {

	from {
		opacity: 0.25;
		transform: scale(0.97);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}


@keyframes aboutTrustReveal {

	from {
		opacity: 0;
		transform: translateY(45px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

	.shiva-about-page .about-container {
		width: min(100% - 70px, 1000px);
	}

	.about-hero-content {
		left: 35px;
	}

	.about-story-grid,
	.about-owner-grid {
		gap: 65px;
	}

	.about-service-grid,
	.about-service-reverse {
		gap: 60px;
	}

	.about-large-image {
		height: 590px;
	}

	.about-image-copy {
		left: 45px;
		width: calc(100% - 90px);
		grid-template-columns: 1fr 0.8fr;
		gap: 55px;
	}

	.about-image-copy h2 {
		font-size: clamp(48px, 6vw, 70px);
	}

	.about-service-image {
		height: 500px;
	}

	.about-owner-photo {
		height: 540px;
	}

	.about-trust {
		min-height: 570px;
	}

	.about-trust::before {
		width: 500px;
		height: 500px;
	}

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.shiva-about-page .about-container {
		width: calc(100% - 40px);
	}


	/* HERO */

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

	.about-hero-content {
		left: 20px;
		right: 20px;
		bottom: 90px;
	}

	.about-hero h1 {
		font-size: 55px;
		letter-spacing: -2px;
	}

	.about-hero p {
		font-size: 15px;
		line-height: 1.7;
	}

	.about-hero-scroll {
		display: none;
	}


	/* GENERAL SECTIONS */

	.about-story,
	.about-image-story,
	.about-service,
	.about-owner {
		padding: 85px 0;
	}

	.shiva-about-page .about-section-label {
		margin-bottom: 30px;
		font-size: 9px;
		letter-spacing: 2px;
	}


	/* STORY */

	.about-story-grid,
	.about-service-grid,
	.about-service-reverse,
	.about-owner-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 45px;
	}

	.about-story-heading h2 {
		font-size: 48px;
	}

	.about-story-text .about-lead {
		font-size: 21px;
	}


	/* STATS */

	.about-stats {
		padding: 55px 0;
	}

	.about-stats-grid {
		grid-template-columns: 1fr 1fr;
	}

	.about-stat,
	.about-stat:first-child {
		padding: 35px 20px;
		border-right: 1px solid rgba(255, 255, 255, 0.15);
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.about-stat:nth-child(2n) {
		border-right: 0;
	}

	.about-stat:nth-child(3),
	.about-stat:nth-child(4) {
		border-bottom: 0;
	}

	.about-stat strong {
		font-size: 48px;
	}

	.about-stat p {
		font-size: 9px;
		line-height: 1.5;
	}


	/* NORTH EAST */

	.about-large-image {
		height: 610px;
	}

	.about-large-image::after {
		inset: 14px;
	}

	.about-image-copy {
		position: absolute;
		left: 30px;
		right: 30px;
		top: auto;
		bottom: 85px;
		width: auto;
		transform: none;
		display: block;
	}

	.about-image-copy h2 {
		font-size: 47px;
		line-height: 0.98;
		letter-spacing: -2px;
		margin-bottom: 28px;
	}

	.about-image-copy p {
		max-width: 100%;
		padding: 20px 0 0 20px;
		font-size: 14px;
		line-height: 1.75;
	}

	.about-image-caption {
		left: 30px;
		bottom: 25px;
		font-size: 8px;
		padding: 10px 12px;
		letter-spacing: 1.5px;
	}

	.about-image-story::after {
		display: none;
	}


	/* SERVICES */

	.about-service-content h2 {
		font-size: 48px;
	}

	.about-service-image {
		height: 380px;
		order: 1;
	}

	.about-service-content {
		order: 2;
	}

	.about-service-reverse .about-service-content {
		order: 2;
	}

	.about-service-reverse .about-service-image {
		order: 1;
	}


	/* OWNER */

	.about-owner-photo {
		height: 480px;
		max-width: none;
	}

	.about-owner-content h2 {
		font-size: 62px;
	}

	.about-owner-lead {
		font-size: 21px;
	}


	/* WHY SHIVA */

	.about-trust {
		min-height: 590px;
		padding: 90px 0;
	}

	.about-trust::before {
		width: 380px;
		height: 380px;
	}

	.about-trust::after {
		width: 270px;
		height: 270px;
	}

	.about-trust-inner h2 {
		font-size: 48px;
		line-height: 0.98;
		letter-spacing: -2px;
	}

	.about-trust-inner p {
		font-size: 14px;
		line-height: 1.8;
	}


	/* FINAL CTA */

	.about-final-cta {
		min-height: 560px;
	}

	.about-final-content h2 {
		font-size: 55px;
		letter-spacing: -2px;
	}

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.about-hero {
		height: 620px;
		min-height: 620px;
	}

	.about-hero h1 {
		font-size: 47px;
	}

	.about-hero p {
		font-size: 14px;
	}

	.about-large-image {
		height: 600px;
	}

	.about-image-copy {
		left: 25px;
		right: 25px;
		bottom: 78px;
	}

	.about-image-copy h2 {
		font-size: 42px;
	}

	.about-image-copy p {
		font-size: 13px;
	}

	.about-image-caption {
		left: 25px;
		right: 25px;
		bottom: 22px;
	}

	.about-service-image {
		height: 320px;
	}

	.about-owner-photo {
		height: 400px;
	}

	.about-owner-content h2 {
		font-size: 54px;
	}

	.about-trust {
		min-height: 550px;
	}

	.about-trust::before {
		width: 310px;
		height: 310px;
	}

	.about-trust-inner h2 {
		font-size: 43px;
	}

	.about-final-content h2 {
		font-size: 47px;
	}

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

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

	.about-hero-image img,
	.about-final-content,
	.about-hero-content,
	.about-large-image,
	.about-trust-inner {
		animation: none !important;
	}

	.about-large-image img,
	.about-service-image img,
	.about-owner-photo img,
	.about-stat,
	.about-text-link,
	.about-cta-button {
		transition: none !important;
	}

	.about-hero-scroll i::after,
	.about-trust::before {
		animation: none !important;
	}

}