/* Brawnd premium hero calibration
   Keep the existing visual identity, but lower the overall visual volume and
   remove unnecessary template-like decoration. The hero should begin quickly
   beneath the navigation while preserving deliberate breathing room. */

:root {
  --type-hero: clamp(56px, 6.95vw, 104px);
}

/* The old eyebrow repeated what the page already communicates and added a
   generic agency-template signal. Remove it completely from the visual flow. */
.hero .eyebrow {
  display: none;
}

/* Use the top of the viewport more confidently. The fixed header is 88px tall,
   so 142px leaves a refined ~54px reveal beneath it instead of a large void. */
.hero {
  align-items: flex-start;
  padding-top: 142px;
  padding-bottom: 92px;
}

.hero::before {
  opacity: .82;
}

.hero::after {
  opacity: .76;
}

.hero-grid {
  gap: clamp(72px, 7.8vw, 124px);
  align-items: center;
}

.hero h1,
.hero-headline {
  margin-top: 0;
  line-height: .93;
  letter-spacing: -0.036em;
}

.hero-copy > p {
  max-width: 610px;
  margin-top: 42px;
  font-size: clamp(16px, 1.12vw, 19px);
  line-height: 1.72;
}

.hero-actions {
  margin-top: 40px;
}

.hero-dynamic-text::after {
  background: rgba(245,241,236,.22);
  animation-duration: 1.6s;
}

.hero-dynamic-text.is-deleting::after {
  background: rgba(245,241,236,.14);
}

/* The object remains distinctive, but it is no longer equal in visual weight
   to the headline. Individual scale is used so pointer transforms still work. */
.hero-visual > .brawnd-block-stage {
  scale: .90;
  transform-origin: center;
  filter: drop-shadow(0 22px 58px rgba(0,0,0,.24));
}

@media (max-width: 980px) {
  .hero-grid {
    gap: 52px;
  }

  .hero-copy > p {
    max-width: 590px;
    margin-top: 36px;
  }

  .hero-visual > .brawnd-block-stage {
    scale: .92;
  }
}

@media (max-width: 640px) {
  :root {
    --type-hero: clamp(48px, 13.2vw, 68px);
  }

  .hero-grid {
    gap: 34px;
  }

  .hero h1,
  .hero-headline {
    margin-top: 0;
    line-height: .95;
    letter-spacing: -0.031em;
  }

  .hero-copy > p {
    max-width: 100%;
    margin-top: 29px;
    font-size: 16px;
    line-height: 1.68;
  }

  .hero-actions {
    margin-top: 32px;
  }

  .hero-visual > .brawnd-block-stage {
    scale: .96;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dynamic-text::after {
    animation: none;
  }
}