/* Hero */
.about-hero {
	position: relative;
	background: var(--mcc-navy);
	color: #fff;
	overflow: hidden;
}
.about-hero__bg { position: absolute; inset: 0; z-index: 0; }
.about-hero__img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.about-hero__inner { position: relative; z-index: 2; padding: 5.5rem 0 6rem; }

.about-hero__crumb {
	display: flex; align-items: center; gap: .7rem;
	font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
	margin-bottom: 1.4rem;
}
.about-hero__crumb a { color: rgba(255, 255, 255, .78); }
.about-hero__crumb a:hover { color: #fff; }
.about-hero__crumb span { color: rgba(255, 255, 255, .5); }
.about-hero__crumb .is-current { color: var(--mcc-green); }

.about-hero__title {
	color: #fff;
	font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -.02em;
	margin-bottom: 1.4rem;
}
.about-hero__hl { color: var(--mcc-yellow); display: block; }
.about-hero__lead {
	color: rgba(255, 255, 255, .92);
	font-size: 1.15rem;
	max-width: 40rem;
	margin-bottom: 1.8rem;
}
.about-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Glass "operating since" card */
.about-hero__card {
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 28px;
	padding: 2.3rem 2rem;
}
.about-hero__card-eyebrow {
	display: block;
	color: var(--mcc-green);
	font-weight: 800; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
	margin-bottom: .6rem;
}
.about-hero__card-year {
	display: block;
	font-family: var(--font-heading); font-weight: 900;
	font-size: clamp(3.5rem, 2rem + 5vw, 6rem); line-height: 1; color: #fff;
	letter-spacing: -.04em;
	margin-bottom: .8rem;
}
.about-hero__card-text { color: rgba(255, 255, 255, .85); margin-bottom: 1.4rem; }
.about-hero__card-stats {
	display: flex; gap: 1.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.about-hero__stat .n { display: block; font-weight: 900; font-size: 1.9rem; color: #fff; line-height: 1; }
.about-hero__stat .l {
	display: block; margin-top: .35rem;
	font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/* Story / Who We Are */
.about-story__media {
	position: relative;
	border-radius: 28px;
	overflow: visible;
	aspect-ratio: 5 / 6;
}
.about-story__img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 28px;
	box-shadow: 0 30px 70px rgba(22, 33, 15, .18);
}
.about-story__pill {
	position: absolute; left: 1.2rem; bottom: 1.2rem;
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255, 255, 255, .96);
	color: var(--mcc-heading);
	font-weight: 800; font-size: .95rem;
	padding: .7rem 1.1rem; border-radius: 60px;
}
.about-story__pill svg { color: var(--mcc-green-dark); }
.about-story__badge {
	position: absolute; top: 2.2rem; right: 0.8rem;
	display: flex; align-items: center; gap: 1rem;
	background: #fff; border-radius: 18px;
	padding: 1.2rem 1.4rem;
	box-shadow: 0 14px 20px rgba(22, 33, 15, .12);
}
.about-story__badge .n { font-weight: 900; font-size: 2.2rem; color: var(--mcc-green-dark); line-height: 1; }
.about-story__badge .l { font-weight: 700; color: var(--mcc-heading); font-size: .95rem; max-width: 11rem; }
.about-story__body p { margin-bottom: 1rem; }
.about-story__trust {
	display: flex; align-items: center; gap: 1.1rem;
	margin-top: 1.6rem; padding-top: 1.6rem;
	border-top: 1px solid var(--mcc-border);
}
.about-story__trust-icon {
	display: inline-flex; align-items: center; justify-content: center;
	flex: none; width: 56px; height: 56px; border-radius: 16px;
	background: rgba(111, 178, 86, .12); color: var(--mcc-green-dark);
}
.about-story__trust strong { display: block; color: var(--mcc-heading); }
.about-story__trust span { color: var(--mcc-body); font-weight: 600; }

/* Mission / Vision / Values */
.about-mvv__card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--mcc-border);
	border-radius: 28px;
	padding: 2.6rem 2.2rem;
	box-shadow: 0 4px 16px rgba(22, 33, 15, .07);
}
.about-mvv__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 82px; height: 82px; border-radius: 22px;
	color: #fff; margin-bottom: 1.2rem;
}
.about-mvv__icon--green { background: linear-gradient(135deg, var(--mcc-green-dark) 0%, var(--mcc-green) 100%); box-shadow: 0 14px 15px rgba(79, 142, 62, .3); }
.about-mvv__icon--blue  { background: linear-gradient(135deg, #2e6fa0 0%, #3f86bf 100%); box-shadow: 0 14px 15px rgba(46, 111, 160, .3); }
.about-mvv__icon--gold  { background: linear-gradient(135deg, #f4b400 0%, #ffce4d 100%); box-shadow: 0 14px 15px rgba(244, 180, 0, .32); }
.about-mvv__card h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.about-mvv__card p { color: var(--mcc-body); margin: 0; }

/* What We Do */
.about-do__title .about-do__hl { color: var(--mcc-blue); }
.about-do__list {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: .9rem 1.2rem; margin: 1.4rem 0 1.8rem;
}
.about-do__list li {
	display: flex; align-items: flex-start; gap: .6rem;
	font-weight: 700; color: var(--mcc-heading);
}
.about-do__list svg { color: var(--mcc-green-dark); flex: none; margin-top: 2px; }
.about-do__card {
	height: 100%;
	background: var(--mcc-light);
	border: 1px solid var(--mcc-border);
	border-radius: 22px;
	padding: 1.9rem 1.7rem;
	transition: transform .18s ease, box-shadow .18s ease;
}
.about-do__card:hover { transform: translateY(-4px); box-shadow: var(--mcc-shadow-sm); }
.about-do__card-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 16px;
	background: #fff; color: var(--mcc-green-dark);
	box-shadow: 0 4px 8px rgba(22, 33, 15, .07);
	margin-bottom: 1rem;
}
.about-do__card h4 { font-size: 1.25rem; margin-bottom: .5rem; }
.about-do__card p { color: var(--mcc-body); margin: 0; }

/* WHY CHOOSE US (numbered cards) */
.about-why__card {
	position: relative;
	height: 100%;
	background: #fff;
	border: 1px solid var(--mcc-border);
	border-radius: 18px;
	padding: 2.3rem 1.9rem;
	transition: transform .18s ease, box-shadow .18s ease;
}
.about-why__card:hover { transform: translateY(-4px); box-shadow: var(--mcc-shadow-sm); }
.about-why__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 18px;
	background: #eef2ea; color: var(--mcc-green-dark);
	margin-bottom: 1rem;
}
.about-why__num {
	position: absolute; top: 1.5rem; right: 1.6rem;
	background: var(--mcc-light);
	color: var(--mcc-green-dark);
	font-weight: 900; letter-spacing: .08em;
	padding: .35rem .8rem; border-radius: 60px;
	font-size: .95rem;
}
.about-why__card h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.about-why__card p { color: var(--mcc-body); margin: 0; }

/* Journey / Timeline */
.about-journey { background: #13222d; color: #fff; overflow: hidden; }
.about-journey__bg { position: absolute; inset: 0; z-index: 0; }
.about-journey__img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.about-journey .container { position: relative; z-index: 1; }
.about-journey__lead { color: rgba(255, 255, 255, .82); }

.about-timeline {
	position: relative;
	list-style: none;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}
.about-timeline::before {
	content: "";
	position: absolute; top: 0; bottom: 0; left: 50%;
	width: 3px; transform: translateX(-50%);
	background: #eef2ea;
}
.about-timeline__item {
	position: relative;
	width: 50%;
	padding: 1.4rem 3rem;
	box-sizing: border-box;
}
.about-timeline__item:nth-child(odd)  { left: 0; text-align: right; }
.about-timeline__item:nth-child(even) { left: 50%; text-align: left; }
.about-timeline__dot {
	position: absolute; top: 2.5rem;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--mcc-green-dark);
	box-shadow: 0 0 0 6px #eef2ea, 0 0 0 8px var(--mcc-green);
}
.about-timeline__item:nth-child(odd)  .about-timeline__dot { right: -11px; }
.about-timeline__item:nth-child(even) .about-timeline__dot { left: -11px; }
.about-timeline__card {
	background: var(--mcc-light);
	border: 1px solid var(--mcc-border);
	border-radius: 20px;
	padding: 1.8rem 1.9rem;
	text-align: left;
	display: inline-block;
}
.about-timeline__tag {
	display: block;
	color: var(--mcc-green-dark);
	font-weight: 900; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
	margin-bottom: .4rem;
}
.about-timeline__card h3 { font-size: 1.35rem; color: var(--mcc-heading); margin-bottom: .5rem; }
.about-timeline__card p { color: var(--mcc-body); margin: 0; }

/* Eco Commitment */
.about-eco {
	position: relative;
	background: linear-gradient(135deg, #1a2e12 0%, #0f1f0a 60%, #1f4e73 100%);
	color: #fff;
	overflow: hidden;
}
.about-eco__glow { position: absolute; border-radius: 50%; filter: blur(30px); z-index: 0; pointer-events: none; }
.about-eco__glow--1 { width: 480px; height: 480px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(111, 178, 86, .18), transparent 65%); }
.about-eco__glow--2 { width: 400px; height: 400px; bottom: -160px; left: -120px; background: radial-gradient(circle, rgba(46, 111, 160, .18), transparent 65%); }
.about-eco .container { position: relative; z-index: 1; }
.about-eco__hl { color: var(--mcc-green); }
.about-eco__lead { color: rgba(255, 255, 255, .88); font-size: 1.1rem; margin-bottom: 1.6rem; }
.about-eco__features { display: flex; flex-direction: column; gap: 1.3rem; }
.about-eco__feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.about-eco__feature-icon {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 14px;
	background: rgba(111, 178, 86, .22);
	border: 1px solid rgba(111, 178, 86, .42);
	color: #fff;
}
.about-eco__feature h4 { color: #fff; font-size: 1.2rem; margin-bottom: .2rem; }
.about-eco__feature p { color: rgba(255, 255, 255, .78); margin: 0; }

.about-eco__card {
	backdrop-filter: blur(3px);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 28px;
	padding: 2.8rem 2.6rem;
}
.about-eco__stat {
	display: block;
	font-family: var(--font-heading); font-weight: 900;
	font-size: clamp(4rem, 2.5rem + 6vw, 6.75rem); line-height: 1;
	letter-spacing: -.04em;
	background: linear-gradient(110deg, var(--mcc-green) 0%, var(--mcc-gold) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	margin-bottom: .4rem;
}
.about-eco__card h3 { color: #fff; font-size: 1.6rem; margin-bottom: .5rem; }
.about-eco__card > p { color: rgba(255, 255, 255, .82); margin-bottom: 1.4rem; }
.about-eco__checks {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1rem;
	margin: 0; padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.about-eco__checks li { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: #fff; }
.about-eco__checks svg { color: var(--mcc-green); flex: none; }

/* Service Areas */
.about-areas__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem;
	margin-bottom: 2.4rem;
}
.about-areas__chip {
	display: flex; align-items: center; gap: .7rem;
	background: #fff; border: 1px solid var(--mcc-border);
	border-radius: 14px; padding: 1.1rem 1.4rem;
	font-weight: 700; color: var(--mcc-heading);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.about-areas__chip:hover { transform: translateY(-2px); box-shadow: var(--mcc-shadow-sm); border-color: var(--mcc-green); color: var(--mcc-heading); }
.about-areas__chip svg { color: var(--mcc-green-dark); flex: none; }

/* Responsive */
@media (max-width: 991.98px) {
	.about-hero__inner { padding: 3.5rem 0 4rem; }
	.about-hero__card { margin-top: 2.5rem; }
	.about-story__media { margin-bottom: 2.5rem; }
	.about-areas__grid { grid-template-columns: repeat(3, 1fr); }

	.about-timeline::before { left: 9px; }
	.about-timeline__item,
	.about-timeline__item:nth-child(odd),
	.about-timeline__item:nth-child(even) {
		width: 100%; left: 0; text-align: left; padding: 1rem 0 1rem 2.6rem;
	}
	.about-timeline__item:nth-child(odd)  .about-timeline__dot,
	.about-timeline__item:nth-child(even) .about-timeline__dot { left: -1px; right: auto; top: 1.9rem; }
}
@media (max-width: 575.98px) {
	.about-do__list { grid-template-columns: 1fr; }
	.about-eco__checks { grid-template-columns: 1fr; }
	.about-areas__grid { grid-template-columns: repeat(2, 1fr); }
	.about-story__badge { right: 0; }
}