/* ==========================================================================
   about.css – About the founder section and principles
   Part of the Devraj Pathak theme. Breakpoints are in responsive.css.
   ========================================================================== */

.dp-about--teaser { padding-top: calc(var(--dp-section) + 70px); }
.dp-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.dp-about__media { position: relative; padding: 0 60px 70px 0; }
.dp-about__img { width: 100%; border-radius: var(--dp-radius); object-fit: cover; aspect-ratio: 4 / 3.4; box-shadow: var(--dp-shadow); }
.dp-about__img--small {
	position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3;
	border: 8px solid var(--dp-white);
}
.dp-quote {
	margin: 30px 0 0; padding: 26px 28px;
	background: var(--dp-cream); border-left: 3px solid var(--dp-gold);
	border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
}
.dp-quote p { font-family: var(--dp-font-head); font-size: 22px; font-style: italic; line-height: 1.45; color: var(--dp-ink); margin-bottom: 10px; }
.dp-quote cite { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dp-gold); }

.dp-pillars { list-style: none; margin: 80px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dp-pillar {
	padding: 34px 30px; border: 1px solid var(--dp-line); border-radius: var(--dp-radius);
	transition: transform .3s var(--dp-ease), box-shadow .3s, border-color .3s;
}
.dp-pillar:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow); border-color: transparent; }
.dp-pillar__icon,
.dp-service__icon,
.dp-features__icon,
.dp-contact__icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 54px; height: 54px; border-radius: 14px;
	background: var(--dp-sand); color: var(--dp-forest-3);
	margin-bottom: 18px;
}
.dp-pillar__icon .dp-icon { width: 26px; height: 26px; }
.dp-pillar h3 { font-size: 25px; }
.dp-pillar p { margin: 0; color: var(--dp-muted); }