/* =========================
   HERO — IMAGE + LUXURY TEXT
========================= */
.hero {
  position: relative;

  /* LOCKED HERO SIZE */
  height: 520px;            /* ← control this number */
  padding: 40px 0;          /* vertical breathing room only */

  background-image: url("../../assets/images/backgroundphoto.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  overflow: hidden;         /* CRITICAL */
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.65) 35%,
    rgba(255,255,255,0.30) 65%,
    rgba(255,255,255,0.00) 100%
  );

  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;

  max-width: 520px;
  margin-left: 24px; /* subtle move to the right */
}

/* =========================
   HERO TEXT — NEAR BLACK HIERARCHY
========================= */

/* HEADLINE — TRUE BLACK */
.hero-title {
  font-size: 3.1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #0b0b0b;

  text-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* SUBTITLE — SLIGHTLY LIGHTER THAN BLACK */
.hero-subtitle {
  margin-top: 28px;
  font-size: 1.15rem;
  line-height: 1.6;
  font-weight: 500;
  max-width: 720px;

  color: #1a1a1a; /* near-black, not gray */
  text-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

/* CTA ROW */
.hero-actions {
  margin-top: 44px;
  display: flex;
  gap: 24px;
  align-items: center;
}

/* PRIMARY CTA — SOLID */
.hero-primary {
  padding: 14px 30px;
  background: #0b0b0b;
  color: #ffffff;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;

  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.26);
}

/* SECONDARY CTA — NEAR BLACK */
.hero-secondary {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a; /* same family as subtitle */

  text-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.hero-secondary:hover {
  text-decoration: underline;
}

/* FOOTNOTE — SOFT BUT STILL BLACK */
.hero-note {
  margin-top: 30px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #2a2a2a; /* darkest acceptable “secondary” */

  text-shadow: 0 1px 2px rgba(0,0,0,0.10);
}