/* hero.css */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--chalk);
  overflow: hidden;
  padding: 56px 0 64px;
}
.hero::after {
  content: "";
  position: absolute;
  right: -10%; top: -10%;
  width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgba(122,31,42,.18), transparent 70%);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__eyebrow {
  color: var(--bordeaux);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 18px;
}
.hero h1 {
  color: var(--chalk);
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.4rem);
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}
.hero h1 em { font-style: italic; color: #C9A2A8; }
.hero p.lead {
  color: #C9C5BD;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  max-width: 56ch;
  margin-bottom: 28px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero__signals {
  display: flex; flex-wrap: wrap; gap: 22px;
  border-top: 1px solid rgba(237,234,227,.18);
  padding-top: 22px; margin-top: 8px;
  font-size: 14px; color: #C9C5BD;
}
.hero__signals strong { color: var(--chalk); font-family: var(--font-display); font-size: 22px; display: block; margin-bottom: 2px; }

.hero__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 18px;
  font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--chalk);
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}

@media (min-width: 900px) {
  .hero { padding: 96px 0 112px; }
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
}

/* page-hero (for inner pages) */
.page-hero {
  background: var(--chalk);
  padding: 28px 0 40px;
  border-bottom: 1px solid var(--rule);
}
.page-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bordeaux);
  margin: 0 0 14px;
}
.page-hero h1 {
  margin: 0 0 14px;
  max-width: 22ch;
}
.page-hero p {
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .page-hero { padding: 40px 0 56px; }
}