.hero {
  padding: 4rem 1.5rem 0;
}

.hero::after {
  margin: 70px auto 40px;
}

.hero-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  max-width: 1280px;
  margin: 0 auto;
}

.hero-image-wrap {
  flex-shrink: 0;
}

/*
  No ring, no chrome — the crop is the edge. A drawn border around a photo
  reads as a frame stuck on top of it; letting the image meet the page
  directly is what makes it feel like part of the layout rather than an
  asset dropped into it.

  Depth comes from shadow instead, in three layers rather than one blur:
  a tight contact shadow, a mid falloff, and a wide ambient one. Real light
  does this, and a single large blur is the thing that reads as a sticker.
  The values stay gentle because the page behind it is plain — a busy
  backdrop would need the separation, this doesn't.
*/
.rikesh-image {
  display: block;
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius-circle);
  box-shadow:
    0 2px 6px rgba(var(--color-black-rgb), 0.06),
    0 12px 24px rgba(var(--color-black-rgb), 0.08),
    0 28px 56px rgba(var(--color-black-rgb), 0.1);
}

.hero-content {
  display: flex;
  flex-direction: column;
  max-width: 480px;
}

/*
  Display type. Letters read too far apart as they grow, so the largest text
  on the page gets the most negative tracking and the tightest leading — see
  css/base/typography.css for the scale.
*/
.hero-content h1 {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 3rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 800;
  color: var(--color-heading);
}

.hero-content h2 {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-brand);
  letter-spacing: 0.02em;
}

.hero-content h3 {
  margin: 1rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.hero-socials {
  list-style: none;
  display: flex;
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: background-color var(--response-fast) var(--ease-exit),
    color var(--response-fast) var(--ease-exit),
    border-color var(--response-fast) var(--ease-exit),
    transform var(--response-fast) var(--ease-exit);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.social-link:hover {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
  transform: translateY(var(--motion-lift));
  transition: background-color var(--response-fast) var(--ease-enter),
    color var(--response-fast) var(--ease-enter),
    border-color var(--response-fast) var(--ease-enter),
    transform var(--response-fast) var(--ease-enter);
}

/* Pressed beats hovered: the lift gives way to a push-in, immediately. */
.social-link.is-pressed,
.social-link.is-pressed:hover {
  transform: translateY(0) scale(var(--press-scale));
  transition: transform var(--response-instant) var(--ease-enter);
}

@media (max-width: 860px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .hero-content {
    align-items: center;
  }

  .rikesh-image {
    width: 220px;
    height: 220px;
  }

  .hero-content h1 {
    font-size: 2.25rem;
  }
}