/* Genesis Properties — hero rework.
   One full-height frame: lockup and headline left, positioning copy right,
   portfolio numbers along the bottom. The marble becomes a visible backdrop
   instead of a near-black texture. Loaded after the site stylesheet.
   The logo lockup (.hero-lockup / .hero-cart / .hero-word) is untouched. */

.hero--v2 {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(92px, 11vh, 124px) clamp(30px, 4vh, 46px);
}

/* Let the marble read. The site paints it on .hero behind a heavy gradient and
   hides .hero-bg entirely, so the backdrop is rebuilt here in two layers:
   the image (brightened) and a lighter scrim over it. */
.hero--v2 {
  background-image: none;
  background-color: var(--bg, #070808);
}

.hero--v2::before,
.hero--v2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero--v2::before {
  background: url(/marble.jpg) center 45% / cover no-repeat;
  filter: saturate(1.25) brightness(1.42) contrast(1.1);
}

.hero--v2::after {
  background: linear-gradient(
    112deg,
    rgba(7, 8, 8, 0.82) 0%,
    rgba(7, 8, 8, 0.52) 30%,
    rgba(7, 8, 8, 0.46) 60%,
    rgba(7, 8, 8, 0.74) 100%
  );
}

.hero--v2 .hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 6vh, 68px);
  width: 100%;
}

/* ── the two columns ────────────────────────────────────────────────────── */

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}

.hero--v2 .hero-tagline {
  margin: 6px 0 26px;
}

.hero--v2 .hero-h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(28px, 3.3vw, 47px);
  line-height: 1.02;
}

.hero-rule {
  display: block;
  width: 52px;
  height: 2px;
  background: var(--gp, #3f8f63);
  margin-top: clamp(24px, 3vh, 34px);
}

.hero--v2 .hero-cta {
  margin-top: clamp(26px, 3.4vh, 38px);
}

.hero-aside__big {
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 300;
  line-height: 1.38;
  letter-spacing: -0.008em;
  color: var(--ink, #eceded);
  margin: 0;
}

.hero-aside__small {
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2, rgba(236, 237, 237, 0.66));
  max-width: 52ch;
}

/* ── the numbers, folded in along the bottom ────────────────────────────── */

.hero--v2 .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding-top: clamp(26px, 3.5vh, 40px);
  border-top: 1px solid var(--hair, rgba(236, 237, 237, 0.14));
}

.hero--v2 .stat-value {
  font-size: clamp(28px, 3vw, 40px);
}

.hero--v2 .stat-label {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* ── the nav gets out of the way ────────────────────────────────────────── */

.nav-links a {
  color: var(--ink-2, rgba(236, 237, 237, 0.66));
}

.nav-links a:hover {
  color: var(--ink, #eceded);
}

.nav-links a.nav-cta {
  color: var(--ink, #eceded);
}

/* ── narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero--v2 .hero-h1 { max-width: 100%; }
  .hero-aside__small { max-width: 100%; }
}

@media (max-width: 640px) {
  .hero--v2 { min-height: auto; padding-block: 120px 44px; }
  .hero--v2 .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
}

/* ── calming the hero ───────────────────────────────────────────────────────
   Two problems: the wordmark and the headline were two heavy caps blocks at
   nearly the same size, fighting each other; and the marble was at full
   contrast directly behind the type. The logo artwork is untouched — it is
   only sized down so it reads as a label above the headline rather than a
   second headline. */


/* A quiet field under the text so the marble stops competing with the words. */
.hero--v2 .hero-inner::before {
  content: "";
  position: absolute;
  inset: -6vh -4vw;
  z-index: -1;
  background: radial-gradient(
    120% 90% at 26% 48%,
    rgba(7, 8, 8, 0.72) 0%,
    rgba(7, 8, 8, 0.52) 42%,
    rgba(7, 8, 8, 0) 78%
  );
  pointer-events: none;
}

.hero--v2 .hero-inner {
  position: relative;
}

/* ── the real logo in the hero ──────────────────────────────────────────────
   The lockup was being reconstructed from an injected cart glyph plus the words
   "Genesis Properties" set in Inter. That is not the logo. This uses the actual
   artwork — /logo-nav.png, the same file the nav uses — at hero scale.

   The markup is untouched: #hero-cart still exists for the script that fills it,
   and the wordmark and tagline stay in the page for screen readers and search
   engines. They are only removed visually, because the logo already contains
   both the name and the "Essential assets, enduring returns" line. */

.hero--v2 .hero-lockup {
  display: block;
  width: min(600px, 66vw);
  aspect-ratio: 5.597;
  background: url(/logo-nav.png) left center / contain no-repeat;
  margin: 0 0 clamp(18px, 2.6vh, 30px);
}

.hero--v2 .hero-cart {
  display: none;
}

.hero--v2 .hero-word,
.hero--v2 .hero-tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero--v2 .hero-lockup { width: min(420px, 84vw); }
}