/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
}

.hero__nav  { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 34px 44px 0; }
.hero__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px; padding: 0 24px; text-align: center; }
.hero__foot { position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 18px; padding: 0 44px 40px; flex-wrap: wrap; }

.hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--accent);
  padding: 15px 36px; border-radius: 100px;
  transition: color .2s ease, background .2s ease;
}
.hero__cta-arrow { display: inline-block; transition: transform .2s ease; }
@media (hover: hover) {
  .hero__cta:hover { color: #fff; background: var(--accent-soft); }
  .hero__cta:hover .hero__cta-arrow { transform: translateX(3px); }
}
.hero__cta:active { color: #fff; background: var(--accent-soft); }

@media (max-width: 640px), (max-height: 700px) {
  .hero__nav  { padding: 20px 24px 0; }
  .hero__body { gap: 14px; padding: 0 20px; }
  .hero__foot { gap: 12px; padding: 0 24px 24px; }
  .name       { font-size: clamp(40px, 15vw, 80px); }
  .meta       { font-size: 12px; gap: 10px; }
  .hero__cta  { padding: 13px 28px; font-size: 14px; }
  .nav-contact__email { font-size: 14px; }
  .nav-contact__phone { font-size: 13px; }
}

.name {
  font-size: clamp(56px, 16vw, 188px);
  font-weight: 200; letter-spacing: -0.05em; line-height: 1;
  color: var(--ink); display: inline-flex; align-items: baseline;
}
.name .od { width: 0.30em; height: 0.30em; align-self: flex-end; margin-bottom: 0.1em; }

.meta { display: flex; gap: 16px; align-items: center; font-size: clamp(12px, 1.4vw, 15px);
  color: var(--muted); letter-spacing: 0.02em; }