/* Mobile */
@media (max-width: 768px) {
  /* =========================
     Navbar
  ========================= */

  .navbar,
  .navbar.is-small,
  .navbar.is-small.is-hover-expanded {
    width: auto;
    height: 56px;

    left: 25px;
    right: 25px;
    transform: none;

    padding: 0;

    transition: height 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.12s;
  }

  /* Mobile menu open */

  .navbar.is-mobile-open,
  .navbar.is-small.is-mobile-open,
  .navbar.is-small.is-hover-expanded.is-mobile-open {
    width: auto;
    height: 313px;

    transition: height 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  }

  /* =========================
     Profile
  ========================= */

  .navbar .profile {
    position: absolute;
    top: 11px;
    left: 11px;

    height: 32px;

    gap: 7px;

    z-index: 2;
  }

  .navbar .profile-img {
    width: 32px;
    height: 32px;
  }

  .navbar .profile-name {
    font-size: 15px;
    line-height: 1;
  }

  /* Closed mobile state = short name */

  .navbar:not(.is-mobile-open) .last-name {
    opacity: 0;
    max-width: 0;
    margin-left: 0;

    transition:
      opacity 0.25s ease,
      max-width 0s 0.25s,
      margin-left 0s 0.25s;
  }

  /* Open mobile state = full name */

  .navbar.is-mobile-open .last-name {
    opacity: 1;
    max-width: 80px;
    margin-left: 4px;

    transition:
      opacity 0.3s ease 0.15s,
      max-width 0s,
      margin-left 0s;
  }

  /* =========================
     Nav Actions
  ========================= */

  .navbar .nav-actions {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: none;

    display: block;
  }

  /* =========================
     Hamburger
  ========================= */

  .navbar .hamburger,
  .navbar.is-small .hamburger,
  .navbar.is-small.is-hover-expanded .hamburger {
    width: 24px;
    height: 24px;

    position: absolute;
    top: 16px;
    right: 11px;
    left: auto;

    transform: none;

    opacity: 1;
    pointer-events: auto;

    z-index: 3;
  }

  /* Closed = hamburger */

  .navbar:not(.is-mobile-open) .hamburger span:nth-child(1) {
    transform: translateY(0) rotate(0deg);
  }

  .navbar:not(.is-mobile-open) .hamburger span:nth-child(2) {
    opacity: 1;
  }

  .navbar:not(.is-mobile-open) .hamburger span:nth-child(3) {
    transform: translateY(0) rotate(0deg);
  }

  /* Open = X */

  .navbar.is-mobile-open .hamburger span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  .navbar.is-mobile-open .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .navbar.is-mobile-open .hamburger span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* =========================
     Mobile Navigation
  ========================= */

  .navbar .nav-links {
    position: absolute;

    top: 108px;
    left: 0;

    width: 100%;

    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;

    transform: none;
  }

  /* Keep container ready but unclickable while closed */

  .navbar:not(.is-mobile-open) .nav-links {
    opacity: 1;
    transform: none;
    pointer-events: none;
  }

  .navbar.is-mobile-open .nav-links {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Work / Services */

  .navbar .nav-links > a:not(.contact-btn) {
    font-size: 24px;
    line-height: 1.1;
  }

  /* Contact */

  .navbar .nav-links .contact-btn {
    height: 40px;

    margin-top: 18px;
    padding: 8px 18px;

    font-size: 16px;
  }

  /* =========================
     Link entrance animation
  ========================= */

  .navbar .nav-links > * {
    opacity: 0;
    transform: translateX(-22px);

    transition:
      opacity 0.28s ease,
      transform 0.38s cubic-bezier(0.76, 0, 0.24, 1),
      color 0.2s cubic-bezier(0.44, 0, 0.56, 1),
      box-shadow 0.3s ease;
  }

  .navbar.is-mobile-open .nav-links > * {
    opacity: 1;
    transform: translateX(0);
  }

  /* Staggered entrance */

  .navbar.is-mobile-open .nav-links > :nth-child(1) {
    transition-delay: 0.14s;
  }

  .navbar.is-mobile-open .nav-links > :nth-child(2) {
    transition-delay: 0.2s;
  }

  .navbar.is-mobile-open .nav-links > :nth-child(3) {
    transition-delay: 0.26s;
  }

  /* =========================
     Page Container
  ========================= */

  .page-container {
    padding-left: 25px;
    padding-right: 25px;
  }

  /* =========================
     Hero
  ========================= */

  .hero {
    padding-top: 100px;
  }

  .hero-stage {
    width: 100%;
    height: auto;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* =========================
     Hero Heading
  ========================= */

  .hero-title {
    width: 100%;

    position: relative;
    top: auto;
    left: auto;

    transform: none;

    text-align: center;

    z-index: 1;
  }

  .hero-think {
    font-size: clamp(62px, 21vw, 82px);
    line-height: 0.88;
    letter-spacing: -0.04em;
  }

  .hero-creatively {
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    text-align: center;

    font-size: min(61px, 15vw);
    line-height: 0.92;
    letter-spacing: normal;
    white-space: nowrap;
  }

  /* =========================
     Hero Avatar
  ========================= */

  .hero-avatar-shell {
    width: min(82vw, 320px);

    position: relative;

    top: auto;
    left: auto;

    margin-top: -40px;

    transform: none;

    z-index: 3;
  }

  .hero-avatar-motion {
    width: 100%;
    height: 100%;
  }

  .hero-avatar {
    width: 100%;
    height: 100%;

    object-fit: contain;
  }

  /* =========================
     Hero Bottom Content
  ========================= */

  .hero-bottom {
    width: 100%;

    position: relative;

    top: auto;
    left: auto;

    padding-left: 0;
    padding-right: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    z-index: 5;

    /* Desktop parent animation off on mobile */
    opacity: 1;
    animation: none;
  }

  /* =========================
     Hero Copy
  ========================= */

  .hero-copy {
    width: 100%;
    max-width: 280px;

    color: #b8b8b8;

    font-size: 16px;
    font-weight: 400;
    line-height: 22px;

    text-align: center;
  }

  /* =========================
     Hero CTA
  ========================= */

  .hero-cta {
    margin-top: 22px;
  }

  /* =========================
     Mobile Hero Animations
  ========================= */

  @keyframes mobileHeroCopyEnter {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mobileHeroCtaEnter {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-intro-mobile .hero-copy {
    opacity: 0;
    transform: translateY(20px);
    animation: mobileHeroCopyEnter 0.8s ease 0.5s forwards;
  }

  .hero-intro-mobile .hero-cta {
    opacity: 0;
    transform: translateY(20px);
    animation: mobileHeroCtaEnter 0.8s ease 0.75s forwards;
  }

  .hero-intro-done .hero-copy,
  .hero-intro-done .hero-cta {
    opacity: 1;
    transform: translateY(0);
    animation: none;
  }
}

/* =========================
   Client Trust
========================= */

/* Tablet and mobile */

@media (max-width: 768px) {
  .client-trust {
    margin-top: 48px;
  }

  .client-trust__inner {
    flex-direction: column;
  }

  .client-trust__proof {
    flex-direction: column;
    gap: 8px;
    padding-right: 0;
  }

  .client-trust__caption {
    align-items: center;
  }

  .client-trust__logos {
    flex: none;
    width: 100%;
  }
}