/* Harry's original photograph keeps its full native frame. */
.hero-profile-img,
.mobile-hero-image {
  aspect-ratio: 2000 / 1335;
  object-fit: contain;
  object-position: center;
  clip-path: none;
  mask-image: none;
  margin: 0;
}

@media (min-width: 768px) {
  .nesh-logo-wrap { aspect-ratio: auto; height: min(24.84vw, 28vh); }
  .nesh-logo-ghost { aspect-ratio: auto; height: min(24.84vw, 28vh); }
  .nesh-logo-svg { height: 100%; }
  .hero-container { height: 100%; }
  .hero-profile-img {
    position: absolute;
    /* The nav row under the wordmark grows with viewport width (about 5.6vw),
       so the photo's top must track vw, not a fixed offset, or wide windows
       clip the menu links behind the photo. */
    inset: calc(min(24.84vw, 28vh) + 5.7vw + 2px) 1.8vw auto auto;
    width: min(62vw, calc((100vh - min(24.84vw, 28vh) - 5.7vw - 28px) * 1.498));
    height: auto;
    max-width: none;
    border-radius: 14px;
    transform: none !important;
  }
  /* The caption rides the photo's lower right corner so the photo can use the
     full height. Same translucent chip treatment as the stat cards. */
  .hero-right-text {
    position: absolute;
    right: calc(1.8vw + 14px);
    bottom: 36px;
    margin: 0;
    background: rgba(213, 207, 190, .92);
    padding: 12px 16px;
    border-radius: 10px;
  }
  .hero-content-layout {
    left: 0;
    top: calc(min(24.84vw, 28vh) + 120px);
    bottom: auto;
    width: 44%;
    align-items: flex-start;
  }
  .hero-heading { color: #000; font-size: clamp(2.3rem, min(5.3vw, 7vh), 5.5rem); }
  .hero-left-text,.hero-right-text { font-size: clamp(14px, 1.1vw, 18px); line-height: 1.5; }
  .hero-right-text { max-width: 340px; }
  .hero-cards-wrap {
    inset: calc(min(24.84vw, 28vh) + 5.7vw + 42px) auto auto
      calc(100vw - 1.8vw - min(62vw, (100vh - min(24.84vw, 28vh) - 5.7vw - 28px) * 1.498) - 5px);
    width: 180px;
  }
  .hero-cards-left { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-card-1-wrap { left: 0; }
  .hero-card-1 { width: 140px; height: 120px; padding: 14px; gap: 8px; }
  .hero-card-2 { width: 180px; height: 84px; padding: 14px; gap: 12px; }
  .experience-number { min-width: 80px; width: 80px; }
  .experience-text,.hero-webflow-projects-text { font-size: 14px; }
  .hero-webflow-icon-wrap { width: 55px; }
  .hero-card-3 { inset: 240px auto auto 0; width: 180px; padding: 18px; gap: 10px; font-size: 14px; }
  /* The chips the visitor sees are the nav duplicates, and motion.js writes
     their light glass color inline on every scroll frame. The important flag
     is required to beat that inline style; dark glass keeps the white labels
     readable over the bright photograph. */
  .experience-bg, .hero-card-2-bg,
  .nav-webflow-bg, .nav-experience-bg { background-color: rgba(21,21,17,.78) !important; }
  .hero-card-3 { background-color: rgba(21,21,17,.78); }
}

@media (min-width: 768px) and (max-height: 900px) { .hero-card-3 { display: none; } }

@media (max-width: 767px) {
  .hero { --photo-top: 46vw; min-height: 0; padding-bottom: 40px; }
  .hero-sticky { min-height: 0; }
  .hero-container { padding-top: calc(var(--photo-top) + (100vw - 40px) * .6675 + 236px); }
  .mobile-hero-image-wrap {
    inset: var(--photo-top) 20px auto;
    height: auto;
    aspect-ratio: 2000 / 1335;
    overflow: hidden;
    border-radius: 12px;
  }
  .mobile-hero-image {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .hero-content-layout {
    inset: calc(var(--photo-top) + 16px + (100vw - 40px) * .6675) 20px auto;
    width: calc(100% - 40px);
    align-items: flex-start;
  }
  .hero-heading { color: #000; font-size: clamp(40px, 10.9vw, 68px); }
  .hero-cards-wrap {
    inset: calc(var(--photo-top) + 34px + (100vw - 40px) * .6675) 20px auto auto;
    width: 140px;
    height: auto;
  }
  .hero-cards-left { height: auto; padding: 0; gap: 10px; align-items: flex-end; }
  .hero-card-1-wrap { margin: 0; }
  .hero-card-2-wrap { position: static; }
  .hero-card-3 { display: none; }
  .hero-card-1,.hero-card-2 { color: #000; }
  .hero-card-2 { width: 126px; min-height: 60px; padding: 10px; gap: 8px; }
  .hero-webflow-icon { width: 36px; }
  .hero-webflow-icon-wrap { width: 40px; }
  .hero-webflow-projects-text { font-size: 12px; }
  .hero-card-1 { width: 126px; height: auto; min-height: 108px; padding: 12px; gap: 8px; }
  .experience-number { min-width: 70px; width: 70px; }
  .experience-text { font-size: 12px; }
  .hero-left-text,.hero-right-text { top: 0; }
  .hero-left-text { margin-bottom: 14px; }
}