/* ===== HERO ===== */

.hero-grids {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Space Grotesk', sans-serif;
}

/* Giant title */
.hero-grids__title-area {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 32px 40px;
  overflow: hidden;
}

.hero-grids__label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.5;
  margin-bottom: 8px;
}

.hero-grids__title {
  font-size: clamp(72px, 14vw, 220px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 0;
}

.hero-grids__title-word {
  display: block;
}

.hero-grids__title-blocks {
  display: inline-flex;
  gap: 12px;
  vertical-align: baseline;
  margin-right: 20px;
}

.hero-grids__block {
  display: inline-block;
  width: 0.55em;
  height: 0.8em;
  background: currentColor;
  vertical-align: baseline;
  position: relative;
  top: 0.05em;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  .hero-grids__title-area { padding: 10px 20px 32px; }
  .hero-grids__title { font-size: clamp(48px, 12vw, 100px); line-height: 0.88; }
  .hero-grids__title-blocks { display: none; }
}

@media (max-width: 480px) {
  .hero-grids__title-area { padding: 8px 16px 24px; }
  .hero-grids__title { font-size: clamp(40px, 10vw, 72px); }
}