.hero { padding: 0; overflow: hidden; }

.hero-image-full {
  position: relative;
  width: 100%;
  min-height: 640px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--bg) 0%, var(--bg) 32%, color-mix(in srgb, var(--bg) 85%, transparent) 45%, color-mix(in srgb, var(--bg) 30%, transparent) 62%, transparent 78%);
}
.hero-wrap {
  position: relative;
  z-index: 2;
  padding-left: 6vw;
}
.hero-content { max-width: 500px; padding: 80px 0; }
.hero-content .eyebrow { color: var(--accent); }
.hero-content .eyebrow::before { background: var(--accent); }
.hero-content h1 { color: var(--ink); }
.hero-content p.lead { font-size: 18px; color: var(--ink-soft); max-width: 440px; margin-bottom: 34px; }
.hero-content .btn-secondary { border-color: var(--line); color: var(--ink); }

@media (max-width: 900px) {
  .hero-image-full { min-height: 520px; }
  .hero-overlay { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 45%, color-mix(in srgb, var(--bg) 20%, transparent) 75%); }
  .hero-wrap { padding-left: 32px; }
}

/*
 * "banner" variant — a shorter page-header hero (Work → Design systems
 * and similar). Height is capped rather than min-height'd tall, the
 * gradient becomes a flat grey scrim over the full photo (so the title
 * reads clearly wherever it sits, not just within a reserved text
 * panel), and hero-wrap switches from the homepage's asymmetric 6vw
 * text-left padding to the site's standard centered .wrap sizing.
 */
/* No 4px reveal gap here — that's a deliberate homepage-only touch (see
   .hero-image-full above); on this variant the photo needs to sit flush
   against whatever section follows (e.g. Feature Grid's dark band), or
   that gap shows as a stray sliver of the page's base background colour
   between the two. */
.hero-style-banner .hero-image-full { min-height: 0; height: 360px; margin-bottom: 0; }
.hero-style-banner .hero-overlay { background: rgba(15, 15, 20, 0.55); }
.hero-style-banner .hero-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}
.hero-style-banner .hero-content { max-width: 640px; padding: 0; }
.hero-style-banner .hero-content .eyebrow { color: rgba(255,255,255,0.85); }
.hero-style-banner .hero-content .eyebrow::before { background: rgba(255,255,255,0.85); }
.hero-style-banner .hero-content h1 { color: #fff; font-size: 40px; }
.hero-style-banner .hero-content p.lead { color: rgba(255,255,255,0.85); }

@media (max-width: 900px) {
  .hero-style-banner .hero-image-full { height: 280px; }
}