/*
 * About Us page
 *
 * Uses only local theme tokens and CSS-built decorative fields. There are no
 * external images, fonts, certificates, team portraits, maps, or social links.
 */

.pp-about-main {
	--pp-about-gutter: clamp(20px, 4vw, 32px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	margin-block-start: 0;
	overflow: clip;
}

.pp-about-main > * {
	margin-block-start: 0;
}

.pp-about-section {
	margin-block-start: 0;
	scroll-margin-top: 132px;
}

.pp-about-shell {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: var(--pp-about-gutter);
	width: 100%;
}

.pp-about-main h1,
.pp-about-main h2,
.pp-about-main h3,
.pp-about-main p,
.pp-about-main ul {
	margin-block-start: 0;
}

.pp-about-main h1,
.pp-about-main h2,
.pp-about-main h3 {
	color: var(--wp--preset--color--purple-900);
}

.pp-about-main h2 {
	font-size: clamp(2rem, 4vw, 3.2rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin-block-end: 24px;
}

.pp-about-main h3 {
	font-size: clamp(1.05rem, 2vw, 1.24rem);
	line-height: 1.25;
}

.pp-about-main p,
.pp-about-main li {
	line-height: 1.7;
}

.pp-about-eyebrow {
	color: var(--wp--preset--color--purple-700);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1.3 !important;
	margin-block-end: 18px;
	text-transform: uppercase;
}

.pp-about-eyebrow--light {
	color: var(--wp--preset--color--yellow-300);
}

.pp-about-section-heading {
	max-width: 820px;
}

.pp-about-section-heading > p:last-child,
.pp-about-daily__content > p,
.pp-about-quality__content > p,
.pp-about-customer-care__content > p,
.pp-about-team__content > p,
.pp-about-final__inner > p {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
}

/* Hero */
.pp-about-hero {
	background:
		radial-gradient(circle at 88% 20%, rgb(252 236 241 / 90%), transparent 30%),
		linear-gradient(125deg, var(--wp--preset--color--cream-100) 0%, var(--wp--preset--color--white) 68%);
	border-bottom: 12px solid var(--wp--preset--color--purple-900);
	padding-block: clamp(72px, 9vw, 116px);
	position: relative;
}

.pp-about-hero::before {
	background: var(--wp--preset--color--gold-500);
	content: "";
	height: 2px;
	left: 0;
	opacity: 0.75;
	position: absolute;
	top: 48px;
	width: min(18vw, 230px);
}

.pp-about-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 7vw, 96px);
	grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
}

.pp-about-hero__content {
	max-width: 740px;
	position: relative;
	z-index: 2;
}

.pp-about-hero__title {
	font-size: clamp(3rem, 5.7vw, 5.5rem);
	letter-spacing: -0.055em;
	line-height: 0.96;
	margin-block-end: 28px;
}

.pp-about-hero__intro {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.08rem, 1.65vw, 1.3rem);
	max-width: 680px;
}

.pp-about-hero__market {
	border-left: 3px solid var(--wp--preset--color--gold-500);
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin-block-start: 30px;
	max-width: 580px;
	padding-left: 18px;
}

.pp-about-hero__visual {
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 33% 29%, var(--wp--preset--color--cream-100) 0 9%, transparent 9.5%),
		radial-gradient(circle at 74% 34%, rgb(199 155 75 / 48%) 0 5%, transparent 5.5%),
		linear-gradient(145deg, rgb(241 235 247 / 94%), rgb(252 236 241 / 84%));
	border: 1px solid rgb(93 58 130 / 18%);
	border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
	box-shadow: 0 32px 70px rgb(52 32 79 / 14%);
	max-width: 460px;
	position: relative;
}

.pp-about-hero__visual::before,
.pp-about-hero__visual::after {
	border: 1px solid rgb(93 58 130 / 35%);
	border-radius: 50%;
	content: "";
	position: absolute;
}

.pp-about-hero__visual::before {
	inset: 15%;
}

.pp-about-hero__visual::after {
	background: rgb(93 58 130 / 15%);
	border: 0;
	bottom: 8%;
	height: 38%;
	right: 5%;
	width: 38%;
}

.pp-about-hero__visual-word {
	bottom: 15%;
	color: var(--wp--preset--color--purple-900);
	font-size: clamp(0.72rem, 1.1vw, 0.9rem);
	font-weight: 850;
	left: 15%;
	letter-spacing: 0.2em;
	line-height: 1.8 !important;
	position: absolute;
	z-index: 2;
}

/* Why PurePaws exists */
.pp-about-exists {
	background: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-about-editorial {
	display: grid;
	gap: clamp(40px, 8vw, 120px);
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.pp-about-editorial__body {
	border-left: 3px solid var(--wp--preset--color--gold-500);
	padding-left: clamp(24px, 4vw, 48px);
}

.pp-about-editorial__body p {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.pp-about-editorial__body p:last-child {
	margin-block-end: 0;
}

/* Approach */
.pp-about-approach {
	background: var(--wp--preset--color--lilac-100);
	padding-block: clamp(72px, 9vw, 108px);
}

.pp-about-approach__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-start: clamp(40px, 6vw, 64px);
}

.pp-about-care-card {
	background: var(--wp--preset--color--white);
	border-top: 4px solid var(--wp--preset--color--purple-500);
	box-sizing: border-box;
	min-height: 245px;
	padding: 28px 24px;
}

.pp-about-care-card:nth-child(2) {
	border-top-color: var(--wp--preset--color--gold-500);
}

.pp-about-care-card:nth-child(3) {
	border-top-color: #b789a0;
}

.pp-about-care-card:nth-child(4) {
	border-top-color: var(--wp--preset--color--yellow-300);
}

.pp-about-index {
	color: var(--wp--preset--color--purple-500);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.15em;
}

.pp-about-care-card h3 {
	margin-block: 42px 12px;
}

.pp-about-care-card p:last-child {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin-block-end: 0;
}

/* Care that fits daily life */
.pp-about-daily {
	background: var(--wp--preset--color--cream-100);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-about-daily__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 8vw, 110px);
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
}

.pp-about-checklist {
	background: var(--wp--preset--color--white);
	border: 1px solid rgb(93 58 130 / 16%);
	border-radius: var(--wp--custom--radius--card, 20px);
	box-shadow: 0 20px 45px rgb(52 32 79 / 8%);
	list-style: none;
	margin: 0;
	padding: 24px 32px;
}

.pp-about-checklist li {
	border-bottom: 1px solid rgb(93 58 130 / 14%);
	color: var(--wp--preset--color--purple-900);
	font-weight: 700;
	padding: 16px 0 16px 34px;
	position: relative;
}

.pp-about-checklist li::before {
	border: 2px solid var(--wp--preset--color--purple-500);
	border-radius: 50%;
	content: "";
	height: 10px;
	left: 0;
	position: absolute;
	top: 23px;
	width: 10px;
}

.pp-about-checklist li:last-child {
	border-bottom: 0;
}

/* Malaysia and Singapore */
.pp-about-regions {
	background:
		radial-gradient(circle at 82% 36%, rgb(246 217 107 / 18%), transparent 22%),
		var(--wp--preset--color--purple-900);
	color: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-about-regions__inner {
	max-width: 930px;
}

.pp-about-regions h2 {
	color: var(--wp--preset--color--white);
	max-width: 820px;
}

.pp-about-regions p:not(.pp-about-eyebrow) {
	color: rgb(255 255 255 / 82%);
	font-size: clamp(1.02rem, 1.7vw, 1.2rem);
	max-width: 800px;
}

/* Transparency */
.pp-about-transparency {
	background: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 108px);
}

.pp-about-transparency__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: 48px;
}

.pp-about-transparency__grid h3 {
	background: linear-gradient(135deg, var(--wp--preset--color--cream-100), var(--wp--preset--color--white));
	border: 1px solid rgb(93 58 130 / 14%);
	border-radius: 14px;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.98rem;
	margin: 0;
	min-height: 90px;
	padding: 24px;
}

/* Quality */
.pp-about-quality {
	background: var(--wp--preset--color--blush-100);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-about-quality__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 8vw, 120px);
	grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
}

.pp-about-quality__visual {
	align-items: center;
	aspect-ratio: 1;
	background: rgb(255 255 255 / 65%);
	border: 1px solid rgb(93 58 130 / 24%);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	max-width: 330px;
	position: relative;
}

.pp-about-quality__visual::before {
	border: 1px solid rgb(199 155 75 / 65%);
	border-radius: 50%;
	content: "";
	inset: 15%;
	position: absolute;
}

.pp-about-quality__visual p {
	color: var(--wp--preset--color--purple-900);
	font-size: clamp(0.83rem, 1.3vw, 1rem);
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.75 !important;
	position: relative;
	text-align: center;
}

/* Customer care */
.pp-about-customer-care {
	background: var(--wp--preset--color--cream-100);
	padding-block: clamp(72px, 9vw, 108px);
}

.pp-about-customer-care__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 8vw, 110px);
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
}

.pp-about-customer-care__topics {
	background: var(--wp--preset--color--white);
	border: 1px solid rgb(93 58 130 / 14%);
	border-radius: 24px;
	padding: 24px 34px;
}

.pp-about-customer-care__topics p {
	border-bottom: 1px solid rgb(93 58 130 / 16%);
	color: var(--wp--preset--color--purple-900);
	font-size: 0.95rem;
	font-weight: 750;
	margin: 0;
	padding-block: 15px;
	text-align: center;
}

.pp-about-customer-care__topics p:last-child {
	border-bottom: 0;
}

/* Responsible communication */
.pp-about-responsible {
	background: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-about-responsible__panel {
	background: linear-gradient(110deg, var(--wp--preset--color--lilac-100), rgb(255 248 236 / 82%));
	border-left: 6px solid var(--wp--preset--color--gold-500);
	box-sizing: border-box;
	max-width: 1100px;
	padding-block: clamp(48px, 7vw, 82px);
	padding-left: clamp(28px, 7vw, 96px);
	padding-right: clamp(28px, 7vw, 96px);
}

.pp-about-responsible__panel h2 {
	max-width: 760px;
}

.pp-about-responsible__panel > p:last-child {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.05rem, 1.7vw, 1.2rem);
	font-weight: 650;
	max-width: 850px;
}

/* Team */
.pp-about-team {
	background: var(--wp--preset--color--lilac-100);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-about-team__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 8vw, 110px);
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.pp-about-team__visual {
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle at 25% 30%, rgb(199 155 75 / 34%) 0 7%, transparent 7.5%),
		radial-gradient(circle at 70% 66%, rgb(93 58 130 / 18%) 0 20%, transparent 20.5%),
		var(--wp--preset--color--white);
	border: 1px solid rgb(93 58 130 / 16%);
	border-radius: var(--wp--custom--radius--card, 20px);
	box-shadow: 0 22px 50px rgb(52 32 79 / 10%);
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	padding: 34px;
	position: relative;
}

.pp-about-team__visual::before {
	border: 1px solid rgb(93 58 130 / 32%);
	border-radius: 50%;
	content: "";
	height: 48%;
	left: 15%;
	position: absolute;
	top: 18%;
	width: 36%;
}

.pp-about-team__visual p {
	align-self: flex-end;
	color: var(--wp--preset--color--purple-900);
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.18em;
	line-height: 1.8 !important;
	position: relative;
	text-align: right;
}

/* Final CTA */
.pp-about-final {
	background:
		radial-gradient(circle at 18% 50%, rgb(199 155 75 / 18%), transparent 20%),
		var(--wp--preset--color--blush-100);
	padding-block: clamp(72px, 9vw, 108px);
}

.pp-about-final__inner {
	max-width: 900px;
	text-align: center;
}

.pp-about-final__inner > p {
	margin-inline: auto;
	max-width: 720px;
}

.pp-about-actions {
	justify-content: center;
	margin-block-start: 32px;
}

.pp-about-actions .wp-block-button__link {
	align-items: center;
	background: var(--wp--preset--color--purple-700);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--control, 12px);
	box-sizing: border-box;
	color: var(--wp--preset--color--white);
	display: inline-flex;
	font-size: 1rem;
	font-weight: 750;
	justify-content: center;
	line-height: 1.2;
	min-height: 49px;
	padding: 13px 24px;
	text-decoration: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.pp-about-actions .wp-block-button__link:hover {
	background: var(--wp--preset--color--purple-900);
	transform: translateY(-2px);
}

.pp-about-actions .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold-500);
	outline-offset: 4px;
}

/* Administrator-only information gaps emitted by a server-rendered block. */
.pp-about-information-gap {
	background: var(--wp--preset--color--white);
	border: 2px dashed var(--wp--preset--color--warning);
	border-radius: 12px;
	box-sizing: border-box;
	grid-column: 1 / -1;
	margin-block-start: 24px;
	padding: 18px 20px;
}

.pp-about-information-gap p {
	color: var(--wp--preset--color--ink);
	font-size: 0.9rem;
	margin-block-end: 4px;
}

.pp-about-information-gap__label {
	color: var(--wp--preset--color--warning) !important;
	font-size: 0.72rem !important;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 980px) {
	.pp-about-hero__grid,
	.pp-about-daily__grid,
	.pp-about-quality__grid,
	.pp-about-customer-care__grid,
	.pp-about-team__grid {
		grid-template-columns: 1fr;
	}

	.pp-about-hero__visual,
	.pp-about-quality__visual {
		justify-self: center;
		max-width: 360px;
		width: 78%;
	}

	.pp-about-approach__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pp-about-transparency__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pp-about-team__visual {
		max-width: 620px;
		width: 100%;
	}
}

@media (max-width: 700px) {
	.pp-about-section {
		scroll-margin-top: 112px;
	}

	.pp-about-hero {
		padding-block: 64px 72px;
	}

	.pp-about-hero__grid,
	.pp-about-editorial {
		grid-template-columns: 1fr;
	}

	.pp-about-hero__visual {
		max-width: 310px;
		width: 88%;
	}

	.pp-about-editorial__body {
		padding-left: 24px;
	}

	.pp-about-approach__grid,
	.pp-about-transparency__grid {
		grid-template-columns: 1fr;
	}

	.pp-about-care-card {
		min-height: 205px;
	}

	.pp-about-care-card h3 {
		margin-block: 30px 10px;
	}

	.pp-about-quality__visual {
		max-width: 240px;
	}

	.pp-about-customer-care__topics {
		padding: 22px 26px;
	}
}

@media (max-width: 480px) {
	.pp-about-hero__title {
		font-size: clamp(2.65rem, 13vw, 3.45rem);
	}

	.pp-about-hero__visual {
		width: 100%;
	}

	.pp-about-checklist {
		padding-inline: 24px;
	}

	.pp-about-responsible__panel {
		border-left-width: 4px;
		padding-inline: 24px;
	}

	.pp-about-team__visual {
		padding: 24px;
	}

	.pp-about-actions,
	.pp-about-actions .wp-block-button,
	.pp-about-actions .wp-block-button__link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-about-main *,
	.pp-about-main *::before,
	.pp-about-main *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}