.hero { padding-top: 20px; padding-bottom: 32px; }

.hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(46px, 12vw, 66px);
  line-height: 0.92; letter-spacing: -0.04em;
  margin: 0 0 18px; text-wrap: balance;
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.hero h1 .scribble { display: inline-block; position: relative; }

.hero h1 .scribble::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -4%;
  height: 14%; background: var(--accent-2); opacity: 0.3; z-index: -1;
  border-radius: 50% 30%;
}

.hero .lede {
  font-family: var(--font-display); font-size: clamp(16px, 1.8vw, 18px); font-style: italic;
  line-height: 1.45; color: var(--ink); margin: 0 0 24px;
}

.hero-card {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 4/5; margin-bottom: 24px;
  border: 6px solid var(--bg);
  background: url('../assets/developments/hero/hero.webp') center/cover no-repeat;
  box-shadow: 0 22px 48px -18px rgb(31 42 34 / 40%);
}

.hero-card::after { display: none; }

.hero-loc {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgb(31 42 34 / 42%);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid rgb(255 252 247 / 20%);
  border-radius: var(--radius-pill);
  color: var(--surface);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
}
.hero-loc .leaf-mini { width: 8px; height: 8px; flex: 0 0 8px; margin: 0; background: var(--surface); }

.hero-stamp {
  position: absolute; top: 14px; right: 14px; width: 78px; height: 78px; z-index: 2;
  background: var(--accent); color: var(--surface); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 12px; line-height: 1.1; transform: rotate(-10deg);
  box-shadow: var(--shadow-accent);
}
.hero-actions { display: flex; flex-direction: column; gap: 10px; }

/* ─── Tablet+ (≥ 600px) ─────────────────────────────────────────── */
@media (width >= 600px) {
  .hero { padding-top: 32px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(48px, 10vw, 68px); }
  .hero .lede { font-size: clamp(18px, 2vw, 20px); }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
  }
  .hero-card { margin-bottom: 0; aspect-ratio: 3/4; }
  .hero-actions { justify-content: flex-start; }
}

/* ─── Desktop (≥ 1024px) ─────────────────────────────────────────── */
@media (width >= 1024px) {
  .hero { padding-top: 40px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(52px, 6vw, 76px); }
  .hero .lede { font-size: clamp(20px, 2.2vw, 22px); }
  .hero-grid { gap: 48px; }
  .hero-actions { flex-direction: row; gap: 14px; }
  .hero-actions .btn { width: auto; }
}

/* ─── Hover ──────────────────────────────────────────────────────── */
@media (hover: hover) {
  .hero-actions .btn:hover { transform: translateY(-1px); }
  .hero-actions .btn.primary:hover { background: var(--accent-hover); }
}