/**
 * The Precisely Promise — guarantee block.
 * Matches PP brand: navy (--pp-navy #002952), blue (--pp-blue #003D82),
 * gold accent (#d4af37), Poppins headings, rounded cards. Fresh + modern:
 * gold top-accent reveal + card lift on hover, accessible contrast,
 * reduced-motion safe. Scoped under .pp-promise.
 */
.pp-promise {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 20px;
}
.pp-promise__intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 40px;
}
.pp-promise__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8a6a00; /* accessible dark-gold (AA on white) */
	margin-bottom: 10px;
}
.pp-promise__title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	color: var(--pp-navy, #002952);
	margin: 0 0 10px;
	line-height: 1.2;
}
.pp-promise__sub {
	font-size: 1.02rem;
	line-height: 1.6;
	color: #475569; /* slate-600, >4.5:1 on white */
	margin: 0;
}
.pp-promise__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.pp-promise__card {
	position: relative;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 28px 22px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 41, 82, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pp-promise__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #d4af37, #f0d97a);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.pp-promise__card:hover,
.pp-promise__card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 41, 82, 0.12);
	border-color: #cdd9e8;
}
.pp-promise__card:hover::before,
.pp-promise__card:focus-within::before {
	transform: scaleX(1);
}
.pp-promise__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(145deg, #eaf1fb, #f7faff);
	color: var(--pp-blue, #003d82);
	margin-bottom: 16px;
}
.pp-promise__icon .pp-shield-icon {
	width: 38px;
	height: 38px;
}
.pp-promise__card-title {
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--pp-navy, #002952);
	margin: 0 0 8px;
	line-height: 1.3;
}
.pp-promise__card-body {
	font-size: 0.93rem;
	line-height: 1.55;
	color: #475569;
	margin: 0;
}
.pp-promise__foot {
	text-align: center;
	margin: 34px 0 0;
}
.pp-promise__link {
	display: inline-block;
	font-weight: 600;
	color: var(--pp-blue, #003d82);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.pp-promise__link:hover,
.pp-promise__link:focus-visible {
	border-color: #d4af37;
	color: var(--pp-navy, #002952);
}
@media (max-width: 1024px) {
	.pp-promise__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.pp-promise__grid { grid-template-columns: 1fr; }
	.pp-promise { padding: 40px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.pp-promise__card,
	.pp-promise__card::before { transition: none; }
	.pp-promise__card:hover,
	.pp-promise__card:focus-within { transform: none; }
}

/* Enlarge the "The Precisely Promise" eyebrow (owner request). Originally
   scoped to .home only; 2026-05-31 owner asked the /precisely-promise/ page
   to match the homepage size, so the scope is dropped — applies wherever the
   block renders. Comes after the base .pp-promise__eyebrow rule above, so it
   wins on equal specificity. */
.pp-promise__eyebrow {
	font-size: clamp(20px, 2.6vw, 28px);
	letter-spacing: 0.1em;
	margin-bottom: 14px;
}