/* Generic Page + 404 + homepage Selected Work */

/* Hero */
.hp-page-hero {
	padding: 72px 0 48px;
	background: var(--h-color-surface);
	border-bottom: 1px solid var(--h-color-border-subtle);
}
.hp-page-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.hp-page-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	color: var(--h-color-text-secondary);
	margin-bottom: 20px;
}
.hp-page-hero__crumbs a {
	color: var(--h-color-text-secondary);
	text-decoration: none;
}
.hp-page-hero__crumbs a:hover { color: var(--h-color-primary); }
.hp-page-hero__eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h-color-primary);
	margin-bottom: 16px;
}
.hp-page-hero__title {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--h-color-heading, var(--h-color-text));
	margin: 0 0 16px;
}
.hp-page-hero__desc {
	font-size: 19px;
	line-height: 1.6;
	color: var(--h-color-text-secondary);
	margin: 0;
}
.hp-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}
.hp-page-hero--404 { padding: 110px 0 120px; border-bottom: 0; }

/* Body */
.hp-page-body { padding: 64px 0 88px; }

.hp-prose {
	max-width: 760px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
	color: var(--h-color-text);
}
.hp-prose > * + * { margin-top: 1.1em; }
.hp-prose h2 {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--h-color-heading, var(--h-color-text));
	margin-top: 2em;
}
.hp-prose h3 {
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--h-color-heading, var(--h-color-text));
	margin-top: 1.6em;
}
.hp-prose h2:first-child,
.hp-prose h3:first-child { margin-top: 0; }
.hp-prose a { color: var(--h-color-primary); text-decoration: underline; text-underline-offset: 3px; }
.hp-prose a.hp-btn { text-decoration: none; }
.hp-prose a.hp-btn--primary { color: #fff; }
.hp-prose a.hp-btn--secondary { color: var(--h-color-primary); }
.hp-prose ul,
.hp-prose ol { padding-left: 1.4em; }
.hp-prose li { margin-bottom: 0.5em; }
.hp-prose li::marker { color: var(--h-color-primary); }
.hp-prose strong { color: var(--h-color-heading, var(--h-color-text)); }
.hp-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hp-prose th,
.hp-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--h-color-border-subtle); }

/* Cards and call-to-action blocks used inside page content (About / Contact) */
.hp-prose .hp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 16px;
	margin-top: 1.4em;
}
.hp-prose .hp-card {
	background: var(--h-color-surface);
	border: 1px solid var(--h-color-border-subtle);
	border-radius: 12px;
	padding: 20px;
	line-height: 1.6;
}
.hp-prose .hp-card h3 { margin: 0 0 6px; font-size: 18px; }
.hp-prose .hp-card p { margin: 0; font-size: 15px; color: var(--h-color-text-secondary); }
.hp-prose .hp-cta-box {
	margin-top: 2.4em;
	padding: 32px;
	border-radius: 16px;
	background: var(--h-color-surface);
	border: 1px solid var(--h-color-border-subtle);
	text-align: center;
}
.hp-prose .hp-cta-box h2 { margin-top: 0; }
.hp-prose .hp-cta-box .hp-btn { margin: 8px 6px 0; }

/* Homepage: Selected Work */
.hp-selected-work { padding: 96px 0; }
.hp-selected-work__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.hp-selected-work__eyebrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h-color-primary);
	margin-bottom: 12px;
}
.hp-selected-work__title {
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--h-color-heading, var(--h-color-text));
	margin: 0 0 16px;
}
.hp-selected-work__desc { font-size: 18px; line-height: 1.6; color: var(--h-color-text-secondary); margin: 0; }
.hp-selected-work__more { text-align: center; margin-top: 48px; }

@media (max-width: 767px) {
	.hp-page-hero { padding: 48px 0 36px; }
	.hp-page-hero__title { font-size: 32px; }
	.hp-page-hero__desc { font-size: 17px; }
	.hp-page-body { padding: 44px 0 64px; }
	.hp-prose { font-size: 16px; }
	.hp-prose h2 { font-size: 24px; }
	.hp-selected-work { padding: 64px 0; }
	.hp-selected-work__title { font-size: 30px; }
}
@media (max-width: 480px) {
	.hp-page-hero .hp-container,
	.hp-page-body .hp-container,
	.hp-selected-work .hp-container { padding-left: 20px; padding-right: 20px; }
	.hp-prose .hp-cta-box { padding: 24px 18px; }
}