@media (max-width: 960px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .nav {
    display: none;
  }

  .mobile-menu-inline {
    display: block;
  }

  .hero-desktop {
    display: none;
  }

  .hero-mobile {
    display: block;
    min-height: 88vh;
  }

  .hero-mobile .hero-overlay {
    min-height: 88vh;
    align-items: end;
  }

  .hero-mobile .hero-copy {
    width: calc(100% - 40px);
    margin-left: 20px;
    padding-top: 128px;
    padding-bottom: 7px;
  }

  .hero-media {
    background:
      linear-gradient(
        to top,
        rgba(6, 6, 6, 0.92) 0%,
        rgba(6, 6, 6, 0.72) 22%,
        rgba(6, 6, 6, 0.36) 50%,
        rgba(6, 6, 6, 0.12) 76%,
        rgba(6, 6, 6, 0.04) 100%
      ),
      url('../assets/images/Profilbilde 2.jpg') 50% center / cover no-repeat;
  }

  h1 {
    max-width: 100%;
    font-size: clamp(1.8rem, 6vw, 2rem);
  }

  .lead,
  .intro {
    max-width: 100%;
  }

  .contact-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-card {
    min-height: 0;
  }

  .about-skills-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .skills-grid-compact {
    grid-template-columns: 2fr 2fr;
  }
}

@media (min-width: 961px) {
  .hero-desktop {
    display: block;
  }

  .hero-mobile {
    display: none;
  }

  .mobile-menu-inline {
    display: none;
  }
}

@media (max-width: 720px) {
  .about-hero {
    padding-top: 56px;
  }

  .section .card {
    padding: 20px;
  }

  .topbar-inner {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0;
    min-height: 68px;
  }

  .topbar-actions {
    width: auto;
    justify-content: flex-end;
  }

  .contact-showcase {
    padding: 0;
    border-radius: 0;
  }

  .contact-intro {
    font-size: 1.16rem;
  }

  .contact-card {
    padding: 26px 18px 22px;
    border-radius: 20px;
  }

  .contact-card-icon {
    width: 86px;
    height: 86px;
  }

  .contact-card-icon svg {
    width: 36px;
    height: 36px;
  }

  .contact-card h3 {
    margin-top: 16px;
    font-size: 1.72rem;
  }

  .contact-card-action {
    padding-top: 20px;
  }

  .about-skills-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .skills-grid-compact {
    grid-template-columns: 1fr;
  }

  .skill-card {
    min-height: 100px;
  }
}