/* Generic reduced-height interior-page hero — shared by the Projects, About,
   and Contact pages (see template-parts/global/page-hero.php). Reduced
   height variant of the home hero: photo background + scrim, eyebrow,
   headline, subtext, optional CTA row — no video. One class family per
   page hero, not one modifier per page. */

.page-hero {
	position: relative;
	overflow: hidden;
	color: var(--cream);
	padding: 180px 0 80px;
}

.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img,
.page-hero__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__placeholder { background: linear-gradient(160deg, var(--ink), #2a2722); }
.page-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(21,20,15,0.55) 0%, rgba(21,20,15,0.45) 40%, rgba(21,20,15,0.88) 100%);
}

/* Header + hero share one horizontal container boundary: same max-width and
   100px side padding as .site-header__inner (see hero.css .hero__content.container
   for the home hero's identical override), so their left edges align. */
.page-hero__content.container {
	position: relative;
	z-index: 1;
	max-width: var(--container-max-width);
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
}

/* Generic eyebrow line above the headline — doubles as the Projects page's
   breadcrumb trail (nav + link + separator) and a plain eyebrow label
   elsewhere (About, Contact), same typography either way. */
.page-hero__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 24px; color: var(--cream-dim); }
.page-hero__eyebrow a { color: var(--gold); }
.page-hero__eyebrow span { margin: 0 6px; }

.page-hero__headline { font-size: clamp(32px, 4vw, 48px); margin: 0 0 20px; }
.page-hero__headline-accent { color: var(--gold); }

.page-hero__subtext { font-size: 16px; line-height: 1.7; color: var(--cream-dim); max-width: 640px; margin: 0; }

.page-hero__ctas { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 32px; }

/* Small "status line" — green dot + response-time text. Used below the
   Contact hero's CTAs and reused again inside the advisor card on the
   Contact page's message section (see template-parts/contact/message.php). */
.page-hero__status { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cream-dim); margin-top: 24px; }
.page-hero__status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.page-hero__status-highlight { color: var(--gold); }

@media (max-width: 640px) {
	.page-hero { padding: 140px 0 60px; }
	.page-hero__ctas .btn { width: 100%; }
}